add debug page for each component

wake_me_up/main.py

@@ -31,6 +31,25 @@ class WakeMeUp(ReachyMiniApp):
     STATE_POLL_INTERVAL = 500  # ms - frontend polling interval
     AUDIO_POLL_INTERVAL = 100  # ms - audio level polling interval
 
+    # Expected sleep position (degrees) - from testbench
+    SLEEP_POSITION_DEGREES = {
+        "body_rotation": 5.0,
+        "stewart_1": -23.0,
+        "stewart_2": 58.5,
+        "stewart_3": -11.0,
+        "stewart_4": 9.5,
+        "stewart_5": -58.0,
+        "stewart_6": 23.0,
+        "right_antenna": -175.0,
+        "left_antenna": 175.0,
+    }
+
+    # Thresholds for position validation (degrees)
+    POSITION_ERROR_THRESHOLD = 15.0  # Error if diff > 15° (for stewart motors)
+    POSITION_ERROR_THRESHOLD_BASE = 20.0  # Error for body_rotation
+    POSITION_ERROR_THRESHOLD_ANTENNAS = 40.0  # Error for antennas
+    SWAP_DETECTION_THRESHOLD = 15.0  # Threshold for detecting motor swaps
+
     def __init__(self):
         super().__init__()
         self._state_lock = threading.Lock()
@@ -57,7 +76,17 @@ class WakeMeUp(ReachyMiniApp):
         self._touch_start_time = None
         self._touch_accumulated_time = 0.0  # Total time above threshold
         self._last_audio_check = None
-        self._auto_play_movement = False  # Flag to auto-play movement in step 2
+        self._auto_play_movement = False  # Flag to auto-play movement in step 4
+        self._auto_go_to_sleep = False  # Flag to auto-sleep when going back to step 3
+        self._auto_disable_motors = False  # Flag to disable motors on step 2
+        self._sleep_position_check = None  # Stores sleep position validation results
+
+        # Audio recording for debug page
+        self._recorded_audio = None  # Stores recorded audio data
+        self._is_recording = False
+
+        # Track if we're in debug mode for each step
+        self._in_debug_mode = False
 
         self._register_routes()
 
@@ -106,16 +135,18 @@ class WakeMeUp(ReachyMiniApp):
         # Main loop
         while not stop_event.is_set():
             # Check and execute auto-play actions (one per iteration)
-            check_auto_play('_auto_play_movement', 2, 0.5, self._play_test_movement, (reachy_mini,), "test movement") or \
-            check_auto_play('_auto_play_emotion', 3, 0.5, self._play_emotion, (reachy_mini, "success2"), "happy emotion") or \
-            check_auto_play('_auto_play_curious', 4, 1.0, self._play_emotion, (reachy_mini, "curious1"), "curious emotion") or \
-            check_auto_play('_auto_play_enthusiastic', 5, 0.5, self._play_emotion, (reachy_mini, "enthusiastic1"), "enthusiastic emotion")
-
-            # Capture camera frames only during step 4
+            check_auto_play('_auto_play_movement', 4, 0.5, self._play_test_movement, (reachy_mini,), "test movement") or \
+            check_auto_play('_auto_play_emotion', 5, 0.5, self._play_emotion, (reachy_mini, "success2"), "happy emotion") or \
+            check_auto_play('_auto_play_curious', 6, 1.0, self._play_emotion, (reachy_mini, "curious1"), "curious emotion") or \
+            check_auto_play('_auto_play_enthusiastic', 7, 0.5, self._play_emotion, (reachy_mini, "enthusiastic1"), "enthusiastic emotion") or \
+            check_auto_play('_auto_go_to_sleep', 3, 0.3, self._go_to_sleep_wrapper, (reachy_mini,), "goto sleep") or \
+            check_auto_play('_auto_disable_motors', 2, 0.3, self._disable_motors_wrapper, (reachy_mini,), "disable motors")
+
+            # Capture camera frames only during step 6
             with self._state_lock:
                 current = self._current_step
 
-            if current == 4:
+            if current == 6:
                 frame = reachy_mini.media.get_frame()
                 if frame is not None:
                     with self._state_lock:
@@ -144,8 +175,8 @@ class WakeMeUp(ReachyMiniApp):
             with self._state_lock:
                 self._audio_level = audio_level
 
-                # Touch detection logic (only during step 1)
-                if self._current_step == 1 and not self._touch_detected:
+                # Touch detection logic (only during step 3 and not in debug mode)
+                if self._current_step == 3 and not self._touch_detected and not self._in_debug_mode:
                     current_time = time.time()
 
                     if audio_level > self.TOUCH_THRESHOLD:
@@ -158,9 +189,9 @@ class WakeMeUp(ReachyMiniApp):
                             # Check if accumulated time reaches required duration
                             if self._touch_accumulated_time >= self.TOUCH_DURATION_REQUIRED:
                                 self._touch_detected = True
-                                print("Touch detected! Auto-advancing to step 2")
-                                # Auto-advance to step 2
-                                self._current_step = 2
+                                print("Touch detected! Auto-advancing to step 4")
+                                # Auto-advance to step 4
+                                self._current_step = 4
                                 self._auto_play_movement = True
 
                         if self._touch_start_time is None:
@@ -199,6 +230,59 @@ class WakeMeUp(ReachyMiniApp):
             except Exception as e:
                 print(f"Error stopping audio: {e}")
 
+    def _record_audio(self, duration=5.0):
+        """Record audio for debug testing"""
+        try:
+            import sounddevice as sd
+
+            with self._state_lock:
+                self._is_recording = True
+
+            print(f"Recording audio for {duration} seconds...")
+            samplerate = 44100
+            recorded = sd.rec(
+                int(duration * samplerate),
+                samplerate=samplerate,
+                channels=1,
+                dtype='float32'
+            )
+            sd.wait()  # Wait until recording is finished
+
+            with self._state_lock:
+                self._recorded_audio = recorded
+                self._is_recording = False
+
+            print("Recording complete")
+            return True
+
+        except Exception as e:
+            print(f"Failed to record audio: {e}")
+            with self._state_lock:
+                self._is_recording = False
+            return False
+
+    def _play_recorded_audio(self):
+        """Play back recorded audio"""
+        try:
+            import sounddevice as sd
+
+            with self._state_lock:
+                audio_data = self._recorded_audio
+
+            if audio_data is None:
+                print("No recorded audio to play")
+                return False
+
+            print("Playing recorded audio...")
+            sd.play(audio_data, samplerate=44100)
+            sd.wait()  # Wait until playback is finished
+            print("Playback complete")
+            return True
+
+        except Exception as e:
+            print(f"Failed to play recorded audio: {e}")
+            return False
+
     def _get_current_volume(self) -> float:
         """Read current system volume (same method as dashboard)"""
         try:
@@ -478,6 +562,211 @@ class WakeMeUp(ReachyMiniApp):
             with self._state_lock:
                 self._emotion_playing = False
 
