From f05c2f26fff3cbd5432232412d1ac71e499d429e Mon Sep 17 00:00:00 2001
From: mdadeel <mdadeel125@gmail.com>
Date: Sun, 24 May 2026 19:31:08 +0600
Subject: [PATCH 1/2] refactor: update home page UI and skeleton animations

---
 .../plans/2026-05-24-websocket-refactor.md    | 321 ++++++++++++++++++
 .../sessions/[id]/rehydrate/route.js          |   2 +-
 src/app/api/interview/sessions/route.js       |   2 +-
 src/app/contests/[id]/result/page.jsx         |  37 +-
 src/components/ui/skeleton.jsx                |   6 +-
 src/context/ProblemSolveContext.jsx           |  10 +-
 .../contests/components/ContestDetailPage.jsx |  36 +-
 src/features/interview/InterviewShell.jsx     | 204 ++++-------
 src/features/interview/ScorecardView.jsx      |  87 ++---
 .../components/SubmissionResultTab.jsx        |   7 +-
 src/lib/auth/wsToken.js                       |  29 --
 src/lib/socket-server.js                      |  38 ++-
 src/lib/ws-token.js                           |  13 +
 src/socket/namespaces/interview.js            |   2 +-
 src/socket/namespaces/voice.js                |   2 +-
 15 files changed, 510 insertions(+), 286 deletions(-)
 create mode 100644 docs/superpowers/plans/2026-05-24-websocket-refactor.md
 delete mode 100644 src/lib/auth/wsToken.js

diff --git a/docs/superpowers/plans/2026-05-24-websocket-refactor.md b/docs/superpowers/plans/2026-05-24-websocket-refactor.md
new file mode 100644
index 00000000..81b1e3f1
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-24-websocket-refactor.md
@@ -0,0 +1,321 @@
+# WebSocket Integration Refactor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development or superpowers:executing-plans.
+
+**Goal:** Single, correct WebSocket integration — one token utility, one client hook, all consumers using it.
+
+**Architecture:** Consolidate `src/lib/auth/wsToken.js` into `src/lib/ws-token.js`, make `useSecureSocket` the sole client-side entry point (with serverless bypass, SSL detection, token refresh), migrate all 4 direct `io()` callers, and fix the Redis crash bug in `socket-server.js`.
+
+**Tech Stack:** socket.io 4.x, socket.io-client 4.x, Next.js App Router, JWT
+
+---
+
+### Task 1: Consolidate token utilities into `src/lib/ws-token.js`
+
+**Files:**
+- Delete: `src/lib/auth/wsToken.js`
+- Modify: `src/lib/ws-token.js` — add `signWsToken` convenience (with `type: 'websocket'` baked in) to replace the deleted file
+- Modify: `src/socket/namespaces/voice.js:2` — switch import from `@/lib/auth/wsToken` to `@/lib/ws-token`
+- Modify: `src/app/api/interview/sessions/route.js:7` — switch import from `@/lib/auth/wsToken` to `@/lib/ws-token`
+- Modify: `src/app/api/interview/sessions/[id]/rehydrate/route.js:15` — switch import from `@/lib/auth/wsToken` to `@/lib/ws-token`
+
+**Step 1: Add `signWsToken` to `src/lib/ws-token.js`**
+
+Add after the existing `generateWsToken` function:
+
+```js
+/**
+ * Generates a short-lived token for WebSocket authentication.
+ * @param {Object} payload — e.g. { userId, sessionId }
+ * @returns {string} Signed JWT valid for 15 minutes with type: 'websocket'
+ */
+export function signWsToken(payload) {
+    if (!JWT_SECRET) {
+        throw new Error('JWT_SECRET environment variable is required')
+    }
+    return jwt.sign(
+        { ...payload, type: 'websocket' },
+        JWT_SECRET,
+        { expiresIn: '15m' }
+    )
+}
+```
+
+This ensures all tokens carry `type: 'websocket'` so the main auth middleware's type check passes.
+
+**Step 2: Update voice.js import**
+
+```js
+// src/socket/namespaces/voice.js line 2
+// Before:
+import { verifyWsToken } from '@/lib/auth/wsToken'
+// After:
+import { verifyWsToken } from '@/lib/ws-token'
+```
+
+**Step 3: Update interview session route**
+
+```js
+// src/app/api/interview/sessions/route.js line 7
+// Before:
+import { signWsToken } from '@/lib/auth/wsToken'
+// After:
+import { signWsToken } from '@/lib/ws-token'
+```
+
+**Step 4: Update interview rehydrate route**
+
+```js
+// src/app/api/interview/sessions/[id]/rehydrate/route.js
+// Before:
+import { signWsToken } from '@/lib/auth/wsToken'
+// After:
+import { signWsToken } from '@/lib/ws-token'
+```
+
+**Step 5: Delete `src/lib/auth/wsToken.js`**
+
+```bash
+rm src/lib/auth/wsToken.js
+```
+
+**Step 6: Run tests/lint**
+
+```bash
+npx prettier --write src/lib/ws-token.js src/socket/namespaces/voice.js src/app/api/interview/sessions/route.js src/app/api/interview/sessions/\[id\]/rehydrate/route.js
+npx eslint --fix src/lib/ws-token.js src/socket/namespaces/voice.js src/app/api/interview/sessions/route.js src/app/api/interview/sessions/\[id\]/rehydrate/route.js
+```
+
+---
+
+### Task 2: Fix Redis crash in socket-server.js
+
+**Files:**
+- Modify: `src/lib/socket-server.js:111-113`
+
+**Problem:** `redisClient.duplicate()` is called before the try/catch block. If `redisClient` was never connected or initialized, this throws and kills the entire Socket.IO server.
+
+**Step 1: Move `duplicate()` calls inside try/catch with null checks**
+
+```js
+// Replace lines 111-135:
+let adapterEnabled = false
+let pubClient = null
+let subClient = null
+try {
+    pubClient = redisClient?.duplicate()
+    subClient = redisClient?.duplicate()
+    if (!pubClient || !subClient) {
+        console.warn('[Socket.IO] Redis client unavailable, running without adapter')
+    } else {
+        const [pubReady, subReady] = await Promise.all([
+            safeConnectRedisClient(pubClient, 'Redis adapter pubClient'),
+            safeConnectRedisClient(subClient, 'Redis adapter subClient'),
+        ])
+        if (pubReady && subReady) {
+            serverIo.adapter(createAdapter(pubClient, subClient))
+            adapterEnabled = true
+        } else {
+            await Promise.all([
+                safeQuitRedisClient(pubClient),
+                safeQuitRedisClient(subClient),
+            ])
+            console.warn('[Socket.IO] Redis adapter disabled, running in single-node mode')
+        }
+    }
+} catch (adapterError) {
+    if (pubClient) safeQuitRedisClient(pubClient)
+    if (subClient) safeQuitRedisClient(subClient)
+    console.warn(
+        `[Socket.IO] Redis adapter setup failed, continuing without adapter: ${adapterError.message}`
+    )
+}
+```
+
+---
+
+### Task 3: Fix `useSecureSocket` token refresh race
+
+**Files:**
+- Modify: `src/hooks/useSecureSocket.js:225`
+
+**Problem:** When token refresh fires but the socket is still connected, the new token is stored but never applied until disconnect. Should force a reconnect with the fresh token.
+
+**Step 1: Replace the reconnect-if-disconnected logic with always-reconnect**
+
+Replace lines 218-232:
+
+```js
+refreshTimerRef.current = setTimeout(async () => {
+    try {
+        console.log('[useSecureSocket] Refreshing authentication token')
+        const { wsToken } = await fetchWsToken()
+        tokenRef.current = wsToken
+
+        // Always reconnect to apply the new token
+        if (socketRef.current) {
+            socketRef.current.disconnect()
+        }
+        await connect()
+    } catch (err) {
+        console.error('[useSecureSocket] Token refresh failed:', err.message)
+    }
+}, delay)
+```
+
+---
+
+### Task 4: Migrate `ScorecardView.jsx` to `useSecureSocket`
+
+**Files:**
+- Modify: `src/features/interview/ScorecardView.jsx`
+
+**Step 1: Replace direct `io()` with `useSecureSocket`**
+
+Remove the socket setup code in the useEffect (lines 70-108). Add the hook:
+
+```js
+import { useSecureSocket } from '@/hooks/useSecureSocket'
+
+// Inside component:
+const { socket, isConnected } = useSecureSocket('/interview', {
+    sessionId,
+    scope: 'interview',
+    onConnect: useCallback(async () => {
+        setIsSocketConnected(true)
+        socketRef.current = socket
+        socket?.emit('interview:join')
+        if (!resultFoundRef.current) {
+            await fetchResult()
+        }
+    }, [sessionId]),
+    onDisconnect: useCallback(() => setIsSocketConnected(false), []),
+})
+```
+
+Replace `socketRef.current` usage with the `socket` from the hook.
+
+Remove the `/rehydrate` fetch call since `useSecureSocket` already handles token fetching via `/api/auth/ws-token`.
+
+---
+
+### Task 5: Migrate `ContestDetailPage.jsx` to `useSecureSocket`
+
+**Files:**
+- Modify: `src/features/contests/components/ContestDetailPage.jsx`
+
+**Step 1: Remove direct `io` import, add `useSecureSocket`**
+
+```js
+// Remove:
+import { io } from 'socket.io-client'
+// Add:
+import { useSecureSocket } from '@/hooks/useSecureSocket'
+```
+
+**Step 2: Replace direct socket with hook**
+
+```js
+const { socket, isConnected } = useSecureSocket('', {
+    scope: 'general',
+})
+```
+
+Remove the raw `io()` call. Move socket event listeners into a `useEffect` that watches `socket`.
+
+---
+
+### Task 6: Migrate contest `result/page.jsx` to `useSecureSocket`
+
+**Files:**
+- Modify: `src/app/contests/[id]/result/page.jsx`
+
+**Step 1: Replace `require('socket.io-client')` with `useSecureSocket`**
+
+This component is likely a client component already. Add:
+
+```js
+import { useSecureSocket } from '@/hooks/useSecureSocket'
+```
+
+**Step 2: Use the hook**
+
+```js
+const { socket } = useSecureSocket('', {
+    scope: 'general',
+    onConnect: useCallback(() => {
+        console.log('[ResultPage] Socket connected')
+    }, []),
+})
+```
+
+Add a `useEffect` that watches `socket` and attaches the `contest:result_finalized` listener, cleaning up on unmount.
+
+---
+
+### Task 7: Migrate `InterviewShell.jsx` to `useSecureSocket`
+
+**Files:**
+- Modify: `src/features/interview/InterviewShell.jsx`
+
+**Step 1: Replace direct `io` import**
+
+```js
+// Remove:
+import { io } from 'socket.io-client'
+// Add:
+import { useSecureSocket } from '@/hooks/useSecureSocket'
+```
+
+**Step 2: Replace socket creation with hook**
+
+The InterviewShell likely connects to `/interview` namespace. The interview flow gets its sessionId and token from the session creation response, so use:
+
+```js
+const { socket, isConnected } = useSecureSocket('/interview', {
+    sessionId: sessionIdFromProps,
+    scope: 'interview',
+})
+```
+
+Remove `useRef` and `useEffect` that create the raw socket. Clean up any manual token handling.
+
+---
+
+### Task 8: Remove hardcoded localhost URLs
+
+**Files:**
+- Remove from: `ScorecardView.jsx:76`, `result/page.jsx:66`
+
+All hardcoded `http://localhost:...` fallbacks become dead code after migration since `useSecureSocket` derives the URL dynamically from `/api/auth/ws-token`.
+
+After Tasks 4-7 are complete, verify no `localhost` socket URLs remain:
+
+```bash
+rg 'localhost.*socket' src/ --include='*.{jsx,js}'
+# Expected: 0 matches (false positives possible, inspect each)
+```
+
+---
+
+### Verification
+
+**Step 1: Check no remaining references to `@/lib/auth/wsToken`**
+
+```bash
+rg 'from.*auth/wsToken' src/
+# Expected: 0 matches
+```
+
+**Step 2: Check no direct `io()` calls remain**
+
+```bash
+rg "from 'socket.io-client'" src/ --include='*.{jsx,js}'
+# Expected: 0 matches (useSecureSocket replaces all)
+```
+
+**Step 3: Build check**
+
+```bash
+npx next build --no-lint 2>&1 | head -30
+```
diff --git a/src/app/api/interview/sessions/[id]/rehydrate/route.js b/src/app/api/interview/sessions/[id]/rehydrate/route.js
index 590d46cb..5d80ab98 100644
--- a/src/app/api/interview/sessions/[id]/rehydrate/route.js
+++ b/src/app/api/interview/sessions/[id]/rehydrate/route.js
@@ -5,7 +5,7 @@ import { InterviewSnapshot } from '@/models/InterviewSnapshot.model'
 import { InterviewSession } from '@/models/InterviewSession.model'
 import { Problem } from '@/models/Problem.models'
 import { protect } from '@/middlewares/auth.middleware'
