Fix FocusPageLocal.jsx syntax errors from merge

- Add missing closing brace on onSessionEnd callback
- Remove duplicate timeline/controls/frame-rate sections

src/components/FocusPageLocal.jsx

@@ -37,122 +37,7 @@ function CameraIcon() {
   );
 }
 
-function GazeMiniMap({ gazeData }) {
-  const canvasRef = useRef(null);
-  const screenAspect = typeof window !== 'undefined'
-    ? window.screen.width / window.screen.height
-    : 16 / 9;
-
-  const MAP_H = 100;
-  const MAP_W = Math.round(MAP_H * screenAspect);
-
-  useEffect(() => {
-    const cvs = canvasRef.current;
-    if (!cvs) return;
-    const ctx = cvs.getContext('2d');
-    const w = cvs.width;
-    const h = cvs.height;
-
-    ctx.clearRect(0, 0, w, h);
-
-    // Screen background
-    ctx.fillStyle = 'rgba(20, 20, 30, 0.85)';
-    ctx.fillRect(0, 0, w, h);
-
-    // Screen border
-    ctx.strokeStyle = 'rgba(255,255,255,0.25)';
-    ctx.lineWidth = 1;
-    ctx.strokeRect(0.5, 0.5, w - 1, h - 1);
-
-    // Grid lines
-    ctx.strokeStyle = 'rgba(255,255,255,0.07)';
-    ctx.lineWidth = 0.5;
-    for (let i = 1; i < 4; i++) {
-      ctx.beginPath();
-      ctx.moveTo((w * i) / 4, 0);
-      ctx.lineTo((w * i) / 4, h);
-      ctx.stroke();
-    }
-    for (let i = 1; i < 3; i++) {
-      ctx.beginPath();
-      ctx.moveTo(0, (h * i) / 3);
-      ctx.lineTo(w, (h * i) / 3);
-      ctx.stroke();
-    }
-
-    // Center crosshair
-    const cx = w / 2;
-    const cy = h / 2;
-    ctx.strokeStyle = 'rgba(255,255,255,0.15)';
-    ctx.lineWidth = 1;
-    ctx.beginPath();
-    ctx.moveTo(cx - 6, cy);
-    ctx.lineTo(cx + 6, cy);
-    ctx.moveTo(cx, cy - 6);
-    ctx.lineTo(cx, cy + 6);
-    ctx.stroke();
-
-    if (!gazeData || gazeData.gaze_x == null || gazeData.gaze_y == null) {
-      // No data label
-      ctx.fillStyle = 'rgba(255,255,255,0.3)';
-      ctx.font = '10px Arial';
-      ctx.textAlign = 'center';
-      ctx.fillText('No gaze data', cx, cy + 3);
-      ctx.textAlign = 'left';
-      return;
-    }
-
-    const gx = gazeData.gaze_x;
-    const gy = gazeData.gaze_y;
-    const onScreen = gazeData.on_screen;
-
-    // Draw gaze dot
-    const dotX = gx * w;
-    const dotY = gy * h;
-
-    // Trail / glow
-    const gradient = ctx.createRadialGradient(dotX, dotY, 0, dotX, dotY, 14);
-    gradient.addColorStop(0, onScreen ? 'rgba(74, 222, 128, 0.5)' : 'rgba(248, 113, 113, 0.5)');
-    gradient.addColorStop(1, 'rgba(0,0,0,0)');
-    ctx.fillStyle = gradient;
-    ctx.fillRect(dotX - 14, dotY - 14, 28, 28);
-
-    // Dot
-    ctx.beginPath();
-    ctx.arc(dotX, dotY, 5, 0, 2 * Math.PI);
-    ctx.fillStyle = onScreen ? '#4ade80' : '#f87171';
-    ctx.fill();
-    ctx.strokeStyle = '#fff';
-    ctx.lineWidth = 1.5;
-    ctx.stroke();
-
-    // Label
-    ctx.fillStyle = 'rgba(255,255,255,0.5)';
-    ctx.font = '9px Arial';
-    ctx.textAlign = 'right';
-    ctx.fillText(
-      `${(gx * 100).toFixed(0)}%, ${(gy * 100).toFixed(0)}%`,
-      w - 4,
-      h - 4
-    );
-    ctx.textAlign = 'left';
-  }, [gazeData]);
-
-  return (
-    <canvas
-      ref={canvasRef}
-      width={MAP_W}
-      height={MAP_H}
-      style={{
-        borderRadius: '8px',
-        border: '1px solid rgba(255,255,255,0.1)',
-        display: 'block',
-      }}
-    />
-  );
-}
-
-function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive }) {
+function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActive, role }) {
   const [currentFrame, setCurrentFrame] = useState(15);
   const [timelineEvents, setTimelineEvents] = useState([]);
   const [stats, setStats] = useState(null);
@@ -246,19 +131,10 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
       setFocusState(FOCUS_STATES.pending);
       setCameraReady(false);
       if (originalOnSessionEnd) originalOnSessionEnd(summary);
-    videoManager.callbacks.onCalibrationUpdate = (cal) => {
-      setCalibration(cal && cal.active ? { ...cal } : null);
     };
 
-    videoManager.callbacks.onCalibrationUpdate = (state) => {
-      setCalibrationState(state && state.active ? state : null);
-      if (state && state.done && state.success) {
-        setIsCalibrated(true);
-      }
-    };
-
-    videoManager.callbacks.onGazeData = (data) => {
-      setGazeData(data);
+    videoManager.callbacks.onCalibrationUpdate = (cal) => {
+      setCalibration(cal && cal.active ? { ...cal } : null);
     };
 
     const statsInterval = setInterval(() => {
@@ -276,7 +152,7 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     };
   }, [videoManager]);
 
-  // Fetch available models and settings (including L2CS boost) on mount
+  // Fetch available models on mount
   useEffect(() => {
     fetch('/api/models')
       .then((res) => res.json())
@@ -287,14 +163,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
         if (data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
       })
       .catch((err) => console.error('Failed to fetch models:', err));
-
-    fetch('/api/settings')
-      .then((res) => res.json())
-      .then((data) => {
-        if (data && data.l2cs_boost !== undefined) setL2csBoost(data.l2cs_boost);
-        if (data && data.l2cs_boost_available !== undefined) setL2csBoostAvailable(data.l2cs_boost_available);
-      })
-      .catch((err) => console.error('Failed to fetch settings:', err));
   }, []);
 
   useEffect(() => {
@@ -356,53 +224,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
     }
   };
 
