Update

server/launch_with_ui.py

@@ -35,6 +35,18 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+
+# Add the health endpoint BEFORE other routes to avoid conflicts
+@app.get("/health")
+async def health_check():
+    return {
+        "status": "healthy",
+        "server_running": True,
+        "frontend_enabled": os.getenv("SERVE_FRONTEND", "false").lower() == "true",
+        "api_available": True,
+    }
+
+
 # Mount the API under /api prefix
 app.mount("/api", api_app)
 
@@ -93,16 +105,6 @@ else:
         }
 
 
-@app.get("/health")
-async def health_check():
-    return {
-        "status": "healthy",
-        "server_running": True,
-        "frontend_enabled": serve_frontend,
-        "api_available": True,
-    }
-
-
 if __name__ == "__main__":
     port = int(os.getenv("PORT", 7860))
     host = os.getenv("HOST", "0.0.0.0")

server/logs.txt

@@ -1,141 +0,0 @@
-🤖 Starting LeRobot Arena Modular Server...
-Starting server...
-INFO:     127.0.0.1:64126 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64126 - "OPTIONS /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64126 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64126 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64126 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64132 - "OPTIONS /video/rooms/webcam/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64134 - "GET /video/rooms/webcam HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64132 - "POST /video/rooms/webcam/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64134 - "POST /video/rooms/webcam/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64134 - "GET /video/rooms/webcam HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64134 - "POST /video/rooms/webcam/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64136 - "POST /video/rooms/webcam/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64141 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64145 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64145 - "GET /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d/state HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64158 - "POST /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64145 - "OPTIONS /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64160 - "GET /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64145 - "POST /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64145 - "POST /video/rooms/b22f5bc5-caa2-47bb-b4b5-d0411654dc9d/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64170 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64181 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64181 - "GET /robotics/rooms/53ba9baa-e462-4a1b-8812-83f1337ae9f4/state HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64185 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64185 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64187 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64187 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64187 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64187 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64196 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64201 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64217 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64217 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64223 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64223 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64225 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64225 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64228 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64228 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64228 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64232 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64267 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64267 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64276 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64276 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64276 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64276 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64283 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64283 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64294 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64308 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64320 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64322 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64327 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64327 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64327 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64349 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64349 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64353 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64353 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64358 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64358 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64371 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64384 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64386 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64388 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64400 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /video/rooms/act-session-cb638131-camera/state HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64441 - "POST /video/rooms/act-session-cb638131-camera/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "OPTIONS /video/rooms/act-session-cb638131-camera/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64443 - "GET /video/rooms/act-session-cb638131-camera HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "POST /video/rooms/act-session-cb638131-camera/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "POST /video/rooms/act-session-cb638131-camera/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "GET /video/rooms/act-session-cb638131-camera HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64422 - "POST /video/rooms/act-session-cb638131-camera/webrtc/signal HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64451 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64453 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64455 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64445 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64465 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64465 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64482 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64482 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64496 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64520 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64522 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64524 - "POST /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /robotics/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64499 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64568 - "GET /robotics/rooms/act-session-a440b338-joint-output/state HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64598 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64600 - "OPTIONS /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64600 - "POST /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64600 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64600 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64609 - "GET /video/rooms/sdpoksd/state HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64609 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64614 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64616 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64618 - "GET /video/rooms HTTP/1.1" 200 OK
-INFO:     127.0.0.1:64621 - "GET /video/rooms HTTP/1.1" 200 OK
-Shutting down server...

server/p2p&server.txt