+    def _go_to_sleep_wrapper(self, reachy_mini):
+        """Put robot to sleep (for going back from step 4 to step 3)"""
+        try:
+            print("Going to sleep (back navigation)...")
+            reachy_mini.goto_sleep()
+            with self._state_lock:
+                self._is_sleeping = True
+            print("Robot is now sleeping")
+        except Exception as e:
+            print(f"Failed to go to sleep: {e}")
+
+    def _disable_motors_wrapper(self, reachy_mini):
+        """Disable motors for manual positioning (step 2)"""
+        try:
+            print("Disabling motors for manual positioning...")
+            reachy_mini.disable_motors()
+            with self._state_lock:
+                self._is_sleeping = False
+            print("Motors disabled")
+        except Exception as e:
+            print(f"Failed to disable motors: {e}")
+
+    def _test_antenna_movement(self, reachy_mini, side):
+        """Move one antenna to test if it's correctly connected"""
+        try:
+            print(f"Testing {side} antenna...")
+            reachy_mini.enable_motors()
+
+            # First raise head to neutral (0 degrees pitch)
+            reachy_mini.goto_target(
+                head=create_head_pose(pitch=0.0, yaw=0.0, roll=0.0),
+                antennas=[0, 0],
+                duration=0.8
+            )
+            time.sleep(0.8)
+
+            # Move the specified antenna with a small shake (4 repetitions)
+            # Note: antenna indices are swapped - right is index 0, left is index 1
+            if side == "left":
+                # Left antenna (index 1) - fast shake 4 times
+                head=create_head_pose(pitch=0.0, yaw=0.0, roll=0.0),
+                for _ in range(4):
+                    reachy_mini.goto_target(antennas=np.radians([0, 10]), duration=0.2)
+                    reachy_mini.goto_target(antennas=np.radians([0, -10]), duration=0.2)
+                # Return to neutral
+                reachy_mini.goto_target(antennas=np.radians([0, 0]), duration=0.2)
+
+            elif side == "right":
+                # Right antenna (index 0) - fast shake 4 times
+                for _ in range(4):
+                    reachy_mini.goto_target(antennas=np.radians([10, 0]), duration=0.2)
+                    reachy_mini.goto_target(antennas=np.radians([-10, 0]), duration=0.2)
+                # Return to neutral
+                reachy_mini.goto_target(antennas=np.radians([0, 0]), duration=0.2)
+
+            print(f"{side} antenna test complete")
+
+        except Exception as e:
+            print(f"Failed to test {side} antenna: {e}")
+
+    def _detect_motor_swaps(self, motors_data):
+        """Detect if motors have been swapped during assembly
+
+        Args:
+            motors_data: dict of {motor_name: actual_position_deg}
+
+        Returns:
+            list of detected swaps: [{"motor_a": name, "motor_b": name, "confidence": str}, ...]
+        """
+        detected_swaps = []
+        checked_pairs = set()  # To avoid checking the same pair twice
+
+        motor_names = list(motors_data.keys())
+
+        for i, motor_a in enumerate(motor_names):
+            if motor_a not in self.SLEEP_POSITION_DEGREES:
+                continue
+
+            actual_a = motors_data[motor_a]
+            expected_a = self.SLEEP_POSITION_DEGREES[motor_a]
+
+            # Skip if motor A is already in correct position
+            if abs(actual_a - expected_a) < self.SWAP_DETECTION_THRESHOLD:
+                continue
+
+            for motor_b in motor_names[i+1:]:
+                if motor_b not in self.SLEEP_POSITION_DEGREES:
+                    continue
+
+                # Skip if already checked this pair
+                pair_key = tuple(sorted([motor_a, motor_b]))
+                if pair_key in checked_pairs:
+                    continue
+
+                actual_b = motors_data[motor_b]
+                expected_b = self.SLEEP_POSITION_DEGREES[motor_b]
+
+                # Skip if motor B is already in correct position
+                if abs(actual_b - expected_b) < self.SWAP_DETECTION_THRESHOLD:
+                    continue
+
+                # Check if positions are swapped:
+                # - Motor A's actual position is close to Motor B's expected position
+                # - Motor B's actual position is close to Motor A's expected position
+                diff_a_to_b = abs(actual_a - expected_b)
+                diff_b_to_a = abs(actual_b - expected_a)
+
+                if diff_a_to_b < self.SWAP_DETECTION_THRESHOLD and diff_b_to_a < self.SWAP_DETECTION_THRESHOLD:
+                    # Calculate confidence based on how close the match is
+                    avg_diff = (diff_a_to_b + diff_b_to_a) / 2
+                    if avg_diff < 5.0:
+                        confidence = "high"
+                    elif avg_diff < 10.0:
+                        confidence = "medium"
+                    else:
+                        confidence = "low"
+
+                    detected_swaps.append({
+                        "motor_a": motor_a,
+                        "motor_b": motor_b,
+                        "confidence": confidence,
+                        "diff_avg": round(avg_diff, 1)
+                    })
+
+                    checked_pairs.add(pair_key)
+
+        return detected_swaps
+
+    def _check_sleep_position(self, reachy_mini):
+        """Check if robot is in correct sleep position"""
+        try:
+            print("Checking sleep position...")
+            head_joints, antenna_joints = reachy_mini.get_current_joint_positions()
+
+            # Convert to degrees
+            motors_data = {
+                "body_rotation": np.rad2deg(head_joints[0]),
+                "stewart_1": np.rad2deg(head_joints[1]),
+                "stewart_2": np.rad2deg(head_joints[2]),
+                "stewart_3": np.rad2deg(head_joints[3]),
+                "stewart_4": np.rad2deg(head_joints[4]),
+                "stewart_5": np.rad2deg(head_joints[5]),
+                "stewart_6": np.rad2deg(head_joints[6]),
+                "right_antenna": np.rad2deg(antenna_joints[0]),
+                "left_antenna": np.rad2deg(antenna_joints[1]),
+            }
+
+            # Validate each motor
+            results = []
+            all_ok = True
+
+            for motor_name, actual_deg in motors_data.items():
+                if motor_name in self.SLEEP_POSITION_DEGREES:
+                    expected = self.SLEEP_POSITION_DEGREES[motor_name]
+                    diff = abs(actual_deg - expected)
+
+                    # Use different thresholds based on motor type
+                    if motor_name == "body_rotation":
+                        threshold = self.POSITION_ERROR_THRESHOLD_BASE
+                    elif motor_name in ["right_antenna", "left_antenna"]:
+                        threshold = self.POSITION_ERROR_THRESHOLD_ANTENNAS
+                    else:
+                        threshold = self.POSITION_ERROR_THRESHOLD
+
+                    if diff > threshold:
+                        status = "error"
+                        all_ok = False
+                    else:
+                        status = "ok"
+
+                    results.append({
+                        "name": motor_name,
+                        "actual": round(actual_deg, 1),
+                        "expected": expected,
+                        "diff": round(diff, 1),
+                        "status": status,
+                        "threshold": threshold
+                    })
+
+            # Detect potential motor swaps
+            detected_swaps = []
+            if not all_ok:
+                detected_swaps = self._detect_motor_swaps(motors_data)
+
+            validation_result = {
+                "motors": results,
+                "all_ok": all_ok,
+                "has_errors": not all_ok,
+                "detected_swaps": detected_swaps,
+                "has_swaps": len(detected_swaps) > 0,
+                "timestamp": time.time()
+            }
+
+            with self._state_lock:
+                self._sleep_position_check = validation_result
+
+            if detected_swaps:
+                print(f"Sleep position check: {len(detected_swaps)} potential swap(s) detected")
+            print(f"Sleep position check complete: all_ok={validation_result['all_ok']}")
+            return validation_result
+
+        except Exception as e:
+            print(f"Failed to check sleep position: {e}")
+            return None
+
     # ========== Camera Streaming ==========
     def _frame_generator(self):
         """MJPEG streaming generator"""
@@ -529,34 +818,84 @@ class WakeMeUp(ReachyMiniApp):
         @self.settings_app.post("/api/validate_step")
         def validate_step(payload: dict):
             """User validates current step with works/doesn't work"""
-            step = payload.get("step")  # 1, 2, 3, or 4
+            step = payload.get("step")  # 1-6
             works = payload.get("works")  # True or False
 
             with self._state_lock:
                 if step == 1:
+                    # Step 1: Intro page -> Step 2: Sleep position
                     self._current_step = 2
-                    # Reset touch detection for next time
+                    # Trigger motor disable on entering step 2
+                    self._auto_disable_motors = True
+                elif step == 2:
+                    # Step 2: Sleep position -> Step 3: Audio test
+                    self._current_step = 3
+                    # Reset touch detection
                     self._touch_detected = False
                     self._touch_start_time = None
                     self._touch_accumulated_time = 0.0
                     self._last_audio_check = None
-                elif step == 2:
-                    self._current_step = 3
-                    # Auto-play emotion when entering step 3
-                    self._auto_play_emotion = True
                 elif step == 3:
+                    # Step 3: Audio test -> Step 4: Motor test
                     self._current_step = 4
-                    # Auto-play curious emotion after 1s on step 4
-                    self._auto_play_curious = True
+                    # Reset touch detection for next time
+                    self._touch_detected = False
+                    self._touch_start_time = None
+                    self._touch_accumulated_time = 0.0
+                    self._last_audio_check = None
                 elif step == 4:
-                    self._current_step = 5  # Done
-                    # Auto-play enthusiastic emotion on step 5
+                    # Step 4: Motor test -> Step 5: Audio output test
+                    self._current_step = 5
+                    # Auto-play emotion when entering step 5
+                    self._auto_play_emotion = True
+                elif step == 5:
+                    # Step 5: Audio output test -> Step 6: Camera test
+                    self._current_step = 6
+                    # Auto-play curious emotion after 1s on step 6
+                    self._auto_play_curious = True
+                elif step == 6:
+                    # Step 6: Camera test -> Step 7: Success
+                    self._current_step = 7
+                    # Auto-play enthusiastic emotion on step 7
                     self._auto_play_enthusiastic = True
 
                 next_step = self._current_step
 
             return {"status": "ok", "next_step": next_step}
 
+        @self.settings_app.post("/api/go_to_step")
+        def go_to_step(payload: dict):
+            """Go directly to a specific step (for back navigation)"""
+            target_step = payload.get("step")
+
+            if target_step not in [1, 2, 3, 4, 5, 6]:
+                return {"status": "error", "message": "Invalid step"}
+
+            with self._state_lock:
+                # Only allow going back if robot is not busy
+                if self._movement_busy or self._emotion_playing:
+                    return {"status": "error", "message": "Robot is busy"}
+
+                current_step = self._current_step
+                self._current_step = target_step
+
+                # Reset touch detection state when going back to step 3
+                if target_step == 3:
+                    self._touch_detected = False
+                    self._touch_start_time = None
+                    self._touch_accumulated_time = 0.0
+                    self._last_audio_check = None
+
+                # If going from step 4 to step 3, trigger auto-sleep
+                if current_step == 4 and target_step == 3:
+                    self._auto_go_to_sleep = True
+
+                # If entering step 2, trigger motor disable
+                if target_step == 2:
+                    self._auto_disable_motors = True
+
+            return {"status": "ok", "current_step": target_step}
+
         @self.settings_app.post("/api/play_movement")
         def play_movement():
             """Trigger motor test movement"""
@@ -598,6 +937,20 @@ class WakeMeUp(ReachyMiniApp):
             ).start()
             return {"status": "playing"}
 