-  const handleL2csBoostToggle = async () => {
-    if (!l2csBoostAvailable) return;
-    const next = !l2csBoost;
-    try {
-      const res = await fetch('/api/settings', {
-        method: 'PUT',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ l2cs_boost: next })
-      });
-      if (res.ok) {
-        setL2csBoost(next);
-      } else {
-        const err = await res.json().catch(() => ({}));
-        alert(err.detail || 'Could not enable L2CS boost');
-      }
-    } catch (err) {
-      console.error('Failed to toggle L2CS boost:', err);
-    }
-  };
-
-  const handleEyeGazeToggle = async () => {
-    const next = !eyeGazeEnabled;
-    if (next) {
-      // Turning ON: save current model, switch to l2cs
-      setPrevModel(currentModel);
-      await handleModelChange('l2cs');
-      setEyeGazeEnabled(true);
-    } else {
-      // Turning OFF: switch back to previous model
-      const restoreTo = prevModel === 'l2cs' ? 'mlp' : prevModel;
-      await handleModelChange(restoreTo);
-      setEyeGazeEnabled(false);
-      setIsCalibrated(false);
-      setGazeData(null);
-    }
-  };
-
-  const [calibrationSetupOpen, setCalibrationSetupOpen] = useState(false);
-
-  const handleCalibrate = () => {
-    setCalibrationSetupOpen(true);
-  };
-
-  const handleCalibrationServerStart = () => {
-    if (videoManager) videoManager.startCalibration();
-  };
-
   const handleEnableCamera = async () => {
     if (!videoManager) return;
 
@@ -788,14 +609,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
 
   return (
     <main id="page-b" className="page" style={pageStyle}>
-      <CalibrationOverlay
-        calibration={calibrationState}
-        videoManager={videoManager}
-        localVideoRef={localVideoRef}
-        onRequestStart={handleCalibrationServerStart}
-        setupOpen={calibrationSetupOpen}
-        setSetupOpen={setCalibrationSetupOpen}
-      />
       {renderIntroCard()}
 
       <section id="display-area" className="focus-display-shell">
@@ -878,6 +691,22 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           </div>
         )}
 
+        {role === 'admin' && stats && stats.isStreaming ? (
+          <div className="focus-debug-panel">
+            <div>Session: {stats.sessionId}</div>
+            <div>Sent: {stats.framesSent}</div>
+            <div>Processed: {stats.framesProcessed}</div>
+            <div>Latency: {stats.avgLatency.toFixed(0)}ms</div>
+            <div>Status: {stats.currentStatus ? 'Focused' : 'Not Focused'}</div>
+            <div>Confidence: {(stats.lastConfidence * 100).toFixed(1)}%</div>
+            {systemStats && systemStats.cpu_percent != null && (
+              <div style={{ marginTop: '6px', borderTop: '1px solid #444', paddingTop: '4px' }}>
+                <div>CPU: {systemStats.cpu_percent}%</div>
+                <div>RAM: {systemStats.memory_percent}% ({systemStats.memory_used_mb}/{systemStats.memory_total_mb} MB)</div>
+              </div>
+            )}
+          </div>
+        ) : null}
       </section>
 
       {/* Server CPU / Memory (always visible) */}
