chore(release): 2.5.0 [skip ci]

## [2.5.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.6...v2.5.0) (2025-10-08)

### Features

* display room info and network players in mini app nav ([5e3261f](5e3261f3be))

CHANGELOG.md

@@ -1,3 +1,52 @@
+## [2.5.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.6...v2.5.0) (2025-10-08)
+
+
+### Features
+
+* display room info and network players in mini app nav ([5e3261f](https://github.com/antialias/soroban-abacus-flashcards/commit/5e3261f3bec8c19ec88c9a35a7e6ef8eda88a55e))
+
+## [2.4.6](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.5...v2.4.6) (2025-10-08)
+
+
+### Bug Fixes
+
+* real-time room member updates via globalThis socket.io sharing ([94a1d9b](https://github.com/antialias/soroban-abacus-flashcards/commit/94a1d9b11058bfb4b54a4753e143cf85f215e913))
+
+## [2.4.5](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.4...v2.4.5) (2025-10-08)
+
+
+### Bug Fixes
+
+* send all members (not just online) in socket broadcasts ([3fa6cce](https://github.com/antialias/soroban-abacus-flashcards/commit/3fa6cce17a7acd940cf5a9e6433bf6c4b497540c))
+
+## [2.4.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.3...v2.4.4) (2025-10-08)
+
+
+### Bug Fixes
+
+* correctly access getSocketIO from dynamic import ([30abf33](https://github.com/antialias/soroban-abacus-flashcards/commit/30abf33ee86b36f2a98014e5b017fa8e466a2107))
+
+## [2.4.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.2...v2.4.3) (2025-10-08)
+
+
+### Bug Fixes
+
+* resolve socket-server import path for Next.js build ([12c3c37](https://github.com/antialias/soroban-abacus-flashcards/commit/12c3c37ff8e1d3df71d72e527c08fa975043c504))
+
+## [2.4.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.1...v2.4.2) (2025-10-08)
+
+
+### Bug Fixes
+
+* broadcast member join/leave events immediately via API ([ebfc88c](https://github.com/antialias/soroban-abacus-flashcards/commit/ebfc88c5ea0a8a0fdda039fa129e1054b9c42e65))
+
+## [2.4.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.4.0...v2.4.1) (2025-10-08)
+
+
+### Bug Fixes
+
+* make leave room button actually remove user from room ([49f12f8](https://github.com/antialias/soroban-abacus-flashcards/commit/49f12f8cab631fedd33f1bc09febfdc95e444625))
+
 ## [2.4.0](https://github.com/antialias/soroban-abacus-flashcards/compare/v2.3.1...v2.4.0) (2025-10-08)
 
 

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

@@ -32,7 +32,9 @@
       "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(npm run:*)",
+      "Bash(git pull:*)",
+      "Bash(git stash:*)"
     ],
     "deny": [],
     "ask": []

apps/web/__tests__/room-realtime-updates.e2e.test.ts

@@ -0,0 +1,371 @@
+/**
+ * @vitest-environment node
+ */
+
+import { createServer } from 'http'
+import { eq } from 'drizzle-orm'
+import { io as ioClient, type Socket } from 'socket.io-client'
+import { afterEach, beforeEach, describe, expect, it, afterAll, beforeAll } from 'vitest'
+import { db, schema } from '../src/db'
+import { createRoom } from '../src/lib/arcade/room-manager'
+import { addRoomMember } from '../src/lib/arcade/room-membership'
+import { initializeSocketServer } from '../socket-server'
+import type { Server as SocketIOServerType } from 'socket.io'
+
+/**
+ * Real-time Room Updates E2E Tests
+ *
+ * Tests that socket broadcasts work correctly when users join/leave rooms.
+ * Simulates multiple connected users and verifies they receive real-time updates.
+ */
+
+describe('Room Real-time Updates', () => {
+  let testUserId1: string
+  let testUserId2: string
+  let testGuestId1: string
+  let testGuestId2: string
+  let testRoomId: string
+  let socket1: Socket
+  let httpServer: any
+  let io: SocketIOServerType
+  let serverPort: number
+
+  beforeAll(async () => {
+    // Create HTTP server and initialize Socket.IO for testing
+    httpServer = createServer()
+    io = initializeSocketServer(httpServer)
+
+    // Find an available port
+    await new Promise<void>((resolve) => {
+      httpServer.listen(0, () => {
+        serverPort = (httpServer.address() as any).port
+        console.log(`Test socket server listening on port ${serverPort}`)
+        resolve()
+      })
+    })
+  })
+
+  afterAll(async () => {
+    // Close all socket connections
+    if (io) {
+      io.close()
+    }
+    if (httpServer) {
+      await new Promise<void>((resolve) => {
+        httpServer.close(() => resolve())
+      })
+    }
+  })
+
+  beforeEach(async () => {
+    // Create test users
+    testGuestId1 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    testGuestId2 = `test-guest-${Date.now()}-${Math.random().toString(36).slice(2)}`
+
+    const [user1] = await db.insert(schema.users).values({ guestId: testGuestId1 }).returning()
+    const [user2] = await db.insert(schema.users).values({ guestId: testGuestId2 }).returning()
+
+    testUserId1 = user1.id
+    testUserId2 = user2.id
+
+    // Create a test room
+    const room = await createRoom({
+      name: 'Realtime Test Room',
+      createdBy: testGuestId1,
+      creatorName: 'User 1',
+      gameName: 'matching',
+      gameConfig: { difficulty: 6 },
+      ttlMinutes: 60,
+    })
+    testRoomId = room.id
+  })
+
+  afterEach(async () => {
+    // Disconnect sockets
+    if (socket1?.connected) {
+      socket1.disconnect()
+    }
+
+    // Clean up room members
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.roomId, testRoomId))
+
+    // Clean up rooms
+    if (testRoomId) {
+      await db.delete(schema.arcadeRooms).where(eq(schema.arcadeRooms.id, testRoomId))
+    }
+
+    // Clean up users
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId1))
+    await db.delete(schema.users).where(eq(schema.users.id, testUserId2))
+  })
+
+  it('should broadcast member-joined when a user joins via API', async () => {
+    // User 1 joins the room via API first (this is what happens when they click "Join Room")
+    await addRoomMember({
+      roomId: testRoomId,
+      userId: testGuestId1,
+      displayName: 'User 1',
+      isCreator: false,
+    })
+
+    // User 1 connects to socket
+    socket1 = ioClient(`http://localhost:${serverPort}`, {
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
+
+    // Wait for socket to connect
+    await new Promise<void>((resolve, reject) => {
+      socket1.on('connect', () => resolve())
+      socket1.on('connect_error', (err) => reject(err))
+      setTimeout(() => reject(new Error('Connection timeout')), 2000)
+    })
+
+    // Small delay to ensure event handlers are set up
+    await new Promise((resolve) => setTimeout(resolve, 50))
+
+    // Set up listener for room-joined BEFORE emitting
+    const roomJoinedPromise = new Promise<void>((resolve, reject) => {
+      socket1.on('room-joined', () => resolve())
+      socket1.on('room-error', (err) => reject(new Error(err.error)))
+      setTimeout(() => reject(new Error('Room-joined timeout')), 3000)
+    })
+
+    // Now emit the join-room event
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
+
+    // Wait for confirmation
+    await roomJoinedPromise
+
+    // Set up listener for member-joined event BEFORE User 2 joins
+    const memberJoinedPromise = new Promise<any>((resolve, reject) => {
+      socket1.on('member-joined', (data) => {
+        resolve(data)
+      })
+      setTimeout(() => reject(new Error('Timeout waiting for member-joined event')), 3000)
+    })
+
+    // User 2 joins the room via addRoomMember
+    const { member: newMember } = await addRoomMember({
+      roomId: testRoomId,
+      userId: testGuestId2,
+      displayName: 'User 2',
+      isCreator: false,
+    })
+
+    // Manually trigger the broadcast (this is what the API route SHOULD do)
+    const { getRoomMembers } = await import('../src/lib/arcade/room-membership')
+    const { getRoomActivePlayers } = await import('../src/lib/arcade/player-manager')
+
+    const members = await getRoomMembers(testRoomId)
+    const memberPlayers = await getRoomActivePlayers(testRoomId)
+
+    const memberPlayersObj: Record<string, any[]> = {}
+    for (const [uid, players] of memberPlayers.entries()) {
+      memberPlayersObj[uid] = players
+    }
+
+    io.to(`room:${testRoomId}`).emit('member-joined', {
+      roomId: testRoomId,
+      userId: testGuestId2,
+      members,
+      memberPlayers: memberPlayersObj,
+    })
+
+    // Wait for the socket broadcast with timeout
+    const data = await memberJoinedPromise
+
+    // Verify the broadcast data
+    expect(data).toBeDefined()
+    expect(data.roomId).toBe(testRoomId)
+    expect(data.userId).toBe(testGuestId2)
+    expect(data.members).toBeDefined()
+    expect(Array.isArray(data.members)).toBe(true)
+
+    // Verify both users are in the members list
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId1)
+    expect(memberUserIds).toContain(testGuestId2)
+
+    // Verify the new member details
+    const addedMember = data.members.find((m: any) => m.userId === testGuestId2)
+    expect(addedMember).toBeDefined()
+    expect(addedMember.displayName).toBe('User 2')
+    expect(addedMember.roomId).toBe(testRoomId)
+  })
+
+  it('should broadcast member-left when a user leaves via API', async () => {
+    // User 1 joins the room first
+    await addRoomMember({
+      roomId: testRoomId,
+      userId: testGuestId1,
+      displayName: 'User 1',
+      isCreator: false,
+    })
+
+    // User 2 joins the room
+    await addRoomMember({
+      roomId: testRoomId,
+      userId: testGuestId2,
+      displayName: 'User 2',
+      isCreator: false,
+    })
+
+    // User 1 connects to socket
+    socket1 = ioClient(`http://localhost:${serverPort}`, {
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
+
+    await new Promise<void>((resolve) => {
+      socket1.on('connect', () => resolve())
+    })
+
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
+
+    await new Promise<void>((resolve) => {
+      socket1.on('room-joined', () => resolve())
+    })
+
+    // Set up listener for member-left event
+    const memberLeftPromise = new Promise<any>((resolve) => {
+      socket1.on('member-left', (data) => {
+        resolve(data)
+      })
+    })
+
+    // User 2 leaves the room via API
+    await db.delete(schema.roomMembers).where(eq(schema.roomMembers.userId, testGuestId2))
+
+    // Manually trigger the leave broadcast (simulating what the API does)
+    const { getSocketIO } = await import('../src/lib/socket-io')
+    const io = await getSocketIO()
+    if (io) {
+      const { getRoomMembers } = await import('../src/lib/arcade/room-membership')
+      const { getRoomActivePlayers } = await import('../src/lib/arcade/player-manager')
+
+      const members = await getRoomMembers(testRoomId)
+      const memberPlayers = await getRoomActivePlayers(testRoomId)
+
+      const memberPlayersObj: Record<string, any[]> = {}
+      for (const [uid, players] of memberPlayers.entries()) {
+        memberPlayersObj[uid] = players
+      }
+
+      io.to(`room:${testRoomId}`).emit('member-left', {
+        roomId: testRoomId,
+        userId: testGuestId2,
+        members,
+        memberPlayers: memberPlayersObj,
+      })
+    }
+
+    // Wait for the socket broadcast with timeout
+    const data = await Promise.race([
+      memberLeftPromise,
+      new Promise((_, reject) =>
+        setTimeout(() => reject(new Error('Timeout waiting for member-left event')), 2000)
+      ),
+    ])
+
+    // Verify the broadcast data
+    expect(data).toBeDefined()
+    expect(data.roomId).toBe(testRoomId)
+    expect(data.userId).toBe(testGuestId2)
+    expect(data.members).toBeDefined()
+    expect(Array.isArray(data.members)).toBe(true)
+
+    // Verify User 2 is no longer in the members list
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId1)
+    expect(memberUserIds).not.toContain(testGuestId2)
+  })
+
+  it('should update both members and players lists in member-joined broadcast', async () => {
+    // Create an active player for User 2
+    const [player2] = await db
+      .insert(schema.players)
+      .values({
+        userId: testUserId2,
+        name: 'Player 2',
+        emoji: '🎮',
+        color: '#3b82f6',
+        isActive: true,
+      })
+      .returning()
+
+    // User 1 connects and joins room
+    socket1 = ioClient(`http://localhost:${serverPort}`, {
+      path: '/api/socket',
+      transports: ['websocket'],
+    })
+
+    await new Promise<void>((resolve) => {
+      socket1.on('connect', () => resolve())
+    })
+
+    socket1.emit('join-room', { roomId: testRoomId, userId: testGuestId1 })
+
+    await new Promise<void>((resolve) => {
+      socket1.on('room-joined', () => resolve())
+    })
+
+    const memberJoinedPromise = new Promise<any>((resolve) => {
+      socket1.on('member-joined', (data) => {
+        resolve(data)
+      })
+    })
+
+    // User 2 joins via API
+    await addRoomMember({
+      roomId: testRoomId,
+      userId: testGuestId2,
+      displayName: 'User 2',
+      isCreator: false,
+    })
+
+    // Manually trigger the broadcast (simulating what the API does)
+    const { getRoomMembers: getRoomMembers3 } = await import('../src/lib/arcade/room-membership')
+    const { getRoomActivePlayers: getRoomActivePlayers3 } = await import(
+      '../src/lib/arcade/player-manager'
+    )
+
+    const members2 = await getRoomMembers3(testRoomId)
+    const memberPlayers2 = await getRoomActivePlayers3(testRoomId)
+
+    const memberPlayersObj2: Record<string, any[]> = {}
+    for (const [uid, players] of memberPlayers2.entries()) {
+      memberPlayersObj2[uid] = players
+    }
+
+    io.to(`room:${testRoomId}`).emit('member-joined', {
+      roomId: testRoomId,
+      userId: testGuestId2,
+      members: members2,
+      memberPlayers: memberPlayersObj2,
+    })
+
+    const data = await Promise.race([
+      memberJoinedPromise,
+      new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), 2000)),
+    ])
+
+    // Verify members list is updated
+    expect(data.members).toBeDefined()
+    const memberUserIds = data.members.map((m: any) => m.userId)
+    expect(memberUserIds).toContain(testGuestId2)
+
+    // Verify players list is updated
+    expect(data.memberPlayers).toBeDefined()
+    expect(data.memberPlayers[testGuestId2]).toBeDefined()
+    expect(Array.isArray(data.memberPlayers[testGuestId2])).toBe(true)
+
+    // User 2's players should include the active player we created
+    const user2Players = data.memberPlayers[testGuestId2]
+    expect(user2Players.length).toBeGreaterThan(0)
+    expect(user2Players.some((p: any) => p.id === player2.id)).toBe(true)
+
+    // Clean up player
+    await db.delete(schema.players).where(eq(schema.players.id, player2.id))
+  })
+})

apps/web/socket-server.js

@@ -1,29 +0,0 @@
-const { Server } = require('socket.io')
-
-function initializeSocketServer(httpServer) {
-  const io = new Server(httpServer, {
-    path: '/api/socket',
-    cors: {
-      origin: process.env.NEXT_PUBLIC_URL || 'http://localhost:3000',
-      credentials: true,
-    },
-  })
-
-  io.on('connection', (socket) => {
-    console.log('🔌 Client connected:', socket.id)
-
-    socket.on('join-arcade-session', ({ userId }) => {
-      socket.join(`arcade:${userId}`)
-      console.log(`👤 User ${userId} joined arcade room`)
-    })
-
-    socket.on('disconnect', () => {
-      console.log('🔌 Client disconnected:', socket.id)
-    })
-  })
-
-  console.log('✅ Socket.IO initialized on /api/socket')
-  return io
-}
-
-module.exports = { initializeSocketServer }

apps/web/socket-server.ts

@@ -1,5 +1,6 @@
 import type { Server as HTTPServer } from 'http'
 import { Server as SocketIOServer } from 'socket.io'
+import type { Server as SocketIOServerType } from 'socket.io'
 import {
   applyGameMove,
   createArcadeSession,
@@ -8,16 +9,25 @@ import {
   updateSessionActivity,
 } from './src/lib/arcade/session-manager'
 import { createRoom, getRoomById } from './src/lib/arcade/room-manager'
-import {
-  getOnlineRoomMembers,
-  getRoomMembers,
-  getUserRooms,
-  setMemberOnline,
-} from './src/lib/arcade/room-membership'
+import { getRoomMembers, getUserRooms, setMemberOnline } from './src/lib/arcade/room-membership'
 import { getRoomActivePlayers } from './src/lib/arcade/player-manager'
 import type { GameMove, GameName } from './src/lib/arcade/validation'
 import { matchingGameValidator } from './src/lib/arcade/validation/MatchingGameValidator'
 
+// Use globalThis to store socket.io instance to avoid module isolation issues
+// This ensures the same instance is accessible across dynamic imports
+declare global {
+  var __socketIO: SocketIOServerType | undefined
+}
+
+/**
+ * Get the socket.io server instance
+ * Returns null if not initialized
+ */
+export function getSocketIO(): SocketIOServerType | null {
+  return globalThis.__socketIO || null
+}
+
 export function initializeSocketServer(httpServer: HTTPServer) {
   const io = new SocketIOServer(httpServer, {
     path: '/api/socket',
@@ -143,7 +153,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
             // Notify all connected clients about the new session
             const newSession = await getArcadeSession(data.userId)
             if (newSession) {
-              io.to(`arcade:${data.userId}`).emit('session-state', {
+              io!.to(`arcade:${data.userId}`).emit('session-state', {
                 gameState: newSession.gameState,
                 currentGame: newSession.currentGame,
                 gameUrl: newSession.gameUrl,
@@ -159,7 +169,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
 
         if (result.success && result.session) {
           // Broadcast the updated state to all devices for this user
-          io.to(`arcade:${data.userId}`).emit('move-accepted', {
+          io!.to(`arcade:${data.userId}`).emit('move-accepted', {
             gameState: result.session.gameState,
             version: result.session.version,
             move: data.move,
@@ -190,7 +200,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
 
       try {
         await deleteArcadeSession(userId)
-        io.to(`arcade:${userId}`).emit('session-ended')
+        io!.to(`arcade:${userId}`).emit('session-ended')
       } catch (error) {
         console.error('Error ending session:', error)
         socket.emit('session-error', { error: 'Failed to end session' })
@@ -220,7 +230,6 @@ export function initializeSocketServer(httpServer: HTTPServer) {
 
         // Get room data
         const members = await getRoomMembers(roomId)
-        const onlineMembers = await getOnlineRoomMembers(roomId)
         const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object for JSON serialization
@@ -233,7 +242,6 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         socket.emit('room-joined', {
           roomId,
           members,
-          onlineMembers,
           memberPlayers: memberPlayersObj,
         })
 
@@ -241,7 +249,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         socket.to(`room:${roomId}`).emit('member-joined', {
           roomId,
           userId,
-          onlineMembers,
+          members,
           memberPlayers: memberPlayersObj,
         })
 
@@ -263,8 +271,8 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         // Mark member as offline
         await setMemberOnline(roomId, userId, false)
 
-        // Get updated online members
-        const onlineMembers = await getOnlineRoomMembers(roomId)
+        // Get updated members
+        const members = await getRoomMembers(roomId)
         const memberPlayers = await getRoomActivePlayers(roomId)
 
         // Convert memberPlayers Map to object
@@ -274,10 +282,10 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         }
 
         // Notify remaining members
-        io.to(`room:${roomId}`).emit('member-left', {
+        io!.to(`room:${roomId}`).emit('member-left', {
           roomId,
           userId,
-          onlineMembers,
+          members,
           memberPlayers: memberPlayersObj,
         })
 
@@ -302,7 +310,7 @@ export function initializeSocketServer(httpServer: HTTPServer) {
         }
 
         // Broadcast to all members in the room (including sender)
-        io.to(`room:${roomId}`).emit('room-players-updated', {
+        io!.to(`room:${roomId}`).emit('room-players-updated', {
           roomId,
           memberPlayers: memberPlayersObj,
         })
@@ -323,6 +331,8 @@ export function initializeSocketServer(httpServer: HTTPServer) {
     })
   })
 
+  // Store in globalThis to make accessible across module boundaries
+  globalThis.__socketIO = io
   console.log('✅ Socket.IO initialized on /api/socket')
   return io
 }

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

@@ -1,8 +1,9 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import { getRoomById, touchRoom } from '@/lib/arcade/room-manager'
-import { addRoomMember } from '@/lib/arcade/room-membership'
-import { getActivePlayers } from '@/lib/arcade/player-manager'
+import { addRoomMember, getRoomMembers } from '@/lib/arcade/room-membership'
+import { getActivePlayers, getRoomActivePlayers } from '@/lib/arcade/player-manager'
 import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
   params: Promise<{ roomId: string }>
@@ -56,6 +57,34 @@ export async function POST(req: NextRequest, context: RouteContext) {
     // Update room activity to refresh TTL
     await touchRoom(roomId)
 
+    // Broadcast to all users in the room via socket
+    const io = await getSocketIO()
+    if (io) {
+      try {
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
+
+        // Convert memberPlayers Map to object for JSON serialization
+        const memberPlayersObj: Record<string, any[]> = {}
+        for (const [uid, players] of memberPlayers.entries()) {
+          memberPlayersObj[uid] = players
+        }
+
+        // Broadcast to all users in this room
+        io.to(`room:${roomId}`).emit('member-joined', {
+          roomId,
+          userId: viewerId,
+          members,
+          memberPlayers: memberPlayersObj,
+        })
+
+        console.log(`[Join API] Broadcasted member-joined for user ${viewerId} in room ${roomId}`)
+      } catch (socketError) {
+        // Log but don't fail the request if socket broadcast fails
+        console.error('[Join API] Failed to broadcast member-joined:', socketError)
+      }
+    }
+
     // Build response with auto-leave info if applicable
     return NextResponse.json(
       {

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

@@ -1,7 +1,9 @@
 import { type NextRequest, NextResponse } from 'next/server'
 import { getRoomById } from '@/lib/arcade/room-manager'
-import { isMember, removeMember } from '@/lib/arcade/room-membership'
+import { getRoomMembers, isMember, removeMember } from '@/lib/arcade/room-membership'
+import { getRoomActivePlayers } from '@/lib/arcade/player-manager'
 import { getViewerId } from '@/lib/viewer'
+import { getSocketIO } from '@/lib/socket-io'
 
 type RouteContext = {
   params: Promise<{ roomId: string }>
@@ -31,6 +33,34 @@ export async function POST(_req: NextRequest, context: RouteContext) {
     // Remove member
     await removeMember(roomId, viewerId)
 
+    // Broadcast to all remaining users in the room via socket
+    const io = await getSocketIO()
+    if (io) {
+      try {
+        const members = await getRoomMembers(roomId)
+        const memberPlayers = await getRoomActivePlayers(roomId)
+
+        // Convert memberPlayers Map to object for JSON serialization
+        const memberPlayersObj: Record<string, any[]> = {}
+        for (const [uid, players] of memberPlayers.entries()) {
+          memberPlayersObj[uid] = players
+        }
+
+        // Broadcast to all users in this room
+        io.to(`room:${roomId}`).emit('member-left', {
+          roomId,
+          userId: viewerId,
+          members,
+          memberPlayers: memberPlayersObj,
+        })
+
+        console.log(`[Leave API] Broadcasted member-left for user ${viewerId} in room ${roomId}`)
+      } catch (socketError) {
+        // Log but don't fail the request if socket broadcast fails
+        console.error('[Leave API] Failed to broadcast member-left:', socketError)
+      }
+    }
+
     return NextResponse.json({ success: true })
   } catch (error) {
     console.error('Failed to leave room:', error)

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

@@ -83,8 +83,8 @@ export default function RoomDetailPage() {
 
     sock.on('member-joined', (data) => {
       console.log('Member joined:', data)
-      if (data.onlineMembers) {
-        setMembers(data.onlineMembers)
+      if (data.members) {
+        setMembers(data.members)
       }
       if (data.memberPlayers) {
         setMemberPlayers(data.memberPlayers)
@@ -93,8 +93,8 @@ export default function RoomDetailPage() {
 
     sock.on('member-left', (data) => {
       console.log('Member left:', data)
-      if (data.onlineMembers) {
-        setMembers(data.onlineMembers)
+      if (data.members) {
+        setMembers(data.members)
       }
       if (data.memberPlayers) {
         setMemberPlayers(data.memberPlayers)
@@ -196,8 +196,24 @@ export default function RoomDetailPage() {
     }
   }
 
-  const leaveRoom = () => {
-    router.push('/arcade/rooms')
+  const leaveRoom = async () => {
+    try {
+      const response = await fetch(`/api/arcade/rooms/${roomId}/leave`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || `HTTP ${response.status}`)
+      }
+
+      // Navigate to arcade home after successfully leaving
+      router.push('/arcade')
+    } catch (err) {
+      console.error('Failed to leave room:', err)
+      alert('Failed to leave room')
+    }
   }
 
   if (loading) {

apps/web/src/components/PageWithNav.tsx

@@ -3,6 +3,8 @@
 import React from 'react'
 import { useGameMode } from '../contexts/GameModeContext'
 import { useArcadeGuard } from '../hooks/useArcadeGuard'
+import { useRoomData } from '../hooks/useRoomData'
+import { useViewerId } from '../hooks/useViewerId'
 import { AppNavBar } from './AppNavBar'
 import { GameContextNav } from './nav/GameContextNav'
 import { PlayerConfigDialog } from './nav/PlayerConfigDialog'
@@ -30,6 +32,8 @@ export function PageWithNav({
 }: PageWithNavProps) {
   const { players, activePlayers, setActive, activePlayerCount } = useGameMode()
   const { hasActiveSession, activeSession } = useArcadeGuard({ enabled: false }) // Don't redirect, just get info
+  const { roomData, isInRoom } = useRoomData()
+  const { data: viewerId } = useViewerId()
   const [mounted, setMounted] = React.useState(false)
   const [configurePlayerId, setConfigurePlayerId] = React.useState<string | null>(null)
 
@@ -80,17 +84,33 @@ export function PageWithNav({
 
   // Compute arcade session info for display
   const roomInfo =
-    hasActiveSession && activeSession
+    isInRoom && roomData
       ? {
-          gameName: activeSession.currentGame,
-          playerCount: activePlayerCount, // TODO: Get actual player count from session when available
+          roomName: roomData.name,
+          gameName: roomData.gameName,
+          playerCount: roomData.members.length,
         }
-      : undefined
+      : hasActiveSession && activeSession
+        ? {
+            gameName: activeSession.currentGame,
+            playerCount: activePlayerCount,
+          }
+        : undefined
 
-  // Compute network players (other players in the arcade session)
-  // For now, we don't have this info in activeSession, so return empty array
-  // TODO: When arcade room system is implemented, fetch other players from session
-  const networkPlayers: Array<{ id: string; emoji?: string; name?: string }> = []
+  // Compute network players (other players in the room, excluding current user)
+  const networkPlayers: Array<{ id: string; emoji?: string; name?: string }> =
+    isInRoom && roomData
+      ? roomData.members
+          .filter((member) => member.userId !== viewerId)
+          .flatMap((member) => {
+            const memberPlayerList = roomData.memberPlayers[member.userId] || []
+            return memberPlayerList.map((player) => ({
+              id: player.id,
+              emoji: player.emoji,
+              name: `${player.name} (${member.displayName})`,
+            }))
+          })
+      : []
 
   // Create nav content if title is provided
   const navContent = navTitle ? (

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

@@ -22,6 +22,7 @@ interface NetworkPlayer {
 }
 
 interface ArcadeRoomInfo {
+  roomName?: string
   gameName: string
   playerCount: number
 }
@@ -134,6 +135,7 @@ export function GameContextNav({
         {/* Room Info - show when in arcade session */}
         {roomInfo && !showFullscreenSelection && (
           <RoomInfo
+            roomName={roomInfo.roomName}
             gameName={roomInfo.gameName}
             playerCount={roomInfo.playerCount}
             shouldEmphasize={shouldEmphasize}

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

@@ -1,4 +1,5 @@
 interface RoomInfoProps {
+  roomName?: string
   gameName: string
   playerCount: number
   shouldEmphasize: boolean
@@ -7,7 +8,7 @@ interface RoomInfoProps {
 /**
  * Displays current arcade room/session information
  */
-export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoProps) {
+export function RoomInfo({ roomName, gameName, playerCount, shouldEmphasize }: RoomInfoProps) {
   return (
     <div
       style={{
@@ -53,7 +54,7 @@ export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoPro
             letterSpacing: '0.5px',
           }}
         >
-          Arcade Session
+          {roomName ? 'Room' : 'Arcade Session'}
         </div>
         <div
           style={{
@@ -61,7 +62,7 @@ export function RoomInfo({ gameName, playerCount, shouldEmphasize }: RoomInfoPro
             fontWeight: 'bold',
           }}
         >
-          {gameName}
+          {roomName || gameName}
         </div>
       </div>
 

apps/web/src/hooks/useRoomData.ts

@@ -0,0 +1,162 @@
+import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { io, type Socket } from 'socket.io-client'
+
+export interface RoomMember {
+  id: string
+  userId: string
+  displayName: string
+  isOnline: boolean
+  isCreator: boolean
+}
+
+export interface RoomPlayer {
+  id: string
+  name: string
+  emoji: string
+  color: string
+}
+
+export interface RoomData {
+  id: string
+  name: string
+  code: string
+  gameName: string
+  members: RoomMember[]
+  memberPlayers: Record<string, RoomPlayer[]> // userId -> players
+}
+
+/**
+ * Hook to fetch and subscribe to room data when on a room page
+ * Returns null if not on a room page
+ */
+export function useRoomData() {
+  const pathname = usePathname()
+  const [socket, setSocket] = useState<Socket | null>(null)
+  const [roomData, setRoomData] = useState<RoomData | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Extract roomId from pathname like /arcade/rooms/[roomId]/...
+  const roomId = pathname?.match(/\/arcade\/rooms\/([^/]+)/)?.[1]
+
+  // Initialize socket connection when on a room page
+  useEffect(() => {
+    if (!roomId) {
+      if (socket) {
+        socket.disconnect()
+        setSocket(null)
+      }
+      return
+    }
+
+    const sock = io({ path: '/api/socket' })
+    setSocket(sock)
+
+    return () => {
+      sock.disconnect()
+    }
+  }, [roomId])
+
+  useEffect(() => {
+    if (!roomId) {
+      setRoomData(null)
+      return
+    }
+
+    setIsLoading(true)
+
+    // Fetch initial room data
+    fetch(`/api/arcade/rooms/${roomId}`)
+      .then((res) => {
+        if (!res.ok) throw new Error('Failed to fetch room')
+        return res.json()
+      })
+      .then((data) => {
+        setRoomData({
+          id: data.room.id,
+          name: data.room.name,
+          code: data.room.code,
+          gameName: data.room.gameName,
+          members: data.members || [],
+          memberPlayers: data.memberPlayers || {},
+        })
+        setIsLoading(false)
+      })
+      .catch((error) => {
+        console.error('Failed to fetch room data:', error)
+        setIsLoading(false)
+      })
+  }, [roomId])
+
+  // Subscribe to real-time updates via socket
+  useEffect(() => {
+    if (!socket || !roomId) return
+
+    const handleMemberJoined = (data: {
+      roomId: string
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      if (data.roomId === roomId) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    const handleMemberLeft = (data: {
+      roomId: string
+      userId: string
+      members: RoomMember[]
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      if (data.roomId === roomId) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            members: data.members,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    const handleRoomPlayersUpdated = (data: {
+      roomId: string
+      memberPlayers: Record<string, RoomPlayer[]>
+    }) => {
+      if (data.roomId === roomId) {
+        setRoomData((prev) => {
+          if (!prev) return null
+          return {
+            ...prev,
+            memberPlayers: data.memberPlayers,
+          }
+        })
+      }
+    }
+
+    socket.on('member-joined', handleMemberJoined)
+    socket.on('member-left', handleMemberLeft)
+    socket.on('room-players-updated', handleRoomPlayersUpdated)
+
+    return () => {
+      socket.off('member-joined', handleMemberJoined)
+      socket.off('member-left', handleMemberLeft)
+      socket.off('room-players-updated', handleRoomPlayersUpdated)
+    }
+  }, [socket, roomId])
+
+  return {
+    roomData,
+    isLoading,
+    isInRoom: !!roomId,
+  }
+}

apps/web/src/lib/socket-io.ts

@@ -0,0 +1,40 @@
+/**
+ * Socket.IO server instance accessor for API routes
+ * This module provides a way for API routes to access the socket.io server
+ * to broadcast real-time updates.
+ */
+
+import type { Server as SocketIOServerType } from 'socket.io'
+
+// Cache for the socket server module
+let socketServerModule: any = null
+
+/**
+ * Get the socket.io server instance
+ * Returns null if not initialized or if called on client-side
+ */
+export async function getSocketIO(): Promise<SocketIOServerType | null> {
+  // Client-side: return null
+  if (typeof window !== 'undefined') {
+    return null
+  }
+
+  // Lazy-load the socket server module on first call
+  if (!socketServerModule) {
+    try {
+      // Dynamic import to avoid bundling issues
+      socketServerModule = await import('../../socket-server')
+    } catch (error) {
+      console.error('[Socket IO] Failed to load socket server:', error)
+      return null
+    }
+  }
+
+  // Call the exported getSocketIO function from the module
+  if (socketServerModule && typeof socketServerModule.getSocketIO === 'function') {
+    return socketServerModule.getSocketIO()
+  }
+
+  console.warn('[Socket IO] getSocketIO function not found in socket-server module')
+  return null
+}

package.json

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