Add working camera

src/App.tsx

@@ -18,7 +18,7 @@ import Training from "@/pages/Training";
 import ReplayDataset from "@/pages/ReplayDataset";
 import EditDataset from "@/pages/EditDataset";
 import Upload from "@/pages/Upload";
-import PhoneCamera from "@/pages/PhoneCamera";
+
 import NotFound from "@/pages/NotFound";
 import "./App.css";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
@@ -44,7 +44,7 @@ function App() {
                     <Route path="/calibration" element={<Calibration />} />
                     <Route path="/edit-dataset" element={<EditDataset />} />
                     <Route path="/replay-dataset" element={<ReplayDataset />} />
-                    <Route path="/phone-camera" element={<PhoneCamera />} />
+
                     <Route path="*" element={<NotFound />} />
                   </Routes>
                   <Toaster />

src/components/landing/ActionList.tsx

@@ -43,7 +43,9 @@ const ActionList: React.FC<ActionListProps> = ({ actions, robotModel }) => {
               <div className="flex items-center gap-2">
                 <div>
                   <div className="flex items-center gap-2">
-                    <h3 className="font-semibold text-lg">{action.title}</h3>
+                    <h3 className="font-semibold text-lg text-left">
+                      {action.title}
+                    </h3>
                     {action.isWorkInProgress && (
                       <div className="flex items-center gap-1">
                         <Tooltip>

src/components/landing/LandingHeader.tsx

@@ -1,49 +1,16 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { Info, Globe, Wifi, WifiOff } from "lucide-react";
-import { useApi } from "@/contexts/ApiContext";
+import { Info } from "lucide-react";
 
 interface LandingHeaderProps {
   onShowInstructions: () => void;
-  onShowNgrokConfig: () => void;
 }
 
 const LandingHeader: React.FC<LandingHeaderProps> = ({
   onShowInstructions,
-  onShowNgrokConfig,
 }) => {
-  const { isNgrokEnabled } = useApi();
-
   return (
     <div className="relative w-full">
-      {/* Ngrok button in top right */}
-      <div className="absolute top-0 right-0 flex gap-2">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onShowNgrokConfig}
-          className={`transition-all duration-200 ${
-            isNgrokEnabled
-              ? "bg-green-900/30 border border-green-700 text-green-400 hover:bg-green-900/50"
-              : "text-gray-400 hover:text-white hover:bg-gray-800"
-          }`}
-          title={
-            isNgrokEnabled
-              ? "Ngrok enabled - Click to configure"
-              : "Configure Ngrok for external access"
-          }
-        >
-          {isNgrokEnabled ? (
-            <Wifi className="h-4 w-4 mr-2" />
-          ) : (
-            <Globe className="h-4 w-4 mr-2" />
-          )}
-          <span className="hidden sm:inline">
-            {isNgrokEnabled ? "Ngrok" : "Configure Ngrok"}
-          </span>
-        </Button>
-      </div>
-
       {/* Main header content */}
       <div className="text-center space-y-4 w-full pt-8">
         <img

src/components/landing/NgrokConfigModal.tsx

@@ -1,212 +0,0 @@
-import React, { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Globe, Wifi, WifiOff, ExternalLink } from "lucide-react";
-import { useApi } from "@/contexts/ApiContext";
-import { useToast } from "@/hooks/use-toast";
-
-interface NgrokConfigModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-}
-
-const NgrokConfigModal: React.FC<NgrokConfigModalProps> = ({
-  open,
-  onOpenChange,
-}) => {
-  const {
-    ngrokUrl,
-    isNgrokEnabled,
-    setNgrokUrl,
-    resetToLocalhost,
-    fetchWithHeaders,
-  } = useApi();
-  const [inputUrl, setInputUrl] = useState(ngrokUrl);
-  const [isTestingConnection, setIsTestingConnection] = useState(false);
-  const { toast } = useToast();
-
-  const handleSave = async () => {
-    if (!inputUrl.trim()) {
-      resetToLocalhost();
-      toast({
-        title: "Ngrok Disabled",
-        description: "Switched back to localhost mode.",
-      });
-      onOpenChange(false);
-      return;
-    }
-
-    setIsTestingConnection(true);
-
-    try {
-      // Clean the URL
-      let cleanUrl = inputUrl.trim();
-      if (!cleanUrl.startsWith("http")) {
-        cleanUrl = `https://${cleanUrl}`;
-      }
-      cleanUrl = cleanUrl.replace(/\/$/, "");
-
-      // Test the connection
-      const testResponse = await fetchWithHeaders(`${cleanUrl}/health`, {
-        method: "GET",
-        headers: {
-          Accept: "application/json",
-        },
-      });
-
-      if (testResponse.ok) {
-        setNgrokUrl(cleanUrl);
-        toast({
-          title: "Ngrok Configured Successfully",
-          description: `Connected to ${cleanUrl}. All API calls will now use this URL.`,
-        });
-        onOpenChange(false);
-      } else {
-        throw new Error(`Server responded with status ${testResponse.status}`);
-      }
-    } catch (error) {
-      console.error("Failed to connect to ngrok URL:", error);
-      toast({
-        title: "Connection Failed",
-        description: `Could not connect to ${inputUrl}. Please check the URL and ensure your ngrok tunnel is running.`,
-        variant: "destructive",
-      });
-    } finally {
-      setIsTestingConnection(false);
-    }
-  };
-
-  const handleReset = () => {
-    resetToLocalhost();
-    setInputUrl("");
-    toast({
-      title: "Reset to Localhost",
-      description: "All API calls will now use localhost:8000.",
-    });
-    onOpenChange(false);
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-gray-900 border-gray-800 text-white w-[95vw] max-w-[600px] max-h-[90vh] overflow-y-auto p-4 sm:p-6 md:p-8">
-        <DialogHeader>
-          <div className="flex justify-center items-center mb-4">
-            <Globe className="w-8 h-8 text-blue-500" />
-          </div>
-          <DialogTitle className="text-white text-center text-xl sm:text-2xl font-bold">
-            Ngrok Configuration
-          </DialogTitle>
-          <DialogDescription className="text-gray-400 text-center text-sm sm:text-base">
-            Configure ngrok tunnel for external access and phone camera
-            features.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-4 sm:space-y-6 py-4">
-          {/* Current Status */}
-          <div className="bg-gray-800 rounded-lg p-3 sm:p-4 border border-gray-700">
-            <div className="flex items-center gap-3 mb-2">
-              {isNgrokEnabled ? (
-                <Wifi className="w-4 h-4 sm:w-5 sm:h-5 text-green-500" />
-              ) : (
-                <WifiOff className="w-4 h-4 sm:w-5 sm:h-5 text-gray-500" />
-              )}
-              <span className="font-semibold text-sm sm:text-base">
-                Current Mode: {isNgrokEnabled ? "Ngrok" : "Localhost"}
-              </span>
-            </div>
-            <p className="text-xs sm:text-sm text-gray-400 break-all">
-              {isNgrokEnabled
-                ? `Using: ${ngrokUrl}`
-                : "Using: http://localhost:8000"}
-            </p>
-          </div>
-
-          {/* URL Input */}
-          <div className="space-y-2">
-            <Label
-              htmlFor="ngrokUrl"
-              className="text-sm font-medium text-gray-300"
-            >
-              Ngrok URL
-            </Label>
-            <Input
-              id="ngrokUrl"
-              value={inputUrl}
-              onChange={(e) => setInputUrl(e.target.value)}
-              placeholder="https://abc123.ngrok.io"
-              className="bg-gray-800 border-gray-700 text-white text-sm sm:text-base"
-            />
-            <p className="text-xs text-gray-500">
-              Enter your ngrok tunnel URL. Leave empty to use localhost.
-            </p>
-          </div>
-
-          {/* Benefits */}
-          <div className="bg-green-900/20 border border-green-800 rounded-lg p-3 sm:p-4">
-            <h3 className="font-semibold text-green-400 mb-2 text-sm sm:text-base">
-              Why use Ngrok?
-            </h3>
-            <ul className="text-xs sm:text-sm text-gray-300 space-y-1">
-              <li>• Access your robot from anywhere on the internet</li>
-              <li>• Use phone cameras as secondary recording angles</li>
-              <li>• Share your robot session with remote collaborators</li>
-              <li>• Test your setup from different devices</li>
-            </ul>
-          </div>
-
-          {/* Action Buttons */}
-          <div className="flex flex-col gap-3 sm:gap-4 pt-4">
-            <Button
-              onClick={handleSave}
-              disabled={isTestingConnection}
-              className="w-full bg-blue-500 hover:bg-blue-600 text-white px-6 sm:px-8 py-3 text-sm sm:text-lg transition-all shadow-md shadow-blue-500/30 hover:shadow-lg hover:shadow-blue-500/40"
-            >
-              {isTestingConnection ? (
-                <>
-                  <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
-                  Testing Connection...
-                </>
-              ) : (
-                <>
-                  <ExternalLink className="w-4 h-4 sm:w-5 sm:h-5 mr-2" />
-                  Save Configuration
-                </>
-              )}
-            </Button>
-
-            <div className="flex flex-col sm:flex-row gap-3">
-              {isNgrokEnabled && (
-                <Button
-                  onClick={handleReset}
-                  variant="outline"
-                  className="w-full border-orange-500 hover:border-orange-400 text-orange-400 hover:text-orange-300 px-6 sm:px-8 py-3 text-sm sm:text-lg"
-                >
-                  Reset to Localhost
-                </Button>
-              )}
-
-              <Button
-                onClick={() => onOpenChange(false)}
-                variant="outline"
-                className="w-full border-gray-500 hover:border-gray-200 px-6 sm:px-8 py-3 text-sm sm:text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
-              >
-                Cancel
-              </Button>
-            </div>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default NgrokConfigModal;

src/components/landing/RecordingModal.tsx

@@ -16,10 +16,13 @@ import {
   DialogTitle,
   DialogDescription,
 } from "@/components/ui/dialog";
-import { QrCode } from "lucide-react";
+
 import PortDetectionModal from "@/components/ui/PortDetectionModal";
 import PortDetectionButton from "@/components/ui/PortDetectionButton";
-import QrCodeModal from "@/components/recording/QrCodeModal";
+
+import CameraConfiguration, {
+  CameraConfig,
+} from "@/components/recording/CameraConfiguration";
 import { useApi } from "@/contexts/ApiContext";
 import { useAutoSave } from "@/hooks/useAutoSave";
 interface RecordingModalProps {
@@ -41,8 +44,11 @@ interface RecordingModalProps {
   setSingleTask: (value: string) => void;
   numEpisodes: number;
   setNumEpisodes: (value: number) => void;
+  cameras: CameraConfig[];
+  setCameras: (cameras: CameraConfig[]) => void;
   isLoadingConfigs: boolean;
   onStart: () => void;
+  releaseStreamsRef?: React.MutableRefObject<(() => void) | null>;
 }
 const RecordingModal: React.FC<RecordingModalProps> = ({
   open,
@@ -63,8 +69,11 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
   setSingleTask,
   numEpisodes,
   setNumEpisodes,
+  cameras,
+  setCameras,
   isLoadingConfigs,
   onStart,
+  releaseStreamsRef,
 }) => {
   const { baseUrl, fetchWithHeaders } = useApi();
   const { debouncedSavePort, debouncedSaveConfig } = useAutoSave();
@@ -72,8 +81,6 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
   const [detectionRobotType, setDetectionRobotType] = useState<
     "leader" | "follower"
   >("leader");
-  const [showQrCodeModal, setShowQrCodeModal] = useState(false);
-  const [sessionId, setSessionId] = useState("");
 
   const handlePortDetection = (robotType: "leader" | "follower") => {
     setDetectionRobotType(robotType);
@@ -136,19 +143,29 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
 
         // Load leader configuration
         const leaderConfigResponse = await fetchWithHeaders(
-          `${baseUrl}/robot-config/leader?available_configs=${leaderConfigs.join(',')}`
+          `${baseUrl}/robot-config/leader?available_configs=${leaderConfigs.join(
+            ","
+          )}`
         );
         const leaderConfigData = await leaderConfigResponse.json();
-        if (leaderConfigData.status === "success" && leaderConfigData.default_config) {
+        if (
+          leaderConfigData.status === "success" &&
+          leaderConfigData.default_config
+        ) {
           setLeaderConfig(leaderConfigData.default_config);
         }
 
         // Load follower configuration
         const followerConfigResponse = await fetchWithHeaders(
-          `${baseUrl}/robot-config/follower?available_configs=${followerConfigs.join(',')}`
+          `${baseUrl}/robot-config/follower?available_configs=${followerConfigs.join(
+            ","
+          )}`
         );
         const followerConfigData = await followerConfigResponse.json();
-        if (followerConfigData.status === "success" && followerConfigData.default_config) {
+        if (
+          followerConfigData.status === "success" &&
+          followerConfigData.default_config
+        ) {
           setFollowerConfig(followerConfigData.default_config);
         }
       } catch (error) {
@@ -159,16 +176,18 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
     if (open && leaderConfigs.length > 0 && followerConfigs.length > 0) {
       loadSavedData();
     }
-  }, [open, setLeaderPort, setFollowerPort, setLeaderConfig, setFollowerConfig, leaderConfigs, followerConfigs, baseUrl, fetchWithHeaders]);
+  }, [
+    open,
+    setLeaderPort,
+    setFollowerPort,
+    setLeaderConfig,
+    setFollowerConfig,
+    leaderConfigs,
+    followerConfigs,
+    baseUrl,
+    fetchWithHeaders,
+  ]);
 
-  const handleQrCodeClick = () => {
-    // Generate a session ID for this recording session
-    const newSessionId = `recording_${Date.now()}_${Math.random()
-      .toString(36)
-      .substr(2, 9)}`;
-    setSessionId(newSessionId);
-    setShowQrCodeModal(true);
-  };
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
@@ -189,23 +208,6 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
               recording.
             </DialogDescription>
 
-            <div className="border-y border-gray-700 py-6 flex flex-col items-center gap-4 bg-gray-800/50 rounded-lg">
-              <h3 className="text-lg font-semibold text-white">
-                Need an extra angle?
-              </h3>
-              <p className="text-sm text-gray-400 -mt-2">
-                Add your phone as a secondary camera.
-              </p>
-              <Button
-                onClick={handleQrCodeClick}
-                title="Add Phone Camera"
-                className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 flex items-center gap-2 transition-all duration-300 shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/40 transform hover:scale-105 rounded-lg"
-              >
-                <QrCode className="w-5 h-5" />
-                <span>Add Phone Camera</span>
-              </Button>
-            </div>
-
             <div className="grid grid-cols-1 gap-6">
               <div className="space-y-4">
                 <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
@@ -277,7 +279,9 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                       <Input
                         id="recordFollowerPort"
                         value={followerPort}
-                        onChange={(e) => handleFollowerPortChange(e.target.value)}
+                        onChange={(e) =>
+                          handleFollowerPortChange(e.target.value)
+                        }
                         placeholder="/dev/tty.usbmodem5A460816621"
                         className="bg-gray-800 border-gray-700 text-white flex-1"
                       />
@@ -377,6 +381,14 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
                   </div>
                 </div>
               </div>
+
+              <div className="space-y-4">
+                <CameraConfiguration
+                  cameras={cameras}
+                  onCamerasChange={setCameras}
+                  releaseStreamsRef={releaseStreamsRef}
+                />
+              </div>
             </div>
 
             <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
@@ -405,12 +417,6 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
         robotType={detectionRobotType}
         onPortDetected={handlePortDetected}
       />
-
-      <QrCodeModal
-        open={showQrCodeModal}
-        onOpenChange={setShowQrCodeModal}
-        sessionId={sessionId}
-      />
     </>
   );
 };

src/components/recording/CameraConfiguration.tsx

@@ -0,0 +1,693 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Camera, Plus, X, Video, VideoOff } from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+import { useToast } from "@/hooks/use-toast";
+
+export interface CameraConfig {
+  id: string;
+  name: string;
+  type: string;
+  camera_index?: number; // Keep for backend compatibility
+  device_id: string; // Use this for actual camera selection
+  width: number;
+  height: number;
+  fps?: number;
+}
+
+interface CameraConfigurationProps {
+  cameras: CameraConfig[];
+  onCamerasChange: (cameras: CameraConfig[]) => void;
+  releaseStreamsRef?: React.MutableRefObject<(() => void) | null>; // Ref to expose stream release function
+}
+
+interface AvailableCamera {
+  index: number;
+  deviceId: string;
+  name: string;
+  available: boolean;
+}
+
+const CameraConfiguration: React.FC<CameraConfigurationProps> = ({
+  cameras,
+  onCamerasChange,
+  releaseStreamsRef,
+}) => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const { toast } = useToast();
+
+  const [availableCameras, setAvailableCameras] = useState<AvailableCamera[]>(
+    []
+  );
+  const [selectedCameraIndex, setSelectedCameraIndex] = useState<string>("");
+  const [cameraName, setCameraName] = useState("");
+  const [isLoadingCameras, setIsLoadingCameras] = useState(false);
+  const [cameraStreams, setCameraStreams] = useState<Map<string, MediaStream>>(
+    new Map()
+  );
+
+  // Fetch available cameras on component mount
+  useEffect(() => {
+    fetchAvailableCameras();
+  }, []);
+
+  const fetchAvailableCameras = async () => {
+    console.log("🚀 fetchAvailableCameras() called");
+    setIsLoadingCameras(true);
+    try {
+      console.log(
+        "📡 Trying backend endpoint:",
+        `${baseUrl}/available-cameras`
+      );
+      const response = await fetchWithHeaders(`${baseUrl}/available-cameras`);
+      console.log("📡 Backend response status:", response.status, response.ok);
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log("📡 Backend camera data received:", data);
+        setAvailableCameras(data.cameras || []);
+
+        // Always also try browser detection to get device IDs
+        console.log("🔄 Also running browser detection for device IDs...");
+        await detectBrowserCameras();
+      } else {
+        console.log("📡 Backend failed, falling back to browser detection");
+        // Fallback to browser camera detection
+        await detectBrowserCameras();
+      }
+    } catch (error) {
+      console.error("📡 Error fetching cameras from backend:", error);
+      console.log("🔄 Falling back to browser detection due to error");
+      // Fallback to browser camera detection
+      await detectBrowserCameras();
+    } finally {
+      setIsLoadingCameras(false);
+      console.log("✅ fetchAvailableCameras() completed");
+    }
+  };
+
+  const detectBrowserCameras = async () => {
+    try {
+      // First, request camera permissions to get proper device IDs and labels
+      console.log("🔐 Requesting camera permissions for device detection...");
+      try {
+        const tempStream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+        });
+        console.log("✅ Camera permission granted, stopping temp stream");
+        tempStream.getTracks().forEach((track) => track.stop());
+      } catch (permError) {
+        console.warn(
+          "⚠️ Camera permission denied, device IDs may be empty:",
+          permError
+        );
+      }
+
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(
+        (device) => device.kind === "videoinput"
+      );
+
+      console.log(
+        "🔍 Raw video devices from enumerateDevices:",
+        videoDevices.map((d) => ({
+          deviceId: d.deviceId,
+          label: d.label,
+          kind: d.kind,
+        }))
+      );
+
+      const detectedCameras = videoDevices.map((device, index) => ({
+        index,
+        deviceId: device.deviceId || `fallback_${index}`, // Fallback if deviceId is empty
+        name: device.label || `Camera ${index + 1}`,
+        available: true,
+      }));
+
+      console.log("🎬 Browser cameras with indices mapped:", detectedCameras);
+      setAvailableCameras(detectedCameras);
+    } catch (error) {
+      console.error("Error detecting browser cameras:", error);
+      toast({
+        title: "Camera Detection Failed",
+        description:
+          "Could not detect available cameras. Please check permissions.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const startCameraPreview = async (cameraConfig: CameraConfig) => {
+    try {
+      console.log(
+        "🎥 Starting camera preview for:",
+        cameraConfig.name,
+        "with device_id:",
+        cameraConfig.device_id,
+        "camera_index:",
+        cameraConfig.camera_index
+      );
+
+      // Create constraints with fallbacks to avoid OverconstrainedError
+      const constraints: MediaStreamConstraints = {
+        video: {
+          width: { ideal: cameraConfig.width, min: 320, max: 1920 },
+          height: { ideal: cameraConfig.height, min: 240, max: 1080 },
+          frameRate: { ideal: cameraConfig.fps || 30, min: 10, max: 60 },
+        },
+      };
+
+      // Only add deviceId if it's not a fallback
+      if (
+        cameraConfig.device_id &&
+        !cameraConfig.device_id.startsWith("fallback_")
+      ) {
+        (constraints.video as MediaTrackConstraints).deviceId = {
+          exact: cameraConfig.device_id, // Changed from 'ideal' to 'exact'
+        };
+        console.log(
+          "🔧 Using EXACT deviceId constraint:",
+          cameraConfig.device_id
+        );
+      } else {
+        console.log("⚠️ No valid deviceId, will use default camera");
+      }
+
+      console.log(
+        "📋 Final constraints:",
+        JSON.stringify(constraints, null, 2)
+      );
+
+      const stream = await navigator.mediaDevices.getUserMedia(constraints);
+
+      // Get the actual device being used
+      const videoTrack = stream.getVideoTracks()[0];
+      if (videoTrack) {
+        const settings = videoTrack.getSettings();
+        console.log("✅ Actual camera settings:", {
+          deviceId: settings.deviceId,
+          label: videoTrack.label,
+          width: settings.width,
+          height: settings.height,
+        });
+
+        // Check if we got the camera we requested
+        if (
+          cameraConfig.device_id &&
+          settings.deviceId !== cameraConfig.device_id
+        ) {
+          console.warn(
+            "⚠️ CAMERA MISMATCH! Requested:",
+            cameraConfig.device_id,
+            "Got:",
+            settings.deviceId
+          );
+        } else {
+          console.log("✅ Camera match confirmed!");
+        }
+      }
+
+      console.log(
+        "Camera stream created successfully for:",
+        cameraConfig.name,
+        {
+          streamId: stream.id,
+          tracks: stream.getTracks().length,
+          videoTracks: stream.getVideoTracks().length,
+          active: stream.active,
+        }
+      );
+
+      setCameraStreams((prev) => {
+        const newMap = new Map(prev.set(cameraConfig.id, stream));
+        console.log("Updated camera streams map:", Array.from(newMap.keys()));
+        return newMap;
+      });
+
+      // Force a small delay to ensure state update
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      return stream;
+    } catch (error: unknown) {
+      console.error("Error starting camera preview:", error);
+
+      const isMediaError = error instanceof Error;
+      const errorName = isMediaError ? error.name : "";
+      const errorMessage = isMediaError ? error.message : "Unknown error";
+
+      // If constraints failed, try with basic constraints
+      if (
+        errorName === "OverconstrainedError" ||
+        errorName === "NotReadableError"
+      ) {
+        try {
+          console.log("Retrying with basic constraints...");
+          const basicStream = await navigator.mediaDevices.getUserMedia({
+            video: { width: 640, height: 480 },
+          });
+
+          setCameraStreams(
+            (prev) => new Map(prev.set(cameraConfig.id, basicStream))
+          );
+          toast({
+            title: "Camera Preview Started",
+            description: `${cameraConfig.name} started with basic settings due to constraint issues.`,
+          });
+          return basicStream;
+        } catch (basicError) {
+          console.error("Error with basic constraints:", basicError);
+        }
+      }
+
+      toast({
+        title: "Camera Preview Failed",
+        description: `Could not start preview for ${cameraConfig.name}: ${errorMessage}`,
+        variant: "destructive",
+      });
+      return null;
+    }
+  };
+
+  const stopCameraPreview = (cameraId: string) => {
+    const stream = cameraStreams.get(cameraId);
+    if (stream) {
+      stream.getTracks().forEach((track) => track.stop());
+      setCameraStreams((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(cameraId);
+        return newMap;
+      });
+    }
+  };
+
+  const addCamera = async () => {
+    if (!selectedCameraIndex || !cameraName.trim()) {
+      toast({
+        title: "Missing Information",
+        description: "Please select a camera and provide a name.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const cameraIndex = parseInt(selectedCameraIndex);
+    const selectedCamera = availableCameras.find(
+      (cam) => cam.index === cameraIndex
+    );
+
+    if (!selectedCamera) {
+      toast({
+        title: "Invalid Camera",
+        description: "Selected camera is not available.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    // Check if camera is already added
+    if (cameras.some((cam) => cam.camera_index === cameraIndex)) {
+      toast({
+        title: "Camera Already Added",
+        description: "This camera is already in the configuration.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    const newCamera: CameraConfig = {
+      id: `camera_${Date.now()}`,
+      name: cameraName.trim(),
+      type: "opencv",
+      camera_index: selectedCamera.index,
+      device_id: selectedCamera.deviceId,
+      width: 640,
+      height: 480,
+      fps: 30,
+    };
+
+    console.log("🆕 Creating new camera config:", {
+      name: newCamera.name,
+      camera_index: newCamera.camera_index,
+      device_id: newCamera.device_id,
+      selectedCamera: selectedCamera,
+    });
+
+    const updatedCameras = [...cameras, newCamera];
+    onCamerasChange(updatedCameras);
+
+    // Start preview for the new camera
+    await startCameraPreview(newCamera);
+
+    // Reset form
+    setSelectedCameraIndex("");
+    setCameraName("");
+
+    toast({
+      title: "Camera Added",
+      description: `${newCamera.name} has been added to the configuration.`,
+    });
+  };
+
+  const removeCamera = (cameraId: string) => {
+    stopCameraPreview(cameraId);
+    const updatedCameras = cameras.filter((cam) => cam.id !== cameraId);
+    onCamerasChange(updatedCameras);
+
+    toast({
+      title: "Camera Removed",
+      description: "Camera has been removed from the configuration.",
+    });
+  };
+
+  const updateCamera = (cameraId: string, updates: Partial<CameraConfig>) => {
+    const updatedCameras = cameras.map((cam) =>
+      cam.id === cameraId ? { ...cam, ...updates } : cam
+    );
+    onCamerasChange(updatedCameras);
+  };
+
+  // Function to release all camera streams (for recording start)
+  const releaseAllCameraStreams = useCallback(() => {
+    console.log("🔓 Releasing all camera streams for recording...");
+    cameraStreams.forEach((stream, cameraId) => {
+      console.log(`🔓 Stopping stream for camera: ${cameraId}`);
+      stream.getTracks().forEach((track) => track.stop());
+    });
+    setCameraStreams(new Map());
+    console.log("✅ All camera streams released");
+  }, [cameraStreams]);
+
+  // Expose the release function to parent component via ref
+  useEffect(() => {
+    if (releaseStreamsRef) {
+      releaseStreamsRef.current = releaseAllCameraStreams;
+    }
+  }, [releaseStreamsRef, releaseAllCameraStreams]);
+
+  // Clean up streams on component unmount
+  useEffect(() => {
+    return () => {
+      cameraStreams.forEach((stream) => {
+        stream.getTracks().forEach((track) => track.stop());
+      });
+    };
+  }, []);
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
+        Camera Configuration
+      </h3>
+
+      {/* Add Camera Section */}
+      <div className="bg-gray-800/50 rounded-lg p-4 space-y-4">
+        <h4 className="text-md font-medium text-gray-300">Add Camera</h4>
+
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+          <div className="space-y-2">
+            <Label className="text-sm font-medium text-gray-300">
+              Available Cameras
+            </Label>
+            <Select
+              value={selectedCameraIndex}
+              onValueChange={setSelectedCameraIndex}
+              disabled={isLoadingCameras}
+            >
+              <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                <SelectValue
+                  placeholder={
+                    isLoadingCameras ? "Loading cameras..." : "Select camera"
+                  }
+                />
+              </SelectTrigger>
+              <SelectContent className="bg-gray-800 border-gray-700">
+                {availableCameras.map((camera) => (
+                  <SelectItem
+                    key={camera.index}
+                    value={camera.index.toString()}
+                    className="text-white hover:bg-gray-700"
+                    disabled={
+                      !camera.available ||
+                      cameras.some((cam) => cam.camera_index === camera.index)
+                    }
+                  >
+                    {camera.name} (Index {camera.index})
+                    {cameras.some((cam) => cam.camera_index === camera.index) &&
+                      " (Already added)"}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div className="space-y-2">
+            <Label className="text-sm font-medium text-gray-300">
+              Camera Name
+            </Label>
+            <Input
+              value={cameraName}
+              onChange={(e) => setCameraName(e.target.value)}
+              placeholder="e.g., workspace_cam"
+              className="bg-gray-800 border-gray-700 text-white"
+            />
+          </div>
+
+          <div className="space-y-2 flex flex-col justify-end">
+            <Button
+              onClick={addCamera}
+              className="bg-blue-500 hover:bg-blue-600 text-white"
+              disabled={!selectedCameraIndex || !cameraName.trim()}
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              Add Camera
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Configured Cameras */}
+      {cameras.length > 0 && (
+        <div className="space-y-4">
+          <h4 className="text-md font-medium text-gray-300">
+            Configured Cameras ({cameras.length})
+          </h4>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-4">
+            {cameras.map((camera) => (
+              <CameraPreview
+                key={camera.id}
+                camera={camera}
+                stream={cameraStreams.get(camera.id)}
+                onRemove={() => removeCamera(camera.id)}
+                onUpdate={(updates) => updateCamera(camera.id, updates)}
+                onStartPreview={() => startCameraPreview(camera)}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {cameras.length === 0 && (
+        <div className="text-center py-8 text-gray-500">
+          <Camera className="w-12 h-12 mx-auto mb-4 text-gray-600" />
+          <p>No cameras configured. Add a camera to get started.</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface CameraPreviewProps {
+  camera: CameraConfig;
+  stream?: MediaStream;
+  onRemove: () => void;
+  onUpdate: (updates: Partial<CameraConfig>) => void;
+  onStartPreview: () => void;
+}
+
+const CameraPreview: React.FC<CameraPreviewProps> = ({
+  camera,
+  stream,
+  onRemove,
+  onUpdate,
+  onStartPreview,
+}) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPreviewActive, setIsPreviewActive] = useState(false);
+
+  // Debug logging for props
+  console.log("CameraPreview render for:", camera.name, {
+    hasStream: !!stream,
+    streamActive: stream?.active,
+    isPreviewActive,
+    streamId: stream?.id,
+  });
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (video && stream) {
+      console.log("Setting stream to video element for camera:", camera.name);
+      video.srcObject = stream;
+
+      // Explicitly play the video to ensure it starts
+      const playVideo = async () => {
+        try {
+          await video.play();
+          console.log("Video playing successfully for camera:", camera.name);
+          setIsPreviewActive(true);
+        } catch (error) {
+          console.error("Error playing video for camera:", camera.name, error);
+          // Try to play without audio in case autoplay is blocked
+          video.muted = true;
+          try {
+            await video.play();
+            console.log("Video playing muted for camera:", camera.name);
+            setIsPreviewActive(true);
+          } catch (mutedError) {
+            console.error("Error playing muted video:", mutedError);
+            setIsPreviewActive(false);
+          }
+        }
+      };
+
+      // Wait for metadata to load before playing
+      if (video.readyState >= 1) {
+        playVideo();
+      } else {
+        video.addEventListener("loadedmetadata", playVideo, { once: true });
+      }
+    } else {
+      console.log("No stream or video element for camera:", camera.name);
+      setIsPreviewActive(false);
+    }
+  }, [stream, camera.name]);
+
+  useEffect(() => {
+    // Auto-start preview when camera is added
+    if (!stream && !isPreviewActive) {
+      console.log("Auto-starting preview for camera:", camera.name);
+      onStartPreview();
+    }
+  }, [stream, isPreviewActive, onStartPreview, camera.name]);
+
+  return (
+    <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
+      {/* Camera Preview */}
+      <div className="aspect-[4/3] bg-gray-800 relative">
+        {/* Always show the video element if we have a stream, regardless of isPreviewActive */}
+        {stream ? (
+          <>
+            <video
+              ref={videoRef}
+              autoPlay
+              muted
+              playsInline
+              className="w-full h-full object-cover"
+              onLoadedMetadata={() =>
+                console.log("Video metadata loaded for:", camera.name)
+              }
+              onPlay={() =>
+                console.log("Video started playing for:", camera.name)
+              }
+              onError={(e) => console.error("Video error for:", camera.name, e)}
+              onCanPlay={() => console.log("Video can play for:", camera.name)}
+            />
+            <div className="absolute top-2 left-2">
+              <div className="flex items-center gap-1 bg-black/50 px-2 py-1 rounded text-xs">
+                <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
+                <span className="text-green-400">
+                  {isPreviewActive ? "LIVE" : "LOADING"}
+                </span>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="w-full h-full flex flex-col items-center justify-center">
+            <VideoOff className="w-8 h-8 text-gray-500 mb-2" />
+            <span className="text-gray-500 text-sm">Preview not available</span>
+            <Button
+              onClick={onStartPreview}
+              size="sm"
+              className="mt-2 bg-blue-500 hover:bg-blue-600"
+            >
+              <Video className="w-3 h-3 mr-1" />
+              Start Preview
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {/* Camera Info */}
+      <div className="p-3 space-y-2">
+        <div className="flex items-center justify-between">
+          <h5 className="font-medium text-white truncate">{camera.name}</h5>
+          <Button
+            onClick={onRemove}
+            size="sm"
+            variant="ghost"
+            className="text-red-400 hover:text-red-300 hover:bg-red-900/20 p-1"
+          >
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <div className="grid grid-cols-1 gap-2 text-xs text-gray-400">
+          <div className="flex items-center gap-2">
+            <span className="w-16">Resolution:</span>
+            <div className="flex items-center gap-1">
+              <Input
+                type="number"
+                value={camera.width}
+                onChange={(e) =>
+                  onUpdate({ width: parseInt(e.target.value) || 640 })
+                }
+                className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+                min="320"
+                max="1920"
+              />
+              <span className="flex items-center">×</span>
+              <Input
+                type="number"
+                value={camera.height}
+                onChange={(e) =>
+                  onUpdate({ height: parseInt(e.target.value) || 480 })
+                }
+                className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+                min="240"
+                max="1080"
+              />
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="w-16">FPS:</span>
+            <Input
+              type="number"
+              value={camera.fps || 30}
+              onChange={(e) =>
+                onUpdate({ fps: parseInt(e.target.value) || 30 })
+              }
+              className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+              min="10"
+              max="60"
+            />
+          </div>
+        </div>
+
+        <div className="text-xs text-gray-500">
+          Type: {camera.type} | Device: {camera.device_id?.substring(0, 10)}...
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CameraConfiguration;

src/components/recording/PhoneCameraFeed.tsx

@@ -1,117 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Smartphone, WifiOff } from "lucide-react";
-import { useApi } from "@/contexts/ApiContext";
-
-interface PhoneCameraFeedProps {
-  sessionId: string;
-}
-
-const PhoneCameraFeed: React.FC<PhoneCameraFeedProps> = ({ sessionId }) => {
-  const { wsBaseUrl } = useApi();
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const mediaSourceRef = useRef<MediaSource | null>(null);
-
-  useEffect(() => {
-    if (!sessionId) return;
-
-    const connectWebSocket = () => {
-      try {
-        const ws = new WebSocket(`${wsBaseUrl}/ws/camera/${sessionId}`);
-        wsRef.current = ws;
-
-        ws.onopen = () => {
-          console.log("Camera feed WebSocket connected");
-          setIsConnected(true);
-          setError(null);
-        };
-
-        ws.onmessage = (event) => {
-          // Handle incoming video chunks
-          if (event.data instanceof Blob) {
-            handleVideoChunk(event.data);
-          } else if (event.data === "camera_connected") {
-            setIsConnected(true);
-          }
-        };
-
-        ws.onclose = () => {
-          console.log("Camera feed WebSocket disconnected");
-          setIsConnected(false);
-        };
-
-        ws.onerror = (error) => {
-          console.error("Camera feed WebSocket error:", error);
-          setError("Failed to connect to camera feed");
-          setIsConnected(false);
-        };
-      } catch (error) {
-        console.error("Failed to create WebSocket:", error);
-        setError("Failed to establish connection");
-      }
-    };
-
-    const handleVideoChunk = (chunk: Blob) => {
-      // For now, we'll just log that we received a chunk
-      // In a full implementation, this would use MediaSource API
-      console.log("Received video chunk:", chunk.size, "bytes");
-    };
-
-    connectWebSocket();
-
-    return () => {
-      if (wsRef.current) {
-        wsRef.current.close();
-      }
-      if (mediaSourceRef.current) {
-        mediaSourceRef.current.endOfStream();
-      }
-    };
-  }, [sessionId]);
-
-  if (error) {
-    return (
-      <div className="w-full h-32 bg-gray-800 rounded-lg flex flex-col items-center justify-center">
-        <WifiOff className="w-6 h-6 text-red-400 mb-2" />
-        <p className="text-xs text-red-400 text-center">{error}</p>
-      </div>
-    );
-  }
-
-  if (!isConnected) {
-    return (
-      <div className="w-full h-32 bg-gray-800 rounded-lg flex flex-col items-center justify-center">
-        <Smartphone className="w-6 h-6 text-gray-500 mb-2" />
-        <p className="text-xs text-gray-500 text-center">
-          Waiting for phone camera...
-        </p>
-        <div className="w-4 h-4 border-2 border-gray-600 border-t-blue-500 rounded-full animate-spin mt-2"></div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="w-full h-32 bg-gray-800 rounded-lg overflow-hidden relative">
-      <video
-        ref={videoRef}
-        className="w-full h-full object-cover"
-        autoPlay
-        muted
-        playsInline
-      />
-      <div className="absolute top-2 left-2">
-        <div className="flex items-center gap-1 bg-black/50 px-2 py-1 rounded text-xs">
-          <div className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse"></div>
-          <span className="text-green-400">LIVE</span>
-        </div>
-      </div>
-      <div className="absolute bottom-2 right-2">
-        <Smartphone className="w-4 h-4 text-white/70" />
-      </div>
-    </div>
-  );
-};
-
-export default PhoneCameraFeed;

src/components/recording/QrCodeModal.tsx

@@ -1,145 +0,0 @@
-
-import React, { useEffect, useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Copy, Smartphone, QrCode } from "lucide-react";
-import { useToast } from "@/hooks/use-toast";
-
-interface QrCodeModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  sessionId: string;
-}
-
-const QrCodeModal: React.FC<QrCodeModalProps> = ({
-  open,
-  onOpenChange,
-  sessionId,
-}) => {
-  const { toast } = useToast();
-  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
-  const [phoneUrl, setPhoneUrl] = useState<string>("");
-
-  useEffect(() => {
-    if (sessionId) {
-      // Get current host URL - in production this would be the deployed URL
-      const currentHost = window.location.origin;
-      const phonePageUrl = `${currentHost}/phone-camera?sessionId=${sessionId}`;
-      setPhoneUrl(phonePageUrl);
-
-      // Generate QR code using a public QR code API
-      const qrApiUrl = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(phonePageUrl)}`;
-      setQrCodeUrl(qrApiUrl);
-    }
-  }, [sessionId]);
-
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(phoneUrl);
-      toast({
-        title: "URL Copied!",
-        description: "Phone camera URL has been copied to clipboard.",
-      });
-    } catch (error) {
-      toast({
-        title: "Copy Failed",
-        description: "Could not copy URL to clipboard.",
-        variant: "destructive",
-      });
-    }
-  };
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[500px] p-8">
-        <DialogHeader>
-          <div className="flex justify-center items-center gap-4 mb-4">
-            <div className="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center">
-              <Smartphone className="w-5 h-5 text-white" />
-            </div>
-          </div>
-          <DialogTitle className="text-white text-center text-2xl font-bold">
-            Add Phone Camera
-          </DialogTitle>
-          <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
-            Scan the QR code with your phone to add a camera feed to your recording session.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="space-y-6 py-4">
-          {/* QR Code Display */}
-          <div className="flex justify-center">
-            {qrCodeUrl ? (
-              <div className="bg-white p-4 rounded-lg">
-                <img
-                  src={qrCodeUrl}
-                  alt="QR Code for phone camera"
-                  className="w-48 h-48"
-                />
-              </div>
-            ) : (
-              <div className="w-48 h-48 bg-gray-800 rounded-lg flex items-center justify-center">
-                <QrCode className="w-12 h-12 text-gray-600" />
-              </div>
-            )}
-          </div>
-
-          {/* Instructions */}
-          <div className="space-y-4">
-            <h3 className="text-lg font-semibold text-white text-center">
-              How to connect your phone camera:
-            </h3>
-            <ol className="text-sm text-gray-400 space-y-2 list-decimal list-inside">
-              <li>Open your phone's camera app</li>
-              <li>Scan the QR code above</li>
-              <li>Allow camera permissions when prompted</li>
-              <li>Your phone camera feed will appear in the recording interface</li>
-            </ol>
-          </div>
-
-          {/* Manual URL Option */}
-          <div className="space-y-3">
-            <h4 className="text-sm font-semibold text-gray-300">
-              Or open this URL manually on your phone:
-            </h4>
-            <div className="flex gap-2">
-              <input
-                type="text"
-                value={phoneUrl}
-                readOnly
-                className="flex-1 bg-gray-800 border border-gray-700 text-white px-3 py-2 rounded text-sm"
-              />
-              <Button
-                onClick={copyToClipboard}
-                variant="outline"
-                size="sm"
-                className="border-gray-600 hover:border-blue-500 text-gray-300 hover:text-blue-400"
-              >
-                <Copy className="w-4 h-4" />
-              </Button>
-            </div>
-          </div>
-
-          {/* Close Button */}
-          <div className="flex justify-center pt-4">
-            <Button
-              onClick={() => onOpenChange(false)}
-              variant="outline"
-              className="border-gray-500 hover:border-gray-200 px-8 py-2 text-gray-300 hover:text-white"
-            >
-              Close
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default QrCodeModal;

src/contexts/ApiContext.tsx

@@ -1,19 +1,8 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  ReactNode,
-} from "react";
+import React, { createContext, useContext, ReactNode } from "react";
 
 interface ApiContextType {
   baseUrl: string;
   wsBaseUrl: string;
-  isNgrokEnabled: boolean;
-  setNgrokUrl: (url: string) => void;
-  resetToLocalhost: () => void;
-  ngrokUrl: string;
-  getHeaders: () => Record<string, string>;
   fetchWithHeaders: (url: string, options?: RequestInit) => Promise<Response>;
 }
 
@@ -27,69 +16,8 @@ interface ApiProviderProps {
 }
 
 export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
-  const [ngrokUrl, setNgrokUrlState] = useState<string>("");
-  const [isNgrokEnabled, setIsNgrokEnabled] = useState<boolean>(false);
-
-  // Load saved ngrok configuration on mount
-  useEffect(() => {
-    const savedNgrokUrl = localStorage.getItem("ngrok-url");
-    const savedNgrokEnabled = localStorage.getItem("ngrok-enabled") === "true";
-
-    if (savedNgrokUrl && savedNgrokEnabled) {
-      setNgrokUrlState(savedNgrokUrl);
-      setIsNgrokEnabled(true);
-    }
-  }, []);
-
-  const setNgrokUrl = (url: string) => {
-    // Clean and validate the URL
-    let cleanUrl = url.trim();
-    if (cleanUrl && !cleanUrl.startsWith("http")) {
-      cleanUrl = `https://${cleanUrl}`;
-    }
-
-    // Remove trailing slash
-    cleanUrl = cleanUrl.replace(/\/$/, "");
-
-    setNgrokUrlState(cleanUrl);
-    setIsNgrokEnabled(!!cleanUrl);
-
-    // Persist to localStorage
-    if (cleanUrl) {
-      localStorage.setItem("ngrok-url", cleanUrl);
-      localStorage.setItem("ngrok-enabled", "true");
-    } else {
-      localStorage.removeItem("ngrok-url");
-      localStorage.removeItem("ngrok-enabled");
-    }
-  };
-
-  const resetToLocalhost = () => {
-    setNgrokUrlState("");
-    setIsNgrokEnabled(false);
-    localStorage.removeItem("ngrok-url");
-    localStorage.removeItem("ngrok-enabled");
-  };
-
-  const baseUrl = isNgrokEnabled && ngrokUrl ? ngrokUrl : DEFAULT_LOCALHOST;
-  const wsBaseUrl =
-    isNgrokEnabled && ngrokUrl
-      ? ngrokUrl.replace("https://", "wss://").replace("http://", "ws://")
-      : DEFAULT_WS_LOCALHOST;
-
-  // Helper function to get headers with ngrok skip warning if needed
-  const getHeaders = (): Record<string, string> => {
-    const headers: Record<string, string> = {
-      "Content-Type": "application/json",
-    };
-
-    // Add ngrok skip warning header when using ngrok
-    if (isNgrokEnabled && ngrokUrl) {
-      headers["ngrok-skip-browser-warning"] = "true";
-    }
-
-    return headers;
-  };
+  const baseUrl = DEFAULT_LOCALHOST;
+  const wsBaseUrl = DEFAULT_WS_LOCALHOST;
 
   // Enhanced fetch function that automatically includes necessary headers
   const fetchWithHeaders = async (
@@ -99,7 +27,7 @@ export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
     const enhancedOptions: RequestInit = {
       ...options,
       headers: {
-        ...getHeaders(),
+        "Content-Type": "application/json",
         ...options.headers,
       },
     };
@@ -112,11 +40,6 @@ export const ApiProvider: React.FC<ApiProviderProps> = ({ children }) => {
       value={{
         baseUrl,
         wsBaseUrl,
-        isNgrokEnabled,
-        setNgrokUrl,
-        resetToLocalhost,
-        ngrokUrl,
-        getHeaders,
         fetchWithHeaders,
       }}
     >

src/pages/Landing.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { useToast } from "@/hooks/use-toast";
 import { ArrowRight } from "lucide-react";
@@ -8,18 +8,19 @@ import ActionList from "@/components/landing/ActionList";
 import PermissionModal from "@/components/landing/PermissionModal";
 import TeleoperationModal from "@/components/landing/TeleoperationModal";
 import RecordingModal from "@/components/landing/RecordingModal";
-import NgrokConfigModal from "@/components/landing/NgrokConfigModal";
+
 import { Action } from "@/components/landing/types";
 import UsageInstructionsModal from "@/components/landing/UsageInstructionsModal";
 import DirectFollowerModal from "@/components/landing/DirectFollowerModal";
 import { useApi } from "@/contexts/ApiContext";
+import { CameraConfig } from "@/components/recording/CameraConfiguration";
 
 const Landing = () => {
   const [robotModel, setRobotModel] = useState("SO101");
   const [showPermissionModal, setShowPermissionModal] = useState(false);
   const [showTeleoperationModal, setShowTeleoperationModal] = useState(false);
   const [showUsageModal, setShowUsageModal] = useState(false);
-  const [showNgrokModal, setShowNgrokModal] = useState(false);
+
   const [leaderPort, setLeaderPort] = useState("/dev/tty.usbmodem5A460816421");
   const [followerPort, setFollowerPort] = useState(
     "/dev/tty.usbmodem5A460816621"
@@ -44,6 +45,10 @@ const Landing = () => {
   const [datasetRepoId, setDatasetRepoId] = useState("");
   const [singleTask, setSingleTask] = useState("");
   const [numEpisodes, setNumEpisodes] = useState(5);
+  const [cameras, setCameras] = useState<CameraConfig[]>([]);
+
+  // Camera stream release ref
+  const releaseStreamsRef = useRef<(() => void) | null>(null);
 
   // Direct follower control state
   const [showDirectFollowerModal, setShowDirectFollowerModal] = useState(false);
@@ -55,6 +60,30 @@ const Landing = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
 
+  // Clear camera state and release streams when returning to landing page
+  useEffect(() => {
+    // If we have cameras and returning from a recording session, clear them
+    if (cameras.length > 0) {
+      console.log(
+        "🧹 Landing page: Cleaning up camera state from previous session"
+      );
+      if (releaseStreamsRef.current) {
+        releaseStreamsRef.current();
+      }
+      setCameras([]); // Clear camera configuration
+    }
+  }, []); // Only run on mount
+
+  // Cleanup when leaving landing page
+  useEffect(() => {
+    return () => {
+      if (releaseStreamsRef.current) {
+        console.log("🧹 Landing page: Cleaning up camera streams on unmount");
+        releaseStreamsRef.current();
+      }
+    };
+  }, []);
+
   const loadConfigs = async () => {
     setIsLoadingConfigs(true);
     try {
@@ -99,6 +128,15 @@ const Landing = () => {
     }
   };
 
+  const handleRecordingModalClose = (open: boolean) => {
+    setShowRecordingModal(open);
+    // Release camera streams when modal is closed
+    if (!open && releaseStreamsRef.current) {
+      console.log("🧹 Modal closed: Releasing camera streams");
+      releaseStreamsRef.current();
+    }
+  };
+
   const handleTrainingClick = () => {
     if (robotModel) {
       navigate("/training");
@@ -182,6 +220,40 @@ const Landing = () => {
       return;
     }
 
+    // 🔓 CRITICAL: Release all camera streams before backend accesses them
+    if (cameras.length > 0 && releaseStreamsRef.current) {
+      console.log("🔓 Releasing camera streams before starting recording...");
+
+      toast({
+        title: "Preparing Camera Resources",
+        description: `Releasing ${cameras.length} camera stream(s) for recording...`,
+      });
+
+      releaseStreamsRef.current();
+
+      // Wait a moment for camera resources to be fully released
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      console.log("✅ Camera streams released, proceeding with recording...");
+
+      toast({
+        title: "Camera Resources Ready",
+        description:
+          "Camera streams released successfully. Starting recording...",
+      });
+    }
+
+    // Convert cameras to the LeRobot format
+    const cameraDict = cameras.reduce((acc, cam) => {
+      acc[cam.name] = {
+        type: cam.type,
+        camera_index: cam.camera_index,
+        width: cam.width,
+        height: cam.height,
+        fps: cam.fps,
+      };
+      return acc;
+    }, {} as Record<string, { type: string; camera_index?: number; width: number; height: number; fps?: number }>);
+
     const recordingConfig = {
       leader_port: recordLeaderPort,
       follower_port: recordFollowerPort,
@@ -196,6 +268,7 @@ const Landing = () => {
       video: true,
       push_to_hub: false,
       resume: false,
+      cameras: cameraDict,
     };
 
     setShowRecordingModal(false);
@@ -330,10 +403,7 @@ const Landing = () => {
   return (
     <div className="min-h-screen bg-black text-white flex flex-col items-center p-4 pt-12 sm:pt-20">
       <div className="w-full max-w-7xl mx-auto px-4 mb-12">
-        <LandingHeader
-          onShowInstructions={() => setShowUsageModal(true)}
-          onShowNgrokConfig={() => setShowNgrokModal(true)}
-        />
+        <LandingHeader onShowInstructions={() => setShowUsageModal(true)} />
       </div>
 
       <div className="p-8 bg-gray-900 rounded-lg shadow-xl w-full max-w-4xl space-y-6 border border-gray-700">
@@ -374,7 +444,7 @@ const Landing = () => {
 
       <RecordingModal
         open={showRecordingModal}
-        onOpenChange={setShowRecordingModal}
+        onOpenChange={handleRecordingModalClose}
         leaderPort={recordLeaderPort}
         setLeaderPort={setRecordLeaderPort}
         followerPort={recordFollowerPort}
@@ -391,8 +461,11 @@ const Landing = () => {
         setSingleTask={setSingleTask}
         numEpisodes={numEpisodes}
         setNumEpisodes={setNumEpisodes}
+        cameras={cameras}
+        setCameras={setCameras}
         isLoadingConfigs={isLoadingConfigs}
         onStart={handleStartRecording}
+        releaseStreamsRef={releaseStreamsRef}
       />
 
       <DirectFollowerModal
@@ -406,10 +479,6 @@ const Landing = () => {
         isLoadingConfigs={isLoadingConfigs}
         onStart={handleStartDirectFollower}
       />
-      <NgrokConfigModal
-        open={showNgrokModal}
-        onOpenChange={setShowNgrokModal}
-      />
     </div>
   );
 };

src/pages/PhoneCamera.tsx

@@ -1,223 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { useSearchParams } from "react-router-dom";
-import { Camera, WifiOff, Smartphone } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import { useApi } from "@/contexts/ApiContext";
-
-const PhoneCamera = () => {
-  const [searchParams] = useSearchParams();
-  const sessionId = searchParams.get("sessionId");
-  const { wsBaseUrl } = useApi();
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const wsRef = useRef<WebSocket | null>(null);
-  const streamRef = useRef<MediaStream | null>(null);
-  const [isConnected, setIsConnected] = useState(false);
-  const [isStreaming, setIsStreaming] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (!sessionId) {
-      setError("No session ID provided");
-      return;
-    }
-
-    connectWebSocket();
-    return () => {
-      cleanup();
-    };
-  }, [sessionId]);
-
-  const connectWebSocket = () => {
-    try {
-      const ws = new WebSocket(`${wsBaseUrl}/ws/camera/${sessionId}`);
-      wsRef.current = ws;
-
-      ws.onopen = () => {
-        console.log("Phone camera WebSocket connected");
-        setIsConnected(true);
-        setError(null);
-        // Notify the recording page that a camera is connected
-        ws.send("camera_connected");
-      };
-
-      ws.onclose = () => {
-        console.log("Phone camera WebSocket disconnected");
-        setIsConnected(false);
-      };
-
-      ws.onerror = (error) => {
-        console.error("Phone camera WebSocket error:", error);
-        setError("Failed to connect to recording session");
-        setIsConnected(false);
-      };
-    } catch (error) {
-      console.error("Failed to create WebSocket:", error);
-      setError("Failed to establish connection");
-    }
-  };
-
-  const startCamera = async () => {
-    try {
-      const stream = await navigator.mediaDevices.getUserMedia({
-        video: {
-          facingMode: "environment", // Use back camera
-          width: { ideal: 640 },
-          height: { ideal: 480 },
-        },
-        audio: false,
-      });
-
-      streamRef.current = stream;
-      if (videoRef.current) {
-        videoRef.current.srcObject = stream;
-      }
-
-      setIsStreaming(true);
-      startVideoStreaming();
-    } catch (error) {
-      console.error("Error accessing camera:", error);
-      setError("Could not access camera. Please check permissions.");
-    }
-  };
-
-  const startVideoStreaming = () => {
-    if (!videoRef.current || !canvasRef.current || !wsRef.current) return;
-
-    const video = videoRef.current;
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d");
-    const ws = wsRef.current;
-
-    const sendFrame = () => {
-      if (!ctx || !isConnected || !isStreaming) return;
-
-      // Draw video frame to canvas
-      canvas.width = video.videoWidth || 640;
-      canvas.height = video.videoHeight || 480;
-      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
-
-      // Convert to blob and send via WebSocket
-      canvas.toBlob(
-        (blob) => {
-          if (blob && ws.readyState === WebSocket.OPEN) {
-            ws.send(blob);
-          }
-        },
-        "image/jpeg",
-        0.7
-      );
-    };
-
-    // Send frames at ~10 FPS
-    const interval = setInterval(sendFrame, 100);
-
-    return () => clearInterval(interval);
-  };
-
-  const cleanup = () => {
-    if (streamRef.current) {
-      streamRef.current.getTracks().forEach((track) => track.stop());
-    }
-    if (wsRef.current) {
-      wsRef.current.close();
-    }
-  };
-
-  if (!sessionId) {
-    return (
-      <div className="min-h-screen bg-black text-white flex items-center justify-center p-4">
-        <div className="text-center">
-          <WifiOff className="w-16 h-16 text-red-400 mx-auto mb-4" />
-          <h1 className="text-2xl font-bold mb-2">Invalid Session</h1>
-          <p className="text-gray-400">No session ID provided in the URL.</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-black text-white flex flex-col">
-      {/* Header */}
-      <div className="bg-gray-900 p-4 border-b border-gray-700">
-        <div className="flex items-center justify-center">
-          <h1 className="text-2xl font-bold">LeLab Camera</h1>
-        </div>
-      </div>
-
-      {/* Camera Section */}
-      <div className="flex-1 flex flex-col p-4">
-        {error ? (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center">
-              <WifiOff className="w-16 h-16 text-red-400 mx-auto mb-4" />
-              <h2 className="text-xl font-bold mb-2">Connection Error</h2>
-              <p className="text-gray-400 mb-4">{error}</p>
-              <Button
-                onClick={connectWebSocket}
-                className="bg-blue-500 hover:bg-blue-600"
-              >
-                Retry Connection
-              </Button>
-            </div>
-          </div>
-        ) : !isConnected ? (
-          <div className="flex-1 flex items-center justify-center">
-            <div className="text-center">
-              <div className="w-16 h-16 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin mx-auto mb-4"></div>
-              <h2 className="text-xl font-bold mb-2">Connecting...</h2>
-              <p className="text-gray-400">Connecting to recording session</p>
-            </div>
-          </div>
-        ) : !isStreaming ? (
-          <div className="flex-1 flex flex-col items-center justify-center">
-            <Camera className="w-16 h-16 text-blue-400 mb-4" />
-            <h2 className="text-xl font-bold mb-2">Ready to Start</h2>
-            <p className="text-gray-400 mb-6 text-center">
-              Tap the button below to start your camera and begin streaming to
-              the recording session.
-            </p>
-            <Button
-              onClick={startCamera}
-              className="bg-blue-500 hover:bg-blue-600 px-8 py-4 text-lg"
-            >
-              <Camera className="w-5 h-5 mr-2" />
-              Start Camera
-            </Button>
-          </div>
-        ) : (
-          <div className="flex-1 flex flex-col">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center gap-2">
-                <div className="w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
-                <span className="text-red-400 font-semibold">STREAMING</span>
-              </div>
-              <Smartphone className="w-5 h-5 text-blue-400" />
-            </div>
-
-            <div className="flex-1 bg-gray-900 rounded-lg overflow-hidden">
-              <video
-                ref={videoRef}
-                autoPlay
-                playsInline
-                muted
-                className="w-full h-full object-cover"
-              />
-            </div>
-
-            <canvas ref={canvasRef} className="hidden" />
-
-            <div className="mt-4 text-center">
-              <p className="text-gray-400 text-sm">
-                Your camera is now streaming to the recording session. Keep this
-                page open during recording.
-              </p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default PhoneCamera;

src/pages/Recording.tsx

@@ -5,7 +5,7 @@ import { useToast } from "@/hooks/use-toast";
 import { ArrowLeft, Square, SkipForward, RotateCcw, Play } from "lucide-react";
 import UrdfViewer from "@/components/UrdfViewer";
 import UrdfProcessorInitializer from "@/components/UrdfProcessorInitializer";
-import PhoneCameraFeed from "@/components/recording/PhoneCameraFeed";
+
 import { useApi } from "@/contexts/ApiContext";
 
 interface RecordingConfig {
@@ -56,10 +56,9 @@ const Recording = () => {
   );
   const [recordingSessionStarted, setRecordingSessionStarted] = useState(false);
 
-  // QR Code and camera states
-  const [showQrModal, setShowQrModal] = useState(false);
-  const [sessionId, setSessionId] = useState<string>("");
-  const [phoneCameraConnected, setPhoneCameraConnected] = useState(false);
+  // Local UI state for immediate user feedback
+  const [transitioningToReset, setTransitioningToReset] = useState(false);
+  const [transitioningToNext, setTransitioningToNext] = useState(false);
 
   // Redirect if no config provided
   useEffect(() => {
@@ -92,8 +91,25 @@ const Recording = () => {
           );
           if (response.ok) {
             const status = await response.json();
+            console.log(
+              `📊 Backend Status: ${status.current_phase} | Transition States: reset=${transitioningToReset}, next=${transitioningToNext}`
+            );
             setBackendStatus(status);
 
+            // 🎯 CLEAR TRANSITION STATES: Only clear when backend actually reaches the expected phase
+            if (status.current_phase === "resetting" && transitioningToReset) {
+              console.log(
+                "✅ Clearing transitioningToReset - backend reached resetting phase"
+              );
+              setTransitioningToReset(false);
+            }
+            if (status.current_phase === "recording" && transitioningToNext) {
+              console.log(
+                "✅ Clearing transitioningToNext - backend reached recording phase"
+              );
+              setTransitioningToNext(false);
+            }
+
             // If backend recording stopped and session ended, navigate to upload
             if (
               !status.recording_active &&
@@ -126,52 +142,14 @@ const Recording = () => {
     return () => {
       if (statusInterval) clearInterval(statusInterval);
     };
-  }, [recordingSessionStarted, recordingConfig, navigate, toast]);
-
-  // Generate session ID when component loads
-  useEffect(() => {
-    const newSessionId = `session_${Date.now()}_${Math.random()
-      .toString(36)
-      .substr(2, 9)}`;
-    setSessionId(newSessionId);
-  }, []);
-
-  // Listen for phone camera connections
-  useEffect(() => {
-    if (!sessionId) return;
-
-    const connectToPhoneCameraWS = () => {
-      const ws = new WebSocket(`${wsBaseUrl}/ws/camera/${sessionId}`);
-
-      ws.onopen = () => {
-        console.log("Phone camera WebSocket connected");
-      };
-
-      ws.onmessage = (event) => {
-        if (event.data === "camera_connected" && !phoneCameraConnected) {
-          setPhoneCameraConnected(true);
-          toast({
-            title: "Phone Camera Connected!",
-            description: "New camera feed detected and connected successfully.",
-          });
-        }
-      };
-
-      ws.onclose = () => {
-        console.log("Phone camera WebSocket disconnected");
-        setPhoneCameraConnected(false);
-      };
-
-      ws.onerror = (error) => {
-        console.error("Phone camera WebSocket error:", error);
-      };
-
-      return ws;
-    };
-
-    const ws = connectToPhoneCameraWS();
-    return () => ws.close();
-  }, [sessionId, phoneCameraConnected, toast]);
+  }, [
+    recordingSessionStarted,
+    recordingConfig,
+    navigate,
+    toast,
+    transitioningToReset,
+    transitioningToNext,
+  ]);
 
   const formatTime = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
@@ -218,6 +196,24 @@ const Recording = () => {
   const handleExitEarly = async () => {
     if (!backendStatus?.available_controls.exit_early) return;
 
+    // 🎯 IMMEDIATE UI FEEDBACK: Show transition state before backend response
+    const currentPhase = backendStatus.current_phase;
+    if (currentPhase === "recording") {
+      console.log("🎯 Setting transitioningToReset = true");
+      setTransitioningToReset(true);
+      toast({
+        title: "Ending Episode Recording",
+        description: `Moving to reset phase for episode ${backendStatus.current_episode}...`,
+      });
+    } else if (currentPhase === "resetting") {
+      console.log("🎯 Setting transitioningToNext = true");
+      setTransitioningToNext(true);
+      toast({
+        title: "Reset Complete",
+        description: `Moving to next episode...`,
+      });
+    }
+
     try {
       const response = await fetchWithHeaders(
         `${baseUrl}/recording-exit-early`,
@@ -228,19 +224,12 @@ const Recording = () => {
       const data = await response.json();
 
       if (response.ok) {
-        const currentPhase = backendStatus.current_phase;
-        if (currentPhase === "recording") {
-          toast({
-            title: "Episode Recording Ended",
-            description: `Episode ${backendStatus.current_episode} recording completed. Moving to reset phase.`,
-          });
-        } else if (currentPhase === "resetting") {
-          toast({
-            title: "Reset Complete",
-            description: `Moving to next episode...`,
-          });
-        }
+        // ✅ SUCCESS: Don't clear transition states here - let them persist until backend phase changes
+        // The transition states will be cleared when the backend status actually updates to the new phase
       } else {
+        // Clear transition states on error
+        setTransitioningToReset(false);
+        setTransitioningToNext(false);
         toast({
           title: "Error",
           description: data.message,
@@ -248,6 +237,9 @@ const Recording = () => {
         });
       }
     } catch (error) {
+      // Clear transition states on error
+      setTransitioningToReset(false);
+      setTransitioningToNext(false);
       toast({
         title: "Connection Error",
         description: "Could not connect to the backend server.",
@@ -359,12 +351,20 @@ const Recording = () => {
   const sessionElapsedTime = backendStatus.session_elapsed_seconds || 0;
 
   const getPhaseTitle = () => {
+    // 🎯 IMMEDIATE FEEDBACK: Show transition titles
+    if (transitioningToReset) return "Transitioning to Reset";
+    if (transitioningToNext) return "Moving to Next Episode";
+
     if (currentPhase === "recording") return "Episode Recording Time";
     if (currentPhase === "resetting") return "Environment Reset Time";
     return "Phase Time";
   };
 
   const getStatusText = () => {
+    // 🎯 IMMEDIATE FEEDBACK: Show transition states
+    if (transitioningToReset) return "MOVING TO RESET PHASE";
+    if (transitioningToNext) return "MOVING TO NEXT EPISODE";
+
     if (currentPhase === "recording")
       return `RECORDING EPISODE ${currentEpisode}`;
     if (currentPhase === "resetting") return "RESET THE ENVIRONMENT";
@@ -373,6 +373,10 @@ const Recording = () => {
   };
 
   const getStatusColor = () => {
+    // 🎯 IMMEDIATE FEEDBACK: Show transition state colors
+    if (transitioningToReset) return "text-blue-400"; // Blue for transition
+    if (transitioningToNext) return "text-blue-400"; // Blue for transition
+
     if (currentPhase === "recording") return "text-red-400";
     if (currentPhase === "resetting") return "text-orange-400";
     if (currentPhase === "preparing") return "text-yellow-400";
@@ -380,6 +384,10 @@ const Recording = () => {
   };
 
   const getDotColor = () => {
+    // 🎯 IMMEDIATE FEEDBACK: Show transition state dots with animation
+    if (transitioningToReset) return "bg-blue-500 animate-pulse"; // Blue pulsing for transition
+    if (transitioningToNext) return "bg-blue-500 animate-pulse"; // Blue pulsing for transition
+
     if (currentPhase === "recording") return "bg-red-500 animate-pulse";
     if (currentPhase === "resetting") return "bg-orange-500 animate-pulse";
     if (currentPhase === "preparing") return "bg-yellow-500";
@@ -497,11 +505,23 @@ const Recording = () => {
               <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
                 <Button
                   onClick={handleExitEarly}
-                  disabled={!backendStatus.available_controls.exit_early}
+                  disabled={
+                    !backendStatus.available_controls.exit_early ||
+                    transitioningToReset
+                  }
                   className="bg-green-500 hover:bg-green-600 text-white font-semibold py-4 text-lg disabled:opacity-50"
                 >
-                  <SkipForward className="w-5 h-5 mr-2" />
-                  End Episode
+                  {transitioningToReset ? (
+                    <>
+                      <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                      Moving to Reset...
+                    </>
+                  ) : (
+                    <>
+                      <SkipForward className="w-5 h-5 mr-2" />
+                      End Episode
+                    </>
+                  )}
                 </Button>
 
                 <Button
@@ -529,11 +549,23 @@ const Recording = () => {
               <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <Button
                   onClick={handleExitEarly}
-                  disabled={!backendStatus.available_controls.exit_early}
+                  disabled={
+                    !backendStatus.available_controls.exit_early ||
+                    transitioningToNext
+                  }
                   className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-6 text-xl disabled:opacity-50"
                 >
-                  <Play className="w-6 h-6 mr-2" />
-                  Continue to Next Phase
+                  {transitioningToNext ? (
+                    <>
+                      <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-white mr-2"></div>
+                      Moving to Next Episode...
+                    </>
+                  ) : (
+                    <>
+                      <Play className="w-6 h-6 mr-2" />
+                      Continue to Next Phase
+                    </>
+                  )}
                 </Button>
 
                 <Button
@@ -615,16 +647,6 @@ const Recording = () => {
               )}
             </div>
           </div>
-
-          {/* Phone Camera Feed - takes up 1 column */}
-          {phoneCameraConnected && (
-            <div className="bg-gray-900 rounded-lg p-4 border border-gray-700">
-              <h3 className="text-sm font-semibold text-gray-400 mb-3">
-                Phone Camera
-              </h3>
-              <PhoneCameraFeed sessionId={sessionId} />
-            </div>
-          )}
         </div>
 
         {/* URDF Viewer Section */}