some wip

.gitignore

@@ -0,0 +1,3 @@
+__pycache__/
+*.egg-info/
+build/

README.md

@@ -0,0 +1,119 @@
+---
+title: Reachy Mini Debug & CI Toolbox
+emoji: 🔧
+colorFrom: red
+colorTo: blue
+sdk: static
+pinned: false
+short_description: Debug and CI validation toolbox for Reachy Mini
+tags:
+ - reachy_mini
+ - reachy_mini_python_app
+ - debug
+ - testing
+ - ci
+---
+
+# Reachy Mini Debug & CI Toolbox
+
+A comprehensive web-based debugging and CI validation tool for Reachy Mini.
+
+## Features
+
+### Robot Status
+- Real-time head pose display (roll, pitch, yaw)
+- Detailed motor positions for all 9 motors
+- Connection status indicator
+
+### Movement Control
+- Head position control with sliders (roll, pitch, yaw)
+- Antenna position control
+- Quick actions: Go to Zero, Wake Up, Go to Sleep
+- Adjustable movement duration
+
+### Camera
+- Live camera stream (MJPEG)
+- Capture and save images
+- Download captured images
+- List and manage saved captures
+
+### Audio Recording
+- Record audio from the robot's microphone
+- List saved recordings with metadata
+- Play recordings through the robot's speaker
+- Download recordings as WAV files
+
+### Rotation Validation Test
+Automated test for validating head rotation accuracy:
+1. Moves head to zero position and captures image
+2. Rolls head by specified angle
+3. Captures second image
+4. Computes rotation between images using ORB feature matching
+5. Compares expected vs actual rotation
+6. Returns PASS/FAIL with detailed metrics
+
+## Installation
+
+```bash
+pip install -e .
+```
+
+## Usage
+
+### As a Reachy Mini App (daemon on)
+The app registers as a Reachy Mini app and can be launched via the daemon:
+```bash
+reachy-mini app run reachy_mini_toolbox
+```
+
+### Direct Launch
+```bash
+python -m reachy_mini_toolbox.main
+```
+
+Then open http://localhost:8042 in your browser.
+
+## API Endpoints
+
+### Status
+- `GET /api/status` - Get robot status and head pose
+- `GET /api/motor_status` - Get detailed motor positions
+
+### Movement
+- `POST /api/move_head` - Move head to specified orientation
+- `POST /api/move_antennas` - Move antennas to specified positions
+- `POST /api/go_to_zero` - Move to neutral position
+- `POST /api/wake_up` - Execute wake up behavior
+- `POST /api/go_to_sleep` - Execute sleep behavior
+
+### Camera
+- `GET /api/camera/stream` - MJPEG camera stream
+- `GET /api/camera/capture` - Capture single frame as base64
+- `POST /api/camera/save` - Save current frame to file
+- `GET /api/camera/list` - List saved captures
+- `GET /api/camera/download/{filename}` - Download capture
+- `DELETE /api/camera/delete/{filename}` - Delete capture
+
+### Audio
+- `POST /api/audio/start_recording` - Start recording
+- `POST /api/audio/stop_recording` - Stop and save recording
+- `GET /api/audio/list` - List recordings
+- `GET /api/audio/download/{filename}` - Download recording
+- `POST /api/audio/play/{filename}` - Play recording on robot
+- `DELETE /api/audio/delete/{filename}` - Delete recording
+
+### Validation Tests
+- `POST /api/test/rotation_validation` - Run rotation validation test
+- `GET /api/test/last_rotation_result` - Get last test result
+
+## File Storage
+
+- Recordings: `/tmp/reachy_mini_toolbox/recordings/`
+- Captures: `/tmp/reachy_mini_toolbox/captures/`
+
+## Dependencies
+
+- reachy-mini
+- opencv-python
+- soundfile
+- scipy

pyproject.toml

@@ -0,0 +1,31 @@
+[build-system]
+requires = ["setuptools>=61.0"]
+build-backend = "setuptools.build_meta"
+
+
+[project]
+name = "reachy_mini_toolbox"
+version = "0.1.0"
+description = "Debug & CI validation toolbox for Reachy Mini - motor status, movement testing, audio recording, camera capture, and rotation validation"
+readme = "README.md"
+requires-python = ">=3.10"
+dependencies = [
+    "reachy-mini",
+    "opencv-python",
+    "soundfile",
+    "scipy",
+]
+keywords = ["reachy-mini-app", "debug", "testing", "ci", "validation"]
+
+[project.entry-points."reachy_mini_apps"]
+reachy_mini_toolbox = "reachy_mini_toolbox.main:ReachyMiniToolbox"
+
+[tool.setuptools]
+package-dir = { "" = "." }
+include-package-data = true
+
+[tool.setuptools.packages.find]
+where = ["."]
+
+[tool.setuptools.package-data]
+reachy_mini_toolbox = ["**/*"] # Also include all non-.py files

reachy_mini_toolbox/main.py

