From a262674fac68fb306495772b711e917b0ac57ebc Mon Sep 17 00:00:00 2001
From: Sarthak Agrawal <sarthakagrawal927@gmail.com>
Date: Sat, 15 Aug 2026 17:48:45 +0530
Subject: [PATCH] chore: reduce code-health baseline debt
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix all 19 TypeScript format violations (biome format)
- Extract routePose helper from server route() to reduce CCN 17→13
- Extract drawArm helper from drawSkeleton to reduce CCN 16→10
- Move hostFrom after Room class to fix lizard misparse (CCN 17→4, length 192→7)
- Extract shared roundRect + distPointToSegment into games/canvas-utils.ts
  to eliminate cross-game duplication
- Lower ratcheted baselines: format 19→0, complexity violations 6→3,
  maxLength 189→180, duplication clones 7→5, duplicatedLines 102→65,
  percentage 0.8814→0.5543

Closes #26
---
 scripts/check-code-health.mjs       | 12 ++--
 scripts/check-landing.mjs           | 80 +++++++++++++++--------
 server/src/server.ts                | 70 ++++++++++++++------
 web/src/app/main.ts                 |  3 +-
 web/src/app/overlay.ts              | 10 ++-
 web/src/games/canvas-utils.ts       | 39 ++++++++++++
 web/src/games/motion-maker/index.ts | 99 ++++++++++++++---------------
 web/src/games/reach-dodge/index.ts  | 22 +------
 web/src/games/slice/index.ts        | 68 ++++++++++++--------
 web/src/sdk/bridge.ts               |  2 +-
 web/src/sdk/calibration.ts          |  5 +-
 web/src/sdk/controller.ts           | 10 +--
 web/src/sdk/diagnostics.ts          |  2 +-
 web/src/sdk/game.ts                 |  2 +-
 web/src/sdk/index.ts                | 17 +++--
 web/src/sdk/keyboard-debug.ts       | 61 ++++++++++++++----
 web/src/sdk/recording.ts            | 12 ++--
 web/src/sdk/room.ts                 | 15 +++--
 web/src/sdk/skeleton.ts             | 52 +++++++++------
 web/src/sdk/types.ts                |  2 +-
 web/src/sdk/webcam.ts               | 35 +++++++---
 21 files changed, 401 insertions(+), 217 deletions(-)
 create mode 100644 web/src/games/canvas-utils.ts

diff --git a/scripts/check-code-health.mjs b/scripts/check-code-health.mjs
index 6516d2f..45f55b6 100644
--- a/scripts/check-code-health.mjs
+++ b/scripts/check-code-health.mjs
@@ -101,7 +101,7 @@ function checkFormat() {
   const observed = { files: report.summary.errors };
   log(`TypeScript format debt: ${observed.files} files.`);
   // Ratcheted legacy debt: https://github.com/Significant-Hobbies/motion/issues/26
-  failRegressions("TypeScript format", observed, { files: 19 });
+  failRegressions("TypeScript format", observed, { files: 0 });
 }
 
 function checkCoverage() {
@@ -168,9 +168,9 @@ function checkComplexity() {
   );
   // Ratcheted legacy debt: https://github.com/Significant-Hobbies/motion/issues/26
   failRegressions("Complexity", observed, {
-    violations: 6,
+    violations: 3,
     maxCcn: 22,
-    maxLength: 189,
+    maxLength: 180,
     maxParams: 7,
   });
 }
@@ -208,9 +208,9 @@ function checkDuplication() {
   );
   // Ratcheted legacy debt: https://github.com/Significant-Hobbies/motion/issues/26
   failRegressions("Duplication", observed, {
-    clones: 7,
-    duplicatedLines: 102,
-    percentage: 0.8814379536812997,
+    clones: 5,
+    duplicatedLines: 65,
+    percentage: 0.5543237250554324,
   });
 }
 
diff --git a/scripts/check-landing.mjs b/scripts/check-landing.mjs
index 1fac9a6..9135e47 100644
--- a/scripts/check-landing.mjs
+++ b/scripts/check-landing.mjs
@@ -37,22 +37,24 @@ const [
   ai,
   sourceLogo,
   publicLogo,
-] =
-  await Promise.all([
-    readFile(path.join(landing, "index.html"), "utf8"),
-    readFile(path.join(landing, "changelog.html"), "utf8"),
-    readFile(path.join(landing, "privacy.html"), "utf8"),
-    readFile(path.join(landing, "styles.css"), "utf8"),
-    readFile(path.join(landing, "llms.txt"), "utf8"),
-    readFile(path.join(landing, "index.md"), "utf8"),
-    readFile(path.join(landing, "_redirects"), "utf8"),
-    readFile(path.join(landing, "sitemap.xml"), "utf8"),
-    readFile(path.join(landing, "api/ai.json"), "utf8").then(JSON.parse),
-    readFile(path.join(root, "web/public/motion-logo.png")),
-    readFile(path.join(landing, "assets/motion-logo.png")),
-  ]);
+] = await Promise.all([
+  readFile(path.join(landing, "index.html"), "utf8"),
+  readFile(path.join(landing, "changelog.html"), "utf8"),
+  readFile(path.join(landing, "privacy.html"), "utf8"),
+  readFile(path.join(landing, "styles.css"), "utf8"),
+  readFile(path.join(landing, "llms.txt"), "utf8"),
+  readFile(path.join(landing, "index.md"), "utf8"),
+  readFile(path.join(landing, "_redirects"), "utf8"),
+  readFile(path.join(landing, "sitemap.xml"), "utf8"),
+  readFile(path.join(landing, "api/ai.json"), "utf8").then(JSON.parse),
+  readFile(path.join(root, "web/public/motion-logo.png")),
+  readFile(path.join(landing, "assets/motion-logo.png")),
+]);
 
-assert.match(html, /<link rel="canonical" href="https:\/\/motion\.significanthobbies\.com\/"/);
+assert.match(
+  html,
+  /<link rel="canonical" href="https:\/\/motion\.significanthobbies\.com\/"/
+);
 assert.match(html, /Your body is the controller/);
 assert.match(html, /this website is not the game/i);
 assert.match(html, /Camera frames are not transmitted or stored/);
