Update Docker configuration and add frontend build process

- Changed the exposed port for the nova-sim service from 3004 to 5001 in both docker-compose files to avoid conflicts.
- Added a multi-stage build process in the Dockerfile to compile frontend assets using Node.js and Vite, improving deployment efficiency.
- Introduced a Makefile for simplified development commands, including `make dev` for starting backend and frontend servers with hot reload.
- Updated .gitignore to exclude frontend build artifacts and development logs, ensuring a cleaner repository.
- Enhanced README.md to reflect new setup instructions and project structure, emphasizing the use of the Makefile for development.

.gitignore

@@ -47,3 +47,13 @@ Thumbs.db
 *.mjb
 .env.local
 .env.off.local
+
+# Frontend
+frontend/node_modules/
+frontend/dist/
+frontend/src/*.js.tmp
+mujoco_server.py.backup
+
+# Makefile development artifacts
+.pid-*
+.dev-*.log

Dockerfile

@@ -1,3 +1,21 @@
+# Stage 1: Build frontend assets
+FROM node:20-slim AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy frontend package files
+COPY frontend/package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy frontend source
+COPY frontend/ ./
+
+# Build frontend
+RUN npm run build
+
+# Stage 2: Python runtime
 FROM python:3.11-slim-bookworm
 
 # Install system dependencies for MuJoCo and OpenCV
@@ -24,9 +42,12 @@ COPY requirements.txt .
 # Install Python dependencies
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copy application code (includes all assets)
+# Copy application code
 COPY . .
 
+# Copy built frontend assets from builder stage
+COPY --from=frontend-builder /app/frontend/dist ./frontend/dist
+
 # Environment variables for headless rendering
 # Options: osmesa (software, slow), egl (GPU if available), glx (X11 GPU)
 ENV MUJOCO_GL=osmesa
@@ -37,7 +58,7 @@ ENV OMP_NUM_THREADS=4
 ENV MKL_NUM_THREADS=4
 
 # Expose port
-EXPOSE 3004
+EXPOSE 5001
 
 # Run the server
 CMD ["python", "mujoco_server.py"]

Makefile

@@ -0,0 +1,143 @@
+.PHONY: dev build clean kill install help test docker docker-gpu docker-down docker-logs
+
+# Default target: run in development mode
+dev: kill
+	@echo "Starting Nova Sim in development mode..."
+	@echo "Backend: http://localhost:5001"
+	@echo "Frontend Dev Server: http://localhost:3004"
+	@echo ""
+	@echo "Access the application at: http://localhost:3004/nova-sim"
+	@echo "Press Ctrl+C to stop all servers"
+	@echo ""
+	@# Start Flask backend
+	@.venv/bin/python mujoco_server.py > .dev-backend.log 2>&1 & echo $$! > .pid-backend
+	@sleep 2
+	@# Start Vite dev server
+	@cd frontend && npm run dev > ../.dev-frontend.log 2>&1 & echo $$! > ../.pid-frontend
+	@sleep 2
+	@# Monitor both log files and kill processes on exit
+	@trap 'make kill' INT TERM; \
+	tail -f .dev-backend.log -f .dev-frontend.log & \
+	TAIL_PID=$$!; \
+	wait $$TAIL_PID
+
+# Build production assets
+build:
+	@echo "Building frontend for production..."
+	@cd frontend && npm run build
+	@echo ""
+	@echo "✓ Production build complete!"
+	@echo "  Output: frontend/dist/"
+	@echo ""
+	@echo "Start production server with: make prod"
+
+# Run production server
+prod: build
+	@echo "Starting Nova Sim production server..."
+	@echo "Access at: http://localhost:5001/nova-sim"
+	@echo ""
+	@.venv/bin/python mujoco_server.py
+
+# Install dependencies
+install:
+	@echo "Installing Python dependencies..."
+	@pip install -r requirements.txt
+	@echo ""
+	@echo "Installing frontend dependencies..."
+	@cd frontend && npm install
+	@echo ""
+	@echo "✓ All dependencies installed!"
+
+# Clean build artifacts and logs
+clean:
+	@echo "Cleaning build artifacts..."
+	@rm -rf frontend/dist
+	@rm -rf frontend/node_modules/.vite
+	@rm -f .dev-*.log
+	@rm -f .pid-*
+	@echo "✓ Clean complete!"
+
+# Kill running dev servers
+kill:
+	@if [ -f .pid-backend ]; then \
+		kill $$(cat .pid-backend) 2>/dev/null || true; \
+		rm -f .pid-backend; \
+	fi
+	@if [ -f .pid-frontend ]; then \
+		kill $$(cat .pid-frontend) 2>/dev/null || true; \
+		rm -f .pid-frontend; \
+	fi
+	@# Also kill any orphaned processes
+	@pkill -f "mujoco_server.py" 2>/dev/null || true
+	@pkill -f "vite" 2>/dev/null || true
+	@rm -f .dev-*.log
+	@echo "✓ All servers stopped"
+
+# Run tests
+test:
+	@echo "Running tests with pytest..."
+	@pytest -v
+
+# Docker commands
+docker:
+	@echo "Building and starting Nova Sim in Docker (CPU mode)..."
+	@docker-compose up --build -d
+	@echo ""
+	@echo "✓ Docker container started!"
+	@echo "  Access at: http://localhost:3004/nova-sim"
+	@echo ""
+	@echo "View logs: make docker-logs"
+	@echo "Stop container: make docker-down"
+
+docker-gpu:
+	@echo "Building and starting Nova Sim in Docker (GPU mode)..."
+	@docker-compose -f docker-compose.gpu.yml up --build -d
+	@echo ""
+	@echo "✓ Docker container started with GPU acceleration!"
+	@echo "  Access at: http://localhost:3004/nova-sim"
+	@echo ""
+	@echo "View logs: make docker-logs"
+	@echo "Stop container: make docker-down"
+
+docker-down:
+	@echo "Stopping Docker containers..."
+	@docker-compose down 2>/dev/null || true
+	@docker-compose -f docker-compose.gpu.yml down 2>/dev/null || true
+	@echo "✓ Docker containers stopped"
+
+docker-logs:
+	@docker-compose logs -f
+
+# Show help
+help:
+	@echo "Nova Sim Makefile Commands:"
+	@echo ""
+	@echo "Development:"
+	@echo "  make dev          - Start development servers (backend + frontend with hot reload)"
+	@echo "  make build        - Build frontend for production"
+	@echo "  make prod         - Build and run production server"
+	@echo "  make install      - Install all dependencies (Python + Node.js)"
+	@echo "  make clean        - Clean build artifacts and logs"
+	@echo "  make kill         - Stop all running development servers"
+	@echo "  make test         - Run tests with pytest"
+	@echo ""
+	@echo "Docker:"
+	@echo "  make docker       - Build and run in Docker (CPU/OSMesa rendering)"
+	@echo "  make docker-gpu   - Build and run in Docker (GPU/EGL rendering)"
+	@echo "  make docker-down  - Stop and remove Docker containers"
+	@echo "  make docker-logs  - View Docker container logs"
+	@echo ""
+	@echo "Other:"
+	@echo "  make help         - Show this help message"
+	@echo ""
+	@echo "Development workflow:"
+	@echo "  1. make install  (first time only)"
+	@echo "  2. make dev      (daily development)"
+	@echo ""
+	@echo "Production workflow:"
+	@echo "  1. make build    (build assets)"
+	@echo "  2. make prod     (run server)"
+	@echo ""
+	@echo "Docker workflow:"
+	@echo "  1. make docker   (CPU mode, works everywhere)"
+	@echo "  OR make docker-gpu (GPU mode, requires NVIDIA GPU)"

README.md

@@ -26,8 +26,9 @@ Nova Sim combines MuJoCo physics, a Flask/WebSocket server, and a browser UI so
 ## Highlights
 
 - Real-time MuJoCo physics simulation
-- Web-based video streaming interface
+- Web-based video streaming interface with TypeScript frontend
 - WebSocket-based state/command communication
+- **One-command setup**: `make dev` starts both backend and frontend with hot reload
 - Gym-style WebSocket API for RL/IL clients
 - Interactive camera controls (rotate, zoom, pan)
 - Robot switching without restart
@@ -67,6 +68,20 @@ nova_sim/
 ├── docker-compose.yml        # CPU/OSMesa configuration
 ├── docker-compose.gpu.yml    # GPU/EGL configuration
 ├── requirements.txt          # Python dependencies
+├── frontend/                 # Web UI (TypeScript + Vite)
+│   ├── src/
+│   │   ├── index.html        # HTML template
+│   │   ├── main.ts           # Main TypeScript entry point
+│   │   ├── styles.css        # CSS styles
+│   │   ├── api/
+│   │   │   └── client.ts     # WebSocket client
+│   │   └── types/
+│   │       └── protocol.ts   # TypeScript protocol types
+│   ├── package.json          # Node.js dependencies
+│   ├── tsconfig.json         # TypeScript configuration
+│   └── vite.config.ts        # Vite bundler configuration
+├── templates/                # Flask templates
+│   └── index.html            # Main HTML template
 ├── robots/
 │   ├── g1/                   # Unitree G1 humanoid
 │   │   ├── g1_env.py         # Gymnasium environment
@@ -98,40 +113,90 @@ nova_sim/
 
 ## Quick Start
 
-### Native (Recommended for Development)
+### Using Makefile (Recommended)
+
+The easiest way to get started is using the included Makefile:
+
+```bash
+# First time setup: install all dependencies
+make install
+
+# Start development servers (backend + frontend with hot reload)
+make dev
+# Backend: http://localhost:5000
+# Frontend dev server: http://localhost:3004
+# Access the application at: http://localhost:3004/nova-sim
+
+# Press Ctrl+C to stop all servers
+```
+
+**Production build:**
+```bash
+make build  # Build frontend assets
+make prod   # Run production server
+```
+
+**Other commands:**
+```bash
+make help   # Show all available commands
+make clean  # Clean build artifacts
+make kill   # Stop all running servers
+```
+
+### Manual Setup (Alternative)
+
+If you prefer not to use the Makefile:
 
 ```bash
 # Create and activate a virtualenv
 python3 -m venv .venv
 source .venv/bin/activate
 
-# Install dependencies
+# Install Python dependencies
 pip install mujoco gymnasium flask flask-sock opencv-python torch numpy
 
-# Start the server (default reward threshold: -0.1)
-python mujoco_server.py
+# Install frontend dependencies
+cd frontend && npm install && cd ..
+
+# Build frontend
+cd frontend && npm run build && cd ..
 
-# Or with custom reward threshold for auto episode termination
-python mujoco_server.py --reward-threshold -0.05  # Stricter (5cm from target)
-python mujoco_server.py --reward-threshold -0.2   # Lenient (20cm from target)
+# Start the server
+python mujoco_server.py
 
-# Open browser at http://localhost:3004/nova-sim/api/v1
+# Open browser at http://localhost:5000/nova-sim
 ```
 
 **Reward Threshold**: Episodes automatically terminate when the robot reaches within the specified distance of the target. See [REWARD_THRESHOLD.md](REWARD_THRESHOLD.md) for details.
 
-```
-
 ## Docker Deployment
 
-### Getting Started
+### Quick Start with Makefile
+
+```bash
+# Build and run in Docker (CPU mode)
+make docker
+
+# Or with GPU acceleration (requires NVIDIA GPU)
+make docker-gpu
+
+# View logs
+make docker-logs
+
+# Stop containers
+make docker-down
+```
+
+### Manual Docker Commands
 
 ```bash
 # Build and run (CPU/software rendering)
 docker-compose up --build
 
 # Or with docker run
-docker run -p 3004:3004 nova-sim
+docker run -p 3004:5000 nova-sim
+
+# Access at: http://localhost:3004/nova-sim
 ```
 
 ### Configuration & Tuning
@@ -156,7 +221,7 @@ services:
   nova-sim:
     build: .
     ports:
-      - "3004:3004"
+      - "3004:5000"  # Host:Container
     environment:
       - MUJOCO_GL=osmesa
       - PYOPENGL_PLATFORM=osmesa
@@ -172,6 +237,7 @@ For significantly better performance, use GPU acceleration:
 ```bash
 # Requires: NVIDIA GPU + nvidia-container-toolkit
 docker-compose -f docker-compose.gpu.yml up
+# Or: make docker-gpu
 ```
 
 ```yaml
@@ -179,7 +245,7 @@ services:
   nova-sim:
     build: .
     ports:
-      - "3004:3004"
+      - "3004:5000"  # Host:Container
     environment:
       - MUJOCO_GL=egl         # GPU rendering
       - PYOPENGL_PLATFORM=egl
@@ -208,14 +274,14 @@ services:
 
 ```bash
 # Ultra-low resolution for maximum speed
-docker run -p 3004:3004 \
+docker run -p 3004:5000 \
   -e RENDER_WIDTH=320 \
   -e RENDER_HEIGHT=180 \
   -e MUJOCO_GL=osmesa \
   nova-sim
 
 # High quality with GPU
-docker run --gpus all -p 3004:3004 \
+docker run --gpus all -p 3004:5000 \
   -e RENDER_WIDTH=1920 \
   -e RENDER_HEIGHT=1080 \
   -e MUJOCO_GL=egl \
@@ -880,6 +946,68 @@ The Nova API integration is implemented in:
 
 The tests assume the server is accessible via `http://localhost:3004/nova-sim/api/v1` and will skip automatically if the API is unreachable.
 
+## Frontend Development
+
+The Nova Sim web UI is built with TypeScript, Vite, and vanilla JavaScript (no framework dependencies).
+
+### Development Setup
+
+1. **Install Node.js dependencies:**
+   ```bash
+   cd frontend
+   npm install
+   ```
+
+2. **Start development server with hot reload:**
+   ```bash
+   # Terminal 1: Start Flask backend
+   python mujoco_server.py
+
+   # Terminal 2: Start Vite dev server
+   cd frontend
+   npm run dev
+   ```
+
+3. **Access the development UI:**
+   - Open [http://localhost:3004/nova-sim](http://localhost:3004/nova-sim)
+   - All API/WebSocket calls are automatically proxied to Flask at `:5000`
+   - Changes to TypeScript/CSS auto-reload in the browser
+
+### Production Build
+
+```bash
+cd frontend
+npm run build
+```
+
+This compiles TypeScript and bundles all assets to `frontend/dist/`. The Flask server automatically serves these built files from the `/static` route.
+
+### Frontend Structure
+
+- **`src/main.ts`**: Main application entry point with WebSocket handling and UI logic
+- **`src/api/client.ts`**: Type-safe WebSocket client for server communication
+- **`src/types/protocol.ts`**: TypeScript definitions mirroring Python protocol types
+- **`src/styles.css`**: All CSS styles (Wandelbots design system)
+- **`src/index.html`**: HTML template with viewport structure
+
+### Type Safety
+
+The frontend uses TypeScript for compile-time type checking:
+
+```bash
+# Run type checker
+cd frontend
+npm run type-check
+```
+
+All WebSocket messages are strongly typed to match the Python protocol definitions in `protocol_types.py`.
+
+### Modifying the UI
+
+- **Styles**: Edit `frontend/src/styles.css`
+- **Behavior**: Edit `frontend/src/main.ts`
+- **Protocol**: Update both `protocol_types.py` (Python) and `frontend/src/types/protocol.ts` (TypeScript)
+
 ## License
 
 This project uses models from:

docker-compose.gpu.yml

@@ -7,7 +7,7 @@ services:
   nova-sim:
     build: .
     ports:
-      - "3004:3004"
+      - "3004:5001"
     environment:
       # Use EGL for GPU rendering (much faster than OSMesa)
       - MUJOCO_GL=egl

docker-compose.yml

@@ -4,7 +4,7 @@ services:
   nova-sim:
     build: .
     ports:
-      - "3004:3004"
+      - "3004:5001"
     environment:
       # Rendering backend (osmesa = software, slow but compatible)
       - MUJOCO_GL=osmesa

frontend/package-lock.json

@@ -0,0 +1,1002 @@
+{
+  "name": "nova-sim-frontend",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "nova-sim-frontend",
+      "version": "1.0.0",
+      "devDependencies": {
+        "typescript": "^5.3.3",
+        "vite": "^5.0.11"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.3.tgz",
+      "integrity": "sha512-qyX8+93kK/7R5BEXPC2PjUt0+fS/VO2BVHjEHyIEWiYn88rcRBHmdLgoJjktBltgAf+NY7RfCGB1SoyKS/p9kg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.3.tgz",
+      "integrity": "sha512-6sHrL42bjt5dHQzJ12Q4vMKfN+kUnZ0atHHnv4V0Wd9JMTk7FDzSY35+7qbz3ypQYMBPANbpGK7JpnWNnhGt8g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.3.tgz",
+      "integrity": "sha512-1ht2SpGIjEl2igJ9AbNpPIKzb1B5goXOcmtD0RFxnwNuMxqkR6AUaaErZz+4o+FKmzxcSNBOLrzsICZVNYa1Rw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.3.tgz",
+      "integrity": "sha512-FYZ4iVunXxtT+CZqQoPVwPhH7549e/Gy7PIRRtq4t5f/vt54pX6eG9ebttRH6QSH7r/zxAFA4EZGlQ0h0FvXiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.3.tgz",
+      "integrity": "sha512-M/mwDCJ4wLsIgyxv2Lj7Len+UMHd4zAXu4GQ2UaCdksStglWhP61U3uowkaYBQBhVoNpwx5Hputo8eSqM7K82Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.3.tgz",
+      "integrity": "sha512-5jZT2c7jBCrMegKYTYTpni8mg8y3uY8gzeq2ndFOANwNuC/xJbVAoGKR9LhMDA0H3nIhvaqUoBEuJoICBudFrA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.3.tgz",
+      "integrity": "sha512-YeGUhkN1oA+iSPzzhEjVPS29YbViOr8s4lSsFaZKLHswgqP911xx25fPOyE9+khmN6W4VeM0aevbDp4kkEoHiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.3.tgz",
+      "integrity": "sha512-eo0iOIOvcAlWB3Z3eh8pVM8hZ0oVkK3AjEM9nSrkSug2l15qHzF3TOwT0747omI6+CJJvl7drwZepT+re6Fy/w==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.3.tgz",
+      "integrity": "sha512-DJay3ep76bKUDImmn//W5SvpjRN5LmK/ntWyeJs/dcnwiiHESd3N4uteK9FDLf0S0W8E6Y0sVRXpOCoQclQqNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.3.tgz",
+      "integrity": "sha512-BKKWQkY2WgJ5MC/ayvIJTHjy0JUGb5efaHCUiG/39sSUvAYRBaO3+/EK0AZT1RF3pSj86O24GLLik9mAYu0IJg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.3.tgz",
+      "integrity": "sha512-Q9nVlWtKAG7ISW80OiZGxTr6rYtyDSkauHUtvkQI6TNOJjFvpj4gcH+KaJihqYInnAzEEUetPQubRwHef4exVg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.3.tgz",
+      "integrity": "sha512-2H5LmhzrpC4fFRNwknzmmTvvyJPHwESoJgyReXeFoYYuIDfBhP29TEXOkCJE/KxHi27mj7wDUClNq78ue3QEBQ==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.3.tgz",
+      "integrity": "sha512-9S542V0ie9LCTznPYlvaeySwBeIEa7rDBgLHKZ5S9DBgcqdJYburabm8TqiqG6mrdTzfV5uttQRHcbKff9lWtA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.3.tgz",
+      "integrity": "sha512-ukxw+YH3XXpcezLgbJeasgxyTbdpnNAkrIlFGDl7t+pgCxZ89/6n1a+MxlY7CegU+nDgrgdqDelPRNQ/47zs0g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.3.tgz",
+      "integrity": "sha512-Iauw9UsTTvlF++FhghFJjqYxyXdggXsOqGpFBylaRopVpcbfyIIsNvkf9oGwfgIcf57z3m8+/oSYTo6HutBFNw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.3.tgz",
+      "integrity": "sha512-3OqKAHSEQXKdq9mQ4eajqUgNIK27VZPW3I26EP8miIzuKzCJ3aW3oEn2pzF+4/Hj/Moc0YDsOtBgT5bZ56/vcA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.3.tgz",
+      "integrity": "sha512-0CM8dSVzVIaqMcXIFej8zZrSFLnGrAE8qlNbbHfTw1EEPnFTg1U1ekI0JdzjPyzSfUsHWtodilQQG/RA55berA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.3.tgz",
+      "integrity": "sha512-+fgJE12FZMIgBaKIAGd45rxf+5ftcycANJRWk8Vz0NnMTM5rADPGuRFTYar+Mqs560xuART7XsX2lSACa1iOmQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.3.tgz",
+      "integrity": "sha512-tMD7NnbAolWPzQlJQJjVFh/fNH3K/KnA7K8gv2dJWCwwnaK6DFCYST1QXYWfu5V0cDwarWC8Sf/cfMHniNq21A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.3.tgz",
+      "integrity": "sha512-u5KsqxOxjEeIbn7bUK1MPM34jrnPwjeqgyin4/N6e/KzXKfpE9Mi0nCxcQjaM9lLmPcHmn/xx1yOjgTMtu1jWQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.3.tgz",
+      "integrity": "sha512-vo54aXwjpTtsAnb3ca7Yxs9t2INZg7QdXN/7yaoG7nPGbOBXYXQY41Km+S1Ov26vzOAzLcAjmMdjyEqS1JkVhw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.3.tgz",
+      "integrity": "sha512-HI+PIVZ+m+9AgpnY3pt6rinUdRYrGHvmVdsNQ4odNqQ/eRF78DVpMR7mOq7nW06QxpczibwBmeQzB68wJ+4W4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.3.tgz",
+      "integrity": "sha512-vRByotbdMo3Wdi+8oC2nVxtc3RkkFKrGaok+a62AT8lz/YBuQjaVYAS5Zcs3tPzW43Vsf9J0wehJbUY5xRSekA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.3.tgz",
+      "integrity": "sha512-POZHq7UeuzMJljC5NjKi8vKMFN6/5EOqcX1yGntNLp7rUTpBAXQ1hW8kWPFxYLv07QMcNM75xqVLGPWQq6TKFA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.3.tgz",
+      "integrity": "sha512-aPFONczE4fUFKNXszdvnd2GqKEYQdV5oEsIbKPujJmWlCI9zEsv1Otig8RKK+X9bed9gFUN6LAeN4ZcNuu4zjg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.55.3",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.3.tgz",
+      "integrity": "sha512-y9yUpfQvetAjiDLtNMf1hL9NXchIJgWt6zIKeoB+tCd3npX08Eqfzg60V9DhIGVMtQ0AlMkFw5xa+AQ37zxnAA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.55.3",
+        "@rollup/rollup-android-arm64": "4.55.3",
+        "@rollup/rollup-darwin-arm64": "4.55.3",
+        "@rollup/rollup-darwin-x64": "4.55.3",
+        "@rollup/rollup-freebsd-arm64": "4.55.3",
+        "@rollup/rollup-freebsd-x64": "4.55.3",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.55.3",
+        "@rollup/rollup-linux-arm-musleabihf": "4.55.3",
+        "@rollup/rollup-linux-arm64-gnu": "4.55.3",
+        "@rollup/rollup-linux-arm64-musl": "4.55.3",
+        "@rollup/rollup-linux-loong64-gnu": "4.55.3",
+        "@rollup/rollup-linux-loong64-musl": "4.55.3",
+        "@rollup/rollup-linux-ppc64-gnu": "4.55.3",
+        "@rollup/rollup-linux-ppc64-musl": "4.55.3",
+        "@rollup/rollup-linux-riscv64-gnu": "4.55.3",
+        "@rollup/rollup-linux-riscv64-musl": "4.55.3",
+        "@rollup/rollup-linux-s390x-gnu": "4.55.3",
+        "@rollup/rollup-linux-x64-gnu": "4.55.3",
+        "@rollup/rollup-linux-x64-musl": "4.55.3",
+        "@rollup/rollup-openbsd-x64": "4.55.3",
+        "@rollup/rollup-openharmony-arm64": "4.55.3",
+        "@rollup/rollup-win32-arm64-msvc": "4.55.3",
+        "@rollup/rollup-win32-ia32-msvc": "4.55.3",
+        "@rollup/rollup-win32-x64-gnu": "4.55.3",
+        "@rollup/rollup-win32-x64-msvc": "4.55.3",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/vite": {
+      "version": "5.4.21",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
+      "integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "esbuild": "^0.21.3",
+        "postcss": "^8.4.43",
+        "rollup": "^4.20.0"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || >=20.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || >=20.0.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.4.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "nova-sim-frontend",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:check": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
+  }
+}

frontend/src/api/client.js

@@ -0,0 +1,259 @@
+/**
+ * WebSocket client for Nova-Sim server
+ */
+export class NovaSimClient {
+    constructor(apiPrefix = '/nova-sim/api/v1') {
+        this.ws = null;
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = 5;
+        this.reconnectTimeout = null;
+        this.apiPrefix = apiPrefix;
+    }
+    /**
+     * Connect to WebSocket server
+     */
+    connect() {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            console.log('[WS] Already connected');
+            return;
+        }
+        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+        const wsUrl = `${protocol}//${window.location.host}${this.apiPrefix}/ws`;
+        console.log('[WS] Connecting to:', wsUrl);
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = () => {
+            console.log('[WS] Connected');
+            this.reconnectAttempts = 0;
+            this.onConnectionChange?.(true);
+        };
+        this.ws.onclose = () => {
+            console.log('[WS] Disconnected');
+            this.onConnectionChange?.(false);
+            this.attemptReconnect();
+        };
+        this.ws.onerror = (error) => {
+            console.error('[WS] Error:', error);
+        };
+        this.ws.onmessage = (event) => {
+            try {
+                const message = JSON.parse(event.data);
+                this.handleMessage(message);
+            }
+            catch (error) {
+                console.error('[WS] Failed to parse message:', error);
+            }
+        };
+    }
+    /**
+     * Disconnect from WebSocket server
+     */
+    disconnect() {
+        if (this.reconnectTimeout) {
+            clearTimeout(this.reconnectTimeout);
+            this.reconnectTimeout = null;
+        }
+        this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnect
+        this.ws?.close();
+        this.ws = null;
+    }
+    /**
+     * Attempt to reconnect after disconnect
+     */
+    attemptReconnect() {
+        if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+            console.log('[WS] Max reconnect attempts reached');
+            return;
+        }
+        const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
+        console.log(`[WS] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`);
+        this.reconnectTimeout = window.setTimeout(() => {
+            this.reconnectAttempts++;
+            this.connect();
+        }, delay);
+    }
+    /**
+     * Handle incoming WebSocket messages
+     */
+    handleMessage(message) {
+        switch (message.type) {
+            case 'state':
+                this.onStateUpdate?.(message.data);
+                break;
+            case 'trainer_status':
+                this.onTrainerStatus?.(message.data);
+                break;
+            case 'trainer_notification':
+                this.onTrainerNotification?.(message.data);
+                break;
+            default:
+                console.warn('[WS] Unknown message type:', message);
+        }
+    }
+    /**
+     * Send message to server
+     */
+    send(message) {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(message));
+        }
+        else {
+            console.warn('[WS] Cannot send message: not connected');
+        }
+    }
+    // ============================================================================
+    // Typed message senders
+    // ============================================================================
+    /**
+     * Send action command (locomotion robots)
+     */
+    sendAction(vx, vy, vyaw) {
+        this.send({
+            type: 'action',
+            data: { vx, vy, vyaw },
+        });
+    }
+    /**
+     * Send teleop action (UR5 Cartesian control)
+     */
+    sendTeleopAction(vx, vy, vz) {
+        this.send({
+            type: 'teleop_action',
+            data: { vx, vy, vz },
+        });
+    }
+    /**
+     * Reset environment
+     */
+    sendReset(seed) {
+        this.send({
+            type: 'reset',
+            data: seed !== undefined ? { seed } : {},
+        });
+    }
+    /**
+     * Switch robot
+     */
+    switchRobot(robot, scene) {
+        this.send({
+            type: 'switch_robot',
+            data: { robot, scene },
+        });
+    }
+    /**
+     * Send camera control
+     */
+    sendCameraControl(data) {
+        this.send({
+            type: 'camera',
+            data,
+        });
+    }
+    /**
+     * Toggle camera follow mode
+     */
+    setCameraFollow(follow) {
+        this.send({
+            type: 'camera_follow',
+            data: { follow },
+        });
+    }
+    /**
+     * Start homing sequence (UR5)
+     */
+    startHome() {
+        this.send({ type: 'home' });
+    }
+    /**
+     * Stop homing sequence (UR5)
+     */
+    stopHome() {
+        this.send({ type: 'stop_home' });
+    }
+    /**
+     * Set arm target position (UR5 IK mode)
+     */
+    setArmTarget(x, y, z) {
+        this.send({
+            type: 'arm_target',
+            data: { x, y, z },
+        });
+    }
+    /**
+     * Set arm orientation (UR5 IK mode)
+     */
+    setArmOrientation(roll, pitch, yaw) {
+        this.send({
+            type: 'arm_orientation',
+            data: { roll, pitch, yaw },
+        });
+    }
+    /**
+     * Toggle orientation control (UR5)
+     */
+    setUseOrientation(enabled) {
+        this.send({
+            type: 'use_orientation',
+            data: { enabled },
+        });
+    }
+    /**
+     * Set joint positions (UR5 joint mode)
+     */
+    setJointPositions(positions) {
+        this.send({
+            type: 'joint_positions',
+            data: { positions },
+        });
+    }
+    /**
+     * Set control mode (UR5)
+     */
+    setControlMode(mode) {
+        this.send({
+            type: 'control_mode',
+            data: { mode },
+        });
+    }
+    /**
+     * Control gripper (UR5)
+     */
+    setGripper(action, value) {
+        this.send({
+            type: 'gripper',
+            data: { action, value },
+        });
+    }
+    /**
+     * Start jogging (UR5)
+     */
+    startJog(jogType, params) {
+        this.send({
+            type: 'start_jog',
+            data: { jog_type: jogType, params },
+        });
+    }
+    /**
+     * Stop jogging (UR5)
+     */
+    stopJog() {
+        this.send({ type: 'stop_jog' });
+    }
+    /**
+     * Set Nova API mode (UR5)
+     */
+    setNovaMode(enabled) {
+        this.send({
+            type: 'set_nova_mode',
+            data: { enabled },
+        });
+    }
+    /**
+     * Send episode control (trainer)
+     */
+    sendEpisodeControl(action) {
+        this.send({
+            type: 'episode_control',
+            data: { action },
+        });
+    }
+}

