fix: attach robot video via host handle (track arrives before connectToHost resolves)

app.js

@@ -57,8 +57,17 @@ window.dispatchEvent(new Event("reachymini:ready"));
 
 const params = new URLSearchParams(window.location.search);
 const isEmbed = params.get("embedded") === "1" || params.get("embed") === "1";
+// Dev mode (?dev=1): no robot, no OAuth. Uses the laptop webcam as the video source and a fake
+// robot that logs commands instead of sending them. For tuning vision + control without hardware.
+const isDev = params.get("dev") === "1";
 
-if (isEmbed) {
+if (isDev) {
+  document.body.classList.add("embed");
+  runDev().catch((err) => {
+    console.error("[howdy-friend] dev boot failed", err);
+    log(`Dev boot failed: ${err?.message ?? err}`);
+  });
+} else if (isEmbed) {
   document.body.classList.add("embed");
   runEmbed().catch((err) => {
     console.error("[howdy-friend] boot failed", err);
@@ -113,6 +122,75 @@ async function runEmbed() {
   handle.onLeave(() => app.shutdown(detachVideo));
 }
 
+// ---------------------------------------------------------------------------
+// Dev mode: webcam + fake robot
+// ---------------------------------------------------------------------------
+
+async function runDev() {
+  const ui = bindUi();
+  setStatus("Dev mode: opening webcam", "");
+  log("DEV MODE: no robot. Commands are logged, not sent.");
+
+  // Production never calls getUserMedia (it would grab the wrong camera). Dev mode is the exception.
+  const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 640, height: 480 }, audio: false });
+  ui.video.srcObject = stream;
+  await ui.video.play();
+  const detachVideo = () => stream.getTracks().forEach((t) => t.stop());
+
+  setStatus("Loading vision models", "");
+  const vision = await loadVision();
+  log("Vision models ready");
+
+  const clips = new ClipCache();
+  clips.preload(WAVE_CLIPS).then((n) => log(`${n}/${WAVE_CLIPS.length} reaction clips ready`));
+
+  const reachy = new FakeReachy();
+  const app = new HowdyApp({ reachy, vision, clips, ui });
+  app.start();
+  window.addEventListener("beforeunload", () => app.shutdown(detachVideo));
+}
+
+// Mimics the subset of the SDK used by HowdyApp. Logs a pose summary at most twice a second so the
+// on-screen log stays readable; every call still goes to the browser console.
+class FakeReachy {
+  constructor() { this.lastPoseLogAt = 0; this.audio = null; }
+
+  setTarget(t) {
+    console.debug("[fake] setTarget", t);
+    if (!t.head) return;
+    const now = performance.now();
+    if (now - this.lastPoseLogAt < 500) return;
+    this.lastPoseLogAt = now;
+    const rpy = matrixToRpyDeg(t.head);
+    const body = typeof t.body_yaw === "number" ? t.body_yaw / DEG : 0;
+    log(`cmd head yaw ${rpy.yaw.toFixed(1)}° pitch ${rpy.pitch.toFixed(1)}° | body ${body.toFixed(1)}°`);
+  }
+
+  gotoTarget(t) { log(`gotoTarget (${t.duration ?? "?"}s)`); this.setTarget(t); }
+  setMotorMode(m) { console.debug("[fake] setMotorMode", m); }
+  cancelMove() { this.stopAudio(); }
+  attachVideo() { return () => {}; }
+
+  async playMove(motion, opts = {}) {
+    const dur = motion.time?.[motion.time.length - 1] ?? 1;
+    const first = motion.set_target_data[0], last = motion.set_target_data[motion.set_target_data.length - 1];
+    const f = first?.head ? matrixToRpyDeg(first.head) : null, l = last?.head ? matrixToRpyDeg(last.head) : null;
+    log(`playMove "${opts.description ?? ""}" ${dur.toFixed(2)}s, ${motion.set_target_data.length} frames` +
+        (f && l ? `, yaw ${f.yaw.toFixed(0)}°→${l.yaw.toFixed(0)}°` : "") + (opts.audioBlob ? ", with audio" : ""));
+    if (opts.audioBlob) {
+      this.stopAudio();
+      this.audio = new Audio(URL.createObjectURL(opts.audioBlob));
+      this.audio.play().catch((e) => log(`audio blocked: ${e.message}`));
+    }
+    await new Promise((r) => setTimeout(r, dur * 1000));
+    return {};
+  }
+
+  stopAudio() {
+    if (this.audio) { try { this.audio.pause(); } catch (_) {} this.audio = null; }
+  }
+}
+
 // ---------------------------------------------------------------------------
 // Core app: tracking loop, wave detection, reactions
 // ---------------------------------------------------------------------------
@@ -223,7 +301,7 @@ class HowdyApp {
       const ex = (cx - 0.5) * 2; // -1..1
       const ey = (cy - 0.5) * 2;
       this.servo(ex, ey, dt);
-      setStatus("Tracking", `yaw ${this.headYaw.toFixed(0)}° body ${this.bodyYaw.toFixed(0)}°`, "tracking");
+      setStatus("Tracking", `yaw ${this.headYaw.toFixed(0)}° pitch ${this.headPitch.toFixed(0)}° body ${this.bodyYaw.toFixed(0)}°`, "tracking");
     } else if ((now - this.lastFaceAt) / 1000 > TRACK.noFaceResetSec) {
       this.easeHome(dt);
       setStatus("Looking for faces", "");