feat: integrate Socket.IO for real-time communication; add socket connection management and token refresh handling

src/components/SocketStatus.tsx

@@ -0,0 +1,50 @@
+import { useSocket } from '../contexts/SocketContext'
+import { Badge } from './ui/badge'
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+
+export function SocketStatus() {
+  const { isConnected, connectionError, isReconnecting } = useSocket()
+
+  const getStatusBadge = () => {
+    if (isReconnecting) {
+      return <Badge variant="secondary">Reconnecting...</Badge>
+    }
+    return (
+      <Badge variant={isConnected ? 'default' : 'destructive'}>
+        {isConnected ? 'Connected' : 'Disconnected'}
+      </Badge>
+    )
+  }
+
+  const getStatusMessage = () => {
+    if (isReconnecting) {
+      return <div className="text-muted-foreground text-sm">Reconnecting with refreshed token...</div>
+    }
+    if (connectionError) {
+      return <div className="text-destructive text-sm">{connectionError}</div>
+    }
+    if (isConnected) {
+      return (
+        <div className="space-y-1">
+          <div className="text-muted-foreground text-sm">Ready for real-time communication</div>
+          <div className="text-xs text-muted-foreground">🔄 Proactive token refresh active</div>
+        </div>
+      )
+    }
+    return null
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-lg">
+          WebSocket Status
+          {getStatusBadge()}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        {getStatusMessage()}
+      </CardContent>
+    </Card>
+  )
+}