Fix: bring back pop up for eye gaze

src/components/FocusPageLocal.jsx

@@ -109,6 +109,10 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
   const [calibration, setCalibration] = useState(null);
   const [l2csBoost, setL2csBoost] = useState(false);
   const [l2csBoostAvailable, setL2csBoostAvailable] = useState(false);
+  const [showEyeGazeModal, setShowEyeGazeModal] = useState(false);
+  const [eyeGazeDontShow, setEyeGazeDontShow] = useState(
+    () => localStorage.getItem('focusguard_eyegaze_noshowalert') === 'true'
+  );
 
   const localVideoRef = useRef(null);
   const displayCanvasRef = useRef(null);
@@ -337,9 +341,21 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
   const handleEyeGazeToggle = async () => {
     const next = !l2csBoost;
+    if (next && !eyeGazeDontShow) {
+      setShowEyeGazeModal(true);
+      return;
+    }
     await applyEyeGazeChange(next, false);
   };
 
+  const handleEyeGazeModalAction = async (withCalibration) => {
+    if (eyeGazeDontShow) {
+      localStorage.setItem('focusguard_eyegaze_noshowalert', 'true');
+    }
+    setShowEyeGazeModal(false);
+    await applyEyeGazeChange(true, withCalibration);
+  };
+
   const handleStart = async () => {
     try {
       setIsStarting(true);
@@ -682,9 +698,91 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     return null;
   };
 
+  const renderEyeGazeModal = () => {
+    if (!showEyeGazeModal) return null;
+    return (
+      <div className="focus-flow-overlay" style={{ zIndex: 2000 }}>
+        <div className="focus-flow-card">
+          <div className="focus-flow-header">
+            <div>
+              <div className="focus-flow-eyebrow">Eye Gaze Tracking</div>
+              <h2>Before you enable</h2>
+            </div>
+            <div className="focus-flow-icon">
+              <svg width="96" height="96" viewBox="0 0 96 96" aria-hidden="true">
+                <ellipse cx="48" cy="48" rx="38" ry="24" fill="none" stroke="#007BFF" strokeWidth="5" />
+                <circle cx="48" cy="48" r="13" fill="none" stroke="#007BFF" strokeWidth="5" />
+                <circle cx="48" cy="48" r="5" fill="#007BFF" />
+              </svg>
+            </div>
+          </div>
+
+          <p className="focus-flow-lead">
+            Eye gaze tracking runs an additional deep neural network (L2CS-Net) alongside your current model.
+            Please read the notes below before proceeding.
+          </p>
+
+          <div className="focus-flow-grid">
+            <article className="focus-flow-panel focus-flow-panel-warn">
+              <h3>Performance impact</h3>
+              <p>Enabling eye gaze tracking increases CPU usage and may reduce frame rate. If the system feels sluggish, consider disabling it.</p>
+            </article>
+            <article className="focus-flow-panel">
+              <h3>Calibration (recommended)</h3>
+              <p>For best accuracy, calibrate by looking at 9 screen positions one at a time, followed by 1 validation point. The whole process takes about 30 seconds.</p>
+            </article>
+          </div>
+
+          <div className="focus-flow-steps">
+            <div className="focus-flow-step">
+              <div className="focus-flow-step-number">1</div>
+              <div className="focus-flow-step-copy">
+                <h3>Click "Start Calibration"</h3>
+                <p>A dot will appear on screen. Look directly at it and keep your gaze steady. It will cycle through 9 positions then show a final validation dot.</p>
+              </div>
+            </div>
+            <div className="focus-flow-step">
+              <div className="focus-flow-step-number">2</div>
+              <div className="focus-flow-step-copy">
+                <h3>Or skip for now</h3>
+                <p>Click "Skip" to enable eye gaze tracking without calibrating. You can recalibrate at any time using the "Recalibrate" button during a session.</p>
+              </div>
+            </div>
+          </div>
+
+          <label className="eye-gaze-modal-checkbox">
+            <input
+              type="checkbox"
+              checked={eyeGazeDontShow}
+              onChange={(e) => setEyeGazeDontShow(e.target.checked)}
+            />
+            Don't show this again
+          </label>
+
+          <div className="focus-flow-footer">
+            <button
+              type="button"
+              className="focus-flow-secondary"
+              onClick={() => handleEyeGazeModalAction(false)}
+            >
+              Skip
+            </button>
+            <button
+              className="focus-flow-button"
+              onClick={() => handleEyeGazeModalAction(true)}
+            >
+              Start Calibration
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
   return (
     <main id="page-b" className="page" style={pageStyle}>
       {renderIntroCard()}
+      {renderEyeGazeModal()}
 
       <section id="display-area" className="focus-display-shell">
         <video