Fix video-capture timer, preparation camera, and clap detection

Video capture:
- Wall-clock timer using Date.now() instead of state-based decrement
  (immune to React batching/stacking causing double-speed)
- Ref guard prevents double-invocation of startAssessment
- Button disabled after first click

Preparation (Action Challenge):
- Camera feed now visible during timeout phase (was unmounted, causing
  lost stream on retry)
- Stream re-attach via 300ms interval check (replaces every-render
  useEffect that caused flicker)
- Frame dot counter: 8 dots matching REQUIRED_CONSECUTIVE = 8
- Status text threshold raised to 5 for "Almost there"

Action detection:
- Clap threshold doubled (0.2 → 0.4 * scale) — YOLO wrist keypoints
  are imprecise when hands overlap during clap

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Partha-dev01

app/hooks/useActionCamera.ts

@@ -240,16 +240,20 @@ export function useActionCamera(): UseActionCameraReturn {
     detectingRef.current = false;
   }, []);
 
-  // Defensive: re-attach stream when video element appears in DOM.
-  // Only runs when isActive changes (camera just started).
+  // Defensive: periodically check if the video element lost its stream
+  // (happens when React unmounts/remounts the <video> during phase changes).
+  // Uses a low-frequency interval instead of running every render to avoid flicker.
   useEffect(() => {
     if (!isActive) return;
-    const video = videoRef.current;
-    const stream = streamRef.current;
-    if (video && stream && !video.srcObject) {
-      video.srcObject = stream;
-      video.play().catch(() => {});
-    }
+    const check = setInterval(() => {
+      const video = videoRef.current;
+      const stream = streamRef.current;
+      if (video && stream && !video.srcObject) {
+        video.srcObject = stream;
+        video.play().catch(() => {});
+      }
+    }, 300);
+    return () => clearInterval(check);
   }, [isActive]);
 
   // Cleanup on unmount

app/intake/preparation/page.tsx