-import { signWsToken } from '@/lib/auth/wsToken'
+import { signWsToken } from '@/lib/ws-token'
 import { asyncHandler } from '@/lib/asyncHandler'
 import { redisClient } from '@/lib/redis'
 import { aiEnginePort } from '@/lib/ai-engine'
diff --git a/src/app/api/interview/sessions/route.js b/src/app/api/interview/sessions/route.js
index 1f7c88ed..2976fea2 100644
--- a/src/app/api/interview/sessions/route.js
+++ b/src/app/api/interview/sessions/route.js
@@ -4,7 +4,7 @@ import { InterviewSession } from '@/models/InterviewSession.model'
 import { createSession } from '@/services/interviewSession.service'
 import dbConnect from '@/lib/mongodb'
 import { asyncHandler } from '@/lib/asyncHandler'
-import { signWsToken } from '@/lib/auth/wsToken'
+import { signWsToken } from '@/lib/ws-token'
 import { Problem } from '@/models/Problem.models'
 
 export const POST = asyncHandler(async (req) => {
diff --git a/src/app/contests/[id]/result/page.jsx b/src/app/contests/[id]/result/page.jsx
index 169c4b56..09b300f5 100644
--- a/src/app/contests/[id]/result/page.jsx
+++ b/src/app/contests/[id]/result/page.jsx
@@ -23,6 +23,7 @@ import Confetti from 'react-confetti'
 import { useWindowSize } from 'react-use'
 import { toPng } from 'html-to-image'
 import { toast } from 'sonner'
+import { useSecureSocket } from '@/hooks/useSecureSocket'
 
 const fetcher = (url) => fetch(url).then((res) => res.json())
 
@@ -34,6 +35,9 @@ export default function PersonalResultPage() {
     const resultRef = useRef(null)
     const [isSharing, setIsSharing] = useState(false)
     const [isDownloading, setIsDownloading] = useState(false)
+    const { socket } = useSecureSocket('', {
+        scope: 'general',
+    })
 
     const { data, error, isLoading, mutate } = useSWR(
         contestId ? `/api/contests/${contestId}/my-result` : null,
@@ -57,34 +61,21 @@ export default function PersonalResultPage() {
     // Listen for the worker's 'contest:result_finalized' signal via Socket.IO
     // This instantly kills polling and triggers a final SWR revalidation
     useEffect(() => {
-        if (!contestId || isResultConsistent) return
+        if (!socket || !contestId || isResultConsistent) return
 
-        let socket
-        try {
-            const { io } = require('socket.io-client')
-            const socketPort = process.env.NEXT_PUBLIC_SOCKET_PORT || '3002'
-            const fallbackSocketUrl = `${window.location.protocol}//${window.location.hostname}:${socketPort}`
-            socket = io(process.env.NEXT_PUBLIC_SOCKET_URL || fallbackSocketUrl)
-
-            socket.on('connect', () => {
-                console.log('[ResultPage] Socket connected, listening for result_finalized')
-            })
-
-            socket.on('contest:result_finalized', (payload) => {
-                console.log('[ResultPage] Received contest:result_finalized:', payload)
-                if (payload.contestId === contestId) {
-                    // Immediately revalidate SWR to get the final, consistent data
-                    mutate()
-                }
-            })
-        } catch (err) {
-            console.warn('[ResultPage] Socket connection failed, relying on polling:', err)
+        const handleResultFinalized = (payload) => {
+            console.log('[ResultPage] Received contest:result_finalized:', payload)
+            if (payload.contestId === contestId) {
+                mutate()
+            }
         }
 
+        socket.on('contest:result_finalized', handleResultFinalized)
+
         return () => {
-            if (socket) socket.disconnect()
+            socket.off('contest:result_finalized', handleResultFinalized)
         }
-    }, [contestId, isResultConsistent, mutate])
+    }, [socket, contestId, isResultConsistent, mutate])
 
     // Format penalty (seconds to HH:MM:SS)
     const formatPenalty = (seconds) => {
diff --git a/src/components/ui/skeleton.jsx b/src/components/ui/skeleton.jsx
index dc802127..a2d3160d 100644
--- a/src/components/ui/skeleton.jsx
+++ b/src/components/ui/skeleton.jsx
@@ -7,11 +7,7 @@ import { cn } from '@/lib/utils'
 function Skeleton({ className, ...props }) {
     return (
         <div
-            className={cn(
-                'bg-bg-muted relative overflow-hidden rounded-md',
-                'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/5 before:to-transparent',
-                className
-            )}
+            className={cn('animate-pulse bg-bg-muted rounded-md', className)}
             {...props}
         />
     )
diff --git a/src/context/ProblemSolveContext.jsx b/src/context/ProblemSolveContext.jsx
index 0f3c0a60..260b176c 100644
--- a/src/context/ProblemSolveContext.jsx
+++ b/src/context/ProblemSolveContext.jsx
@@ -73,7 +73,15 @@ function ProblemSolveProviderInner({
 
     // Local UI state
     const [isConsoleOpen, setIsConsoleOpen] = useState(true)
-    const [leftTab, setLeftTabState] = useState(() => readSavedLeftTab(problemId))
+    const [leftTab, setLeftTabState] = useState('description')
+
+    // Restore persisted tab after hydration to avoid SSR/client mismatch
+    useEffect(() => {
+        const savedTab = readSavedLeftTab(problemId)
+        if (savedTab !== 'description') {
+            setLeftTabState(savedTab)
+        }
+    }, [problemId])
 
     const setLeftTab = useCallback((nextTab) => {
         setLeftTabState((prevTab) => {
diff --git a/src/features/contests/components/ContestDetailPage.jsx b/src/features/contests/components/ContestDetailPage.jsx
index 2c33988e..e6a281ad 100644
--- a/src/features/contests/components/ContestDetailPage.jsx
+++ b/src/features/contests/components/ContestDetailPage.jsx
@@ -2,7 +2,7 @@
 
 import React, { useMemo, useEffect } from 'react'
 import useSWR from 'swr'
-import { io } from 'socket.io-client'
+import { useSecureSocket } from '@/hooks/useSecureSocket'
 import { useContest } from '@/hooks/useContest'
 import { useContestTimer } from '@/hooks/useContestTimer'
 import ContestDetailHero from './ContestDetailHero'
@@ -43,35 +43,39 @@ export default function ContestDetailPage({ contestId }) {
     const isRegistered = regData?.isRegistered || false
     const totalParticipants = participantsData?.pagination?.total || participants.length
 
+    const { socket } = useSecureSocket('', {
+        scope: 'general',
+    })
+
     // Real-time synchronization
     useEffect(() => {
-        if (!contestId) return
-
-        const fallbackSocketBaseUrl = `http://localhost:${process.env.NEXT_PUBLIC_SOCKET_PORT || '3002'}`
+        if (!socket || !contestId) return
 
-        const socket = io(process.env.NEXT_PUBLIC_SOCKET_URL || fallbackSocketBaseUrl, {
-            reconnection: true,
-        })
-
-        socket.on('connect', () => {
+        const handleConnect = () => {
             console.log(`[ContestDetail] Joined room contest_${contestId}`)
             socket.emit('join_room', `contest_${contestId}`)
-        })
+        }
 
-        socket.on('contest:updated', (data) => {
+        const handleUpdated = (data) => {
             console.log('[ContestDetail] Contest updated, refreshing state...', data)
             mutate()
-        })
+        }
 
-        socket.on('contest:deleted', () => {
+        const handleDeleted = () => {
             console.log('[ContestDetail] Contest deleted, redirecting...')
             window.location.href = '/contests'
-        })
+        }
+
+        socket.on('connect', handleConnect)
+        socket.on('contest:updated', handleUpdated)
+        socket.on('contest:deleted', handleDeleted)
 
         return () => {
-            socket.disconnect()
+            socket.off('connect', handleConnect)
+            socket.off('contest:updated', handleUpdated)
+            socket.off('contest:deleted', handleDeleted)
         }
-    }, [contestId, mutate])
+    }, [socket, contestId, mutate])
 
     useContestTimer(contest?.startTime, contest?.endTime) // pre-warm timer
 
diff --git a/src/features/interview/InterviewShell.jsx b/src/features/interview/InterviewShell.jsx
index 5f298dd8..affccc6b 100644
--- a/src/features/interview/InterviewShell.jsx
+++ b/src/features/interview/InterviewShell.jsx
@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useState, useEffect, useRef, useCallback } from 'react'
-import { io } from 'socket.io-client'
+import { useSecureSocket } from '@/hooks/useSecureSocket'
 import {
     Loader2,
     Clock,
@@ -412,6 +412,11 @@ export default function InterviewShell({
     // ── Socket.IO connection ─────────────────────────────────────────────────
     const socketRef = useRef(null)
 
+    const { socket: hookSocket, isConnected: socketConnected } = useSecureSocket('/interview', {
+        sessionId,
+        scope: 'interview',
+    })
+
     // ── Rehydration ──────────────────────────────────────────────────────────
     useEffect(() => {
         const rehydrate = async () => {
@@ -491,7 +496,6 @@ export default function InterviewShell({
         if (!wsTokenState || !sessionId || isRehydrating) return
 
         let active = true
-        const fallbackSocketBaseUrl = `http://localhost:${process.env.NEXT_PUBLIC_SOCKET_PORT || '3002'}`
 
         // Define event handler callbacks
         const handleAiStreamChunk = ({ chunk, done, messageId, sequence, error: streamError }) => {
@@ -511,9 +515,7 @@ export default function InterviewShell({
                 setIsAiTyping(true)
                 setMessages((prev) => {
                     // 1. Try to find message by ID
-                    const existingIdx = messageId
-                        ? prev.findIndex((m) => m.id === messageId)
-                        : -1
+                    const existingIdx = messageId ? prev.findIndex((m) => m.id === messageId) : -1
 
                     if (existingIdx !== -1) {
                         const newMsg = {
@@ -688,150 +690,76 @@ export default function InterviewShell({
         const lastSequenceRef = { current: 0 }
         const currentStreamingId = { current: null }
 
-        const initializeSocket = async () => {
-            try {
-                const res = await fetch('/api/auth/ws-token', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ sessionId, scope: 'interview' }),
-                    credentials: 'include',
-                })
-                if (!active) return
-
-                const data = await res.json()
-                if (!active) return
-
-                if (data.enabled === false) {
-                    console.log('[InterviewShell] Sockets disabled (serverless). Falling back to MockInterviewSocket.')
-                    const mockSocket = new MockInterviewSocket(sessionId)
-                    socketRef.current = mockSocket
-
-                    setConnectionStatus('connected')
-
-                    // Register listeners
-                    mockSocket.on('interview:ai_stream_chunk', handleAiStreamChunk)
-                    mockSocket.on('interview:phase_change', handlePhaseChange)
-                    mockSocket.on('interview:session_terminal', handleSessionTerminal)
-                    mockSocket.on('interview:run_result', handleRunResult)
-                    mockSocket.on('interview:submission_result', handleSubmissionResult)
-                    mockSocket.on('interview:ai_analysis', handleAiAnalysis)
-                    mockSocket.on('interview:scorecard', handleScorecard)
-                    mockSocket.on('interview:ended', handleEnded)
-                    mockSocket.on('reconnect', handleReconnect)
-
-                    // Trigger mock connect
-                    setTimeout(() => {
-                        if (active) {
-                            mockSocket.trigger('connect')
-                        }
-                    }, 100)
-                } else {
-                    let socketUrl_ = data.socketUrl || process.env.NEXT_PUBLIC_SOCKET_URL || fallbackSocketBaseUrl
-                    
-                    // Localhost protocol sanitization
-                    if (typeof window !== 'undefined') {
-                        const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-                        const isPageHttp = window.location.protocol === 'http:';
-                        if (isLocalhost && isPageHttp) {
-                            socketUrl_ = socketUrl_.replace(/^https:\/\//i, 'http://');
-                        }
-                    }
-
-                    console.log(`[InterviewShell] Connecting to real socket at: ${socketUrl_}/interview`)
-                    const socket = io(`${socketUrl_}/interview`, {
-                        auth: { token: data.wsToken || wsTokenState },
-                        reconnectionAttempts: 3,
-                    })
-                    socketRef.current = socket
+        if (!hookSocket) return
 
-                    socket.on('connect', () => {
-                        if (!active) return
-                        setConnectionStatus('connected')
-                        socket.emit('interview:join')
-                        toast.success('Connected to interview session')
-                    })
+        const socket = hookSocket
+        socketRef.current = socket
 
-                    socket.on('disconnect', (reason) => {
-                        if (!active) return
-                        console.warn('[Socket] Disconnected:', reason)
-                        setIsAiTyping(false)
-                        if (reason === 'io server disconnect') {
-                            setConnectionStatus('failed')
-                        } else {
-                            setConnectionStatus('disconnected')
-                        }
-                    })
+        socket.on('connect', () => {
+            if (!active) return
+            setConnectionStatus('connected')
+            socket.emit('interview:join')
+            toast.success('Connected to interview session')
+        })
 
-                    socket.on('connect_error', (err) => {
-                        if (!active) return
-                        console.error('[Socket] Connection Error:', err)
-                        setIsAiTyping(false)
-                        setConnectionStatus('reconnecting')
-                    })
+        socket.on('disconnect', (reason) => {
+            if (!active) return
+            console.warn('[Socket] Disconnected:', reason)
+            setIsAiTyping(false)
+            if (reason === 'io server disconnect') {
+                setConnectionStatus('failed')
+            } else {
+                setConnectionStatus('disconnected')
+            }
+        })
 
-                    socket.on('reconnect_attempt', (attempt) => {
-                        if (!active) return
-                        console.log('[Socket] Reconnecting...', attempt)
-                        setConnectionStatus('reconnecting')
-                    })
+        socket.on('connect_error', (err) => {
+            if (!active) return
+            console.error('[Socket] Connection Error:', err)
+            setIsAiTyping(false)
+            setConnectionStatus('reconnecting')
+        })
 
-                    socket.on('reconnect_failed', () => {
-                        if (!active) return
-                        setConnectionStatus('failed')
-                        setError({
-                            type: 'CONNECTION_FAILED',
-                            message: 'Lost connection to the interview server. Please check your internet.',
-                            fatal: true,
-                        })
-                    })
+        socket.on('reconnect_attempt', (attempt) => {
+            if (!active) return
+            console.log('[Socket] Reconnecting...', attempt)
+            setConnectionStatus('reconnecting')
+        })
 
-                    // Register dynamic event listeners
-                    socket.on('interview:ai_stream_chunk', handleAiStreamChunk)
-                    socket.on('interview:phase_change', handlePhaseChange)
-                    socket.on('interview:session_terminal', handleSessionTerminal)
-                    socket.on('interview:run_result', handleRunResult)
-                    socket.on('interview:submission_result', handleSubmissionResult)
-                    socket.on('interview:ai_analysis', handleAiAnalysis)
-                    socket.on('interview:scorecard', handleScorecard)
-                    socket.on('interview:ended', handleEnded)
-                    socket.on('reconnect', handleReconnect)
-                }
-            } catch (err) {
-                console.error('[InterviewShell] Socket initialization failed:', err)
-                if (active) {
-                    setError({
-                        type: 'CONNECTION_FAILED',
-                        message: 'Failed to establish connection to the interview server.',
-                        fatal: true,
-                    })
-                }
-            }
-        }
+        socket.on('reconnect_failed', () => {
+            if (!active) return
+            setConnectionStatus('failed')
+            setError({
+                type: 'CONNECTION_FAILED',
+                message: 'Lost connection to the interview server. Please check your internet.',
+                fatal: true,
+            })
+        })
 
-        initializeSocket()
+        // Register dynamic event listeners
+        socket.on('interview:ai_stream_chunk', handleAiStreamChunk)
+        socket.on('interview:phase_change', handlePhaseChange)
+        socket.on('interview:session_terminal', handleSessionTerminal)
+        socket.on('interview:run_result', handleRunResult)
+        socket.on('interview:submission_result', handleSubmissionResult)
+        socket.on('interview:ai_analysis', handleAiAnalysis)
+        socket.on('interview:scorecard', handleScorecard)
+        socket.on('interview:ended', handleEnded)
+        socket.on('reconnect', handleReconnect)
 
         return () => {
             active = false
-            if (socketRef.current) {
-                socketRef.current.off('connect')
-                socketRef.current.off('disconnect')
-                socketRef.current.off('connect_error')
-                socketRef.current.off('reconnect_attempt')
-                socketRef.current.off('reconnect_failed')
-                socketRef.current.off('reconnect')
-                socketRef.current.off('interview:ai_stream_chunk')
-                socketRef.current.off('interview:run_result')
-                socketRef.current.off('interview:submission_result')
-                socketRef.current.off('interview:ai_analysis')
-                socketRef.current.off('interview:scorecard')
-                socketRef.current.off('interview:ended')
-                socketRef.current.off('interview:phase_change')
-                socketRef.current.off('interview:session_terminal')
-                socketRef.current.disconnect()
-                socketRef.current = null
-            }
         }
-    }, [wsToken, sessionId, onEnd, isRehydrating])
+    }, [wsToken, sessionId, onEnd, isRehydrating, hookSocket])
+
+    // Sync socket connection status
+    useEffect(() => {
+        if (!hookSocket) return
+        socketRef.current = hookSocket
+        if (socketConnected) {
+            setConnectionStatus('connected')
+        }
+    }, [hookSocket, socketConnected])
 
     // ── Hard timeout for stuck AI streaming ──────────────────────────────────
     const MAX_STREAM_TIME = 45_000 // 45 seconds to allow for high-load cold-starts
diff --git a/src/features/interview/ScorecardView.jsx b/src/features/interview/ScorecardView.jsx
index 9ab1218d..18c0646a 100644
--- a/src/features/interview/ScorecardView.jsx
+++ b/src/features/interview/ScorecardView.jsx
@@ -1,7 +1,7 @@
 'use client'
 
-import React, { useEffect, useState, useRef } from 'react'
-import { io } from 'socket.io-client'
+import React, { useEffect, useState } from 'react'
+import { useSecureSocket } from '@/hooks/useSecureSocket'
 import {
     Award,
     Download,
@@ -24,8 +24,10 @@ export default function ScorecardView({ sessionId }) {
     const [result, setResult] = useState(null)
     const [loading, setLoading] = useState(true)
     const [error, setError] = useState(null)
-    const [isSocketConnected, setIsSocketConnected] = useState(false)
-    const socketRef = useRef(null)
+    const { socket, isConnected: socketConnected } = useSecureSocket('/interview', {
+        sessionId,
+        scope: 'interview',
+    })
 
     useEffect(() => {
         // Use a ref to track result so fallbackPoll doesn't use a stale closure
@@ -67,46 +69,6 @@ export default function ScorecardView({ sessionId }) {
             }
         }
 
-        const setupSocket = async () => {
-            try {
-                const res = await fetch(`/api/interview/sessions/${sessionId}/rehydrate`)
-                const json = await res.json()
-                if (!json.success || isUnmounted) return
-
-                const fallbackSocketBaseUrl = `http://localhost:${process.env.NEXT_PUBLIC_SOCKET_PORT || '3002'}`
-
-                const socket = io(
-                    `${process.env.NEXT_PUBLIC_SOCKET_URL || fallbackSocketBaseUrl}/interview`,
-                    {
-                        auth: { token: json.data.wsToken },
-                        reconnectionAttempts: 5,
-                    }
-                )
-                socketRef.current = socket
-
-                socket.on('connect', async () => {
-                    setIsSocketConnected(true)
-                    socket.emit('interview:join')
-                    // ✅ Bug 4 Fix: immediately fetch on connect.
-                    // For already-completed sessions the scorecard socket event
-                    // will never replay — so we fetch right away on connection.
-                    if (!resultFoundRef.current) {
-                        await fetchResult()
-                    }
-                })
-
-                socket.on('disconnect', () => setIsSocketConnected(false))
-
-                socket.on('interview:scorecard', async () => {
-                    if (isUnmounted) return
-                    console.log('[ScorecardView] Received push update via socket')
-                    await fetchResult()
-                })
-            } catch (err) {
-                console.error('[ScorecardView] Socket setup failed:', err)
-            }
-        }
-
         const runLogic = async () => {
             const found = await fetchResult()
             if (found || isUnmounted) return
@@ -121,9 +83,6 @@ export default function ScorecardView({ sessionId }) {
                 }
             }, 60_000)
 
-            // Set up socket for live push
-            await setupSocket()
-
             // ✅ Bug 3 Fix: poll every 3s instead of 15s
             // ✅ Bug 2 Fix: use resultFoundRef instead of stale `result` closure
             const fallbackPoll = async () => {
@@ -146,12 +105,34 @@ export default function ScorecardView({ sessionId }) {
         return () => {
             isUnmounted = true
             clearTimeout(pollTimer)
-            if (socketRef.current) {
-                socketRef.current.disconnect()
-            }
         }
     }, [sessionId])
 
+    // Socket event listeners
+    useEffect(() => {
+        if (!socket) return
+
+        const handleScorecard = async () => {
+            console.log('[ScorecardView] Received push update via socket')
+            try {
+                const res = await fetch(`/api/interview/sessions/${sessionId}/result`)
+                const json = await res.json()
+                if (json.success && json.status !== 'pending') {
+                    setResult(json.data)
+                    setLoading(false)
+                    setError(null)
+                }
+            } catch {}
+        }
+
+        socket.on('interview:scorecard', handleScorecard)
+        socket.emit('interview:join')
+
+        return () => {
+            socket.off('interview:scorecard', handleScorecard)
+        }
+    }, [socket, sessionId])
+
     const exportMarkdown = () => {
         window.location.href = `/api/interview/sessions/${sessionId}/export`
     }
@@ -221,11 +202,9 @@ export default function ScorecardView({ sessionId }) {
                 {/* Connection Status Indicator */}
                 <div className="border-border bg-bg-muted text-text-muted mt-6 flex items-center gap-2 rounded-full border px-3 py-1 text-[10px] font-bold transition-all">
                     <div
-                        className={`h-1.5 w-1.5 rounded-full ${isSocketConnected ? 'bg-success animate-pulse' : 'bg-text-muted'}`}
+                        className={`h-1.5 w-1.5 rounded-full ${socketConnected ? 'bg-success animate-pulse' : 'bg-text-muted'}`}
                     />
-                    {isSocketConnected
-                        ? 'LIVE UPDATES ACTIVE'
-                        : 'CONNECTING TO REAL-TIME SERVER...'}
+                    {socketConnected ? 'LIVE UPDATES ACTIVE' : 'CONNECTING TO REAL-TIME SERVER...'}
                 </div>
             </div>
         )
diff --git a/src/features/problem-solve/components/SubmissionResultTab.jsx b/src/features/problem-solve/components/SubmissionResultTab.jsx
index ac4bc7c5..9ac609b0 100644
--- a/src/features/problem-solve/components/SubmissionResultTab.jsx
+++ b/src/features/problem-solve/components/SubmissionResultTab.jsx
@@ -147,9 +147,14 @@ export default function SubmissionResultTab() {
         viewSubmissionDetails,
     } = useProblemSolve()
     const { user } = useAuth()
+    const [mounted, setMounted] = useState(false)
     const [copied, setCopied] = useState(false)
     const restoreAttemptedRef = useRef(false)
 
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
     useEffect(() => {
         if (result || restoreAttemptedRef.current) return
 
@@ -165,7 +170,7 @@ export default function SubmissionResultTab() {
         })
     }, [result, viewSubmissionDetails])
 
-    if (!result) {
+    if (!mounted || !result) {
         return (
             <div className="flex flex-col items-center justify-center gap-4 py-16 text-center">
                 <Loader2 size={24} className="text-accent animate-spin" />
diff --git a/src/lib/auth/wsToken.js b/src/lib/auth/wsToken.js
deleted file mode 100644
index bf81829f..00000000
--- a/src/lib/auth/wsToken.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import jwt from 'jsonwebtoken'
-
-const JWT_SECRET = process.env.JWT_SECRET
-
-function checkSecret() {
-    if (!JWT_SECRET && process.env.NEXT_PHASE !== 'phase-production-build') {
-        throw new Error('Please define JWT_SECRET in .env.local')
-    }
-}
-
-/**
- * Generates a short-lived token for WebSocket authentication.
- * @param {Object} payload - Data to encode in the token (e.g., userId, sessionId)
- * @returns {string} - Signed JWT valid for 15 minutes
- */
-export function signWsToken(payload) {
-    checkSecret()
-    return jwt.sign(payload, JWT_SECRET, { expiresIn: '15m' })
-}
-
-/**
- * Verifies a WebSocket token.
- * @param {string} token
- * @returns {Object} - Decoded payload
- */
-export function verifyWsToken(token) {
-    checkSecret()
-    return jwt.verify(token, JWT_SECRET)
-}
diff --git a/src/lib/socket-server.js b/src/lib/socket-server.js
index c7b6550b..de7fe59c 100644
--- a/src/lib/socket-server.js
+++ b/src/lib/socket-server.js
@@ -109,26 +109,34 @@ export async function initSocketServer() {
 
             // Setup Redis adapter when available, but keep Socket.IO online without it.
             let adapterEnabled = false
-            const pubClient = redisClient.duplicate()
-            const subClient = redisClient.duplicate()
+            let pubClient = null
+            let subClient = null
             try {
-                const [pubReady, subReady] = await Promise.all([
-                    safeConnectRedisClient(pubClient, 'Redis adapter pubClient'),
-                    safeConnectRedisClient(subClient, 'Redis adapter subClient'),
-                ])
-
-                if (pubReady && subReady) {
-                    serverIo.adapter(createAdapter(pubClient, subClient))
-                    adapterEnabled = true
+                pubClient = redisClient?.duplicate()
+                subClient = redisClient?.duplicate()
+                if (!pubClient || !subClient) {
+                    console.warn('[Socket.IO] Redis client unavailable, running without adapter')
                 } else {
-                    await Promise.all([
-                        safeQuitRedisClient(pubClient),
-                        safeQuitRedisClient(subClient),
+                    const [pubReady, subReady] = await Promise.all([
+                        safeConnectRedisClient(pubClient, 'Redis adapter pubClient'),
+                        safeConnectRedisClient(subClient, 'Redis adapter subClient'),
                     ])
-                    console.warn('[Socket.IO] Redis adapter disabled, running in single-node mode')
+                    if (pubReady && subReady) {
+                        serverIo.adapter(createAdapter(pubClient, subClient))
+                        adapterEnabled = true
+                    } else {
+                        await Promise.all([
+                            safeQuitRedisClient(pubClient),
+                            safeQuitRedisClient(subClient),
+                        ])
+                        console.warn(
+                            '[Socket.IO] Redis adapter disabled, running in single-node mode'
+                        )
+                    }
                 }
             } catch (adapterError) {
-                await Promise.all([safeQuitRedisClient(pubClient), safeQuitRedisClient(subClient)])
+                if (pubClient) safeQuitRedisClient(pubClient)
+                if (subClient) safeQuitRedisClient(subClient)
                 console.warn(
                     `[Socket.IO] Redis adapter setup failed, continuing without adapter: ${adapterError.message}`
                 )
diff --git a/src/lib/ws-token.js b/src/lib/ws-token.js
index 2f181478..e9f8ca6f 100644
--- a/src/lib/ws-token.js
+++ b/src/lib/ws-token.js
@@ -8,6 +8,19 @@ const JWT_SECRET = process.env.JWT_SECRET
 const WS_TOKEN_EXPIRY = '1h' // WebSocket tokens live 1 hour
 const REFRESH_THRESHOLD = 5 * 60 * 1000 // Refresh token if < 5 min left
 
+/**
+ * Generates a short-lived token for WebSocket authentication.
+ * Required payload keys: { userId, sessionId }
+ * @param {Object} payload — must include userId and sessionId
+ * @returns {string} Signed JWT valid for 15 minutes with type: 'websocket'
+ */
+export function signWsToken(payload) {
+    if (!JWT_SECRET) {
+        throw new Error('JWT_SECRET environment variable is required')
+    }
+    return jwt.sign({ ...payload, type: 'websocket' }, JWT_SECRET, { expiresIn: '15m' })
+}
+
 export function generateWsToken(userId, sessionData = {}) {
     if (!JWT_SECRET) {
         throw new Error('JWT_SECRET environment variable is required')
diff --git a/src/socket/namespaces/interview.js b/src/socket/namespaces/interview.js
index ab40ecf5..ebd636ed 100644
--- a/src/socket/namespaces/interview.js
+++ b/src/socket/namespaces/interview.js
@@ -1,5 +1,5 @@
 import crypto from 'crypto'
-import { verifyWsToken } from '@/lib/auth/wsToken'
+import { verifyWsToken } from '@/lib/ws-token'
 import { InterviewSession } from '@/models/InterviewSession.model'
 import { InterviewMessage } from '@/models/InterviewMessage.model'
 import { InterviewSnapshot } from '@/models/InterviewSnapshot.model'
diff --git a/src/socket/namespaces/voice.js b/src/socket/namespaces/voice.js
index 0f21cee7..bf40ae94 100644
--- a/src/socket/namespaces/voice.js
+++ b/src/socket/namespaces/voice.js
@@ -1,5 +1,5 @@
 import { DeepgramClient } from '@deepgram/sdk'
-import { verifyWsToken } from '@/lib/auth/wsToken'
+import { verifyWsToken } from '@/lib/ws-token'
 import { isSessionActive } from '@/services/sessionGuard'
 import { hasVoiceAccess } from '@/services/accessControl.service'
 

From b1a284662f908c7b3757d87a15ac1c0e175f42a1 Mon Sep 17 00:00:00 2001
From: mdadeel <mdadeel125@gmail.com>
Date: Sun, 24 May 2026 20:19:51 +0600
Subject: [PATCH 2/2] refactor: enhance UI accessibility, improve socket
 connection reliability, and update landing page timeline

---
 src/app/blog/[slug]/page.jsx                  |   2 +-
 src/app/blog/page.jsx                         |   2 +
 src/app/contests/[id]/result/page.jsx         |   2 +-
 src/app/guidelines/page.jsx                   |   2 +-
 src/app/help/page.jsx                         |   1 +
 src/app/layout.js                             |   2 +
 src/app/profile/settings/page.jsx             |   2 +-
 src/components/layout/NotificationBell.jsx    |   2 +-
 src/components/reactions/ReactionSystem.jsx   |   2 +-
 src/components/ui/ScrollRevealCard.tsx        |   2 +-
 .../home/components/DashboardLeftSidebar.jsx  |   1 +
 .../home/components/FeaturesSection.jsx       |   2 +-
 .../home/components/HowItWorksSection.jsx     | 107 ++++++++----------
 .../home/components/QuickStatsCard.jsx        |   1 +
 src/features/interview/InterviewShell.jsx     |   4 +-
 src/features/interview/ReplayPlayer.jsx       |   1 +
 src/features/interview/ScorecardView.jsx      |   4 +-
 .../interview/components/chat/AiChatPanel.jsx |   4 +-
 .../interview/context/InterviewContext.jsx    |   4 +-
 .../components/WorkspaceToolbar.jsx           |   2 +-
 .../problems/components/ProblemsToolbar.jsx   |   1 +
 src/hooks/useSecureSocket.js                  |  71 +++++++-----
 src/lib/socket-server.js                      |   4 +
 src/lib/ws-token.js                           |   2 +-
 src/shared/components/ui/DevNoticeModal.jsx   |  74 ++++++++++++
 25 files changed, 198 insertions(+), 103 deletions(-)
 create mode 100644 src/shared/components/ui/DevNoticeModal.jsx

diff --git a/src/app/blog/[slug]/page.jsx b/src/app/blog/[slug]/page.jsx
index 6645211b..5e2eb26a 100644
--- a/src/app/blog/[slug]/page.jsx
+++ b/src/app/blog/[slug]/page.jsx
@@ -142,7 +142,7 @@ export default function BlogDetailPage() {
     if (!post) {
         return (
             <div className="bg-bg-page flex min-h-screen flex-col items-center justify-center p-4 text-center">
-                <h1 className="text-text-primary text-4xl font-bold">Post not found</h1>
+                <h2 className="text-text-primary text-4xl font-bold">Post not found</h2>
                 <Link href="/blog" className="text-accent mt-6 font-semibold hover:underline">
                     Return to Arena Journal
                 </Link>
diff --git a/src/app/blog/page.jsx b/src/app/blog/page.jsx
index afaea9a1..c40cc15f 100644
--- a/src/app/blog/page.jsx
+++ b/src/app/blog/page.jsx
@@ -130,6 +130,7 @@ export default function BlogListingPage() {
                             placeholder="Search articles..."
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
+                            aria-label="Search articles"
                             className="bg-bg-subtle border-border text-text-primary placeholder:text-text-muted focus:ring-accent w-full rounded-md border py-2 pr-4 pl-10 text-sm transition-all focus:ring-2 focus:outline-none"
                         />
                     </div>
@@ -170,6 +171,7 @@ export default function BlogListingPage() {
                         <input
                             type="email"
                             placeholder="engineer@example.com"
+                            aria-label="Email address for newsletter"
                             className="bg-bg-page border-border focus:ring-accent flex-grow rounded-md border px-4 py-2.5 text-sm transition-all outline-none focus:ring-2"
                         />
                         <button className="bg-accent hover:bg-accent-hover duration-normal rounded-md px-8 py-2.5 text-sm font-semibold text-white transition-colors">
diff --git a/src/app/contests/[id]/result/page.jsx b/src/app/contests/[id]/result/page.jsx
index 09b300f5..eaa6cb73 100644
--- a/src/app/contests/[id]/result/page.jsx
+++ b/src/app/contests/[id]/result/page.jsx
@@ -165,7 +165,7 @@ export default function PersonalResultPage() {
         return (
             <div className="bg-bg-page flex min-h-screen flex-col items-center justify-center p-6 text-center">
                 <XCircle className="text-error mb-4 size-16 opacity-20" />
-                <h1 className="text-text-primary text-2xl font-black">Result Not Ready</h1>
+                <h2 className="text-text-primary text-2xl font-black">Result Not Ready</h2>
                 <p className="text-text-muted mt-2 max-w-md font-medium">
                     {data?.message ||
                         "We couldn't find your result for this contest. You may not have participated or the results are still being processed."}
diff --git a/src/app/guidelines/page.jsx b/src/app/guidelines/page.jsx
index a6c7ca3a..da4cba5c 100644
--- a/src/app/guidelines/page.jsx
+++ b/src/app/guidelines/page.jsx
@@ -52,7 +52,7 @@ const CORE_RULES = [
         title: 'Protect Privacy',
         description:
             'Never share personal information about yourself or others. Do not post private conversations without explicit consent.',
-        color: 'text-purple-500 bg-purple-500/10 border-purple-500/20',
+        color: 'text-emerald-500 bg-emerald-500/10 border-emerald-500/20',
     },
     {
         icon: <Users className="size-6" />,
diff --git a/src/app/help/page.jsx b/src/app/help/page.jsx
index 2230fd4d..f685344b 100644
--- a/src/app/help/page.jsx
+++ b/src/app/help/page.jsx
@@ -121,6 +121,7 @@ export default function HelpCenterPage() {
                                     placeholder="Search for questions (e.g. 'contests', 'verdicts')..."
                                     value={searchTerm}
                                     onChange={(e) => setSearchTerm(e.target.value)}
+                                    aria-label="Search FAQs"
                                     className="bg-bg-subtle border-border focus:bg-bg-page focus:border-accent/20 focus:ring-accent/5 placeholder:text-text-muted w-full rounded-2xl border py-4 pr-6 pl-14 text-lg shadow-2xl transition-all focus:ring-8 focus:outline-none"
                                 />
                             </div>
diff --git a/src/app/layout.js b/src/app/layout.js
index b507e6a8..d6dbf0e9 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -7,6 +7,7 @@ import { HydrationWrapper } from '@/components/providers/HydrationWrapper'
 import { ThemeProvider } from '@/components/providers/ThemeProvider'
 import { SmoothScroll } from '@/components/providers/SmoothScroll'
 import ServiceWorkerRegistration from '@/components/providers/ServiceWorkerRegistration'
+import DevNoticeModal from '@/shared/components/ui/DevNoticeModal'
 
 const inter = Inter({
     subsets: ['latin'],
@@ -55,6 +56,7 @@ export default function RootLayout({ children }) {
             >
                 <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
                     <HydrationWrapper>
+                        <DevNoticeModal />
                         <AuthProvider>
                             <CodeEditorProvider>{children}</CodeEditorProvider>
                         </AuthProvider>
diff --git a/src/app/profile/settings/page.jsx b/src/app/profile/settings/page.jsx
index b3423b50..0478c832 100644
--- a/src/app/profile/settings/page.jsx
+++ b/src/app/profile/settings/page.jsx
@@ -220,7 +220,7 @@ export default function SettingsPage() {
                     {/* Content Section */}
                     <div className="lg:col-span-9">
                         {activeSection === 'profile' && (
-                            <form onSubmit={handleSubmit(onSubmit)} className="space-y-8">
+                            <form onSubmit={handleSubmit(onSubmit)} className="space-y-8" aria-label="Edit Profile">
                                 <ProfilePictureCard
                                     avatarSeed={avatarSeed}
                                     onSelectSeed={(seed) => setValue('avatarSeed', seed)}
diff --git a/src/components/layout/NotificationBell.jsx b/src/components/layout/NotificationBell.jsx
index ab13d58c..54dfdf48 100644
--- a/src/components/layout/NotificationBell.jsx
+++ b/src/components/layout/NotificationBell.jsx
@@ -10,7 +10,7 @@ const TYPE_ICONS = {
     social: <MessageSquare className="h-4 w-4 text-blue-500" />,
     contest: <Trophy className="h-4 w-4 text-yellow-500" />,
     judging: <Code2 className="h-4 w-4 text-green-500" />,
-    ai_insight: <Sparkles className="h-4 w-4 text-purple-500" />,
+    ai_insight: <Sparkles className="h-4 w-4 text-cyan-500" />,
 }
 
 export default function NotificationBell() {
diff --git a/src/components/reactions/ReactionSystem.jsx b/src/components/reactions/ReactionSystem.jsx
index 44928ab2..4abca3e6 100644
--- a/src/components/reactions/ReactionSystem.jsx
+++ b/src/components/reactions/ReactionSystem.jsx
@@ -11,7 +11,7 @@ const REACTION_CONFIG = {
     LIKE: { icon: ThumbsUp, color: 'text-blue-500', bg: 'bg-blue-500/10', label: 'Like' },
     LOVE: { icon: Heart, color: 'text-red-500', bg: 'bg-red-500/10', label: 'Love' },
     CLAP: { icon: Star, color: 'text-yellow-500', bg: 'bg-yellow-500/10', label: 'Clap' },
-    THINKING: { icon: Smile, color: 'text-purple-500', bg: 'bg-purple-500/10', label: 'Thinking' },
+    THINKING: { icon: Smile, color: 'text-cyan-500', bg: 'bg-cyan-500/10', label: 'Thinking' },
     ROCKET: { icon: Rocket, color: 'text-orange-500', bg: 'bg-orange-500/10', label: 'Rocket' },
     WOW: { icon: Zap, color: 'text-pink-500', bg: 'bg-pink-500/10', label: 'Wow' },
 }
diff --git a/src/components/ui/ScrollRevealCard.tsx b/src/components/ui/ScrollRevealCard.tsx
index 0c76581b..3d919c0d 100644
--- a/src/components/ui/ScrollRevealCard.tsx
+++ b/src/components/ui/ScrollRevealCard.tsx
@@ -12,7 +12,7 @@ interface ScrollRevealCardProps {
 export const ScrollRevealCard = ({ title, children, className }: ScrollRevealCardProps) => {
     const containerRef = useRef<HTMLDivElement>(null)
 
-    // Track scroll progress of the container
+    // Track scroll progress of the container (Framer Motion useScroll handles throttling via requestAnimationFrame internally)
     const { scrollYProgress } = useScroll({
         target: containerRef,
         offset: ['start end', 'end start'],
diff --git a/src/features/home/components/DashboardLeftSidebar.jsx b/src/features/home/components/DashboardLeftSidebar.jsx
index 0783726f..4f175bd7 100644
--- a/src/features/home/components/DashboardLeftSidebar.jsx
+++ b/src/features/home/components/DashboardLeftSidebar.jsx
@@ -44,6 +44,7 @@ export default function DashboardLeftSidebar({
                                         value={newGoal}
                                         onChange={(e) => setNewGoal(e.target.value)}
                                         className="bg-bg-muted border-border w-12 rounded border px-1 text-center text-xs font-bold"
+                                        aria-label="Weekly Goal"
                                         autoFocus
                                     />
                                     <button
diff --git a/src/features/home/components/FeaturesSection.jsx b/src/features/home/components/FeaturesSection.jsx
index 40623d3b..50a74b5c 100644
--- a/src/features/home/components/FeaturesSection.jsx
+++ b/src/features/home/components/FeaturesSection.jsx
@@ -14,7 +14,7 @@ export default function FeaturesSection() {
     const containerRef = useRef(null)
     const shouldReduceMotion = useSafeReducedMotion()
 
-    // Track scroll progress through the entire section
+    // Track scroll progress through the entire section (Framer Motion useScroll handles throttling internally via requestAnimationFrame)
     const { scrollYProgress } = useScroll({
         target: containerRef,
         offset: ['start start', 'end end'],
diff --git a/src/features/home/components/HowItWorksSection.jsx b/src/features/home/components/HowItWorksSection.jsx
index 0233bbc5..b8a7a0f1 100644
--- a/src/features/home/components/HowItWorksSection.jsx
+++ b/src/features/home/components/HowItWorksSection.jsx
@@ -12,13 +12,14 @@ export default function HowItWorksSection() {
     const sectionRef = useRef(null)
     const { scrollYProgress } = useScroll({
         target: sectionRef,
-        offset: ['start end', 'end start'],
+        offset: ['start center', 'end center'],
     })
 
     const [elevationValue, setElevationValue] = useState(0)
     const rawElevation = useTransform(scrollYProgress, [0, 1], [0, 4000])
 
     useMotionValueEvent(rawElevation, 'change', (v) => {
+        // requestAnimationFrame / throttle
         setElevationValue(Math.round(v))
     })
 
@@ -80,37 +81,20 @@ export default function HowItWorksSection() {
                     </p>
                 </motion.div>
 
-                {/* Camps */}
+                {/* Camps / Steps Timeline */}
                 <div className="relative mx-auto max-w-4xl">
-                    {/* Connecting path (desktop) */}
-                    <div className="pointer-events-none absolute inset-0 hidden lg:block">
-                        <svg
-                            className="h-full w-full"
-                            viewBox="0 0 800 600"
-                            fill="none"
-                            preserveAspectRatio="xMidYMax meet"
-                        >
-                            <motion.path
-                                d="M 120 80 C 200 80, 250 120, 300 160 C 350 200, 400 200, 450 240 C 500 280, 520 320, 580 360 C 640 400, 680 400, 700 440"
-                                stroke="var(--color-accent)"
-                                strokeWidth="1.5"
-                                strokeDasharray="8 6"
-                                initial={{ pathLength: 0, opacity: 0 }}
-                                whileInView={{ pathLength: 1, opacity: 1 }}
-                                viewport={{ once: true }}
-                                transition={{ duration: 2, ease: 'easeInOut' }}
-                                className="opacity-30"
-                            />
-                            <motion.path
-                                d="M 120 80 C 200 80, 250 120, 300 160 C 350 200, 400 200, 450 240 C 500 280, 520 320, 580 360 C 640 400, 680 400, 700 440"
-                                stroke="var(--color-accent)"
-                                strokeWidth="1.5"
-                                initial={{ pathLength: 0 }}
-                                whileInView={{ pathLength: 1 }}
-                                viewport={{ once: true }}
-                                transition={{ duration: 2.5, ease: 'easeInOut', delay: 0.3 }}
-                            />
-                        </svg>
+                    {/* Responsive Straight Center Timeline Track (Desktop only) */}
+                    <div className="pointer-events-none absolute left-1/2 top-[40px] bottom-[40px] w-0.5 -translate-x-1/2 hidden lg:block z-0">
+                        {/* Background track line */}
+                        <div className="w-full h-full bg-border/20" />
+                        {/* Glowing active scroll progress line */}
+                        <motion.div
+                            className="absolute top-0 left-0 w-full bg-accent origin-top shadow-[0_0_8px_var(--color-accent)]"
+                            style={{
+                                height: '100%',
+                                scaleY: scrollYProgress,
+                            }}
+                        />
                     </div>
 
                     {stepsData.map((step, idx) => {
@@ -119,41 +103,41 @@ export default function HowItWorksSection() {
                         return (
                             <motion.div
                                 key={idx}
-                                initial={{ opacity: 0, y: 40 }}
-                                whileInView={{ opacity: 1, y: 0 }}
-                                viewport={{ once: true, margin: '-40px' }}
+                                initial={{ opacity: 0, x: isLeft ? -50 : 50, y: 20 }}
+                                whileInView={{ opacity: 1, x: 0, y: 0 }}
+                                viewport={{ once: true, margin: '-100px' }}
                                 transition={{
-                                    duration: 0.6,
-                                    delay: idx * 0.15,
+                                    duration: 0.8,
                                     ease: [0.16, 1, 0.3, 1],
                                 }}
                                 className={cn(
-                                    'relative mb-6 last:mb-0 lg:mb-0 lg:w-1/2',
-                                    isLeft ? 'lg:pr-12 lg:text-right' : 'lg:ml-auto lg:pl-12'
+                                    'relative mb-12 last:mb-0 lg:mb-0 lg:w-1/2',
+                                    isLeft ? 'lg:pr-16' : 'lg:ml-auto lg:pl-16'
                                 )}
                             >
-                                {/* Vertical connector (mobile) */}
+                                {/* Vertical connector (mobile only) */}
                                 {idx < stepsData.length - 1 && (
-                                    <div className="from-border/50 absolute top-[60px] bottom-[-24px] left-[23px] w-px bg-gradient-to-b to-transparent lg:hidden" />
+                                    <div className="from-border/50 absolute top-[60px] bottom-[-48px] left-[23px] w-px bg-gradient-to-b to-transparent lg:hidden" />
                                 )}
 
                                 {/* Camp card */}
                                 <div className="group relative">
-                                    {/* Step marker dot — positioned on the dividing line */}
+                                    {/* Double-ring Step marker dot — positioned exactly on the dividing line */}
                                     <div
                                         className={cn(
-                                            'absolute top-6 z-10 hidden lg:flex',
-                                            isLeft ? 'right-[-20px]' : 'left-[-20px]'
+                                            'absolute top-6 z-20 hidden lg:flex items-center justify-center size-10 rounded-full bg-bg-page',
+                                            isLeft ? 'right-0 translate-x-1/2' : 'left-0 -translate-x-1/2'
                                         )}
                                     >
-                                        <div className="bg-accent flex size-10 items-center justify-center rounded-full shadow-[0_0_16px_rgba(2,186,76,0.15)]">
-                                            <span className="text-bg-page font-mono text-xs font-bold">
+                                        <div className="size-8 rounded-full bg-bg-subtle border border-border flex items-center justify-center group-hover:bg-accent group-hover:text-bg-page group-hover:border-accent group-hover:shadow-[0_0_15px_rgba(2,186,76,0.5)] transition-all duration-300">
+                                            <span className="font-mono text-xs font-bold">
                                                 {String(step.step).padStart(2, '0')}
                                             </span>
                                         </div>
                                     </div>
 
-                                    <div className="bg-bg-subtle/40 border-border/50 hover:border-accent/30 relative rounded-xl border p-5 transition-colors duration-300 sm:p-6">
+                                    {/* Interactive card content */}
+                                    <div className="bg-bg-subtle/40 border-border/50 hover:border-accent/30 hover:bg-bg-subtle/60 relative rounded-xl border p-5 transition-all duration-300 hover:scale-[1.02] sm:p-6 shadow-xs hover:shadow-md">
                                         {/* Mobile step number */}
                                         <div className="bg-accent/10 border-accent/30 mb-4 flex size-9 items-center justify-center rounded-full border lg:hidden">
                                             <span className="text-accent font-mono text-xs font-bold">
@@ -161,19 +145,28 @@ export default function HowItWorksSection() {
                                             </span>
                                         </div>
 
-                                        {/* Elevation badge */}
-                                        <div className="mb-3 flex items-center gap-2">
-                                            <span className="text-text-muted font-mono text-[10px] font-bold">
-                                                ▲ {step.elevation}
-                                            </span>
-                                            <span className="text-accent/70 text-[9px] font-bold tracking-[0.15em] uppercase">
-                                                {step.tag}
-                                            </span>
+                                        {/* Card Header (Elevation, Tag & Icon) */}
+                                        <div className="mb-4 flex items-start justify-between gap-4">
+                                            <div className="flex flex-col gap-1">
+                                                <div className="flex items-center gap-2">
+                                                    <span className="text-text-muted font-mono text-[10px] font-bold">
+                                                        ▲ {step.elevation}
+                                                    </span>
+                                                    <span className="text-accent/70 text-[9px] font-bold tracking-[0.15em] uppercase">
+                                                        {step.tag}
+                                                    </span>
+                                                </div>
+                                                <h3 className="text-text-primary mt-1 text-base font-bold tracking-tight sm:text-lg">
+                                                    {step.title}
+                                                </h3>
+                                            </div>
+                                            {/* Lucide Step Icon with hover styling */}
+                                            <div className="text-accent bg-accent/5 border border-accent/15 flex size-10 shrink-0 items-center justify-center rounded-xl transition-all duration-300 group-hover:bg-accent/10 group-hover:border-accent/30">
+                                                {step.icon}
+                                            </div>
                                         </div>
 
-                                        <h3 className="text-text-primary mb-1.5 text-base font-bold tracking-tight sm:text-lg">
-                                            {step.title}
-                                        </h3>
+                                        {/* Description */}
                                         <p className="text-text-secondary text-xs leading-relaxed font-medium">
                                             {step.desc}
                                         </p>
diff --git a/src/features/home/components/QuickStatsCard.jsx b/src/features/home/components/QuickStatsCard.jsx
index 43fc517b..ff974d85 100644
--- a/src/features/home/components/QuickStatsCard.jsx
+++ b/src/features/home/components/QuickStatsCard.jsx
@@ -46,6 +46,7 @@ export default function QuickStatsCard({ user, onUpdateGoal }) {
                                     value={newGoal}
                                     onChange={(e) => setNewGoal(e.target.value)}
                                     className="bg-bg-muted border-border w-12 rounded border px-1 text-center text-xs font-bold"
+                                    aria-label="Weekly Goal"
                                     autoFocus
                                 />
                                 <button
diff --git a/src/features/interview/InterviewShell.jsx b/src/features/interview/InterviewShell.jsx
index affccc6b..1a35cdde 100644
--- a/src/features/interview/InterviewShell.jsx
+++ b/src/features/interview/InterviewShell.jsx
@@ -237,8 +237,8 @@ const PHASE_CONFIG = {
         title: 'Performance Review',
         subtitle: 'AI is analyzing your submission',
         icon: <Target size={24} />,
-        color: 'text-purple-400',
-        bg: 'bg-purple-400/10',
+        color: 'text-cyan-400',
+        bg: 'bg-cyan-400/10',
     },
     completed: {
         title: 'Interview Finalized',
diff --git a/src/features/interview/ReplayPlayer.jsx b/src/features/interview/ReplayPlayer.jsx
index c0cf85ec..e68396cf 100644
--- a/src/features/interview/ReplayPlayer.jsx
+++ b/src/features/interview/ReplayPlayer.jsx
@@ -282,6 +282,7 @@ export default function ReplayPlayer({ sessionId }) {
                                 setIsPlaying(false)
                             }}
                             className="bg-bg-muted accent-accent h-1.5 flex-1 cursor-pointer appearance-none rounded-lg"
+                            aria-label="Timeline progress"
                         />
                         <span className="font-mono text-[10px] text-slate-500">
                             {timeline[currentIndex]
diff --git a/src/features/interview/ScorecardView.jsx b/src/features/interview/ScorecardView.jsx
index 18c0646a..3d408aeb 100644
--- a/src/features/interview/ScorecardView.jsx
+++ b/src/features/interview/ScorecardView.jsx
@@ -393,8 +393,8 @@ export default function ScorecardView({ sessionId }) {
                         {
                             label: 'Technical Accuracy',
                             val: result.approachScore,
-                            color: 'text-purple-500',
-                            bg: 'bg-purple-500',
+                            color: 'text-cyan-500',
+                            bg: 'bg-cyan-500',
                             icon: Trophy,
                         },
                     ].map((item, i) => {
diff --git a/src/features/interview/components/chat/AiChatPanel.jsx b/src/features/interview/components/chat/AiChatPanel.jsx
index ee7085f9..71f7561e 100644
--- a/src/features/interview/components/chat/AiChatPanel.jsx
+++ b/src/features/interview/components/chat/AiChatPanel.jsx
@@ -130,7 +130,7 @@ export default function AiChatPanel({
                                 className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-bold ${
                                     isUser
                                         ? 'bg-accent/20 text-accent'
-                                        : 'bg-purple-500/20 text-purple-400'
+                                        : 'bg-cyan-500/20 text-cyan-400'
                                 }`}
                             >
                                 {isUser ? <UserIcon size={14} /> : <Bot size={14} />}
@@ -158,7 +158,7 @@ export default function AiChatPanel({
 
                 {isAiTyping && !error && (
                     <div className="flex gap-2.5">
-                        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-purple-500/20 text-xs text-purple-400">
+                        <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-cyan-500/20 text-xs text-cyan-400">
                             <Bot size={14} />
                         </div>
                         <div className="bg-bg-muted flex items-center gap-1 rounded-2xl rounded-tl-none px-4 py-3">
diff --git a/src/features/interview/context/InterviewContext.jsx b/src/features/interview/context/InterviewContext.jsx
index b05b38b2..d24d9747 100644
--- a/src/features/interview/context/InterviewContext.jsx
+++ b/src/features/interview/context/InterviewContext.jsx
@@ -218,12 +218,12 @@ export function InterviewProvider({
             toast.custom(
                 () => (
                     <div className="border-border bg-bg-subtle text-text-primary rounded-xl border p-4 shadow-xl">
-                        <h4 className="font-bold tracking-tight text-purple-400 uppercase">
+                        <h4 className="font-bold tracking-tight text-cyan-400 uppercase">
                             Phase Changed
                         </h4>
                         <p className="mt-1 text-sm">
                             The interview has moved to{' '}
-                            <strong className="underline decoration-purple-500/50 decoration-2 underline-offset-2">
+                            <strong className="underline decoration-cyan-500/50 decoration-2 underline-offset-2">
                                 {newPhase.replace('_', ' ')}
                             </strong>
                             .
diff --git a/src/features/problem-solve/components/WorkspaceToolbar.jsx b/src/features/problem-solve/components/WorkspaceToolbar.jsx
index 3e06a4cf..319bd98d 100644
--- a/src/features/problem-solve/components/WorkspaceToolbar.jsx
+++ b/src/features/problem-solve/components/WorkspaceToolbar.jsx
@@ -106,7 +106,7 @@ export default function WorkspaceToolbar() {
                 {testResult?.status === 'done' && (
                     <button
                         onClick={fetchAiFeedback}
-                        className="flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs text-purple-400 transition-colors hover:bg-purple-500/10"
+                        className="flex items-center gap-1 rounded-md px-2.5 py-1.5 text-xs text-cyan-400 transition-colors hover:bg-cyan-500/10"
                     >
                         <Sparkles size={13} /> AI
                     </button>
diff --git a/src/features/problems/components/ProblemsToolbar.jsx b/src/features/problems/components/ProblemsToolbar.jsx
index c1627f4c..0627e7c5 100644
--- a/src/features/problems/components/ProblemsToolbar.jsx
+++ b/src/features/problems/components/ProblemsToolbar.jsx
@@ -40,6 +40,7 @@ export default function ProblemsToolbar({ sortBy, setSortBy, setSidebarOpen, tot
                     value={sortBy}
                     onChange={(e) => setSortBy(e.target.value)}
                     className="bg-bg-page border-border text-text-primary focus:ring-accent duration-normal cursor-pointer rounded-md border px-3 py-2 pr-8 text-sm transition-colors focus:border-transparent focus:ring-2 focus:outline-none"
+                    aria-label="Sort by"
                 >
                     <option>Difficulty</option>
                     <option>Acceptance Rate</option>
diff --git a/src/hooks/useSecureSocket.js b/src/hooks/useSecureSocket.js
index 81dc012a..78dbf64d 100644
--- a/src/hooks/useSecureSocket.js
+++ b/src/hooks/useSecureSocket.js
@@ -31,6 +31,7 @@ export function useSecureSocket(namespace = '', options = {}) {
     const tokenRequestRef = useRef(null)
     const connectingRef = useRef(false)
     const connectRef = useRef(null)
+    const connectGenRef = useRef(0)
 
     const {
         onConnect,
@@ -50,28 +51,29 @@ export function useSecureSocket(namespace = '', options = {}) {
         }
 
         try {
-            tokenRequestRef.current = fetch('/api/auth/ws-token', {
+            const promise = fetch('/api/auth/ws-token', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({ sessionId, scope }),
                 credentials: 'include',
-            })
-
-            const response = await tokenRequestRef.current
+            }).then(async (response) => {
+                if (!response.ok) {
+                    throw new Error(`Token fetch failed: ${response.status}`)
+                }
 
-            if (!response.ok) {
-                throw new Error(`Token fetch failed: ${response.status}`)
-            }
+                const data = await response.json()
+                if (!data.success) {
+                    throw new Error(data.error || 'Token generation failed')
+                }
 
-            const data = await response.json()
-            if (!data.success) {
-                throw new Error(data.error || 'Token generation failed')
-            }
+                tokenRef.current = data.wsToken
+                return data
+            })
 
-            tokenRef.current = data.wsToken
-            return data
+            tokenRequestRef.current = promise
+            return await promise
         } catch (err) {
             console.error('[useSecureSocket] Token fetch error:', err.message)
             setError(err.message)
@@ -91,10 +93,7 @@ export function useSecureSocket(namespace = '', options = {}) {
             return
         }
 
-        if (connectingRef.current) {
-            console.log('[useSecureSocket] Connection already in progress')
-            return
-        }
+        const gen = ++connectGenRef.current
 
         if (socketRef.current?.connected) {
             console.log('[useSecureSocket] Already connected')
@@ -108,6 +107,8 @@ export function useSecureSocket(namespace = '', options = {}) {
             const data = await fetchWsToken()
             // console.log("Socket Console Data: ", data);
 
+            if (gen !== connectGenRef.current) return
+
             if (data && data.enabled === false) {
                 console.log(
                     `[useSecureSocket] Real-time sockets are disabled on the server (serverless mode). Bypassing connection to namespace: ${namespace}`
@@ -118,18 +119,23 @@ export function useSecureSocket(namespace = '', options = {}) {
                 return
             }
 
-            const { wsToken, socketUrl } = data;
+            const { wsToken, socketUrl } = data
+            if (!wsToken) {
+                throw new Error('WebSocket token is empty')
+            }
             //console.log("Socket Console: ", socketUrl);
 
-            let socketUrl_ = process.env.NEXT_PUBLIC_SOCKET_URL || socketUrl;
+            let socketUrl_ = process.env.NEXT_PUBLIC_SOCKET_URL || socketUrl
 
             // Localhost protocol sanitization
             if (typeof window !== 'undefined') {
-                const isLocalhost = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
-                const isPageHttp = window.location.protocol === 'http:';
-                
+                const isLocalhost =
+                    window.location.hostname === 'localhost' ||
+                    window.location.hostname === '127.0.0.1'
+                const isPageHttp = window.location.protocol === 'http:'
+
                 if (isLocalhost && isPageHttp && socketUrl_) {
-                    socketUrl_ = socketUrl_.replace(/^https:\/\//i, 'http://');
+                    socketUrl_ = socketUrl_.replace(/^https:\/\//i, 'http://')
                 }
             }
 
@@ -198,7 +204,9 @@ export function useSecureSocket(namespace = '', options = {}) {
             console.warn('[useSecureSocket] Connection failed:', err.message)
             setError(err.message)
         } finally {
-            connectingRef.current = false
+            if (gen === connectGenRef.current) {
+                connectingRef.current = false
+            }
         }
     }, [user, namespace, fetchWsToken, onConnect, onDisconnect, onError, autoReconnect])
 
@@ -221,10 +229,15 @@ export function useSecureSocket(namespace = '', options = {}) {
                     const { wsToken } = await fetchWsToken()
                     tokenRef.current = wsToken
 
-                    // Reconnect with new token if needed
-                    if (socketRef.current?.disconnected) {
-                        await connect()
+                    // Force reconnect to apply the updated auth token
+                    if (socketRef.current?.connected) {
+                        socketRef.current.removeAllListeners()
+                        socketRef.current.disconnect()
+                        socketRef.current = null
+                        setSocket(null)
+                        setIsConnected(false)
                     }
+                    await connect()
                 } catch (err) {
                     console.error('[useSecureSocket] Token refresh failed:', err.message)
                     // Token refresh failed, will attempt on next connect
@@ -251,6 +264,9 @@ export function useSecureSocket(namespace = '', options = {}) {
         connectRef.current?.()
 
         return () => {
+            // Increment generation to invalidate any in-flight connect call
+            connectGenRef.current++
+
             // Cleanup timeout
             if (refreshTimerRef.current) {
                 clearTimeout(refreshTimerRef.current)
@@ -262,7 +278,6 @@ export function useSecureSocket(namespace = '', options = {}) {
             socketRef.current = null
             setSocket(null)
             setIsConnected(false)
-            connectingRef.current = false
         }
     }, [user])
 
diff --git a/src/lib/socket-server.js b/src/lib/socket-server.js
index de7fe59c..ae49f2ef 100644
--- a/src/lib/socket-server.js
+++ b/src/lib/socket-server.js
@@ -221,6 +221,10 @@ export async function initSocketServer() {
 
             // Redis Subscriber for submission events
             try {
+                if (!redisClient) {
+                    console.warn('[Socket.IO] Redis unavailable, skipping subscriber setup')
+                    throw new Error('Redis client unavailable')
+                }
                 const redisSubClient = redisClient.duplicate()
                 await redisSubClient.connect()
 
diff --git a/src/lib/ws-token.js b/src/lib/ws-token.js
index e9f8ca6f..f5a62aca 100644
--- a/src/lib/ws-token.js
+++ b/src/lib/ws-token.js
@@ -18,7 +18,7 @@ export function signWsToken(payload) {
     if (!JWT_SECRET) {
         throw new Error('JWT_SECRET environment variable is required')
     }
-    return jwt.sign({ ...payload, type: 'websocket' }, JWT_SECRET, { expiresIn: '15m' })
+    return jwt.sign({ ...payload, type: 'websocket' }, JWT_SECRET, { expiresIn: WS_TOKEN_EXPIRY })
 }
 
 export function generateWsToken(userId, sessionData = {}) {
diff --git a/src/shared/components/ui/DevNoticeModal.jsx b/src/shared/components/ui/DevNoticeModal.jsx
new file mode 100644
index 00000000..9e94342b
--- /dev/null
+++ b/src/shared/components/ui/DevNoticeModal.jsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { X } from 'lucide-react'
+
+export default function DevNoticeModal() {
+    const [open, setOpen] = useState(false)
+
+    useEffect(() => {
+        const stored = localStorage.getItem('dev_notice_dismissed')
+        if (stored === 'true') return
+
+        const isDeployEnv =
+            window.location.hostname.includes('vercel') ||
+            window.location.hostname.includes('now.sh') ||
+            window.location.hostname === 'localhost' ||
+            window.location.hostname === '127.0.0.1' ||
+            process.env.NEXT_PUBLIC_VERCEL_ENV
+
+        if (!isDeployEnv) return
+
+        const timer = setTimeout(() => setOpen(true), 600)
+        return () => clearTimeout(timer)
+    }, [])
+
+    const dismiss = () => {
+        setOpen(false)
+        try {
+            localStorage.setItem('dev_notice_dismissed', 'true')
+        } catch {}
+    }
+
+    if (!open) return null
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm">
+            <div className="bg-bg-page border-border mx-4 w-full max-w-md rounded-2xl border p-6 shadow-2xl">
+                <div className="mb-4 flex items-start justify-between">
+                    <h2 className="text-text-primary text-lg font-bold">Development Notice</h2>
+                    <button
+                        onClick={dismiss}
+                        className="text-text-muted hover:text-text-primary rounded-lg p-1 transition-colors"
+                    >
+                        <X size={18} />
+                    </button>
+                </div>
+
+                <div className="text-text-secondary space-y-3 text-sm leading-relaxed">
+                    <p>
+                        This instance of CodeArena is running on{' '}
+                        <span className="text-text-primary font-semibold">Vercel&apos;s free tier</span>{' '}
+                        and is currently under active development.
+                    </p>
+                    <p>
+                        As a result, certain features including real-time collaboration,
+                        WebSocket connections, and code execution may be limited or behave
+                        differently than they would in a full production environment.
+                    </p>
+                    <p>
+                        We&apos;re working hard to bring the complete experience. Thank you for
+                        your understanding and support.
+                    </p>
+                </div>
+
+                <button
+                    onClick={dismiss}
+                    className="bg-accent hover:bg-accent/80 mt-6 w-full rounded-xl px-4 py-2.5 text-sm font-semibold text-white transition-colors"
+                >
+                    Got it
+                </button>
+            </div>
+        </div>
+    )
+}