@@ -1,1817 +0,0 @@
-"""
-Video API routes for LeRobot Arena
-
-This module provides REST API endpoints for video room management,
-WebRTC signaling, and real-time communication.
-"""
-
-import logging
-
-from fastapi import APIRouter, Depends, HTTPException, WebSocket
-
-from .core import VideoCore
-from .models import (
-    CommunicationStrategy,
-    CreateRoomRequest,
-    ParticipantRole,
-    WebRTCSignalRequest,
-)
-
-logger = logging.getLogger(__name__)
-
-# Global video core instance
-video_core = VideoCore()
-
-# Create router
-router = APIRouter(prefix="/video", tags=["video"])
-
-
-def get_video_core() -> VideoCore:
-    """Dependency to get the video core instance"""
-    return video_core
-
-
-@router.get("/rooms")
-async def list_rooms():
-    """List all video rooms with details"""
-    return {
-        "success": True,
-        "rooms": video_core.list_rooms(),
-        "total": len(video_core.rooms),
-    }
-
-
-@router.post("/rooms")
-async def create_room(request: CreateRoomRequest | None = None):
-    """Create a new video room"""
-    room_id = None
-    config = None
-    recovery_config = None
-    communication_config = None
-
-    if request:
-        room_id = request.room_id
-        config = request.config
-        recovery_config = request.recovery_config
-        communication_config = request.communication_config
-
-    room_id = video_core.create_room(
-        room_id, config, recovery_config, communication_config
-    )
-
-    return {
-        "success": True,
-        "room_id": room_id,
-        "message": f"Video room {room_id} created successfully",
-        "communication_strategy": video_core.rooms[room_id].active_strategy.value
-        if room_id in video_core.rooms
-        else "unknown",
-    }
-
-
-@router.get("/rooms/{room_id}")
-async def get_room(room_id: str):
-    """Get room details"""
-    room_info = video_core.get_room_info(room_id)
-    if "error" in room_info:
-        raise HTTPException(status_code=404, detail="Room not found")
-
-    return {"success": True, "room": room_info}
-
-
-@router.delete("/rooms/{room_id}")
-async def delete_room(room_id: str):
-    """Delete a video room"""
-    if video_core.delete_room(room_id):
-        return {"success": True, "message": f"Room {room_id} deleted successfully"}
-    raise HTTPException(status_code=404, detail="Room not found")
-
-
-@router.get("/rooms/{room_id}/state")
-async def get_room_state(room_id: str):
-    """Get current room state with participants and video stats"""
-    state = video_core.get_room_state(room_id)
-    if "error" in state:
-        raise HTTPException(status_code=404, detail="Room not found")
-
-    return {"success": True, "state": state}
-
-
-@router.post("/rooms/{room_id}/webrtc/signal")
-async def handle_webrtc_signal(room_id: str, signal: WebRTCSignalRequest):
-    """Handle WebRTC signaling (offer, answer, ice)"""
-    try:
-        # Get the participant's role from the room
-        room = video_core.rooms.get(room_id)
-        participant_role = None
-
-        if room:
-            if room.producer == signal.client_id:
-                participant_role = "producer"
-            elif signal.client_id in room.consumers:
-                participant_role = "consumer"
-
-        logger.info(
-            f"🔧 WebRTC signal from {signal.client_id} (role: {participant_role}) in room {room_id}"
-        )
-
-        response = await video_core.handle_webrtc_signal(
-            room_id, signal.client_id, signal.message, participant_role
-        )
-
-    except ValueError as e:
-        raise HTTPException(status_code=400) from e
-    except Exception as e:
-        raise HTTPException(status_code=500) from e
-    else:
-        if response:
-            return {"success": True, "response": response}
-        return {"success": True, "message": "Signal processed"}
-
-
-@router.post("/rooms/{room_id}/strategy")
-async def switch_room_strategy(
-    room_id: str,
-    request: dict,
-    video_core: VideoCore = Depends(get_video_core),
-):
-    """Switch communication strategy for a room"""
-    try:
-        strategy_str = request.get("strategy")
-        reason = request.get("reason", "API request")
-
-        if not strategy_str:
-            raise HTTPException(status_code=400, detail="Strategy is required")
-
-        try:
-            strategy = CommunicationStrategy(strategy_str)
-        except ValueError:
-            raise HTTPException(
-                status_code=400, detail=f"Invalid strategy: {strategy_str}"
-            )
-
-        success = await video_core.switch_strategy(room_id, strategy, reason)
-
-        if not success:
-            raise HTTPException(status_code=404, detail="Room not found")
-
-        # Get updated strategy info
-        room = video_core.rooms.get(room_id)
-        if not room:
-            raise HTTPException(status_code=404, detail="Room not found")
-
-        strategy_info = {
-            "current_strategy": room.active_strategy.value,
-            "available_strategies": ["p2p", "server", "hybrid"],
-            "can_switch": True,
-            "switch_count": 0,  # Could be tracked if needed
-        }
-
-        return {
-            "success": True,
-            "strategy_info": strategy_info,
-            "message": f"Strategy switched to {strategy.value}",
-        }
-
-    except HTTPException:
-        raise
-    except Exception as e:
-        logger.exception(f"Error switching strategy for room {room_id}")
-        raise HTTPException(status_code=500, detail=f"Failed to switch strategy: {e!s}")
-
-
-@router.get("/rooms/{room_id}/strategy")
-async def get_room_strategy(
-    room_id: str,
-    video_core: VideoCore = Depends(get_video_core),
-):
-    """Get current strategy information for a room"""
-    room = video_core.rooms.get(room_id)
-    if not room:
-        raise HTTPException(status_code=404, detail="Room not found")
-
-    strategy_info = {
-        "current_strategy": room.active_strategy.value,
-        "available_strategies": ["p2p", "server", "hybrid"],
-        "can_switch": True,
-        "switch_count": 0,  # Could be tracked if needed
-    }
-
-    return {"success": True, "strategy_info": strategy_info}
-
-
-@router.get("/status")
-async def get_status():
-    """Get video service status"""
-    strategy_handlers = video_core.strategy_handlers
-    strategy_stats = {}
-
-    for room_id, handler in strategy_handlers.items():
-        strategy = handler.strategy.value
-        if strategy not in strategy_stats:
-            strategy_stats[strategy] = 0
-        strategy_stats[strategy] += 1
-
-    return {
-        "service": "video",
-        "status": "active",
-        "rooms_count": len(video_core.rooms),
-        "websocket_connections_count": len(video_core.websocket_connections),
-        "version": "2.0.0",
-        "supported_roles": [role.value for role in ParticipantRole],
-        "supported_encodings": ["jpeg", "h264", "vp8", "vp9"],
-        "recovery_policies": [
-            "freeze_last_frame",
-            "connection_info",
-            "black_screen",
-            "fade_to_black",
-            "overlay_status",
-        ],
-        "communication_strategies": {
-            "supported": ["p2p", "server", "hybrid"],
-            "active_by_strategy": strategy_stats,
-            "total_strategy_handlers": len(strategy_handlers),
-        },
-    }
-
-
-@router.get("/health")
-async def health_check():
-    """Health check endpoint"""
-    return {"status": "healthy", "service": "video"}
-
-
-@router.get("/")
-async def video_status():
-    """Video service main endpoint"""
-    return {
-        "status": "active",
-        "service": "video",
-        "message": "Video service running with room-based WebRTC streaming",
-        "version": "2.0.0",
-        "architecture": "producer/consumer rooms",
-        "endpoints": [
-            "/video/rooms - List all video rooms",
-            "/video/rooms/{room_id} - Get room details",
-            "/video/rooms/{room_id}/webrtc/signal - WebRTC signaling",
-            "/video/rooms/{room_id}/ws - WebSocket connection",
-            "/video/status - Service status",
-        ],
-    }
-
-
-@router.websocket("/rooms/{room_id}/ws")
-async def websocket_endpoint(websocket: WebSocket, room_id: str):
-    """WebSocket connection for room management and heartbeat"""
-    await video_core.handle_websocket(websocket, room_id)
-
-<script lang="ts">
-	import { onMount } from 'svelte';
-	import { video } from 'lerobot-arena-client';
-	import type { video as videoTypes } from 'lerobot-arena-client';
-
-	// State
-	let producer: video.VideoProducer;
-	let connected = $state<boolean>(false);
-	let connecting = $state<boolean>(false);
-	let streaming = $state<boolean>(false);
-	let roomId = $state<string>('');
-	let participantId = $state<string>('');
-	let error = $state<string>('');
-
-	// Video configuration
-	let videoConfig = $state<videoTypes.VideoConfig>({
-		resolution: { width: 640, height: 480 },
-		framerate: 30,
-		bitrate: 1000000,
-		encoding: 'vp8',
-		quality: 80
-	});
-
-	// Available configurations
-	const resolutions = [
-		{ label: '320x240', value: { width: 320, height: 240 } },
-		{ label: '640x480', value: { width: 640, height: 480 } },
-		{ label: '1280x720', value: { width: 1280, height: 720 } },
-		{ label: '1920x1080', value: { width: 1920, height: 1080 } }
-	];
-
-	const framerates = [15, 24, 30, 60];
-	const bitrates = [
-		{ label: '500 Kbps', value: 500000 },
-		{ label: '1 Mbps', value: 1000000 },
-		{ label: '2 Mbps', value: 2000000 },
-		{ label: '5 Mbps', value: 5000000 }
-	];
-
-	// Streaming state
-	let streamType = $state<'camera' | 'screen'>('camera');
-	let localVideoElement: HTMLVideoElement;
-
-	// Command history
-	let commandHistory = $state<Array<{ timestamp: string; command: string; data: any }>>([]);
-
-	// Debug info
-	let debugInfo = $state<{
-		connectionAttempts: number;
-		lastCommandSent: string;
-		commandsSent: number;
-		wsConnected: boolean;
-		currentRoom: string;
-		webrtcState: string;
-	}>({
-		connectionAttempts: 0,
-		lastCommandSent: '',
-		commandsSent: 0,
-		wsConnected: false,
-		currentRoom: '',
-		webrtcState: 'disconnected'
-	});
-
-	// WebRTC Stats
-	let stats = $state<videoTypes.WebRTCStats | null>(null);
-
-	async function connectProducer() {
-		if (!roomId.trim() || !participantId.trim()) {
-			error = 'Please enter both Room ID and Participant ID';
-			return;
-		}
-
-		debugInfo.connectionAttempts++;
-
-		try {
-			connecting = true;
-			error = '';
-
-			producer = new video.VideoProducer('http://localhost:8000');
-
-			// Set up event handlers
-			producer.onConnected(() => {
-				connected = true;
-				connecting = false;
-				debugInfo.wsConnected = true;
-				debugInfo.currentRoom = roomId;
-				addToHistory('CONNECTED', 'Connected to room as video producer');
-			});
-
-			producer.onDisconnected(() => {
-				connected = false;
-				streaming = false;
-				debugInfo.wsConnected = false;
-				addToHistory('DISCONNECTED', 'Disconnected from room');
-			});
-
-			producer.onError((errorMsg) => {
-				error = errorMsg;
-				addToHistory('ERROR', errorMsg);
-			});
-
-			const success = await producer.connect(roomId, participantId);
-			if (!success) {
-				error = 'Failed to connect. Room might not exist or already have a producer.';
-				connecting = false;
-			}
-		} catch (err) {
-			error = `Connection failed: ${err}`;
-			connecting = false;
-		}
-	}
-
-	async function createNewRoom() {
-		debugInfo.connectionAttempts++;
-
-		try {
-			connecting = true;
-			error = '';
-
-			producer = new video.VideoProducer('http://localhost:8000');
-
-			// Set up event handlers
-			producer.onConnected(() => {
-				connected = true;
-				connecting = false;
-				roomId = producer.currentRoomId || '';
-				debugInfo.wsConnected = true;
-				debugInfo.currentRoom = roomId;
-				addToHistory('ROOM_CREATED', `Created and connected to room ${roomId}`);
-			});
-
-			producer.onDisconnected(() => {
-				connected = false;
-				streaming = false;
-				debugInfo.wsConnected = false;
-			});
-
-			producer.onError((errorMsg) => {
-				error = errorMsg;
-				addToHistory('ERROR', errorMsg);
-			});
-
-			const newProducer = await video.VideoProducer.createAndConnect(
-				'http://localhost:8000',
-				undefined,
-				participantId || `producer_${Date.now()}`
-			);
-
-			producer = newProducer;
-			roomId = producer.currentRoomId || '';
-			connected = true;
-			connecting = false;
-			debugInfo.wsConnected = true;
-			debugInfo.currentRoom = roomId;
-
-			addToHistory('ROOM_CREATED', `Created room ${roomId}`);
-		} catch (err) {
-			error = `Failed to create room: ${err}`;
-			connecting = false;
-		}
-	}
-
-	async function startStream() {
-		if (!connected || !producer) return;
-
-		try {
-			let stream: MediaStream;
-
-			if (streamType === 'camera') {
-				const constraints = {
-					video: {
-						width: videoConfig.resolution?.width || 640,
-						height: videoConfig.resolution?.height || 480,
-						frameRate: videoConfig.framerate || 30
-					},
-					audio: false
-				};
-				stream = await producer.startCamera(constraints);
-			} else {
-				stream = await producer.startScreenShare();
-			}
-
-			// Display local stream
-			if (localVideoElement) {
-				localVideoElement.srcObject = stream;
-			}
-
-			streaming = true;
-			addToHistory('STREAM_STARTED', `Started ${streamType} stream`);
-
-			// Monitor WebRTC connection
-			startStatsMonitoring();
-		} catch (err) {
-			error = `Failed to start ${streamType} stream: ${err}`;
-			addToHistory('ERROR', `Failed to start ${streamType} stream`);
-		}
-	}
-
-	async function stopStream() {
-		if (!connected || !producer) return;
-
-		try {
-			await producer.stopStreaming();
-			streaming = false;
-
-			if (localVideoElement) {
-				localVideoElement.srcObject = null;
-			}
-
-			addToHistory('STREAM_STOPPED', `Stopped ${streamType} stream`);
-		} catch (err) {
-			error = `Failed to stop stream: ${err}`;
-		}
-	}
-
-	async function updateVideoConfig() {
-		if (!connected || !producer) return;
-
-		debugInfo.commandsSent++;
-		debugInfo.lastCommandSent = 'VIDEO_CONFIG_UPDATE';
-
-		try {
-			await producer.updateVideoConfig(videoConfig);
-			addToHistory('CONFIG_UPDATE', videoConfig);
-		} catch (err) {
-			error = `Failed to update video config: ${err}`;
-		}
-	}
-
-	async function sendEmergencyStop() {
-		if (!connected || !producer) return;
-
-		debugInfo.commandsSent++;
-		debugInfo.lastCommandSent = 'EMERGENCY_STOP';
-
-		try {
-			await producer.sendEmergencyStop('Manual emergency stop from video producer interface');
-			addToHistory('EMERGENCY_STOP', 'Manual emergency stop triggered');
-		} catch (err) {
-			error = `Failed to send emergency stop: ${err}`;
-		}
-	}
-
-	async function sendHeartbeat() {
-		if (!connected || !producer) return;
-
-		debugInfo.commandsSent++;
-		debugInfo.lastCommandSent = 'HEARTBEAT';
-
-		try {
-			await producer.sendHeartbeat();
-			addToHistory('HEARTBEAT', 'Heartbeat sent');
-		} catch (err) {
-			error = `Failed to send heartbeat: ${err}`;
-		}
-	}
-
-	function startStatsMonitoring() {
-		const interval = setInterval(async () => {
-			if (!producer || !streaming) {
-				clearInterval(interval);
-				return;
-			}
-
-			try {
-				stats = await producer.getStats();
-				const pc = producer.getPeerConnection();
-				if (pc) {
-					debugInfo.webrtcState = pc.connectionState;
-				}
-			} catch (err) {
-				console.error('Failed to get stats:', err);
-			}
-		}, 1000);
-	}
-
-	function addToHistory(command: string, data: any) {
-		commandHistory = [
-			{
-				timestamp: new Date().toLocaleTimeString(),
-				command,
-				data
-			},
-			...commandHistory
-		].slice(0, 10); // Keep last 10 commands only
-	}
-
-	async function exitSession() {
-		if (producer && connected) {
-			await producer.disconnect();
-		}
-		connected = false;
-		streaming = false;
-		debugInfo.wsConnected = false;
-		debugInfo.currentRoom = '';
-	}
-
-	onMount(() => {
-		participantId = `producer_${Date.now()}`;
-
-		return () => {
-			exitSession();
-		};
-	});
-</script>
-
-<svelte:head>
-	<title>Video Producer - LeRobot Arena</title>
-</svelte:head>
-
-<div class="mx-auto max-w-6xl space-y-6">
-	<!-- Header -->
-	<div class="flex items-center justify-between">
-		<div>
-			<h1 class="font-mono text-2xl font-bold text-gray-900">📹 Video Producer Session</h1>
-			<p class="mt-1 font-mono text-sm text-gray-600">
-				Stream camera or screen with real-time WebRTC
-			</p>
-		</div>
-		<div class="flex items-center space-x-4">
-			<div class="flex items-center space-x-2">
-				{#if connected}
-					<div class="h-3 w-3 rounded-full bg-green-500"></div>
-					<span class="font-mono text-sm font-medium text-green-700">Connected</span>
-				{:else if connecting}
-					<div class="h-3 w-3 animate-pulse rounded-full bg-yellow-500"></div>
-					<span class="font-mono text-sm font-medium text-yellow-700">Connecting...</span>
-				{:else}
-					<div class="h-3 w-3 rounded-full bg-red-500"></div>
-					<span class="font-mono text-sm font-medium text-red-700">Disconnected</span>
-				{/if}
-			</div>
-			{#if streaming}
-				<div class="flex items-center space-x-2">
-					<div class="h-3 w-3 animate-pulse rounded-full bg-purple-500"></div>
-					<span class="font-mono text-sm font-medium text-purple-700">Streaming</span>
-				</div>
-			{/if}
-			<a
-				href="/video"
-				class="rounded border bg-gray-100 px-3 py-2 font-mono text-sm hover:bg-gray-200">← Back</a
-			>
-		</div>
-	</div>
-
-	<!-- Debug Info -->
-	<div class="rounded border bg-gray-900 p-4 font-mono text-sm text-green-400">
-		<div class="mb-2 font-bold">VIDEO PRODUCER DEBUG</div>
-		<div class="grid grid-cols-3 gap-4 md:grid-cols-6">
-			<div>Attempts: {debugInfo.connectionAttempts}</div>
-			<div>Commands: {debugInfo.commandsSent}</div>
-			<div>Last: {debugInfo.lastCommandSent || 'None'}</div>
-			<div>WS: {debugInfo.wsConnected ? 'ON' : 'OFF'}</div>
-			<div>Room: {debugInfo.currentRoom || 'None'}</div>
-			<div>WebRTC: {debugInfo.webrtcState}</div>
-		</div>
-		{#if stats}
-			<div class="mt-2 grid grid-cols-3 gap-4 md:grid-cols-6">
-				<div>FPS: {stats.framesPerSecond.toFixed(1)}</div>
-				<div>Bitrate: {(stats.videoBitsPerSecond / 1000).toFixed(0)}k</div>
-				<div>Resolution: {stats.frameWidth}x{stats.frameHeight}</div>
-				<div>Packets Lost: {stats.packetsLost}</div>
-				<div>Total Packets: {stats.totalPackets}</div>
-				<div>
-					Loss Rate: {stats.totalPackets > 0
-						? ((stats.packetsLost / stats.totalPackets) * 100).toFixed(1)
-						: 0}%
-				</div>
-			</div>
-		{/if}
-		{#if error}
-			<div class="mt-2 text-red-400">Error: {error}</div>
-		{/if}
-	</div>
-
-	{#if !connected}
-		<!-- Connection Section -->
-		<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-			<!-- Join Existing Room -->
-			<div class="rounded border p-6">
-				<h3 class="mb-4 font-mono text-lg font-medium">Join Existing Room</h3>
-				<div class="space-y-4">
-					<div>
-						<label for="roomId" class="mb-1 block font-mono text-sm font-medium text-gray-700">
-							Room ID
-						</label>
-						<input
-							id="roomId"
-							type="text"
-							bind:value={roomId}
-							placeholder="Enter room ID"
-							class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-						/>
-					</div>
-					<div>
-						<label
-							for="participantId"
-							class="mb-1 block font-mono text-sm font-medium text-gray-700"
-						>
-							Participant ID
-						</label>
-						<input
-							id="participantId"
-							type="text"
-							bind:value={participantId}
-							placeholder="Your participant ID"
-							class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-						/>
-					</div>
-					<button
-						onclick={connectProducer}
-						disabled={connecting || !roomId.trim() || !participantId.trim()}
-						class={[
-							'w-full rounded border px-4 py-2 font-mono',
-							connecting || !roomId.trim() || !participantId.trim()
-								? 'bg-gray-200 text-gray-500'
-								: 'bg-purple-600 text-white hover:bg-purple-700'
-						]}
-					>
-						{connecting ? 'Connecting...' : 'Join as Producer'}
-					</button>
-				</div>
-			</div>
-
-			<!-- Create New Room -->
-			<div class="rounded border p-6">
-				<h3 class="mb-4 font-mono text-lg font-medium">Create New Room</h3>
-				<div class="space-y-4">
-					<p class="font-mono text-sm text-gray-600">Create a new room and connect as producer</p>
-					<div>
-						<label
-							for="newParticipantId"
-							class="mb-1 block font-mono text-sm font-medium text-gray-700"
-						>
-							Participant ID (optional)
-						</label>
-						<input
-							id="newParticipantId"
-							type="text"
-							bind:value={participantId}
-							placeholder="Auto-generated if empty"
-							class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-						/>
-					</div>
-					<button
-						onclick={createNewRoom}
-						disabled={connecting}
-						class={[
-							'w-full rounded border px-4 py-2 font-mono',
-							connecting
-								? 'bg-gray-200 text-gray-500'
-								: 'bg-green-600 text-white hover:bg-green-700'
-						]}
-					>
-						{connecting ? 'Creating...' : 'Create New Room'}
-					</button>
-				</div>
-			</div>
-		</div>
-
-		{#if error}
-			<div class="rounded border border-red-200 bg-red-50 p-4">
-				<p class="font-mono text-sm text-red-700">{error}</p>
-			</div>
-		{/if}
-	{:else}
-		<!-- Control Interface -->
-		<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-			<!-- Video Controls -->
-			<div class="space-y-6 lg:col-span-2">
-				<!-- Connection Info -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Session Info</h2>
-					<div class="grid grid-cols-3 gap-4 font-mono text-sm">
-						<div><span class="text-gray-500">Room:</span> {roomId}</div>
-						<div><span class="text-gray-500">ID:</span> {participantId}</div>
-						<div><span class="text-gray-500">Role:</span> Producer</div>
-					</div>
-				</div>
-
-				<!-- Stream Controls -->
-				<div class="rounded border p-6">
-					<div class="mb-4 flex items-center justify-between">
-						<h2 class="font-mono text-lg font-semibold">Stream Control</h2>
-						<div class="flex space-x-2">
-							<button
-								onclick={() => (streamType = 'camera')}
-								class={[
-									'rounded border px-3 py-1 font-mono text-sm',
-									streamType === 'camera' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100'
-								]}
-							>
-								📹 Camera
-							</button>
-							<button
-								onclick={() => (streamType = 'screen')}
-								class={[
-									'rounded border px-3 py-1 font-mono text-sm',
-									streamType === 'screen' ? 'bg-purple-100 text-purple-700' : 'bg-gray-100'
-								]}
-							>
-								🖥️ Screen
-							</button>
-						</div>
-					</div>
-
-					<!-- Local Video Preview -->
-					<div class="mb-4">
-						<div class="aspect-video rounded border bg-black">
-							<video
-								bind:this={localVideoElement}
-								autoplay
-								muted
-								playsinline
-								class="h-full w-full rounded object-contain"
-							>
-								<track kind="captions" />
-							</video>
-						</div>
-						<p class="mt-2 text-center font-mono text-sm text-gray-500">
-							Local {streamType} preview
-						</p>
-					</div>
-
-					<!-- Stream Actions -->
-					<div class="grid grid-cols-2 gap-3">
-						{#if !streaming}
-							<button
-								onclick={startStream}
-								class="rounded border bg-purple-600 px-4 py-2 font-mono text-white hover:bg-purple-700"
-							>
-								▶️ Start {streamType === 'camera' ? 'Camera' : 'Screen Share'}
-							</button>
-						{:else}
-							<button
-								onclick={stopStream}
-								class="rounded border bg-red-600 px-4 py-2 font-mono text-white hover:bg-red-700"
-							>
-								⏹️ Stop Stream
-							</button>
-						{/if}
-						<button
-							onclick={updateVideoConfig}
-							class="rounded border bg-blue-600 px-4 py-2 font-mono text-white hover:bg-blue-700"
-						>
-							⚙️ Update Config
-						</button>
-					</div>
-				</div>
-
-				<!-- Video Configuration -->
-				<div class="rounded border p-6">
-					<h2 class="mb-4 font-mono text-lg font-semibold">Video Configuration</h2>
-					<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-						<!-- Resolution -->
-						<div>
-							<label class="mb-2 block font-mono text-sm font-medium text-gray-700">
-								Resolution
-							</label>
-							<select
-								bind:value={videoConfig.resolution}
-								class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-							>
-								{#each resolutions as res}
-									<option value={res.value}>{res.label}</option>
-								{/each}
-							</select>
-						</div>
-
-						<!-- Framerate -->
-						<div>
-							<label class="mb-2 block font-mono text-sm font-medium text-gray-700">
-								Framerate (FPS)
-							</label>
-							<select
-								bind:value={videoConfig.framerate}
-								class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-							>
-								{#each framerates as fps}
-									<option value={fps}>{fps} FPS</option>
-								{/each}
-							</select>
-						</div>
-
-						<!-- Bitrate -->
-						<div>
-							<label class="mb-2 block font-mono text-sm font-medium text-gray-700">
-								Bitrate
-							</label>
-							<select
-								bind:value={videoConfig.bitrate}
-								class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-purple-500 focus:ring-purple-500"
-							>
-								{#each bitrates as br}
-									<option value={br.value}>{br.label}</option>
-								{/each}
-							</select>
-						</div>
-
-						<!-- Quality -->
-						<div>
-							<label class="mb-2 block font-mono text-sm font-medium text-gray-700">
-								Quality: {videoConfig.quality}%
-							</label>
-							<input
-								type="range"
-								min="10"
-								max="100"
-								step="10"
-								bind:value={videoConfig.quality}
-								class="w-full"
-							/>
-						</div>
-					</div>
-				</div>
-
-				<!-- Control Actions -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Actions</h2>
-					<div class="grid grid-cols-2 gap-3">
-						<button
-							onclick={sendHeartbeat}
-							class="rounded border bg-gray-600 px-4 py-2 font-mono text-white hover:bg-gray-700"
-						>
-							💓 Heartbeat
-						</button>
-						<button
-							onclick={sendEmergencyStop}
-							class="rounded border bg-red-600 px-4 py-2 font-mono text-white hover:bg-red-700"
-						>
-							🚨 E-Stop
-						</button>
-					</div>
-				</div>
-			</div>
-
-			<!-- Status & History -->
-			<div class="space-y-6">
-				<!-- Current Status -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Current Status</h2>
-					<div class="space-y-2 font-mono text-sm">
-						<div class="flex justify-between">
-							<span class="text-gray-600">Stream Type:</span>
-							<span class="font-bold capitalize">{streamType}</span>
-						</div>
-						<div class="flex justify-between">
-							<span class="text-gray-600">Resolution:</span>
-							<span class="font-bold"
-								>{videoConfig.resolution?.width}x{videoConfig.resolution?.height}</span
-							>
-						</div>
-						<div class="flex justify-between">
-							<span class="text-gray-600">Framerate:</span>
-							<span class="font-bold">{videoConfig.framerate} FPS</span>
-						</div>
-						<div class="flex justify-between">
-							<span class="text-gray-600">Bitrate:</span>
-							<span class="font-bold">{((videoConfig.bitrate || 0) / 1000000).toFixed(1)} Mbps</span
-							>
-						</div>
-						<div class="flex justify-between">
-							<span class="text-gray-600">Quality:</span>
-							<span class="font-bold">{videoConfig.quality}%</span>
-						</div>
-					</div>
-				</div>
-
-				<!-- Command History -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Recent Commands</h2>
-					<div class="max-h-64 space-y-2 overflow-y-auto">
-						{#each commandHistory as command}
-							<div class="rounded border-l-4 border-purple-200 bg-gray-50 p-2">
-								<div class="flex items-center justify-between">
-									<span class="font-mono text-xs text-gray-500">{command.timestamp}</span>
-									<span
-										class={[
-											'font-mono text-xs font-medium',
-											command.command === 'ERROR' || command.command === 'EMERGENCY_STOP'
-												? 'text-red-600'
-												: 'text-purple-600'
-										]}
-									>
-										{command.command}
-									</span>
-								</div>
-								{#if typeof command.data === 'string'}
-									<div class="mt-1 font-mono text-xs text-gray-600">
-										{command.data}
-									</div>
-								{:else if command.command === 'CONFIG_UPDATE'}
-									<div class="mt-1 font-mono text-xs text-gray-600">
-										{command.data.resolution?.width}x{command.data.resolution?.height} @ {command
-											.data.framerate}fps
-									</div>
-								{/if}
-							</div>
-						{:else}
-							<p class="py-4 text-center font-mono text-sm text-gray-500">No commands sent yet</p>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Session Control -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Session Control</h2>
-					<button
-						onclick={exitSession}
-						class="w-full rounded border bg-gray-100 px-4 py-2 font-mono hover:bg-gray-200"
-					>
-						🚪 Exit Session
-					</button>
-				</div>
-			</div>
-		</div>
-	{/if}
-</div>
-
-<script lang="ts">
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-	import { video } from 'lerobot-arena-client';
-	import type { video as videoTypes } from 'lerobot-arena-client';
-
-	// Get room ID from URL
-	let roomIdFromUrl = $derived($page.params.room_id);
-
-	// State
-	let consumer: video.VideoConsumer;
-	let connected = $state<boolean>(false);
-	let connecting = $state<boolean>(false);
-	let receiving = $state<boolean>(false);
-	let roomId = $state<string>(roomIdFromUrl || '');
-	let participantId = $state<string>('');
-	let error = $state<string>('');
-
-	// Video elements
-	let remoteVideoElement: HTMLVideoElement;
-
-	// Current video state
-	let currentConfig = $state<videoTypes.VideoConfig>({});
-	let lastUpdate = $state<Date | null>(null);
-	let currentStrategy = $state<videoTypes.CommunicationStrategy | null>(null);
-	let strategyInfo = $state<videoTypes.StrategyInfo | null>(null);
-
-	// Real-time monitoring
-	let frameCount = $state<number>(0);
-	let configUpdateCount = $state<number>(0);
-	let errorCount = $state<number>(0);
-	let strategyChangeCount = $state<number>(0);
-
-	// History tracking
-	let frameHistory = $state<
-		Array<{ timestamp: string; frame: videoTypes.FrameData; source?: string }>
-	>([]);
-	let configHistory = $state<Array<{ timestamp: string; config: videoTypes.VideoConfig }>>([]);
-	let streamHistory = $state<
-		Array<{ timestamp: string; event: string; participant?: string; reason?: string }>
-	>([]);
-	let errorHistory = $state<Array<{ timestamp: string; message: string }>>([]);
-	let strategyHistory = $state<
-		Array<{ timestamp: string; oldStrategy: string; newStrategy: string; reason: string }>
-	>([]);
-
-	// WebRTC Stats
-	let stats = $state<videoTypes.WebRTCStats | null>(null);
-
-	// Strategy management
-	let availableStrategies: videoTypes.CommunicationStrategy[] = ['p2p', 'server', 'hybrid'];
-	let selectedStrategy = $state<videoTypes.CommunicationStrategy>('p2p');
-
-	// Debug info
-	let debugInfo = $state<{
-		connectionAttempts: number;
-		messagesReceived: number;
-		lastMessageType: string;
-		wsConnected: boolean;
-		currentRoom: string;
-		webrtcState: string;
-		currentStrategy: string;
-	}>({
-		connectionAttempts: 0,
-		messagesReceived: 0,
-		lastMessageType: '',
-		wsConnected: false,
-		currentRoom: '',
-		webrtcState: 'disconnected',
-		currentStrategy: 'unknown'
-	});
-
-	async function connectConsumer() {
-		if (!roomId.trim() || !participantId.trim()) {
-			error = 'Please enter both Room ID and Participant ID';
-			return;
-		}
-
-		debugInfo.connectionAttempts++;
-
-		try {
-			connecting = true;
-			error = '';
-
-			consumer = new video.VideoConsumer('http://localhost:8000');
-
-			// Set up event handlers
-			consumer.onConnected(() => {
-				connected = true;
-				connecting = false;
-				debugInfo.wsConnected = true;
-				debugInfo.currentRoom = roomId;
-				currentStrategy = consumer.getCurrentStrategy();
-				debugInfo.currentStrategy = currentStrategy || 'unknown';
-				loadInitialState();
-			});
-
-			consumer.onDisconnected(() => {
-				connected = false;
-				receiving = false;
-				debugInfo.wsConnected = false;
-				currentStrategy = null;
-				debugInfo.currentStrategy = 'unknown';
-			});
-
-			consumer.onError((errorMsg) => {
-				error = errorMsg;
-				errorCount++;
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'ERROR';
-				errorHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						message: errorMsg
-					},
-					...errorHistory
-				].slice(0, 10); // Keep last 10 errors only
-			});
-
-			// Strategy change callback
-			consumer.onStrategyChanged((oldStrategy, newStrategy, reason) => {
-				strategyChangeCount++;
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'STRATEGY_CHANGED';
-				currentStrategy = newStrategy;
-				debugInfo.currentStrategy = newStrategy;
-
-				// Add to history
-				strategyHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						oldStrategy,
-						newStrategy,
-						reason
-					},
-					...strategyHistory
-				].slice(0, 10);
-
-				streamHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						event: 'STRATEGY_CHANGED',
-						reason: `${oldStrategy} → ${newStrategy}: ${reason}`
-					},
-					...streamHistory
-				].slice(0, 10);
-			});
-
-			// P2P status callback
-			consumer.onP2PStatus((participantId, status, details) => {
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'P2P_STATUS';
-
-				streamHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						event: 'P2P_STATUS',
-						participant: participantId,
-						reason: status
-					},
-					...streamHistory
-				].slice(0, 10);
-			});
-
-			// Frame update callback
-			consumer.onFrameUpdate((frame) => {
-				frameCount++;
-				lastUpdate = new Date();
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'FRAME_UPDATE';
-
-				// Add to history
-				frameHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						frame,
-						source: 'producer'
-					},
-					...frameHistory
-				].slice(0, 20); // Keep last 20 frames only
-			});
-
-			// Video config update callback
-			consumer.onVideoConfigUpdate((config) => {
-				configUpdateCount++;
-				lastUpdate = new Date();
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'CONFIG_UPDATE';
-
-				// Update current config
-				currentConfig = { ...config };
-
-				// Add to history
-				configHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						config
-					},
-					...configHistory
-				].slice(0, 10); // Keep last 10 config updates only
-			});
-
-			// Stream events
-			consumer.onStreamStarted((config, participantId, strategy) => {
-				receiving = true;
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'STREAM_STARTED';
-				currentStrategy = strategy;
-				debugInfo.currentStrategy = strategy;
-
-				streamHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						event: 'STREAM_STARTED',
-						participant: participantId,
-						reason: `Using ${strategy} strategy`
-					},
-					...streamHistory
-				].slice(0, 10);
-
-				// Start receiving
-				startReceiving();
-			});
-
-			consumer.onStreamStopped((participantId, reason) => {
-				receiving = false;
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'STREAM_STOPPED';
-
-				streamHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						event: 'STREAM_STOPPED',
-						participant: participantId,
-						reason
-					},
-					...streamHistory
-				].slice(0, 10);
-			});
-
-			consumer.onRecoveryTriggered((policy, reason) => {
-				debugInfo.messagesReceived++;
-				debugInfo.lastMessageType = 'RECOVERY_TRIGGERED';
-
-				streamHistory = [
-					{
-						timestamp: new Date().toLocaleTimeString(),
-						event: 'RECOVERY_TRIGGERED',
-						reason: `${policy}: ${reason}`
-					},
-					...streamHistory
-				].slice(0, 10);
-			});
-
-			// Set up remote stream handler
-			consumer.on('remoteStream', (stream: MediaStream | null) => {
-				console.info(
-					'🎬 Svelte: Received remoteStream event, stream:',
-					stream ? `available (id: ${stream.id})` : 'null'
-				);
-
-				if (remoteVideoElement) {
-					remoteVideoElement.srcObject = stream;
-				}
-				receiving = true;
-				startStatsMonitoring();
-			});
-
-			const success = await consumer.connect(roomId, participantId);
-			if (!success) {
-				error = 'Failed to connect. Room might not exist.';
-				connecting = false;
-			}
-		} catch (err) {
-			error = `Connection failed: ${err}`;
-			connecting = false;
-		}
-	}
-
-	async function startReceiving() {
-		if (!consumer || !connected) return;
-
-		try {
-			await consumer.startReceiving();
-
-			// Attach to video element
-			if (remoteVideoElement) {
-				consumer.attachToVideoElement(remoteVideoElement);
-			}
-		} catch (err) {
-			console.error('Failed to start receiving:', err);
-		}
-	}
-
-	async function loadInitialState() {
-		if (!consumer || !connected) return;
-
-		try {
-			const roomState = await consumer.getRoomState(roomId);
-			if (roomState.current_config) {
-				currentConfig = roomState.current_config;
-			}
-			if (roomState.active_strategy) {
-				currentStrategy = roomState.active_strategy;
-				debugInfo.currentStrategy = roomState.active_strategy;
-			}
-
-			// Get strategy info
-			try {
-				strategyInfo = await consumer.getStrategyInfo(roomId);
-			} catch (err) {
-				console.warn('Failed to get strategy info:', err);
-			}
-		} catch (err) {
-			console.error('Failed to load initial state:', err);
-		}
-	}
-
-	async function switchStrategy() {
-		if (!consumer || !connected || !selectedStrategy) return;
-
-		try {
-			await consumer.switchToStrategy(selectedStrategy, 'User requested via UI');
-		} catch (err) {
-			error = `Failed to switch strategy: ${err}`;
-			console.error('Failed to switch strategy:', err);
-		}
-	}
-
-	function startStatsMonitoring() {
-		const interval = setInterval(async () => {
-			if (!consumer || !receiving) {
-				clearInterval(interval);
-				return;
-			}
-
-			try {
-				stats = await consumer.getVideoStats();
-				const pc = consumer.getPeerConnection();
-				if (pc) {
-					debugInfo.webrtcState = pc.connectionState;
-				}
-			} catch (err) {
-				console.error('Failed to get video stats:', err);
-			}
-		}, 1000);
-	}
-
-	async function exitSession() {
-		if (consumer && connected) {
-			await consumer.disconnect();
-		}
-		connected = false;
-		receiving = false;
-		debugInfo.wsConnected = false;
-		debugInfo.currentRoom = '';
-	}
-
-	function clearHistory() {
-		frameHistory = [];
-		configHistory = [];
-		streamHistory = [];
-		errorHistory = [];
-		strategyHistory = [];
-		frameCount = 0;
-		configUpdateCount = 0;
-		errorCount = 0;
-		strategyChangeCount = 0;
-		debugInfo.messagesReceived = 0;
-	}
-
-	// Update roomId when URL parameter changes
-	$effect(() => {
-		if (roomIdFromUrl) {
-			roomId = roomIdFromUrl;
-		}
-	});
-
-	onMount(() => {
-		participantId = `consumer_${Date.now()}`;
-
-		return () => {
-			exitSession();
-		};
-	});
-</script>
-
-<svelte:head>
-	<title>Video Consumer - Room {roomId} - LeRobot Arena</title>
-</svelte:head>
-
-<div class="mx-auto max-w-6xl space-y-6">
-	<!-- Header -->
-	<div class="flex items-center justify-between">
-		<div>
-			<h1 class="font-mono text-2xl font-bold text-gray-900">📺 Video Consumer</h1>
-			<p class="mt-1 font-mono text-sm text-gray-600">
-				Room: <span class="font-bold text-indigo-600">{roomId}</span>
-			</p>
-		</div>
-		<div class="flex items-center space-x-4">
-			<div class="flex items-center space-x-2">
-				{#if connected}
-					<div class="h-3 w-3 rounded-full bg-green-500"></div>
-					<span class="font-mono text-sm font-medium text-green-700">Connected</span>
-				{:else if connecting}
-					<div class="h-3 w-3 animate-pulse rounded-full bg-yellow-500"></div>
-					<span class="font-mono text-sm font-medium text-yellow-700">Connecting...</span>
-				{:else}
-					<div class="h-3 w-3 rounded-full bg-red-500"></div>
-					<span class="font-mono text-sm font-medium text-red-700">Disconnected</span>
-				{/if}
-			</div>
-			{#if receiving}
-				<div class="flex items-center space-x-2">
-					<div class="h-3 w-3 animate-pulse rounded-full bg-indigo-500"></div>
-					<span class="font-mono text-sm font-medium text-indigo-700">Receiving</span>
-				</div>
-			{/if}
-			<a
-				href="/video"
-				class="rounded border bg-gray-100 px-3 py-2 font-mono text-sm hover:bg-gray-200"
-				>← Back to Video</a
-			>
-		</div>
-	</div>
-
-	<!-- Debug Info -->
-	<div class="rounded border bg-gray-900 p-4 font-mono text-sm text-green-400">
-		<div class="mb-2 font-bold">VIDEO CONSUMER DEBUG - ROOM {roomId}</div>
-		<div class="grid grid-cols-3 gap-4 md:grid-cols-6">
-			<div>Attempts: {debugInfo.connectionAttempts}</div>
-			<div>Messages: {debugInfo.messagesReceived}</div>
-			<div>Last: {debugInfo.lastMessageType || 'None'}</div>
-			<div>WS: {debugInfo.wsConnected ? 'ON' : 'OFF'}</div>
-			<div>Room: {debugInfo.currentRoom || 'None'}</div>
-			<div>WebRTC: {debugInfo.webrtcState}</div>
-		</div>
-		<div class="mt-2 grid grid-cols-4 gap-4">
-			<div>Frames: {frameCount}</div>
-			<div>Config Updates: {configUpdateCount}</div>
-			<div>Strategy Changes: {strategyChangeCount}</div>
-			<div>Errors: {errorCount}</div>
-		</div>
-		<div class="mt-2 grid grid-cols-1 gap-4">
-			<div>
-				Current Strategy:
-				{#if currentStrategy}
-					<span
-						class="inline-block rounded px-2 py-1 text-xs {currentStrategy === 'p2p'
-							? 'bg-blue-600 text-white'
-							: currentStrategy === 'server'
-								? 'bg-orange-600 text-white'
-								: currentStrategy === 'hybrid'
-									? 'bg-purple-600 text-white'
-									: 'bg-gray-600 text-white'}">{currentStrategy.toUpperCase()}</span
-					>
-				{:else}
-					<span class="text-gray-400">Unknown</span>
-				{/if}
-			</div>
-		</div>
-		{#if stats}
-			<div class="mt-2 grid grid-cols-3 gap-4 md:grid-cols-6">
-				<div>FPS: {stats.framesPerSecond.toFixed(1)}</div>
-				<div>Bitrate: {(stats.videoBitsPerSecond / 1000).toFixed(0)}k</div>
-				<div>Resolution: {stats.frameWidth}x{stats.frameHeight}</div>
-				<div>Packets Lost: {stats.packetsLost}</div>
-				<div>Total Packets: {stats.totalPackets}</div>
-				<div>
-					Loss Rate: {stats.totalPackets > 0
-						? ((stats.packetsLost / stats.totalPackets) * 100).toFixed(1)
-						: 0}%
-				</div>
-			</div>
-		{/if}
-		<div class="mt-2">Last Update: {lastUpdate ? lastUpdate.toLocaleTimeString() : 'Never'}</div>
-		{#if error}
-			<div class="mt-2 text-red-400">Error: {error}</div>
-		{/if}
-	</div>
-
-	{#if !connected}
-		<!-- Connection Section -->
-		<div class="rounded border p-6">
-			<h2 class="mb-4 font-mono text-lg font-semibold">Connect to Video Room {roomId}</h2>
-
-			<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
-				<div>
-					<label for="roomId" class="mb-1 block font-mono text-sm font-medium text-gray-700">
-						Room ID (from URL)
-					</label>
-					<input
-						id="roomId"
-						type="text"
-						bind:value={roomId}
-						readonly
-						class="w-full rounded border border-gray-300 bg-gray-50 px-3 py-2 font-mono text-gray-600"
-					/>
-				</div>
-				<div>
-					<label for="participantId" class="mb-1 block font-mono text-sm font-medium text-gray-700">
-						Participant ID
-					</label>
-					<input
-						id="participantId"
-						type="text"
-						bind:value={participantId}
-						placeholder="Your participant ID"
-						class="w-full rounded border border-gray-300 px-3 py-2 font-mono focus:border-indigo-500 focus:ring-indigo-500"
-					/>
-				</div>
-			</div>
-
-			<div class="mt-4">
-				<button
-					onclick={connectConsumer}
-					disabled={connecting || !roomId.trim() || !participantId.trim()}
-					class={[
-						'rounded border px-4 py-2 font-mono',
-						connecting || !roomId.trim() || !participantId.trim()
-							? 'bg-gray-200 text-gray-500'
-							: 'bg-indigo-600 text-white hover:bg-indigo-700'
-					]}
-				>
-					{connecting ? 'Connecting...' : 'Join as Viewer'}
-				</button>
-			</div>
-
-			{#if error}
-				<div class="mt-4 rounded border border-red-200 bg-red-50 p-4">
-					<p class="font-mono text-sm text-red-700">{error}</p>
-				</div>
-			{/if}
-		</div>
-	{:else}
-		<!-- Monitoring Interface -->
-		<div class="space-y-6">
-			<!-- Status Overview -->
-			<div class="grid grid-cols-2 gap-4 md:grid-cols-4">
-				<div class="rounded border p-4 text-center">
-					<div class="font-mono text-2xl font-bold text-indigo-600">{frameCount}</div>
-					<div class="font-mono text-sm text-gray-500">Frames Received</div>
-				</div>
-				<div class="rounded border p-4 text-center">
-					<div class="font-mono text-2xl font-bold text-purple-600">{configUpdateCount}</div>
-					<div class="font-mono text-sm text-gray-500">Config Updates</div>
-				</div>
-				<div class="rounded border p-4 text-center">
-					<div class="font-mono text-2xl font-bold text-blue-600">{strategyChangeCount}</div>
-					<div class="font-mono text-sm text-gray-500">Strategy Changes</div>
-				</div>
-				<div class="rounded border p-4 text-center">
-					<div class="font-mono text-2xl font-bold text-red-600">{errorCount}</div>
-					<div class="font-mono text-sm text-gray-500">Errors</div>
-				</div>
-			</div>
-
-			<!-- Video Display & Controls -->
-			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-				<!-- Video Stream -->
-				<div class="rounded border p-4 lg:col-span-2">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Live Video Stream</h2>
-
-					<div class="relative aspect-video rounded border bg-black">
-						<video
-							bind:this={remoteVideoElement}
-							autoplay
-							playsinline
-							controls
-							class="h-full w-full rounded object-contain"
-						>
-							<track kind="captions" />
-						</video>
-
-						{#if !receiving}
-							<div class="absolute inset-0 flex items-center justify-center">
-								<div class="text-center text-white">
-									<div class="mb-2 text-4xl">📺</div>
-									<p class="font-mono">Waiting for video stream...</p>
-									<p class="font-mono text-sm">Producer needs to start streaming</p>
-								</div>
-							</div>
-						{/if}
-					</div>
-
-					<!-- Current Video Config -->
-					{#if Object.keys(currentConfig).length > 0}
-						<div class="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
-							<div class="text-center">
-								<div class="font-mono text-sm text-gray-500">Resolution</div>
-								<div class="font-mono text-lg font-bold">
-									{currentConfig.resolution?.width || '?'}x{currentConfig.resolution?.height || '?'}
-								</div>
-							</div>
-							<div class="text-center">
-								<div class="font-mono text-sm text-gray-500">Framerate</div>
-								<div class="font-mono text-lg font-bold">{currentConfig.framerate || '?'} FPS</div>
-							</div>
-							<div class="text-center">
-								<div class="font-mono text-sm text-gray-500">Bitrate</div>
-								<div class="font-mono text-lg font-bold">
-									{currentConfig.bitrate
-										? (currentConfig.bitrate / 1000000).toFixed(1) + ' Mbps'
-										: '?'}
-								</div>
-							</div>
-							<div class="text-center">
-								<div class="font-mono text-sm text-gray-500">Encoding</div>
-								<div class="font-mono text-lg font-bold uppercase">
-									{currentConfig.encoding || '?'}
-								</div>
-							</div>
-						</div>
-					{/if}
-				</div>
-
-				<!-- Session Info & Controls -->
-				<div class="space-y-6">
-					<!-- Session Info -->
-					<div class="rounded border p-4">
-						<h2 class="mb-3 font-mono text-lg font-semibold">Session Info</h2>
-						<div class="grid grid-cols-1 gap-2 font-mono text-sm">
-							<div><span class="text-gray-500">Room:</span> {roomId}</div>
-							<div><span class="text-gray-500">ID:</span> {participantId}</div>
-							<div><span class="text-gray-500">Role:</span> Consumer</div>
-							<div><span class="text-gray-500">Receiving:</span> {receiving ? 'Yes' : 'No'}</div>
-							<div>
-								<span class="text-gray-500">Strategy:</span>
-								{#if currentStrategy}
-									<span
-										class="inline-block rounded px-2 py-1 text-xs {currentStrategy === 'p2p'
-											? 'bg-blue-600 text-white'
-											: currentStrategy === 'server'
-												? 'bg-orange-600 text-white'
-												: currentStrategy === 'hybrid'
-													? 'bg-purple-600 text-white'
-													: 'bg-gray-600 text-white'}">{currentStrategy.toUpperCase()}</span
-									>
-								{:else}
-									<span class="text-gray-500">Unknown</span>
-								{/if}
-							</div>
-							<div>
-								<span class="text-gray-500">Last Update:</span>
-								{lastUpdate ? lastUpdate.toLocaleTimeString() : 'Never'}
-							</div>
-						</div>
-						<div class="mt-4 flex space-x-3">
-							<button
-								onclick={clearHistory}
-								class="rounded border bg-gray-100 px-3 py-2 font-mono text-sm hover:bg-gray-200"
-							>
-								Clear History
-							</button>
-							<button
-								onclick={exitSession}
-								class="rounded border bg-gray-100 px-3 py-2 font-mono text-sm hover:bg-gray-200"
-							>
-								🚪 Exit Session
-							</button>
-						</div>
-					</div>
-
-					<!-- Strategy Management -->
-					<div class="rounded border p-4">
-						<h2 class="mb-3 font-mono text-lg font-semibold">Strategy Management</h2>
-						<div class="space-y-4">
-							<div>
-								<label
-									for="strategySelect"
-									class="mb-1 block font-mono text-sm font-medium text-gray-700"
-								>
-									Switch Strategy
-								</label>
-								<div class="flex gap-2">
-									<select
-										id="strategySelect"
-										bind:value={selectedStrategy}
-										class="flex-1 rounded border border-gray-300 px-3 py-2 font-mono text-sm focus:border-indigo-500 focus:ring-indigo-500"
-									>
-										{#each availableStrategies as strategy}
-											<option value={strategy}>{strategy.toUpperCase()}</option>
-										{/each}
-									</select>
-									<button
-										onclick={switchStrategy}
-										disabled={!connected || selectedStrategy === currentStrategy}
-										class={[
-											'rounded border px-3 py-2 font-mono text-sm',
-											!connected || selectedStrategy === currentStrategy
-												? 'bg-gray-200 text-gray-500'
-												: 'bg-indigo-600 text-white hover:bg-indigo-700'
-										]}
-									>
-										Switch
-									</button>
-								</div>
-							</div>
-							{#if strategyHistory.length > 0}
-								<div>
-									<h3 class="mb-2 font-mono text-sm font-medium text-gray-700">Strategy History</h3>
-									<div class="max-h-32 space-y-1 overflow-y-auto">
-										{#each strategyHistory.slice(0, 5) as change}
-											<div class="rounded bg-gray-50 p-2 text-xs">
-												<div class="flex items-center justify-between">
-													<span class="font-mono text-gray-500">{change.timestamp}</span>
-													<span class="font-mono text-indigo-600">
-														{change.oldStrategy.toUpperCase()} → {change.newStrategy.toUpperCase()}
-													</span>
-												</div>
-												<div class="mt-1 font-mono text-gray-600">{change.reason}</div>
-											</div>
-										{/each}
-									</div>
-								</div>
-							{/if}
-						</div>
-					</div>
-
-					<!-- Stream Events -->
-					<div class="rounded border p-4">
-						<h2 class="mb-3 font-mono text-lg font-semibold">Stream Events</h2>
-						<div class="max-h-48 space-y-2 overflow-y-auto">
-							{#each streamHistory as event}
-								<div class="rounded border-l-4 border-indigo-200 bg-gray-50 p-2">
-									<div class="flex items-center justify-between">
-										<span class="font-mono text-xs text-gray-500">{event.timestamp}</span>
-										<span class="font-mono text-xs text-indigo-600">{event.event}</span>
-									</div>
-									{#if event.participant}
-										<div class="mt-1 font-mono text-xs text-gray-600">
-											Participant: {event.participant}
-										</div>
-									{/if}
-									{#if event.reason}
-										<div class="mt-1 font-mono text-xs text-gray-600">
-											{event.reason}
-										</div>
-									{/if}
-								</div>
-							{:else}
-								<p class="py-4 text-center font-mono text-sm text-gray-500">No stream events yet</p>
-							{/each}
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Real-time Updates -->
-			<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-				<!-- Frame Updates History -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Recent Frames</h2>
-					<div class="max-h-64 space-y-2 overflow-y-auto">
-						{#each frameHistory.slice(0, 10) as frame}
-							<div class="rounded border-l-4 border-purple-200 bg-gray-50 p-2">
-								<div class="flex items-center justify-between">
-									<span class="font-mono text-xs text-gray-500">{frame.timestamp}</span>
-									<span class="font-mono text-xs text-purple-600">FRAME_UPDATE</span>
-								</div>
-								<div class="mt-1 text-sm">
-									<span class="mr-3 inline-block font-mono text-gray-700">
-										{frame.frame.width}x{frame.frame.height}
-									</span>
-									<span class="mr-3 inline-block font-mono text-gray-700">
-										{frame.frame.encoding.toUpperCase()}
-									</span>
-									<span class="inline-block font-mono text-gray-700">
-										{(frame.frame.data.byteLength / 1024).toFixed(1)}KB
-									</span>
-								</div>
-							</div>
-						{:else}
-							<p class="py-4 text-center font-mono text-sm text-gray-500">No frames received yet</p>
-						{/each}
-					</div>
-				</div>
-
-				<!-- Config Updates History -->
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Config Updates</h2>
-					<div class="max-h-64 space-y-2 overflow-y-auto">
-						{#each configHistory as config}
-							<div class="rounded border-l-4 border-blue-200 bg-gray-50 p-2">
-								<div class="flex items-center justify-between">
-									<span class="font-mono text-xs text-gray-500">{config.timestamp}</span>
-									<span class="font-mono text-xs text-blue-600">CONFIG_UPDATE</span>
-								</div>
-								<div class="mt-1 text-sm">
-									<div class="font-mono text-gray-700">
-										{config.config.resolution?.width}x{config.config.resolution?.height} @
-										{config.config.framerate}fps
-									</div>
-									<div class="font-mono text-gray-700">
-										{((config.config.bitrate || 0) / 1000000).toFixed(1)}Mbps,
-										{config.config.encoding?.toUpperCase()}
-									</div>
-								</div>
-							</div>
-						{:else}
-							<p class="py-4 text-center font-mono text-sm text-gray-500">
-								No config updates received yet
-							</p>
-						{/each}
-					</div>
-				</div>
-			</div>
-
-			<!-- Error History -->
-			{#if errorHistory.length > 0}
-				<div class="rounded border p-4">
-					<h2 class="mb-3 font-mono text-lg font-semibold">Recent Errors</h2>
-					<div class="max-h-32 space-y-2 overflow-y-auto">
-						{#each errorHistory as error}
-							<div class="rounded border-l-4 border-red-200 bg-red-50 p-2">
-								<div class="flex items-center justify-between">
-									<span class="font-mono text-xs text-gray-500">{error.timestamp}</span>
-									<span class="font-mono text-xs text-red-600">ERROR</span>
-								</div>
-								<div class="mt-1 font-mono text-sm text-red-700">
-									{error.message}
-								</div>
-							</div>
-						{/each}
-					</div>
-				</div>
-			{/if}
-		</div>
-	{/if}
-</div>

test-docker.sh

@@ -95,7 +95,7 @@ fi
 # Test frontend
 echo "Testing frontend..."
 FRONTEND_RESPONSE=$(curl -s http://localhost:$PORT/)
-if echo "$FRONTEND_RESPONSE" | grep -q "LeRobot Arena"; then
+if echo "$FRONTEND_RESPONSE" | grep -q "<!doctype html>" && echo "$FRONTEND_RESPONSE" | grep -q "_app/immutable"; then
     echo -e "${GREEN}✅ Frontend is served correctly${NC}"
 else
     echo -e "${RED}❌ Frontend test failed${NC}"