webrtc_example-dev

Running

cduss Claude Opus 4.5 commited on Feb 3

Commit

bdbd6d6

1 Parent(s): 9dcd4eb

Redesign as full telepresence app

Features:
- Modern dark UI with video as main focus
- Live state bar showing all robot values
- Motor control with visual active state
- Head/body control with sliders
- Antenna control with sliders
- Animations (wake up, sleep)
- Sound playback with presets
- Recording controls
- Auto-refresh state every 2s
- Activity log

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Files changed (1) hide show

index.html +738 -613

index.html CHANGED Viewed

@@ -3,328 +3,592 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>Reachy Mini WebRTC Dashboard</title>
     <style>
-        * { box-sizing: border-box; }
         body {
             font-family: system-ui, -apple-system, sans-serif;
-            margin: 0;
-            padding: 20px;
-            background: #1a1a2e;
             color: #eee;
             min-height: 100vh;
         }
-        .container { max-width: 1200px; margin: 0 auto; }
-        h1 { color: #00d4ff; margin-bottom: 10px; }
-        .subtitle { color: #888; margin-bottom: 30px; }
-        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
-        @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
-        .card {
             background: #16213e;
-            border-radius: 12px;
-            padding: 20px;
-            border: 1px solid #0f3460;
         }
-        .card h2 { margin-top: 0; color: #00d4ff; font-size: 1.2em; }
-        .status {
-            display: inline-block;
             padding: 4px 12px;
-            border-radius: 20px;
             font-size: 0.85em;
-            font-weight: 500;
         }
-        .status.connected { background: #00c853; color: #000; }
-        .status.disconnected { background: #ff5252; color: #fff; }
-        .status.connecting { background: #ffc107; color: #000; }
-        input, button {
-            padding: 10px 16px;
-            border-radius: 8px;
-            border: 1px solid #0f3460;
-            font-size: 1em;
         }
-        input {
-            background: #0f3460;
-            color: #fff;
             width: 100%;
-            margin-bottom: 10px;
         }
-        button {
-            background: #00d4ff;
-            color: #000;
             cursor: pointer;
-            font-weight: 600;
-            transition: background 0.2s;
         }
-        button:hover { background: #00a8cc; }
-        button:disabled { background: #555; cursor: not-allowed; }
-        .btn-hf {
-            background: #ff9d00;
-            color: #000;
-            width: 100%;
-            padding: 12px 20px;
-            font-size: 1.1em;
         }
-        .btn-hf:hover { background: #ffb340; }
-        .log {
-            background: #0a0a1a;
-            border-radius: 8px;
-            padding: 12px;
-            font-family: monospace;
-            font-size: 0.85em;
-            max-height: 200px;
-            overflow-y: auto;
-            white-space: pre-wrap;
-            word-break: break-all;
         }
-        .log-entry { margin-bottom: 4px; }
-        .log-entry.error { color: #ff5252; }
-        .log-entry.success { color: #00c853; }
-        .log-entry.info { color: #00d4ff; }
-        video {
-            width: 100%;
-            background: #000;
             border-radius: 8px;
-            aspect-ratio: 16/9;
         }
-        .controls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
-        .controls button { flex: 1; min-width: 100px; }
-        .control-btn { min-width: 80px; }
-        input[type="range"] {
             -webkit-appearance: none;
-            height: 8px;
             background: #0f3460;
-            border-radius: 4px;
-            margin-top: 8px;
         }
-        input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
             background: #00d4ff;
             border-radius: 50%;
             cursor: pointer;
         }
-        input[type="checkbox"] {
-            width: 18px;
-            height: 18px;
-            vertical-align: middle;
         }
-        .producer-list { margin: 10px 0; }
-        .producer-item {
             background: #0f3460;
-            padding: 10px;
             border-radius: 8px;
-            margin-bottom: 8px;
             cursor: pointer;
-            transition: background 0.2s;
         }
-        .producer-item:hover { background: #1a4a80; }
-        .producer-item.selected { border: 2px solid #00d4ff; }
-        .user-info {
             display: flex;
             align-items: center;
-            gap: 10px;
-            padding: 10px;
             background: #0f3460;
             border-radius: 8px;
-            margin-bottom: 15px;
         }
-        .user-info .username { flex: 1; font-weight: 500; }
-        .user-info button { padding: 6px 12px; font-size: 0.9em; }
-        #login-view, #main-view { display: none; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1>Reachy Mini WebRTC Dashboard</h1>
-        <p class="subtitle">Connect to your robot via central signaling server</p>
-        <!-- Login View -->
-        <div id="login-view">
-            <div class="card" style="max-width: 400px; margin: 50px auto; text-align: center;">
-                <h2>Sign In Required</h2>
-                <p style="color: #888; margin-bottom: 20px;">Sign in with your HuggingFace account to connect to your robot.</p>
-                <button class="btn-hf" onclick="loginToHuggingFace()">
-                    Sign in with Hugging Face
-                </button>
-            </div>
         </div>
-        <!-- Main View (after login) -->
-        <div id="main-view">
-            <div class="grid">
-                <!-- Connection Panel -->
-                <div class="card">
-                    <h2>1. Connection</h2>
-                    <div class="user-info">
-                        <span>Signed in as</span>
-                        <span class="username" id="username">@user</span>
-                        <button onclick="logout()">Sign out</button>
-                    </div>
-                    <div class="controls">
-                        <button id="connectBtn" onclick="connectSignaling()">Connect to Server</button>
-                        <button id="disconnectBtn" onclick="disconnectSignaling()" disabled>Disconnect</button>
-                    </div>
-                    <div style="margin-top: 15px;">
-                        <span>Status: </span>
-                        <span id="signalingStatus" class="status disconnected">Disconnected</span>
                     </div>
-                    <h3 style="margin-top: 20px; font-size: 1em;">Available Robots:</h3>
-                    <div id="producerList" class="producer-list">
-                        <em style="color: #666;">Connect to signaling server first</em>
                     </div>
                 </div>
-                <!-- Video Panel -->
-                <div class="card">
-                    <h2>2. Video Stream</h2>
-                    <video id="remoteVideo" autoplay playsinline muted></video>
-                    <div class="controls">
-                        <button id="startStreamBtn" onclick="startStream()" disabled>Start Stream</button>
-                        <button id="stopStreamBtn" onclick="stopStream()" disabled>Stop Stream</button>
                     </div>
-                    <div style="margin-top: 15px;">
-                        <span>WebRTC: </span>
-                        <span id="webrtcStatus" class="status disconnected">Not Connected</span>
                     </div>
-                </div>
-                <!-- Control Panel -->
-                <div class="card">
-                    <h2>3. Motor Control</h2>
-                    <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Motor control (must enable before moving)</p>
-                    <div class="controls" style="margin-bottom: 15px;">
-                        <button id="enableMotorsBtn" onclick="setMotorMode('enabled')" disabled style="background: #00c853;">Enable</button>
-                        <button id="disableMotorsBtn" onclick="setMotorMode('disabled')" disabled style="background: #ff5252;">Disable</button>
-                        <button id="gravityBtn" onclick="setMotorMode('gravity_compensation')" disabled style="background: #ffc107; color: #000;">Gravity Comp</button>
                     </div>
-                    <div style="margin-bottom: 15px;">
-                        <span>Motors: </span>
-                        <span id="motorStatus" class="status disconnected">Unknown</span>
-                        <button onclick="getState()" style="margin-left: 10px; padding: 4px 8px; font-size: 0.8em;">Refresh State</button>
                     </div>
                 </div>
-                <!-- Head & Body Control -->
-                <div class="card">
-                    <h2>4. Head & Body Control</h2>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 15px;">
-                        <div>
-                            <label>Yaw (deg):</label>
-                            <input type="number" id="yawInput" value="0" min="-45" max="45">
-                        </div>
-                        <div>
-                            <label>Pitch (deg):</label>
-                            <input type="number" id="pitchInput" value="0" min="-30" max="30">
-                        </div>
-                        <div>
-                            <label>Body Yaw (deg):</label>
-                            <input type="number" id="bodyYawInput" value="0" min="-45" max="45">
                         </div>
                     </div>
-                    <div style="margin-bottom: 15px;">
-                        <label>Duration (s): </label>
-                        <input type="number" id="durationInput" value="0.5" min="0.1" max="5" step="0.1" style="width: 80px;">
-                        <label style="margin-left: 10px;">
-                            <input type="checkbox" id="smoothMoveCheck"> Smooth move (goto)
-                        </label>
                     </div>
-                    <div class="controls">
-                        <button class="control-btn" onclick="sendHeadPose()" disabled>Send Pose</button>
-                        <button class="control-btn" onclick="centerHead()" disabled>Center</button>
-                        <button class="control-btn" onclick="setBodyYaw()" disabled>Set Body Yaw</button>
                     </div>
                 </div>
-                <!-- Antennas Control -->
-                <div class="card">
-                    <h2>5. Antennas</h2>
-                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px;">
-                        <div>
-                            <label>Right Antenna: <span id="rightAntennaVal">0</span>°</label>
-                            <input type="range" id="rightAntennaInput" value="0" min="-175" max="175" style="width: 100%;" oninput="document.getElementById('rightAntennaVal').textContent = this.value">
                         </div>
-                        <div>
-                            <label>Left Antenna: <span id="leftAntennaVal">0</span>°</label>
-                            <input type="range" id="leftAntennaInput" value="0" min="-175" max="175" style="width: 100%;" oninput="document.getElementById('leftAntennaVal').textContent = this.value">
                         </div>
                     </div>
-                    <div class="controls">
-                        <button class="control-btn" onclick="sendAntennas()" disabled>Set Antennas</button>
-                        <button class="control-btn" onclick="resetAntennas()" disabled>Reset (0°)</button>
                     </div>
                 </div>
-                <!-- Animations & Audio -->
-                <div class="card">
-                    <h2>6. Animations & Audio</h2>
-                    <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Pre-built animations</p>
-                    <div class="controls" style="margin-bottom: 15px;">
-                        <button class="control-btn" onclick="wakeUp()" disabled style="background: #00c853;">Wake Up</button>
-                        <button class="control-btn" onclick="goToSleep()" disabled style="background: #9c27b0;">Go to Sleep</button>
                     </div>
-                    <p style="color: #888; font-size: 0.9em; margin-bottom: 10px;">Play sound</p>
-                    <div style="display: flex; gap: 10px;">
-                        <input type="text" id="soundFileInput" placeholder="Sound file (e.g., wake_up.wav)" style="flex: 1;">
-                        <button class="control-btn" onclick="playSound()" disabled>Play</button>
                     </div>
                 </div>
                 <!-- Recording -->
-                <div class="card">
-                    <h2>7. Recording</h2>
-                    <div style="margin-bottom: 15px;">
-                        <span>Recording: </span>
-                        <span id="recordingStatus" class="status disconnected">Stopped</span>
-                    </div>
-                    <div class="controls">
-                        <button class="control-btn" onclick="startRecording()" disabled style="background: #f44336;">Start Recording</button>
-                        <button class="control-btn" onclick="stopRecording()" disabled>Stop Recording</button>
                     </div>
                 </div>
-                <!-- Log Panel -->
-                <div class="card">
-                    <h2>Debug Log</h2>
-                    <div id="logArea" class="log"></div>
-                    <button onclick="clearLog()" style="margin-top: 10px; width: 100%;">Clear Log</button>
-                </div>
             </div>
         </div>
     </div>
-    <!-- HuggingFace Hub library for OAuth -->
     <script type="module">
         import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.15.2/+esm";
-        // Central signaling server (HTTP/SSE instead of WebSocket)
         const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space';
         // State
@@ -335,180 +599,155 @@
         let currentSessionId = null;
         let userToken = null;
         let currentUser = null;
-        // Make functions available globally
         window.loginToHuggingFace = loginToHuggingFace;
         window.logout = logout;
         window.connectSignaling = connectSignaling;
-        window.disconnectSignaling = disconnectSignaling;
         window.startStream = startStream;
         window.stopStream = stopStream;
         window.sendHeadPose = sendHeadPose;
         window.centerHead = centerHead;
-        window.setBodyYaw = setBodyYaw;
-        window.setMotorMode = setMotorMode;
         window.sendAntennas = sendAntennas;
         window.resetAntennas = resetAntennas;
         window.wakeUp = wakeUp;
         window.goToSleep = goToSleep;
         window.playSound = playSound;
-        window.getState = getState;
         window.startRecording = startRecording;
         window.stopRecording = stopRecording;
         window.clearLog = clearLog;
-        // Initialize on page load
         document.addEventListener('DOMContentLoaded', initAuth);
         async function initAuth() {
             try {
-                // Check if returning from OAuth redirect
                 const oauthResult = await oauthHandleRedirectIfPresent();
                 if (oauthResult) {
-                    currentUser = oauthResult.userInfo.name || oauthResult.userInfo.fullname || oauthResult.userInfo.preferred_username;
                     userToken = oauthResult.accessToken;
                     sessionStorage.setItem('hf_token', userToken);
                     sessionStorage.setItem('hf_username', currentUser);
                     sessionStorage.setItem('hf_token_expires', oauthResult.accessTokenExpiresAt);
-                    log('OAuth login successful: ' + currentUser, 'success');
-                    showMainView();
                 } else {
-                    // Check stored session
                     const storedToken = sessionStorage.getItem('hf_token');
                     const storedUser = sessionStorage.getItem('hf_username');
-                    const tokenExpires = sessionStorage.getItem('hf_token_expires');
-                    if (storedToken && storedUser && tokenExpires && new Date(tokenExpires) > new Date()) {
                         userToken = storedToken;
                         currentUser = storedUser;
-                        showMainView();
                     } else {
-                        showLoginView();
                     }
                 }
-            } catch (error) {
-                console.error('Auth error:', error);
-                log('Auth error: ' + error.message, 'error');
-                showLoginView();
             }
         }
         async function loginToHuggingFace() {
-            try {
-                const loginUrl = await oauthLoginUrl();
-                window.location.href = loginUrl;
-            } catch (error) {
-                console.error('Login error:', error);
-                alert('Failed to initiate login: ' + error.message);
-            }
         }
         function logout() {
-            sessionStorage.removeItem('hf_token');
-            sessionStorage.removeItem('hf_username');
-            sessionStorage.removeItem('hf_token_expires');
             userToken = null;
             currentUser = null;
-            disconnectSignaling();
-            showLoginView();
         }
-        function showLoginView() {
-            document.getElementById('login-view').style.display = 'block';
-            document.getElementById('main-view').style.display = 'none';
         }
-        function showMainView() {
-            document.getElementById('login-view').style.display = 'none';
-            document.getElementById('main-view').style.display = 'block';
             document.getElementById('username').textContent = '@' + currentUser;
-            log('Ready. Click "Connect to Server" to find your robot.', 'info');
         }
         // Logging
-        function log(message, type = 'info') {
-            const logArea = document.getElementById('logArea');
-            if (!logArea) return;
             const entry = document.createElement('div');
-            entry.className = `log-entry ${type}`;
-            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-            logArea.appendChild(entry);
-            logArea.scrollTop = logArea.scrollHeight;
-            console.log(`[${type}] ${message}`);
         }
         function clearLog() {
             document.getElementById('logArea').innerHTML = '';
         }
-        // Send message to server via HTTP POST
-        async function sendToServer(message) {
-            if (!userToken) {
-                log('Not authenticated', 'error');
-                return null;
-            }
             try {
-                const response = await fetch(`${SIGNALING_SERVER}/send?token=${encodeURIComponent(userToken)}`, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                        'Authorization': `Bearer ${userToken}`,
-                    },
                     body: JSON.stringify(message)
                 });
-                if (!response.ok) {
-                    log(`Server error: ${response.status}`, 'error');
-                    return null;
-                }
-                return await response.json();
             } catch (e) {
-                log(`Failed to send: ${e.message}`, 'error');
                 return null;
             }
         }
-        // Signaling via SSE (using fetch for header support)
-        let sseAbortController = null;
         async function connectSignaling() {
-            if (!userToken) {
-                log('Not authenticated', 'error');
-                return;
-            }
-            const url = `${SIGNALING_SERVER}/events?token=${encodeURIComponent(userToken)}`;
-            log('Connecting to signaling server (SSE)...');
-            updateSignalingStatus('connecting');
             sseAbortController = new AbortController();
             try {
-                const response = await fetch(url, {
-                    method: 'GET',
-                    headers: {
-                        'Authorization': `Bearer ${userToken}`,
-                        'Accept': 'text/event-stream',
-                    },
-                    signal: sseAbortController.signal,
                 });
-                if (!response.ok) {
-                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-                }
-                log('Connected to signaling server!', 'success');
-                updateSignalingStatus('connected');
-                document.getElementById('connectBtn').disabled = true;
-                document.getElementById('disconnectBtn').disabled = false;
-                // Read the SSE stream
-                const reader = response.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
@@ -518,451 +757,337 @@
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split('\n');
-                    buffer = lines.pop(); // Keep incomplete line in buffer
                     for (const line of lines) {
                         if (line.startsWith('data:')) {
                             const data = line.slice(5).trim();
                             if (data) {
                                 try {
-                                    const msg = JSON.parse(data);
-                                    log(`Received: ${msg.type}`);
-                                    handleSignalingMessage(msg);
-                                } catch (e) {
-                                    console.error('Failed to parse:', data, e);
-                                }
                             }
                         }
                     }
                 }
             } catch (e) {
-                if (e.name === 'AbortError') {
-                    log('Disconnected', 'info');
-                } else {
-                    log(`Connection error: ${e.message}`, 'error');
                 }
-                updateSignalingStatus('disconnected');
                 document.getElementById('connectBtn').disabled = false;
-                document.getElementById('disconnectBtn').disabled = true;
-                document.getElementById('startStreamBtn').disabled = true;
-                selectedProducerId = null;
-                myPeerId = null;
             }
         }
-        function disconnectSignaling() {
-            if (sseAbortController) {
-                sseAbortController.abort();
-                sseAbortController = null;
-            }
-            updateSignalingStatus('disconnected');
-            document.getElementById('connectBtn').disabled = false;
-            document.getElementById('disconnectBtn').disabled = true;
             stopStream();
-        }
-        function updateSignalingStatus(status) {
-            const el = document.getElementById('signalingStatus');
-            if (!el) return;
-            el.className = `status ${status}`;
-            el.textContent = status.charAt(0).toUpperCase() + status.slice(1);
         }
         async function handleSignalingMessage(msg) {
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
-                    log(`Connected as: ${myPeerId.substring(0, 8)}...`, 'success');
-                    // Register as listener
-                    await sendToServer({
-                        type: 'setPeerStatus',
-                        roles: ['listener'],
-                        meta: { name: 'WebRTC Dashboard' }
-                    });
                     break;
                 case 'list':
-                    displayProducers(msg.producers);
                     break;
                 case 'peerStatusChanged':
-                    log(`Robot ${msg.peerId.substring(0, 8)}... ${msg.roles?.length ? 'connected' : 'disconnected'}`);
-                    // Refresh producer list
-                    const listResponse = await sendToServer({ type: 'list' });
-                    if (listResponse && listResponse.producers) {
-                        displayProducers(listResponse.producers);
-                    }
                     break;
                 case 'sessionStarted':
                     currentSessionId = msg.sessionId;
-                    log(`Session started: ${msg.sessionId.substring(0, 8)}...`, 'success');
                     break;
                 case 'peer':
                     handlePeerMessage(msg);
                     break;
-                case 'endSession':
-                    log('Session ended');
-                    stopStream();
-                    break;
                 case 'error':
                     log(`Error: ${msg.details}`, 'error');
                     break;
             }
         }
-        function displayProducers(producers) {
-            const container = document.getElementById('producerList');
-            container.innerHTML = '';
-            if (!producers || !Array.isArray(producers) || producers.length === 0) {
-                container.innerHTML = '<em style="color: #666;">No robots connected. Make sure your robot is online and connected to central server.</em>';
                 return;
             }
-            for (const producer of producers) {
                 const div = document.createElement('div');
-                div.className = 'producer-item';
-                const name = producer.meta?.name || 'Reachy Mini';
-                div.innerHTML = `<strong>${name}</strong><br><small style="color: #888;">${producer.id.substring(0, 8)}...</small>`;
-                div.onclick = () => selectProducer(producer.id, div);
-                container.appendChild(div);
             }
-            log(`Found ${producers.length} robot(s)`, 'success');
         }
-        function selectProducer(peerId, element) {
-            document.querySelectorAll('.producer-item').forEach(el => el.classList.remove('selected'));
-            element.classList.add('selected');
-            selectedProducerId = peerId;
-            document.getElementById('startStreamBtn').disabled = false;
-            log(`Selected: ${peerId.substring(0, 8)}...`);
         }
         // WebRTC
         async function startStream() {
-            if (!selectedProducerId) {
-                log('No robot selected', 'error');
-                return;
-            }
-            log('Creating peer connection...');
-            updateWebrtcStatus('connecting');
             peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
-            peerConnection.ontrack = (event) => {
-                log(`Received ${event.track.kind} track`, 'success');
-                if (event.track.kind === 'video') {
-                    document.getElementById('remoteVideo').srcObject = event.streams[0];
                 }
             };
-            peerConnection.onicecandidate = async (event) => {
-                if (event.candidate && currentSessionId) {
                     await sendToServer({
                         type: 'peer',
                         sessionId: currentSessionId,
-                        ice: {
-                            candidate: event.candidate.candidate,
-                            sdpMLineIndex: event.candidate.sdpMLineIndex,
-                            sdpMid: event.candidate.sdpMid
-                        }
                     });
                 }
             };
             peerConnection.oniceconnectionstatechange = () => {
-                log(`ICE: ${peerConnection.iceConnectionState}`);
-                if (peerConnection.iceConnectionState === 'connected' ||
-                    peerConnection.iceConnectionState === 'completed') {
-                    updateWebrtcStatus('connected');
-                    enableAllControls(true);
-                } else if (peerConnection.iceConnectionState === 'failed') {
-                    updateWebrtcStatus('disconnected');
-                    log('Connection failed', 'error');
                 }
             };
-            peerConnection.ondatachannel = (event) => {
-                log(`Data channel: ${event.channel.label}`, 'success');
-                dataChannel = event.channel;
                 dataChannel.onopen = () => {
                     log('Data channel open', 'success');
-                    // Query full state when channel opens
-                    dataChannel.send(JSON.stringify({ get_state: true }));
-                };
-                dataChannel.onclose = () => log('Data channel closed');
-                dataChannel.onmessage = (e) => {
-                    try {
-                        const data = JSON.parse(e.data);
-                        handleRobotResponse(data);
-                    } catch {
-                        log(`Received: ${e.data}`);
-                    }
                 };
             };
-            log('Requesting session with robot...');
-            const response = await sendToServer({
-                type: 'startSession',
-                peerId: selectedProducerId
-            });
-            if (response && response.sessionId) {
-                currentSessionId = response.sessionId;
-                log(`Session started: ${response.sessionId.substring(0, 8)}...`, 'success');
-            }
         }
         async function handlePeerMessage(msg) {
             if (!peerConnection) return;
             try {
                 if (msg.sdp) {
-                    log(`Received SDP ${msg.sdp.type}`);
                     await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
                     if (msg.sdp.type === 'offer') {
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
-                        await sendToServer({
-                            type: 'peer',
-                            sessionId: currentSessionId,
-                            sdp: { type: 'answer', sdp: answer.sdp }
-                        });
-                        log('Sent SDP answer');
                     }
                 }
                 if (msg.ice) {
                     await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
                 }
             } catch (e) {
-                log(`Error: ${e.message}`, 'error');
             }
         }
         function stopStream() {
-            if (peerConnection) {
-                peerConnection.close();
-                peerConnection = null;
-            }
-            if (dataChannel) {
-                dataChannel.close();
-                dataChannel = null;
-            }
             currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
-            updateWebrtcStatus('disconnected');
-            enableAllControls(false);
-            updateMotorStatus('unknown');
-            updateRecordingStatus(false);
-        }
-        function enableAllControls(enabled) {
-            // All control buttons
-            const buttons = document.querySelectorAll('.control-btn');
-            buttons.forEach(btn => btn.disabled = !enabled);
-            // Specific buttons
-            document.getElementById('stopStreamBtn').disabled = !enabled;
-            document.getElementById('enableMotorsBtn').disabled = !enabled;
-            document.getElementById('disableMotorsBtn').disabled = !enabled;
-            document.getElementById('gravityBtn').disabled = !enabled;
         }
-        function updateWebrtcStatus(status) {
-            const el = document.getElementById('webrtcStatus');
-            if (!el) return;
-            el.className = `status ${status}`;
-            const labels = { connected: 'Connected', disconnected: 'Not Connected', connecting: 'Connecting...' };
-            el.textContent = labels[status] || status;
         }
-        // === RESPONSE HANDLER ===
-        function handleRobotResponse(data) {
             if (data.state) {
-                // Full state response
-                if (data.state.motor_mode) updateMotorStatus(data.state.motor_mode);
-                if (data.state.is_recording !== undefined) updateRecordingStatus(data.state.is_recording);
-                log(`State: motors=${data.state.motor_mode}, recording=${data.state.is_recording}`, 'info');
             } else if (data.motor_mode) {
-                updateMotorStatus(data.motor_mode);
-                log(`Motor mode: ${data.motor_mode}`, 'info');
             } else if (data.error) {
-                log(`Error: ${data.error}`, 'error');
-            } else if (data.status === 'ok') {
-                const cmd = data.command || 'command';
-                if (data.completed) {
-                    log(`${cmd} completed`, 'success');
-                } else {
-                    log(`${cmd} sent`, 'info');
-                }
-                if (data.is_recording !== undefined) updateRecordingStatus(data.is_recording);
-            } else {
-                log(`Response: ${JSON.stringify(data)}`);
             }
         }
-        // === HELPER: Send command via data channel ===
-        function sendCommand(cmd) {
-            if (!dataChannel || dataChannel.readyState !== 'open') {
-                log('Data channel not ready', 'error');
-                return false;
             }
-            dataChannel.send(JSON.stringify(cmd));
-            return true;
         }
-        // === HEAD CONTROL ===
-        function buildPoseMatrix(yawDeg, pitchDeg) {
-            const yawRad = yawDeg * Math.PI / 180;
-            const pitchRad = pitchDeg * Math.PI / 180;
-            const cy = Math.cos(yawRad), sy = Math.sin(yawRad);
-            const cp = Math.cos(pitchRad), sp = Math.sin(pitchRad);
-            return [
-                [cy * cp, -sy, cy * sp, 0],
-                [sy * cp,  cy, sy * sp, 0],
-                [-sp,       0,      cp, 0],
-                [0,         0,       0, 1]
-            ];
         }
-        function sendHeadPose() {
-            const yaw = parseFloat(document.getElementById('yawInput').value) || 0;
-            const pitch = parseFloat(document.getElementById('pitchInput').value) || 0;
-            const smooth = document.getElementById('smoothMoveCheck').checked;
-            const duration = parseFloat(document.getElementById('durationInput').value) || 0.5;
-            const matrix = buildPoseMatrix(yaw, pitch);
-            if (smooth) {
-                // Smooth goto movement
-                sendCommand({
-                    goto_target: {
-                        head: matrix,
-                        duration: duration
-                    }
-                });
-                log(`Goto pose: yaw=${yaw}, pitch=${pitch}, duration=${duration}s`);
-            } else {
-                // Instant set_target
-                sendCommand({ set_target: matrix });
-                log(`Set pose: yaw=${yaw}, pitch=${pitch}`);
-            }
         }
-        function centerHead() {
-            document.getElementById('yawInput').value = 0;
-            document.getElementById('pitchInput').value = 0;
-            document.getElementById('bodyYawInput').value = 0;
-            sendHeadPose();
         }
-        // === BODY YAW ===
-        function setBodyYaw() {
-            const yaw = parseFloat(document.getElementById('bodyYawInput').value) || 0;
-            const yawRad = yaw * Math.PI / 180;
-            sendCommand({ set_body_yaw: yawRad });
-            log(`Set body yaw: ${yaw}°`);
         }
-        // === MOTOR CONTROL ===
-        function setMotorMode(mode) {
-            sendCommand({ set_motor_mode: mode });
-            log(`Setting motor mode: ${mode}`);
-        }
-        function updateMotorStatus(mode) {
-            const el = document.getElementById('motorStatus');
-            if (!el) return;
-            const label = mode.replace('_', ' ');
-            el.textContent = label.charAt(0).toUpperCase() + label.slice(1);
-            if (mode === 'enabled') {
-                el.className = 'status connected';
-            } else if (mode === 'disabled') {
-                el.className = 'status disconnected';
             } else {
-                el.className = 'status connecting';
             }
         }
-        // === ANTENNAS ===
         function sendAntennas() {
-            const right = parseFloat(document.getElementById('rightAntennaInput').value) || 0;
-            const left = parseFloat(document.getElementById('leftAntennaInput').value) || 0;
-            const rightRad = right * Math.PI / 180;
-            const leftRad = left * Math.PI / 180;
-            sendCommand({ set_antennas: [rightRad, leftRad] });
-            log(`Set antennas: right=${right}°, left=${left}°`);
         }
         function resetAntennas() {
-            document.getElementById('rightAntennaInput').value = 0;
-            document.getElementById('leftAntennaInput').value = 0;
-            document.getElementById('rightAntennaVal').textContent = '0';
-            document.getElementById('leftAntennaVal').textContent = '0';
             sendCommand({ set_antennas: [0, 0] });
-            log('Reset antennas to 0°');
         }
-        // === ANIMATIONS ===
         function wakeUp() {
             sendCommand({ wake_up: true });
-            log('Starting wake up animation...', 'info');
         }
         function goToSleep() {
             sendCommand({ goto_sleep: true });
-            log('Starting sleep animation...', 'info');
         }
-        // === AUDIO ===
         function playSound() {
-            const file = document.getElementById('soundFileInput').value.trim();
-            if (!file) {
-                log('Please enter a sound file name', 'error');
-                return;
             }
-            sendCommand({ play_sound: file });
-            log(`Playing sound: ${file}`);
         }
-        // === STATE ===
-        function getState() {
-            sendCommand({ get_state: true });
-            log('Requesting state...');
         }
-        // === RECORDING ===
         function startRecording() {
             sendCommand({ start_recording: true });
-            log('Starting recording...', 'info');
         }
         function stopRecording() {
             sendCommand({ stop_recording: true });
-            log('Stopping recording...', 'info');
-        }
-        function updateRecordingStatus(isRecording) {
-            const el = document.getElementById('recordingStatus');
-            if (!el) return;
-            if (isRecording) {
-                el.textContent = 'Recording';
-                el.className = 'status connected';
-            } else {
-                el.textContent = 'Stopped';
-                el.className = 'status disconnected';
-            }
         }
     </script>
 </body>

 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <title>Reachy Mini Telepresence</title>
     <style>
+        * { box-sizing: border-box; margin: 0; padding: 0; }
         body {
             font-family: system-ui, -apple-system, sans-serif;
+            background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);
             color: #eee;
             min-height: 100vh;
         }
+        /* Header */
+        .header {
+            background: rgba(0,0,0,0.3);
+            padding: 12px 24px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            border-bottom: 1px solid #333;
+        }
+        .header h1 {
+            font-size: 1.4em;
+            color: #00d4ff;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .header h1::before { content: "🤖"; }
+        .user-badge {
+            display: flex;
+            align-items: center;
+            gap: 12px;
             background: #16213e;
+            padding: 8px 16px;
+            border-radius: 24px;
         }
+        .user-badge .name { font-weight: 500; }
+        .user-badge button {
+            background: transparent;
+            border: 1px solid #555;
+            color: #aaa;
             padding: 4px 12px;
+            border-radius: 12px;
+            cursor: pointer;
             font-size: 0.85em;
         }
+        .user-badge button:hover { border-color: #888; color: #fff; }
+        /* Main Layout */
+        .main-container {
+            display: grid;
+            grid-template-columns: 1fr 380px;
+            gap: 20px;
+            padding: 20px;
+            max-width: 1600px;
+            margin: 0 auto;
         }
+        @media (max-width: 1100px) {
+            .main-container { grid-template-columns: 1fr; }
+        }
+        /* Video Section */
+        .video-section {
+            background: #000;
+            border-radius: 16px;
+            overflow: hidden;
+            position: relative;
+        }
+        video {
             width: 100%;
+            aspect-ratio: 16/9;
+            display: block;
+            background: #111;
         }
+        .video-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            padding: 16px;
+            background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+        }
+        .connection-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.9em;
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #ff5252;
+        }
+        .status-dot.connected { background: #00c853; animation: pulse 2s infinite; }
+        .status-dot.connecting { background: #ffc107; animation: pulse 0.5s infinite; }
+        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+        .video-controls {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            padding: 16px;
+            background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
+            display: flex;
+            justify-content: center;
+            gap: 12px;
+        }
+        .video-controls button {
+            background: rgba(255,255,255,0.15);
+            border: none;
+            color: #fff;
+            padding: 12px 24px;
+            border-radius: 8px;
             cursor: pointer;
+            font-size: 1em;
+            font-weight: 500;
+            transition: all 0.2s;
+        }
+        .video-controls button:hover { background: rgba(255,255,255,0.25); }
+        .video-controls button.primary { background: #00d4ff; color: #000; }
+        .video-controls button.primary:hover { background: #00a8cc; }
+        .video-controls button.danger { background: #ff5252; }
+        .video-controls button:disabled { opacity: 0.4; cursor: not-allowed; }
+        /* State Display */
+        .state-bar {
+            display: flex;
+            gap: 20px;
+            padding: 16px 20px;
+            background: #16213e;
+            border-radius: 0 0 16px 16px;
+            flex-wrap: wrap;
+        }
+        .state-item {
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }
+        .state-item label {
+            font-size: 0.75em;
+            color: #888;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .state-item .value {
+            font-family: 'SF Mono', monospace;
+            font-size: 0.95em;
+            color: #00d4ff;
         }
+        /* Control Panel */
+        .control-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
         }
+        .panel {
+            background: #16213e;
+            border-radius: 12px;
+            overflow: hidden;
+        }
+        .panel-header {
+            padding: 12px 16px;
+            background: rgba(0,0,0,0.2);
+            font-weight: 600;
+            font-size: 0.9em;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .panel-content {
+            padding: 16px;
         }
+        /* Motor Control */
+        .motor-buttons {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 8px;
+        }
+        .motor-btn {
+            padding: 10px;
+            border: 2px solid transparent;
             border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.85em;
         }
+        .motor-btn.enable { background: #1b5e20; color: #fff; }
+        .motor-btn.enable:hover { background: #2e7d32; }
+        .motor-btn.enable.active { border-color: #00c853; box-shadow: 0 0 12px rgba(0,200,83,0.4); }
+        .motor-btn.disable { background: #b71c1c; color: #fff; }
+        .motor-btn.disable:hover { background: #c62828; }
+        .motor-btn.disable.active { border-color: #ff5252; box-shadow: 0 0 12px rgba(255,82,82,0.4); }
+        .motor-btn.gravity { background: #f57c00; color: #fff; }
+        .motor-btn.gravity:hover { background: #ff9800; }
+        .motor-btn.gravity.active { border-color: #ffc107; box-shadow: 0 0 12px rgba(255,193,7,0.4); }
+        .motor-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+        /* Joystick / Head Control */
+        .head-control {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        .control-group label {
+            display: block;
+            font-size: 0.8em;
+            color: #888;
+            margin-bottom: 6px;
+        }
+        .control-group input[type="range"] {
+            width: 100%;
             -webkit-appearance: none;
+            height: 6px;
             background: #0f3460;
+            border-radius: 3px;
+            margin-bottom: 4px;
         }
+        .control-group input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
             background: #00d4ff;
             border-radius: 50%;
             cursor: pointer;
         }
+        .control-group .value-display {
+            font-family: 'SF Mono', monospace;
+            font-size: 0.85em;
+            color: #00d4ff;
+            text-align: center;
+        }
+        /* Quick Actions */
+        .quick-actions {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 8px;
+        }
+        .action-btn {
+            padding: 12px;
+            border: 1px solid #0f3460;
+            background: #0f3460;
+            color: #fff;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 0.9em;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
         }
+        .action-btn:hover { background: #1a4a80; border-color: #00d4ff; }
+        .action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+        .action-btn.recording { background: #c62828; animation: pulse 1s infinite; }
+        /* Sound Section */
+        .sound-input {
+            display: flex;
+            gap: 8px;
+        }
+        .sound-input input {
+            flex: 1;
+            padding: 10px 12px;
             background: #0f3460;
+            border: 1px solid #0f3460;
             border-radius: 8px;
+            color: #fff;
+            font-size: 0.9em;
+        }
+        .sound-input input:focus {
+            outline: none;
+            border-color: #00d4ff;
+        }
+        .sound-presets {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 6px;
+            margin-top: 10px;
+        }
+        .sound-preset {
+            padding: 6px 12px;
+            background: #0a0a1a;
+            border: 1px solid #333;
+            border-radius: 16px;
+            color: #aaa;
+            font-size: 0.8em;
             cursor: pointer;
+            transition: all 0.2s;
+        }
+        .sound-preset:hover { border-color: #00d4ff; color: #fff; }
+        /* Log */
+        .log-panel {
+            max-height: 150px;
+            overflow-y: auto;
+            background: #0a0a1a;
+            border-radius: 8px;
+            padding: 12px;
+            font-family: 'SF Mono', monospace;
+            font-size: 0.8em;
         }
+        .log-entry { margin-bottom: 4px; color: #888; }
+        .log-entry.error { color: #ff5252; }
+        .log-entry.success { color: #00c853; }
+        .log-entry.info { color: #00d4ff; }
+        /* Login View */
+        .login-view {
             display: flex;
             align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        .login-card {
+            background: #16213e;
+            padding: 40px;
+            border-radius: 16px;
+            text-align: center;
+            max-width: 400px;
+        }
+        .login-card h2 {
+            margin-bottom: 16px;
+            color: #00d4ff;
+        }
+        .login-card p {
+            color: #888;
+            margin-bottom: 24px;
+        }
+        .btn-hf {
+            background: #ff9d00;
+            color: #000;
+            border: none;
+            padding: 14px 32px;
+            border-radius: 8px;
+            font-size: 1.1em;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .btn-hf:hover { background: #ffb340; }
+        /* Robot selector */
+        .robot-list {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .robot-item {
+            padding: 12px 16px;
             background: #0f3460;
             border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.2s;
+            border: 2px solid transparent;
         }
+        .robot-item:hover { background: #1a4a80; }
+        .robot-item.selected { border-color: #00d4ff; background: #1a4a80; }
+        .robot-item .name { font-weight: 500; }
+        .robot-item .id { font-size: 0.8em; color: #888; margin-top: 4px; }
+        .hidden { display: none !important; }
     </style>
 </head>
 <body>
+    <!-- Login View -->
+    <div id="loginView" class="login-view">
+        <div class="login-card">
+            <h2>🤖 Reachy Mini Telepresence</h2>
+            <p>Sign in with your HuggingFace account to connect to your robot and start controlling it remotely.</p>
+            <button class="btn-hf" onclick="loginToHuggingFace()">Sign in with Hugging Face</button>
         </div>
+    </div>
+    <!-- Main App -->
+    <div id="mainApp" class="hidden">
+        <header class="header">
+            <h1>Reachy Mini Telepresence</h1>
+            <div class="user-badge">
+                <span class="name" id="username">@user</span>
+                <button onclick="logout()">Sign out</button>
+            </div>
+        </header>
+        <div class="main-container">
+            <!-- Video Section -->
+            <div>
+                <div class="video-section">
+                    <video id="remoteVideo" autoplay playsinline muted></video>
+                    <div class="video-overlay">
+                        <div class="connection-status">
+                            <div class="status-dot" id="statusDot"></div>
+                            <span id="statusText">Disconnected</span>
+                        </div>
+                        <div id="robotName" style="font-weight: 500;"></div>
                     </div>
+                    <div class="video-controls">
+                        <button id="connectBtn" onclick="connectSignaling()">Connect Server</button>
+                        <button id="startBtn" class="primary" onclick="startStream()" disabled>Start Stream</button>
+                        <button id="stopBtn" class="danger" onclick="stopStream()" disabled>Stop</button>
                     </div>
                 </div>
+                <!-- State Bar -->
+                <div class="state-bar" id="stateBar">
+                    <div class="state-item">
+                        <label>Motors</label>
+                        <span class="value" id="stateMotors">--</span>
                     </div>
+                    <div class="state-item">
+                        <label>Head Yaw</label>
+                        <span class="value" id="stateYaw">--°</span>
                     </div>
+                    <div class="state-item">
+                        <label>Head Pitch</label>
+                        <span class="value" id="statePitch">--°</span>
+                    </div>
+                    <div class="state-item">
+                        <label>Body Yaw</label>
+                        <span class="value" id="stateBodyYaw">--°</span>
                     </div>
+                    <div class="state-item">
+                        <label>Right Antenna</label>
+                        <span class="value" id="stateRightAnt">--°</span>
+                    </div>
+                    <div class="state-item">
+                        <label>Left Antenna</label>
+                        <span class="value" id="stateLeftAnt">--°</span>
+                    </div>
+                    <div class="state-item">
+                        <label>Recording</label>
+                        <span class="value" id="stateRecording">--</span>
                     </div>
                 </div>
+                <!-- Robot Selector (shown when connected but no stream) -->
+                <div id="robotSelector" class="panel hidden" style="margin-top: 16px;">
+                    <div class="panel-header">📡 Available Robots</div>
+                    <div class="panel-content">
+                        <div id="robotList" class="robot-list">
+                            <em style="color: #666;">Searching for robots...</em>
                         </div>
                     </div>
+                </div>
+                <!-- Log -->
+                <div class="panel" style="margin-top: 16px;">
+                    <div class="panel-header" style="justify-content: space-between;">
+                        📋 Activity Log
+                        <button onclick="clearLog()" style="background: transparent; border: none; color: #888; cursor: pointer; font-size: 0.8em;">Clear</button>
                     </div>
+                    <div class="panel-content" style="padding: 0;">
+                        <div id="logArea" class="log-panel"></div>
                     </div>
                 </div>
+            </div>
+            <!-- Control Panel -->
+            <div class="control-panel">
+                <!-- Motor Control -->
+                <div class="panel">
+                    <div class="panel-header">⚡ Motor Control</div>
+                    <div class="panel-content">
+                        <div class="motor-buttons">
+                            <button class="motor-btn enable" id="btnEnable" onclick="setMotorMode('enabled')" disabled>Enable</button>
+                            <button class="motor-btn disable" id="btnDisable" onclick="setMotorMode('disabled')" disabled>Disable</button>
+                            <button class="motor-btn gravity" id="btnGravity" onclick="setMotorMode('gravity_compensation')" disabled>Gravity</button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Head Control -->
+                <div class="panel">
+                    <div class="panel-header">🎯 Head Control</div>
+                    <div class="panel-content">
+                        <div class="head-control">
+                            <div class="control-group">
+                                <label>Yaw (left/right)</label>
+                                <input type="range" id="yawSlider" min="-45" max="45" value="0" oninput="updateSliderValue('yaw')">
+                                <div class="value-display"><span id="yawValue">0</span>°</div>
+                            </div>
+                            <div class="control-group">
+                                <label>Pitch (up/down)</label>
+                                <input type="range" id="pitchSlider" min="-30" max="30" value="0" oninput="updateSliderValue('pitch')">
+                                <div class="value-display"><span id="pitchValue">0</span>°</div>
+                            </div>
+                        </div>
+                        <div style="margin-top: 12px;">
+                            <div class="control-group">
+                                <label>Body Yaw</label>
+                                <input type="range" id="bodyYawSlider" min="-45" max="45" value="0" oninput="updateSliderValue('bodyYaw')">
+                                <div class="value-display"><span id="bodyYawValue">0</span>°</div>
+                            </div>
+                        </div>
+                        <div class="quick-actions" style="margin-top: 12px;">
+                            <button class="action-btn" id="btnSendPose" onclick="sendHeadPose()" disabled>📤 Send Pose</button>
+                            <button class="action-btn" id="btnCenter" onclick="centerHead()" disabled>🎯 Center</button>
                         </div>
+                        <div style="margin-top: 10px; display: flex; align-items: center; gap: 12px;">
+                            <label style="font-size: 0.85em; color: #888;">
+                                <input type="checkbox" id="smoothCheck" style="margin-right: 6px;"> Smooth movement
+                            </label>
+                            <label style="font-size: 0.85em; color: #888;">
+                                Duration: <input type="number" id="durationInput" value="0.5" min="0.1" max="3" step="0.1" style="width: 60px; padding: 4px; background: #0f3460; border: 1px solid #333; border-radius: 4px; color: #fff;">s
+                            </label>
                         </div>
                     </div>
+                </div>
+                <!-- Antennas -->
+                <div class="panel">
+                    <div class="panel-header">📡 Antennas</div>
+                    <div class="panel-content">
+                        <div class="head-control">
+                            <div class="control-group">
+                                <label>Right Antenna</label>
+                                <input type="range" id="rightAntSlider" min="-175" max="175" value="0" oninput="updateSliderValue('rightAnt')">
+                                <div class="value-display"><span id="rightAntValue">0</span>°</div>
+                            </div>
+                            <div class="control-group">
+                                <label>Left Antenna</label>
+                                <input type="range" id="leftAntSlider" min="-175" max="175" value="0" oninput="updateSliderValue('leftAnt')">
+                                <div class="value-display"><span id="leftAntValue">0</span>°</div>
+                            </div>
+                        </div>
+                        <div class="quick-actions" style="margin-top: 12px;">
+                            <button class="action-btn" id="btnSendAnt" onclick="sendAntennas()" disabled>📤 Send</button>
+                            <button class="action-btn" id="btnResetAnt" onclick="resetAntennas()" disabled>↩️ Reset</button>
+                        </div>
                     </div>
                 </div>
+                <!-- Animations -->
+                <div class="panel">
+                    <div class="panel-header">✨ Animations</div>
+                    <div class="panel-content">
+                        <div class="quick-actions">
+                            <button class="action-btn" id="btnWakeUp" onclick="wakeUp()" disabled>☀️ Wake Up</button>
+                            <button class="action-btn" id="btnSleep" onclick="goToSleep()" disabled>🌙 Sleep</button>
+                        </div>
                     </div>
+                </div>
+                <!-- Sound -->
+                <div class="panel">
+                    <div class="panel-header">🔊 Sound</div>
+                    <div class="panel-content">
+                        <div class="sound-input">
+                            <input type="text" id="soundInput" placeholder="Sound file name...">
+                            <button class="action-btn" id="btnPlaySound" onclick="playSound()" disabled style="flex: 0;">▶️</button>
+                        </div>
+                        <div class="sound-presets">
+                            <span class="sound-preset" onclick="playSoundPreset('wake_up.wav')">wake_up</span>
+                            <span class="sound-preset" onclick="playSoundPreset('go_sleep.wav')">go_sleep</span>
+                        </div>
                     </div>
                 </div>
                 <!-- Recording -->
+                <div class="panel">
+                    <div class="panel-header">⏺️ Recording</div>
+                    <div class="panel-content">
+                        <div class="quick-actions">
+                            <button class="action-btn" id="btnStartRec" onclick="startRecording()" disabled>⏺️ Start</button>
+                            <button class="action-btn" id="btnStopRec" onclick="stopRecording()" disabled>⏹️ Stop</button>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <script type="module">
         import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.15.2/+esm";
         const SIGNALING_SERVER = 'https://cduss-reachy-mini-central.hf.space';
         // State
         let currentSessionId = null;
         let userToken = null;
         let currentUser = null;
+        let sseAbortController = null;
+        let currentMotorMode = null;
+        let stateRefreshInterval = null;
+        // Export functions
         window.loginToHuggingFace = loginToHuggingFace;
         window.logout = logout;
         window.connectSignaling = connectSignaling;
         window.startStream = startStream;
         window.stopStream = stopStream;
+        window.setMotorMode = setMotorMode;
         window.sendHeadPose = sendHeadPose;
         window.centerHead = centerHead;
         window.sendAntennas = sendAntennas;
         window.resetAntennas = resetAntennas;
         window.wakeUp = wakeUp;
         window.goToSleep = goToSleep;
         window.playSound = playSound;
+        window.playSoundPreset = playSoundPreset;
         window.startRecording = startRecording;
         window.stopRecording = stopRecording;
+        window.updateSliderValue = updateSliderValue;
         window.clearLog = clearLog;
+        // Init
         document.addEventListener('DOMContentLoaded', initAuth);
         async function initAuth() {
             try {
                 const oauthResult = await oauthHandleRedirectIfPresent();
                 if (oauthResult) {
+                    currentUser = oauthResult.userInfo.name || oauthResult.userInfo.preferred_username;
                     userToken = oauthResult.accessToken;
                     sessionStorage.setItem('hf_token', userToken);
                     sessionStorage.setItem('hf_username', currentUser);
                     sessionStorage.setItem('hf_token_expires', oauthResult.accessTokenExpiresAt);
+                    showMainApp();
                 } else {
                     const storedToken = sessionStorage.getItem('hf_token');
                     const storedUser = sessionStorage.getItem('hf_username');
+                    const expires = sessionStorage.getItem('hf_token_expires');
+                    if (storedToken && storedUser && expires && new Date(expires) > new Date()) {
                         userToken = storedToken;
                         currentUser = storedUser;
+                        showMainApp();
                     } else {
+                        showLogin();
                     }
                 }
+            } catch (e) {
+                console.error('Auth error:', e);
+                showLogin();
             }
         }
         async function loginToHuggingFace() {
+            const url = await oauthLoginUrl();
+            window.location.href = url;
         }
         function logout() {
+            sessionStorage.clear();
             userToken = null;
             currentUser = null;
+            disconnectAll();
+            showLogin();
         }
+        function showLogin() {
+            document.getElementById('loginView').classList.remove('hidden');
+            document.getElementById('mainApp').classList.add('hidden');
         }
+        function showMainApp() {
+            document.getElementById('loginView').classList.add('hidden');
+            document.getElementById('mainApp').classList.remove('hidden');
             document.getElementById('username').textContent = '@' + currentUser;
+            log('Ready to connect', 'info');
         }
         // Logging
+        function log(msg, type = '') {
+            const area = document.getElementById('logArea');
             const entry = document.createElement('div');
+            entry.className = 'log-entry ' + type;
+            entry.textContent = `[${new Date().toLocaleTimeString()}] ${msg}`;
+            area.appendChild(entry);
+            area.scrollTop = area.scrollHeight;
         }
         function clearLog() {
             document.getElementById('logArea').innerHTML = '';
         }
+        // Connection status
+        function updateStatus(status, text) {
+            const dot = document.getElementById('statusDot');
+            const txt = document.getElementById('statusText');
+            dot.className = 'status-dot ' + status;
+            txt.textContent = text;
+        }
+        // Send to server
+        async function sendToServer(message) {
             try {
+                const res = await fetch(`${SIGNALING_SERVER}/send?token=${encodeURIComponent(userToken)}`, {
                     method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify(message)
                 });
+                return await res.json();
             } catch (e) {
+                log(`Send error: ${e.message}`, 'error');
                 return null;
             }
         }
+        // Send command via data channel
+        function sendCommand(cmd) {
+            if (!dataChannel || dataChannel.readyState !== 'open') {
+                log('Not connected', 'error');
+                return false;
+            }
+            dataChannel.send(JSON.stringify(cmd));
+            return true;
+        }
+        // SSE Connection
         async function connectSignaling() {
+            if (!userToken) return;
+            updateStatus('connecting', 'Connecting...');
+            log('Connecting to server...');
+            document.getElementById('connectBtn').disabled = true;
             sseAbortController = new AbortController();
             try {
+                const res = await fetch(`${SIGNALING_SERVER}/events?token=${encodeURIComponent(userToken)}`, {
+                    signal: sseAbortController.signal
                 });
+                if (!res.ok) throw new Error(`HTTP ${res.status}`);
+                updateStatus('connected', 'Server connected');
+                log('Connected to signaling server', 'success');
+                document.getElementById('robotSelector').classList.remove('hidden');
+                const reader = res.body.getReader();
                 const decoder = new TextDecoder();
                 let buffer = '';
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split('\n');
+                    buffer = lines.pop();
                     for (const line of lines) {
                         if (line.startsWith('data:')) {
                             const data = line.slice(5).trim();
                             if (data) {
                                 try {
+                                    handleSignalingMessage(JSON.parse(data));
+                                } catch (e) {}
                             }
                         }
                     }
                 }
             } catch (e) {
+                if (e.name !== 'AbortError') {
+                    log(`Connection failed: ${e.message}`, 'error');
                 }
+                updateStatus('', 'Disconnected');
                 document.getElementById('connectBtn').disabled = false;
+                document.getElementById('robotSelector').classList.add('hidden');
             }
         }
+        function disconnectAll() {
+            if (sseAbortController) sseAbortController.abort();
             stopStream();
+            document.getElementById('connectBtn').disabled = false;
         }
         async function handleSignalingMessage(msg) {
             switch (msg.type) {
                 case 'welcome':
                     myPeerId = msg.peerId;
+                    await sendToServer({ type: 'setPeerStatus', roles: ['listener'], meta: { name: 'Telepresence App' } });
                     break;
                 case 'list':
+                    displayRobots(msg.producers);
                     break;
                 case 'peerStatusChanged':
+                    const list = await sendToServer({ type: 'list' });
+                    if (list?.producers) displayRobots(list.producers);
                     break;
                 case 'sessionStarted':
                     currentSessionId = msg.sessionId;
                     break;
                 case 'peer':
                     handlePeerMessage(msg);
                     break;
                 case 'error':
                     log(`Error: ${msg.details}`, 'error');
                     break;
             }
         }
+        function displayRobots(robots) {
+            const list = document.getElementById('robotList');
+            list.innerHTML = '';
+            if (!robots?.length) {
+                list.innerHTML = '<em style="color: #666;">No robots online. Make sure your robot is connected.</em>';
+                document.getElementById('startBtn').disabled = true;
                 return;
             }
+            for (const robot of robots) {
                 const div = document.createElement('div');
+                div.className = 'robot-item' + (robot.id === selectedProducerId ? ' selected' : '');
+                div.innerHTML = `
+                    <div class="name">${robot.meta?.name || 'Reachy Mini'}</div>
+                    <div class="id">${robot.id.slice(0, 8)}...</div>
+                `;
+                div.onclick = () => selectRobot(robot, div);
+                list.appendChild(div);
             }
         }
+        function selectRobot(robot, el) {
+            document.querySelectorAll('.robot-item').forEach(e => e.classList.remove('selected'));
+            el.classList.add('selected');
+            selectedProducerId = robot.id;
+            document.getElementById('robotName').textContent = robot.meta?.name || 'Reachy Mini';
+            document.getElementById('startBtn').disabled = false;
+            log(`Selected: ${robot.meta?.name || robot.id.slice(0, 8)}`);
         }
         // WebRTC
         async function startStream() {
+            if (!selectedProducerId) return;
+            log('Starting WebRTC...');
+            updateStatus('connecting', 'Connecting to robot...');
             peerConnection = new RTCPeerConnection({
                 iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
             });
+            peerConnection.ontrack = (e) => {
+                if (e.track.kind === 'video') {
+                    document.getElementById('remoteVideo').srcObject = e.streams[0];
+                    log('Video stream received', 'success');
                 }
             };
+            peerConnection.onicecandidate = async (e) => {
+                if (e.candidate && currentSessionId) {
                     await sendToServer({
                         type: 'peer',
                         sessionId: currentSessionId,
+                        ice: { candidate: e.candidate.candidate, sdpMLineIndex: e.candidate.sdpMLineIndex, sdpMid: e.candidate.sdpMid }
                     });
                 }
             };
             peerConnection.oniceconnectionstatechange = () => {
+                const state = peerConnection.iceConnectionState;
+                if (state === 'connected' || state === 'completed') {
+                    updateStatus('connected', 'Connected');
+                    enableControls(true);
+                    document.getElementById('robotSelector').classList.add('hidden');
+                    // Start state refresh
+                    stateRefreshInterval = setInterval(() => sendCommand({ get_state: true }), 2000);
+                } else if (state === 'failed' || state === 'disconnected') {
+                    updateStatus('', 'Connection lost');
+                    log('Connection lost', 'error');
                 }
             };
+            peerConnection.ondatachannel = (e) => {
+                dataChannel = e.channel;
                 dataChannel.onopen = () => {
                     log('Data channel open', 'success');
+                    sendCommand({ get_state: true });
                 };
+                dataChannel.onmessage = (e) => handleRobotMessage(JSON.parse(e.data));
             };
+            document.getElementById('startBtn').disabled = true;
+            document.getElementById('stopBtn').disabled = false;
+            const res = await sendToServer({ type: 'startSession', peerId: selectedProducerId });
+            if (res?.sessionId) currentSessionId = res.sessionId;
         }
         async function handlePeerMessage(msg) {
             if (!peerConnection) return;
             try {
                 if (msg.sdp) {
                     await peerConnection.setRemoteDescription(new RTCSessionDescription(msg.sdp));
                     if (msg.sdp.type === 'offer') {
                         const answer = await peerConnection.createAnswer();
                         await peerConnection.setLocalDescription(answer);
+                        await sendToServer({ type: 'peer', sessionId: currentSessionId, sdp: { type: 'answer', sdp: answer.sdp } });
                     }
                 }
                 if (msg.ice) {
                     await peerConnection.addIceCandidate(new RTCIceCandidate(msg.ice));
                 }
             } catch (e) {
+                log(`WebRTC error: ${e.message}`, 'error');
             }
         }
         function stopStream() {
+            if (stateRefreshInterval) clearInterval(stateRefreshInterval);
+            if (peerConnection) peerConnection.close();
+            if (dataChannel) dataChannel.close();
+            peerConnection = null;
+            dataChannel = null;
             currentSessionId = null;
             document.getElementById('remoteVideo').srcObject = null;
+            document.getElementById('startBtn').disabled = !selectedProducerId;
+            document.getElementById('stopBtn').disabled = true;
+            document.getElementById('robotSelector').classList.remove('hidden');
+            enableControls(false);
+            updateStatus('connected', 'Server connected');
+            resetStateDisplay();
         }
+        function enableControls(enabled) {
+            const btns = ['btnEnable', 'btnDisable', 'btnGravity', 'btnSendPose', 'btnCenter',
+                         'btnSendAnt', 'btnResetAnt', 'btnWakeUp', 'btnSleep', 'btnPlaySound',
+                         'btnStartRec', 'btnStopRec'];
+            btns.forEach(id => document.getElementById(id).disabled = !enabled);
         }
+        // Robot message handler
+        function handleRobotMessage(data) {
             if (data.state) {
+                updateStateDisplay(data.state);
             } else if (data.motor_mode) {
+                setMotorButtonActive(data.motor_mode);
+                document.getElementById('stateMotors').textContent = data.motor_mode;
             } else if (data.error) {
+                log(`Robot error: ${data.error}`, 'error');
+            } else if (data.status === 'ok' && data.completed) {
+                log(`${data.command} completed`, 'success');
             }
         }
+        function updateStateDisplay(state) {
+            if (state.motor_mode) {
+                document.getElementById('stateMotors').textContent = state.motor_mode;
+                setMotorButtonActive(state.motor_mode);
+            }
+            if (state.head_pose) {
+                // Extract angles from rotation matrix (simplified)
+                const m = state.head_pose;
+                const pitch = Math.asin(-m[2][0]) * 180 / Math.PI;
+                const yaw = Math.atan2(m[1][0], m[0][0]) * 180 / Math.PI;
+                document.getElementById('stateYaw').textContent = yaw.toFixed(1) + '°';
+                document.getElementById('statePitch').textContent = pitch.toFixed(1) + '°';
+            }
+            if (state.body_yaw !== undefined) {
+                document.getElementById('stateBodyYaw').textContent = (state.body_yaw * 180 / Math.PI).toFixed(1) + '°';
+            }
+            if (state.antennas) {
+                document.getElementById('stateRightAnt').textContent = (state.antennas[0] * 180 / Math.PI).toFixed(0) + '°';
+                document.getElementById('stateLeftAnt').textContent = (state.antennas[1] * 180 / Math.PI).toFixed(0) + '°';
+            }
+            if (state.is_recording !== undefined) {
+                document.getElementById('stateRecording').textContent = state.is_recording ? '🔴 REC' : 'OFF';
+                document.getElementById('btnStartRec').classList.toggle('recording', state.is_recording);
             }
         }
+        function resetStateDisplay() {
+            ['stateMotors', 'stateYaw', 'statePitch', 'stateBodyYaw', 'stateRightAnt', 'stateLeftAnt'].forEach(id => {
+                document.getElementById(id).textContent = '--';
+            });
+            document.getElementById('stateRecording').textContent = '--';
+            setMotorButtonActive(null);
         }
+        function setMotorButtonActive(mode) {
+            document.getElementById('btnEnable').classList.toggle('active', mode === 'enabled');
+            document.getElementById('btnDisable').classList.toggle('active', mode === 'disabled');
+            document.getElementById('btnGravity').classList.toggle('active', mode === 'gravity_compensation');
+            currentMotorMode = mode;
+        }
+        // Slider updates
+        function updateSliderValue(name) {
+            const slider = document.getElementById(name + 'Slider');
+            const display = document.getElementById(name + 'Value');
+            display.textContent = slider.value;
         }
+        // Controls
+        function setMotorMode(mode) {
+            sendCommand({ set_motor_mode: mode });
+            log(`Motor: ${mode}`);
         }
+        function buildMatrix(yaw, pitch) {
+            const yr = yaw * Math.PI / 180, pr = pitch * Math.PI / 180;
+            const cy = Math.cos(yr), sy = Math.sin(yr), cp = Math.cos(pr), sp = Math.sin(pr);
+            return [[cy*cp, -sy, cy*sp, 0], [sy*cp, cy, sy*sp, 0], [-sp, 0, cp, 0], [0, 0, 0, 1]];
         }
+        function sendHeadPose() {
+            const yaw = parseInt(document.getElementById('yawSlider').value);
+            const pitch = parseInt(document.getElementById('pitchSlider').value);
+            const smooth = document.getElementById('smoothCheck').checked;
+            const duration = parseFloat(document.getElementById('durationInput').value);
+            const bodyYaw = parseInt(document.getElementById('bodyYawSlider').value) * Math.PI / 180;
+            if (smooth) {
+                sendCommand({ goto_target: { head: buildMatrix(yaw, pitch), body_yaw: bodyYaw, duration } });
+                log(`Goto: yaw=${yaw}°, pitch=${pitch}°, duration=${duration}s`);
             } else {
+                sendCommand({ set_target: buildMatrix(yaw, pitch) });
+                if (bodyYaw !== 0) sendCommand({ set_body_yaw: bodyYaw });
+                log(`Set: yaw=${yaw}°, pitch=${pitch}°`);
             }
         }
+        function centerHead() {
+            ['yawSlider', 'pitchSlider', 'bodyYawSlider'].forEach(id => document.getElementById(id).value = 0);
+            ['yawValue', 'pitchValue', 'bodyYawValue'].forEach(id => document.getElementById(id).textContent = '0');
+            sendCommand({ goto_target: { head: buildMatrix(0, 0), body_yaw: 0, duration: 0.5 } });
+            log('Centering head...');
+        }
         function sendAntennas() {
+            const r = parseInt(document.getElementById('rightAntSlider').value) * Math.PI / 180;
+            const l = parseInt(document.getElementById('leftAntSlider').value) * Math.PI / 180;
+            sendCommand({ set_antennas: [r, l] });
+            log(`Antennas: R=${(r*180/Math.PI).toFixed(0)}°, L=${(l*180/Math.PI).toFixed(0)}°`);
         }
         function resetAntennas() {
+            document.getElementById('rightAntSlider').value = 0;
+            document.getElementById('leftAntSlider').value = 0;
+            document.getElementById('rightAntValue').textContent = '0';
+            document.getElementById('leftAntValue').textContent = '0';
             sendCommand({ set_antennas: [0, 0] });
+            log('Antennas reset');
         }
         function wakeUp() {
             sendCommand({ wake_up: true });
+            log('Wake up animation...', 'info');
         }
         function goToSleep() {
             sendCommand({ goto_sleep: true });
+            log('Sleep animation...', 'info');
         }
         function playSound() {
+            const file = document.getElementById('soundInput').value.trim();
+            if (file) {
+                sendCommand({ play_sound: file });
+                log(`Playing: ${file}`);
             }
         }
+        function playSoundPreset(file) {
+            document.getElementById('soundInput').value = file;
+            sendCommand({ play_sound: file });
+            log(`Playing: ${file}`);
         }
         function startRecording() {
             sendCommand({ start_recording: true });
+            log('Recording started', 'info');
         }
         function stopRecording() {
             sendCommand({ stop_recording: true });
+            log('Recording stopped', 'info');
         }
     </script>
 </body>