@@ -0,0 +1,624 @@
+"""Reachy Mini Debug & CI Validation Toolbox.
+
+A comprehensive debugging and validation tool for Reachy Mini.
+Features:
+- Motor status check (daemon-on mode)
+- Movement validation
+- Audio recording, playback, listing, and download
+- Camera capture and download
+- Advanced head rotation validation test
+"""
+
+import base64
+import logging
+import os
+import threading
+import time
+from dataclasses import dataclass
+from datetime import datetime
+from pathlib import Path
+from typing import Any
+
+import cv2
+import numpy as np
+import soundfile as sf
+from fastapi import FastAPI, HTTPException, Response
+from fastapi.responses import FileResponse, StreamingResponse
+from pydantic import BaseModel
+from scipy.spatial.transform import Rotation as R
+
+from reachy_mini import ReachyMini, ReachyMiniApp
+from reachy_mini.utils import create_head_pose
+
+logger = logging.getLogger(__name__)
+
+# Storage paths
+RECORDINGS_DIR = Path("/tmp/reachy_mini_toolbox/recordings")
+CAPTURES_DIR = Path("/tmp/reachy_mini_toolbox/captures")
+RECORDINGS_DIR.mkdir(parents=True, exist_ok=True)
+CAPTURES_DIR.mkdir(parents=True, exist_ok=True)
+
+
+# ==================== Data Models ====================
+
+class MoveRequest(BaseModel):
+    roll: float = 0.0
+    pitch: float = 0.0
+    yaw: float = 0.0
+    duration: float = 1.0
+
+
+class AntennaRequest(BaseModel):
+    right: float = 0.0
+    left: float = 0.0
+    duration: float = 0.5
+
+
+class RotationTestRequest(BaseModel):
+    roll_angle: float = 90.0
+    duration: float = 2.0
+
+
+# ==================== State Manager ====================
+
+@dataclass
+class ToolboxState:
+    """Shared state for the toolbox."""
+    reachy_mini: ReachyMini | None = None
+    is_recording_audio: bool = False
+    audio_buffer: list = None
+    audio_samplerate: int = 16000
+    last_rotation_test: dict | None = None
+
+    def __post_init__(self):
+        self.audio_buffer = []
+
+
+state = ToolboxState()
+
+
+# ==================== Main App ====================
+
+class ReachyMiniToolbox(ReachyMiniApp):
+    """Reachy Mini Debug & CI Validation Toolbox."""
+
+    custom_app_url: str | None = "http://0.0.0.0:8042"
+    request_media_backend: str | None = "gstreamer"  # Use GStreamer for on-device camera
+
+    def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
+        global state
+        state.reachy_mini = reachy_mini
+
+        # Ensure camera pipeline is started
+        if reachy_mini.media.camera is not None and hasattr(reachy_mini.media.camera, 'pipeline'):
+            from gi.repository import Gst
+            pipeline = reachy_mini.media.camera.pipeline
+            if pipeline.get_state(0).state != Gst.State.PLAYING:
+                reachy_mini.media.camera.open()
+                time.sleep(0.5)
+
+        # Setup all API endpoints
+        self._setup_endpoints()
+
+        logger.info("Reachy Mini Toolbox ready")
+
+        # Main loop - keep app alive
+        while not stop_event.is_set():
+            time.sleep(0.1)
+
+    def _setup_endpoints(self):
+        """Setup all FastAPI endpoints."""
+        app = self.settings_app
+
+        # ==================== Status Endpoints ====================
+
+        @app.get("/api/status")
+        async def get_status():
+            """Get overall robot status."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                head_joints, antenna_joints = state.reachy_mini.get_current_joint_positions()
+                head_pose = state.reachy_mini.get_current_head_pose()
+
+                # Extract euler angles from head pose
+                rotation = R.from_matrix(head_pose[:3, :3])
+                euler = rotation.as_euler('xyz', degrees=True)
+
+                return {
+                    "connected": True,
+                    "head_joints": head_joints,
+                    "antenna_joints": antenna_joints,
+                    "head_pose": {
+                        "roll": float(euler[0]),
+                        "pitch": float(euler[1]),
+                        "yaw": float(euler[2]),
+                    },
+                    "timestamp": datetime.now().isoformat()
+                }
+            except Exception as e:
+                return {"connected": False, "error": str(e)}
+
+        @app.get("/api/motor_status")
+        async def get_motor_status():
+            """Get detailed motor status."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                head_joints, antenna_joints = state.reachy_mini.get_current_joint_positions()
+
+                motors = {
+                    "body_rotation": {"position": np.rad2deg(head_joints[0]), "unit": "deg"},
+                    "stewart_1": {"position": np.rad2deg(head_joints[1]), "unit": "deg"},
+                    "stewart_2": {"position": np.rad2deg(head_joints[2]), "unit": "deg"},
+                    "stewart_3": {"position": np.rad2deg(head_joints[3]), "unit": "deg"},
+                    "stewart_4": {"position": np.rad2deg(head_joints[4]), "unit": "deg"},
+                    "stewart_5": {"position": np.rad2deg(head_joints[5]), "unit": "deg"},
+                    "stewart_6": {"position": np.rad2deg(head_joints[6]), "unit": "deg"},
+                    "right_antenna": {"position": np.rad2deg(antenna_joints[0]), "unit": "deg"},
+                    "left_antenna": {"position": np.rad2deg(antenna_joints[1]), "unit": "deg"},
+                }
+
+                return {
+                    "motors": motors,
+                    "timestamp": datetime.now().isoformat()
+                }
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        # ==================== Movement Endpoints ====================
+
+        @app.post("/api/move_head")
+        async def move_head(req: MoveRequest):
+            """Move head to specified orientation."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                target_pose = create_head_pose(
+                    roll=req.roll,
+                    pitch=req.pitch,
+                    yaw=req.yaw,
+                    degrees=True
+                )
+                state.reachy_mini.goto_target(head=target_pose, duration=req.duration)
+                return {"success": True, "message": f"Moved to roll={req.roll}, pitch={req.pitch}, yaw={req.yaw}"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.post("/api/move_antennas")
+        async def move_antennas(req: AntennaRequest):
+            """Move antennas to specified positions."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                antennas = np.deg2rad([req.right, req.left])
+                state.reachy_mini.goto_target(antennas=antennas, duration=req.duration)
+                return {"success": True, "message": f"Antennas moved to right={req.right}, left={req.left}"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.post("/api/go_to_zero")
+        async def go_to_zero():
+            """Move to zero/neutral position."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                state.reachy_mini.goto_target(
+                    head=np.eye(4),
+                    antennas=[0.0, 0.0],
+                    duration=1.5
+                )
+                return {"success": True, "message": "Moved to zero position"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.post("/api/wake_up")
+        async def wake_up():
+            """Execute wake up behavior."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                state.reachy_mini.wake_up()
+                return {"success": True, "message": "Wake up complete"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.post("/api/go_to_sleep")
+        async def go_to_sleep():
+            """Execute sleep behavior."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                state.reachy_mini.goto_sleep()
+                return {"success": True, "message": "Sleep complete"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        # ==================== Audio Endpoints ====================
+
+        @app.post("/api/audio/start_recording")
+        async def start_audio_recording():
+            """Start recording audio."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                state.audio_buffer = []
+                state.is_recording_audio = True
+                state.audio_samplerate = state.reachy_mini.media.get_input_audio_samplerate()
+                state.reachy_mini.media.start_recording()
+
+                # Start background thread to collect audio
+                def collect_audio():
+                    while state.is_recording_audio:
+                        sample = state.reachy_mini.media.get_audio_sample()
+                        if sample is not None:
+                            state.audio_buffer.append(sample)
+                        time.sleep(0.05)
+
+                threading.Thread(target=collect_audio, daemon=True).start()
+
+                return {"success": True, "message": "Recording started", "samplerate": state.audio_samplerate}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.post("/api/audio/stop_recording")
+        async def stop_audio_recording():
+            """Stop recording and save audio file."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                state.is_recording_audio = False
+                state.reachy_mini.media.stop_recording()
+                time.sleep(0.1)  # Allow collection thread to finish
+
+                if not state.audio_buffer:
+                    return {"success": False, "message": "No audio recorded"}
+
+                # Concatenate all audio chunks
+                audio_data = np.concatenate(state.audio_buffer, axis=0)
+
+                # Use only first channel if stereo
+                if audio_data.ndim > 1:
+                    audio_data = audio_data[:, 0]
+
+                # Save to file
+                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                filename = f"recording_{timestamp}.wav"
+                filepath = RECORDINGS_DIR / filename
+
+                sf.write(filepath, audio_data, state.audio_samplerate)
+
+                duration = len(audio_data) / state.audio_samplerate
+
+                return {
+                    "success": True,
+                    "filename": filename,
+                    "duration": duration,
+                    "samplerate": state.audio_samplerate
+                }
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.get("/api/audio/list")
+        async def list_recordings():
+            """List all saved recordings."""
+            recordings = []
+            for f in sorted(RECORDINGS_DIR.glob("*.wav"), reverse=True):
+                try:
+                    info = sf.info(str(f))
+                    recordings.append({
+                        "filename": f.name,
+                        "duration": info.duration,
+                        "samplerate": info.samplerate,
+                        "size_kb": f.stat().st_size / 1024,
+                        "created": datetime.fromtimestamp(f.stat().st_ctime).isoformat()
+                    })
+                except Exception:
+                    recordings.append({"filename": f.name, "error": "Could not read file info"})
+
+            return {"recordings": recordings}
+
+        @app.get("/api/audio/download/{filename}")
+        async def download_recording(filename: str):
+            """Download a recording file."""
+            filepath = RECORDINGS_DIR / filename
+            if not filepath.exists():
+                raise HTTPException(404, "Recording not found")
+
+            return FileResponse(
+                filepath,
+                media_type="audio/wav",
+                filename=filename
+            )
+
+        @app.post("/api/audio/play/{filename}")
+        async def play_recording(filename: str):
+            """Play a recording through the robot's speaker."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            filepath = RECORDINGS_DIR / filename
+            if not filepath.exists():
+                raise HTTPException(404, "Recording not found")
+
+            try:
+                state.reachy_mini.media.play_sound(str(filepath))
+                return {"success": True, "message": f"Playing {filename}"}
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.delete("/api/audio/delete/{filename}")
+        async def delete_recording(filename: str):
+            """Delete a recording."""
+            filepath = RECORDINGS_DIR / filename
+            if not filepath.exists():
+                raise HTTPException(404, "Recording not found")
+
+            filepath.unlink()
+            return {"success": True, "message": f"Deleted {filename}"}
+
+        # ==================== Camera Endpoints ====================
+
+        def get_frame_with_retry(timeout: float = 30.0) -> np.ndarray | None:
+            """Get a camera frame with retry logic."""
+            if state.reachy_mini is None:
+                return None
+
+            start_time = time.time()
+            while time.time() - start_time < timeout:
+                frame = state.reachy_mini.media.get_frame()
+                if frame is not None:
+                    return frame
+                time.sleep(0.1)
+            return None
+
+        @app.get("/api/camera/capture")
+        async def capture_image():
+            """Capture and return current camera frame as base64 JPEG."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                frame = get_frame_with_retry(timeout=5.0)
+                if frame is None:
+                    raise HTTPException(503, "No camera frame available after timeout")
+
+                _, buffer = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 90])
+                b64 = base64.b64encode(buffer).decode('utf-8')
+                return {"image": b64, "timestamp": datetime.now().isoformat()}
+            except HTTPException:
+                raise
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.get("/api/camera/stream")
+        async def camera_stream():
+            """Stream camera frames as MJPEG."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            def generate():
+                while True:
+                    frame = state.reachy_mini.media.get_frame()
+                    if frame is not None:
+                        _, buffer = cv2.imencode('.jpg', frame)
+                        frame_bytes = buffer.tobytes()
+                        yield (b'--frame\r\n'
+                               b'Content-Type: image/jpeg\r\n\r\n' + frame_bytes + b'\r\n')
+                    time.sleep(0.033)
+
+            return StreamingResponse(
+                generate(),
+                media_type='multipart/x-mixed-replace; boundary=frame'
+            )
+
+        @app.post("/api/camera/save")
+        async def save_capture():
+            """Save current frame to file."""
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                frame = get_frame_with_retry(timeout=5.0)
+                if frame is None:
+                    raise HTTPException(503, "No camera frame available after timeout")
+
+                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                filename = f"capture_{timestamp}.jpg"
+                filepath = CAPTURES_DIR / filename
+
+                cv2.imwrite(str(filepath), frame)
+
+                return {
+                    "success": True,
+                    "filename": filename,
+                    "path": str(filepath)
+                }
+            except HTTPException:
+                raise
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.get("/api/camera/list")
+        async def list_captures():
+            """List all saved captures."""
+            captures = []
+            for f in sorted(CAPTURES_DIR.glob("*.jpg"), reverse=True):
+                captures.append({
+                    "filename": f.name,
+                    "size_kb": f.stat().st_size / 1024,
+                    "created": datetime.fromtimestamp(f.stat().st_ctime).isoformat()
+                })
+            return {"captures": captures}
+
+        @app.get("/api/camera/download/{filename}")
+        async def download_capture(filename: str):
+            """Download a capture file."""
+            filepath = CAPTURES_DIR / filename
+            if not filepath.exists():
+                raise HTTPException(404, "Capture not found")
+
+            return FileResponse(
+                filepath,
+                media_type="image/jpeg",
+                filename=filename
+            )
+
+        @app.delete("/api/camera/delete/{filename}")
+        async def delete_capture(filename: str):
+            """Delete a capture."""
+            filepath = CAPTURES_DIR / filename
+            if not filepath.exists():
+                raise HTTPException(404, "Capture not found")
+
+            filepath.unlink()
+            return {"success": True, "message": f"Deleted {filename}"}
+
+        # ==================== Rotation Validation Test ====================
+
+        @app.post("/api/test/rotation_validation")
+        async def run_rotation_validation(req: RotationTestRequest):
+            """Run the advanced rotation validation test.
+
+            Steps:
+            1. Move to zero position
+            2. Capture image
+            3. Roll head by specified angle
+            4. Capture image
+            5. Compute rotation between images
+            6. Compare expected vs actual rotation
+            """
+            if state.reachy_mini is None:
+                raise HTTPException(503, "Robot not connected")
+
+            try:
+                results = {"steps": [], "success": False}
+
+                # Step 1: Go to zero position
+                results["steps"].append({"step": "go_to_zero", "status": "started"})
+                state.reachy_mini.goto_target(head=np.eye(4), antennas=[0.0, 0.0], duration=1.5)
+                time.sleep(0.5)  # Stabilization
+                results["steps"][-1]["status"] = "completed"
+
+                # Step 2: Capture image at zero position
+                results["steps"].append({"step": "capture_zero", "status": "started"})
+                image_zero = get_frame_with_retry(timeout=5.0)
+                if image_zero is None:
+                    raise Exception("No camera frame available after timeout")
+                gray_zero = cv2.cvtColor(image_zero, cv2.COLOR_BGR2GRAY)
+
+                # Save for reference
+                timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+                zero_filename = f"rotation_test_{timestamp}_zero.jpg"
+                cv2.imwrite(str(CAPTURES_DIR / zero_filename), image_zero)
+                results["steps"][-1]["status"] = "completed"
+                results["steps"][-1]["filename"] = zero_filename
+
+                # Step 3: Roll head
+                results["steps"].append({
+                    "step": "roll_head",
+                    "status": "started",
+                    "target_angle": req.roll_angle
+                })
+                target_pose = create_head_pose(roll=req.roll_angle, pitch=0, yaw=0, degrees=True)
+                state.reachy_mini.goto_target(head=target_pose, duration=req.duration)
+                time.sleep(0.5)  # Stabilization
+                results["steps"][-1]["status"] = "completed"
+
+                # Step 4: Capture image at rolled position
+                results["steps"].append({"step": "capture_rolled", "status": "started"})
+                image_rolled = get_frame_with_retry(timeout=5.0)
+                if image_rolled is None:
+                    raise Exception("No camera frame available after timeout")
+                gray_rolled = cv2.cvtColor(image_rolled, cv2.COLOR_BGR2GRAY)
+
+                rolled_filename = f"rotation_test_{timestamp}_rolled.jpg"
+                cv2.imwrite(str(CAPTURES_DIR / rolled_filename), image_rolled)
+                results["steps"][-1]["status"] = "completed"
+                results["steps"][-1]["filename"] = rolled_filename
+
+                # Step 5: Compute rotation between images
+                results["steps"].append({"step": "compute_rotation", "status": "started"})
+
+                # Use ORB feature detection
+                orb = cv2.ORB_create(nfeatures=500)
+                kp1, des1 = orb.detectAndCompute(gray_zero, None)
+                kp2, des2 = orb.detectAndCompute(gray_rolled, None)
+
+                if des1 is None or des2 is None or len(kp1) < 10 or len(kp2) < 10:
+                    results["steps"][-1]["status"] = "failed"
+                    results["steps"][-1]["error"] = "Not enough features detected"
+                    results["computed_rotation"] = None
+                else:
+                    # Match features
+                    bf = cv2.BFMatcher(cv2.NORM_HAMMING, crossCheck=True)
+                    matches = bf.match(des1, des2)
+                    matches = sorted(matches, key=lambda x: x.distance)[:50]
+
+                    if len(matches) < 10:
+                        results["steps"][-1]["status"] = "failed"
+                        results["steps"][-1]["error"] = "Not enough matches"
+                        results["computed_rotation"] = None
+                    else:
+                        # Extract matched points
+                        pts1 = np.float32([kp1[m.queryIdx].pt for m in matches])
+                        pts2 = np.float32([kp2[m.trainIdx].pt for m in matches])
+
+                        # Estimate affine transformation
+                        M, inliers = cv2.estimateAffinePartial2D(pts1, pts2)
+
+                        if M is not None:
+                            # Extract rotation angle from transformation matrix
+                            computed_rotation = np.rad2deg(np.arctan2(M[1, 0], M[0, 0]))
+                            results["computed_rotation"] = float(computed_rotation)
+                            results["steps"][-1]["status"] = "completed"
+
+                            # The image rotation should be approximately opposite to head roll
+                            # (when head rolls right, image content appears to roll left)
+                            expected_image_rotation = -req.roll_angle
+                            error = float(abs(computed_rotation - expected_image_rotation))
+
+                            results["expected_rotation"] = float(expected_image_rotation)
+                            results["rotation_error"] = error
+                            results["success"] = bool(error < 15)  # Allow 15 degree tolerance
+                            results["num_matches"] = len(matches)
+                            results["num_inliers"] = int(np.sum(inliers)) if inliers is not None else 0
+                        else:
+                            results["steps"][-1]["status"] = "failed"
+                            results["steps"][-1]["error"] = "Could not estimate transformation"
+                            results["computed_rotation"] = None
+
+                # Step 6: Return to zero
+                results["steps"].append({"step": "return_to_zero", "status": "started"})
+                state.reachy_mini.goto_target(head=np.eye(4), duration=1.0)
+                results["steps"][-1]["status"] = "completed"
+
+                state.last_rotation_test = results
+                return results
+
+            except Exception as e:
+                raise HTTPException(500, str(e))
+
+        @app.get("/api/test/last_rotation_result")
+        async def get_last_rotation_result():
+            """Get the last rotation test result."""
+            if state.last_rotation_test is None:
+                return {"message": "No test has been run yet"}
+            return state.last_rotation_test
+
+
+if __name__ == "__main__":
+    app = ReachyMiniToolbox()
+    try:
+        app.wrapped_run()
+    except KeyboardInterrupt:
+        app.stop()

reachy_mini_toolbox/static/index.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Reachy Mini Debug & CI Toolbox</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+    <header>
+        <h1>Reachy Mini Debug & CI Toolbox</h1>
+        <div id="connection-status" class="status-indicator">
+            <span class="dot"></span>
+            <span class="text">Checking...</span>
+        </div>
+    </header>
+
+    <main>
+        <!-- Status Panel -->
+        <section class="panel" id="status-panel">
+            <h2>Robot Status</h2>
+            <div class="panel-content">
+                <div class="status-grid" id="status-grid">
+                    <div class="status-item">
+                        <label>Roll</label>
+                        <span id="status-roll">--</span>
+                    </div>
+                    <div class="status-item">
+                        <label>Pitch</label>
+                        <span id="status-pitch">--</span>
+                    </div>
+                    <div class="status-item">
+                        <label>Yaw</label>
+                        <span id="status-yaw">--</span>
+                    </div>
+                </div>
+                <button onclick="refreshStatus()" class="btn btn-secondary">Refresh Status</button>
+            </div>
+        </section>
+
+        <!-- Motor Status Panel -->
+        <section class="panel" id="motor-panel">
+            <h2>Motor Status</h2>
+            <div class="panel-content">
+                <div class="motor-grid" id="motor-grid">
+                    <!-- Motors will be populated by JS -->
+                </div>
+                <button onclick="refreshMotorStatus()" class="btn btn-secondary">Refresh Motors</button>
+            </div>
+        </section>
+
+        <!-- Movement Control Panel -->
+        <section class="panel" id="movement-panel">
+            <h2>Movement Control</h2>
+            <div class="panel-content">
+                <div class="control-group">
+                    <h3>Head Position</h3>
+                    <div class="slider-group">
+                        <label>Roll: <span id="roll-value">0</span>&deg;</label>
+                        <input type="range" id="roll-slider" min="-30" max="30" value="0" oninput="updateSliderValue('roll')">
+                    </div>
+                    <div class="slider-group">
+                        <label>Pitch: <span id="pitch-value">0</span>&deg;</label>
+                        <input type="range" id="pitch-slider" min="-30" max="30" value="0" oninput="updateSliderValue('pitch')">
+                    </div>
+                    <div class="slider-group">
+                        <label>Yaw: <span id="yaw-value">0</span>&deg;</label>
+                        <input type="range" id="yaw-slider" min="-45" max="45" value="0" oninput="updateSliderValue('yaw')">
+                    </div>
+                    <div class="slider-group">
+                        <label>Duration: <span id="duration-value">1.0</span>s</label>
+                        <input type="range" id="duration-slider" min="0.5" max="3" step="0.1" value="1.0" oninput="updateSliderValue('duration')">
+                    </div>
+                    <button onclick="moveHead()" class="btn btn-primary">Move Head</button>
+                </div>
+
+                <div class="control-group">
+                    <h3>Antennas</h3>
+                    <div class="slider-group">
+                        <label>Right: <span id="antenna-right-value">0</span>&deg;</label>
+                        <input type="range" id="antenna-right-slider" min="-45" max="45" value="0" oninput="updateSliderValue('antenna-right')">
+                    </div>
+                    <div class="slider-group">
+                        <label>Left: <span id="antenna-left-value">0</span>&deg;</label>
+                        <input type="range" id="antenna-left-slider" min="-45" max="45" value="0" oninput="updateSliderValue('antenna-left')">
+                    </div>
+                    <button onclick="moveAntennas()" class="btn btn-primary">Move Antennas</button>
+                </div>
+
+                <div class="control-group">
+                    <h3>Quick Actions</h3>
+                    <div class="button-row">
+                        <button onclick="goToZero()" class="btn btn-secondary">Go to Zero</button>
+                        <button onclick="wakeUp()" class="btn btn-success">Wake Up</button>
+                        <button onclick="goToSleep()" class="btn btn-warning">Go to Sleep</button>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Camera Panel -->
+        <section class="panel" id="camera-panel">
+            <h2>Camera</h2>
+            <div class="panel-content">
+                <div class="camera-view">
+                    <img id="camera-stream" src="/api/camera/stream" alt="Camera Stream" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22640%22 height=%22480%22><rect fill=%22%23333%22 width=%22100%%22 height=%22100%%22/><text fill=%22%23888%22 x=%2250%%22 y=%2250%%22 text-anchor=%22middle%22>No Camera</text></svg>'">
+                </div>
+                <div class="button-row">
+                    <button onclick="captureImage()" class="btn btn-primary">Capture Image</button>
+                    <button onclick="refreshCaptures()" class="btn btn-secondary">Refresh List</button>
+                </div>
+                <div class="file-list" id="captures-list">
+                    <!-- Captures will be listed here -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Audio Panel -->
+        <section class="panel" id="audio-panel">
+            <h2>Audio Recording</h2>
+            <div class="panel-content">
+                <div class="recording-controls">
+                    <button id="record-btn" onclick="toggleRecording()" class="btn btn-record">
+                        <span class="record-icon"></span>
+                        <span class="record-text">Start Recording</span>
+                    </button>
+                    <span id="recording-status"></span>
+                </div>
+                <div class="button-row">
+                    <button onclick="refreshRecordings()" class="btn btn-secondary">Refresh List</button>
+                </div>
+                <div class="file-list" id="recordings-list">
+                    <!-- Recordings will be listed here -->
+                </div>
+            </div>
+        </section>
+
+        <!-- Rotation Validation Test Panel -->
+        <section class="panel" id="test-panel">
+            <h2>Rotation Validation Test</h2>
+            <div class="panel-content">
+                <p class="panel-description">
+                    This test validates head rotation by:
+                    <ol>
+                        <li>Going to zero position and capturing an image</li>
+                        <li>Rolling the head by a specified angle</li>
+                        <li>Capturing another image and computing the rotation</li>
+                        <li>Comparing expected vs actual rotation</li>
+                    </ol>
+                </p>
+                <div class="control-group">
+                    <div class="slider-group">
+                        <label>Roll Angle: <span id="test-roll-value">30</span>&deg;</label>
+                        <input type="range" id="test-roll-slider" min="10" max="45" value="30" oninput="updateSliderValue('test-roll')">
+                    </div>
+                    <div class="slider-group">
+                        <label>Duration: <span id="test-duration-value">2.0</span>s</label>
+                        <input type="range" id="test-duration-slider" min="1" max="4" step="0.5" value="2.0" oninput="updateSliderValue('test-duration')">
+                    </div>
+                </div>
+                <button onclick="runRotationTest()" class="btn btn-primary btn-large" id="run-test-btn">Run Rotation Test</button>
+
+                <div id="test-results" class="test-results hidden">
+                    <h3>Test Results</h3>
+                    <div class="result-grid">
+                        <div class="result-item">
+                            <label>Status</label>
+                            <span id="result-status" class="result-value">--</span>
+                        </div>
+                        <div class="result-item">
+                            <label>Expected Rotation</label>
+                            <span id="result-expected">--</span>
+                        </div>
+                        <div class="result-item">
+                            <label>Computed Rotation</label>
+                            <span id="result-computed">--</span>
+                        </div>
+                        <div class="result-item">
+                            <label>Error</label>
+                            <span id="result-error">--</span>
+                        </div>
+                        <div class="result-item">
+                            <label>Matches Found</label>
+                            <span id="result-matches">--</span>
+                        </div>
+                    </div>
+                    <div class="test-images">
+                        <div class="test-image">
+                            <h4>Zero Position</h4>
+                            <img id="test-image-zero" src="" alt="Zero position">
+                        </div>
+                        <div class="test-image">
+                            <h4>Rolled Position</h4>
+                            <img id="test-image-rolled" src="" alt="Rolled position">
+                        </div>
+                    </div>
+                    <div id="test-steps" class="test-steps">
+                        <!-- Steps will be listed here -->
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <footer>
+        <p>Reachy Mini Toolbox v0.1.0</p>
+    </footer>
+
+    <div id="toast" class="toast hidden"></div>
+
+    <script src="/static/main.js"></script>
+</body>
+</html>

reachy_mini_toolbox/static/main.js

@@ -0,0 +1,444 @@
+// ==================== State ====================
+let isRecording = false;
+let statusInterval = null;
+
+// ==================== Utility Functions ====================
+
+function showToast(message, type = 'info') {
+    const toast = document.getElementById('toast');
+    toast.textContent = message;
+    toast.className = `toast ${type}`;
+    toast.classList.remove('hidden');
+
+    setTimeout(() => {
+        toast.classList.add('hidden');
+    }, 3000);
+}
+
+async function apiCall(endpoint, options = {}) {
+    try {
+        const response = await fetch(endpoint, {
+            headers: { 'Content-Type': 'application/json' },
+            ...options
+        });
+
+        if (!response.ok) {
+            const error = await response.json().catch(() => ({ detail: response.statusText }));
+            throw new Error(error.detail || 'Request failed');
+        }
+
+        return await response.json();
+    } catch (error) {
+        showToast(error.message, 'error');
+        throw error;
+    }
+}
+
+function updateSliderValue(name) {
+    const slider = document.getElementById(`${name}-slider`);
+    const display = document.getElementById(`${name}-value`);
+    if (slider && display) {
+        display.textContent = slider.value;
+    }
+}
+
+function formatDuration(seconds) {
+    if (seconds < 60) {
+        return `${seconds.toFixed(1)}s`;
+    }
+    const mins = Math.floor(seconds / 60);
+    const secs = (seconds % 60).toFixed(0);
+    return `${mins}:${secs.padStart(2, '0')}`;
+}
+
+function formatDate(isoString) {
+    const date = new Date(isoString);
+    return date.toLocaleString();
+}
+
+// ==================== Status Functions ====================
+
+async function refreshStatus() {
+    try {
+        const data = await apiCall('/api/status');
+
+        if (data.connected) {
+            document.getElementById('status-roll').textContent = `${data.head_pose.roll.toFixed(1)}°`;
+            document.getElementById('status-pitch').textContent = `${data.head_pose.pitch.toFixed(1)}°`;
+            document.getElementById('status-yaw').textContent = `${data.head_pose.yaw.toFixed(1)}°`;
+
+            updateConnectionStatus(true);
+        } else {
+            updateConnectionStatus(false, data.error);
+        }
+    } catch (error) {
+        updateConnectionStatus(false, error.message);
+    }
+}
+
+function updateConnectionStatus(connected, error = null) {
+    const status = document.getElementById('connection-status');
+    const dot = status.querySelector('.dot');
+    const text = status.querySelector('.text');
+
+    if (connected) {
+        dot.className = 'dot connected';
+        text.textContent = 'Connected';
+    } else {
+        dot.className = 'dot disconnected';
+        text.textContent = error ? `Disconnected: ${error}` : 'Disconnected';
+    }
+}
+
+async function refreshMotorStatus() {
+    try {
+        const data = await apiCall('/api/motor_status');
+        const grid = document.getElementById('motor-grid');
+
+        grid.innerHTML = '';
+
+        for (const [name, info] of Object.entries(data.motors)) {
+            const item = document.createElement('div');
+            item.className = 'motor-item';
+            item.innerHTML = `
+                <span class="motor-name">${name.replace(/_/g, ' ')}</span>
+                <span class="motor-value">${info.position.toFixed(1)}°</span>
+            `;
+            grid.appendChild(item);
+        }
+    } catch (error) {
+        console.error('Failed to refresh motor status:', error);
+    }
+}
+
+// ==================== Movement Functions ====================
+
+async function moveHead() {
+    const roll = parseFloat(document.getElementById('roll-slider').value);
+    const pitch = parseFloat(document.getElementById('pitch-slider').value);
+    const yaw = parseFloat(document.getElementById('yaw-slider').value);
+    const duration = parseFloat(document.getElementById('duration-slider').value);
+
+    try {
+        await apiCall('/api/move_head', {
+            method: 'POST',
+            body: JSON.stringify({ roll, pitch, yaw, duration })
+        });
+        showToast('Head movement executed', 'success');
+        setTimeout(refreshStatus, duration * 1000 + 200);
+    } catch (error) {
+        console.error('Move head failed:', error);
+    }
+}
+
+async function moveAntennas() {
+    const right = parseFloat(document.getElementById('antenna-right-slider').value);
+    const left = parseFloat(document.getElementById('antenna-left-slider').value);
+
+    try {
+        await apiCall('/api/move_antennas', {
+            method: 'POST',
+            body: JSON.stringify({ right, left, duration: 0.5 })
+        });
+        showToast('Antennas moved', 'success');
+    } catch (error) {
+        console.error('Move antennas failed:', error);
+    }
+}
+
+async function goToZero() {
+    try {
+        await apiCall('/api/go_to_zero', { method: 'POST' });
+        showToast('Moved to zero position', 'success');
+
+        // Reset sliders
+        document.getElementById('roll-slider').value = 0;
+        document.getElementById('pitch-slider').value = 0;
+        document.getElementById('yaw-slider').value = 0;
+        document.getElementById('antenna-right-slider').value = 0;
+        document.getElementById('antenna-left-slider').value = 0;
+
+        ['roll', 'pitch', 'yaw', 'antenna-right', 'antenna-left'].forEach(updateSliderValue);
+
+        setTimeout(refreshStatus, 1700);
+    } catch (error) {
+        console.error('Go to zero failed:', error);
+    }
+}
+
+async function wakeUp() {
+    try {
+        showToast('Waking up...', 'info');
+        await apiCall('/api/wake_up', { method: 'POST' });
+        showToast('Wake up complete', 'success');
+        setTimeout(refreshStatus, 500);
+    } catch (error) {
+        console.error('Wake up failed:', error);
+    }
+}
+
+async function goToSleep() {
+    try {
+        showToast('Going to sleep...', 'info');
+        await apiCall('/api/go_to_sleep', { method: 'POST' });
+        showToast('Sleep complete', 'success');
+        setTimeout(refreshStatus, 500);
+    } catch (error) {
+        console.error('Go to sleep failed:', error);
+    }
+}
+
+// ==================== Camera Functions ====================
+
+async function captureImage() {
+    try {
+        const data = await apiCall('/api/camera/save', { method: 'POST' });
+        showToast(`Captured: ${data.filename}`, 'success');
+        refreshCaptures();
+    } catch (error) {
+        console.error('Capture failed:', error);
+    }
+}
+
+async function refreshCaptures() {
+    try {
+        const data = await apiCall('/api/camera/list');
+        const list = document.getElementById('captures-list');
+
+        if (data.captures.length === 0) {
+            list.innerHTML = '<p class="empty-message">No captures yet</p>';
+            return;
+        }
+
+        list.innerHTML = data.captures.map(capture => `
+            <div class="file-item">
+                <div class="file-info">
+                    <span class="file-name">${capture.filename}</span>
+                    <span class="file-meta">${capture.size_kb.toFixed(1)} KB - ${formatDate(capture.created)}</span>
+                </div>
+                <div class="file-actions">
+                    <a href="/api/camera/download/${capture.filename}" download class="btn btn-small">Download</a>
+                    <button onclick="deleteCapture('${capture.filename}')" class="btn btn-small btn-danger">Delete</button>
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        console.error('Failed to refresh captures:', error);
+    }
+}
+
+async function deleteCapture(filename) {
+    if (!confirm(`Delete ${filename}?`)) return;
+
+    try {
+        await apiCall(`/api/camera/delete/${filename}`, { method: 'DELETE' });
+        showToast('Capture deleted', 'success');
+        refreshCaptures();
+    } catch (error) {
+        console.error('Delete failed:', error);
+    }
+}
+
+// ==================== Audio Functions ====================
+
+async function toggleRecording() {
+    const btn = document.getElementById('record-btn');
+    const statusSpan = document.getElementById('recording-status');
+
+    if (!isRecording) {
+        // Start recording
+        try {
+            const data = await apiCall('/api/audio/start_recording', { method: 'POST' });
+            isRecording = true;
+            btn.classList.add('recording');
+            btn.querySelector('.record-text').textContent = 'Stop Recording';
+            statusSpan.textContent = `Recording @ ${data.samplerate} Hz...`;
+            showToast('Recording started', 'success');
+        } catch (error) {
+            console.error('Start recording failed:', error);
+        }
+    } else {
+        // Stop recording
+        try {
+            btn.disabled = true;
+            btn.querySelector('.record-text').textContent = 'Saving...';
+
+            const data = await apiCall('/api/audio/stop_recording', { method: 'POST' });
+            isRecording = false;
+            btn.classList.remove('recording');
+            btn.querySelector('.record-text').textContent = 'Start Recording';
+            btn.disabled = false;
+            statusSpan.textContent = '';
+
+            if (data.success) {
+                showToast(`Saved: ${data.filename} (${formatDuration(data.duration)})`, 'success');
+                refreshRecordings();
+            } else {
+                showToast(data.message, 'warning');
+            }
+        } catch (error) {
+            console.error('Stop recording failed:', error);
+            btn.disabled = false;
+            btn.querySelector('.record-text').textContent = 'Start Recording';
+        }
+    }
+}
+
+async function refreshRecordings() {
+    try {
+        const data = await apiCall('/api/audio/list');
+        const list = document.getElementById('recordings-list');
+
+        if (data.recordings.length === 0) {
+            list.innerHTML = '<p class="empty-message">No recordings yet</p>';
+            return;
+        }
+
+        list.innerHTML = data.recordings.map(rec => `
+            <div class="file-item">
+                <div class="file-info">
+                    <span class="file-name">${rec.filename}</span>
+                    <span class="file-meta">${formatDuration(rec.duration)} - ${rec.samplerate} Hz - ${rec.size_kb.toFixed(1)} KB</span>
+                </div>
+                <div class="file-actions">
+                    <button onclick="playRecording('${rec.filename}')" class="btn btn-small btn-success">Play</button>
+                    <a href="/api/audio/download/${rec.filename}" download class="btn btn-small">Download</a>
+                    <button onclick="deleteRecording('${rec.filename}')" class="btn btn-small btn-danger">Delete</button>
+                </div>
+            </div>
+        `).join('');
+    } catch (error) {
+        console.error('Failed to refresh recordings:', error);
+    }
+}
+
+async function playRecording(filename) {
+    try {
+        await apiCall(`/api/audio/play/${filename}`, { method: 'POST' });
+        showToast(`Playing: ${filename}`, 'success');
+    } catch (error) {
+        console.error('Play failed:', error);
+    }
+}
+
+async function deleteRecording(filename) {
+    if (!confirm(`Delete ${filename}?`)) return;
+
+    try {
+        await apiCall(`/api/audio/delete/${filename}`, { method: 'DELETE' });
+        showToast('Recording deleted', 'success');
+        refreshRecordings();
+    } catch (error) {
+        console.error('Delete failed:', error);
+    }
+}
+
+// ==================== Rotation Test Functions ====================
+
+async function runRotationTest() {
+    const btn = document.getElementById('run-test-btn');
+    const resultsDiv = document.getElementById('test-results');
+
+    const rollAngle = parseFloat(document.getElementById('test-roll-slider').value);
+    const duration = parseFloat(document.getElementById('test-duration-slider').value);
+
+    try {
+        btn.disabled = true;
+        btn.textContent = 'Running Test...';
+        resultsDiv.classList.add('hidden');
+
+        showToast('Running rotation test...', 'info');
+
+        const data = await apiCall('/api/test/rotation_validation', {
+            method: 'POST',
+            body: JSON.stringify({ roll_angle: rollAngle, duration })
+        });
+
+        // Show results
+        resultsDiv.classList.remove('hidden');
+
+        // Update status
+        const statusEl = document.getElementById('result-status');
+        if (data.success) {
+            statusEl.textContent = 'PASSED';
+            statusEl.className = 'result-value success';
+        } else {
+            statusEl.textContent = 'FAILED';
+            statusEl.className = 'result-value error';
+        }
+
+        // Update values
+        document.getElementById('result-expected').textContent =
+            data.expected_rotation !== undefined ? `${data.expected_rotation.toFixed(1)}°` : '--';
+        document.getElementById('result-computed').textContent =
+            data.computed_rotation !== null ? `${data.computed_rotation.toFixed(1)}°` : 'N/A';
+        document.getElementById('result-error').textContent =
+            data.rotation_error !== undefined ? `${data.rotation_error.toFixed(1)}°` : '--';
+        document.getElementById('result-matches').textContent =
+            data.num_matches !== undefined ? `${data.num_matches} (${data.num_inliers} inliers)` : '--';
+
+        // Update images
+        const zeroFilename = data.steps.find(s => s.step === 'capture_zero')?.filename;
+        const rolledFilename = data.steps.find(s => s.step === 'capture_rolled')?.filename;
+
+        if (zeroFilename) {
+            document.getElementById('test-image-zero').src = `/api/camera/download/${zeroFilename}`;
+        }
+        if (rolledFilename) {
+            document.getElementById('test-image-rolled').src = `/api/camera/download/${rolledFilename}`;
+        }
+
+        // Update steps
+        const stepsDiv = document.getElementById('test-steps');
+        stepsDiv.innerHTML = '<h4>Test Steps</h4>' + data.steps.map(step => {
+            const statusClass = step.status === 'completed' ? 'step-success' :
+                               step.status === 'failed' ? 'step-error' : 'step-pending';
+            return `
+                <div class="step-item ${statusClass}">
+                    <span class="step-name">${step.step.replace(/_/g, ' ')}</span>
+                    <span class="step-status">${step.status}</span>
+                    ${step.error ? `<span class="step-error">${step.error}</span>` : ''}
+                </div>
+            `;
+        }).join('');
+
+        showToast(data.success ? 'Test PASSED!' : 'Test FAILED', data.success ? 'success' : 'error');
+
+        // Refresh captures list to show new images
+        refreshCaptures();
+
+    } catch (error) {
+        console.error('Rotation test failed:', error);
+    } finally {
+        btn.disabled = false;
+        btn.textContent = 'Run Rotation Test';
+    }
+}
+
+// ==================== Initialization ====================
+
+function startStatusPolling() {
+    refreshStatus();
+    refreshMotorStatus();
+    statusInterval = setInterval(() => {
+        refreshStatus();
+        refreshMotorStatus();
+    }, 2000);
+}
+
+function init() {
+    // Initialize slider displays
+    ['roll', 'pitch', 'yaw', 'duration', 'antenna-right', 'antenna-left', 'test-roll', 'test-duration'].forEach(updateSliderValue);
+
+    // Start polling
+    startStatusPolling();
+
+    // Load file lists
+    refreshCaptures();
+    refreshRecordings();
+
+    console.log('Reachy Mini Toolbox initialized');
+}
+
+// Start on page load
+document.addEventListener('DOMContentLoaded', init);

reachy_mini_toolbox/static/style.css

@@ -0,0 +1,666 @@
+/* ==================== Variables ====================  */
+:root {
+    --bg-primary: #1a1a2e;
+    --bg-secondary: #16213e;
+    --bg-panel: #0f3460;
+    --text-primary: #eaeaea;
+    --text-secondary: #a0a0a0;
+    --accent: #e94560;
+    --accent-hover: #ff6b6b;
+    --success: #4ade80;
+    --warning: #fbbf24;
+    --error: #ef4444;
+    --info: #38bdf8;
+    --border: #2a4a7f;
+    --border-light: #3a5a9f;
+    --shadow: rgba(0, 0, 0, 0.3);
+}
+
+/* ==================== Base Styles ====================  */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+    background: var(--bg-primary);
+    color: var(--text-primary);
+    min-height: 100vh;
+    line-height: 1.6;
+}
+
+/* ==================== Header ====================  */
+header {
+    background: var(--bg-secondary);
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid var(--accent);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.status-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--bg-panel);
+    border-radius: 20px;
+    font-size: 0.875rem;
+}
+
+.status-indicator .dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--text-secondary);
+    transition: background 0.3s;
+}
+
+.status-indicator .dot.connected {
+    background: var(--success);
+    box-shadow: 0 0 8px var(--success);
+}
+
+.status-indicator .dot.disconnected {
+    background: var(--error);
+    box-shadow: 0 0 8px var(--error);
+}
+
+/* ==================== Main Layout ====================  */
+main {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 1.5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 1.5rem;
+}
+
+@media (max-width: 900px) {
+    main {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* ==================== Panel Styles ====================  */
+.panel {
+    background: var(--bg-secondary);
+    border-radius: 12px;
+    border: 1px solid var(--border);
+    overflow: hidden;
+    box-shadow: 0 4px 20px var(--shadow);
+}
+
+.panel h2 {
+    background: var(--bg-panel);
+    padding: 1rem 1.25rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.panel-content {
+    padding: 1.25rem;
+}
+
+.panel-description {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+}
+
+.panel-description ol {
+    margin-left: 1.5rem;
+    margin-top: 0.5rem;
+}
+
+/* ==================== Status Grid ====================  */
+.status-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.status-item {
+    background: var(--bg-panel);
+    padding: 1rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.status-item label {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    margin-bottom: 0.25rem;
+}
+
+.status-item span {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--accent);
+}
+
+/* ==================== Motor Grid ====================  */
+.motor-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.motor-item {
+    background: var(--bg-panel);
+    padding: 0.75rem;
+    border-radius: 6px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.motor-name {
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    text-transform: capitalize;
+}
+
+.motor-value {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--info);
+}
+
+/* ==================== Control Groups ====================  */
+.control-group {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border);
+}
+
+.control-group:last-child {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    border-bottom: none;
+}
+
+.control-group h3 {
+    font-size: 0.9rem;
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* ==================== Slider Styles ====================  */
+.slider-group {
+    margin-bottom: 1rem;
+}
+
+.slider-group label {
+    display: block;
+    font-size: 0.875rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+.slider-group input[type="range"] {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--bg-panel);
+    outline: none;
+    cursor: pointer;
+    -webkit-appearance: none;
+}
+
+.slider-group input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--accent);
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s;
+}
+
+.slider-group input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 10px var(--accent);
+}
+
+.slider-group input[type="range"]::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--accent);
+    cursor: pointer;
+    border: none;
+}
+
+/* ==================== Button Styles ====================  */
+.btn {
+    padding: 0.625rem 1.25rem;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
+    text-decoration: none;
+    display: inline-block;
+    text-align: center;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.btn-primary {
+    background: var(--accent);
+    color: white;
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--accent-hover);
+    transform: translateY(-1px);
+}
+
+.btn-secondary {
+    background: var(--border);
+    color: var(--text-primary);
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: var(--border-light);
+}
+
+.btn-success {
+    background: var(--success);
+    color: var(--bg-primary);
+}
+
+.btn-success:hover:not(:disabled) {
+    filter: brightness(1.1);
+}
+
+.btn-warning {
+    background: var(--warning);
+    color: var(--bg-primary);
+}
+
+.btn-warning:hover:not(:disabled) {
+    filter: brightness(1.1);
+}
+
+.btn-danger {
+    background: var(--error);
+    color: white;
+}
+
+.btn-danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+}
+
+.btn-small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.75rem;
+}
+
+.btn-large {
+    padding: 0.875rem 2rem;
+    font-size: 1rem;
+    width: 100%;
+}
+
+.button-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+/* ==================== Recording Button ====================  */
+.recording-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.btn-record {
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem;
+}
+
+.btn-record .record-icon {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: var(--error);
+}
+
+.btn-record.recording {
+    background: var(--error);
+}
+
+.btn-record.recording .record-icon {
+    background: white;
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.4; }
+}
+
+#recording-status {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+/* ==================== Camera View ====================  */
+.camera-view {
+    background: var(--bg-panel);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 1rem;
+    aspect-ratio: 4/3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.camera-view img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* ==================== File List ====================  */
+.file-list {
+    margin-top: 1rem;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.file-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem;
+    background: var(--bg-panel);
+    border-radius: 6px;
+    margin-bottom: 0.5rem;
+}
+
+.file-info {
+    flex: 1;
+    min-width: 0;
+}
+
+.file-name {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text-primary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.file-meta {
+    display: block;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin-top: 0.25rem;
+}
+
+.file-actions {
+    display: flex;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    margin-left: 1rem;
+}
+
+.empty-message {
+    text-align: center;
+    color: var(--text-secondary);
+    padding: 2rem;
+    font-size: 0.875rem;
+}
+
+/* ==================== Test Results ====================  */
+.test-results {
+    margin-top: 1.5rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid var(--border);
+}
+
+.test-results.hidden {
+    display: none;
+}
+
+.test-results h3 {
+    font-size: 1rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.result-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.result-item {
+    background: var(--bg-panel);
+    padding: 0.75rem;
+    border-radius: 6px;
+    text-align: center;
+}
+
+.result-item label {
+    display: block;
+    font-size: 0.7rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    margin-bottom: 0.25rem;
+}
+
+.result-item span {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.result-value.success {
+    color: var(--success);
+}
+
+.result-value.error {
+    color: var(--error);
+}
+
+.test-images {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.test-image {
+    background: var(--bg-panel);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.test-image h4 {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    text-align: center;
+    padding: 0.5rem;
+    background: var(--bg-secondary);
+    text-transform: uppercase;
+}
+
+.test-image img {
+    width: 100%;
+    aspect-ratio: 4/3;
+    object-fit: contain;
+}
+
+.test-steps {
+    margin-top: 1rem;
+}
+
+.test-steps h4 {
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+}
+
+.step-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.5rem;
+    border-radius: 4px;
+    margin-bottom: 0.25rem;
+    font-size: 0.8rem;
+}
+
+.step-item.step-success {
+    background: rgba(74, 222, 128, 0.1);
+}
+
+.step-item.step-error {
+    background: rgba(239, 68, 68, 0.1);
+}
+
+.step-item.step-pending {
+    background: var(--bg-panel);
+}
+
+.step-name {
+    flex: 1;
+    text-transform: capitalize;
+}
+
+.step-status {
+    font-weight: 500;
+    text-transform: uppercase;
+    font-size: 0.7rem;
+}
+
+.step-success .step-status {
+    color: var(--success);
+}
+
+.step-error .step-status {
+    color: var(--error);
+}
+
+.step-error-msg {
+    color: var(--error);
+    font-size: 0.75rem;
+}
+
+/* ==================== Toast Notifications ====================  */
+.toast {
+    position: fixed;
+    bottom: 2rem;
+    right: 2rem;
+    padding: 1rem 1.5rem;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    z-index: 1000;
+    animation: slideIn 0.3s ease;
+    max-width: 400px;
+}
+
+.toast.hidden {
+    display: none;
+}
+
+.toast.info {
+    background: var(--info);
+    color: var(--bg-primary);
+}
+
+.toast.success {
+    background: var(--success);
+    color: var(--bg-primary);
+}
+
+.toast.error {
+    background: var(--error);
+    color: white;
+}
+
+.toast.warning {
+    background: var(--warning);
+    color: var(--bg-primary);
+}
+
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+/* ==================== Footer ====================  */
+footer {
+    text-align: center;
+    padding: 1.5rem;
+    color: var(--text-secondary);
+    font-size: 0.75rem;
+    border-top: 1px solid var(--border);
+    margin-top: 2rem;
+}
+
+/* ==================== Scrollbar Styling ====================  */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--border-light);
+}