+        @self.settings_app.post("/api/play_test_sound")
+        def play_test_sound():
+            """Play a short test sound without movement (for volume testing)"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+
+            try:
+                # Play just the sound without any movement
+                self._reachy_mini.media.play_sound("wake_up.wav")
+                return {"status": "playing"}
+            except Exception as e:
+                print(f"Failed to play test sound: {e}")
+                return {"status": "error", "message": str(e)}
+
         @self.settings_app.post("/api/set_volume")
         def set_volume(payload: dict):
             volume = payload.get("volume", 0.5)
@@ -639,6 +992,140 @@ class WakeMeUp(ReachyMiniApp):
                 media_type="multipart/x-mixed-replace; boundary=frame"
             )
 
+        @self.settings_app.post("/api/check_sleep_position")
+        def check_sleep_position():
+            """Check if robot motors are in correct sleep position"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+
+            result = self._check_sleep_position(self._reachy_mini)
+            if result is None:
+                return {"status": "error", "message": "Failed to check position"}
+
+            return {"status": "ok", "validation": result}
+
+        @self.settings_app.get("/api/sleep_position_status")
+        def get_sleep_position_status():
+            """Get last sleep position check results"""
+            with self._state_lock:
+                if self._sleep_position_check is None:
+                    return {"status": "not_checked"}
+                return {"status": "ok", "validation": self._sleep_position_check}
+
+        @self.settings_app.get("/api/robot_variant")
+        def get_robot_variant():
+            """Get robot variant (wireless or lite)"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+
+            try:
+                daemon_status = self._reachy_mini.client.get_status()
+                is_wireless = daemon_status.get("wireless_version", False)
+                return {
+                    "status": "ok",
+                    "variant": "wireless" if is_wireless else "lite"
+                }
+            except Exception as e:
+                return {"status": "error", "message": str(e)}
+
+        @self.settings_app.post("/api/start_recording")
+        def start_recording(payload: dict):
+            """Start recording audio for debug testing"""
+            duration = payload.get("duration", 5.0)
+
+            with self._state_lock:
+                if self._is_recording:
+                    return {"status": "error", "message": "Already recording"}
+
+            threading.Thread(
+                target=self._record_audio,
+                args=(duration,),
+                daemon=True
+            ).start()
+
+            return {"status": "recording", "duration": duration}
+
+        @self.settings_app.post("/api/play_recording")
+        def play_recording():
+            """Play back recorded audio"""
+            with self._state_lock:
+                if self._recorded_audio is None:
+                    return {"status": "error", "message": "No recording available"}
+
+            threading.Thread(
+                target=self._play_recorded_audio,
+                daemon=True
+            ).start()
+
+            return {"status": "playing"}
+
+        @self.settings_app.get("/api/recording_status")
+        def get_recording_status():
+            """Get current recording status"""
+            with self._state_lock:
+                return {
+                    "is_recording": self._is_recording,
+                    "has_recording": self._recorded_audio is not None
+                }
+
+        @self.settings_app.post("/api/test_antenna")
+        def test_antenna(payload: dict):
+            """Test individual antenna movement for debug"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+
+            antenna_side = payload.get("side")  # "left" or "right"
+            if antenna_side not in ["left", "right"]:
+                return {"status": "error", "message": "Invalid antenna side"}
+
+            threading.Thread(
+                target=self._test_antenna_movement,
+                args=(self._reachy_mini, antenna_side),
+                daemon=True
+            ).start()
+
+            return {"status": "testing", "side": antenna_side}
+
+        @self.settings_app.get("/api/capture_photo")
+        def capture_photo():
+            """Capture a single photo from the camera for debug"""
+            if self._reachy_mini is None:
+                return {"status": "error", "message": "Robot not initialized"}
+
+            try:
+                # Capture a frame
+                frame = self._reachy_mini.media.get_frame()
+                if frame is None:
+                    return {"status": "error", "message": "No frame available"}
+
+                # Resize and encode as JPEG
+                resized = cv2.resize(frame, (640, 480))
+                ret, jpeg = cv2.imencode('.jpg', resized, [cv2.IMWRITE_JPEG_QUALITY, 90])
+
+                if not ret:
+                    return {"status": "error", "message": "Failed to encode image"}
+
+                # Convert to base64 for embedding in JSON
+                import base64
+                img_base64 = base64.b64encode(jpeg.tobytes()).decode('utf-8')
+
+                return {
+                    "status": "ok",
+                    "image": f"data:image/jpeg;base64,{img_base64}"
+                }
+
+            except Exception as e:
+                print(f"Failed to capture photo: {e}")
+                return {"status": "error", "message": str(e)}
+
+        @self.settings_app.post("/api/set_debug_mode")
+        def set_debug_mode(payload: dict):
+            """Set debug mode flag to disable auto-advance"""
+            debug_mode = payload.get("debug_mode", False)
+            with self._state_lock:
+                self._in_debug_mode = debug_mode
+            return {"status": "ok", "debug_mode": debug_mode}
+
     def _serialize_state(self):
         """Serialize current state for API"""
         with self._state_lock:

wake_me_up/static/index.html

@@ -8,7 +8,6 @@
 </head>
 <body>
     <header class="header">
-        <h1>First Steps with Reachy Mini</h1>
     </header>
 
     <main class="container">
@@ -24,116 +23,452 @@
             </div>
         </section>
 
-        <!-- Step 1: Audio Input Test -->
+        <!-- Step 1: Introduction -->
         <section id="step-1" class="step-screen">
             <div class="card">
                 <div class="title-with-icon">
-                    <img src="/static/assets/sleeping-reachy.svg" alt="Sleeping Reachy" class="sleeping-reachy-icon">
-                    <h2>Time to Wake Up!</h2>
+                    <img src="/static/assets/reachy-mini.png" alt="Reachy Mini" class="reachy-mini-icon">
+                    <h2>Welcome to Wake Me Up App</h2>
                 </div>
-                <video class="demo-video" autoplay loop muted playsinline>
-                    <source src="/static/assets/touch_demo.mp4" type="video/mp4">
-                    <p style="color: #999;">Demo video not available</p>
-                </video>
-
-                <p class="instruction">Wake up Reachy Mini</p>
+                <p class="instruction">This app will help you test all of Reachy Mini's components: microphone, motors, speaker, and camera.</p>
 
-                <div class="touch-progress-container">
-                    <div class="touch-progress-bar" id="touch-progress-bar"></div>
+                <div style="display: flex; align-items: center; gap: 20px; margin: 30px auto; max-width: 550px;">
+                    <img src="/static/assets/reachy-mini-stop.svg" alt="Warning" style="width: 110px; height: auto; flex-shrink: 0;">
+                    <p style="margin: 0; font-size: 15px; color: #0f172a; line-height: 1.6; text-align: left;">
+                        <strong>Important:</strong> During the tests, Reachy Mini will move. Please pay attention to the antenna movements.
+                    </p>
                 </div>
 
-                <div class="waveform-container" id="waveform"></div>
-
                 <div class="button-group">
-                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Sound doesn't work </a>
+                    <button class="btn-success" onclick="validateStep(1, true)">Let's start! ✓</button>
                 </div>
-
-                <div class="step-indicator" id="step-indicator">Step <span id="current-step">1</span> of 4</div>
             </div>
         </section>
 
-        <!-- Step 2: Motor Test -->
+        <!-- Step 2: Sleep Position Setup -->
         <section id="step-2" class="step-screen">
             <div class="card">
-                <div class="title-with-icon">
-                    <img src="/static/assets/reachy-mini.png" alt="Reachy Mini" class="reachy-mini-icon">
-                    <h2>Stretch Time!</h2>
+                <!-- Normal view -->
+                <div id="step-2-normal">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/sleeping-reachy.svg" alt="Sleeping Reachy" class="sleeping-reachy-icon">
+                        <h2>Make sure I'm sleeping well</h2>
+                    </div>
+                    <p class="instruction">Please position Reachy Mini in the sleeping position as shown below:</p>
+
+                    <div style="display: flex; gap: 0; justify-content: center; margin: 20px auto; max-width: 500px; flex-wrap: wrap; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+                        <div style="width: 250px; height: 400px; overflow: hidden;">
+                            <img src="/static/assets/reachy-mini-front.jpg" alt="Reachy Mini Front View" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
+                        </div>
+                        <div style="width: 250px; height: 400px; overflow: hidden;">
+                            <img src="/static/assets/reachy-mini-side.jpg" alt="Reachy Mini Side View" style="width: 100%; height: 100%; object-fit: cover; object-position: center;">
+                        </div>
+                    </div>
+
+                    <button class="btn-primary" onclick="checkSleepPosition()" id="btn-check-position">Check Position</button>
+
+                    <div id="position-results" style="display: none; margin: 20px auto; max-width: 500px;"></div>
+
+                    <!-- Reachy speaking bubble for normal view -->
+                    <div class="reachy-bubble-container">
+                        <div class="speech-bubble">
+                            This step helps verify that no motor has been inverted during assembly
+                        </div>
+                        <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                    </div>
                 </div>
-                <video class="demo-video" muted playsinline preload="auto">
-                    <source src="/static/assets/movement_demo.mp4" type="video/mp4">
-                    <p style="color: #999;">Demo video not available</p>
-                </video>
-                <p class="instruction">Watch the robot perform the movement</p>
 
-                <button class="btn-text" id="btn-play-movement" onclick="playMovement()">
-                    Replay Movement
-                </button>
+                <!-- Debug view -->
+                <div id="step-2-debug" style="display: none;">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-doctor.png" alt="Reachy Mini Doctor" style="width: 180px; height: auto;">
+                        <h2>Motors problem</h2>
+                    </div>
+                    <p class="instruction" style="font-size: 16px; color: #475569; margin-bottom: 25px;">
+                        It seems the motors are not in the correct position.<br>
+                        Please make sure the robot is in sleep position and check again.
+                    </p>
 
-                <div class="button-group" id="motor-validate" style="display: none;">
-                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Robot didn't move correctly </a>
-                    <button class="btn-success" onclick="validateStep(2, true)">Robot did the same </button>
+                    <div id="debug-motor-summary" style="max-width: 500px; margin: 20px auto;"></div>
+
+                    <div class="button-group" style="gap: 15px;">
+                        <button class="btn-success" onclick="recheckPosition()">Recheck Position</button>
+                        <button class="btn-secondary" onclick="toggleAdvancedDebug()" id="btn-advanced-debug">Advanced Motor Debug</button>
+                    </div>
+
+                    <div id="debug-motor-details" style="display: none; max-width: 600px; margin: 30px auto; padding: 20px; background: #f8fafc; border-radius: 12px; border: 1px solid #cbd5e1;"></div>
+
+                    <!-- Reachy speaking bubble for debug view -->
+                    <div class="reachy-bubble-container">
+                        <div class="speech-bubble">
+                            The "stewart" motors control the neck mechanism
+                        </div>
+                        <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                    </div>
                 </div>
 
-                <div class="step-indicator">Step 2 of 4</div>
+                <div class="step-indicator">Step 2 of 6</div>
+                <button class="btn-back" id="back-btn-2" onclick="goToPreviousStep()">← Previous step</button>
             </div>
         </section>
 
