refactor: replace pinch gesture with fist gesture

src/components/three/GrabbableObject.tsx

@@ -92,14 +92,14 @@ export function GrabbableObject({
   useFrame(() => {
     if (!rbRef.current) return;
 
-    const pinchingHand = handControlled
-      ? hands.find((hand) => hand.isPinch)
+    const fistHand = handControlled
+      ? hands.find((hand) => hand.isFist)
       : undefined;
 
-    if (!isHolding.current && !pinchingHand) return;
+    if (!isHolding.current && !fistHand) return;
 
-    if (pinchingHand) {
-      _handNdc.set((1 - pinchingHand.x) * 2 - 1, -pinchingHand.y * 2 + 1, 0.5);
+    if (fistHand) {
+      _handNdc.set((1 - fistHand.x) * 2 - 1, -fistHand.y * 2 + 1, 0.5);
       _handNdc.unproject(camera);
       _handDirection.subVectors(_handNdc, camera.position).normalize();
       _holdTarget

src/components/ui/HandTrackingOverlay.tsx

@@ -13,21 +13,23 @@ const STATUS_LABELS: Record<HandTrackingStatus, string> = {
 };
 
 export function HandTrackingOverlay(): React.JSX.Element | null {
-  const { hands, status, serverStatus, error } = useHandTrackingSnapshot();
+  const { hands, status, usageStatus, serverStatus, error } =
+    useHandTrackingSnapshot();
 
   if (status === "idle") {
     return null;
   }
 
-  const pinching = hands.some((hand) => hand.isPinch);
+  const fist = hands.some((hand) => hand.isFist);
 
   return (
     <aside className="hand-tracking-overlay" aria-label="Hand tracking status">
       <strong>Hand tracking</strong>
       <span>Status: {STATUS_LABELS[status]}</span>
+      <span>Usage: {usageStatus}</span>
       {serverStatus ? <span>Server: {serverStatus}</span> : null}
       <span>Hands: {hands.length}</span>
-      <span>Pinch: {pinching ? "yes" : "no"}</span>
+      <span>Fist: {fist ? "yes" : "no"}</span>
       {error ? (
         <span className="hand-tracking-overlay__error">{error}</span>
       ) : null}

src/components/ui/HandTrackingProvider.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
+import { useInteraction } from "@/hooks/useInteraction";
 import {
   HAND_TRACKING_IDLE_SNAPSHOT,
   HandTrackingContext,
@@ -13,7 +14,10 @@ export function HandTrackingProvider({
   children: ReactNode;
 }): React.JSX.Element {
   const sceneMode = useSceneMode();
-  const enabled = isDebugEnabled() && sceneMode === "physics";
+  const { focused, holding } = useInteraction();
+  const isInInteractionZone = focused !== null || holding;
+  const enabled =
+    isDebugEnabled() && sceneMode === "physics" && isInInteractionZone;
   const snapshot = useRemoteHandTracking({ enabled });
 
   return (

src/components/ui/HandTrackingVisualizer.tsx

@@ -37,7 +37,7 @@ export function HandTrackingVisualizer(): React.JSX.Element | null {
         const landmarks = hand.landmarks ?? [];
         if (landmarks.length === 0) return null;
 
-        const color = hand.isPinch ? "#facc15" : "#38bdf8";
+        const color = hand.isFist ? "#facc15" : "#38bdf8";
 
         return (
           <g key={`${hand.handedness}-${handIndex}`}>