Initial commit: add .gitignore and README

frontend/src/components/HeadRing.tsx

@@ -0,0 +1,30 @@
+interface HeadRingProps {
+  headIds: string[]
+  activeHeads: string[]
+}
+
+export function HeadRing({ headIds, activeHeads }: HeadRingProps) {
+  const n = headIds.length
+  const radius = 80
+
+  return (
+    <div className="head-ring">
+      <svg viewBox="-120 -120 240 240" className="head-ring-svg">
+        {headIds.map((id, i) => {
+          const angle = (2 * Math.PI * i) / n - Math.PI / 2
+          const x = radius * Math.cos(angle)
+          const y = radius * Math.sin(angle)
+          const isActive = activeHeads.includes(id)
+          return (
+            <g key={id} transform={`translate(${x}, ${y})`}>
+              <circle r="12" className={`head-glyph ${isActive ? "active" : ""}`} data-head={id} />
+              <text y="4" textAnchor="middle" fontSize="8" fill="currentColor">
+                {id.slice(0, 2)}
+              </text>
+            </g>
+          )
+        })}
+      </svg>
+    </div>
+  )
+}