From ce7cf3a042ec733fe7be555302846da70092866a Mon Sep 17 00:00:00 2001
From: name <email>
Date: Wed, 15 Apr 2026 17:39:39 +0000
Subject: [PATCH] Color-code arms vs legs in 3D debug views

Arms: cyan (L) / blue (R), Legs: orange (L) / yellow (R),
Head: gray, Torso: dim gray.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Pose3DView.tsx | 39 ++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/components/Pose3DView.tsx b/src/components/Pose3DView.tsx
index fb0a473..20db545 100644
--- a/src/components/Pose3DView.tsx
+++ b/src/components/Pose3DView.tsx
@@ -19,19 +19,42 @@ const VIEWS: View[] = [
   { title: 'TOP (X\u00b7Z)', getX: (l) => l.x, getY: (l) => l.z },
 ]
 
-const LEFT_INDICES = new Set([1, 2, 3, 7, 8, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31])
-const RIGHT_INDICES = new Set([4, 5, 6, 9, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32])
+const LEFT_ARM = new Set([11, 13, 15, 17, 19, 21])
+const RIGHT_ARM = new Set([12, 14, 16, 18, 20, 22])
+const LEFT_LEG = new Set([23, 25, 27, 29, 31])
+const RIGHT_LEG = new Set([24, 26, 28, 30, 32])
+const HEAD = new Set([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
+
+type BodyPart = 'left-arm' | 'right-arm' | 'left-leg' | 'right-leg' | 'head' | 'torso'
+
+const PART_COLORS: Record<BodyPart, { solid: string; faint: string }> = {
+  'left-arm':  { solid: '#00ffcc', faint: 'rgba(0, 255, 204, 0.5)' },
+  'right-arm': { solid: '#4488ff', faint: 'rgba(68, 136, 255, 0.5)' },
+  'left-leg':  { solid: '#ff8800', faint: 'rgba(255, 136, 0, 0.5)' },
+  'right-leg': { solid: '#ffcc00', faint: 'rgba(255, 204, 0, 0.5)' },
+  'head':      { solid: '#aaaaaa', faint: 'rgba(170, 170, 170, 0.4)' },
+  'torso':     { solid: '#888888', faint: 'rgba(136, 136, 136, 0.3)' },
+}
+
+function bodyPart(i: number): BodyPart {
+  if (LEFT_ARM.has(i)) return 'left-arm'
+  if (RIGHT_ARM.has(i)) return 'right-arm'
+  if (LEFT_LEG.has(i)) return 'left-leg'
+  if (RIGHT_LEG.has(i)) return 'right-leg'
+  if (HEAD.has(i)) return 'head'
+  return 'torso'
+}
 
 function connectionColor(a: number, b: number): string {
-  if (LEFT_INDICES.has(a) && LEFT_INDICES.has(b)) return 'rgba(0, 255, 204, 0.5)'
-  if (RIGHT_INDICES.has(a) && RIGHT_INDICES.has(b)) return 'rgba(255, 68, 255, 0.5)'
-  return 'rgba(255, 255, 255, 0.3)'
+  const pa = bodyPart(a), pb = bodyPart(b)
+  if (pa === pb) return PART_COLORS[pa].faint
+  // mixed connections (e.g. shoulder-hip) — use the more colorful end
+  if (pa === 'torso') return PART_COLORS[pb].faint
+  return PART_COLORS[pa].faint
 }
 
 function landmarkColor(i: number): string {
-  if (LEFT_INDICES.has(i)) return '#00ffcc'
-  if (RIGHT_INDICES.has(i)) return '#ff44ff'
-  return '#ffffff'
+  return PART_COLORS[bodyPart(i)].solid
 }
 
 function drawView(