@@ -62,20 +64,42 @@ assert.match(redirects, /^\/api\/ai \/api\/ai\.json 200/m);
 assert.match(html, /href=["']\/changelog["']/);
 assert.match(
   changelog,
-  /<link\s+rel="canonical"\s+href="https:\/\/motion\.significanthobbies\.com\/changelog"/,
+  /<link\s+rel="canonical"\s+href="https:\/\/motion\.significanthobbies\.com\/changelog"/
 );
 assert.match(changelog, /<title>Changelog — Motion<\/title>/);
 assert.equal((changelog.match(/<h1(?:\s|>)/g) ?? []).length, 1);
-assert.equal((changelog.match(/<time datetime="\d{4}-\d{2}-\d{2}">/g) ?? []).length, 3);
-assert.match(changelog, /https:\/\/github\.com\/Significant-Hobbies\/motion\/issues/);
+assert.equal(
+  (changelog.match(/<time datetime="\d{4}-\d{2}-\d{2}">/g) ?? []).length,
+  3
+);
+assert.match(
+  changelog,
+  /https:\/\/github\.com\/Significant-Hobbies\/motion\/issues/
+);
 assert.match(changelog, /https:\/\/github\.com\/Significant-Hobbies\/motion/);
 assert.match(sitemap, /https:\/\/motion\.significanthobbies\.com\/changelog/);
-assert.match(privacy, /Camera frames are not transmitted to us or stored by us/);
-assert.match(privacy, /href="https:\/\/github\.com\/Significant-Hobbies\/motion\/issues"/);
+assert.match(
+  privacy,
+  /Camera frames are not transmitted to us or stored by us/
+);
+assert.match(
+  privacy,
+  /href="https:\/\/github\.com\/Significant-Hobbies\/motion\/issues"/
+);
 assert.match(sitemap, /https:\/\/motion\.significanthobbies\.com\/privacy/);
 
-for (const text of [html, changelog, privacy, llms, markdown, JSON.stringify(ai)]) {
-  assert.doesNotMatch(text, /href=["']\/play|debug=1|camera=1|room=|127\.0\.0\.1|localhost/i);
+for (const text of [
+  html,
+  changelog,
+  privacy,
+  llms,
+  markdown,
+  JSON.stringify(ai),
+]) {
+  assert.doesNotMatch(
+    text,
+    /href=["']\/play|debug=1|camera=1|room=|127\.0\.0\.1|localhost/i
+  );
 }
 
 assert.equal(ai.canonicalUrl, "https://motion.significanthobbies.com/");
@@ -84,10 +108,16 @@ assert.equal(ai.privacy.cameraFramesTransmitted, false);
 assert.equal(ai.privacy.publicSiteRequestsCamera, false);
 assert.equal(
   ai.agentEntrypoints.changelog,
-  "https://motion.significanthobbies.com/changelog",
+  "https://motion.significanthobbies.com/changelog"
 );
 
 const digest = (buffer) => createHash("sha256").update(buffer).digest("hex");
-assert.equal(digest(sourceLogo), digest(publicLogo), "public logo must remain unchanged");
+assert.equal(
+  digest(sourceLogo),
+  digest(publicLogo),
+  "public logo must remain unchanged"
+);
 
-console.log(`Motion landing: ${required.length} required files and public boundaries verified`);
+console.log(
+  `Motion landing: ${required.length} required files and public boundaries verified`
+);
diff --git a/server/src/server.ts b/server/src/server.ts
index 3be6566..1685550 100644
--- a/server/src/server.ts
+++ b/server/src/server.ts
@@ -103,7 +103,7 @@ export default class MotionServer implements Party.Server {
     msg: AnyMessage,
     raw: string,
     conn: Party.Connection<ConnState>,
-    role: Role,
+    role: Role
   ) {
     switch (msg.type) {
       case "join":
@@ -112,7 +112,11 @@ export default class MotionServer implements Party.Server {
 
       case "ping":
         // Answer directly with a pong echoing `t`. Never relayed to the peer.
-        this.sendTo(conn, { v: PROTOCOL_VERSION, type: "pong", t: msg.t } as PongMessage);
+        this.sendTo(conn, {
+          v: PROTOCOL_VERSION,
+          type: "pong",
+          t: msg.t,
+        } as PongMessage);
         return;
 
       case "pong":
@@ -121,11 +125,7 @@ export default class MotionServer implements Party.Server {
 
       case "pose":
         // Controller → display only. Validate, rate-limit, then relay.
-        if (role !== "controller") return;
-        if (!isPosePacket(msg)) return; // drop junk silently.
-        if (!this.allowPose(conn.id)) return; // over budget → silent drop.
-        this.relayTo("display", raw);
-        this.debugPose(raw); // throttled dev log so we can watch the stream server-side.
+        this.routePose(msg, raw, conn, role);
         return;
 
       case "status":
@@ -162,6 +162,20 @@ export default class MotionServer implements Party.Server {
     }
   }
 
+  /** Validate, rate-limit, and relay a pose packet from the controller. */
+  private routePose(
+    msg: AnyMessage,
+    raw: string,
+    conn: Party.Connection<ConnState>,
+    role: Role
+  ) {
+    if (role !== "controller") return;
+    if (!isPosePacket(msg)) return; // drop junk silently.
+    if (!this.allowPose(conn.id)) return; // over budget → silent drop.
+    this.relayTo("display", raw);
+    this.debugPose(raw); // throttled dev log so we can watch the stream server-side.
+  }
+
   // ── Join handshake + role enforcement ────────────────────────────────────────
 
   private handleJoin(msg: JoinMessage, conn: Party.Connection<ConnState>) {
@@ -169,7 +183,7 @@ export default class MotionServer implements Party.Server {
       this.sendError(
         conn,
         "version_mismatch",
-        `Server speaks protocol v${PROTOCOL_VERSION}, client sent v${String(msg.v)}.`,
+        `Server speaks protocol v${PROTOCOL_VERSION}, client sent v${String(msg.v)}.`
       );
       conn.close();
       return;
@@ -177,7 +191,11 @@ export default class MotionServer implements Party.Server {
 
     const role = msg.role;
     if (role !== "display" && role !== "controller") {
-      this.sendError(conn, "bad_role", "Role must be 'display' or 'controller'.");
+      this.sendError(
+        conn,
+        "bad_role",
+        "Role must be 'display' or 'controller'."
+      );
       conn.close();
       return;
     }
@@ -190,11 +208,19 @@ export default class MotionServer implements Party.Server {
     //    don't endlessly evict each other.
     if (this.roleTaken(role, conn.id)) {
       if (role === "controller") {
-        console.log(`[${this.room.id}] controller reconnect — evicting stale controller`);
+        console.log(
+          `[${this.room.id}] controller reconnect — evicting stale controller`
+        );
         this.evictRole("controller", conn.id);
       } else {
-        console.log(`[${this.room.id}] REJECTED ${role} (room_full — a ${role} is already here)`);
-        this.sendError(conn, "room_full", `A ${role} is already connected to this room.`);
+        console.log(
+          `[${this.room.id}] REJECTED ${role} (room_full — a ${role} is already here)`
+        );
+        this.sendError(
+          conn,
+          "room_full",
+          `A ${role} is already connected to this room.`
+        );
         conn.close();
         return;
       }
@@ -202,7 +228,9 @@ export default class MotionServer implements Party.Server {
 
     // Tag the connection with its role — this is what marks it "joined".
     conn.setState({ role });
-    console.log(`[${this.room.id}] JOINED ${role}  (conns now: ${[...this.room.getConnections()].length})`);
+    console.log(
+      `[${this.room.id}] JOINED ${role}  (conns now: ${[...this.room.getConnections()].length})`
+    );
 
     // Broadcast authoritative presence to BOTH roles. Every side gets the TRUE current
     // state (not an incremental event that can be missed during reconnect churn), so the
@@ -226,8 +254,10 @@ export default class MotionServer implements Party.Server {
     for (const c of this.room.getConnections<ConnState>()) {
       if (c.id === excludeId) continue;
       const r = c.state?.role;
-      if (r === "display") this.safeSend(c, JSON.stringify(peerMsg("controller", hasController)));
-      else if (r === "controller") this.safeSend(c, JSON.stringify(peerMsg("display", hasDisplay)));
+      if (r === "display")
+        this.safeSend(c, JSON.stringify(peerMsg("controller", hasController)));
+      else if (r === "controller")
+        this.safeSend(c, JSON.stringify(peerMsg("display", hasDisplay)));
     }
   }
 
@@ -241,9 +271,10 @@ export default class MotionServer implements Party.Server {
       // Cheap field-presence check tells us if the phone is on the NEW build:
       // new build streams fingertips + elbows; old build has neither.
       const fingertips = raw.includes('"fingertips"');
-      const elbows = raw.includes('"leftElbow"') || raw.includes('"rightElbow"');
+      const elbows =
+        raw.includes('"leftElbow"') || raw.includes('"rightElbow"');
       console.log(
-        `[${this.room.id}] pose #${this.poseCount} — display:${hasDisplay} fingertips:${fingertips} elbows:${elbows}`,
+        `[${this.room.id}] pose #${this.poseCount} — display:${hasDisplay} fingertips:${fingertips} elbows:${elbows}`
       );
     }
   }
@@ -261,7 +292,8 @@ export default class MotionServer implements Party.Server {
   private evictRole(role: Role, exceptId: string) {
     for (const c of this.room.getConnections<ConnState>()) {
       if (c.id === exceptId) continue;
-      if (c.state?.role === role) c.close(1000, "replaced by a newer connection");
+      if (c.state?.role === role)
+        c.close(1000, "replaced by a newer connection");
     }
   }
 
@@ -295,7 +327,7 @@ export default class MotionServer implements Party.Server {
   private sendError(
     conn: Party.Connection<ConnState>,
     code: ErrorMessage["code"],
-    message: string,
+    message: string
   ) {
     this.sendTo(conn, { v: PROTOCOL_VERSION, type: "error", code, message });
   }
diff --git a/web/src/app/main.ts b/web/src/app/main.ts
index 0461821..3aaa51c 100644
--- a/web/src/app/main.ts
+++ b/web/src/app/main.ts
@@ -48,7 +48,8 @@ function pickGame(): { game: Game; live: boolean } {
       return { game: new Slice(), live: true };
     default:
       // Featured everywhere the phone hosts it or the MOTION mirror is on.
-      if (MOTION_MAKER || TRANSPORT === "bridge") return { game: new Slice(), live: true };
+      if (MOTION_MAKER || TRANSPORT === "bridge")
+        return { game: new Slice(), live: true };
       return { game: new ReachDodge(), live: false };
   }
 }
diff --git a/web/src/app/overlay.ts b/web/src/app/overlay.ts
index e4bd934..4dffacd 100644
--- a/web/src/app/overlay.ts
+++ b/web/src/app/overlay.ts
@@ -29,7 +29,11 @@ export class Overlay implements SessionScreenRenderer {
   pairing(ctx: PairingCtx): void {
     const { code, conn, host, debug, recordOn, onToggleRecord } = ctx;
     const dot =
-      conn === "open" ? "#35e0c8" : conn === "connecting" ? "#ffcc33" : "#ff4d6d";
+      conn === "open"
+        ? "#35e0c8"
+        : conn === "connecting"
+          ? "#ffcc33"
+          : "#ff4d6d";
     const connLabel =
       conn === "open"
         ? "connected to relay"
@@ -106,7 +110,7 @@ export class Overlay implements SessionScreenRenderer {
     const stats = r.stats
       .map(
         (s) =>
-          `<div><b style="color:#f4f7ff">${escapeHtml(s.value)}</b><br><span style="color:#8a95b5">${escapeHtml(s.label)}</span></div>`,
+          `<div><b style="color:#f4f7ff">${escapeHtml(s.value)}</b><br><span style="color:#8a95b5">${escapeHtml(s.label)}</span></div>`
       )
       .join("");
     this.panel(`
@@ -128,7 +132,7 @@ function spaced(code: string): string {
 }
 function escapeHtml(s: string): string {
   return s.replace(/[&<>"]/g, (c) =>
-    c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;",
+    c === "&" ? "&amp;" : c === "<" ? "&lt;" : c === ">" ? "&gt;" : "&quot;"
   );
 }
 
diff --git a/web/src/games/canvas-utils.ts b/web/src/games/canvas-utils.ts
new file mode 100644
index 0000000..aaf118b
--- /dev/null
+++ b/web/src/games/canvas-utils.ts
@@ -0,0 +1,39 @@
+// Shared canvas drawing helpers used by multiple games.
+// Extracted to avoid duplication of geometry and path utilities.
+
+/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
+export function distPointToSegment(
+  px: number,
+  py: number,
+  ax: number,
+  ay: number,
+  bx: number,
+  by: number
+): number {
+  const dx = bx - ax;
+  const dy = by - ay;
+  const lenSq = dx * dx + dy * dy;
+  if (lenSq === 0) return Math.hypot(px - ax, py - ay);
+  let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
+  t = t < 0 ? 0 : t > 1 ? 1 : t;
+  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+}
+
+/** Stroke a rounded rectangle path on the given 2D context. */
+export function roundRect(
+  ctx: CanvasRenderingContext2D,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  radius: number
+): void {
+  const rr = Math.min(radius, w / 2, h / 2);
+  ctx.beginPath();
+  ctx.moveTo(x + rr, y);
+  ctx.arcTo(x + w, y, x + w, y + h, rr);
+  ctx.arcTo(x + w, y + h, x, y + h, rr);
+  ctx.arcTo(x, y + h, x, y, rr);
+  ctx.arcTo(x, y, x + w, y, rr);
+  ctx.closePath();
+}
diff --git a/web/src/games/motion-maker/index.ts b/web/src/games/motion-maker/index.ts
index 85668b8..ed85249 100644
--- a/web/src/games/motion-maker/index.ts
+++ b/web/src/games/motion-maker/index.ts
@@ -16,6 +16,7 @@ import type {
   GameResult,
   Renderer,
 } from "../../sdk";
+import { distPointToSegment, roundRect } from "../canvas-utils";
 
 // ── Interaction tuning ────────────────────────────────────────────────────────
 
@@ -106,7 +107,15 @@ interface HandTrack {
 }
 
 function newHand(): HandTrack {
-  return { x: 0.5, y: 0.5, vx: 0, vy: 0, prevOpen: 1, holding: null, armed: false };
+  return {
+    x: 0.5,
+    y: 0.5,
+    vx: 0,
+    vy: 0,
+    prevOpen: 1,
+    holding: null,
+    armed: false,
+  };
 }
 
 export class MotionMaker implements Game {
@@ -426,7 +435,7 @@ export class MotionMaker implements Game {
           h.x,
           h.y,
           sword.tipX,
-          sword.tipY,
+          sword.tipY
         );
         if (d < SLICE_RADIUS) {
           ball.scoreAnim = 0.001; // start pop
@@ -457,7 +466,9 @@ export class MotionMaker implements Game {
     ctx.save();
     const glow = this.binFlash > 0 ? this.binFlash / 0.5 : 0;
     ctx.strokeStyle =
-      glow > 0 ? `rgba(53,224,200,${0.6 + glow * 0.4})` : "rgba(53,224,200,0.45)";
+      glow > 0
+        ? `rgba(53,224,200,${0.6 + glow * 0.4})`
+        : "rgba(53,224,200,0.45)";
     ctx.lineWidth = Math.max(3, r.sx(0.008));
     ctx.setLineDash([r.sx(0.02), r.sx(0.014)]);
     roundRect(ctx, cx - w / 2, cy - h / 2, w, h, r.sx(0.02));
@@ -499,7 +510,13 @@ export class MotionMaker implements Game {
       ctx.fill();
       ctx.fillStyle = "rgba(255,255,255,0.35)";
       ctx.beginPath();
-      ctx.arc(cx - radius * 0.3, cy - radius * 0.3, radius * 0.35, 0, Math.PI * 2);
+      ctx.arc(
+        cx - radius * 0.3,
+        cy - radius * 0.3,
+        radius * 0.35,
+        0,
+        Math.PI * 2
+      );
       ctx.fill();
       ctx.restore();
     }
@@ -546,7 +563,7 @@ export class MotionMaker implements Game {
         gy - uy * handleLen,
         Math.max(4, r.sx(0.012)),
         0,
-        Math.PI * 2,
+        Math.PI * 2
       );
       ctx.fill();
 
@@ -623,9 +640,18 @@ export class MotionMaker implements Game {
     ctx.stroke();
 
     // Arms: neck → elbow (when tracked, for a real bend) → hand. Straight fallback.
-    const arms: { elbow: [number, number] | undefined; hand: [number, number] }[] = [
-      { elbow: j.leftElbow ? this.pt(r, j.leftElbow) : undefined, hand: [lhX, lhY] },
-      { elbow: j.rightElbow ? this.pt(r, j.rightElbow) : undefined, hand: [rhX, rhY] },
+    const arms: {
+      elbow: [number, number] | undefined;
+      hand: [number, number];
+    }[] = [
+      {
+        elbow: j.leftElbow ? this.pt(r, j.leftElbow) : undefined,
+        hand: [lhX, lhY],
+      },
+      {
+        elbow: j.rightElbow ? this.pt(r, j.rightElbow) : undefined,
+        hand: [rhX, rhY],
+      },
     ];
     for (const { elbow, hand } of arms) {
       ctx.beginPath();
@@ -644,15 +670,20 @@ export class MotionMaker implements Game {
     ctx.restore();
 
     // Hands — draw open vs closed.
-    this.drawHand(r, lhX, lhY, body.leftHandOpen, this.hands.left.holding !== null);
+    this.drawHand(
+      r,
+      lhX,
+      lhY,
+      body.leftHandOpen,
+      this.hands.left.holding !== null
+    );
     this.drawHand(
       r,
       rhX,
       rhY,
       body.rightHandOpen,
-      this.hands.right.holding !== null,
+      this.hands.right.holding !== null
     );
-
   }
 
   /**
@@ -674,7 +705,7 @@ export class MotionMaker implements Game {
     x: number,
     y: number,
     open: number,
-    holding: boolean,
+    holding: boolean
   ): void {
     const { ctx } = r;
     const base = Math.max(10, r.sx(0.03));
@@ -718,51 +749,19 @@ export class MotionMaker implements Game {
     ctx.fillStyle = "#f4f7ff";
     ctx.font = `bold ${Math.round(r.sx(0.05))}px system-ui`;
     ctx.textAlign = "left";
-    ctx.fillText(String(this.score).padStart(4, "0"), p.x + r.sx(0.03), p.y + r.sy(0.03));
+    ctx.fillText(
+      String(this.score).padStart(4, "0"),
+      p.x + r.sx(0.03),
+      p.y + r.sy(0.03)
+    );
 
     ctx.fillStyle = "#8a95b5";
     ctx.font = `${Math.round(r.sx(0.024))}px system-ui`;
     ctx.fillText(
       "Grab a ball → drop it in the bin · grab the sword → swing to slice",
       p.x + r.sx(0.03),
-      p.y + r.sy(0.1),
+      p.y + r.sy(0.1)
     );
     ctx.restore();
   }
 }
-
-/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
-function distPointToSegment(
-  px: number,
-  py: number,
-  ax: number,
-  ay: number,
-  bx: number,
-  by: number,
-): number {
-  const dx = bx - ax;
-  const dy = by - ay;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) return Math.hypot(px - ax, py - ay);
-  let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
-  t = t < 0 ? 0 : t > 1 ? 1 : t;
-  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
-}
-
-function roundRect(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  radius: number,
-): void {
-  const rr = Math.min(radius, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + rr, y);
-  ctx.arcTo(x + w, y, x + w, y + h, rr);
-  ctx.arcTo(x + w, y + h, x, y + h, rr);
-  ctx.arcTo(x, y + h, x, y, rr);
-  ctx.arcTo(x, y, x + w, y, rr);
-  ctx.closePath();
-}
diff --git a/web/src/games/reach-dodge/index.ts b/web/src/games/reach-dodge/index.ts
index c91a4f7..6dba98b 100644
--- a/web/src/games/reach-dodge/index.ts
+++ b/web/src/games/reach-dodge/index.ts
@@ -20,6 +20,7 @@ import type {
   GameResult,
   Renderer,
 } from "../../sdk";
+import { roundRect } from "../canvas-utils";
 
 const SESSION_MS = 75_000; // ~75s
 const TARGET_RADIUS = 0.075; // normalized (x-relative)
@@ -199,7 +200,7 @@ export class ReachDodge implements Game {
       }
     }
     this.targets = this.targets.filter(
-      (t) => (!t.hit && t.ttl > 0) || (t.hit && t.hitAnim < 1),
+      (t) => (!t.hit && t.ttl > 0) || (t.hit && t.hitAnim < 1)
     );
   }
 
@@ -335,7 +336,7 @@ export class ReachDodge implements Game {
     ctx.fillText(
       String(this.score).padStart(5, "0"),
       p.x + r.sx(0.03),
-      p.y + r.sy(0.03),
+      p.y + r.sy(0.03)
     );
 
     // Combo
@@ -367,20 +368,3 @@ function lerp(a: number, b: number, t: number): number {
 function dist(ax: number, ay: number, bx: number, by: number): number {
   return Math.hypot(ax - bx, ay - by);
 }
-function roundRect(
-  ctx: CanvasRenderingContext2D,
-  x: number,
-  y: number,
-  w: number,
-  h: number,
-  radius: number,
-): void {
-  const rr = Math.min(radius, w / 2, h / 2);
-  ctx.beginPath();
-  ctx.moveTo(x + rr, y);
-  ctx.arcTo(x + w, y, x + w, y + h, rr);
-  ctx.arcTo(x + w, y + h, x, y + h, rr);
-  ctx.arcTo(x, y + h, x, y, rr);
-  ctx.arcTo(x, y, x + w, y, rr);
-  ctx.closePath();
-}
diff --git a/web/src/games/slice/index.ts b/web/src/games/slice/index.ts
index 1fc4dda..9bd3e30 100644
--- a/web/src/games/slice/index.ts
+++ b/web/src/games/slice/index.ts
@@ -15,6 +15,7 @@ import type {
   GameResult,
   Renderer,
 } from "../../sdk";
+import { distPointToSegment } from "../canvas-utils";
 
 // ── Tuning ──────────────────────────────────────────────────────────────────────
 
@@ -30,7 +31,14 @@ const GRAVITY = 0.9;
 /** Trail length (recent hand points) drawn as the blade. */
 const TRAIL_LEN = 10;
 
-const FRUIT_COLORS = ["#ff5b6a", "#ffb020", "#35e0c8", "#5b8cff", "#b25cff", "#ff8f3f"];
+const FRUIT_COLORS = [
+  "#ff5b6a",
+  "#ffb020",
+  "#35e0c8",
+  "#5b8cff",
+  "#b25cff",
+  "#ff8f3f",
+];
 
 type Which = "left" | "right";
 
@@ -123,7 +131,10 @@ export class Slice implements Game {
   private halves: Half[] = [];
   private splats: Splat[] = [];
   private popups: Popup[] = [];
-  private hands: Record<Which, HandTrack> = { left: newHand(-0.5), right: newHand(0.5) };
+  private hands: Record<Which, HandTrack> = {
+    left: newHand(-0.5),
+    right: newHand(0.5),
+  };
 
   private score = 0;
   private lives = START_LIVES;
@@ -273,7 +284,9 @@ export class Slice implements Game {
       vx,
       vy,
       r: bomb ? 0.055 : 0.05 + Math.random() * 0.02,
-      color: bomb ? "#20242e" : (FRUIT_COLORS[this.nextId % FRUIT_COLORS.length] ?? "#ff5b6a"),
+      color: bomb
+        ? "#20242e"
+        : (FRUIT_COLORS[this.nextId % FRUIT_COLORS.length] ?? "#ff5b6a"),
       bomb,
       counted: false,
     });
@@ -332,7 +345,10 @@ export class Slice implements Game {
 
       for (const f of this.fruits) {
         if (f.counted) continue;
-        if (distPointToSegment(f.x, f.y, a.x, a.y, b.x, b.y) < f.r + SLICE_REACH) {
+        if (
+          distPointToSegment(f.x, f.y, a.x, a.y, b.x, b.y) <
+          f.r + SLICE_REACH
+        ) {
           this.onSliced(f, b.x - a.x, b.y - a.y);
         }
       }
@@ -354,7 +370,8 @@ export class Slice implements Game {
     this.sliced++;
     // Combo: slices chained within the window multiply the score.
     const now = this.elapsed;
-    this.comboCount = now - this.lastSliceAt <= COMBO_WINDOW_S ? this.comboCount + 1 : 1;
+    this.comboCount =
+      now - this.lastSliceAt <= COMBO_WINDOW_S ? this.comboCount + 1 : 1;
     this.lastSliceAt = now;
     this.bestCombo = Math.max(this.bestCombo, this.comboCount);
 
@@ -494,7 +511,13 @@ export class Slice implements Game {
       ctx.fillStyle = h.color;
       ctx.beginPath();
       // A half disc (flat face along the slice).
-      ctx.arc(0, 0, rad, h.side > 0 ? 0 : Math.PI, h.side > 0 ? Math.PI : Math.PI * 2);
+      ctx.arc(
+        0,
+        0,
+        rad,
+        h.side > 0 ? 0 : Math.PI,
+        h.side > 0 ? Math.PI : Math.PI * 2
+      );
       ctx.closePath();
       ctx.fill();
       // Pale inner flesh along the cut.
@@ -626,13 +649,18 @@ export class Slice implements Game {
     ctx.fillStyle = "#f4f7ff";
     ctx.font = `bold ${Math.round(r.sx(0.05))}px system-ui`;
     ctx.textAlign = "left";
-    ctx.fillText(String(this.score).padStart(4, "0"), p.x + r.sx(0.03), p.y + r.sy(0.03));
+    ctx.fillText(
+      String(this.score).padStart(4, "0"),
+      p.x + r.sx(0.03),
+      p.y + r.sy(0.03)
+    );
 
     // Lives as hearts, top-right.
     ctx.textAlign = "right";
     ctx.font = `${Math.round(r.sx(0.04))}px system-ui`;
     let hearts = "";
-    for (let i = 0; i < START_LIVES; i++) hearts += i < this.lives ? "♥ " : "♡ ";
+    for (let i = 0; i < START_LIVES; i++)
+      hearts += i < this.lives ? "♥ " : "♡ ";
     ctx.fillStyle = "#ff6b7f";
     ctx.fillText(hearts.trim(), p.x + p.w - r.sx(0.03), p.y + r.sy(0.035));
 
@@ -641,7 +669,11 @@ export class Slice implements Game {
       ctx.textAlign = "left";
       ctx.fillStyle = "#ffd84d";
       ctx.font = `bold ${Math.round(r.sx(0.03))}px system-ui`;
-      ctx.fillText(`${this.comboCount}× combo`, p.x + r.sx(0.03), p.y + r.sy(0.1));
+      ctx.fillText(
+        `${this.comboCount}× combo`,
+        p.x + r.sx(0.03),
+        p.y + r.sy(0.1)
+      );
     }
     ctx.restore();
   }
@@ -657,24 +689,6 @@ export class Slice implements Game {
   }
 }
 
-/** Shortest distance from point (px,py) to the segment (ax,ay)–(bx,by). */
-function distPointToSegment(
-  px: number,
-  py: number,
-  ax: number,
-  ay: number,
-  bx: number,
-  by: number,
-): number {
-  const dx = bx - ax;
-  const dy = by - ay;
-  const lenSq = dx * dx + dy * dy;
-  if (lenSq === 0) return Math.hypot(px - ax, py - ay);
-  let t = ((px - ax) * dx + (py - ay) * dy) / lenSq;
-  t = t < 0 ? 0 : t > 1 ? 1 : t;
-  return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
-}
-
 /** "#rrggbb" → "r,g,b" for rgba() splatter fills. */
 function hexToRgb(hex: string): string {
   const m = /^#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(hex);
diff --git a/web/src/sdk/bridge.ts b/web/src/sdk/bridge.ts
index b15a99c..6ff5bae 100644
--- a/web/src/sdk/bridge.ts
+++ b/web/src/sdk/bridge.ts
@@ -123,7 +123,7 @@ export interface BridgeHostCallbacks {
 export class NativeBridge {
   constructor(
     private controller: BridgeController,
-    private callbacks: BridgeHostCallbacks,
+    private callbacks: BridgeHostCallbacks
   ) {
     this.install();
   }
diff --git a/web/src/sdk/calibration.ts b/web/src/sdk/calibration.ts
index 733258b..dcc66ca 100644
--- a/web/src/sdk/calibration.ts
+++ b/web/src/sdk/calibration.ts
@@ -30,7 +30,7 @@ export class Readiness {
 
   constructor(
     private room: Room,
-    private debug: boolean,
+    private debug: boolean
   ) {
     if (!debug) {
       room.on("calib", (c) => {
@@ -44,7 +44,8 @@ export class Readiness {
     const peer = this.debug ? true : this.room.peerConnected;
     const joints = body.hasRequiredJoints;
     const qualityNow =
-      body.health === "ok" && body.trackingQuality >= (this.debug ? 0.1 : QUALITY_MIN);
+      body.health === "ok" &&
+      body.trackingQuality >= (this.debug ? 0.1 : QUALITY_MIN);
 
     if (qualityNow && joints && peer) {
       if (this.goodSince < 0) this.goodSince = nowMs;
diff --git a/web/src/sdk/controller.ts b/web/src/sdk/controller.ts
index 948bfae..31588c8 100644
--- a/web/src/sdk/controller.ts
+++ b/web/src/sdk/controller.ts
@@ -137,7 +137,7 @@ export abstract class PoseControllerBase implements BodyController {
   // Per-optional-arm-joint absence counter. 0 = present this packet; once it
   // exceeds ARM_ABSENCE_GRACE the joint is cleared to undefined on `joints`.
   private armAbsent: Record<string, number> = Object.fromEntries(
-    ARM_JOINT_NAMES.map((n) => [n, ARM_ABSENCE_GRACE + 1]),
+    ARM_JOINT_NAMES.map((n) => [n, ARM_ABSENCE_GRACE + 1])
   );
 
   // Per-fingertip absence counter, same brief-dropout tolerance as the arm joints:
@@ -205,12 +205,12 @@ export abstract class PoseControllerBase implements BodyController {
     this.leftFingertip = this.smoothFingertip(
       "left",
       this.leftFingertip,
-      p.fingertips?.left,
+      p.fingertips?.left
     );
     this.rightFingertip = this.smoothFingertip(
       "right",
       this.rightFingertip,
-      p.fingertips?.right,
+      p.fingertips?.right
     );
 
     this.captureCalibration();
@@ -225,7 +225,7 @@ export abstract class PoseControllerBase implements BodyController {
   private smoothFingertip(
     which: "left" | "right",
     prev: [number, number] | undefined,
-    incoming: [number, number] | undefined,
+    incoming: [number, number] | undefined
   ): [number, number] | undefined {
     if (incoming) {
       this.fingertipAbsent[which] = 0;
@@ -280,7 +280,7 @@ export abstract class PoseControllerBase implements BodyController {
       // Decay quality as it goes staler.
       this.trackingQuality = Math.max(
         0,
-        this.rawQuality * (1 - (this.ageMs - STALE_MS) / 1000),
+        this.rawQuality * (1 - (this.ageMs - STALE_MS) / 1000)
       );
     } else if (this.rawQuality < 0.4 || !required) {
       this.health = "low_quality";
diff --git a/web/src/sdk/diagnostics.ts b/web/src/sdk/diagnostics.ts
index 481f968..dedd657 100644
--- a/web/src/sdk/diagnostics.ts
+++ b/web/src/sdk/diagnostics.ts
@@ -19,7 +19,7 @@ export class Diagnostics {
   constructor(
     parent: HTMLElement,
     private room: Room,
-    private live: boolean,
+    private live: boolean
   ) {
     this.el = document.createElement("div");
     Object.assign(this.el.style, {
diff --git a/web/src/sdk/game.ts b/web/src/sdk/game.ts
index 25882af..4c334af 100644
--- a/web/src/sdk/game.ts
+++ b/web/src/sdk/game.ts
@@ -76,7 +76,7 @@ export class CanvasRenderer implements Renderer {
 
   drawSkeleton(
     body: BodyController,
-    opts?: { color?: string; handColor?: string; alpha?: number },
+    opts?: { color?: string; handColor?: string; alpha?: number }
   ): void {
     drawSkeleton(this.surf, body, opts ?? {});
   }
diff --git a/web/src/sdk/index.ts b/web/src/sdk/index.ts
index 733a286..30aee0c 100644
--- a/web/src/sdk/index.ts
+++ b/web/src/sdk/index.ts
@@ -123,7 +123,10 @@ export interface SessionScreenRenderer {
   clear(): void;
   pairing(ctx: PairingCtx): void;
   mirror(): void;
-  readiness(state: import("./calibration").ReadinessState, debug: boolean): void;
+  readiness(
+    state: import("./calibration").ReadinessState,
+    debug: boolean
+  ): void;
   trackingLost(): void;
   reconnecting(): void;
   results(result: GameResult, onPlayAgain: () => void): void;
@@ -362,7 +365,10 @@ export class GameHost {
     this.recordOn = on;
   }
 
-  on<K extends keyof SessionEvents>(event: K, fn: SessionEvents[K]): () => void {
+  on<K extends keyof SessionEvents>(
+    event: K,
+    fn: SessionEvents[K]
+  ): () => void {
     this.listeners[event].add(fn);
     return () => this.listeners[event].delete(fn);
   }
@@ -415,7 +421,7 @@ export class GameHost {
     const live: BodyController =
       this.transport === "bridge" && this.bridgeController
         ? this.bridgeController
-        : this.webcamController ?? this.poseController;
+        : (this.webcamController ?? this.poseController);
     this.body = this.debugMode
       ? new KeyboardDebugController(this.canvasEl)
       : live;
@@ -629,7 +635,10 @@ export class GameHost {
     // emit gameOver/score so native can bracket its own screen recording.
     if (this.transport === "bridge") {
       if (this.lastResult) {
-        this.nativeBridge?.emit({ event: "score", value: this.lastResult.score });
+        this.nativeBridge?.emit({
+          event: "score",
+          value: this.lastResult.score,
+        });
       }
       this.nativeBridge?.emit({
         event: "gameOver",
diff --git a/web/src/sdk/keyboard-debug.ts b/web/src/sdk/keyboard-debug.ts
index f9e8e9b..371c53a 100644
--- a/web/src/sdk/keyboard-debug.ts
+++ b/web/src/sdk/keyboard-debug.ts
@@ -120,14 +120,18 @@ export class KeyboardDebugController implements BodyController {
 
   tick(nowMs: number): void {
     const dt =
-      this.lastTick < 0 ? 0.016 : Math.min(0.05, (nowMs - this.lastTick) / 1000);
+      this.lastTick < 0
+        ? 0.016
+        : Math.min(0.05, (nowMs - this.lastTick) / 1000);
     this.lastTick = nowMs;
 
     // Drive lean/squat toward key targets with a ramp for a natural feel.
     const leanTarget = clampSigned(this.leanKey);
-    this.leanAmount += (leanTarget - this.leanAmount) * Math.min(1, KEY_RAMP * dt);
+    this.leanAmount +=
+      (leanTarget - this.leanAmount) * Math.min(1, KEY_RAMP * dt);
     const squatTarget = this.squatKey ? 1 : 0;
-    this.squatAmount += (squatTarget - this.squatAmount) * Math.min(1, KEY_RAMP * dt);
+    this.squatAmount +=
+      (squatTarget - this.squatAmount) * Math.min(1, KEY_RAMP * dt);
 
     // Hands: grab key closes both toward 0 (fist), otherwise open toward 1 (palm).
     const openTarget = this.grabKey ? 0 : 1;
@@ -136,8 +140,14 @@ export class KeyboardDebugController implements BodyController {
     this.rightHandOpen += (openTarget - this.rightHandOpen) * openStep;
 
     // Hands mirror around the cursor; a little apart so both are usable.
-    const lhTarget: [number, number] = [clamp01(this.mouseX - 0.12), this.mouseY];
-    const rhTarget: [number, number] = [clamp01(this.mouseX + 0.12), this.mouseY];
+    const lhTarget: [number, number] = [
+      clamp01(this.mouseX - 0.12),
+      this.mouseY,
+    ];
+    const rhTarget: [number, number] = [
+      clamp01(this.mouseX + 0.12),
+      this.mouseY,
+    ];
     this.joints.leftHand = lerp(this.joints.leftHand, lhTarget, LERP);
     this.joints.rightHand = lerp(this.joints.rightHand, rhTarget, LERP);
 
@@ -145,11 +155,31 @@ export class KeyboardDebugController implements BodyController {
     const torsoX = 0.5 + this.leanAmount * 0.28;
     const torsoY = 0.5 + this.squatAmount * 0.1;
     this.joints.torso = lerp(this.joints.torso, [torsoX, torsoY], LERP);
-    this.joints.head = lerp(this.joints.head, [torsoX, 0.18 + this.squatAmount * 0.16], LERP);
-    this.joints.leftKnee = lerp(this.joints.leftKnee, [torsoX - 0.08, 0.72 + this.squatAmount * 0.05], LERP);
-    this.joints.rightKnee = lerp(this.joints.rightKnee, [torsoX + 0.08, 0.72 + this.squatAmount * 0.05], LERP);
-    this.joints.leftFoot = lerp(this.joints.leftFoot, [torsoX - 0.08, 0.95], LERP);
-    this.joints.rightFoot = lerp(this.joints.rightFoot, [torsoX + 0.08, 0.95], LERP);
+    this.joints.head = lerp(
+      this.joints.head,
+      [torsoX, 0.18 + this.squatAmount * 0.16],
+      LERP
+    );
+    this.joints.leftKnee = lerp(
+      this.joints.leftKnee,
+      [torsoX - 0.08, 0.72 + this.squatAmount * 0.05],
+      LERP
+    );
+    this.joints.rightKnee = lerp(
+      this.joints.rightKnee,
+      [torsoX + 0.08, 0.72 + this.squatAmount * 0.05],
+      LERP
+    );
+    this.joints.leftFoot = lerp(
+      this.joints.leftFoot,
+      [torsoX - 0.08, 0.95],
+      LERP
+    );
+    this.joints.rightFoot = lerp(
+      this.joints.rightFoot,
+      [torsoX + 0.08, 0.95],
+      LERP
+    );
 
     if (this.moved) {
       this.health = "ok";
@@ -158,7 +188,10 @@ export class KeyboardDebugController implements BodyController {
       this.trackingQuality = 1;
       // Precise-fingertip stand-in tracks the debug hands.
       this.leftFingertip = [this.joints.leftHand[0], this.joints.leftHand[1]];
-      this.rightFingertip = [this.joints.rightHand[0], this.joints.rightHand[1]];
+      this.rightFingertip = [
+        this.joints.rightHand[0],
+        this.joints.rightHand[1],
+      ];
     } else {
       this.health = "no_signal";
       this.hasRequiredJoints = false;
@@ -179,6 +212,10 @@ export class KeyboardDebugController implements BodyController {
   }
 }
 
-function lerp(a: [number, number], b: [number, number], t: number): [number, number] {
+function lerp(
+  a: [number, number],
+  b: [number, number],
+  t: number
+): [number, number] {
   return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t];
 }
diff --git a/web/src/sdk/recording.ts b/web/src/sdk/recording.ts
index 5869075..ed59d0d 100644
--- a/web/src/sdk/recording.ts
+++ b/web/src/sdk/recording.ts
@@ -146,7 +146,7 @@ export class CanvasRecorder {
       console.warn(
         `[motion] Recording as ${mime} — iOS cannot composite WebM. ` +
           `Use a browser with MP4/H.264 MediaRecorder support for on-device ` +
-          `picture-in-picture; otherwise the iOS device saves two separate clips.`,
+          `picture-in-picture; otherwise the iOS device saves two separate clips.`
       );
     }
 
@@ -236,7 +236,7 @@ export class CanvasRecorder {
     if (!this.room.peerConnected) {
       this.setPhase(
         "done",
-        `No iOS device connected — clip available as browser download (${mime}).`,
+        `No iOS device connected — clip available as browser download (${mime}).`
       );
       return;
     }
@@ -314,7 +314,7 @@ export class CanvasRecorder {
   private async transfer(
     blob: Blob,
     mime: string,
-    durationMs: number,
+    durationMs: number
   ): Promise<void> {
     this.setPhase("transferring");
 
@@ -381,7 +381,11 @@ function sleep(ms: number): Promise<void> {
 /** Wait for the socket send buffer to fall below the high-water mark. */
 async function drainBuffer(room: Room): Promise<void> {
   let guard = 0;
-  while (room.isOpen && room.bufferedAmount > BUFFER_HIGH_WATER && guard < 200) {
+  while (
+    room.isOpen &&
+    room.bufferedAmount > BUFFER_HIGH_WATER &&
+    guard < 200
+  ) {
     await sleep(16);
     guard++;
   }
diff --git a/web/src/sdk/room.ts b/web/src/sdk/room.ts
index edd56ea..14bdc31 100644
--- a/web/src/sdk/room.ts
+++ b/web/src/sdk/room.ts
@@ -40,11 +40,6 @@ export interface RoomEvents {
 
 type Listener<K extends keyof RoomEvents> = RoomEvents[K];
 
-/** Normalize a PartyKit host into a bare host:port PartySocket accepts. */
-function hostFrom(url: string): string {
-  return url.replace(/^wss?:\/\//, "").replace(/^https?:\/\//, "").replace(/\/$/, "");
-}
-
 export class Room {
   readonly code: string;
   private socket: PartySocket;
@@ -155,7 +150,7 @@ export class Room {
       | PingMessage
       | RecControlMessage
       | RecMetaMessage
-      | RecChunkMessage,
+      | RecChunkMessage
   ): void {
     if (this.socket.readyState === WebSocket.OPEN) {
       this.socket.send(JSON.stringify(m));
@@ -230,3 +225,11 @@ export class Room {
     this.socket.close();
   }
 }
+
+/** Normalize a PartyKit host into a bare host:port PartySocket accepts. */
+function hostFrom(url: string): string {
+  return url
+    .replace(/^wss?:\/\//, "")
+    .replace(/^https?:\/\//, "")
+    .replace(/\/$/, "");
+}
diff --git a/web/src/sdk/skeleton.ts b/web/src/sdk/skeleton.ts
index e8eef55..76abcb6 100644
--- a/web/src/sdk/skeleton.ts
+++ b/web/src/sdk/skeleton.ts
@@ -26,7 +26,7 @@ const ARM_SIDES: Side[] = [
 export function drawSkeleton(
   surf: CanvasSurface,
   body: BodyController,
-  opts: { color?: string; handColor?: string; alpha?: number } = {},
+  opts: { color?: string; handColor?: string; alpha?: number } = {}
 ): void {
   const { ctx } = surf;
   const j = body.joints;
@@ -55,25 +55,7 @@ export function drawSkeleton(
   // Arms. When the real shoulder+elbow joints are present, draw the bent chain
   // shoulder→elbow→hand; otherwise fall back to a straight torso→hand line.
   for (const { shoulder, elbow, hand } of ARM_SIDES) {
-    const sh = j[shoulder];
-    const el = j[elbow];
-    const hd = j[hand] as [number, number];
-    ctx.beginPath();
-    if (sh && el) {
-      const [sx, sy] = surf.toPx(sh[0], sh[1]);
-      const [ex, ey] = surf.toPx(el[0], el[1]);
-      const [hx, hy] = surf.toPx(hd[0], hd[1]);
-      ctx.moveTo(sx, sy);
-      ctx.lineTo(ex, ey);
-      ctx.lineTo(hx, hy);
-    } else {
-      const from = sh ?? j.torso;
-      const [fx, fy] = surf.toPx(from[0], from[1]);
-      const [hx, hy] = surf.toPx(hd[0], hd[1]);
-      ctx.moveTo(fx, fy);
-      ctx.lineTo(hx, hy);
-    }
-    ctx.stroke();
+    drawArm(ctx, surf, j, shoulder, elbow, hand);
   }
 
   // Head
@@ -98,3 +80,33 @@ export function drawSkeleton(
 
   ctx.restore();
 }
+
+/** Draw one arm as a shoulder→elbow→hand chain, or a straight torso→hand fallback. */
+function drawArm(
+  ctx: CanvasRenderingContext2D,
+  surf: CanvasSurface,
+  j: BodyController["joints"],
+  shoulder: keyof Joints,
+  elbow: keyof Joints,
+  hand: keyof Joints
+): void {
+  const sh = j[shoulder];
+  const el = j[elbow];
+  const hd = j[hand] as [number, number];
+  ctx.beginPath();
+  if (sh && el) {
+    const [sx, sy] = surf.toPx(sh[0], sh[1]);
+    const [ex, ey] = surf.toPx(el[0], el[1]);
+    const [hx, hy] = surf.toPx(hd[0], hd[1]);
+    ctx.moveTo(sx, sy);
+    ctx.lineTo(ex, ey);
+    ctx.lineTo(hx, hy);
+  } else {
+    const from = sh ?? j.torso;
+    const [fx, fy] = surf.toPx(from[0], from[1]);
+    const [hx, hy] = surf.toPx(hd[0], hd[1]);
+    ctx.moveTo(fx, fy);
+    ctx.lineTo(hx, hy);
+  }
+  ctx.stroke();
+}
diff --git a/web/src/sdk/types.ts b/web/src/sdk/types.ts
index 514959a..e296c3a 100644
--- a/web/src/sdk/types.ts
+++ b/web/src/sdk/types.ts
@@ -38,7 +38,7 @@ export interface Renderer {
   /** Draw the player's body skeleton (the shared avatar). */
   drawSkeleton(
     body: BodyController,
-    opts?: { color?: string; handColor?: string; alpha?: number },
+    opts?: { color?: string; handColor?: string; alpha?: number }
   ): void;
 }
 
diff --git a/web/src/sdk/webcam.ts b/web/src/sdk/webcam.ts
index 2b4f866..3ef32b9 100644
--- a/web/src/sdk/webcam.ts
+++ b/web/src/sdk/webcam.ts
@@ -80,7 +80,7 @@ class OneEuro {
   constructor(
     private minCutoff = 1.2,
     private beta = 1.0,
-    private dCutoff = 1.0,
+    private dCutoff = 1.0
   ) {}
   private alpha(dt: number, cutoff: number): number {
     const tau = 1 / (2 * Math.PI * cutoff);
@@ -117,7 +117,9 @@ function neutralJoints(): Joints {
 // Loose MediaPipe types — the module is imported at runtime from a URL.
 type MpLandmark = { x: number; y: number; z: number };
 type MpResult = { landmarks?: MpLandmark[][] };
-type MpHandLandmarker = { detectForVideo(video: HTMLVideoElement, ts: number): MpResult };
+type MpHandLandmarker = {
+  detectForVideo(video: HTMLVideoElement, ts: number): MpResult;
+};
 
 export class WebcamController implements BodyController {
   joints: Joints = neutralJoints();
@@ -152,7 +154,9 @@ export class WebcamController implements BodyController {
   };
 
   constructor() {
-    this.status = this.makeStatus("Starting camera… allow access when prompted.");
+    this.status = this.makeStatus(
+      "Starting camera… allow access when prompted."
+    );
     void this.init();
   }
 
@@ -221,8 +225,7 @@ export class WebcamController implements BodyController {
     } catch (err) {
       this.failed = true;
       const msg = err instanceof Error ? err.message : String(err);
-      this.status.textContent =
-        `Camera unavailable: ${msg}. Allow camera access (or pick a camera) and reload.`;
+      this.status.textContent = `Camera unavailable: ${msg}. Allow camera access (or pick a camera) and reload.`;
       console.error("[motion] webcam init failed:", err);
     }
   }
@@ -237,7 +240,10 @@ export class WebcamController implements BodyController {
         this.lastDetectAt = nowMs;
         this.lastVideoTime = this.video.currentTime;
         try {
-          this.applyResult(this.landmarker.detectForVideo(this.video, nowMs), nowMs);
+          this.applyResult(
+            this.landmarker.detectForVideo(this.video, nowMs),
+            nowMs
+          );
         } catch {
           /* a dropped detection frame is harmless — keep last-known */
         }
@@ -324,7 +330,7 @@ export class WebcamController implements BodyController {
   private applyHand(
     which: "left" | "right",
     d: { x: number; y: number; open: number; indexTip: MpLandmark | undefined },
-    nowMs: number,
+    nowMs: number
   ): void {
     const key = which === "left" ? "leftHand" : "rightHand";
     const f = this.filters[which];
@@ -333,17 +339,26 @@ export class WebcamController implements BodyController {
     // to the full screen so relaxed movement covers everything.
     const fx = f.x.filter(clamp01(d.x), t);
     const fy = f.y.filter(clamp01(d.y), t);
-    this.joints[key] = [remap(fx, CENTER_X, GAIN_X), remap(fy, CENTER_Y, GAIN_Y)];
+    this.joints[key] = [
+      remap(fx, CENTER_X, GAIN_X),
+      remap(fy, CENTER_Y, GAIN_Y),
+    ];
 
     if (which === "left") {
       this.leftHandOpen += (d.open - this.leftHandOpen) * OPEN_SMOOTH;
       this.leftFingertip = d.indexTip
-        ? [remap(1 - d.indexTip.x, CENTER_X, GAIN_X), remap(d.indexTip.y, CENTER_Y, GAIN_Y)]
+        ? [
+            remap(1 - d.indexTip.x, CENTER_X, GAIN_X),
+            remap(d.indexTip.y, CENTER_Y, GAIN_Y),
+          ]
         : undefined;
     } else {
       this.rightHandOpen += (d.open - this.rightHandOpen) * OPEN_SMOOTH;
       this.rightFingertip = d.indexTip
-        ? [remap(1 - d.indexTip.x, CENTER_X, GAIN_X), remap(d.indexTip.y, CENTER_Y, GAIN_Y)]
+        ? [
+            remap(1 - d.indexTip.x, CENTER_X, GAIN_X),
+            remap(d.indexTip.y, CENTER_Y, GAIN_Y),
+          ]
         : undefined;
     }
   }