-        <!-- Step 3: Audio Output Test -->
+        <!-- Step 3: Audio Input Test -->
         <section id="step-3" class="step-screen">
             <div class="card">
-                <div class="title-with-icon">
-                    <img src="/static/assets/reachy-mini-sav.png" alt="Reachy Mini" class="reachy-mini-icon">
-                    <h2>Can You Hear Me?</h2>
-                </div>
-                <p class="instruction">Listen to the robot's happy sound</p>
+                <!-- Normal view -->
+                <div id="step-3-normal">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/sleeping-reachy.svg" alt="Sleeping Reachy" class="sleeping-reachy-icon">
+                        <h2>Time to Wake Up!</h2>
+                    </div>
+                    <video class="demo-video" autoplay loop muted playsinline>
+                        <source src="/static/assets/touch_demo.mp4" type="video/mp4">
+                        <p style="color: #999;">Demo video not available</p>
+                    </video>
 
-                <div class="volume-control">
-                    <label for="volume-slider">Volume</label>
-                    <input type="range" id="volume-slider" min="0" max="100" value="50">
-                    <span id="volume-value">50%</span>
+                    <p class="instruction">Wake up Reachy Mini</p>
+
+                    <div class="touch-progress-container">
+                        <div class="touch-progress-bar" id="touch-progress-bar"></div>
+                    </div>
+
+                    <div class="waveform-container" id="waveform"></div>
+
+                    <div class="button-group">
+                        <button class="btn-fail" onclick="showStep3Debug()">Sound doesn't work</button>
+                    </div>
                 </div>
 
-                <button class="btn-text" id="btn-play-sound" onclick="playHappy()">Play Sound</button>
+                <!-- Debug view -->
+                <div id="step-3-debug" style="display: none;">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-doctor.png" alt="Reachy Mini Doctor" style="width: 180px; height: auto;">
+                        <h2>Microphone problem</h2>
+                    </div>
 
-                <div class="button-group">
-                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">No sound </a>
-                    <button class="btn-success" onclick="validateStep(3, true)">I hear the sound </button>
+                    <!-- Waveform for testing -->
+                    <div style="margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Check if microphone detects sound:</p>
+                        <div class="waveform-container" id="waveform-debug"></div>
+                    </div>
+
+                    <!-- Troubleshooting tips -->
+                    <div style="background: #f8fafc; border-radius: 10px; padding: 20px; margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Troubleshooting tips:</p>
+                        <ul style="text-align: left; margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px;" id="step3-tips-list">
+                            <li id="lite-audio-tip" style="display: none;">For Reachy Mini Lite: Check the PC audio input settings and select "Reachy Mini Audio"</li>
+                            <li id="linux-audio-tip" style="display: none;">If running on Linux, you may need to configure audio permissions: <a href="https://huggingface.co/docs/reachy_mini/SDK/installation#-linux-users" target="_blank" style="color: #0f172a; text-decoration: underline;">see Linux setup guide</a></li>
+                            <li>Update and reboot the robot</li>
+                            <li>If the issue persists, check the <a href="https://huggingface.co/docs/reachy_mini/troubleshooting#audio-issues" target="_blank" style="color: #0f172a; text-decoration: underline;">FAQ</a></li>
+                            <li>Still having issues? Write a message in the <a href="https://discord.com/invite/2bAhWfXme9" target="_blank" style="color: #0f172a; text-decoration: underline;">support channel on Discord</a></li>
+                        </ul>
+                    </div>
+
+                    <!-- Back button -->
+                    <div style="text-align: center;">
+                        <button class="btn-primary" onclick="backToStep3Normal()">← Back to test</button>
+                    </div>
                 </div>
 
-                <div class="step-indicator">Step 3 of 4</div>
+                <div class="step-indicator" id="step-indicator">Step <span id="current-step">3</span> of 6</div>
+                <button class="btn-back" id="back-btn-3" onclick="goToPreviousStep()">← Previous step</button>
+
+                <!-- Reachy speaking bubble -->
+                <div class="reachy-bubble-container">
+                    <div class="speech-bubble">
+                        Let's see if my microphone is working correctly
+                    </div>
+                    <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                </div>
             </div>
         </section>
 
-        <!-- Step 4: Camera Test -->
+        <!-- Step 4: Motor Test -->
         <section id="step-4" class="step-screen">
             <div class="card">
-                <div class="title-with-icon">
-                    <img src="/static/assets/reachy-mini-explorer.png" alt="Reachy Mini" class="reachy-mini-icon explorer-icon">
-                    <h2>Let's Look Around!</h2>
-                </div>
-                <p class="instruction">Check if you can see the camera feed</p>
+                <!-- Normal view -->
+                <div id="step-4-normal">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini.png" alt="Reachy Mini" class="reachy-mini-icon">
+                        <h2>Stretch Time!</h2>
+                    </div>
+                    <video class="demo-video" muted playsinline preload="auto">
+                        <source src="/static/assets/movement_demo.mp4" type="video/mp4">
+                        <p style="color: #999;">Demo video not available</p>
+                    </video>
+                    <p class="instruction">Watch the robot perform the movement</p>
+
+                    <button class="btn-text" id="btn-play-movement" onclick="playMovement()">
+                        Replay Movement
+                    </button>
 
-                <div class="camera-container">
-                    <img id="camera-feed" src="/video_feed" alt="Camera feed">
+                    <div class="button-group" id="motor-validate" style="display: none;">
+                        <button class="btn-fail" onclick="showStep4Debug()">Robot didn't move correctly</button>
+                        <button class="btn-success" onclick="validateStep(4, true)">Robot did the same </button>
+                    </div>
                 </div>
 
-                <div class="button-group">
-                    <a href="https://huggingface.co/docs/reachy_mini/troubleshooting" target="_blank" class="btn-fail">Camera doesn't work </a>
-                    <button class="btn-success" onclick="validateStep(4, true)">Camera works </button>
+                <!-- Debug view -->
+                <div id="step-4-debug" style="display: none;">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-doctor.png" alt="Reachy Mini Doctor" style="width: 180px; height: auto;">
+                        <h2>Motors problem</h2>
+                    </div>
+
+                    <!-- Antenna test section -->
+                    <div style="margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 15px;">Test if the antennas are inverted:</p>
+
+                        <div style="display: flex; gap: 20px; justify-content: center; align-items: center; margin: 30px 0;">
+                            <!-- Right antenna button -->
+                            <div style="text-align: center;">
+                                <button class="btn-primary" onclick="testAntenna('right')" id="btn-test-right" style="min-width: 120px;">
+                                    Right Antenna
+                                </button>
+                                <p style="font-size: 12px; color: #64748b; margin-top: 8px;">Your left when facing the robot</p>
+                            </div>
+                            
+
+                            <!-- Visual diagram -->
+                            <div style="text-align: center;">
+                                <img src="/static/assets/reachy-mini.png" alt="Reachy Mini" style="width: 80px; height: auto;">
+                                <p style="font-size: 11px; color: #94a3b8; margin-top: 4px;">Front view</p>
+                            </div>
+                            <!-- Left antenna button -->
+                            <div style="text-align: center;">
+                                <button class="btn-primary" onclick="testAntenna('left')" id="btn-test-left" style="min-width: 120px;">
+                                    Left Antenna
+                                </button>
+                                <p style="font-size: 12px; color: #64748b; margin-top: 8px;">Your right when facing the robot</p>
+                            </div>
+
+                            
+                        </div>
+
+                        <div id="antenna-feedback" style="display: none; margin: 20px 0;">
+                            <p style="color: #0f172a; font-size: 14px; text-align: center;" id="antenna-feedback-text"></p>
+                        </div>
+                    </div>
+
+                    <!-- Troubleshooting tips -->
+                    <div style="background: #f8fafc; border-radius: 10px; padding: 20px; margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Troubleshooting tips:</p>
+                        <ul style="text-align: left; margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px;">
+                            <li>Test each antenna above to check if they are inverted</li>
+                            <li>Update and reboot the robot</li>
+                            <li>If the issue persists, check the <a href="https://huggingface.co/docs/reachy_mini/troubleshooting#motor-issues" target="_blank" style="color: #0f172a; text-decoration: underline;">FAQ</a></li>
+                            <li>Still having issues? Write a message in the <a href="https://discord.com/invite/2bAhWfXme9" target="_blank" style="color: #0f172a; text-decoration: underline;">support channel on Discord</a></li>
+                        </ul>
+                    </div>
+
+                    <!-- Back button -->
+                    <div style="text-align: center;">
+                        <button class="btn-primary" onclick="backToStep4Normal()">← Back to test</button>
+                    </div>
                 </div>
 
-                <div class="step-indicator">Step 4 of 4</div>
+                <div class="step-indicator">Step 4 of 6</div>
+                <button class="btn-back" id="back-btn-4" onclick="goToPreviousStep()">← Previous step</button>
+
+                <!-- Reachy speaking bubble -->
+                <div class="reachy-bubble-container">
+                    <div class="speech-bubble">
+                        This test checks if the motors work correctly and are in the right position
+                    </div>
+                    <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                </div>
             </div>
         </section>
 
-        <!-- Step 5: Summary -->
+        <!-- Step 5: Audio Output Test -->
         <section id="step-5" class="step-screen">