@@ -304,8 +304,8 @@ export default function PreparationPage() {
               {meta.label}
             </h2>
 
-            {/* Camera feed — visible during countdown, detecting, and detected */}
-            {(actionPhase === "countdown" || actionPhase === "detecting" || actionPhase === "detected") && (
+            {/* Camera feed — visible during all active action phases (including timeout so stream stays attached) */}
+            {(actionPhase === "countdown" || actionPhase === "detecting" || actionPhase === "detected" || actionPhase === "timeout") && (
               <>
                 {cameraActive && !cameraError ? (
                   <div style={{
@@ -410,12 +410,12 @@ export default function PreparationPage() {
                   </div>
                 )}
 
-                {/* 5-dot frame counter */}
+                {/* 8-dot frame counter (matches REQUIRED_CONSECUTIVE = 8) */}
                 {actionPhase === "detecting" && (
-                  <div style={{ display: "flex", gap: 6, justifyContent: "center", marginBottom: 8 }}>
-                    {Array.from({ length: 5 }, (_, i) => (
+                  <div style={{ display: "flex", gap: 4, justifyContent: "center", marginBottom: 8 }}>
+                    {Array.from({ length: 8 }, (_, i) => (
                       <div key={i} style={{
-                        width: 20, height: 20, borderRadius: "50%",
+                        width: 16, height: 16, borderRadius: "50%",
                         background: i < consecutiveHits ? "var(--sage-500)" : "var(--bg-elevated)",
                         border: "2px solid var(--sage-300)",
                         transition: "background 0.2s",
@@ -434,7 +434,7 @@ export default function PreparationPage() {
                       : "var(--text-muted)",
                   }}>
                     {!hasKeypoints ? "Step into view so we can see you!"
-                      : consecutiveHits >= 3 ? "Almost there! Keep holding..."
+                      : consecutiveHits >= 5 ? "Almost there! Keep holding..."
                       : (actionResult?.confidence || 0) > 0.3 ? "Getting closer!"
                       : `Looking for: ${meta.label}...`}
                   </p>

app/intake/video-capture/page.tsx

@@ -143,31 +143,37 @@ export default function VideoCapturePage() {
     };
   }, []);
 
+  const startingRef = useRef(false);
+
   const startAssessment = useCallback(async () => {
+    // Guard: prevent double-invocation (async race, double-click, etc.)
+    if (startingRef.current) return;
+    startingRef.current = true;
+
+    // Clear any existing intervals first
+    if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
+    if (biomarkerTimerRef.current) { clearInterval(biomarkerTimerRef.current); biomarkerTimerRef.current = null; }
+
     await startCamera();
     setStarted(true);
     setTimeLeft(ASSESSMENT_SECONDS);
     setSamplesCollected(0);
 
-    // Clear any existing intervals to prevent double-speed
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (biomarkerTimerRef.current) clearInterval(biomarkerTimerRef.current);
-
-    // Countdown timer
+    // Countdown timer — use a dedicated counter ref to avoid any React batching issues
+    const endTime = Date.now() + ASSESSMENT_SECONDS * 1000;
     timerRef.current = setInterval(() => {
-      setTimeLeft((t) => {
-        if (t <= 1) {
-          if (timerRef.current) clearInterval(timerRef.current);
-          if (biomarkerTimerRef.current) clearInterval(biomarkerTimerRef.current);
-          setTaskComplete(true);
-          if (streamRef.current) {
-            streamRef.current.getTracks().forEach((tr) => tr.stop());
-          }
-          return 0;
+      const remaining = Math.max(0, Math.ceil((endTime - Date.now()) / 1000));
+      setTimeLeft(remaining);
+      if (remaining <= 0) {
+        if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
+        if (biomarkerTimerRef.current) { clearInterval(biomarkerTimerRef.current); biomarkerTimerRef.current = null; }
+        setTaskComplete(true);
+        startingRef.current = false;
+        if (streamRef.current) {
+          streamRef.current.getTracks().forEach((tr) => tr.stop());
         }
-        return t - 1;
-      });
-    }, 1000);
+      }
+    }, 500); // Check every 500ms for accurate wall-clock time
 
     // Periodic biomarker snapshots
     biomarkerTimerRef.current = setInterval(() => {
@@ -176,8 +182,9 @@ export default function VideoCapturePage() {
   }, [startCamera, saveBiomarkerSnapshot]);
 
   const stopEarly = useCallback(() => {
-    if (timerRef.current) clearInterval(timerRef.current);
-    if (biomarkerTimerRef.current) clearInterval(biomarkerTimerRef.current);
+    if (timerRef.current) { clearInterval(timerRef.current); timerRef.current = null; }
+    if (biomarkerTimerRef.current) { clearInterval(biomarkerTimerRef.current); biomarkerTimerRef.current = null; }
+    startingRef.current = false;
     // Save final snapshot
     saveBiomarkerSnapshot();
     setTaskComplete(true);
@@ -244,7 +251,7 @@ export default function VideoCapturePage() {
               <Link href="/intake/motor" className="btn btn-outline" style={{ minWidth: 100 }}>
                 ← Back
               </Link>
-              <button className="btn btn-primary btn-full" onClick={startAssessment}>
+              <button className="btn btn-primary btn-full" onClick={startAssessment} disabled={started}>
                 📹 Start Video Analysis
               </button>
             </div>
@@ -338,6 +345,7 @@ export default function VideoCapturePage() {
                     setStarted(false);
                     setTimeLeft(ASSESSMENT_SECONDS);
                     setCamReady(false);
+                    startingRef.current = false;
                   }} style={{ minHeight: 44, padding: "8px 24px" }}>
                     Try Again
                   </button>

app/lib/actions/actionDetector.ts

@@ -128,7 +128,7 @@ function detectClap(
   if (!confOk(conf, L_WRIST, R_WRIST))
     return { hit: false, proximity: 0 };
   const d = dist(kp(kps, L_WRIST), kp(kps, R_WRIST));
-  const threshold = 0.2 * scale;
+  const threshold = 0.4 * scale; // Relaxed: hands near each other (YOLO wrist keypoints are imprecise during clap)
   return { hit: d < threshold, proximity: Math.max(0, 1 - d / threshold) };
 }