frontend/src/api/client.ts

@@ -0,0 +1,308 @@
+import type {
+  ClientMessage,
+  ServerMessage,
+  StateData,
+  TrainerStatusData,
+  TrainerNotificationData,
+  RobotType,
+  CameraData,
+  JogParams,
+} from '../types/protocol';
+
+/**
+ * WebSocket client for Nova-Sim server
+ */
+export class NovaSimClient {
+  private ws: WebSocket | null = null;
+  private reconnectAttempts = 0;
+  private readonly maxReconnectAttempts = 5;
+  private reconnectTimeout: number | null = null;
+  private readonly apiPrefix: string;
+
+  // Event handlers (set by main.ts)
+  public onStateUpdate?: (data: StateData) => void;
+  public onConnectionChange?: (connected: boolean) => void;
+  public onTrainerStatus?: (data: TrainerStatusData) => void;
+  public onTrainerNotification?: (data: TrainerNotificationData) => void;
+
+  constructor(apiPrefix: string = '/nova-sim/api/v1') {
+    this.apiPrefix = apiPrefix;
+  }
+
+  /**
+   * Connect to WebSocket server
+   */
+  connect(): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      console.log('[WS] Already connected');
+      return;
+    }
+
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${window.location.host}${this.apiPrefix}/ws`;
+
+    console.log('[WS] Connecting to:', wsUrl);
+    this.ws = new WebSocket(wsUrl);
+
+    this.ws.onopen = () => {
+      console.log('[WS] Connected');
+      this.reconnectAttempts = 0;
+      this.onConnectionChange?.(true);
+    };
+
+    this.ws.onclose = () => {
+      console.log('[WS] Disconnected');
+      this.onConnectionChange?.(false);
+      this.attemptReconnect();
+    };
+
+    this.ws.onerror = (error) => {
+      console.error('[WS] Error:', error);
+    };
+
+    this.ws.onmessage = (event) => {
+      try {
+        const message: ServerMessage = JSON.parse(event.data);
+        this.handleMessage(message);
+      } catch (error) {
+        console.error('[WS] Failed to parse message:', error);
+      }
+    };
+  }
+
+  /**
+   * Disconnect from WebSocket server
+   */
+  disconnect(): void {
+    if (this.reconnectTimeout) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    this.reconnectAttempts = this.maxReconnectAttempts; // Prevent reconnect
+    this.ws?.close();
+    this.ws = null;
+  }
+
+  /**
+   * Attempt to reconnect after disconnect
+   */
+  private attemptReconnect(): void {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.log('[WS] Max reconnect attempts reached');
+      return;
+    }
+
+    const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 10000);
+    console.log(`[WS] Reconnecting in ${delay}ms (attempt ${this.reconnectAttempts + 1}/${this.maxReconnectAttempts})`);
+
+    this.reconnectTimeout = window.setTimeout(() => {
+      this.reconnectAttempts++;
+      this.connect();
+    }, delay);
+  }
+
+  /**
+   * Handle incoming WebSocket messages
+   */
+  private handleMessage(message: ServerMessage): void {
+    switch (message.type) {
+      case 'state':
+        this.onStateUpdate?.(message.data);
+        break;
+      case 'trainer_status':
+        this.onTrainerStatus?.(message.data);
+        break;
+      case 'trainer_notification':
+        this.onTrainerNotification?.(message.data);
+        break;
+      default:
+        console.warn('[WS] Unknown message type:', message);
+    }
+  }
+
+  /**
+   * Send message to server
+   */
+  private send(message: ClientMessage): void {
+    if (this.ws?.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    } else {
+      console.warn('[WS] Cannot send message: not connected');
+    }
+  }
+
+  // ============================================================================
+  // Typed message senders
+  // ============================================================================
+
+  /**
+   * Send action command (locomotion robots)
+   */
+  sendAction(vx: number, vy: number, vyaw: number): void {
+    this.send({
+      type: 'action',
+      data: { vx, vy, vyaw },
+    });
+  }
+
+  /**
+   * Send teleop action (UR5 Cartesian control)
+   */
+  sendTeleopAction(vx: number, vy: number, vz: number): void {
+    this.send({
+      type: 'teleop_action',
+      data: { vx, vy, vz },
+    });
+  }
+
+  /**
+   * Reset environment
+   */
+  sendReset(seed?: number): void {
+    this.send({
+      type: 'reset',
+      data: seed !== undefined ? { seed } : {},
+    });
+  }
+
+  /**
+   * Switch robot
+   */
+  switchRobot(robot: RobotType, scene?: string | null): void {
+    this.send({
+      type: 'switch_robot',
+      data: { robot, scene },
+    });
+  }
+
+  /**
+   * Send camera control
+   */
+  sendCameraControl(data: CameraData): void {
+    this.send({
+      type: 'camera',
+      data,
+    });
+  }
+
+  /**
+   * Toggle camera follow mode
+   */
+  setCameraFollow(follow: boolean): void {
+    this.send({
+      type: 'camera_follow',
+      data: { follow },
+    });
+  }
+
+  /**
+   * Start homing sequence (UR5)
+   */
+  startHome(): void {
+    this.send({ type: 'home' });
+  }
+
+  /**
+   * Stop homing sequence (UR5)
+   */
+  stopHome(): void {
+    this.send({ type: 'stop_home' });
+  }
+
+  /**
+   * Set arm target position (UR5 IK mode)
+   */
+  setArmTarget(x: number, y: number, z: number): void {
+    this.send({
+      type: 'arm_target',
+      data: { x, y, z },
+    });
+  }
+
+  /**
+   * Set arm orientation (UR5 IK mode)
+   */
+  setArmOrientation(roll: number, pitch: number, yaw: number): void {
+    this.send({
+      type: 'arm_orientation',
+      data: { roll, pitch, yaw },
+    });
+  }
+
+  /**
+   * Toggle orientation control (UR5)
+   */
+  setUseOrientation(enabled: boolean): void {
+    this.send({
+      type: 'use_orientation',
+      data: { enabled },
+    });
+  }
+
+  /**
+   * Set joint positions (UR5 joint mode)
+   */
+  setJointPositions(positions: number[]): void {
+    this.send({
+      type: 'joint_positions',
+      data: { positions },
+    });
+  }
+
+  /**
+   * Set control mode (UR5)
+   */
+  setControlMode(mode: 'ik' | 'joint'): void {
+    this.send({
+      type: 'control_mode',
+      data: { mode },
+    });
+  }
+
+  /**
+   * Control gripper (UR5)
+   */
+  setGripper(action: 'open' | 'close', value?: number): void {
+    this.send({
+      type: 'gripper',
+      data: { action, value },
+    });
+  }
+
+  /**
+   * Start jogging (UR5)
+   */
+  startJog(jogType: 'joint' | 'cartesian_translation' | 'cartesian_rotation', params: JogParams): void {
+    this.send({
+      type: 'start_jog',
+      data: { jog_type: jogType, params },
+    });
+  }
+
+  /**
+   * Stop jogging (UR5)
+   */
+  stopJog(): void {
+    this.send({ type: 'stop_jog' });
+  }
+
+  /**
+   * Set Nova API mode (UR5)
+   */
+  setNovaMode(enabled: boolean): void {
+    this.send({
+      type: 'set_nova_mode',
+      data: { enabled },
+    });
+  }
+
+  /**
+   * Send episode control (trainer)
+   */
+  sendEpisodeControl(action: 'terminate' | 'truncate'): void {
+    this.send({
+      type: 'episode_control',
+      data: { action },
+    });
+  }
+}

frontend/src/index.html

@@ -0,0 +1,317 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Nova Sim - Wandelbots Robot Simulator</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+    <div class="video-container" id="viewport">
+        <img src="" draggable="false">
+    </div>
+
+    <!-- State info panel - top right -->
+    <div class="state-panel" id="state_panel">
+        <!-- Connection status badge (inside panel) -->
+        <div class="connection-status-inline connecting" id="conn_status">
+            <span class="status-text" id="conn_status_text">Connecting...</span>
+            <span class="status-loader" id="conn_loader" aria-hidden="true"></span>
+        </div>
+
+        <div id="locomotion_state">
+            <strong>Robot State</strong><br>
+            Position: <span id="loco_pos">0.00, 0.00, 0.00</span><br>
+            Orientation: <span id="loco_ori">0.00, 0.00, 0.00</span><br>
+            Steps: <span id="step_val">0</span><br>
+            Teleop: <span id="loco_teleop_display" style="display: inline-block; word-wrap: break-word; max-width: 100%;">-</span>
+        </div>
+
+        <div id="arm_state" style="display: none;">
+            <strong>Arm State</strong><br>
+            EE Pos: <span id="ee_pos">0.00, 0.00, 0.00</span><br>
+            EE Ori: <span id="ee_ori">0.00, 0.00, 0.00</span><br>
+            <span id="gripper_state_display">Gripper: <span id="gripper_val">50%</span><br></span>
+            Reward: <span id="arm_reward">-</span><br>
+            Mode: <span id="control_mode_display">IK</span> | Steps: <span id="arm_step_val">0</span><br>
+            Teleop: <span id="arm_teleop_display" style="display: inline-block; word-wrap: break-word; max-width: 100%;">-</span><br>
+            <div style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(188, 190, 236, 0.2);">
+                <div id="nova_connection_badge" class="status-card" style="display: none; margin-bottom: 8px;">
+                    <strong id="nova_badge_title" style="font-size: 0.85em; color: var(--wb-success); display: flex; align-items: center; gap: 6px;">
+                        Nova Connected
+                    </strong>
+                    <div style="font-size: 0.75em; color: rgba(255, 255, 255, 0.85);">
+                        <span id="nova_mode_text">Digital Twin Mode</span> - Read Only
+                    </div>
+                    <button id="nova_toggle_button" class="rl-btn" style="padding: 6px 12px; font-size: 0.75em;">Turn Nova Off</button>
+                </div>
+            </div>
+            <div id="arm_teleop_vx" style="font-size: 0.7em;"></div>
+            <div id="arm_teleop_vy" style="font-size: 0.7em;"></div>
+            <div id="arm_teleop_vz" style="font-size: 0.7em;"></div>
+        </div>
+
+        <div id="trainer_status_card" class="status-card disconnected">
+            <strong>Trainer Connection</strong>
+            <div class="trainer-status disconnected" id="trainer_status_indicator">
+                <span class="trainer-status-dot" id="trainer_status_dot" aria-hidden="true"></span>
+                <span class="status-card-text" id="trainer_status_text">Trainer: Disconnected</span>
+            </div>
+        </div>
+    </div>
+
+    <div class="overlay-tiles" id="overlay_tiles"></div>
+
+    <div class="overlay" id="control_panel">
+        <div class="panel-header" id="panel_header">
+            <h2 id="robot_title">Unitree G1 Humanoid</h2>
+        </div>
+
+        <div class="panel-content" id="panel_content">
+            <div class="robot-selector">
+                <select id="robot_select">
+                    <option value="">Loading robots...</option>
+                </select>
+                <div class="control-panel-info" id="arm_hints" style="display: none;">
+                    <strong>Keyboard Controls</strong>
+                    <ul>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>W/A/S/D</kbd>
+                                <span>XY jog</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>R/F</kbd>
+                                <span>Z nudge</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>Enter</kbd>
+                                <span>Move to Home</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="control-panel-info" id="loco_hints" style="display: none;">
+                    <strong>Keyboard Controls</strong>
+                    <ul>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>W/S</kbd>
+                                <span>Forward/Back</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>A/D</kbd>
+                                <span>Turn Left/Right</span>
+                            </span>
+                        </li>
+                        <li>
+                            <span class="hint-key">
+                                <kbd>Q/E</kbd>
+                                <span>Strafe Left/Right</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div class="robot-info" id="robot_info">
+                    29 DOF humanoid with RL walking policy
+                </div>
+            </div>
+
+            <!-- Locomotion controls (G1, Spot) -->
+            <div class="locomotion-controls" id="locomotion_controls">
+                <div class="control-group">
+                    <label>Walking Controls (WASD or buttons)</label>
+                    <div class="rl-buttons">
+                        <div class="rl-row">
+                            <button class="rl-btn">W Forward</button>
+                        </div>
+                        <div class="rl-row">
+                            <button class="rl-btn">A Turn L</button>
+                            <button class="rl-btn">S Back</button>
+                            <button class="rl-btn">D Turn R</button>
+                        </div>
+                        <div class="rl-row">
+                            <button class="rl-btn">Q Strafe L</button>
+                            <button class="rl-btn stop">Stop</button>
+                            <button class="rl-btn">E Strafe R</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Arm controls (UR5) -->
+            <div class="arm-controls" id="arm_controls">
+                <div class="control-group">
+                    <label>Control Mode</label>
+                    <div class="mode-toggle">
+                        <button id="mode_ik" class="active">IK (XYZ Target)</button>
+                        <button id="mode_joint">Direct Joints</button>
+                    </div>
+                </div>
+
+                <!-- IK Controls -->
+                <div class="ik-controls active" id="ik_controls">
+                    <!-- Nova State/IK indicator boxes -->
+                    <div id="nova_state_controller" style="display: none; margin-bottom: 10px; padding: 8px 10px; background: rgba(139, 127, 239, 0.15); border-radius: 6px; border: 1px solid rgba(139, 127, 239, 0.3); font-size: 0.75em;">
+                        <strong>Nova State Streaming</strong><br>
+                        <span style="opacity: 0.8;">Receiving real robot state</span>
+                    </div>
+
+                    <div id="nova_ik_controller" style="display: none; margin-bottom: 10px; padding: 8px 10px; background: rgba(139, 127, 239, 0.15); border-radius: 6px; border: 1px solid rgba(139, 127, 239, 0.3); font-size: 0.75em;">
+                        <strong>Nova IK Controller</strong><br>
+                        <span style="opacity: 0.8;">Using cloud IK</span>
+                    </div>
+
+                    <div class="control-group">
+                        <label>Translation (XYZ)</label>
+                        <div class="jog-controls">
+                            <div class="jog-row">
+                                <label style="color: #ff6b6b; font-weight: bold;">X</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="pos_x_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label style="color: #51cf66; font-weight: bold;">Y</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="pos_y_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label style="color: #339af0; font-weight: bold;">Z</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="pos_z_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="control-group" id="arm_orientation">
+                        <label>Rotation (RPY)</label>
+                        <div class="jog-controls">
+                            <div class="jog-row">
+                                <label style="color: #ff6b6b; font-weight: bold;">Rx</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="rot_x_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label style="color: #51cf66; font-weight: bold;">Ry</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="rot_y_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label style="color: #339af0; font-weight: bold;">Rz</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="rot_z_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                        </div>
+                        <div style="margin-top: 8px;">
+                            <label style="font-size: 0.85em;">Velocity: <span id="rot_vel_val">0.3</span> rad/s</label>
+                            <input type="range" id="rot_velocity" min="0.1" max="1.0" step="0.1" value="0.3" style="width: 100%;">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Joint Controls -->
+                <div class="joint-controls" id="joint_controls">
+                    <div class="control-group">
+                        <label>Joint Positions</label>
+                        <div class="jog-controls">
+                            <div class="jog-row">
+                                <label>J1</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_0_val">-1.57</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label>J2</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_1_val">-1.57</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label>J3</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_2_val">1.57</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label>J4</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_3_val">-1.57</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label>J5</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_4_val">-1.57</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                            <div class="jog-row">
+                                <label>J6</label>
+                                <button class="jog-btn">−</button>
+                                <span class="val-display" id="joint_5_val">0.00</span>
+                                <button class="jog-btn">+</button>
+                            </div>
+                        </div>
+                        <div style="margin-top: 8px;">
+                            <label style="font-size: 0.85em;">Velocity: <span id="joint_vel_val">0.5</span> rad/s</label>
+                            <input type="range" id="joint_velocity" min="0.1" max="2.0" step="0.1" value="0.5" style="width: 100%;">
+                        </div>
+                    </div>
+                </div>
+
+                <div class="control-group" id="gripper_controls">
+                    <label>Gripper</label>
+                    <div class="gripper-btns">
+                        <button class="rl-btn">Open</button>
+                        <button class="rl-btn">Close</button>
+                    </div>
+                </div>
+
+            </div>
+
+            <button class="danger" style="width: 100%; margin-top: 15px;">Reset Environment</button>
+            <button id="homeBtn" style="width: 100%; margin-top: 10px; display: none;">🏠 Move to Home</button>
+        </div>
+    </div>
+
+    <div class="rl-notifications" id="rl_notifications"></div>
+
+    <div class="hint" id="hint_box" style="display: none;">
+        Drag: Rotate Camera<br>
+        Scroll: Zoom
+    </div>
+
+    <!-- Hidden elements needed by JS but not visible -->
+    <span id="scene_label" style="display: none;"></span>
+    <span id="gripper_display" style="display: none;"></span>
+    <span id="pos_x_display" style="display: none;"></span>
+    <span id="pos_y_display" style="display: none;"></span>
+    <span id="pos_z_display" style="display: none;"></span>
+    <span id="rot_x_display" style="display: none;"></span>
+    <span id="rot_y_display" style="display: none;"></span>
+    <span id="rot_z_display" style="display: none;"></span>
+    <span id="joint_0_display" style="display: none;"></span>
+    <span id="joint_1_display" style="display: none;"></span>
+    <span id="joint_2_display" style="display: none;"></span>
+    <span id="joint_3_display" style="display: none;"></span>
+    <span id="joint_4_display" style="display: none;"></span>
+    <span id="joint_5_display" style="display: none;"></span>
+    <span id="gripper_joint_val" style="display: none;"></span>
+    <span id="gripper_joint_display" style="display: none;"></span>
+    <span id="trans_velocity" style="display: none;"></span>
+    <span id="trans_vel_val" style="display: none;"></span>
+
+    <script type="module" src="./main.ts"></script>
+</body>
+</html>

frontend/src/main.js

@@ -0,0 +1,1282 @@
+const API_PREFIX = '/nova-sim/api/v1';
+const WS_URL = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
+    window.location.host + API_PREFIX + '/ws';
+let ws = null;
+let reconnectTimer = null;
+const connStatus = document.getElementById('conn_status');
+const connStatusText = document.getElementById('conn_status_text');
+const robotSelect = document.getElementById('robot_select');
+const sceneLabel = document.getElementById('scene_label');
+const overlayTiles = document.getElementById('overlay_tiles');
+const trainerStatusCard = document.getElementById('trainer_status_card');
+const trainerStatusIndicator = document.getElementById('trainer_status_indicator');
+const trainerStatusText = document.getElementById('trainer_status_text');
+const viewportImage = document.querySelector('.video-container img');
+const robotTitle = document.getElementById('robot_title');
+const robotInfo = document.getElementById('robot_info');
+const metadataUrl = API_PREFIX + '/metadata';
+const envUrl = API_PREFIX + '/env';
+let metadataCache = null;
+let envCache = null;
+let pendingRobotSelection = null;
+let currentRobot = null;
+let currentScene = null;
+let novaStateStreaming = false; // Track if Nova state streaming is active
+let currentHomePose = null; // Store home pose from env data
+let currentJointPositions = null; // Store latest joint positions from state stream
+function updateConnectionLabel(text) {
+    if (connStatusText) {
+        connStatusText.innerText = text;
+    }
+}
+function enterConnectingState() {
+    updateConnectionLabel('Connecting...');
+    if (connStatus) {
+        connStatus.classList.add('connecting');
+        connStatus.classList.remove('disconnected');
+    }
+}
+function markConnectedState() {
+    updateConnectionLabel('Connected');
+    if (connStatus) {
+        connStatus.classList.remove('connecting', 'disconnected');
+    }
+}
+function refreshVideoStreams() {
+    const timestamp = Date.now();
+    if (viewportImage) {
+        viewportImage.src = `${API_PREFIX}/video_feed?ts=${timestamp}`;
+    }
+    if (overlayTiles) {
+        overlayTiles.querySelectorAll('img[data-feed]').forEach((img) => {
+            const feedName = img.dataset.feed || 'main';
+            img.src = `${API_PREFIX}/camera/${feedName}/video_feed?ts=${timestamp}`;
+        });
+    }
+}
+const novaToggleButton = document.getElementById('nova_toggle_button');
+let novaEnabledState = false;
+let novaManualToggle = false;
+let novaAutoEnableRequested = false;
+let novaPreconfigured = false;
+function setNovaToggleState(available, enabled) {
+    if (!novaToggleButton) {
+        return;
+    }
+    novaEnabledState = !!enabled;
+    if (novaEnabledState) {
+        novaAutoEnableRequested = false;
+    }
+    if (!available) {
+        novaAutoEnableRequested = false;
+    }
+    novaToggleButton.style.display = available ? 'inline-flex' : 'none';
+    novaToggleButton.disabled = !available;
+    novaToggleButton.innerText = novaEnabledState ? 'Turn Nova Off' : 'Turn Nova On';
+}
+if (novaToggleButton) {
+    novaToggleButton.addEventListener('click', () => {
+        novaManualToggle = true;
+        send('set_nova_mode', { enabled: !novaEnabledState });
+    });
+}
+const NOVA_TRANSLATION_VELOCITY = 50.0;
+const NOVA_ROTATION_VELOCITY = 0.3;
+const NOVA_JOINT_VELOCITY = 0.5;
+let novaVelocitiesConfigured = false;
+function updateTrainerStatus(connected) {
+    if (!trainerStatusCard || !trainerStatusText) {
+        return;
+    }
+    trainerStatusText.innerText = connected ? 'Trainer: Connected' : 'Trainer: Disconnected';
+    trainerStatusCard.classList.toggle('connected', connected);
+    trainerStatusCard.classList.toggle('disconnected', !connected);
+    if (trainerStatusIndicator) {
+        trainerStatusIndicator.classList.toggle('connected', connected);
+        trainerStatusIndicator.classList.toggle('disconnected', !connected);
+    }
+    if (connected) {
+        configureNovaVelocities();
+    }
+}
+function configureNovaVelocities() {
+    if (novaVelocitiesConfigured) {
+        return;
+    }
+    const transSlider = document.getElementById('trans_velocity');
+    const rotSlider = document.getElementById('rot_velocity');
+    const jointSlider = document.getElementById('joint_velocity');
+    if (transSlider) {
+        transSlider.value = NOVA_TRANSLATION_VELOCITY;
+        updateTransVelocity();
+    }
+    if (rotSlider) {
+        rotSlider.value = NOVA_ROTATION_VELOCITY;
+        updateRotVelocity();
+    }
+    if (jointSlider) {
+        jointSlider.value = NOVA_JOINT_VELOCITY;
+        updateJointVelocity();
+    }
+    novaVelocitiesConfigured = true;
+}
+function refreshOverlayTiles() {
+    if (!metadataCache) {
+        return;
+    }
+    setupOverlayTiles();
+}
+const robotInfoText = {
+    'g1': '29 DOF humanoid with RL walking policy',
+    'spot': '12 DOF quadruped with trot gait controller',
+    'ur5': '6 DOF robot arm with Robotiq gripper',
+    'ur5_t_push': 'UR5e T-push task with stick tool'
+};
+const robotTitles = {
+    'g1': 'Unitree G1 Humanoid',
+    'spot': 'Boston Dynamics Spot',
+    'ur5': 'Universal Robots UR5e',
+    'ur5_t_push': 'UR5e T-Push Scene'
+};
+const locomotionControls = document.getElementById('locomotion_controls');
+const armControls = document.getElementById('arm_controls');
+const notificationList = document.getElementById('rl_notifications_list');
+const teleopStatus = document.getElementById('teleop_status');
+const armRobotTypes = new Set(['ur5', 'ur5_t_push']);
+const armTeleopKeys = new Set(['KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyR', 'KeyF']);
+const locomotionKeys = new Set([
+    'KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyQ', 'KeyE',
+    'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
+]);
+function maybeAutoEnableNova() {
+    if (!novaPreconfigured || novaManualToggle) {
+        return;
+    }
+    const activeSelection = getActiveSelection();
+    if (!armRobotTypes.has(activeSelection.robot)) {
+        return;
+    }
+    if (novaEnabledState) {
+        novaAutoEnableRequested = false;
+        return;
+    }
+    if (novaAutoEnableRequested) {
+        return;
+    }
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        send('set_nova_mode', { enabled: true });
+        novaAutoEnableRequested = true;
+    }
+}
+let teleopTranslationStep = 0.005; // meters per keyboard nudge
+let teleopVerticalStep = 0.01;
+const TELEOP_REPEAT_INTERVAL_MS = 80;
+const NOTIFICATION_DURATION_MS = 5000;
+let teleopRepeatTimer = null;
+let lastTeleopCommand = { dx: 0, dy: 0, dz: 0 };
+const armJogKeyMap = {
+    KeyW: { jogType: 'cartesian_translation', axis: 'x', direction: '+' },
+    KeyS: { jogType: 'cartesian_translation', axis: 'x', direction: '-' },
+    KeyA: { jogType: 'cartesian_translation', axis: 'y', direction: '+' },
+    KeyD: { jogType: 'cartesian_translation', axis: 'y', direction: '-' },
+    KeyR: { jogType: 'cartesian_translation', axis: 'z', direction: '+' },
+    KeyF: { jogType: 'cartesian_translation', axis: 'z', direction: '-' },
+};
+function humanizeScene(scene) {
+    if (!scene) {
+        return 'Default';
+    }
+    const cleaned = scene.replace(/^scene_/, '').replace(/_/g, ' ');
+    return cleaned.replace(/\\b\\w/g, (char) => char.toUpperCase());
+}
+function buildSelectionValue(robot, scene) {
+    return scene ? `${robot}::${scene}` : robot;
+}
+function parseSelection(value) {
+    if (!value) {
+        return { robot: 'g1', scene: null };
+    }
+    const [robotPart, scenePart] = value.split('::');
+    return { robot: robotPart, scene: scenePart || null };
+}
+function createRobotSceneOption(robot, scene, label) {
+    const option = document.createElement("option");
+    option.value = buildSelectionValue(robot, scene);
+    const sceneText = scene ? ` · ${humanizeScene(scene)}` : '';
+    option.textContent = `${label || robot}${sceneText}`;
+    return option;
+}
+function getDefaultSelection(metadata) {
+    if (!metadata) {
+        return '';
+    }
+    const robots = Object.keys(metadata.robots);
+    if (!robots.length) {
+        return '';
+    }
+    const preferred = metadata.robots['ur5_t_push'] ? 'ur5_t_push' : robots[0];
+    const preferredRobot = metadata.robots[preferred];
+    const preferredScenes = preferredRobot && preferredRobot.scenes;
+    const defaultScene = (metadata.default_scene && metadata.default_scene[preferred])
+        || (preferredScenes && preferredScenes[0]) || '';
+    return buildSelectionValue(preferred, defaultScene);
+}
+function populateRobotOptions(metadata) {
+    if (!metadata) {
+        return null;
+    }
+    robotSelect.innerHTML = "";
+    Object.entries(metadata.robots).forEach(([robot, meta]) => {
+        const scenes = meta.scenes || [];
+        if (scenes.length <= 1) {
+            const scene = scenes[0] || "";
+            robotSelect.appendChild(createRobotSceneOption(robot, scene, meta.label));
+        }
+        else {
+            const group = document.createElement("optgroup");
+            group.label = meta.label || robot;
+            scenes.forEach((scene) => {
+                group.appendChild(createRobotSceneOption(robot, scene, meta.label));
+            });
+            robotSelect.appendChild(group);
+        }
+    });
+    const defaultValue = getDefaultSelection(metadata);
+    if (defaultValue) {
+        robotSelect.value = defaultValue;
+        const parsed = parseSelection(defaultValue);
+        return parsed;
+    }
+    return null;
+}
+async function setupOverlayTiles() {
+    if (!overlayTiles) {
+        return;
+    }
+    if (!envCache) {
+        overlayTiles.innerHTML = "";
+        overlayTiles.dataset.overlayKey = "";
+        overlayTiles.style.display = 'none';
+        return;
+    }
+    // Get overlay camera feeds from envCache (excludes main camera)
+    const allFeeds = envCache.camera_feeds || [];
+    const overlayFeeds = allFeeds.filter(feed => feed.name !== 'main');
+    if (!overlayFeeds.length) {
+        overlayTiles.innerHTML = "";
+        overlayTiles.dataset.overlayKey = "";
+        overlayTiles.style.display = 'none';
+        return;
+    }
+    const feedNames = overlayFeeds.map((feed) => feed.name || "aux");
+    const key = `${envCache.robot || ''}|${envCache.scene || ''}|${feedNames.join(',')}`;
+    if (overlayTiles.dataset.overlayKey === key) {
+        overlayTiles.style.display = 'flex';
+        return;
+    }
+    overlayTiles.dataset.overlayKey = key;
+    overlayTiles.innerHTML = "";
+    overlayTiles.style.display = 'flex';
+    overlayFeeds.forEach((feed) => {
+        const tile = document.createElement("div");
+        tile.className = "overlay-tile";
+        const img = document.createElement("img");
+        const feedName = feed.name || "aux";
+        img.dataset.feed = feedName;
+        img.src = feed.url + `?ts=${Date.now()}`;
+        tile.appendChild(img);
+        const label = document.createElement("div");
+        label.className = "overlay-label";
+        label.innerText = feed.label || feed.name;
+        tile.appendChild(label);
+        overlayTiles.appendChild(tile);
+    });
+}
+async function loadMetadata() {
+    try {
+        const resp = await fetch(metadataUrl);
+        if (!resp.ok) {
+            console.warn("Failed to load metadata");
+            return;
+        }
+        metadataCache = await resp.json();
+        const selection = populateRobotOptions(metadataCache);
+        if (selection) {
+            updateRobotUI(selection.robot, selection.scene);
+            refreshOverlayTiles();
+        }
+        const novaInfo = metadataCache && metadataCache.nova_api;
+        novaPreconfigured = Boolean(novaInfo && novaInfo.preconfigured);
+        setNovaToggleState(!!(novaInfo && novaInfo.preconfigured), !!(novaInfo && novaInfo.preconfigured));
+        maybeAutoEnableNova();
+        if (ws && ws.readyState === WebSocket.OPEN && pendingRobotSelection) {
+            send('switch_robot', {
+                robot: pendingRobotSelection.robot,
+                scene: pendingRobotSelection.scene
+            });
+        }
+    }
+    catch (error) {
+        console.warn("Metadata fetch error:", error);
+    }
+}
+async function loadEnvData() {
+    try {
+        console.log('Loading env data from:', envUrl);
+        const resp = await fetch(envUrl);
+        if (!resp.ok) {
+            console.warn("Failed to load env data, status:", resp.status);
+            return;
+        }
+        envCache = await resp.json();
+        console.log('Env data loaded:', envCache);
+        // Store home_pose if available
+        if (envCache && envCache.home_pose) {
+            currentHomePose = envCache.home_pose;
+            console.log('Home pose set to:', currentHomePose);
+        }
+        else {
+            console.warn('No home_pose in env data:', envCache);
+        }
+    }
+    catch (error) {
+        console.error("Env fetch error:", error);
+    }
+}
+function connect() {
+    ws = new WebSocket(WS_URL);
+    loadMetadata();
+    loadEnvData();
+    ws.onopen = () => {
+        markConnectedState();
+        refreshVideoStreams();
+        refreshOverlayTiles();
+        novaAutoEnableRequested = false;
+        maybeAutoEnableNova();
+        if (reconnectTimer) {
+            clearInterval(reconnectTimer);
+            reconnectTimer = null;
+        }
+        if (pendingRobotSelection) {
+            send('switch_robot', {
+                robot: pendingRobotSelection.robot,
+                scene: pendingRobotSelection.scene
+            });
+        }
+    };
+    ws.onclose = () => {
+        enterConnectingState();
+        // Auto-reconnect
+        if (!reconnectTimer) {
+            reconnectTimer = setInterval(() => {
+                if (ws.readyState === WebSocket.CLOSED) {
+                    connect();
+                }
+            }, 2000);
+        }
+    };
+    ws.onerror = (err) => {
+        console.error('WebSocket error:', err);
+    };
+    ws.onmessage = (event) => {
+        try {
+            const msg = JSON.parse(event.data);
+            if (msg.type === 'state') {
+                const data = msg.data;
+                // Check if robot or scene changed in state stream
+                if (data.robot && data.robot !== currentRobot) {
+                    console.log(`Robot changed from ${currentRobot} to ${data.robot}`);
+                    currentRobot = data.robot;
+                    updateRobotUI(data.robot, data.scene);
+                    // Fetch new environment info only when robot actually changes
+                    fetch('/nova-sim/api/v1/env')
+                        .then(r => r.json())
+                        .then(envData => {
+                        console.log('Robot changed, fetched env data:', envData);
+                        envData.has_gripper = envData.envData.has_gripper || false;
+                        envData.control_mode = envData.envData.control_mode || 'ik';
+                        if (envData.home_pose) {
+                            currentHomePose = envData.home_pose;
+                            console.log('Updated home pose from robot change:', currentHomePose);
+                        }
+                        else {
+                            console.warn('No home_pose in robot change env data');
+                        }
+                    });
+                }
+                if (data.scene && data.scene !== currentScene) {
+                    console.log(`Scene changed from ${currentScene} to ${data.scene}`);
+                    currentScene = data.scene;
+                }
+                if (typeof data.trainer_connected === 'boolean') {
+                    updateTrainerStatus(data.trainer_connected);
+                }
+                if (currentRobot === 'ur5' || currentRobot === 'ur5_t_push') {
+                    // UR5 state - Access observation data first
+                    const obs = data.observation || {};
+                    // Update end effector position
+                    if (obs.end_effector) {
+                        const ee = obs.end_effector;
+                        document.getElementById('ee_pos').innerText =
+                            ee.x.toFixed(2) + ', ' + ee.y.toFixed(2) + ', ' + ee.z.toFixed(2);
+                    }
+                    // EE Orientation - convert quaternion to euler for display
+                    if (obs.ee_orientation) {
+                        const q = obs.ee_orientation;
+                        const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                        document.getElementById('ee_ori').innerText =
+                            euler[0].toFixed(2) + ', ' + euler[1].toFixed(2) + ', ' + euler[2].toFixed(2);
+                    }
+                    // Show/hide gripper UI based on envData.has_gripper
+                    const gripperStateDisplay = document.getElementById('gripper_state_display');
+                    const gripperControls = document.getElementById('gripper_controls');
+                    if (data.envData.has_gripper) {
+                        gripperStateDisplay.style.display = '';
+                        gripperControls.style.display = '';
+                        // Gripper: 0=open, 255=closed (Robotiq 2F-85)
+                        if (obs.gripper !== undefined) {
+                            document.getElementById('gripper_val').innerText =
+                                ((255 - obs.gripper) / 255 * 100).toFixed(0) + '% open';
+                        }
+                    }
+                    else {
+                        gripperStateDisplay.style.display = 'none';
+                        gripperControls.style.display = 'none';
+                    }
+                    document.getElementById('arm_step_val').innerText = data.steps;
+                    const rewardEl = document.getElementById('arm_reward');
+                    if (data.reward === null || data.reward === undefined) {
+                        rewardEl.innerText = '-';
+                    }
+                    else {
+                        rewardEl.innerText = data.reward.toFixed(3);
+                    }
+                    // Update joint position display (actual positions)
+                    if (obs.joint_positions) {
+                        const jp = obs.joint_positions;
+                        currentJointPositions = jp; // Store for homing
+                        const jointPosDisplay = document.getElementById('joint_pos_display');
+                        if (jointPosDisplay) {
+                            jointPosDisplay.innerText = jp.map(j => j.toFixed(2)).join(', ');
+                        }
+                        // Update jog button displays with actual joint positions
+                        for (let i = 0; i < 6; i++) {
+                            const el = document.getElementById('joint_' + i + '_val');
+                            if (el) {
+                                el.innerText = jp[i].toFixed(2);
+                            }
+                        }
+                        // Debug: log first joint update
+                        if (!window.debugJointLogCount)
+                            window.debugJointLogCount = 0;
+                        if (window.debugJointLogCount < 2) {
+                            console.log('Joint positions update:', jp.map(j => j.toFixed(2)));
+                            console.log('Joint 0 element found:', !!document.getElementById('joint_0_val'));
+                            window.debugJointLogCount++;
+                        }
+                    }
+                    // Update cartesian position displays with actual EE position
+                    if (obs.end_effector) {
+                        const ee = obs.end_effector;
+                        const posXEl = document.getElementById('pos_x_val');
+                        const posYEl = document.getElementById('pos_y_val');
+                        const posZEl = document.getElementById('pos_z_val');
+                        if (posXEl)
+                            posXEl.innerText = ee.x.toFixed(3);
+                        if (posYEl)
+                            posYEl.innerText = ee.y.toFixed(3);
+                        if (posZEl)
+                            posZEl.innerText = ee.z.toFixed(3);
+                        // Debug: log first few updates
+                        if (!window.debugLogCount)
+                            window.debugLogCount = 0;
+                        if (window.debugLogCount < 3) {
+                            console.log('EE Position update:', ee.x.toFixed(3), ee.y.toFixed(3), ee.z.toFixed(3));
+                            console.log('Elements found:', !!posXEl, !!posYEl, !!posZEl);
+                            window.debugLogCount++;
+                        }
+                    }
+                    // Update rotation displays with actual EE orientation
+                    if (obs.ee_orientation) {
+                        const q = obs.ee_orientation;
+                        const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                        document.getElementById('rot_x_val').innerText = euler[0].toFixed(2);
+                        document.getElementById('rot_y_val').innerText = euler[1].toFixed(2);
+                        document.getElementById('rot_z_val').innerText = euler[2].toFixed(2);
+                    }
+                    // Update control mode display
+                    if (data.envData.control_mode) {
+                        document.getElementById('envData.control_mode_display').innerText =
+                            data.envData.control_mode === 'ik' ? 'IK' : 'Joint';
+                        // Sync UI if mode changed externally
+                        if (currentControlMode !== data.envData.control_mode) {
+                            setControlMode(data.envData.control_mode);
+                        }
+                    }
+                    // Update Nova API controller status
+                    if (data.nova_api) {
+                        const stateController = document.getElementById('nova_state_controller');
+                        const ikController = document.getElementById('nova_ik_controller');
+                        const badge = document.getElementById('nova_connection_badge');
+                        const badgeTitle = document.getElementById('nova_badge_title');
+                        const modeText = document.getElementById('nova_mode_text');
+                        setNovaToggleState(data.nova_api.available, data.nova_api.enabled);
+                        // Track Nova state streaming status
+                        novaStateStreaming = data.nova_api.state_streaming || false;
+                        if (data.nova_api.available) {
+                            badge.style.display = 'block';
+                        }
+                        else {
+                            badge.style.display = 'none';
+                        }
+                        badge.classList.toggle('connected', data.nova_api.enabled);
+                        badge.classList.toggle('disconnected', !data.nova_api.enabled);
+                        const connectedColor = data.nova_api.connected ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                        if (stateController) {
+                            stateController.innerText = data.nova_api.state_streaming ? 'Nova API' : 'Internal';
+                            stateController.style.color = connectedColor;
+                        }
+                        if (ikController) {
+                            ikController.innerText = data.nova_api.ik ? 'Nova API' : 'Internal';
+                            ikController.style.color = data.nova_api.ik ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                        }
+                        if (badgeTitle) {
+                            if (data.nova_api.enabled) {
+                                badgeTitle.innerText = data.nova_api.connected ? '🌐 Nova Connected' : '🌐 Nova Powering Up';
+                            }
+                            else {
+                                badgeTitle.innerText = '🌐 Nova Disabled';
+                            }
+                        }
+                        if (modeText) {
+                            if (data.nova_api.connected) {
+                                if (data.nova_api.state_streaming && data.nova_api.ik) {
+                                    modeText.innerText = 'Hybrid Mode';
+                                }
+                                else if (data.nova_api.state_streaming) {
+                                    modeText.innerText = 'Digital Twin Mode';
+                                }
+                                else if (data.nova_api.ik) {
+                                    modeText.innerText = 'Nova IK Mode';
+                                }
+                            }
+                            else if (data.nova_api.enabled) {
+                                modeText.innerText = 'Awaiting connection';
+                            }
+                            else {
+                                modeText.innerText = 'Internal control';
+                            }
+                        }
+                    }
+                    // Update teleop command display - only show non-zero values
+                    const armTeleop = data.teleop_action;
+                    const armTeleopDisplayEl = document.getElementById('arm_teleop_display');
+                    if (armTeleop && armTeleopDisplayEl) {
+                        const parts = [];
+                        // Check all possible teleop fields
+                        const fields = {
+                            'vx': armTeleop.vx,
+                            'vy': armTeleop.vy,
+                            'vz': armTeleop.vz,
+                            'vyaw': armTeleop.vyaw,
+                            'vrx': armTeleop.vrx,
+                            'vry': armTeleop.vry,
+                            'vrz': armTeleop.vrz,
+                            'j1': armTeleop.j1,
+                            'j2': armTeleop.j2,
+                            'j3': armTeleop.j3,
+                            'j4': armTeleop.j4,
+                            'j5': armTeleop.j5,
+                            'j6': armTeleop.j6,
+                            'g': armTeleop.gripper
+                        };
+                        for (const [key, value] of Object.entries(fields)) {
+                            const numVal = Number(value ?? 0);
+                            if (numVal !== 0) {
+                                if (key === 'g') {
+                                    parts.push(`${key}=${numVal.toFixed(0)}`);
+                                }
+                                else {
+                                    parts.push(`${key}=${numVal.toFixed(2)}`);
+                                }
+                            }
+                        }
+                        armTeleopDisplayEl.innerText = parts.length > 0 ? parts.join(', ') : '-';
+                    }
+                }
+                else {
+                    // Locomotion state
+                    const locoObs = data.observation || {};
+                    // Update position display
+                    const locoPos = document.getElementById('loco_pos');
+                    if (locoObs.position) {
+                        const p = locoObs.position;
+                        locoPos.innerText = `${p.x.toFixed(2)}, ${p.y.toFixed(2)}, ${p.z.toFixed(2)}`;
+                    }
+                    // Update orientation display (convert quaternion to euler)
+                    const locoOri = document.getElementById('loco_ori');
+                    if (locoObs.orientation) {
+                        const q = locoObs.orientation;
+                        const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                        locoOri.innerText = `${euler[0].toFixed(2)}, ${euler[1].toFixed(2)}, ${euler[2].toFixed(2)}`;
+                    }
+                    // Update teleop command display - only show non-zero values
+                    const locoTeleop = data.teleop_action || {};
+                    const locoTeleopDisplayEl = document.getElementById('loco_teleop_display');
+                    if (locoTeleopDisplayEl) {
+                        const parts = [];
+                        const fields = {
+                            'vx': locoTeleop.vx,
+                            'vy': locoTeleop.vy,
+                            'vyaw': locoTeleop.vyaw
+                        };
+                        for (const [key, value] of Object.entries(fields)) {
+                            const numVal = Number(value ?? 0);
+                            if (numVal !== 0) {
+                                parts.push(`${key}=${numVal.toFixed(2)}`);
+                            }
+                        }
+                        locoTeleopDisplayEl.innerText = parts.length > 0 ? parts.join(', ') : '-';
+                    }
+                    stepVal.innerText = data.steps;
+                }
+            }
+            else if (msg.type === 'trainer_status') {
+                const payload = msg.data || {};
+                if (typeof payload.connected === 'boolean') {
+                    updateTrainerStatus(payload.connected);
+                }
+            }
+            else if (msg.type === 'trainer_notification') {
+                showTrainerNotification(msg.data);
+            }
+        }
+        catch (e) {
+            console.error('Error parsing message:', e);
+        }
+    };
+}
+function send(type, data = {}) {
+    if (ws && ws.readyState === WebSocket.OPEN) {
+        const msg = { type, data };
+        console.log('Sending WebSocket message:', msg);
+        ws.send(JSON.stringify(msg));
+    }
+    else {
+        console.warn('Cannot send message, WebSocket not ready:', {
+            type,
+            hasWs: !!ws,
+            wsState: ws ? ws.readyState : 'no ws'
+        });
+    }
+}
+function requestEpisodeControl(action) {
+    if (!action) {
+        return;
+    }
+    send('episode_control', { action });
+    if (teleopStatus) {
+        teleopStatus.innerText = `UI requested episode ${action}`;
+    }
+}
+function showTrainerNotification(payload) {
+    if (!notificationList || !payload) {
+        return;
+    }
+    const entry = document.createElement('div');
+    entry.className = 'notification';
+    entry.style.opacity = '0.9';
+    const when = payload.timestamp ? new Date(payload.timestamp * 1000).toLocaleTimeString() : new Date().toLocaleTimeString();
+    const status = payload.status ? payload.status.toUpperCase() : 'INFO';
+    const message = payload.message || payload.text || payload.detail || 'Notification';
+    entry.textContent = `[${when}] ${status}: ${message}`;
+    notificationList.insertBefore(entry, notificationList.firstChild);
+    setTimeout(() => {
+        if (entry.parentNode) {
+            entry.parentNode.removeChild(entry);
+        }
+    }, NOTIFICATION_DURATION_MS);
+    while (notificationList.childElementCount > 5) {
+        notificationList.removeChild(notificationList.lastChild);
+    }
+}
+// Convert quaternion to euler angles (XYZ convention)
+function quatToEuler(w, x, y, z) {
+    // Roll (x-axis rotation)
+    const sinr_cosp = 2 * (w * x + y * z);
+    const cosr_cosp = 1 - 2 * (x * x + y * y);
+    const roll = Math.atan2(sinr_cosp, cosr_cosp);
+    // Pitch (y-axis rotation)
+    const sinp = 2 * (w * y - z * x);
+    let pitch;
+    if (Math.abs(sinp) >= 1) {
+        pitch = Math.sign(sinp) * Math.PI / 2;
+    }
+    else {
+        pitch = Math.asin(sinp);
+    }
+    // Yaw (z-axis rotation)
+    const siny_cosp = 2 * (w * z + x * y);
+    const cosy_cosp = 1 - 2 * (y * y + z * z);
+    const yaw = Math.atan2(siny_cosp, cosy_cosp);
+    return [roll, pitch, yaw];
+}
+function updateHintBox(robotType) {
+    const hintBox = document.getElementById('hint_box');
+    if (!hintBox)
+        return;
+    if (robotType === 'arm') {
+        hintBox.innerHTML = `
+                Drag: Rotate Camera<br>
+                Scroll: Zoom<br>
+                <strong>Keyboard:</strong><br>
+                W/A/S/D: XY jog<br>
+                R/F: Z nudge<br>
+                Enter: Move to Home
+            `;
+    }
+    else {
+        hintBox.innerHTML = `
+                Drag: Rotate Camera<br>
+                Scroll: Zoom<br>
+                <strong>Keyboard:</strong><br>
+                W/S: Forward/Back<br>
+                A/D: Turn<br>
+                Q/E: Strafe
+            `;
+    }
+}
+function updateRobotUI(robot, scene = null) {
+    currentRobot = robot;
+    currentScene = scene;
+    robotTitle.innerText = robotTitles[robot] || robot;
+    robotInfo.innerText = robotInfoText[robot] || '';
+    if (sceneLabel) {
+        sceneLabel.innerText = humanizeScene(scene);
+    }
+    // Toggle controls based on robot type
+    if (robot === 'ur5' || robot === 'ur5_t_push') {
+        locomotionControls.classList.add('hidden');
+        armControls.classList.add('active');
+        document.getElementById('locomotion_state').style.display = 'none';
+        document.getElementById('arm_state').style.display = 'block';
+        document.getElementById('arm_hints').style.display = 'block';
+        document.getElementById('loco_hints').style.display = 'none';
+        // Update hint box for ARM robots
+        updateHintBox('arm');
+        // Load env data and show home button only if home_pose is available
+        loadEnvData().then(() => {
+            setupOverlayTiles();
+            // Show home button only if home_pose was loaded
+            const homeBtn = document.getElementById('homeBtn');
+            if (homeBtn) {
+                if (currentHomePose && currentHomePose.length > 0) {
+                    homeBtn.style.display = 'block';
+                }
+                else {
+                    homeBtn.style.display = 'none';
+                    console.warn('Home button hidden: no home_pose available');
+                }
+            }
+        });
+    }
+    else {
+        locomotionControls.classList.remove('hidden');
+        armControls.classList.remove('active');
+        document.getElementById('locomotion_state').style.display = 'block';
+        document.getElementById('arm_state').style.display = 'none';
+        document.getElementById('arm_hints').style.display = 'none';
+        document.getElementById('loco_hints').style.display = 'block';
+        // Hide home button for non-UR5 robots
+        const homeBtn = document.getElementById('homeBtn');
+        if (homeBtn)
+            homeBtn.style.display = 'none';
+        // Update hint box for locomotion robots
+        updateHintBox('locomotion');
+    }
+    maybeAutoEnableNova();
+}
+let panelCollapsed = false;
+function togglePanel() {
+    panelCollapsed = !panelCollapsed;
+    const content = document.getElementById('panel_content');
+    const header = document.getElementById('panel_header');
+    const panel = document.getElementById('control_panel');
+    if (panelCollapsed) {
+        content.classList.add('collapsed');
+        panel.classList.add('collapsed');
+        header.classList.add('collapsed');
+    }
+    else {
+        content.classList.remove('collapsed');
+        panel.classList.remove('collapsed');
+        header.classList.remove('collapsed');
+    }
+}
+function switchRobot() {
+    const selectionValue = robotSelect.value;
+    if (!selectionValue) {
+        return;
+    }
+    const parsed = parseSelection(selectionValue);
+    pendingRobotSelection = {
+        value: selectionValue,
+        robot: parsed.robot,
+        scene: parsed.scene
+    };
+    send('switch_robot', { robot: parsed.robot, scene: parsed.scene });
+    updateRobotUI(parsed.robot, parsed.scene);
+}
+const viewport = document.getElementById('viewport');
+const stepVal = document.getElementById('step_val');
+const camDist = document.getElementById('cam_dist');
+const camDistVal = document.getElementById('cam_dist_val');
+const armTeleopVx = document.getElementById('arm_teleop_vx');
+const armTeleopVy = document.getElementById('arm_teleop_vy');
+const armTeleopVz = document.getElementById('arm_teleop_vz');
+let keysPressed = new Set();
+function resetEnv() {
+    send('reset');
+}
+// Homing functionality for UR5
+let homingInterval = null;
+let homingJoints = []; // Joints being homed
+function startHoming() {
+    console.log('startHoming called:', {
+        currentRobot,
+        hasHomePose: !!currentHomePose,
+        novaStateStreaming,
+        wsState: ws ? ws.readyState : 'no ws'
+    });
+    if (currentRobot !== 'ur5' && currentRobot !== 'ur5_t_push') {
+        console.log('Not a UR5 robot, skipping homing');
+        return;
+    }
+    // Check if we have necessary data
+    if (!currentHomePose) {
+        console.warn('Cannot home: home_pose not available');
+        return;
+    }
+    if (novaStateStreaming) {
+        // Nova mode: use joint jogging to move to home
+        console.log('Starting Nova jogging homing...');
+        startNovaJoggingHome();
+    }
+    else {
+        // Local mode: send home messages continuously while button is pressed
+        console.log('Starting local homing...');
+        send('home');
+        // Send home message every 100ms while button is pressed
+        if (homingInterval)
+            clearInterval(homingInterval);
+        homingInterval = setInterval(() => {
+            send('home');
+        }, 100);
+    }
+}
+function stopHoming() {
+    if (novaStateStreaming) {
+        // Stop all jogging
+        for (const joint of homingJoints) {
+            send('stop_jog');
+        }
+        homingJoints = [];
+        if (homingInterval) {
+            clearInterval(homingInterval);
+            homingInterval = null;
+        }
+    }
+    else {
+        // Stop the home message interval
+        if (homingInterval) {
+            clearInterval(homingInterval);
+            homingInterval = null;
+        }
+        // Send stop_home message to backend
+        send('stop_home');
+        console.log('Sent stop_home message');
+    }
+}
+function startNovaJoggingHome() {
+    if (!currentHomePose || !currentJointPositions) {
+        console.warn('Cannot jog home: missing home_pose or joint_positions');
+        return;
+    }
+    const tolerance = 0.01; // 0.01 rad ~= 0.57 degrees
+    // Check each joint and start jogging for those not at home
+    homingJoints = [];
+    for (let i = 0; i < Math.min(currentHomePose.length, currentJointPositions.length); i++) {
+        const target = currentHomePose[i];
+        const current = currentJointPositions[i];
+        const error = target - current;
+        if (Math.abs(error) > tolerance) {
+            const joint = i + 1; // Nova uses 1-based indexing
+            const direction = error > 0 ? '+' : '-';
+            const velocity = 0.5; // rad/s
+            console.log(`Jogging joint ${joint} ${direction} (error: ${error.toFixed(3)} rad)`);
+            send('start_jog', {
+                jog_type: 'joint',
+                params: {
+                    joint: joint,
+                    direction: direction,
+                    velocity: velocity
+                }
+            });
+            homingJoints.push(joint);
+        }
+    }
+    if (homingJoints.length === 0) {
+        console.log('Already at home position');
+        return;
+    }
+    // Monitor progress and stop when home is reached
+    if (homingInterval)
+        clearInterval(homingInterval);
+    homingInterval = setInterval(() => {
+        if (!currentHomePose || !currentJointPositions) {
+            stopHoming();
+            return;
+        }
+        // Check if we're at home
+        let allAtHome = true;
+        for (let i = 0; i < Math.min(currentHomePose.length, currentJointPositions.length); i++) {
+            const target = currentHomePose[i];
+            const current = currentJointPositions[i];
+            const error = Math.abs(target - current);
+            if (error > tolerance) {
+                allAtHome = false;
+                break;
+            }
+        }
+        if (allAtHome) {
+            console.log('Home position reached');
+            stopHoming();
+        }
+    }, 100); // Check every 100ms
+}
+function setCmd(vx, vy, vyaw) {
+    send('command', { vx, vy, vyaw });
+}
+function setCameraFollow() {
+    const follow = document.getElementById('cam_follow').checked;
+    send('camera_follow', { follow });
+}
+// UR5 controls
+let currentControlMode = 'ik';
+function setControlMode(mode) {
+    currentControlMode = mode;
+    send('envData.control_mode', { mode });
+    // Update UI
+    document.getElementById('mode_ik').classList.toggle('active', mode === 'ik');
+    document.getElementById('mode_joint').classList.toggle('active', mode === 'joint');
+    document.getElementById('ik_controls').classList.toggle('active', mode === 'ik');
+    document.getElementById('joint_controls').classList.toggle('active', mode === 'joint');
+}
+// Jogging velocities
+let transVelocity = 50.0; // mm/s
+let rotVelocity = 0.3; // rad/s
+let jointVelocity = 0.5; // rad/s
+function updateTransVelocity() {
+    transVelocity = parseFloat(document.getElementById('trans_velocity').value);
+    document.getElementById('trans_vel_val').innerText = transVelocity.toFixed(0);
+    teleopTranslationStep = transVelocity / 1000;
+}
+function updateRotVelocity() {
+    rotVelocity = parseFloat(document.getElementById('rot_velocity').value);
+    document.getElementById('rot_vel_val').innerText = rotVelocity.toFixed(1);
+}
+function updateJointVelocity() {
+    jointVelocity = parseFloat(document.getElementById('joint_velocity').value);
+    document.getElementById('joint_vel_val').innerText = jointVelocity.toFixed(1);
+}
+function startJog(jogType, axisOrJoint, direction) {
+    if (jogType === 'cartesian_translation') {
+        send('start_jog', {
+            jog_type: 'cartesian_translation',
+            params: {
+                axis: axisOrJoint,
+                direction: direction,
+                velocity: transVelocity,
+                tcp_id: 'Flange',
+                coord_system_id: 'world'
+            }
+        });
+    }
+    else if (jogType === 'cartesian_rotation') {
+        send('start_jog', {
+            jog_type: 'cartesian_rotation',
+            params: {
+                axis: axisOrJoint,
+                direction: direction,
+                velocity: rotVelocity,
+                tcp_id: 'Flange',
+                coord_system_id: 'world'
+            }
+        });
+    }
+    else if (jogType === 'joint') {
+        // Nova jogger uses 1-based joint indexing
+        send('start_jog', {
+            jog_type: 'joint',
+            params: {
+                joint: axisOrJoint, // 1-6
+                direction: direction,
+                velocity: jointVelocity
+            }
+        });
+    }
+}
+function stopJog() {
+    send('stop_jog', {});
+}
+function setGripper(action) {
+    send('gripper', { action });
+}
+function updateCmdFromKeys() {
+    let vx = 0, vy = 0, vyaw = 0;
+    if (keysPressed.has('KeyW') || keysPressed.has('ArrowUp'))
+        vx = 0.8;
+    if (keysPressed.has('KeyS') || keysPressed.has('ArrowDown'))
+        vx = -0.5;
+    if (keysPressed.has('KeyA'))
+        vyaw = 1.2;
+    if (keysPressed.has('KeyD'))
+        vyaw = -1.2;
+    if (keysPressed.has('KeyQ'))
+        vy = 0.4;
+    if (keysPressed.has('KeyE'))
+        vy = -0.4;
+    if (keysPressed.has('ArrowLeft'))
+        vyaw = 1.2;
+    if (keysPressed.has('ArrowRight'))
+        vyaw = -1.2;
+    setCmd(vx, vy, vyaw);
+}
+function getActiveSelection() {
+    return parseSelection(robotSelect.value);
+}
+function isArmRobot() {
+    const active = getActiveSelection();
+    return armRobotTypes.has(active.robot);
+}
+function shouldCaptureKey(code) {
+    const active = getActiveSelection();
+    return armRobotTypes.has(active.robot) ? armTeleopKeys.has(code) : locomotionKeys.has(code);
+}
+function hasActiveTeleopKeys() {
+    const keySet = isArmRobot() ? armTeleopKeys : locomotionKeys;
+    for (const key of keySet) {
+        if (keysPressed.has(key)) {
+            return true;
+        }
+    }
+    return false;
+}
+function startTeleopRepeat() {
+    if (teleopRepeatTimer) {
+        return;
+    }
+    teleopRepeatTimer = setInterval(() => updateArmTeleopFromKeys(true), TELEOP_REPEAT_INTERVAL_MS);
+}
+function stopTeleopRepeat() {
+    if (!teleopRepeatTimer) {
+        return;
+    }
+    clearInterval(teleopRepeatTimer);
+    teleopRepeatTimer = null;
+}
+function updateArmTeleopFromKeys(force = false) {
+    let dx = 0, dy = 0, dz = 0;
+    if (keysPressed.has('KeyW'))
+        dx += teleopTranslationStep;
+    if (keysPressed.has('KeyS'))
+        dx -= teleopTranslationStep;
+    if (keysPressed.has('KeyA'))
+        dy += teleopTranslationStep;
+    if (keysPressed.has('KeyD'))
+        dy -= teleopTranslationStep;
+    if (keysPressed.has('KeyR'))
+        dz += teleopVerticalStep;
+    if (keysPressed.has('KeyF'))
+        dz -= teleopVerticalStep;
+    const unchanged = Math.abs(dx - lastTeleopCommand.dx) < 1e-6 &&
+        Math.abs(dy - lastTeleopCommand.dy) < 1e-6 &&
+        Math.abs(dz - lastTeleopCommand.dz) < 1e-6;
+    if (unchanged && !force) {
+        return;
+    }
+    lastTeleopCommand = { dx, dy, dz };
+    send('teleop_action', { dx, dy, dz });
+    if (teleopStatus) {
+        teleopStatus.innerText = `UI teleop → dx: ${dx.toFixed(3)} m, dy: ${dy.toFixed(3)} m, dz: ${dz.toFixed(3)} m`;
+    }
+}
+function startArmJogForKey(code) {
+    const entry = armJogKeyMap[code];
+    if (!entry) {
+        return;
+    }
+    startJog(entry.jogType, entry.axis, entry.direction);
+    if (teleopStatus) {
+        teleopStatus.innerText = `Nova jog → ${entry.axis.toUpperCase()} ${entry.direction}`;
+    }
+}
+function handleArmKeyDown(code) {
+    startArmJogForKey(code);
+}
+function handleArmKeyUp(code) {
+    if (!armJogKeyMap[code]) {
+        return;
+    }
+    stopJog();
+    const remaining = [...keysPressed].filter((key) => armJogKeyMap[key]);
+    if (remaining.length > 0) {
+        startArmJogForKey(remaining[remaining.length - 1]);
+    }
+    else if (teleopStatus) {
+        teleopStatus.innerText = 'UI teleop idle';
+    }
+}
+function handleKeyStateChange() {
+    if (isArmRobot()) {
+        return;
+    }
+    const active = hasActiveTeleopKeys();
+    if (active) {
+        startTeleopRepeat();
+    }
+    else {
+        stopTeleopRepeat();
+    }
+    updateCmdFromKeys();
+    if (teleopStatus && !active) {
+        teleopStatus.innerText = 'UI teleop idle';
+    }
+}
+window.addEventListener('keydown', (e) => {
+    if (e.code === 'Enter') {
+        console.log('ENTER KEY PRESSED', { isArm: isArmRobot() });
+        e.preventDefault();
+        // For ARM robots, trigger homing; for locomotion robots, terminate episode
+        if (isArmRobot()) {
+            console.log('Calling startHoming from Enter key');
+            startHoming();
+        }
+        else {
+            requestEpisodeControl('terminate');
+        }
+        return;
+    }
+    if (shouldCaptureKey(e.code)) {
+        e.preventDefault();
+        const alreadyPressed = keysPressed.has(e.code);
+        keysPressed.add(e.code);
+        if (isArmRobot()) {
+            if (!alreadyPressed) {
+                handleArmKeyDown(e.code);
+            }
+        }
+        else {
+            handleKeyStateChange();
+        }
+    }
+});
+window.addEventListener('keyup', (e) => {
+    if (e.code === 'Enter') {
+        // For ARM robots, stop homing on Enter key release
+        if (isArmRobot()) {
+            stopHoming();
+        }
+        return;
+    }
+    if (keysPressed.delete(e.code)) {
+        if (isArmRobot()) {
+            handleArmKeyUp(e.code);
+        }
+        else {
+            handleKeyStateChange();
+        }
+    }
+});
+camDist.oninput = () => {
+    camDistVal.innerText = parseFloat(camDist.value).toFixed(1);
+    send('camera', { action: 'set_distance', distance: parseFloat(camDist.value) });
+};
+let isDragging = false;
+let lastX, lastY;
+viewport.oncontextmenu = (e) => e.preventDefault();
+// Mouse controls
+viewport.onmousedown = (e) => {
+    isDragging = true;
+    lastX = e.clientX;
+    lastY = e.clientY;
+};
+window.addEventListener('mouseup', () => {
+    isDragging = false;
+});
+window.onmousemove = (e) => {
+    if (isDragging) {
+        const dx = e.clientX - lastX;
+        const dy = e.clientY - lastY;
+        lastX = e.clientX;
+        lastY = e.clientY;
+        send('camera', { action: 'rotate', dx, dy });
+    }
+};
+viewport.onwheel = (e) => {
+    e.preventDefault();
+    send('camera', { action: 'zoom', dz: e.deltaY });
+};
+// Touch controls for camera rotation and pinch-to-zoom
+let touchStartX, touchStartY;
+let lastPinchDist = null;
+function getTouchDistance(touches) {
+    const dx = touches[0].clientX - touches[1].clientX;
+    const dy = touches[0].clientY - touches[1].clientY;
+    return Math.sqrt(dx * dx + dy * dy);
+}
+viewport.addEventListener('touchstart', (e) => {
+    if (e.touches.length === 1) {
+        // Single touch - rotation
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+        lastPinchDist = null;
+    }
+    else if (e.touches.length === 2) {
+        // Two touches - pinch zoom
+        lastPinchDist = getTouchDistance(e.touches);
+    }
+}, { passive: true });
+viewport.addEventListener('touchmove', (e) => {
+    e.preventDefault();
+    if (e.touches.length === 1 && lastPinchDist === null) {
+        // Single touch drag - rotate camera
+        const dx = e.touches[0].clientX - touchStartX;
+        const dy = e.touches[0].clientY - touchStartY;
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+        send('camera', { action: 'rotate', dx, dy });
+    }
+    else if (e.touches.length === 2 && lastPinchDist !== null) {
+        // Pinch zoom
+        const dist = getTouchDistance(e.touches);
+        const delta = lastPinchDist - dist;
+        lastPinchDist = dist;
+        // Scale delta for smoother zoom
+        send('camera', { action: 'zoom', dz: delta * 3 });
+    }
+}, { passive: false });
+viewport.addEventListener('touchend', (e) => {
+    if (e.touches.length < 2) {
+        lastPinchDist = null;
+    }
+    if (e.touches.length === 1) {
+        // Reset for single finger after pinch
+        touchStartX = e.touches[0].clientX;
+        touchStartY = e.touches[0].clientY;
+    }
+}, { passive: true });
+// Connect on load
+enterConnectingState();
+connect();
+export {};

frontend/src/main.ts

@@ -0,0 +1,1533 @@
+import { NovaSimClient } from './api/client';
+import type { StateData, RobotType } from './types/protocol';
+import { isUR5Observation, isArmRobot } from './types/protocol';
+
+
+// Type augmentation for window object
+declare global {
+  interface Window {
+    debugJointLogCount?: number;
+    debugLogCount?: number;
+  }
+}
+
+
+const API_PREFIX = '/nova-sim/api/v1';
+
+
+        const WS_URL = (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
+                   window.location.host + API_PREFIX + '/ws';
+
+    let ws = null;
+    let reconnectTimer = null;
+    const connStatus = document.getElementById('conn_status');
+    const connStatusText = document.getElementById('conn_status_text');
+    const robotSelect = document.getElementById('robot_select') as HTMLSelectElement;
+    const sceneLabel = document.getElementById('scene_label');
+    const overlayTiles = document.getElementById('overlay_tiles');
+    const trainerStatusCard = document.getElementById('trainer_status_card');
+    const trainerStatusIndicator = document.getElementById('trainer_status_indicator');
+    const trainerStatusText = document.getElementById('trainer_status_text');
+    const viewportImage = document.querySelector('.video-container img');
+    const robotTitle = document.getElementById('robot_title');
+    const robotInfo = document.getElementById('robot_info');
+    const metadataUrl = API_PREFIX + '/metadata';
+    const envUrl = API_PREFIX + '/env';
+    let metadataCache = null;
+    let envCache = null;
+    let pendingRobotSelection = null;
+    let currentRobot = null;
+    let currentScene = null;
+    let novaStateStreaming = false;  // Track if Nova state streaming is active
+    let currentHomePose = null;  // Store home pose from env data
+    let currentJointPositions = null;  // Store latest joint positions from state stream
+    function updateConnectionLabel(text) {
+        if (connStatusText) {
+            connStatusText.innerText = text;
+        }
+    }
+
+    function enterConnectingState() {
+        updateConnectionLabel('Connecting...');
+        if (connStatus) {
+            connStatus.classList.add('connecting');
+            connStatus.classList.remove('disconnected');
+        }
+    }
+
+    function markConnectedState() {
+        updateConnectionLabel('Connected');
+        if (connStatus) {
+            connStatus.classList.remove('connecting', 'disconnected');
+        }
+    }
+
+    function refreshVideoStreams() {
+        const timestamp = Date.now();
+        if (viewportImage) {
+            viewportImage.src = `${API_PREFIX}/video_feed?ts=${timestamp}`;
+        }
+        if (overlayTiles) {
+            overlayTiles.querySelectorAll('img[data-feed]').forEach((img) => {
+                const feedName = img.dataset.feed || 'main';
+                img.src = `${API_PREFIX}/camera/${feedName}/video_feed?ts=${timestamp}`;
+            });
+        }
+    }
+    const novaToggleButton = document.getElementById('nova_toggle_button');
+    let novaEnabledState = false;
+    let novaManualToggle = false;
+    let novaAutoEnableRequested = false;
+    let novaPreconfigured = false;
+    function setNovaToggleState(available, enabled) {
+        if (!novaToggleButton) {
+            return;
+        }
+        novaEnabledState = !!enabled;
+        if (novaEnabledState) {
+            novaAutoEnableRequested = false;
+        }
+        if (!available) {
+            novaAutoEnableRequested = false;
+        }
+        novaToggleButton.style.display = available ? 'inline-flex' : 'none';
+        novaToggleButton.disabled = !available;
+        novaToggleButton.innerText = novaEnabledState ? 'Turn Nova Off' : 'Turn Nova On';
+    }
+    if (novaToggleButton) {
+        novaToggleButton.addEventListener('click', () => {
+            novaManualToggle = true;
+            send('set_nova_mode', {enabled: !novaEnabledState});
+        });
+    }
+    const NOVA_TRANSLATION_VELOCITY = 50.0;
+    const NOVA_ROTATION_VELOCITY = 0.3;
+    const NOVA_JOINT_VELOCITY = 0.5;
+    let novaVelocitiesConfigured = false;
+
+    function updateTrainerStatus(connected) {
+        if (!trainerStatusCard || !trainerStatusText) {
+            return;
+        }
+        trainerStatusText.innerText = connected ? 'Trainer: Connected' : 'Trainer: Disconnected';
+        trainerStatusCard.classList.toggle('connected', connected);
+        trainerStatusCard.classList.toggle('disconnected', !connected);
+        if (trainerStatusIndicator) {
+            trainerStatusIndicator.classList.toggle('connected', connected);
+            trainerStatusIndicator.classList.toggle('disconnected', !connected);
+        }
+        if (connected) {
+            configureNovaVelocities();
+        }
+    }
+
+    function configureNovaVelocities() {
+        if (novaVelocitiesConfigured) {
+            return;
+        }
+        const transSlider = document.getElementById('trans_velocity');
+        const rotSlider = document.getElementById('rot_velocity');
+        const jointSlider = document.getElementById('joint_velocity');
+
+        if (transSlider) {
+            transSlider.value = NOVA_TRANSLATION_VELOCITY;
+            updateTransVelocity();
+        }
+        if (rotSlider) {
+            rotSlider.value = NOVA_ROTATION_VELOCITY;
+            updateRotVelocity();
+        }
+        if (jointSlider) {
+            jointSlider.value = NOVA_JOINT_VELOCITY;
+            updateJointVelocity();
+        }
+        novaVelocitiesConfigured = true;
+    }
+    function refreshOverlayTiles() {
+        if (!metadataCache) {
+            return;
+        }
+        setupOverlayTiles();
+    }
+
+    const robotInfoText = {
+        'g1': '29 DOF humanoid with RL walking policy',
+        'spot': '12 DOF quadruped with trot gait controller',
+        'ur5': '6 DOF robot arm with Robotiq gripper',
+        'ur5_t_push': 'UR5e T-push task with stick tool'
+    };
+
+    const robotTitles = {
+        'g1': 'Unitree G1 Humanoid',
+        'spot': 'Boston Dynamics Spot',
+        'ur5': 'Universal Robots UR5e',
+        'ur5_t_push': 'UR5e T-Push Scene'
+    };
+
+    const locomotionControls = document.getElementById('locomotion_controls');
+    const armControls = document.getElementById('arm_controls');
+    const notificationList = document.getElementById('rl_notifications_list');
+    const armRobotTypes = new Set(['ur5', 'ur5_t_push']);
+    const armTeleopKeys = new Set(['KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyR', 'KeyF']);
+    const locomotionKeys = new Set([
+        'KeyW', 'KeyA', 'KeyS', 'KeyD', 'KeyQ', 'KeyE',
+        'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'
+    ]);
+    function maybeAutoEnableNova() {
+        if (!novaPreconfigured || novaManualToggle) {
+            return;
+        }
+        const activeSelection = getActiveSelection();
+        if (!armRobotTypes.has(activeSelection.robot)) {
+            return;
+        }
+        if (novaEnabledState) {
+            novaAutoEnableRequested = false;
+            return;
+        }
+        if (novaAutoEnableRequested) {
+            return;
+        }
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            send('set_nova_mode', {enabled: true});
+            novaAutoEnableRequested = true;
+        }
+    }
+    let teleopTranslationStep = 0.005; // meters per keyboard nudge
+    let teleopVerticalStep = 0.01;
+    const TELEOP_REPEAT_INTERVAL_MS = 80;
+    const NOTIFICATION_DURATION_MS = 5000;
+    let teleopRepeatTimer = null;
+    let lastTeleopCommand = {dx: 0, dy: 0, dz: 0};
+    const armJogKeyMap = {
+        KeyW: { jogType: 'cartesian_translation', axis: 'x', direction: '+' },
+        KeyS: { jogType: 'cartesian_translation', axis: 'x', direction: '-' },
+        KeyA: { jogType: 'cartesian_translation', axis: 'y', direction: '+' },
+        KeyD: { jogType: 'cartesian_translation', axis: 'y', direction: '-' },
+        KeyR: { jogType: 'cartesian_translation', axis: 'z', direction: '+' },
+        KeyF: { jogType: 'cartesian_translation', axis: 'z', direction: '-' },
+    };
+
+    function humanizeScene(scene) {
+        if (!scene) {
+            return 'Default';
+        }
+        const cleaned = scene.replace(/^scene_/, '').replace(/_/g, ' ');
+        return cleaned.replace(/\\b\\w/g, (char) => char.toUpperCase());
+    }
+
+    function buildSelectionValue(robot, scene) {
+        return scene ? `${robot}::${scene}` : robot;
+    }
+
+    function parseSelection(value) {
+        if (!value) {
+            return {robot: 'g1', scene: null};
+        }
+        const [robotPart, scenePart] = value.split('::');
+        return {robot: robotPart, scene: scenePart || null};
+    }
+
+    function createRobotSceneOption(robot, scene, label) {
+        const option = document.createElement("option");
+        option.value = buildSelectionValue(robot, scene);
+        const sceneText = scene ? ` · ${humanizeScene(scene)}` : '';
+        option.textContent = `${label || robot}${sceneText}`;
+        return option;
+    }
+
+    function getDefaultSelection(metadata) {
+        if (!metadata) {
+            return '';
+        }
+        const robots = Object.keys(metadata.robots);
+        if (!robots.length) {
+            return '';
+        }
+        const preferred = metadata.robots['ur5_t_push'] ? 'ur5_t_push' : robots[0];
+        const preferredRobot = metadata.robots[preferred];
+        const preferredScenes = preferredRobot && preferredRobot.scenes;
+        const defaultScene = (metadata.default_scene && metadata.default_scene[preferred])
+            || (preferredScenes && preferredScenes[0]) || '';
+        return buildSelectionValue(preferred, defaultScene);
+    }
+
+    function populateRobotOptions(metadata) {
+        if (!metadata || !metadata.robots) {
+            console.warn('populateRobotOptions: no metadata or robots', metadata);
+            return null;
+        }
+        if (!robotSelect) {
+            console.error('populateRobotOptions: robotSelect element not found');
+            return null;
+        }
+
+        console.log('Populating robot options...', metadata);
+        robotSelect.innerHTML = "";
+
+        Object.entries(metadata.robots).forEach(([robot, meta]: [string, any]) => {
+            const scenes = meta.scenes || [];
+            if (scenes.length <= 1) {
+                const scene = scenes[0] || "";
+                const option = createRobotSceneOption(robot, scene, meta.label);
+                robotSelect.appendChild(option);
+            } else {
+                const group = document.createElement("optgroup");
+                group.label = meta.label || robot;
+                scenes.forEach((scene: string) => {
+                    group.appendChild(createRobotSceneOption(robot, scene, meta.label));
+                });
+                robotSelect.appendChild(group);
+            }
+        });
+
+        const defaultValue = getDefaultSelection(metadata);
+        if (defaultValue) {
+            robotSelect.value = defaultValue;
+            const parsed = parseSelection(defaultValue);
+            console.log('Default selection:', parsed);
+            return parsed;
+        }
+        return null;
+    }
+
+    async function setupOverlayTiles() {
+        if (!overlayTiles) {
+            return;
+        }
+        if (!envCache) {
+            overlayTiles.innerHTML = "";
+            overlayTiles.dataset.overlayKey = "";
+            overlayTiles.style.display = 'none';
+            return;
+        }
+        // Get overlay camera feeds from envCache (excludes main camera)
+        const allFeeds = envCache.camera_feeds || [];
+        const overlayFeeds = allFeeds.filter(feed => feed.name !== 'main');
+
+        if (!overlayFeeds.length) {
+            overlayTiles.innerHTML = "";
+            overlayTiles.dataset.overlayKey = "";
+            overlayTiles.style.display = 'none';
+            return;
+        }
+        const feedNames = overlayFeeds.map((feed) => feed.name || "aux");
+        const key = `${envCache.robot || ''}|${envCache.scene || ''}|${feedNames.join(',')}`;
+        if (overlayTiles.dataset.overlayKey === key) {
+            overlayTiles.style.display = 'flex';
+            return;
+        }
+        overlayTiles.dataset.overlayKey = key;
+        overlayTiles.innerHTML = "";
+        overlayTiles.style.display = 'flex';
+        overlayFeeds.forEach((feed) => {
+            const tile = document.createElement("div");
+            tile.className = "overlay-tile";
+            const img = document.createElement("img");
+            const feedName = feed.name || "aux";
+            img.dataset.feed = feedName;
+            img.src = feed.url + `?ts=${Date.now()}`;
+            tile.appendChild(img);
+            const label = document.createElement("div");
+            label.className = "overlay-label";
+            label.innerText = feed.label || feed.name;
+            tile.appendChild(label);
+            overlayTiles.appendChild(tile);
+        });
+    }
+
+    async function loadMetadata() {
+        try {
+            const resp = await fetch(metadataUrl);
+            if (!resp.ok) {
+                console.warn("Failed to load metadata");
+                return;
+            }
+            metadataCache = await resp.json();
+            const selection = populateRobotOptions(metadataCache);
+            if (selection) {
+                updateRobotUI(selection.robot, selection.scene);
+                refreshOverlayTiles();
+            }
+            const novaInfo = metadataCache && metadataCache.nova_api;
+            novaPreconfigured = Boolean(novaInfo && novaInfo.preconfigured);
+            setNovaToggleState(!!(novaInfo && novaInfo.preconfigured), !!(novaInfo && novaInfo.preconfigured));
+            maybeAutoEnableNova();
+            if (ws && ws.readyState === WebSocket.OPEN && pendingRobotSelection) {
+                send('switch_robot', {
+                    robot: pendingRobotSelection.robot,
+                    scene: pendingRobotSelection.scene
+                });
+            }
+        } catch (error) {
+            console.warn("Metadata fetch error:", error);
+        }
+    }
+
+    async function loadEnvData() {
+        try {
+            console.log('Loading env data from:', envUrl);
+            const resp = await fetch(envUrl);
+            if (!resp.ok) {
+                console.warn("Failed to load env data, status:", resp.status);
+                return;
+            }
+            envCache = await resp.json();
+            console.log('Env data loaded:', envCache);
+            // Store home_pose if available
+            if (envCache && envCache.home_pose) {
+                currentHomePose = envCache.home_pose;
+                console.log('Home pose set to:', currentHomePose);
+            } else {
+                console.warn('No home_pose in env data:', envCache);
+            }
+        } catch (error) {
+            console.error("Env fetch error:", error);
+        }
+    }
+
+    function connect() {
+        ws = new WebSocket(WS_URL);
+
+        loadMetadata();
+        loadEnvData();
+
+        ws.onopen = () => {
+            markConnectedState();
+            refreshVideoStreams();
+            refreshOverlayTiles();
+            novaAutoEnableRequested = false;
+            maybeAutoEnableNova();
+            if (reconnectTimer) {
+                clearInterval(reconnectTimer);
+                reconnectTimer = null;
+            }
+            if (pendingRobotSelection) {
+                send('switch_robot', {
+                    robot: pendingRobotSelection.robot,
+                    scene: pendingRobotSelection.scene
+                });
+            }
+        };
+
+        ws.onclose = () => {
+            enterConnectingState();
+            // Auto-reconnect
+            if (!reconnectTimer) {
+                reconnectTimer = setInterval(() => {
+                    if (ws.readyState === WebSocket.CLOSED) {
+                        connect();
+                    }
+                }, 2000);
+            }
+        };
+
+        ws.onerror = (err) => {
+            console.error('WebSocket error:', err);
+        };
+
+        ws.onmessage = (event) => {
+            try {
+                const msg = JSON.parse(event.data);
+            if (msg.type === 'state') {
+                const data = msg.data;
+
+                // Check if robot or scene changed in state stream
+                if (data.robot && data.robot !== currentRobot) {
+                    console.log(`Robot changed from ${currentRobot} to ${data.robot}`);
+                    currentRobot = data.robot;
+                    updateRobotUI(data.robot, data.scene);
+                    // Update robot selector dropdown
+                    if (robotSelect) {
+                        robotSelect.value = buildSelectionValue(data.robot, data.scene);
+                    }
+                    // Fetch new environment info only when robot actually changes
+                    fetch('/nova-sim/api/v1/env')
+                        .then(r => r.json())
+                        .then(envData => {
+                            console.log('Robot changed, fetched env data:', envData);
+                            envData.has_gripper = envData.envData.has_gripper || false;
+                            envData.control_mode = envData.envData.control_mode || 'ik';
+                            if (envData.home_pose) {
+                                currentHomePose = envData.home_pose;
+                                console.log('Updated home pose from robot change:', currentHomePose);
+                            } else {
+                                console.warn('No home_pose in robot change env data');
+                            }
+                        });
+                }
+                if (data.scene && data.scene !== currentScene) {
+                    console.log(`Scene changed from ${currentScene} to ${data.scene}`);
+                    currentScene = data.scene;
+                    // Update robot selector dropdown to reflect scene change
+                    if (robotSelect && currentRobot) {
+                        robotSelect.value = buildSelectionValue(currentRobot, data.scene);
+                    }
+                    // Update UI to reflect scene change
+                    updateRobotUI(currentRobot, data.scene);
+                }
+
+                if (typeof data.trainer_connected === 'boolean') {
+                    updateTrainerStatus(data.trainer_connected);
+                }
+
+                    if (currentRobot === 'ur5' || currentRobot === 'ur5_t_push') {
+                        // UR5 state - Access observation data first
+                        const obs = data.observation || {};
+
+                        // Update end effector position
+                        if (obs.end_effector) {
+                            const ee = obs.end_effector;
+                            const eePosEl = document.getElementById('ee_pos');
+                            if (eePosEl) {
+                                eePosEl.innerText = ee.x.toFixed(2) + ', ' + ee.y.toFixed(2) + ', ' + ee.z.toFixed(2);
+                            }
+                        }
+
+                        // EE Orientation - convert quaternion to euler for display
+                        if (obs.ee_orientation) {
+                            const q = obs.ee_orientation;
+                            const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                            const eeOriEl = document.getElementById('ee_ori');
+                            if (eeOriEl) {
+                                eeOriEl.innerText = euler[0].toFixed(2) + ', ' + euler[1].toFixed(2) + ', ' + euler[2].toFixed(2);
+                            }
+                        }
+
+                        // Show/hide gripper UI based on envCache.has_gripper
+                        const gripperStateDisplay = document.getElementById('gripper_state_display');
+                        const gripperControls = document.getElementById('gripper_controls');
+                        if (envCache && envCache.has_gripper) {
+                            if (gripperStateDisplay) gripperStateDisplay.style.display = '';
+                            if (gripperControls) gripperControls.style.display = '';
+                            // Gripper: 0=open, 255=closed (Robotiq 2F-85)
+                            if (obs.gripper !== undefined) {
+                                const gripperVal = document.getElementById('gripper_val');
+                                if (gripperVal) {
+                                    gripperVal.innerText = ((255 - obs.gripper) / 255 * 100).toFixed(0) + '% open';
+                                }
+                            }
+                        } else {
+                            if (gripperStateDisplay) gripperStateDisplay.style.display = 'none';
+                            if (gripperControls) gripperControls.style.display = 'none';
+                        }
+
+                        const armStepEl = document.getElementById('arm_step_val');
+                        if (armStepEl && data.steps !== undefined) {
+                            armStepEl.innerText = String(data.steps);
+                        }
+                        const rewardEl = document.getElementById('arm_reward');
+                        if (rewardEl) {
+                            if (data.reward === null || data.reward === undefined) {
+                                rewardEl.innerText = '-';
+                            } else {
+                                rewardEl.innerText = data.reward.toFixed(3);
+                            }
+                        }
+
+                        // Update joint position display (actual positions)
+                        if (obs.joint_positions) {
+                            const jp = obs.joint_positions;
+                            currentJointPositions = jp;  // Store for homing
+
+                            // Update jog button displays with actual joint positions
+                            for (let i = 0; i < 6; i++) {
+                                const el = document.getElementById('joint_' + i + '_val');
+                                if (el) {
+                                    el.innerText = jp[i].toFixed(2);
+                                }
+                            }
+
+                            // Debug: log first joint update
+                            if (!window.debugJointLogCount) window.debugJointLogCount = 0;
+                            if (window.debugJointLogCount < 2) {
+                                console.log('Joint positions update:', jp.map(j => j.toFixed(2)));
+                                console.log('Joint 0 element found:', !!document.getElementById('joint_0_val'));
+                                window.debugJointLogCount++;
+                            }
+                        }
+
+                        // Update cartesian position displays with actual EE position
+                        if (obs.end_effector) {
+                            const ee = obs.end_effector;
+                            const posXEl = document.getElementById('pos_x_val');
+                            const posYEl = document.getElementById('pos_y_val');
+                            const posZEl = document.getElementById('pos_z_val');
+
+                            if (posXEl) posXEl.innerText = ee.x.toFixed(3);
+                            if (posYEl) posYEl.innerText = ee.y.toFixed(3);
+                            if (posZEl) posZEl.innerText = ee.z.toFixed(3);
+
+                            // Debug: log first few updates
+                            if (!window.debugLogCount) window.debugLogCount = 0;
+                            if (window.debugLogCount < 3) {
+                                console.log('EE Position update:', ee.x.toFixed(3), ee.y.toFixed(3), ee.z.toFixed(3));
+                                console.log('Elements found:', !!posXEl, !!posYEl, !!posZEl);
+                                window.debugLogCount++;
+                            }
+                        }
+
+                        // Update rotation displays with actual EE orientation
+                        if (obs.ee_orientation) {
+                            const q = obs.ee_orientation;
+                            const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                            const rotXEl = document.getElementById('rot_x_val');
+                            const rotYEl = document.getElementById('rot_y_val');
+                            const rotZEl = document.getElementById('rot_z_val');
+                            if (rotXEl) rotXEl.innerText = euler[0].toFixed(2);
+                            if (rotYEl) rotYEl.innerText = euler[1].toFixed(2);
+                            if (rotZEl) rotZEl.innerText = euler[2].toFixed(2);
+                        }
+
+                        // Update control mode display
+                        if (data.control_mode) {
+                            const controlModeDisplay = document.getElementById('control_mode_display');
+                            if (controlModeDisplay) {
+                                controlModeDisplay.innerText = data.control_mode === 'ik' ? 'IK' : 'Joint';
+                            }
+                            // Sync UI if mode changed externally (but not if we just changed it ourselves)
+                            // Wait at least 500ms after our own change before syncing from server
+                            const timeSinceOurChange = Date.now() - controlModeChangeTime;
+                            if (currentControlMode !== data.control_mode && timeSinceOurChange > 500) {
+                                setControlMode(data.control_mode);
+                            }
+                        }
+
+                        // Update Nova API controller status
+                        if (data.nova_api) {
+                            const stateController = document.getElementById('nova_state_controller');
+                            const ikController = document.getElementById('nova_ik_controller');
+                            const badge = document.getElementById('nova_connection_badge');
+                            const badgeTitle = document.getElementById('nova_badge_title');
+                            const modeText = document.getElementById('nova_mode_text');
+                            setNovaToggleState(data.nova_api.available, data.nova_api.enabled);
+
+                            // Track Nova state streaming status
+                            novaStateStreaming = data.nova_api.state_streaming || false;
+
+                            if (badge) {
+                                if (data.nova_api.available) {
+                                    badge.style.display = 'block';
+                                } else {
+                                    badge.style.display = 'none';
+                                }
+                                badge.classList.toggle('connected', data.nova_api.enabled);
+                                badge.classList.toggle('disconnected', !data.nova_api.enabled);
+                            }
+
+                            const connectedColor = data.nova_api.connected ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                            if (stateController) {
+                                stateController.innerText = data.nova_api.state_streaming ? 'Nova API' : 'Internal';
+                                stateController.style.color = connectedColor;
+                            }
+                            if (ikController) {
+                                ikController.innerText = data.nova_api.ik ? 'Nova API' : 'Internal';
+                                ikController.style.color = data.nova_api.ik ? 'var(--wb-success)' : 'var(--wb-highlight)';
+                            }
+
+                            if (badgeTitle) {
+                                if (data.nova_api.enabled) {
+                                    badgeTitle.innerText = data.nova_api.connected ? '🌐 Nova Connected' : '🌐 Nova Powering Up';
+                                } else {
+                                    badgeTitle.innerText = '🌐 Nova Disabled';
+                                }
+                            }
+
+                            if (modeText) {
+                                if (data.nova_api.connected) {
+                                    if (data.nova_api.state_streaming && data.nova_api.ik) {
+                                        modeText.innerText = 'Hybrid Mode';
+                                    } else if (data.nova_api.state_streaming) {
+                                        modeText.innerText = 'Digital Twin Mode';
+                                    } else if (data.nova_api.ik) {
+                                        modeText.innerText = 'Nova IK Mode';
+                                    }
+                                } else if (data.nova_api.enabled) {
+                                    modeText.innerText = 'Awaiting connection';
+                                } else {
+                                    modeText.innerText = 'Internal control';
+                                }
+                            }
+                        }
+
+                        // Update teleop command display - only show non-zero values
+                        const armTeleop = data.teleop_action;
+                        const armTeleopDisplayEl = document.getElementById('arm_teleop_display');
+                        if (armTeleop && armTeleopDisplayEl) {
+                            const parts = [];
+                            // Check all possible teleop fields
+                            const fields = {
+                                'vx': armTeleop.vx,
+                                'vy': armTeleop.vy,
+                                'vz': armTeleop.vz,
+                                'vyaw': armTeleop.vyaw,
+                                'vrx': armTeleop.vrx,
+                                'vry': armTeleop.vry,
+                                'vrz': armTeleop.vrz,
+                                'j1': armTeleop.j1,
+                                'j2': armTeleop.j2,
+                                'j3': armTeleop.j3,
+                                'j4': armTeleop.j4,
+                                'j5': armTeleop.j5,
+                                'j6': armTeleop.j6,
+                                'g': armTeleop.gripper
+                            };
+
+                            for (const [key, value] of Object.entries(fields)) {
+                                const numVal = Number(value ?? 0);
+                                if (numVal !== 0) {
+                                    if (key === 'g') {
+                                        parts.push(`${key}=${numVal.toFixed(0)}`);
+                                    } else {
+                                        parts.push(`${key}=${numVal.toFixed(2)}`);
+                                    }
+                                }
+                            }
+
+                            armTeleopDisplayEl.innerText = parts.length > 0 ? parts.join(', ') : '-';
+                        }
+                    } else {
+                        // Locomotion state
+                        const locoObs = data.observation || {};
+
+                        // Update position display
+                        const locoPos = document.getElementById('loco_pos');
+                        if (locoPos && locoObs.position) {
+                            const p = locoObs.position;
+                            locoPos.innerText = `${p.x.toFixed(2)}, ${p.y.toFixed(2)}, ${p.z.toFixed(2)}`;
+                        }
+
+                        // Update orientation display (convert quaternion to euler)
+                        const locoOri = document.getElementById('loco_ori');
+                        if (locoOri && locoObs.orientation) {
+                            const q = locoObs.orientation;
+                            const euler = quatToEuler(q.w, q.x, q.y, q.z);
+                            locoOri.innerText = `${euler[0].toFixed(2)}, ${euler[1].toFixed(2)}, ${euler[2].toFixed(2)}`;
+                        }
+
+                        // Update teleop command display - only show non-zero values
+                        const locoTeleop = data.teleop_action || {};
+                        const locoTeleopDisplayEl = document.getElementById('loco_teleop_display');
+                        if (locoTeleopDisplayEl) {
+                            const parts = [];
+                            const fields = {
+                                'vx': locoTeleop.vx,
+                                'vy': locoTeleop.vy,
+                                'vyaw': locoTeleop.vyaw
+                            };
+
+                            for (const [key, value] of Object.entries(fields)) {
+                                const numVal = Number(value ?? 0);
+                                if (numVal !== 0) {
+                                    parts.push(`${key}=${numVal.toFixed(2)}`);
+                                }
+                            }
+
+                            locoTeleopDisplayEl.innerText = parts.length > 0 ? parts.join(', ') : '-';
+                        }
+
+                        const stepVal = document.getElementById('step_val');
+                        if (stepVal && data.steps !== undefined) {
+                            stepVal.innerText = String(data.steps);
+                        }
+                    }
+                } else if (msg.type === 'trainer_status') {
+                    const payload = msg.data || {};
+                    if (typeof payload.connected === 'boolean') {
+                        updateTrainerStatus(payload.connected);
+                    }
+                } else if (msg.type === 'trainer_notification') {
+                    showTrainerNotification(msg.data);
+                }
+            } catch (e) {
+                console.error('Error parsing message:', e);
+            }
+        };
+    }
+
+    function send(type, data = {}) {
+        if (ws && ws.readyState === WebSocket.OPEN) {
+            const msg = {type, data};
+            ws.send(JSON.stringify(msg));
+        } else {
+            console.warn('Cannot send message, WebSocket not ready:', {
+                type,
+                hasWs: !!ws,
+                wsState: ws ? ws.readyState : 'no ws'
+            });
+        }
+    }
+
+    function requestEpisodeControl(action) {
+        if (!action) {
+            return;
+        }
+        send('episode_control', {action});
+    }
+
+    function showTrainerNotification(payload) {
+        if (!notificationList || !payload) {
+            return;
+        }
+        const entry = document.createElement('div');
+        entry.className = 'notification';
+        entry.style.opacity = '0.9';
+        const when = payload.timestamp ? new Date(payload.timestamp * 1000).toLocaleTimeString() : new Date().toLocaleTimeString();
+        const status = payload.status ? payload.status.toUpperCase() : 'INFO';
+        const message = payload.message || payload.text || payload.detail || 'Notification';
+        entry.textContent = `[${when}] ${status}: ${message}`;
+        notificationList.insertBefore(entry, notificationList.firstChild);
+        setTimeout(() => {
+            if (entry.parentNode) {
+                entry.parentNode.removeChild(entry);
+            }
+        }, NOTIFICATION_DURATION_MS);
+        while (notificationList.childElementCount > 5) {
+            notificationList.removeChild(notificationList.lastChild);
+        }
+    }
+
+    // Convert quaternion to euler angles (XYZ convention)
+    function quatToEuler(w, x, y, z) {
+        // Roll (x-axis rotation)
+        const sinr_cosp = 2 * (w * x + y * z);
+        const cosr_cosp = 1 - 2 * (x * x + y * y);
+        const roll = Math.atan2(sinr_cosp, cosr_cosp);
+
+        // Pitch (y-axis rotation)
+        const sinp = 2 * (w * y - z * x);
+        let pitch;
+        if (Math.abs(sinp) >= 1) {
+            pitch = Math.sign(sinp) * Math.PI / 2;
+        } else {
+            pitch = Math.asin(sinp);
+        }
+
+        // Yaw (z-axis rotation)
+        const siny_cosp = 2 * (w * z + x * y);
+        const cosy_cosp = 1 - 2 * (y * y + z * z);
+        const yaw = Math.atan2(siny_cosp, cosy_cosp);
+
+        return [roll, pitch, yaw];
+    }
+
+    function updateHintBox(robotType) {
+        const hintBox = document.getElementById('hint_box');
+        if (!hintBox) return;
+
+        if (robotType === 'arm') {
+            hintBox.innerHTML = `
+                Drag: Rotate Camera<br>
+                Scroll: Zoom<br>
+                <strong>Keyboard:</strong><br>
+                W/A/S/D: XY jog<br>
+                R/F: Z nudge<br>
+                Enter: Move to Home
+            `;
+        } else {
+            hintBox.innerHTML = `
+                Drag: Rotate Camera<br>
+                Scroll: Zoom<br>
+                <strong>Keyboard:</strong><br>
+                W/S: Forward/Back<br>
+                A/D: Turn<br>
+                Q/E: Strafe
+            `;
+        }
+    }
+
+    function updateRobotUI(robot, scene = null) {
+        currentRobot = robot;
+        currentScene = scene;
+        robotTitle.innerText = robotTitles[robot] || robot;
+        robotInfo.innerText = robotInfoText[robot] || '';
+        if (sceneLabel) {
+            sceneLabel.innerText = humanizeScene(scene);
+        }
+        // Toggle controls based on robot type
+        if (robot === 'ur5' || robot === 'ur5_t_push') {
+            locomotionControls.classList.add('hidden');
+            armControls.classList.add('active');
+            document.getElementById('locomotion_state').style.display = 'none';
+            document.getElementById('arm_state').style.display = 'block';
+            document.getElementById('arm_hints').style.display = 'block';
+            document.getElementById('loco_hints').style.display = 'none';
+            // Update hint box for ARM robots
+            updateHintBox('arm');
+            // Load env data and show home button only if home_pose is available
+            loadEnvData().then(() => {
+                setupOverlayTiles();
+                // Show home button only if home_pose was loaded
+                const homeBtn = document.getElementById('homeBtn');
+                if (homeBtn) {
+                    if (currentHomePose && currentHomePose.length > 0) {
+                        homeBtn.style.display = 'block';
+                    } else {
+                        homeBtn.style.display = 'none';
+                        console.warn('Home button hidden: no home_pose available');
+                    }
+                }
+            });
+        } else {
+        locomotionControls.classList.remove('hidden');
+        armControls.classList.remove('active');
+        document.getElementById('locomotion_state').style.display = 'block';
+        document.getElementById('arm_state').style.display = 'none';
+        document.getElementById('arm_hints').style.display = 'none';
+        document.getElementById('loco_hints').style.display = 'block';
+        // Hide home button for non-UR5 robots
+        const homeBtn = document.getElementById('homeBtn');
+        if (homeBtn) homeBtn.style.display = 'none';
+        // Update hint box for locomotion robots
+        updateHintBox('locomotion');
+    }
+    maybeAutoEnableNova();
+}
+
+    let panelCollapsed = false;
+    function togglePanel() {
+        panelCollapsed = !panelCollapsed;
+        const content = document.getElementById('panel_content');
+        const header = document.getElementById('panel_header');
+        const panel = document.getElementById('control_panel');
+        if (panelCollapsed) {
+            content.classList.add('collapsed');
+            panel.classList.add('collapsed');
+            header.classList.add('collapsed');
+        } else {
+            content.classList.remove('collapsed');
+            panel.classList.remove('collapsed');
+            header.classList.remove('collapsed');
+        }
+    }
+
+    function switchRobot() {
+        const selectionValue = robotSelect.value;
+        if (!selectionValue) {
+            return;
+        }
+        const parsed = parseSelection(selectionValue);
+        pendingRobotSelection = {
+            value: selectionValue,
+            robot: parsed.robot,
+            scene: parsed.scene
+        };
+        send('switch_robot', {robot: parsed.robot, scene: parsed.scene});
+        updateRobotUI(parsed.robot, parsed.scene);
+    }
+
+    const viewport = document.getElementById('viewport');
+    const camDist = document.getElementById('cam_dist');
+    const camDistVal = document.getElementById('cam_dist_val');
+    const armTeleopVx = document.getElementById('arm_teleop_vx');
+    const armTeleopVy = document.getElementById('arm_teleop_vy');
+    const armTeleopVz = document.getElementById('arm_teleop_vz');
+
+    let keysPressed = new Set();
+
+    function resetEnv() {
+        send('reset');
+    }
+
+    // Homing functionality for UR5
+    let homingInterval = null;
+    let homingJoints = [];  // Joints being homed
+
+    function startHoming() {
+        console.log('startHoming called:', {
+            currentRobot,
+            hasHomePose: !!currentHomePose,
+            novaStateStreaming,
+            wsState: ws ? ws.readyState : 'no ws'
+        });
+
+        if (currentRobot !== 'ur5' && currentRobot !== 'ur5_t_push') {
+            console.log('Not a UR5 robot, skipping homing');
+            return;
+        }
+
+        // Check if we have necessary data
+        if (!currentHomePose) {
+            console.warn('Cannot home: home_pose not available');
+            return;
+        }
+
+        if (novaStateStreaming) {
+            // Nova mode: use joint jogging to move to home
+            console.log('Starting Nova jogging homing...');
+            startNovaJoggingHome();
+        } else {
+            // Local mode: send home messages continuously while button is pressed
+            console.log('Starting local homing...');
+            send('home');
+
+            // Send home message every 100ms while button is pressed
+            if (homingInterval) clearInterval(homingInterval);
+            homingInterval = setInterval(() => {
+                send('home');
+            }, 100);
+        }
+    }
+
+    function stopHoming() {
+        if (novaStateStreaming) {
+            // Stop all motion by sending empty action
+            send('action', {});
+            homingJoints = [];
+            if (homingInterval) {
+                clearInterval(homingInterval);
+                homingInterval = null;
+            }
+        } else {
+            // Stop the home message interval
+            if (homingInterval) {
+                clearInterval(homingInterval);
+                homingInterval = null;
+            }
+            // Send stop_home message to backend
+            send('stop_home');
+            console.log('Sent stop_home message');
+        }
+    }
+
+    function startNovaJoggingHome() {
+        if (!currentHomePose || !currentJointPositions) {
+            console.warn('Cannot jog home: missing home_pose or joint_positions');
+            return;
+        }
+
+        const tolerance = 0.01;  // 0.01 rad ~= 0.57 degrees
+
+        // Build action message with joint velocities for all joints that need to move
+        const actionData: any = {};
+        homingJoints = [];
+
+        for (let i = 0; i < Math.min(currentHomePose.length, currentJointPositions.length); i++) {
+            const target = currentHomePose[i];
+            const current = currentJointPositions[i];
+            const error = target - current;
+
+            if (Math.abs(error) > tolerance) {
+                const joint = i + 1;  // 1-based for logging
+                const velocity = error > 0 ? 0.5 : -0.5;  // rad/s, direction encoded in sign
+
+                console.log(`Moving joint ${joint} (error: ${error.toFixed(3)} rad)`);
+
+                // Set joint velocity in action data (j1-j6)
+                actionData[`j${joint}`] = velocity;
+                homingJoints.push(joint);
+            }
+        }
+
+        if (homingJoints.length === 0) {
+            console.log('Already at home position');
+            return;
+        }
+
+        // Send action message with joint velocities
+        send('action', actionData);
+
+        // Monitor progress and stop when home is reached
+        if (homingInterval) clearInterval(homingInterval);
+        homingInterval = setInterval(() => {
+            if (!currentHomePose || !currentJointPositions) {
+                stopHoming();
+                return;
+            }
+
+            // Check if we're at home
+            let allAtHome = true;
+            for (let i = 0; i < Math.min(currentHomePose.length, currentJointPositions.length); i++) {
+                const target = currentHomePose[i];
+                const current = currentJointPositions[i];
+                const error = Math.abs(target - current);
+
+                if (error > tolerance) {
+                    allAtHome = false;
+                    break;
+                }
+            }
+
+            if (allAtHome) {
+                console.log('Home position reached');
+                stopHoming();
+            }
+        }, 100);  // Check every 100ms
+    }
+
+    function setCmd(vx, vy, vyaw) {
+        send('command', {vx, vy, vyaw});
+    }
+
+    function setCameraFollow() {
+        const follow = document.getElementById('cam_follow').checked;
+        send('camera_follow', {follow});
+    }
+
+    // UR5 controls
+    let currentControlMode = 'ik';
+    let controlModeChangeTime = 0;
+
+    function setControlMode(mode) {
+        currentControlMode = mode;
+        controlModeChangeTime = Date.now();
+        send('control_mode', {mode});
+
+        // Update UI
+        const modeIkBtn = document.getElementById('mode_ik');
+        const modeJointBtn = document.getElementById('mode_joint');
+        const ikControls = document.getElementById('ik_controls');
+        const jointControls = document.getElementById('joint_controls');
+
+        if (modeIkBtn) modeIkBtn.classList.toggle('active', mode === 'ik');
+        if (modeJointBtn) modeJointBtn.classList.toggle('active', mode === 'joint');
+        if (ikControls) ikControls.classList.toggle('active', mode === 'ik');
+        if (jointControls) jointControls.classList.toggle('active', mode === 'joint');
+    }
+
+    // Jogging velocities
+    let transVelocity = 50.0;  // mm/s
+    let rotVelocity = 0.3;  // rad/s
+    let jointVelocity = 0.5;  // rad/s
+
+    function updateTransVelocity() {
+        transVelocity = parseFloat(document.getElementById('trans_velocity').value);
+        document.getElementById('trans_vel_val').innerText = transVelocity.toFixed(0);
+        teleopTranslationStep = transVelocity / 1000;
+    }
+
+    function updateRotVelocity() {
+        rotVelocity = parseFloat(document.getElementById('rot_velocity').value);
+        document.getElementById('rot_vel_val').innerText = rotVelocity.toFixed(1);
+    }
+
+    function updateJointVelocity() {
+        jointVelocity = parseFloat(document.getElementById('joint_velocity').value);
+        document.getElementById('joint_vel_val').innerText = jointVelocity.toFixed(1);
+    }
+
+    function startJog(jogType, axisOrJoint, direction) {
+        const actionData: any = {};
+        const vel = direction === '+' ? 1 : -1;
+
+        if (jogType === 'cartesian_translation') {
+            // Convert mm/s to m/s and set appropriate axis
+            const velocity = (transVelocity / 1000) * vel;
+            if (axisOrJoint === 'x') actionData.vx = velocity;
+            else if (axisOrJoint === 'y') actionData.vy = velocity;
+            else if (axisOrJoint === 'z') actionData.vz = velocity;
+        } else if (jogType === 'cartesian_rotation') {
+            // Set rotation velocity in rad/s
+            const velocity = rotVelocity * vel;
+            if (axisOrJoint === 'x') actionData.vrx = velocity;
+            else if (axisOrJoint === 'y') actionData.vry = velocity;
+            else if (axisOrJoint === 'z') actionData.vrz = velocity;
+        } else if (jogType === 'joint') {
+            // Set joint velocity (axisOrJoint is 1-6)
+            const velocity = jointVelocity * vel;
+            actionData[`j${axisOrJoint}`] = velocity;
+        }
+
+        send('action', actionData);
+    }
+
+    function stopJog() {
+        // Send zero velocities to stop all motion
+        send('action', {});
+    }
+
+    function setGripper(action) {
+        send('gripper', {action});
+    }
+
+    function updateCmdFromKeys() {
+        let vx = 0, vy = 0, vyaw = 0;
+        if (keysPressed.has('KeyW') || keysPressed.has('ArrowUp')) vx = 0.8;
+        if (keysPressed.has('KeyS') || keysPressed.has('ArrowDown')) vx = -0.5;
+        if (keysPressed.has('KeyA')) vyaw = 1.2;
+        if (keysPressed.has('KeyD')) vyaw = -1.2;
+        if (keysPressed.has('KeyQ')) vy = 0.4;
+        if (keysPressed.has('KeyE')) vy = -0.4;
+        if (keysPressed.has('ArrowLeft')) vyaw = 1.2;
+        if (keysPressed.has('ArrowRight')) vyaw = -1.2;
+        setCmd(vx, vy, vyaw);
+    }
+
+    function getActiveSelection() {
+        return parseSelection(robotSelect.value);
+    }
+
+    function isArmRobot() {
+        const active = getActiveSelection();
+        return armRobotTypes.has(active.robot);
+    }
+
+    function shouldCaptureKey(code) {
+        const active = getActiveSelection();
+        return armRobotTypes.has(active.robot) ? armTeleopKeys.has(code) : locomotionKeys.has(code);
+    }
+
+    function hasActiveTeleopKeys() {
+        const keySet = isArmRobot() ? armTeleopKeys : locomotionKeys;
+        for (const key of keySet) {
+            if (keysPressed.has(key)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function startTeleopRepeat() {
+        if (teleopRepeatTimer) {
+            return;
+        }
+        teleopRepeatTimer = setInterval(() => updateArmTeleopFromKeys(true), TELEOP_REPEAT_INTERVAL_MS);
+    }
+
+    function stopTeleopRepeat() {
+        if (!teleopRepeatTimer) {
+            return;
+        }
+        clearInterval(teleopRepeatTimer);
+        teleopRepeatTimer = null;
+    }
+
+    function updateArmTeleopFromKeys(force = false) {
+        let dx = 0, dy = 0, dz = 0;
+        if (keysPressed.has('KeyW')) dx += teleopTranslationStep;
+        if (keysPressed.has('KeyS')) dx -= teleopTranslationStep;
+        if (keysPressed.has('KeyA')) dy += teleopTranslationStep;
+        if (keysPressed.has('KeyD')) dy -= teleopTranslationStep;
+        if (keysPressed.has('KeyR')) dz += teleopVerticalStep;
+        if (keysPressed.has('KeyF')) dz -= teleopVerticalStep;
+
+        const unchanged =
+            Math.abs(dx - lastTeleopCommand.dx) < 1e-6 &&
+            Math.abs(dy - lastTeleopCommand.dy) < 1e-6 &&
+            Math.abs(dz - lastTeleopCommand.dz) < 1e-6;
+
+        if (unchanged && !force) {
+            return;
+        }
+
+        lastTeleopCommand = {dx, dy, dz};
+        send('teleop_action', {dx, dy, dz});
+    }
+
+    function startArmJogForKey(code) {
+        const entry = armJogKeyMap[code];
+        if (!entry) {
+            return;
+        }
+        startJog(entry.jogType, entry.axis, entry.direction);
+    }
+
+    function handleArmKeyDown(code) {
+        startArmJogForKey(code);
+    }
+
+    function handleArmKeyUp(code) {
+        if (!armJogKeyMap[code]) {
+            return;
+        }
+        stopJog();
+        const remaining = [...keysPressed].filter((key) => armJogKeyMap[key]);
+        if (remaining.length > 0) {
+            startArmJogForKey(remaining[remaining.length - 1]);
+        }
+    }
+
+    function handleKeyStateChange() {
+        if (isArmRobot()) {
+            return;
+        }
+        const active = hasActiveTeleopKeys();
+        if (active) {
+            startTeleopRepeat();
+        } else {
+            stopTeleopRepeat();
+        }
+        updateCmdFromKeys();
+    }
+
+    window.addEventListener('keydown', (e) => {
+        if (e.code === 'Enter') {
+            console.log('ENTER KEY PRESSED', { isArm: isArmRobot() });
+            e.preventDefault();
+            // For ARM robots, trigger homing; for locomotion robots, terminate episode
+            if (isArmRobot()) {
+                console.log('Calling startHoming from Enter key');
+                startHoming();
+            } else {
+                requestEpisodeControl('terminate');
+            }
+            return;
+        }
+        if (shouldCaptureKey(e.code)) {
+            e.preventDefault();
+            const alreadyPressed = keysPressed.has(e.code);
+            keysPressed.add(e.code);
+            if (isArmRobot()) {
+                if (!alreadyPressed) {
+                    handleArmKeyDown(e.code);
+                }
+            } else {
+                handleKeyStateChange();
+            }
+        }
+    });
+
+    window.addEventListener('keyup', (e) => {
+        if (e.code === 'Enter') {
+            // For ARM robots, stop homing on Enter key release
+            if (isArmRobot()) {
+                stopHoming();
+            }
+            return;
+        }
+        if (keysPressed.delete(e.code)) {
+            if (isArmRobot()) {
+                handleArmKeyUp(e.code);
+            } else {
+                handleKeyStateChange();
+            }
+        }
+    });
+
+    camDist.oninput = () => {
+        camDistVal.innerText = parseFloat(camDist.value).toFixed(1);
+        send('camera', {action: 'set_distance', distance: parseFloat(camDist.value)});
+    };
+
+    let isDragging = false;
+    let lastX, lastY;
+
+    viewport.oncontextmenu = (e) => e.preventDefault();
+
+    // Mouse controls
+    viewport.onmousedown = (e) => {
+        isDragging = true;
+        lastX = e.clientX;
+        lastY = e.clientY;
+    };
+
+    window.addEventListener('mouseup', () => {
+        isDragging = false;
+    });
+
+    window.onmousemove = (e) => {
+        if (isDragging) {
+            const dx = e.clientX - lastX;
+            const dy = e.clientY - lastY;
+            lastX = e.clientX;
+            lastY = e.clientY;
+            send('camera', {action: 'rotate', dx, dy});
+        }
+    };
+
+    viewport.onwheel = (e) => {
+        e.preventDefault();
+        send('camera', {action: 'zoom', dz: e.deltaY});
+    };
+
+    // Touch controls for camera rotation and pinch-to-zoom
+    let touchStartX, touchStartY;
+    let lastPinchDist = null;
+
+    function getTouchDistance(touches) {
+        const dx = touches[0].clientX - touches[1].clientX;
+        const dy = touches[0].clientY - touches[1].clientY;
+        return Math.sqrt(dx * dx + dy * dy);
+    }
+
+    viewport.addEventListener('touchstart', (e) => {
+        if (e.touches.length === 1) {
+            // Single touch - rotation
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            lastPinchDist = null;
+        } else if (e.touches.length === 2) {
+            // Two touches - pinch zoom
+            lastPinchDist = getTouchDistance(e.touches);
+        }
+    }, {passive: true});
+
+    viewport.addEventListener('touchmove', (e) => {
+        e.preventDefault();
+        if (e.touches.length === 1 && lastPinchDist === null) {
+            // Single touch drag - rotate camera
+            const dx = e.touches[0].clientX - touchStartX;
+            const dy = e.touches[0].clientY - touchStartY;
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+            send('camera', {action: 'rotate', dx, dy});
+        } else if (e.touches.length === 2 && lastPinchDist !== null) {
+            // Pinch zoom
+            const dist = getTouchDistance(e.touches);
+            const delta = lastPinchDist - dist;
+            lastPinchDist = dist;
+            // Scale delta for smoother zoom
+            send('camera', {action: 'zoom', dz: delta * 3});
+        }
+    }, {passive: false});
+
+    viewport.addEventListener('touchend', (e) => {
+        if (e.touches.length < 2) {
+            lastPinchDist = null;
+        }
+        if (e.touches.length === 1) {
+            // Reset for single finger after pinch
+            touchStartX = e.touches[0].clientX;
+            touchStartY = e.touches[0].clientY;
+        }
+    }, {passive: true});
+
+    // Add panel header click handler
+    const panelHeader = document.getElementById('panel_header');
+    if (panelHeader) {
+        panelHeader.addEventListener('click', togglePanel);
+    }
+
+    // Add robot selector change handler
+    if (robotSelect) {
+        robotSelect.addEventListener('change', switchRobot);
+    }
+
+    // Add control mode button handlers
+    const modeIkBtn = document.getElementById('mode_ik');
+    const modeJointBtn = document.getElementById('mode_joint');
+    if (modeIkBtn) {
+        modeIkBtn.addEventListener('click', () => setControlMode('ik'));
+    }
+    if (modeJointBtn) {
+        modeJointBtn.addEventListener('click', () => setControlMode('joint'));
+    }
+
+    // Add locomotion button handlers
+    const locomotionButtons = document.querySelectorAll('.locomotion-controls .rl-btn');
+    locomotionButtons.forEach(btn => {
+        const text = btn.textContent;
+        if (text.includes('W Forward')) {
+            btn.addEventListener('mousedown', () => setCmd(0.8, 0, 0));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(0.8, 0, 0));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('S Back')) {
+            btn.addEventListener('mousedown', () => setCmd(-0.5, 0, 0));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(-0.5, 0, 0));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('A Turn L')) {
+            btn.addEventListener('mousedown', () => setCmd(0, 0, 1.2));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(0, 0, 1.2));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('D Turn R')) {
+            btn.addEventListener('mousedown', () => setCmd(0, 0, -1.2));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(0, 0, -1.2));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('Q Strafe L')) {
+            btn.addEventListener('mousedown', () => setCmd(0, 0.4, 0));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(0, 0.4, 0));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('E Strafe R')) {
+            btn.addEventListener('mousedown', () => setCmd(0, -0.4, 0));
+            btn.addEventListener('mouseup', () => setCmd(0, 0, 0));
+            btn.addEventListener('touchstart', () => setCmd(0, -0.4, 0));
+            btn.addEventListener('touchend', () => setCmd(0, 0, 0));
+        } else if (text.includes('Stop')) {
+            btn.addEventListener('click', () => setCmd(0, 0, 0));
+        }
+    });
+
+    // Add arm jogging button handlers
+    const jogButtons = document.querySelectorAll('.jog-btn');
+    jogButtons.forEach(btn => {
+        const row = btn.closest('.jog-row');
+        if (!row) return;
+
+        const label = row.querySelector('label');
+        if (!label) return;
+
+        const labelText = label.textContent.trim();
+        const isPlus = btn.textContent === '+';
+        const direction = isPlus ? '+' : '-';
+
+        // Determine jog type and axis from parent section
+        const ikControls = btn.closest('#ik_controls');
+        const jointControls = btn.closest('#joint_controls');
+
+        if (ikControls) {
+            // IK mode jogging
+            const translationSection = btn.closest('.control-group')?.querySelector('label')?.textContent?.includes('Translation');
+            const rotationSection = btn.closest('.control-group')?.querySelector('label')?.textContent?.includes('Rotation');
+
+            if (translationSection) {
+                const axis = labelText === 'X' ? 'x' : labelText === 'Y' ? 'y' : 'z';
+                btn.addEventListener('mousedown', () => startJog('cartesian_translation', axis, direction));
+                btn.addEventListener('mouseup', () => stopJog());
+                btn.addEventListener('touchstart', (e) => { e.preventDefault(); startJog('cartesian_translation', axis, direction); });
+                btn.addEventListener('touchend', () => stopJog());
+            } else if (rotationSection) {
+                const axis = labelText === 'Rx' ? 'x' : labelText === 'Ry' ? 'y' : 'z';
+                btn.addEventListener('mousedown', () => startJog('cartesian_rotation', axis, direction));
+                btn.addEventListener('mouseup', () => stopJog());
+                btn.addEventListener('touchstart', (e) => { e.preventDefault(); startJog('cartesian_rotation', axis, direction); });
+                btn.addEventListener('touchend', () => stopJog());
+            }
+        } else if (jointControls) {
+            // Joint mode jogging
+            const jointNum = labelText.replace('J', '');
+            btn.addEventListener('mousedown', () => startJog('joint', parseInt(jointNum), direction));
+            btn.addEventListener('mouseup', () => stopJog());
+            btn.addEventListener('touchstart', (e) => { e.preventDefault(); startJog('joint', parseInt(jointNum), direction); });
+            btn.addEventListener('touchend', () => stopJog());
+        }
+    });
+
+    // Add gripper button handlers
+    const gripperButtons = document.querySelectorAll('#gripper_controls .rl-btn');
+    gripperButtons.forEach(btn => {
+        const text = btn.textContent;
+        if (text.includes('Open')) {
+            btn.addEventListener('click', () => setGripper('open'));
+        } else if (text.includes('Close')) {
+            btn.addEventListener('click', () => setGripper('close'));
+        }
+    });
+
+    // Add reset environment button handler
+    const resetButtons = document.querySelectorAll('button.danger');
+    resetButtons.forEach(btn => {
+        if (btn.textContent.includes('Reset')) {
+            btn.addEventListener('click', () => send('reset', {}));
+        }
+    });
+
+    // Add home button handler
+    const homeBtn = document.getElementById('homeBtn');
+    if (homeBtn) {
+        homeBtn.addEventListener('mousedown', () => startHoming());
+        homeBtn.addEventListener('mouseup', () => stopHoming());
+        homeBtn.addEventListener('mouseleave', () => stopHoming());
+        homeBtn.addEventListener('touchstart', () => startHoming());
+        homeBtn.addEventListener('touchend', () => stopHoming());
+    }
+
+    // Add velocity controls handlers
+    const rotVelocitySlider = document.getElementById('rot_velocity');
+    const jointVelocitySlider = document.getElementById('joint_velocity');
+
+    if (rotVelocitySlider) {
+        rotVelocitySlider.addEventListener('input', updateRotVelocity);
+    }
+
+    if (jointVelocitySlider) {
+        jointVelocitySlider.addEventListener('input', updateJointVelocity);
+    }
+
+    // Connect on load
+    enterConnectingState();
+    connect();

frontend/src/styles.css

@@ -0,0 +1,415 @@
+/* Wandelbots Corporate Design Colors:
+   Primary Dark: #01040f (Blue Charcoal)
+   Light/Secondary: #bcbeec (Spindle - lavender)
+   Accent: #211c44 (Port Gore - deep purple)
+   Logo Dark: #181838
+*/
+:root {
+    --wb-primary: #01040f;
+    --wb-secondary: #bcbeec;
+    --wb-accent: #211c44;
+    --wb-logo: #181838;
+    --wb-highlight: #8b7fef;
+    --wb-success: #7c6bef;
+    --wb-danger: #ef6b6b;
+}
+body, html {
+    margin: 0; padding: 0; width: 100%; height: 100%;
+    overflow: hidden; background: var(--wb-primary);
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+}
+.video-container {
+    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
+    cursor: grab;
+}
+.video-container:active { cursor: grabbing; }
+.video-container img { width: 100%; height: 100%; object-fit: cover; }
+.overlay {
+    position: absolute; top: 20px; left: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(15px);
+    padding: 25px; border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(1, 4, 15, 0.6);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; width: 320px;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+.overlay h2 { margin: 0 0 15px 0; font-size: 1.1em; font-weight: 600; letter-spacing: 0.5px; color: #fff; }
+.control-group { margin-bottom: 15px; }
+.control-group label { display: block; margin-bottom: 5px; font-size: 0.8em; opacity: 0.8; color: var(--wb-secondary); }
+.slider-row { display: flex; align-items: center; gap: 12px; }
+input[type=range] {
+    flex-grow: 1; cursor: pointer;
+    accent-color: var(--wb-highlight);
+}
+.val-display { width: 60px; font-family: monospace; font-size: 0.9em; text-align: right; color: #fff; }
+button {
+    flex: 1; padding: 10px;
+    background: rgba(188, 190, 236, 0.1);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.25);
+    border-radius: 6px; cursor: pointer; transition: all 0.2s;
+    font-size: 0.85em;
+}
+button:hover { background: rgba(188, 190, 236, 0.2); border-color: rgba(188, 190, 236, 0.4); }
+button.danger { background: rgba(239, 107, 107, 0.4); border-color: rgba(239, 107, 107, 0.5); }
+button.danger:hover { background: rgba(239, 107, 107, 0.6); }
+.stats { margin-top: 15px; font-size: 0.8em; opacity: 0.9; line-height: 1.6; color: var(--wb-secondary); }
+.hint { position: absolute; bottom: 20px; right: 20px; color: rgba(188, 190, 236, 0.5); font-size: 0.8em; pointer-events: none; text-align: right; }
+.rl-notifications {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 250;
+}
+.rl-notifications .notification {
+    min-width: 200px;
+    padding: 10px 14px;
+    background: rgba(9, 8, 29, 0.95);
+    border-radius: 12px;
+    border: 1px solid rgba(188, 190, 236, 0.25);
+    font-size: 0.75em;
+    color: #fff;
+    box-shadow: 0 10px 24px rgba(1, 4, 15, 0.5);
+    animation: toast-pop 0.35s ease;
+}
+@keyframes toast-pop {
+    from { transform: translateY(10px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+.overlay-tiles {
+    position: absolute;
+    right: 20px;
+    bottom: 50px;
+    top: auto;
+    width: 240px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 200;
+    pointer-events: none;
+}
+.overlay-tile {
+    width: 100%;
+    height: 140px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+}
+.overlay-tile img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: saturate(1.1);
+}
+.overlay-label {
+    position: absolute;
+    bottom: 4px;
+    left: 6px;
+    right: 6px;
+    font-size: 0.65em;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: rgba(255, 255, 255, 0.9);
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
+}
+.control-panel-info {
+    margin-top: 12px;
+    padding: 10px;
+    border: 1px solid rgba(188, 190, 236, 0.2);
+    border-radius: 8px;
+    background: rgba(188, 190, 236, 0.05);
+    font-size: 0.8em;
+    line-height: 1.4;
+}
+.control-panel-info ul {
+    margin: 6px 0 0 10px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.control-panel-info li {
+    list-style: none;
+}
+.hint-key {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.hint-key kbd {
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(139, 127, 239, 0.35);
+    border: 1px solid rgba(139, 127, 239, 0.55);
+    font-size: 0.75em;
+    color: #fff;
+    font-weight: 600;
+}
+/* State info panel - top right */
+.state-panel {
+    position: absolute; top: 20px; right: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(12px);
+    padding: 8px 12px; border-radius: 8px;
+    box-shadow: 0 3px 14px rgba(1, 4, 15, 0.35);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; min-width: 180px; max-width: 220px;
+    font-size: 0.75em; line-height: 1.3;
+}
+.state-panel strong { color: #fff; }
+/* Camera controls - bottom left */
+.camera-panel {
+    position: absolute; bottom: 20px; left: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(15px);
+    padding: 15px 20px; border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(1, 4, 15, 0.5);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; width: 280px;
+}
+.camera-panel .control-group { margin-bottom: 10px; }
+.camera-panel .control-group:last-child { margin-bottom: 0; }
+.state-hint {
+    margin-top: 12px;
+    font-size: 0.75em;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.4;
+}
+.camera-panel.inside-panel {
+    position: relative;
+    bottom: auto;
+    left: auto;
+    background: rgba(33, 28, 68, 0.75);
+    border: 1px solid rgba(188, 190, 236, 0.2);
+    box-shadow: none;
+    margin-top: 16px;
+}
+/* Collapsible panel header - title is the button */
+.panel-header {
+    display: flex; justify-content: space-between; align-items: center;
+    cursor: pointer; margin-bottom: 15px;
+    padding: 4px 0; border-radius: 4px; transition: all 0.2s;
+}
+.panel-header:hover { background: rgba(188, 190, 236, 0.1); }
+.panel-header h2 {
+    margin: 0; display: flex; align-items: center; gap: 8px;
+}
+.panel-header h2::after {
+    content: ''; font-weight: 300; font-size: 1.2em;
+    opacity: 0.6; transition: transform 0.2s;
+}
+.panel-header.collapsed h2::after { content: ''; }
+.panel-content { transition: all 0.3s ease; overflow: hidden; }
+.panel-content.collapsed { max-height: 0; opacity: 0; margin: 0; padding: 0; }
+.overlay.collapsed { width: auto; min-width: 200px; }
+.rl-buttons { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
+.rl-row { display: flex; justify-content: center; gap: 5px; }
+.rl-btn {
+    padding: 12px 16px; min-width: 80px;
+    background: rgba(124, 107, 239, 0.4); border: 1px solid rgba(124, 107, 239, 0.5);
+    color: #fff; border-radius: 6px; cursor: pointer; transition: all 0.15s;
+    font-size: 0.85em; font-weight: 500;
+}
+.rl-btn:hover { background: rgba(124, 107, 239, 0.6); }
+.rl-btn:active { background: rgba(124, 107, 239, 0.8); transform: scale(0.95); }
+.rl-btn.stop { background: rgba(239, 107, 107, 0.4); border-color: rgba(239, 107, 107, 0.5); }
+.rl-btn.stop:hover { background: rgba(239, 107, 107, 0.6); }
+.cmd-display { font-family: monospace; font-size: 0.8em; opacity: 0.8; margin-top: 8px; color: var(--wb-secondary); }
+.connection-status-inline {
+    padding: 6px 12px; border-radius: 4px;
+    font-size: 0.75em; font-weight: 600;
+    background: rgba(124, 107, 239, 0.25);
+    color: #fff; border: 1px solid rgba(124, 107, 239, 0.4);
+    margin-bottom: 12px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.connection-status-inline.disconnected {
+    background: rgba(239, 107, 107, 0.25);
+    border-color: rgba(239, 107, 107, 0.4);
+}
+.connection-status-inline .status-text {
+    display: inline-block;
+}
+.connection-status-inline .status-loader {
+    display: none;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: status-spin 0.8s linear infinite;
+    margin-left: 8px;
+}
+.connection-status-inline.connecting {
+    background: rgba(139, 127, 239, 0.35);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.connection-status-inline.connecting .status-loader {
+    display: inline-block;
+}
+@keyframes status-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+.status-card {
+    padding: 10px 12px;
+    border-radius: 8px;
+    border-left: 3px solid var(--wb-success);
+    background: rgba(76, 175, 80, 0.15);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 10px;
+    transition: border-color 0.2s, background 0.2s;
+}
+.status-card strong {
+    font-size: 0.8em;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: #fff;
+}
+.status-card .status-card-text {
+    font-size: 0.75em;
+    color: rgba(255, 255, 255, 0.8);
+}
+.status-card.disconnected {
+    background: rgba(239, 107, 107, 0.15);
+    border-color: rgba(239, 107, 107, 0.7);
+}
+.trainer-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7em;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+}
+.trainer-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgba(124, 107, 239, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.45);
+}
+.trainer-status.connected .trainer-status-dot {
+    background: #53e89b;
+    box-shadow: 0 0 6px rgba(83, 232, 155, 0.8);
+}
+.trainer-status.disconnected .trainer-status-dot {
+    background: #ef6b6b;
+    box-shadow: 0 0 6px rgba(239, 107, 107, 0.8);
+}
+.camera-controls { margin-top: 15px; }
+select {
+    width: 100%; padding: 10px;
+    background: rgba(188, 190, 236, 0.1);
+    color: #fff; border: 1px solid rgba(188, 190, 236, 0.25);
+    border-radius: 6px; cursor: pointer;
+    font-size: 0.9em;
+}
+select option { background: var(--wb-accent); color: #fff; }
+.robot-selector { margin-bottom: 20px; }
+.scene-summary {
+    margin-top: 12px;
+    font-size: 0.8em;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    color: rgba(255, 255, 255, 0.75);
+}
+.scene-summary strong {
+    font-size: 0.9em;
+    opacity: 0.95;
+}
+.robot-info {
+    padding: 10px;
+    background: rgba(139, 127, 239, 0.2);
+    border-radius: 6px;
+    margin-top: 10px;
+    font-size: 0.8em;
+    border: 1px solid rgba(139, 127, 239, 0.3);
+}
+.arm-controls { display: none; }
+.arm-controls.active { display: block; }
+.locomotion-controls { display: block; }
+.locomotion-controls.hidden { display: none; }
+.gripper-btns { display: flex; gap: 10px; margin: 10px 0; }
+.gripper-btns button { flex: 1; }
+.target-sliders { margin: 10px 0; }
+.target-sliders .slider-row { margin-bottom: 8px; }
+.target-sliders label { width: 20px; display: inline-block; }
+.mode-toggle { display: flex; gap: 5px; margin-bottom: 15px; }
+.mode-toggle button {
+    flex: 1; padding: 8px;
+    background: rgba(188, 190, 236, 0.1);
+    border: 1px solid rgba(188, 190, 236, 0.2);
+}
+.mode-toggle button.active {
+    background: rgba(139, 127, 239, 0.5);
+    border-color: rgba(139, 127, 239, 0.7);
+}
+.ik-controls, .joint-controls { display: none; }
+.ik-controls.active, .joint-controls.active { display: block; }
+.joint-sliders .slider-row { margin-bottom: 6px; }
+.joint-sliders label { width: 40px; display: inline-block; font-size: 0.75em; }
+
+/* Jogging controls */
+.jog-controls { margin: 10px 0; }
+.jog-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.jog-row label {
+    width: 30px;
+    display: inline-block;
+    font-size: 0.85em;
+    text-align: left;
+}
+.jog-btn {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    font-size: 1.5em;
+    font-weight: bold;
+    background: rgba(188, 190, 236, 0.15);
+    color: var(--wb-secondary);
+    border: 1px solid rgba(188, 190, 236, 0.3);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+}
+.jog-btn:hover {
+    background: rgba(139, 127, 239, 0.3);
+    border-color: rgba(139, 127, 239, 0.5);
+    transform: scale(1.05);
+}
+.jog-btn:active {
+    background: rgba(139, 127, 239, 0.5);
+    border-color: rgba(139, 127, 239, 0.7);
+    transform: scale(0.95);
+}
+.jog-row .val-display {
+    flex-grow: 1;
+    width: auto;
+    text-align: center;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: #fff;
+}

frontend/src/styles.css.tmp

@@ -0,0 +1,417 @@
+        <style>
+/* Wandelbots Corporate Design Colors:
+   Primary Dark: #01040f (Blue Charcoal)
+   Light/Secondary: #bcbeec (Spindle - lavender)
+   Accent: #211c44 (Port Gore - deep purple)
+   Logo Dark: #181838
+*/
+:root {
+    --wb-primary: #01040f;
+    --wb-secondary: #bcbeec;
+    --wb-accent: #211c44;
+    --wb-logo: #181838;
+    --wb-highlight: #8b7fef;
+    --wb-success: #7c6bef;
+    --wb-danger: #ef6b6b;
+}
+body, html {
+    margin: 0; padding: 0; width: 100%; height: 100%;
+    overflow: hidden; background: var(--wb-primary);
+    font-family: Arial, Helvetica, sans-serif;
+    user-select: none;
+}
+.video-container {
+    position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
+    cursor: grab;
+}
+.video-container:active { cursor: grabbing; }
+.video-container img { width: 100%; height: 100%; object-fit: cover; }
+.overlay {
+    position: absolute; top: 20px; left: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(15px);
+    padding: 25px; border-radius: 12px;
+    box-shadow: 0 8px 32px rgba(1, 4, 15, 0.6);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; width: 320px;
+    max-height: calc(100vh - 40px);
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+.overlay h2 { margin: 0 0 15px 0; font-size: 1.1em; font-weight: 600; letter-spacing: 0.5px; color: #fff; }
+.control-group { margin-bottom: 15px; }
+.control-group label { display: block; margin-bottom: 5px; font-size: 0.8em; opacity: 0.8; color: var(--wb-secondary); }
+.slider-row { display: flex; align-items: center; gap: 12px; }
+input[type=range] {
+    flex-grow: 1; cursor: pointer;
+    accent-color: var(--wb-highlight);
+}
+.val-display { width: 60px; font-family: monospace; font-size: 0.9em; text-align: right; color: #fff; }
+button {
+    flex: 1; padding: 10px;
+    background: rgba(188, 190, 236, 0.1);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.25);
+    border-radius: 6px; cursor: pointer; transition: all 0.2s;
+    font-size: 0.85em;
+}
+button:hover { background: rgba(188, 190, 236, 0.2); border-color: rgba(188, 190, 236, 0.4); }
+button.danger { background: rgba(239, 107, 107, 0.4); border-color: rgba(239, 107, 107, 0.5); }
+button.danger:hover { background: rgba(239, 107, 107, 0.6); }
+.stats { margin-top: 15px; font-size: 0.8em; opacity: 0.9; line-height: 1.6; color: var(--wb-secondary); }
+.hint { position: absolute; bottom: 20px; right: 20px; color: rgba(188, 190, 236, 0.5); font-size: 0.8em; pointer-events: none; text-align: right; }
+.rl-notifications {
+    position: absolute;
+    right: 24px;
+    bottom: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: 250;
+}
+.rl-notifications .notification {
+    min-width: 200px;
+    padding: 10px 14px;
+    background: rgba(9, 8, 29, 0.95);
+    border-radius: 12px;
+    border: 1px solid rgba(188, 190, 236, 0.25);
+    font-size: 0.75em;
+    color: #fff;
+    box-shadow: 0 10px 24px rgba(1, 4, 15, 0.5);
+    animation: toast-pop 0.35s ease;
+}
+@keyframes toast-pop {
+    from { transform: translateY(10px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+.overlay-tiles {
+    position: absolute;
+    right: 20px;
+    bottom: 50px;
+    top: auto;
+    width: 240px;
+    display: none;
+    flex-direction: column;
+    gap: 10px;
+    z-index: 200;
+    pointer-events: none;
+}
+.overlay-tile {
+    width: 100%;
+    height: 140px;
+    border-radius: 8px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+}
+.overlay-tile img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: saturate(1.1);
+}
+.overlay-label {
+    position: absolute;
+    bottom: 4px;
+    left: 6px;
+    right: 6px;
+    font-size: 0.65em;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: rgba(255, 255, 255, 0.9);
+    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
+}
+.control-panel-info {
+    margin-top: 12px;
+    padding: 10px;
+    border: 1px solid rgba(188, 190, 236, 0.2);
+    border-radius: 8px;
+    background: rgba(188, 190, 236, 0.05);
+    font-size: 0.8em;
+    line-height: 1.4;
+}
+.control-panel-info ul {
+    margin: 6px 0 0 10px;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+.control-panel-info li {
+    list-style: none;
+}
+.hint-key {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+.hint-key kbd {
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(139, 127, 239, 0.35);
+    border: 1px solid rgba(139, 127, 239, 0.55);
+    font-size: 0.75em;
+    color: #fff;
+    font-weight: 600;
+}
+/* State info panel - top right */
+.state-panel {
+    position: absolute; top: 20px; right: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(12px);
+    padding: 8px 12px; border-radius: 8px;
+    box-shadow: 0 3px 14px rgba(1, 4, 15, 0.35);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; min-width: 180px; max-width: 220px;
+    font-size: 0.75em; line-height: 1.3;
+}
+.state-panel strong { color: #fff; }
+/* Camera controls - bottom left */
+.camera-panel {
+    position: absolute; bottom: 20px; left: 20px;
+    background: rgba(33, 28, 68, 0.85);
+    backdrop-filter: blur(15px);
+    padding: 15px 20px; border-radius: 10px;
+    box-shadow: 0 4px 20px rgba(1, 4, 15, 0.5);
+    color: var(--wb-secondary); border: 1px solid rgba(188, 190, 236, 0.15);
+    z-index: 100; width: 280px;
+}
+.camera-panel .control-group { margin-bottom: 10px; }
+.camera-panel .control-group:last-child { margin-bottom: 0; }
+.state-hint {
+    margin-top: 12px;
+    font-size: 0.75em;
+    color: rgba(255, 255, 255, 0.7);
+    line-height: 1.4;
+}
+.camera-panel.inside-panel {
+    position: relative;
+    bottom: auto;
+    left: auto;
+    background: rgba(33, 28, 68, 0.75);
+    border: 1px solid rgba(188, 190, 236, 0.2);
+    box-shadow: none;
+    margin-top: 16px;
+}
+/* Collapsible panel header - title is the button */
+.panel-header {
+    display: flex; justify-content: space-between; align-items: center;
+    cursor: pointer; margin-bottom: 15px;
+    padding: 4px 0; border-radius: 4px; transition: all 0.2s;
+}
+.panel-header:hover { background: rgba(188, 190, 236, 0.1); }
+.panel-header h2 {
+    margin: 0; display: flex; align-items: center; gap: 8px;
+}
+.panel-header h2::after {
+    content: '−'; font-weight: 300; font-size: 1.2em;
+    opacity: 0.6; transition: transform 0.2s;
+}
+.panel-header.collapsed h2::after { content: '+'; }
+.panel-content { transition: all 0.3s ease; overflow: hidden; }
+.panel-content.collapsed { max-height: 0; opacity: 0; margin: 0; padding: 0; }
+.overlay.collapsed { width: auto; min-width: 200px; }
+.rl-buttons { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
+.rl-row { display: flex; justify-content: center; gap: 5px; }
+.rl-btn {
+    padding: 12px 16px; min-width: 80px;
+    background: rgba(124, 107, 239, 0.4); border: 1px solid rgba(124, 107, 239, 0.5);
+    color: #fff; border-radius: 6px; cursor: pointer; transition: all 0.15s;
+    font-size: 0.85em; font-weight: 500;
+}
+.rl-btn:hover { background: rgba(124, 107, 239, 0.6); }
+.rl-btn:active { background: rgba(124, 107, 239, 0.8); transform: scale(0.95); }
+.rl-btn.stop { background: rgba(239, 107, 107, 0.4); border-color: rgba(239, 107, 107, 0.5); }
+.rl-btn.stop:hover { background: rgba(239, 107, 107, 0.6); }
+.cmd-display { font-family: monospace; font-size: 0.8em; opacity: 0.8; margin-top: 8px; color: var(--wb-secondary); }
+.connection-status-inline {
+    padding: 6px 12px; border-radius: 4px;
+    font-size: 0.75em; font-weight: 600;
+    background: rgba(124, 107, 239, 0.25);
+    color: #fff; border: 1px solid rgba(124, 107, 239, 0.4);
+    margin-bottom: 12px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+.connection-status-inline.disconnected {
+    background: rgba(239, 107, 107, 0.25);
+    border-color: rgba(239, 107, 107, 0.4);
+}
+.connection-status-inline .status-text {
+    display: inline-block;
+}
+.connection-status-inline .status-loader {
+    display: none;
+    width: 12px;
+    height: 12px;
+    border: 2px solid rgba(255, 255, 255, 0.35);
+    border-top-color: #fff;
+    border-radius: 50%;
+    animation: status-spin 0.8s linear infinite;
+    margin-left: 8px;
+}
+.connection-status-inline.connecting {
+    background: rgba(139, 127, 239, 0.35);
+    border-color: rgba(255, 255, 255, 0.3);
+}
+.connection-status-inline.connecting .status-loader {
+    display: inline-block;
+}
+@keyframes status-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+.status-card {
+    padding: 10px 12px;
+    border-radius: 8px;
+    border-left: 3px solid var(--wb-success);
+    background: rgba(76, 175, 80, 0.15);
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    margin-top: 10px;
+    transition: border-color 0.2s, background 0.2s;
+}
+.status-card strong {
+    font-size: 0.8em;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: #fff;
+}
+.status-card .status-card-text {
+    font-size: 0.75em;
+    color: rgba(255, 255, 255, 0.8);
+}
+.status-card.disconnected {
+    background: rgba(239, 107, 107, 0.15);
+    border-color: rgba(239, 107, 107, 0.7);
+}
+.trainer-status {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 0.7em;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+}
+.trainer-status-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: rgba(124, 107, 239, 0.6);
+    border: 1px solid rgba(255, 255, 255, 0.45);
+}
+.trainer-status.connected .trainer-status-dot {
+    background: #53e89b;
+    box-shadow: 0 0 6px rgba(83, 232, 155, 0.8);
+}
+.trainer-status.disconnected .trainer-status-dot {
+    background: #ef6b6b;
+    box-shadow: 0 0 6px rgba(239, 107, 107, 0.8);
+}
+.camera-controls { margin-top: 15px; }
+select {
+    width: 100%; padding: 10px;
+    background: rgba(188, 190, 236, 0.1);
+    color: #fff; border: 1px solid rgba(188, 190, 236, 0.25);
+    border-radius: 6px; cursor: pointer;
+    font-size: 0.9em;
+}
+select option { background: var(--wb-accent); color: #fff; }
+.robot-selector { margin-bottom: 20px; }
+.scene-summary {
+    margin-top: 12px;
+    font-size: 0.8em;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+    color: rgba(255, 255, 255, 0.75);
+}
+.scene-summary strong {
+    font-size: 0.9em;
+    opacity: 0.95;
+}
+.robot-info {
+    padding: 10px;
+    background: rgba(139, 127, 239, 0.2);
+    border-radius: 6px;
+    margin-top: 10px;
+    font-size: 0.8em;
+    border: 1px solid rgba(139, 127, 239, 0.3);
+}
+.arm-controls { display: none; }
+.arm-controls.active { display: block; }
+.locomotion-controls { display: block; }
+.locomotion-controls.hidden { display: none; }
+.gripper-btns { display: flex; gap: 10px; margin: 10px 0; }
+.gripper-btns button { flex: 1; }
+.target-sliders { margin: 10px 0; }
+.target-sliders .slider-row { margin-bottom: 8px; }
+.target-sliders label { width: 20px; display: inline-block; }
+.mode-toggle { display: flex; gap: 5px; margin-bottom: 15px; }
+.mode-toggle button {
+    flex: 1; padding: 8px;
+    background: rgba(188, 190, 236, 0.1);
+    border: 1px solid rgba(188, 190, 236, 0.2);
+}
+.mode-toggle button.active {
+    background: rgba(139, 127, 239, 0.5);
+    border-color: rgba(139, 127, 239, 0.7);
+}
+.ik-controls, .joint-controls { display: none; }
+.ik-controls.active, .joint-controls.active { display: block; }
+.joint-sliders .slider-row { margin-bottom: 6px; }
+.joint-sliders label { width: 40px; display: inline-block; font-size: 0.75em; }
+
+/* Jogging controls */
+.jog-controls { margin: 10px 0; }
+.jog-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+.jog-row label {
+    width: 30px;
+    display: inline-block;
+    font-size: 0.85em;
+    text-align: left;
+}
+.jog-btn {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    font-size: 1.5em;
+    font-weight: bold;
+    background: rgba(188, 190, 236, 0.15);
+    color: var(--wb-secondary);
+    border: 1px solid rgba(188, 190, 236, 0.3);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.15s;
+    user-select: none;
+    -webkit-user-select: none;
+    flex-shrink: 0;
+}
+.jog-btn:hover {
+    background: rgba(139, 127, 239, 0.3);
+    border-color: rgba(139, 127, 239, 0.5);
+    transform: scale(1.05);
+}
+.jog-btn:active {
+    background: rgba(139, 127, 239, 0.5);
+    border-color: rgba(139, 127, 239, 0.7);
+    transform: scale(0.95);
+}
+.jog-row .val-display {
+    flex-grow: 1;
+    width: auto;
+    text-align: center;
+    font-family: monospace;
+    font-size: 0.9em;
+    color: #fff;
+}
+        </style>

frontend/src/types/protocol.js

@@ -0,0 +1,13 @@
+/**
+ * Protocol type definitions for Nova-Sim WebSocket API.
+ *
+ * TypeScript equivalents of Python protocol_types.py
+ */
+// Helper to check if observation is UR5-specific
+export function isUR5Observation(obs) {
+    return 'end_effector' in obs;
+}
+// Helper to check if robot is arm type
+export function isArmRobot(robot) {
+    return robot === 'ur5' || robot === 'ur5_t_push';
+}

frontend/src/types/protocol.ts

@@ -0,0 +1,416 @@
+/**
+ * Protocol type definitions for Nova-Sim WebSocket API.
+ *
+ * TypeScript equivalents of Python protocol_types.py
+ */
+
+// ============================================================================
+// Common Types
+// ============================================================================
+
+export type RobotType = 'g1' | 'spot' | 'ur5' | 'ur5_t_push';
+export type SceneType = string | null;
+export type ControlMode = 'ik' | 'joint';
+
+// ============================================================================
+// Action Messages (Client -> Server)
+// ============================================================================
+
+export interface ActionData {
+  // Cartesian translation velocities (m/s for UR5, normalized for locomotion)
+  vx?: number;
+  vy?: number;
+  vz?: number;
+
+  // Rotation velocity (rad/s for UR5, normalized for locomotion)
+  vyaw?: number;
+
+  // Cartesian rotation velocities (rad/s, UR5 only)
+  vrx?: number;
+  vry?: number;
+  vrz?: number;
+
+  // Joint velocities (rad/s, UR5 only)
+  j1?: number;
+  j2?: number;
+  j3?: number;
+  j4?: number;
+  j5?: number;
+  j6?: number;
+
+  // Gripper position (0=open, 255=closed, UR5 only)
+  gripper?: number;
+}
+
+export interface ActionMessage {
+  type: 'action';
+  data: ActionData;
+}
+
+export interface TeleopActionData {
+  vx?: number;
+  vy?: number;
+  vz?: number;
+  // Backward compatibility: accept old dx/dy/dz format
+  dx?: number;
+  dy?: number;
+  dz?: number;
+}
+
+export interface TeleopActionMessage {
+  type: 'teleop_action';
+  data: TeleopActionData;
+}
+
+// ============================================================================
+// Other Client -> Server Messages
+// ============================================================================
+
+export interface ResetData {
+  seed?: number | null;
+}
+
+export interface ResetMessage {
+  type: 'reset';
+  data?: ResetData;
+}
+
+export interface SwitchRobotData {
+  robot: RobotType;
+  scene?: string | null;
+}
+
+export interface SwitchRobotMessage {
+  type: 'switch_robot';
+  data: SwitchRobotData;
+}
+
+export interface HomeMessage {
+  type: 'home';
+}
+
+export interface StopHomeMessage {
+  type: 'stop_home';
+}
+
+export interface CameraRotateData {
+  action: 'rotate';
+  dx: number;
+  dy: number;
+}
+
+export interface CameraZoomData {
+  action: 'zoom';
+  dz: number;
+}
+
+export interface CameraPanData {
+  action: 'pan';
+  dx: number;
+  dy: number;
+}
+
+export interface CameraSetDistanceData {
+  action: 'set_distance';
+  distance: number;
+}
+
+export type CameraData = CameraRotateData | CameraZoomData | CameraPanData | CameraSetDistanceData;
+
+export interface CameraMessage {
+  type: 'camera';
+  data: CameraData;
+}
+
+export interface CameraFollowData {
+  follow: boolean;
+}
+
+export interface CameraFollowMessage {
+  type: 'camera_follow';
+  data: CameraFollowData;
+}
+
+// ============================================================================
+// UR5-Specific Client -> Server Messages
+// ============================================================================
+
+export interface ArmTargetData {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface ArmTargetMessage {
+  type: 'arm_target';
+  data: ArmTargetData;
+}
+
+export interface ArmOrientationData {
+  roll: number;
+  pitch: number;
+  yaw: number;
+}
+
+export interface ArmOrientationMessage {
+  type: 'arm_orientation';
+  data: ArmOrientationData;
+}
+
+export interface UseOrientationData {
+  enabled: boolean;
+}
+
+export interface UseOrientationMessage {
+  type: 'use_orientation';
+  data: UseOrientationData;
+}
+
+export interface JointPositionsData {
+  positions: number[]; // Array of 6 joint angles in radians
+}
+
+export interface JointPositionsMessage {
+  type: 'joint_positions';
+  data: JointPositionsData;
+}
+
+export interface ControlModeData {
+  mode: ControlMode;
+}
+
+export interface ControlModeMessage {
+  type: 'control_mode';
+  data: ControlModeData;
+}
+
+export interface GripperData {
+  action?: 'open' | 'close';
+  value?: number; // 0-255
+}
+
+export interface GripperMessage {
+  type: 'gripper';
+  data: GripperData;
+}
+
+export interface SetNovaModeData {
+  enabled?: boolean; // Legacy: enable/disable all Nova features
+  state_streaming?: boolean;
+  ik?: boolean;
+}
+
+export interface SetNovaModeMessage {
+  type: 'set_nova_mode';
+  data: SetNovaModeData;
+}
+
+// Jogging messages
+export interface JogParams {
+  joint?: number; // 1-6
+  axis?: 'x' | 'y' | 'z';
+  direction?: '+' | '-';
+  velocity?: number;
+}
+
+export interface StartJogData {
+  jog_type: 'joint' | 'cartesian_translation' | 'cartesian_rotation';
+  params: JogParams;
+}
+
+export interface StartJogMessage {
+  type: 'start_jog';
+  data: StartJogData;
+}
+
+export interface StopJogMessage {
+  type: 'stop_jog';
+}
+
+// ============================================================================
+// Trainer Messages (Client -> Server)
+// ============================================================================
+
+export interface TrainerIdentityData {
+  trainer_id: string;
+}
+
+export interface TrainerIdentityMessage {
+  type: 'trainer_identity';
+  data: TrainerIdentityData;
+}
+
+export interface TrainerNotificationData {
+  message?: string;
+  level?: 'info' | 'warning' | 'error';
+}
+
+export interface TrainerNotificationMessage {
+  type: 'notification';
+  data: TrainerNotificationData;
+}
+
+export interface EpisodeControlData {
+  action: 'terminate' | 'truncate';
+}
+
+export interface EpisodeControlMessage {
+  type: 'episode_control';
+  data: EpisodeControlData;
+}
+
+// ============================================================================
+// Server -> Client Messages
+// ============================================================================
+
+export interface Position {
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface Quaternion {
+  w: number;
+  x: number;
+  y: number;
+  z: number;
+}
+
+export interface EulerAngles {
+  roll: number;
+  pitch: number;
+  yaw: number;
+}
+
+export interface LocomotionObservation {
+  position: Position;
+  orientation: Quaternion;
+}
+
+export interface UR5Observation {
+  end_effector: Position;
+  ee_orientation: Quaternion;
+  ee_target: Position;
+  ee_target_orientation: EulerAngles;
+  gripper: number; // 0-255
+  joint_positions: number[]; // 6 joint angles
+  joint_targets: number[]; // 6 target joint angles
+}
+
+export type Observation = LocomotionObservation | UR5Observation;
+
+export interface NovaApiStatus {
+  connected: boolean;
+  state_streaming: boolean;
+  ik: boolean;
+  available?: boolean;
+  enabled?: boolean;
+}
+
+export interface StateData {
+  robot: RobotType;
+  scene: string | null;
+  observation: Observation;
+  steps: number;
+  reward?: number;
+  teleop_action: ActionData;
+  trainer_connected: boolean;
+
+  // UR5-specific fields
+  control_mode?: ControlMode;
+  nova_api?: NovaApiStatus;
+}
+
+export interface StateMessage {
+  type: 'state';
+  data: StateData;
+}
+
+export interface TrainerStatusData {
+  connected: boolean;
+  trainer_count?: number;
+  identities?: string[];
+}
+
+export interface TrainerStatusMessage {
+  type: 'trainer_status';
+  data: TrainerStatusData;
+}
+
+export interface TrainerNotificationBroadcast {
+  type: 'trainer_notification';
+  data: TrainerNotificationData;
+}
+
+// ============================================================================
+// HTTP Response Types
+// ============================================================================
+
+export interface CameraFeed {
+  name: string;
+  label: string;
+  url?: string;
+  description?: string;
+}
+
+export interface EnvResponse {
+  robot: RobotType;
+  scene?: string;
+  has_gripper?: boolean;
+  control_mode?: ControlMode;
+  action_space?: any;
+  observation_space?: any;
+  camera_feeds?: CameraFeed[];
+  home_pose?: number[];
+}
+
+export interface CommandInfo {
+  name: string;
+  description: string;
+}
+
+export interface MetadataResponse {
+  robots: string[];
+  commands: CommandInfo[];
+}
+
+// ============================================================================
+// Union Types for All Messages
+// ============================================================================
+
+export type ClientMessage =
+  | ActionMessage
+  | TeleopActionMessage
+  | ResetMessage
+  | SwitchRobotMessage
+  | HomeMessage
+  | StopHomeMessage
+  | CameraMessage
+  | CameraFollowMessage
+  | ArmTargetMessage
+  | ArmOrientationMessage
+  | UseOrientationMessage
+  | JointPositionsMessage
+  | ControlModeMessage
+  | GripperMessage
+  | SetNovaModeMessage
+  | StartJogMessage
+  | StopJogMessage
+  | TrainerIdentityMessage
+  | TrainerNotificationMessage
+  | EpisodeControlMessage;
+
+export type ServerMessage =
+  | StateMessage
+  | TrainerStatusMessage
+  | TrainerNotificationBroadcast;
+
+// Helper to check if observation is UR5-specific
+export function isUR5Observation(obs: Observation): obs is UR5Observation {
+  return 'end_effector' in obs;
+}
+
+// Helper to check if robot is arm type
+export function isArmRobot(robot: RobotType): boolean {
+  return robot === 'ur5' || robot === 'ur5_t_push';
+}

frontend/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "moduleResolution": "bundler",
+    "strict": false,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": false,
+    "noImplicitAny": false,
+    "strictNullChecks": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

frontend/vite.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  root: 'src',
+  base: '/nova-sim/',
+  build: {
+    outDir: '../dist',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 3004,
+    strictPort: true,
+    proxy: {
+      '^/nova-sim/api/.*': {
+        target: 'http://localhost:5001',
+        changeOrigin: true,
+        ws: true,
+        rewrite: (path) => path,
+      },
+    },
+  },
+  appType: 'spa',
+})

server.log

@@ -0,0 +1,873 @@
+Loaded RL policy from /Users/georgpuschel/repos/robot-ml/nova-sim/robots/g1/policy/motion.pt
+Starting simulation loop...
+ * Serving Flask app 'mujoco_server'
+ * Debug mode: off
+WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
+ * Running on all addresses (0.0.0.0)
+ * Running on http://127.0.0.1:3004
+ * Running on http://172.31.10.66:3004
+Press CTRL+C to quit
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1 HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/video_feed HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/metadata HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/env HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/video_feed?ts=1768995073211 HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/env HTTP/1.1" 200 -
+127.0.0.1 - - [21/Jan/2026 12:31:13] "GET /nova-sim/api/v1/env HTTP/1.1" 200 -
+WebSocket client connected
+[WS] Received message type: camera
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: camera
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[WS] Received message type: switch_robot
+Robot switch requested: ur5 / scene: scene_with_gripper
+Switching to robot: ur5
+Nova API credentials detected - attempting bidirectional control
+[Nova] Configuring Nova API with config: {'use_state_stream': True, 'use_ik': False, 'use_jogging': True}
+[Nova] use_state_stream=True, use_ik=False, use_jogging=True
+[Nova] Attempting to load config from environment variables...
+[Nova] Config loaded from env: https://vaxtlucd.instance.wandelbots.io, controller=ur5e, motion_group=0@ur5e
+[Nova] Creating NovaApiClient...
+[Nova] Client created successfully. State streaming: True, IK: False, Jogging: True
+[Nova] Starting state stream...
+[Nova] Starting state stream thread...
+[Nova] Connecting to state stream: wss://vaxtlucd.instance.wandelbots.io/api/v2/cells/cell/controllers/ur5e/motion-groups/0@ur5e/state-stream?response_rate=100
+[Nova] State stream started successfully
+[Nova] WARNING: State streaming enabled - simulation is now a digital twin.
+[Nova]          Robot state comes from Nova API, local targets/IK are ignored.
+[Nova] Creating NovaJogger...
+[Nova Jogger] Ready to connect (will connect on first jog command)
+[Nova] Jogger connected successfully
+[Nova] Jogging enabled - UI can send directional jog commands
+[Nova] Configuring Nova API with config: {'use_state_stream': True, 'use_ik': False, 'use_jogging': True}
+[Nova] State stream connected successfully
+[Nova] use_state_stream=True, use_ik=False, use_jogging=True
+[Nova] Attempting to load config from environment variables...
+[Nova] Config loaded from env: https://vaxtlucd.instance.wandelbots.io, controller=ur5e, motion_group=0@ur5e
+[Nova] Creating NovaApiClient...
+[Nova] Client created successfully. State streaming: True, IK: False, Jogging: True
+[Nova] Starting state stream...
+[Nova] Starting state stream thread...
+[Nova] Connecting to state stream: wss://vaxtlucd.instance.wandelbots.io/api/v2/cells/cell/controllers/ur5e/motion-groups/0@ur5e/state-stream?response_rate=100127.0.0.1 - - [21/Jan/2026 12:31:31] "GET /nova-sim/api/v1/env HTTP/1.1" 200 -
+[Nova] State stream started successfully
+[Nova] WARNING: State streaming enabled - simulation is now a digital twin.
+[Nova]          Robot state comes from Nova API, local targets/IK are ignored.
+[Nova] Creating NovaJogger...
+[Nova Jogger] Ready to connect (will connect on first jog command)
+[Nova] Jogger connected successfully
+[Nova] Jogging enabled - UI can send directional jog commands
+
+Switched to ur5
+[Nova] State stream connected successfully
+[Nova] State stream update (seq=20357380, 6 joints) payload={"seq": 20357380, "joint_position": [-3.7937827110290527, -1.5640392303466797, 1.8428640365600586, -1.4148643016815186, -1.725486397743225, -0.5821775794029236], "timestamp": "2026-01-21T11:31:31.701604829Z"}
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Connecting to cartesian endpoint: wss://vaxtlucd.instance.wandelbots.io/api/v1/cells/cell/motion-groups/move-tcp
+[Nova Jogger] Connected to cartesian endpoint
+[Nova Jogger] Cartesian X translation at 50 mm/s (dir: 1)
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Stopped (zero velocities sent)
+[WS] Received message type: switch_robot
+Robot switch requested: spot / scene: scene
+Switching to robot: spot
+Quadruped-PyMPC components loaded from local standalone implementation
+PyMPC gait generator initialized
+Switched to spot
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': -0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': -0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': -0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': -0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': -1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': -1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': -1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': -1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': -1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': -1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': -0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': 1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': 1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Nova] State stream update (seq=20358760, 6 joints) payload={"seq": 20358760, "joint_position": [-3.7214279174804688, -1.4229689836502075, 1.6873574256896973, -1.3912395238876343, -1.6946996450424194, -0.5160554051399231], "timestamp": "2026-01-21T11:31:41.768234831Z"}
+[Broadcast] Non-zero teleop values: {'vy': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': 1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': 1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vyaw': 1.2}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vyaw': 1.2}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vy': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: switch_robot
+Robot switch requested: g1 / scene: scene
+Switching to robot: g1
+Switched to g1
+[WS] Received message type: camera
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0127.0.0.1 - - [21/Jan/2026 12:31:51] "GET /nova-sim/api/v1/env HTTP/1.1" 200 -
+
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[Broadcast] Non-zero teleop values: {'vx': 0.8}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.8}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[WS] Received message type: command
+[WS] Received message type: teleop_action
+[Broadcast] Non-zero teleop values: {'vx': 0.005}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': 0.005}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: command
+[WS] Received message type: switch_robot
+Robot switch requested: ur5_t_push / scene: scene_t_push
+[WS] Received message type: set_nova_mode
+Switching to robot: ur5_t_push
+Nova API credentials detected - attempting bidirectional control
+[Nova] State stream update (seq=20360140, 6 joints) payload={"seq": 20360140, "joint_position": [-3.7214279174804688, -1.4229689836502075, 1.6873574256896973, -1.3912395238876343, -1.6946996450424194, -0.5160554051399231], "timestamp": "2026-01-21T11:31:51.841308365Z"}
+[Nova] Configuring Nova API with config: {'use_state_stream': True, 'use_ik': False, 'use_jogging': True}
+[Nova] use_state_stream=True, use_ik=False, use_jogging=True
+[Nova] Attempting to load config from environment variables...
+[Nova] Config loaded from env: https://vaxtlucd.instance.wandelbots.io, controller=ur5e, motion_group=0@ur5e
+[Nova] Creating NovaApiClient...
+[Nova] Client created successfully. State streaming: True, IK: False, Jogging: True
+[Nova] Starting state stream...
+[Nova] Starting state stream thread...
+[Nova] Connecting to state stream: wss://vaxtlucd.instance.wandelbots.io/api/v2/cells/cell/controllers/ur5e/motion-groups/0@ur5e/state-stream?response_rate=100
+[Nova] State stream started successfully
+[Nova] WARNING: State streaming enabled - simulation is now a digital twin.
+[Nova]          Robot state comes from Nova API, local targets/IK are ignored.
+[Nova] Creating NovaJogger...
+[Nova Jogger] Ready to connect (will connect on first jog command)
+[Nova] Jogger connected successfully
+[Nova] Jogging enabled - UI can send directional jog commands
+[Nova] Configuring Nova API with config: {'use_state_stream': True, 'use_ik': False, 'use_jogging': True}
+[Nova] State stream connected successfully
+[Nova] use_state_stream=True, use_ik=False, use_jogging=True
+[Nova] Attempting to load config from environment variables...
+[Nova] Config loaded from env: https://vaxtlucd.instance.wandelbots.io, controller=ur5e, motion_group=0@ur5e
+[Nova] Creating NovaApiClient...
+[Nova] Client created successfully. State streaming: True, IK: False, Jogging: True
+[Nova] Starting state stream...
+[Nova] Starting state stream thread...
+[Nova] Connecting to state stream: wss://vaxtlucd.instance.wandelbots.io/api/v2/cells/cell/controllers/ur5e/motion-groups/0@ur5e/state-stream?response_rate=100
+[Nova] State stream started successfully
+[Nova] WARNING: State streaming enabled - simulation is now a digital twin.
+[Nova]          Robot state comes from Nova API, local targets/IK are ignored.
+[Nova] Creating NovaJogger...
+[Nova Jogger] Ready to connect (will connect on first jog command)
+[Nova] Jogger connected successfully
+[Nova] Jogging enabled - UI can send directional jog commands
+Switched to ur5_t_push
+[Nova] State stream connected successfully
+[Nova] State stream update (seq=20360191, 6 joints) payload={"seq": 20360191, "joint_position": [-3.7214279174804688, -1.4229689836502075, 1.6873574256896973, -1.3912395238876343, -1.6946996450424194, -0.5160554051399231], "timestamp": "2026-01-21T11:31:52.214014194Z"}
+[WS] Received message type: set_nova_mode
+[Nova] Configuring Nova API with config: {'use_state_stream': True, 'use_ik': False, 'use_jogging': True}
+[Nova] use_state_stream=True, use_ik=False, use_jogging=True
+[Nova] Attempting to load config from environment variables...
+[Nova] Config loaded from env: https://vaxtlucd.instance.wandelbots.io, controller=ur5e, motion_group=0@ur5e
+[Nova] Creating NovaApiClient...
+[Nova] Client created successfully. State streaming: True, IK: False, Jogging: True
+[Nova] Starting state stream...
+[Nova] Starting state stream thread...
+[Nova] Connecting to state stream: wss://vaxtlucd.instance.wandelbots.io/api/v2/cells/cell/controllers/ur5e/motion-groups/0@ur5e/state-stream?response_rate=100
+[Nova] State stream started successfully
+[Nova] WARNING: State streaming enabled - simulation is now a digital twin.
+[Nova]          Robot state comes from Nova API, local targets/IK are ignored.
+[Nova] Creating NovaJogger...
+[Nova Jogger] Ready to connect (will connect on first jog command)
+[Nova] Jogger connected successfully
+[Nova] Jogging enabled - UI can send directional jog commands
+[Nova] State stream connected successfully
+[Nova] State stream update (seq=20360550, 6 joints) payload={"seq": 20360550, "joint_position": [-3.7214279174804688, -1.4229689836502075, 1.6873574256896973, -1.3912395238876343, -1.6946996450424194, -0.5160554051399231], "timestamp": "2026-01-21T11:31:54.840564316Z"}
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Connecting to cartesian endpoint: wss://vaxtlucd.instance.wandelbots.io/api/v1/cells/cell/motion-groups/move-tcp
+[Nova Jogger] Connected to cartesian endpoint
+[Nova Jogger] Cartesian Y translation at 50 mm/s (dir: -1)
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Stopped (zero velocities sent)
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Cartesian X translation at 50 mm/s (dir: -1)
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Stopped (zero velocities sent)
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: camera
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Cartesian X translation at 50 mm/s (dir: -1)
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Nova] State stream update (seq=20361508, 6 joints) payload={"seq": 20361508, "joint_position": [-3.7214279174804688, -1.4229689836502075, 1.6873574256896973, -1.3912395238876343, -1.6946996450424194, -0.5160554051399231], "timestamp": "2026-01-21T11:32:01.860604486Z"}
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Stopped (zero velocities sent)
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Cartesian Y translation at 50 mm/s (dir: -1)
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[Nova Jogger] Receive error: no close frame received or sent
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vx': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vx': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': 0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': 0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Broadcast] Non-zero teleop values: {'vy': -0.05}
+[Broadcast] Sending to 1 clients, teleop non-zero values: {'vy': -0.05}
+[Broadcast] Actual JSON teleop_action j3 = 0.0
+[WS] Received message type: stop_jog
+[Nova Jogger] Failed to stop: no close frame received or sent
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'y', 'direction': '+', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[WS] Received message type: start_jog
+[Server] Received start_jog: jog_type=cartesian_translation, params={'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}
+[Nova Jogger] Failed to start cartesian translation: no close frame received or sent
+[Server] Failed to start jog: cartesian_translation, {'axis': 'x', 'direction': '-', 'velocity': 50, 'tcp_id': 'Flange', 'coord_system_id': 'world'}

templates/index.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Nova Sim - Wandelbots Robot Simulator</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script type="module" crossorigin src="/nova-sim/assets/index-CwMJ-B8R.js"></script>
+    <link rel="stylesheet" crossorigin href="/nova-sim/assets/index-DoqnwcEU.css">
+</head>
+<body>
+    <!-- Video viewport -->
+    <div class="video-container" id="viewport">
+        <img src="/nova-sim/api/v1/video_feed" draggable="false" alt="Robot simulation video feed">
+    </div>
+
+    <!-- Main control overlay -->
+    <div class="overlay" id="main_overlay">
+        <!-- Content will be generated by JavaScript -->
+    </div>
+
+    <!-- State panel -->
+    <div class="state-panel" id="state_panel">
+        <!-- Content will be generated by JavaScript -->
+    </div>
+
+    <!-- Camera panel -->
+    <div class="camera-panel" id="camera_panel">
+        <!-- Content will be generated by JavaScript -->
+    </div>
+
+    <!-- Overlay tiles for auxiliary camera feeds -->
+    <div class="overlay-tiles" id="overlay_tiles">
+        <!-- Generated dynamically -->
+    </div>
+
+    <!-- Notification area -->
+    <div class="rl-notifications" id="rl_notifications">
+        <!-- Toast notifications appear here -->
+    </div>
+</body>
+</html>