+            <div class="card">
+                <!-- Normal view -->
+                <div id="step-5-normal">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-sav.png" alt="Reachy Mini" class="reachy-mini-icon">
+                        <h2>Can You Hear Me?</h2>
+                    </div>
+                    <p class="instruction">Listen to the robot's happy sound</p>
+
+                    <div class="volume-control">
+                        <label for="volume-slider">Volume</label>
+                        <input type="range" id="volume-slider" min="0" max="100" value="50">
+                        <span id="volume-value">50%</span>
+                    </div>
+
+                    <button class="btn-text" id="btn-play-sound" onclick="playHappy()">Replay Sound</button>
+
+                    <div class="button-group">
+                        <button class="btn-fail" onclick="showStep5Debug()">No sound</button>
+                        <button class="btn-success" onclick="validateStep(5, true)">I hear the sound </button>
+                    </div>
+                </div>
+
+                <!-- Debug view -->
+                <div id="step-5-debug" style="display: none;">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-doctor.png" alt="Reachy Mini Doctor" style="width: 180px; height: auto;">
+                        <h2>Speaker problem</h2>
+                    </div>
+
+                    <!-- Two column layout -->
+                    <div style="display: flex; gap: 30px; margin: 20px 0; align-items: flex-start;">
+                        <!-- Left: Volume control -->
+                        <div style="flex: 1;">
+                            <p style="font-weight: 600; margin-bottom: 10px;">Adjust volume:</p>
+                            <div class="volume-control">
+                                <label for="volume-slider-debug">Volume</label>
+                                <input type="range" id="volume-slider-debug" min="0" max="100" value="50">
+                                <span id="volume-value-debug">50%</span>
+                            </div>
+                        </div>
+
+                        <!-- Right: Record and replay -->
+                        <div style="flex: 1;">
+                            <p style="font-weight: 600; margin-bottom: 10px;">Test with recording:</p>
+                            <div style="display: flex; flex-direction: column; gap: 10px;">
+                                <button class="btn-primary" onclick="startRecordingSpeaker()" id="btn-record-speaker">Record (5s)</button>
+                                <button class="btn-secondary" onclick="playRecordingSpeaker()" id="btn-play-speaker" disabled>Play Recording</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Troubleshooting tips -->
+                    <div style="background: #f8fafc; border-radius: 10px; padding: 20px; margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Troubleshooting tips:</p>
+                        <ul style="text-align: left; margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px;">
+                            <li>Check if the volume is high enough (under 50% the volume is barely audible, try with higher volume)</li>
+                            <li>Test by recording and replaying a sound using the buttons above</li>
+                            <li id="lite-speaker-tip" style="display: none;">For Reachy Mini Lite: Check the PC audio output settings and select "Reachy Mini Audio"</li>
+                            <li>Update and reboot the robot</li>
+                            <li>If the issue persists, check the <a href="https://huggingface.co/docs/reachy_mini/troubleshooting#audio-issues" target="_blank" style="color: #0f172a; text-decoration: underline;">FAQ</a></li>
+                            <li>Still having issues? Write a message in the <a href="https://discord.com/invite/2bAhWfXme9" target="_blank" style="color: #0f172a; text-decoration: underline;">support channel on Discord</a></li>
+                        </ul>
+                    </div>
+
+                    <!-- Back button -->
+                    <div style="text-align: center;">
+                        <button class="btn-primary" onclick="backToStep5Normal()">← Back to test</button>
+                    </div>
+                </div>
+
+                <div class="step-indicator">Step 5 of 6</div>
+                <button class="btn-back" id="back-btn-5" onclick="goToPreviousStep()">← Previous step</button>
+
+                <!-- Reachy speaking bubble -->
+                <div class="reachy-bubble-container">
+                    <div class="speech-bubble">
+                        This test verifies the speaker output and volume control
+                    </div>
+                    <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                </div>
+            </div>
+        </section>
+
+        <!-- Step 6: Camera Test -->
+        <section id="step-6" class="step-screen">
+            <div class="card">
+                <!-- Normal view -->
+                <div id="step-6-normal">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-explorer.png" alt="Reachy Mini" class="reachy-mini-icon explorer-icon">
+                        <h2>Let's Look Around!</h2>
+                    </div>
+                    <p class="instruction">Check if you can see the camera feed</p>
+
+                    <div class="camera-container">
+                        <img id="camera-feed" src="/video_feed" alt="Camera feed">
+                    </div>
+
+                    <div class="button-group">
+                        <button class="btn-fail" onclick="showStep6Debug()">Camera doesn't work</button>
+                        <button class="btn-success" onclick="validateStep(6, true)">Camera works </button>
+                    </div>
+                </div>
+
+                <!-- Debug view -->
+                <div id="step-6-debug" style="display: none;">
+                    <div class="title-with-icon">
+                        <img src="/static/assets/reachy-mini-doctor.png" alt="Reachy Mini Doctor" style="width: 180px; height: auto;">
+                        <h2>Camera problem</h2>
+                    </div>
+
+                    <!-- Camera snapshot test -->
+                    <div style="margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Test camera capture:</p>
+                        <button class="btn-primary" onclick="capturePhoto()" id="btn-capture">📷 Capture Photo</button>
+
+                        <div id="captured-photo-container" style="display: none; margin-top: 20px;">
+                            <p style="font-weight: 600; margin-bottom: 10px;">Captured image:</p>
+                            <div class="camera-container">
+                                <img id="captured-photo" alt="Captured photo" style="max-width: 100%; border-radius: 8px;">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Troubleshooting tips -->
+                    <div style="background: #f8fafc; border-radius: 10px; padding: 20px; margin: 20px 0;">
+                        <p style="font-weight: 600; margin-bottom: 10px;">Troubleshooting tips:</p>
+                        <ul style="text-align: left; margin: 0; padding-left: 20px; line-height: 1.8; font-size: 14px;">
+                            <li>Try capturing a photo using the button above</li>
+                            <li>Update and reboot the robot</li>
+                            <li>If the issue persists, check the <a href="https://huggingface.co/docs/reachy_mini/troubleshooting#camera-issues" target="_blank" style="color: #0f172a; text-decoration: underline;">FAQ</a></li>
+                            <li>Still having issues? Write a message in the <a href="https://discord.com/invite/2bAhWfXme9" target="_blank" style="color: #0f172a; text-decoration: underline;">support channel on Discord</a></li>
+                        </ul>
+                    </div>
+
+                    <!-- Back button -->
+                    <div style="text-align: center;">
+                        <button class="btn-primary" onclick="backToStep6Normal()">← Back to test</button>
+                    </div>
+                </div>
+
+                <div class="step-indicator">Step 6 of 6</div>
+                <button class="btn-back" id="back-btn-6" onclick="goToPreviousStep()">← Previous step</button>
+
+                <!-- Reachy speaking bubble -->
+                <div class="reachy-bubble-container">
+                    <div class="speech-bubble">
+                        This test verifies that the camera is working
+                    </div>
+                    <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                </div>
+            </div>
+        </section>
+
+        <!-- Step 7: Summary -->
+        <section id="step-7" class="step-screen">
             <div class="card">
                 <div class="title-with-icon">
                     <img src="/static/assets/reachy-mini-party.png" alt="Reachy Mini" class="reachy-mini-icon">
                     <h2>We're Ready to Play!</h2>
                 </div>
                 <p class="instruction" style="font-size: 18px; margin: 30px 0;">Everything is working correctly</p>
+
+                <!-- Next steps -->
+                <div style="margin: 20px 0 40px 0;">
+                    <p class="instruction" style="font-size: 18px; margin-bottom: 20px;">You can now explore the apps or create your own:</p>
+
+                    <div style="display: flex; gap: 15px; justify-content: center; flex-wrap: wrap;">
+                        <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini" target="_blank" class="btn-primary" style="display: inline-block; text-decoration: none;">
+                            Explore Apps
+                        </a>
+                        <a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" class="btn-primary" style="display: inline-block; text-decoration: none;">
+                            Create Your Own App
+                        </a>
+                    </div>
+                </div>
+
+                <button class="btn-back" id="back-btn-7" onclick="goToPreviousStep()">← Previous step</button>
+
+                <!-- Reachy speaking bubble -->
+                <div class="reachy-bubble-container">
+                    <div class="speech-bubble">
+                        Diagnostic complete! All components are functioning correctly
+                    </div>
+                    <img src="/static/assets/reachy-mini-builder.png" alt="Reachy Mini Builder" class="bubble-reachy-icon">
+                </div>
             </div>
         </section>
     </main>

wake_me_up/static/main.js

@@ -2,6 +2,7 @@ let waveformBars = [];
 let audioPollingInterval = null;
 let wasMovementPlaying = false;
 let lastStep = null;