@@ -1003,42 +832,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
               {isStarting ? 'Starting...' : 'Start'}
             </button>
 
-            <button
-              type="button"
-              className="action-btn"
-              style={{
-                backgroundColor: eyeGazeEnabled ? '#8b5cf6' : '#475569',
-                position: 'relative',
-              }}
-              onClick={handleEyeGazeToggle}
-              title={eyeGazeEnabled
-                ? (isCalibrated ? 'Eye Gaze ON (Calibrated)' : 'Eye Gaze ON (Uncalibrated)')
-                : 'Enable L2CS eye gaze tracking'}
-            >
-              Eye Gaze {eyeGazeEnabled ? 'ON' : 'OFF'}
-              {eyeGazeEnabled && (
-                <span style={{
-                  position: 'absolute', top: '-4px', right: '-4px',
-                  width: '10px', height: '10px', borderRadius: '50%',
-                  backgroundColor: isCalibrated ? '#4ade80' : '#fbbf24',
-                  border: '2px solid #1e1e2e',
-                }} title={isCalibrated ? 'Calibrated' : 'Not calibrated'} />
-              )}
-            </button>
-
-            {eyeGazeEnabled ? (
-              <button
-                type="button"
-                className="action-btn"
-                style={{ backgroundColor: isCalibrated ? '#22c55e' : '#8b5cf6' }}
-                onClick={handleCalibrate}
-                disabled={!videoManager?.isStreaming}
-                title="9-point gaze calibration for accurate tracking"
-              >
-                {isCalibrated ? 'Re-Calibrate' : 'Calibrate'}
-              </button>
-            ) : null}
-
             <button id="btn-floating" className="action-btn yellow" onClick={handlePiP}>
               Floating Window
             </button>
@@ -1051,32 +844,12 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
               Preview Result
             </button>
 
+
             <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
               Stop
             </button>
           </section>
 
-          {eyeGazeEnabled && videoManager?.isStreaming ? (
-            <section style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '14px',
-              padding: '8px 14px',
-              background: 'rgba(0,0,0,0.3)',
-              borderRadius: '10px',
-              margin: '6px auto',
-              maxWidth: '400px',
-            }}>
-              <div style={{ textAlign: 'center' }}>
-                <div style={{ fontSize: '11px', color: '#888', marginBottom: '4px', letterSpacing: '0.5px' }}>
-                  GAZE MAP {isCalibrated ? '(calibrated)' : '(raw)'}
-                </div>
-                <GazeMiniMap gazeData={gazeData} />
-              </div>
-            </section>
-          ) : null}
-
           {cameraError ? (
             <div className="focus-inline-error focus-inline-error-standalone">{cameraError}</div>
           ) : null}
@@ -1102,55 +875,6 @@ function FocusPageLocal({ videoManager, sessionResult, setSessionResult, isActiv
           </section>
         </>
       ) : null}
-          ))}
-        </div>
-        <div id="timeline-line"></div>
-      </section>
-
-      {/* 4. Control Buttons */}
-      <section id="control-panel">
-        <button id="btn-cam-start" className="action-btn green" onClick={handleStart}>
-          Start
-        </button>
-
-        <button id="btn-floating" className="action-btn yellow" onClick={handleFloatingWindow}>
-          Floating Window
-        </button>
-
-        <button
-          id="btn-preview"
-          className="action-btn"
-          style={{ backgroundColor: '#6c5ce7' }}
-          onClick={handlePreview}
-        >
-          Preview Result
-        </button>
-
-        <button id="btn-cam-stop" className="action-btn red" onClick={handleStop}>
-          Stop
-        </button>
-      </section>
-
-      {/* 5. Frame Control */}
-      <section id="frame-control">
-        <label htmlFor="frame-slider">Frame Rate (FPS)</label>
-        <input
-          type="range"
-          id="frame-slider"
-          min="10"
-          max="30"
-          value={currentFrame}
-          onChange={(e) => handleFrameChange(e.target.value)}
-        />
-        <input
-          type="number"
-          id="frame-input"
-          min="10"
-          max="30"
-          value={currentFrame}
-          onChange={(e) => handleFrameChange(e.target.value)}
-        />
-      </section>
 
       {/* Calibration overlay (fixed fullscreen, must be outside overflow:hidden containers) */}
       <CalibrationOverlay calibration={calibration} videoManager={videoManager} />