+let currentStep = 1; // Track current step globally
 
 // Initialize
 document.addEventListener('DOMContentLoaded', () => {
@@ -47,6 +48,7 @@ async function fetchAudioLevel() {
         const resp = await fetch('/api/audio_level', { cache: 'no-store' });
         const data = await resp.json();
         updateWaveform(data.audio_level);
+        updateDebugWaveform(data.audio_level); // Also update debug waveform
         updateTouchDetection(data.touch_progress, data.touch_detected);
     } catch (err) {
         console.error('Audio fetch failed:', err);
@@ -90,27 +92,35 @@ function setButtonsDisabled(selector, disabled) {
 
 // UI Updates
 function updateUI(state) {
+    // Update global current step variable
+    currentStep = state.current_step;
+
     // Update current step number in step 1 indicator
     const currentStepSpan = document.getElementById('current-step');
     if (currentStepSpan) {
         currentStepSpan.textContent = state.current_step;
     }
 
+    // Reset step 2 view when navigating to it
+    if (state.current_step === 2 && lastStep !== 2) {
+        resetStep2View();
+    }
+
     document.querySelectorAll('.step-screen').forEach(s => s.classList.remove('active'));
     document.getElementById('step-' + state.current_step).classList.add('active');
 
     // Start/stop fast audio polling based on step
-    if (state.current_step === 1) {
+    if (state.current_step === 3) {
         startAudioPolling();
     } else {
         stopAudioPolling();
     }
 
-    if (state.current_step === 2) {
+    if (state.current_step === 4) {
         const btn = document.getElementById('btn-play-movement');
         const validateDiv = document.getElementById('motor-validate');
         const validateButtons = document.querySelectorAll('#motor-validate button');
-        const video = document.querySelector('#step-2 .demo-video');
+        const video = document.querySelector('#step-4 .demo-video');
 
         // Detect when movement starts playing (transition from false to true)
         if (state.movement_playing && !wasMovementPlaying) {
@@ -154,7 +164,7 @@ function updateUI(state) {
         wasMovementPlaying = state.movement_playing;
     }
 
-    if (state.current_step === 3) {
+    if (state.current_step === 5) {
         // Update button text based on whether emotion has been played
         const btn = document.getElementById('btn-play-sound');
         if (btn && !state.is_first_emotion) {
@@ -171,10 +181,10 @@ function updateUI(state) {
         }
 
         // Disable validation buttons while emotion is playing
-        setButtonsDisabled('#step-3 .button-group button, #step-3 .button-group a', state.emotion_playing);
+        setButtonsDisabled('#step-5 .button-group button, #step-5 .button-group a', state.emotion_playing);
     }
 
-    if (state.current_step === 4 && lastStep !== 4) {
+    if (state.current_step === 6 && lastStep !== 6) {
         // Reload camera feed only once when entering step 4 to prevent frozen image
         const cameraFeed = document.getElementById('camera-feed');
         if (cameraFeed) {
@@ -197,9 +207,12 @@ function updateUI(state) {
         }
     }
 
-    if (state.current_step === 4) {
+    // Update back button state
+    updateBackButtonState(state);
+
+    if (state.current_step === 6) {
         // Disable validation buttons while curious emotion is playing
-        setButtonsDisabled('#step-4 .button-group button, #step-4 .button-group a', state.emotion_playing);
+        setButtonsDisabled('#step-6 .button-group button, #step-6 .button-group a', state.emotion_playing);
     }
 
     lastStep = state.current_step;
@@ -305,24 +318,759 @@ function updateWaveform(audioLevel) {
     });
 }
 
+// Update debug waveform visualization (same logic but for debug container)
+function updateDebugWaveform(audioLevel) {
+    const container = document.getElementById('waveform-debug');
+    if (!container) return;
+
+    const bars = container.querySelectorAll('.waveform-bar');
+    if (bars.length === 0) return;
+
+    const maxHeight = 120;
+    const minHeight = 4;
+    const baseLevel = Math.min(audioLevel / 100, 1);
+
+    bars.forEach((bar, index) => {
+        const position = index / bars.length;
+        const centerDistance = Math.abs(position - 0.5) * 2;
+        const envelope = 1 - Math.pow(centerDistance, 2);
+
+        const randomness = Math.random() * 0.4 + 0.8;
+        const height = minHeight + (maxHeight - minHeight) * baseLevel * envelope * randomness;
+
+        bar.style.height = height + 'px';
+    });
+}
+
 function setupVolumeSlider() {
+    let volumeTimeout = null;
+
     const slider = document.getElementById('volume-slider');
-    if (!slider) return;
-    
-    slider.addEventListener('input', async (e) => {
-        const value = parseInt(e.target.value);
-        document.getElementById('volume-value').textContent = value + '%';
-        
-        try {
-            await fetch('/api/set_volume', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ volume: value / 100 })
-            });
-        } catch (err) {
-            console.error('Set volume failed:', err);
+    if (slider) {
+        slider.addEventListener('input', async (e) => {
+            const value = parseInt(e.target.value);
+            const valueSpan = document.getElementById('volume-value');
+            if (valueSpan) {
+                valueSpan.textContent = value + '%';
+            }
+
+            try {
+                await fetch('/api/set_volume', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ volume: value / 100 })
+                });
+
+                // Play a short test sound when slider stops moving (debounced)
+                clearTimeout(volumeTimeout);
+                volumeTimeout = setTimeout(() => {
+                    fetch('/api/play_test_sound', { method: 'POST' }).catch(err =>
+                        console.error('Volume test sound failed:', err)
+                    );
+                }, 500); // Wait 500ms after user stops moving slider
+            } catch (err) {
+                console.error('Set volume failed:', err);
+            }
+        });
+    }
+
+    // Setup debug volume slider if it exists
+    const debugSlider = document.getElementById('volume-slider-debug');
+    if (debugSlider) {
+        debugSlider.addEventListener('input', async (e) => {
+            const value = parseInt(e.target.value);
+            const valueSpan = document.getElementById('volume-value-debug');
+            if (valueSpan) {
+                valueSpan.textContent = value + '%';
+            }
+
+            try {
+                await fetch('/api/set_volume', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ volume: value / 100 })
+                });
+
+                // Play a short test sound when slider stops moving (debounced)
+                clearTimeout(volumeTimeout);
+                volumeTimeout = setTimeout(() => {
+                    fetch('/api/play_test_sound', { method: 'POST' }).catch(err =>
+                        console.error('Volume test sound failed:', err)
+                    );
+                }, 500); // Wait 500ms after user stops moving slider
+            } catch (err) {
+                console.error('Set volume failed:', err);
+            }
+        });
+    }
+}
+
+// Back button functionality
+function updateBackButtonState(state) {
+    // Check if robot is busy (moving or playing emotion)
+    const isRobotBusy = state.movement_busy || state.emotion_playing;
+
+    // Update each back button based on current step
+    for (let step = 1; step <= 7; step++) {
+        const backBtn = document.getElementById(`back-btn-${step}`);
+        if (!backBtn) continue;
+
+        // Show button only on the current step (and not on step 0 or step 1)
+        if (state.current_step === step && step > 1) {
+            backBtn.style.display = 'block';
+            // Disable if robot is busy
+            backBtn.disabled = isRobotBusy;
+        } else {
+            backBtn.style.display = 'none';
         }
-    });
+    }
+}
+
+async function checkSleepPosition() {
+    try {
+        const btn = document.getElementById('btn-check-position');
+        btn.disabled = true;
+        btn.textContent = 'Checking...';
+
+        const response = await fetch('/api/check_sleep_position', {
+            method: 'POST'
+        });
+
+        const result = await response.json();
+
+        if (result.status === "ok") {
+            if (result.validation.all_ok) {
+                // All OK - show brief success message and advance to next step
+                displayPositionResults(result.validation);
+                setTimeout(() => {
+                    validateStep(2, true);
+                }, 1000);
+            } else {
+                // Has errors - switch to debug view
+                showDebugView(result.validation);
+            }
+        } else {
+            alert('Failed to check position: ' + (result.message || 'Unknown error'));
+            btn.disabled = false;
+            btn.textContent = 'Check Position';
+        }
+    } catch (err) {
+        console.error('Check position failed:', err);
+        alert('Failed to check position');
+        const btn = document.getElementById('btn-check-position');
+        btn.disabled = false;
+        btn.textContent = 'Check Position';
+    }
+}
+
+function displayPositionResults(validation) {
+    const container = document.getElementById('position-results');
+
+    // Only show success message if all OK (motors list not shown)
+    let html = '<div style="text-align: center;">';
+    html += '<p style="color: #0f172a; font-weight: 600; font-size: 18px; margin: 20px 0;">✓ All motors in correct position!</p>';
+    html += '<p style="color: #64748b; font-size: 14px;">Advancing to next step...</p>';
+    html += '</div>';
+
+    container.innerHTML = html;
+    container.style.display = 'block';
+}
+
+let currentValidation = null;
+
+function showDebugView(validation) {
+    // Store validation for advanced debug
+    currentValidation = validation;
+
+    // Hide normal view
+    document.getElementById('step-2-normal').style.display = 'none';
+
+    // Show debug view
+    const debugView = document.getElementById('step-2-debug');
+    debugView.style.display = 'block';
+
+    // Create summary
+    const motorSummary = document.getElementById('debug-motor-summary');
+    let html = '<div style="text-align: center;">';
+
+    // Show detected swaps prominently if any
+    if (validation.has_swaps && validation.detected_swaps.length > 0) {
+        html += '<div style="background: #f8fafc; border-radius: 10px; padding: 20px; margin-bottom: 20px;">';
+        html += '<p style="font-weight: 600; font-size: 14px; color: #0f172a; margin-bottom: 15px;">Possible motor inversions detected:</p>';
+
+        validation.detected_swaps.forEach(swap => {
+            const nameA = swap.motor_a.replace(/_/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+            const nameB = swap.motor_b.replace(/_/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+
+            html += `<div style="padding: 12px; background: white; border-radius: 8px; margin: 10px 0; border: 1px solid #e2e8f0; font-size: 14px; color: #475569;">`;
+            html += `${nameA} <span style="font-weight: 600; color: #0f172a;">↔</span> ${nameB}`;
+            html += `</div>`;
+        });
+
+        html += '</div>';
+    } else {
+        // No swaps detected, show motors with errors
+        const errorMotors = validation.motors.filter(m => m.status === 'error');
+        html += '<p style="font-weight: 600; margin-bottom: 15px; color: #0f172a; font-size: 14px;">Motors that need adjustment:</p>';
+        html += '<div style="background: #f8fafc; border-radius: 10px; padding: 15px;">';
+
+        errorMotors.forEach(motor => {
+            const displayName = motor.name.replace(/_/g, ' ').split(' ').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+            html += `<div style="padding: 10px; margin: 8px 0; background: white; border-radius: 6px; color: #475569; font-size: 14px; border: 1px solid #e2e8f0;">`;
+            html += `${displayName}`;
+            html += `</div>`;
+        });
+
+        html += '</div>';
+    }
+
+    html += '</div>';
+    motorSummary.innerHTML = html;
+
+    // Reset advanced debug view
+    document.getElementById('debug-motor-details').style.display = 'none';
+    document.getElementById('btn-advanced-debug').textContent = 'Advanced Motor Debug';
+}
+
+function recheckPosition() {
+    // Reset to normal view and trigger check again
+    backToPositionSetup();
+    setTimeout(() => {
+        checkSleepPosition();
+    }, 300);
+}
+
+function toggleAdvancedDebug() {
+    const detailsDiv = document.getElementById('debug-motor-details');
+    const btn = document.getElementById('btn-advanced-debug');
+
+    if (detailsDiv.style.display === 'none') {
+        // Show advanced debug
+        let html = '<h3 style="margin-top: 0; color: #0f172a; font-size: 16px;">Detailed Motor Positions</h3>';
+        html += '<div style="font-size: 13px;">';
+
+        currentValidation.motors.forEach(motor => {
+            const statusColor = motor.status === 'ok' ? '#065f46' : '#991b1b';
+            const statusIcon = motor.status === 'ok' ? '✓' : '✗';
+            const bgColor = motor.status === 'ok' ? '#d1fae5' : '#fee2e2';
+
+            html += `<div style="padding: 12px; margin: 8px 0; border-radius: 8px; background: ${bgColor};">`;
+            html += `<div style="font-weight: 600; color: ${statusColor}; margin-bottom: 8px;">`;
+            html += `${statusIcon} ${motor.name.replace(/_/g, ' ').toUpperCase()}`;
+            html += `</div>`;
+            html += `<div style="color: #64748b; font-size: 12px; line-height: 1.6;">`;
+            html += `Expected: ${motor.expected}° | `;
+            html += `Current: ${motor.actual}° | `;
+            html += `Diff: ${motor.diff}° (max: ${motor.threshold}°)`;
+            html += `</div>`;
+            html += `</div>`;
+        });
+
+        html += '</div>';
+        detailsDiv.innerHTML = html;
+        detailsDiv.style.display = 'block';
+        btn.textContent = 'Hide Advanced Debug';
+    } else {
+        // Hide advanced debug
+        detailsDiv.style.display = 'none';
+        btn.textContent = 'Advanced Motor Debug';
+    }
+}
+
+// Step 3 Debug functions
+let recordedAudio = null;
+
+async function showStep3Debug() {
+    // Hide normal view
+    document.getElementById('step-3-normal').style.display = 'none';
+
+    // Show debug view
+    document.getElementById('step-3-debug').style.display = 'block';
+
+    // Hide bubble
+    const bubble = document.querySelector('#step-3 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'hidden';
+
+    // Set debug mode flag to disable auto-advance
+    try {
+        await fetch('/api/set_debug_mode', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ debug_mode: true })
+        });
+    } catch (err) {
+        console.error('Failed to set debug mode:', err);
+    }
+
+    // Check if Lite and show Lite-specific tips
+    try {
+        const response = await fetch('/api/robot_variant');
+        const result = await response.json();
+        if (result.status === 'ok' && result.variant === 'lite') {
+            const liteAudioTip = document.getElementById('lite-audio-tip');
+            if (liteAudioTip) liteAudioTip.style.display = 'list-item';
+        }
+    } catch (err) {
+        console.error('Failed to get robot variant:', err);
+    }
+
+    // Check if Linux and show Linux-specific tip
+    const isLinux = navigator.userAgent.toLowerCase().includes('linux');
+    if (isLinux) {
+        const linuxTip = document.getElementById('linux-audio-tip');
+        if (linuxTip) linuxTip.style.display = 'list-item';
+    }
+
+    // Initialize debug waveform
+    initDebugWaveform();
+    startAudioPolling();
+}
+
+async function backToStep3Normal() {
+    document.getElementById('step-3-normal').style.display = 'block';
+    document.getElementById('step-3-debug').style.display = 'none';
+    recordedAudio = null;
+
+    // Show bubble again
+    const bubble = document.querySelector('#step-3 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'visible';
+
+    // Disable debug mode flag to re-enable auto-advance
+    try {
+        await fetch('/api/set_debug_mode', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ debug_mode: false })
+        });
+    } catch (err) {
+        console.error('Failed to clear debug mode:', err);
+    }
+
+    // Hide conditional tips
+    const liteAudioTip = document.getElementById('lite-audio-tip');
+    const linuxTip = document.getElementById('linux-audio-tip');
+    if (liteAudioTip) liteAudioTip.style.display = 'none';
+    if (linuxTip) linuxTip.style.display = 'none';
+}
+
+function initDebugWaveform() {
+    const container = document.getElementById('waveform-debug');
+    if (!container || container.children.length > 0) return;
+
+    const barCount = 50;
+    for (let i = 0; i < barCount; i++) {
+        const bar = document.createElement('div');
+        bar.className = 'waveform-bar';
+        bar.style.height = '4px';
+        container.appendChild(bar);
+    }
+}
+
+async function testSpeaker() {
+    try {
+        const btn = event.target;
+        btn.disabled = true;
+        btn.textContent = 'Playing...';
+
+        await fetch('/api/play_happy', { method: 'POST' });
+
+        setTimeout(() => {
+            btn.disabled = false;
+            btn.textContent = 'Test Speaker';
+        }, 3000);
+    } catch (err) {
+        console.error('Test speaker failed:', err);
+        alert('Failed to test speaker');
+    }
+}
+
+async function startRecording() {
+    try {
+        const recordBtn = document.getElementById('btn-record');
+        const playBtn = document.getElementById('btn-play');
+
+        // Disable buttons during recording
+        recordBtn.disabled = true;
+        playBtn.disabled = true;
+        recordBtn.textContent = 'Recording...';
+
+        // Start recording (5 seconds)
+        const response = await fetch('/api/start_recording', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ duration: 5.0 })
+        });
+
+        const result = await response.json();
+        if (result.status === 'recording') {
+            // Poll for recording completion
+            let countdown = 5;
+            const countdownInterval = setInterval(() => {
+                countdown--;
+                recordBtn.textContent = `Recording (${countdown}s)`;
+                if (countdown <= 0) {
+                    clearInterval(countdownInterval);
+                }
+            }, 1000);
+
+            // Wait for recording to complete (5s + buffer)
+            setTimeout(async () => {
+                // Check if recording is complete
+                const statusResp = await fetch('/api/recording_status');
+                const statusResult = await statusResp.json();
+
+                recordBtn.disabled = false;
+                recordBtn.textContent = 'Record (5s)';
+
+                if (statusResult.has_recording) {
+                    playBtn.disabled = false;
+                    recordedAudio = true; // Mark that we have a recording
+                }
+            }, 5500);
+        }
+    } catch (err) {
+        console.error('Recording failed:', err);
+        alert('Failed to start recording');
+        const recordBtn = document.getElementById('btn-record');
+        recordBtn.disabled = false;
+        recordBtn.textContent = 'Record (5s)';
+    }
+}
+
+async function playRecording() {
+    try {
+        const playBtn = document.getElementById('btn-play');
+        playBtn.disabled = true;
+        playBtn.textContent = 'Playing...';
+
+        await fetch('/api/play_recording', { method: 'POST' });
+
+        // Re-enable after playback (estimate 5s)
+        setTimeout(() => {
+            playBtn.disabled = false;
+            playBtn.textContent = 'Play Recording';
+        }, 5500);
+    } catch (err) {
+        console.error('Playback failed:', err);
+        alert('Failed to play recording');
+        const playBtn = document.getElementById('btn-play');
+        playBtn.disabled = false;
+        playBtn.textContent = 'Play Recording';
+    }
+}
+
+function resetStep2View() {
+    // Show normal view
+    const normalView = document.getElementById('step-2-normal');
+    if (normalView) normalView.style.display = 'block';
+
+    // Hide debug view
+    const debugView = document.getElementById('step-2-debug');
+    if (debugView) debugView.style.display = 'none';
+
+    // Reset button
+    const btn = document.getElementById('btn-check-position');
+    if (btn) {
+        btn.disabled = false;
+        btn.textContent = 'Check Position';
+    }
+
+    // Hide results
+    const results = document.getElementById('position-results');
+    if (results) results.style.display = 'none';
+
+    // Hide advanced debug
+    const details = document.getElementById('debug-motor-details');
+    if (details) details.style.display = 'none';
+}
+
+function backToPositionSetup() {
+    resetStep2View();
+}
+
+// Step 4 Debug functions
+async function showStep4Debug() {
+    // Hide normal view
+    document.getElementById('step-4-normal').style.display = 'none';
+
+    // Show debug view
+    document.getElementById('step-4-debug').style.display = 'block';
+
+    // Hide bubble
+    const bubble = document.querySelector('#step-4 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'hidden';
+}
+
+function backToStep4Normal() {
+    document.getElementById('step-4-normal').style.display = 'block';
+    document.getElementById('step-4-debug').style.display = 'none';
+
+    // Show bubble again
+    const bubble = document.querySelector('#step-4 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'visible';
+
+    // Hide feedback
+    const feedback = document.getElementById('antenna-feedback');
+    if (feedback) feedback.style.display = 'none';
+}
+
+async function testAntenna(side) {
+    try {
+        const leftBtn = document.getElementById('btn-test-left');
+        const rightBtn = document.getElementById('btn-test-right');
+        const feedback = document.getElementById('antenna-feedback');
+        const feedbackText = document.getElementById('antenna-feedback-text');
+
+        // Disable both buttons during test
+        leftBtn.disabled = true;
+        rightBtn.disabled = true;
+
+        // Update button text
+        if (side === 'left') {
+            leftBtn.textContent = 'Testing...';
+        } else {
+            rightBtn.textContent = 'Testing...';
+        }
+
+        // Show feedback
+        feedback.style.display = 'block';
+        const sideName = side === 'left' ? 'LEFT' : 'RIGHT';
+        feedbackText.textContent = `The ${sideName} antenna should shake now...`;
+
+        // Call API to test antenna
+        await fetch('/api/test_antenna', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ side: side })
+        });
+
+        // Wait for movement to complete (estimated 2.8 seconds)
+        setTimeout(() => {
+            leftBtn.disabled = false;
+            rightBtn.disabled = false;
+            leftBtn.textContent = 'Left Antenna';
+            rightBtn.textContent = 'Right Antenna';
+
+            feedbackText.textContent = `If the wrong antenna moved, they may have been swapped during assembly.`;
+        }, 2800);
+
+    } catch (err) {
+        console.error('Antenna test failed:', err);
+        alert('Failed to test antenna');
+
+        // Re-enable buttons
+        document.getElementById('btn-test-left').disabled = false;
+        document.getElementById('btn-test-right').disabled = false;
+        document.getElementById('btn-test-left').textContent = 'Left Antenna';
+        document.getElementById('btn-test-right').textContent = 'Right Antenna';
+    }
+}
+
+// Step 5 Debug functions
+async function showStep5Debug() {
+    // Hide normal view
+    document.getElementById('step-5-normal').style.display = 'none';
+
+    // Show debug view
+    document.getElementById('step-5-debug').style.display = 'block';
+
+    // Hide bubble
+    const bubble = document.querySelector('#step-5 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'hidden';
+
+    // Check if Lite and show tip
+    try {
+        const response = await fetch('/api/robot_variant');
+        const result = await response.json();
+        if (result.status === 'ok' && result.variant === 'lite') {
+            const liteTip = document.getElementById('lite-speaker-tip');
+            if (liteTip) liteTip.style.display = 'list-item';
+        }
+    } catch (err) {
+        console.error('Failed to get robot variant:', err);
+    }
+
+    // Sync debug slider with current volume
+    const normalSlider = document.getElementById('volume-slider');
+    const debugSlider = document.getElementById('volume-slider-debug');
+    const debugValue = document.getElementById('volume-value-debug');
+    if (normalSlider && debugSlider) {
+        debugSlider.value = normalSlider.value;
+        debugValue.textContent = normalSlider.value + '%';
+    }
+}
+
+function backToStep5Normal() {
+    document.getElementById('step-5-normal').style.display = 'block';
+    document.getElementById('step-5-debug').style.display = 'none';
+
+    // Show bubble again
+    const bubble = document.querySelector('#step-5 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'visible';
+
+    // Hide Lite tip
+    const liteTip = document.getElementById('lite-speaker-tip');
+    if (liteTip) liteTip.style.display = 'none';
+}
+
+async function startRecordingSpeaker() {
+    try {
+        const recordBtn = document.getElementById('btn-record-speaker');
+        const playBtn = document.getElementById('btn-play-speaker');
+
+        // Disable buttons during recording
+        recordBtn.disabled = true;
+        playBtn.disabled = true;
+        recordBtn.textContent = 'Recording...';
+
+        // Start recording (5 seconds)
+        const response = await fetch('/api/start_recording', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ duration: 5.0 })
+        });
+
+        const result = await response.json();
+        if (result.status === 'recording') {
+            // Poll for recording completion
+            let countdown = 5;
+            const countdownInterval = setInterval(() => {
+                countdown--;
+                recordBtn.textContent = `Recording (${countdown}s)`;
+                if (countdown <= 0) {
+                    clearInterval(countdownInterval);
+                }
+            }, 1000);
+
+            // Wait for recording to complete (5s + buffer)
+            setTimeout(async () => {
+                // Check if recording is complete
+                const statusResp = await fetch('/api/recording_status');
+                const statusResult = await statusResp.json();
+
+                recordBtn.disabled = false;
+                recordBtn.textContent = 'Record (5s)';
+
+                if (statusResult.has_recording) {
+                    playBtn.disabled = false;
+                }
+            }, 5500);
+        }
+    } catch (err) {
+        console.error('Recording failed:', err);
+        alert('Failed to start recording');
+        const recordBtn = document.getElementById('btn-record-speaker');
+        recordBtn.disabled = false;
+        recordBtn.textContent = 'Record (5s)';
+    }
+}
+
+async function playRecordingSpeaker() {
+    try {
+        const playBtn = document.getElementById('btn-play-speaker');
+        playBtn.disabled = true;
+        playBtn.textContent = 'Playing...';
+
+        await fetch('/api/play_recording', { method: 'POST' });
+
+        // Re-enable after playback (estimate 5s)
+        setTimeout(() => {
+            playBtn.disabled = false;
+            playBtn.textContent = 'Play Recording';
+        }, 5500);
+    } catch (err) {
+        console.error('Playback failed:', err);
+        alert('Failed to play recording');
+        const playBtn = document.getElementById('btn-play-speaker');
+        playBtn.disabled = false;
+        playBtn.textContent = 'Play Recording';
+    }
+}
+
+// Step 6 Debug functions
+async function showStep6Debug() {
+    // Hide normal view
+    document.getElementById('step-6-normal').style.display = 'none';
+
+    // Show debug view
+    document.getElementById('step-6-debug').style.display = 'block';
+
+    // Hide bubble
+    const bubble = document.querySelector('#step-6 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'hidden';
+}
+
+function backToStep6Normal() {
+    document.getElementById('step-6-normal').style.display = 'block';
+    document.getElementById('step-6-debug').style.display = 'none';
+
+    // Show bubble again
+    const bubble = document.querySelector('#step-6 .reachy-bubble-container');
+    if (bubble) bubble.style.visibility = 'visible';
+
+    // Hide captured photo
+    const photoContainer = document.getElementById('captured-photo-container');
+    if (photoContainer) photoContainer.style.display = 'none';
+}
+
+async function capturePhoto() {
+    try {
+        const btn = document.getElementById('btn-capture');
+        const photoContainer = document.getElementById('captured-photo-container');
+        const photoImg = document.getElementById('captured-photo');
+
+        btn.disabled = true;
+        btn.textContent = 'Capturing...';
+
+        const response = await fetch('/api/capture_photo');
+        const result = await response.json();
+
+        if (result.status === 'ok') {
+            // Display the captured photo
+            photoImg.src = result.image;
+            photoContainer.style.display = 'block';
+        } else {
+            alert('Failed to capture photo: ' + (result.message || 'Unknown error'));
+        }
+
+        btn.disabled = false;
+        btn.textContent = 'Capture Photo';
+
+    } catch (err) {
+        console.error('Photo capture failed:', err);
+        alert('Failed to capture photo');
+
+        const btn = document.getElementById('btn-capture');
+        btn.disabled = false;
+        btn.textContent = 'Capture Photo';
+    }
+}
+
+async function goToPreviousStep() {
+    try {
+        // Use global currentStep variable
+        if (currentStep <= 1) return; // Can't go back from step 1
+
+        const previousStep = currentStep - 1;
+
+        // Use the new go_to_step endpoint for backward navigation
+        const response = await fetch('/api/go_to_step', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ step: previousStep })
+        });
+
+        const result = await response.json();
+        if (result.status === "error") {
+            console.error('Go to previous step failed:', result.message);
+        } else {
+            // Refresh state immediately
+            await fetchState();
+        }
+
+    } catch (err) {
+        console.error('Go to previous step failed:', err);
+    }
 }
 
 

wake_me_up/static/style.css

@@ -29,7 +29,7 @@ body {
 .step-indicator {
     position: absolute;
     bottom: 20px;
-    left: 20px;
+    right: 20px;
     font-size: 13px;
     font-weight: 500;
     color: #64748b;
@@ -249,7 +249,8 @@ body {
 
 .btn-primary,
 .btn-success,
-.btn-fail {
+.btn-fail,
+.btn-secondary {
     padding: 12px 24px;
     border-radius: 8px;
     font-size: 14px;
@@ -287,6 +288,20 @@ body {
     color: #FF9900;
 }
 
+/* Secondary button (neutral gray) */
+.btn-secondary {
+    background: #f1f5f9;
+    color: #475569;
+    border: 2px solid #cbd5e1;
+}
+
+.btn-secondary:hover:not(:disabled) {
+    background: #e2e8f0;
+    border-color: #94a3b8;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
 /* Text link style for secondary actions */
 .btn-text {
     background: transparent;
@@ -307,6 +322,7 @@ body {
 
 .btn-primary:disabled,
 .btn-success:disabled,
+.btn-secondary:disabled,
 .btn-text:disabled {
     background: #f3f4f6;
     color: #9ca3af;
@@ -314,6 +330,33 @@ body {
     opacity: 0.6;
 }
 
+/* Back button - text link style */
+.btn-back {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    background: transparent;
+    color: #6b7280;
+    border: none;
+    padding: 0;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all 0.2s ease;
+}
+
+.btn-back:hover:not(:disabled) {
+    color: #FF9900;
+    text-decoration: underline;
+}
+
+.btn-back:disabled {
+    color: #4b5563;
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
 /* Summary */
 .summary-list {
     list-style: none;
@@ -367,6 +410,66 @@ body {
     }
 }
 
+/* Reachy speaking bubble */
+.reachy-bubble-container {
+    position: absolute;
+    bottom: 120px;
+    right: -270px;
+    display: flex;
+    flex-direction: row-reverse;
+    align-items: center;
+    gap: 12px;
+    z-index: 10;
+}
+
+.speech-bubble {
+    background: #FFFFFF;
+    border: 2px solid #FF9900;
+    border-radius: 12px;
+    padding: 12px 16px;
+    font-size: 14px;
+    font-weight: 500;
+    color: #0f172a;
+    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.2);
+    position: relative;
+    max-width: 200px;
+    line-height: 1.4;
+}
+
+.speech-bubble::after {
+    content: '';
+    position: absolute;
+    left: -10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 10px solid transparent;
+    border-bottom: 10px solid transparent;
+    border-right: 10px solid #FF9900;
+}
+
+.speech-bubble::before {
+    content: '';
+    position: absolute;
+    left: -7px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-top: 8px solid transparent;
+    border-bottom: 8px solid transparent;
+    border-right: 8px solid #FFFFFF;
+    z-index: 1;
+}
+
+.bubble-reachy-icon {
+    width: 75px;
+    height: auto;
+    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+    flex-shrink: 0;
+}
+
 /* Camera eyes blinking animation */
 /* Camera eye-opening animation */
 @keyframes eye-open {