mega big updates pre-demo

src/App.tsx

@@ -1,43 +1,61 @@
-
-import { Toaster } from "@/components/ui/toaster";
-import { Toaster as Sonner } from "@/components/ui/sonner";
-import { TooltipProvider } from "@/components/ui/tooltip";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+  BrowserRouter,
+} from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Index from "./pages/Index";
-import NotFound from "./pages/NotFound";
-import Landing from "./pages/Landing";
-import TeleoperationPage from "./pages/Teleoperation";
-import Recording from "./pages/Recording";
-import Calibration from "./pages/Calibration";
-import Training from "./pages/Training";
-import { UrdfProvider } from "./contexts/UrdfContext";
-import EditDataset from "./pages/EditDataset";
+import { ThemeProvider } from "@/contexts/ThemeContext";
+import { UrdfProvider } from "@/contexts/UrdfContext";
+import { DragAndDropProvider } from "@/contexts/DragAndDropContext";
+import { Toaster } from "@/components/ui/toaster";
+import Landing from "@/pages/Landing";
+import Teleoperation from "@/pages/Teleoperation";
+import DirectFollower from "@/pages/DirectFollower";
+import Calibration from "@/pages/Calibration";
+import Recording from "@/pages/Recording";
+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";
+import { ApiProvider } from "./contexts/ApiContext";
 
 const queryClient = new QueryClient();
 
-const App = () => (
-  <QueryClientProvider client={queryClient}>
-    <TooltipProvider>
-      <Toaster />
-      <Sonner />
-      <UrdfProvider>
-        <BrowserRouter>
-          <Routes>
-            <Route path="/" element={<Landing />} />
-            <Route path="/control" element={<Index />} />
-            <Route path="/teleoperation" element={<TeleoperationPage />} />
-            <Route path="/recording" element={<Recording />} />
-            <Route path="/calibration" element={<Calibration />} />
-            <Route path="/training" element={<Training />} />
-            <Route path="/edit-dataset" element={<EditDataset />} />
-            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
-            <Route path="*" element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
-      </UrdfProvider>
-    </TooltipProvider>
-  </QueryClientProvider>
-);
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <ThemeProvider>
+          <ApiProvider>
+            <UrdfProvider>
+              <DragAndDropProvider>
+                <BrowserRouter>
+                  <Routes>
+                    <Route path="/" element={<Landing />} />
+                    <Route path="/teleoperation" element={<Teleoperation />} />
+                    <Route path="/recording" element={<Recording />} />
+                    <Route path="/upload" element={<Upload />} />
+                    <Route path="/training" element={<Training />} />
+                    <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 />
+                </BrowserRouter>
+              </DragAndDropProvider>
+            </UrdfProvider>
+          </ApiProvider>
+        </ThemeProvider>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+}
 
 export default App;

src/components/control/DirectFollowerControlPanel.tsx

@@ -0,0 +1,99 @@
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+
+type Joint = {
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  default: number;
+};
+
+const JOINTS: Joint[] = [
+  { name: "shoulder_pan.pos", label: "Shoulder Pan", min: -180, max: 180, step: 1, default: 0 },
+  { name: "shoulder_lift.pos", label: "Shoulder Lift", min: -180, max: 180, step: 1, default: 0 },
+  { name: "elbow_flex.pos", label: "Elbow Flex", min: -180, max: 180, step: 1, default: 0 },
+  { name: "wrist_flex.pos", label: "Wrist Flex", min: -180, max: 180, step: 1, default: 0 },
+  { name: "wrist_roll.pos", label: "Wrist Roll", min: -180, max: 180, step: 1, default: 0 },
+  { name: "gripper.pos", label: "Gripper", min: 0, max: 100, step: 1, default: 0 },
+];
+
+type Props = {
+  onSendAction?: (values: Record<string, number>) => void;
+  className?: string;
+};
+const initialJointState = () => {
+  const state: Record<string, number> = {};
+  JOINTS.forEach(j => (state[j.name] = j.default));
+  return state;
+};
+
+const DirectFollowerControlPanel: React.FC<Props> = ({ onSendAction, className }) => {
+  const [jointValues, setJointValues] = useState<Record<string, number>>(initialJointState);
+
+  // Handler for slider changes
+  const handleSliderChange = (joint: Joint, value: number[]) => {
+    setJointValues(v => ({ ...v, [joint.name]: value[0] }));
+  };
+
+  // Quick action examples
+  const handleHome = () => {
+    const home: Record<string, number> = {};
+    JOINTS.forEach(j => (home[j.name] = 0));
+    setJointValues(home);
+  };
+
+  const handleSend = () => {
+    // You'd call the backend API here. For now, just call prop if present.
+    if (onSendAction) onSendAction(jointValues);
+
+    // TODO: Real API integration
+    fetch("http://localhost:8000/send-follower-command", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(jointValues),
+    }).then(res => {
+      // Optionally handle response
+      // Could use a toast here
+    });
+  };
+
+  return (
+    <div className={`w-full max-w-lg mx-auto p-6 bg-gray-900 rounded-lg shadow space-y-6 ${className || ""}`}>
+      <h2 className="text-xl font-bold text-white mb-4 text-center">Direct Follower Control</h2>
+      <div className="space-y-4">
+        {JOINTS.map(joint => (
+          <div key={joint.name} className="flex flex-col">
+            <label className="text-gray-300 text-sm mb-1 flex justify-between">
+              <span>{joint.label}</span>
+              <span className="ml-2 font-mono text-gray-400">{jointValues[joint.name]}</span>
+            </label>
+            <Slider
+              min={joint.min}
+              max={joint.max}
+              step={joint.step}
+              value={[jointValues[joint.name]]}
+              onValueChange={value => handleSliderChange(joint, value)}
+              className="my-1"
+            />
+            <div className="flex justify-between text-xs text-gray-500 select-none">
+              <span>{joint.min}</span>
+              <span>{joint.max}</span>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className="flex gap-3 justify-center pt-4">
+        <Button variant="secondary" onClick={handleHome}>Home</Button>
+        <Button variant="default" className="px-8" onClick={handleSend}>
+          Send Action
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DirectFollowerControlPanel;

src/components/landing/ActionList.tsx

@@ -1,7 +1,8 @@
 
 import React from 'react';
 import { Button } from "@/components/ui/button";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, AlertTriangle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { Action } from './types';
 
 interface ActionListProps {
@@ -14,43 +15,62 @@ const ActionList: React.FC<ActionListProps> = ({ actions, robotModel }) => {
   const isDisabled = !robotModel || isLeKiwi;
 
   return (
-    <div className="pt-6">
-      {!robotModel && (
-        <p className="text-center text-gray-400 mb-4">
-          Please select a robot model to continue.
-        </p>
-      )}
-      {isLeKiwi && (
-        <p className="text-center text-yellow-500 mb-4">
-          LeKiwi model is not yet supported. Please select another model to continue.
-        </p>
-      )}
-      <div className="space-y-4">
-        {actions.map((action, index) => (
-          <div
-            key={index}
-            className={`flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700 transition-opacity ${
-              isDisabled ? "opacity-50" : ""
-            }`}
-          >
-            <div>
-              <h3 className="font-semibold text-lg">{action.title}</h3>
-              <p className="text-gray-400 text-sm">
-                {action.description}
-              </p>
-            </div>
-            <Button
-              onClick={action.handler}
-              size="icon"
-              className={`${action.color} text-white`}
-              disabled={isDisabled}
+    <TooltipProvider>
+      <div className="pt-6">
+        {!robotModel && (
+          <p className="text-center text-gray-400 mb-4">
+            Please select a robot model to continue.
+          </p>
+        )}
+        {isLeKiwi && (
+          <p className="text-center text-yellow-500 mb-4">
+            LeKiwi model is not yet supported. Please select another model to continue.
+          </p>
+        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {actions.map((action, index) => (
+            <div
+              key={index}
+              className={`flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700 transition-opacity ${
+                isDisabled ? "opacity-50" : ""
+              }`}
             >
-              <ArrowRight className="w-5 h-5" />
-            </Button>
-          </div>
-        ))}
+              <div className="flex items-center gap-2">
+                <div>
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-semibold text-lg">{action.title}</h3>
+                    {action.isWorkInProgress && (
+                      <div className="flex items-center gap-1">
+                        <Tooltip>
+                          <TooltipTrigger>
+                            <AlertTriangle className="w-4 h-4 text-yellow-500" />
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            <p>Work in progress</p>
+                          </TooltipContent>
+                        </Tooltip>
+                        <span className="text-yellow-500 text-xs font-medium">Work in Progress</span>
+                      </div>
+                    )}
+                  </div>
+                  <p className="text-gray-400 text-sm">
+                    {action.description}
+                  </p>
+                </div>
+              </div>
+              <Button
+                onClick={action.handler}
+                size="icon"
+                className={`${action.color} text-white`}
+                disabled={isDisabled}
+              >
+                <ArrowRight className="w-5 h-5" />
+              </Button>
+            </div>
+          ))}
+        </div>
       </div>
-    </div>
+    </TooltipProvider>
   );
 };
 

src/components/landing/DirectFollowerModal.tsx

@@ -0,0 +1,178 @@
+
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Settings } from "lucide-react";
+import PortDetectionModal from "@/components/ui/PortDetectionModal";
+import PortDetectionButton from "@/components/ui/PortDetectionButton";
+
+interface DirectFollowerModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  followerPort: string;
+  setFollowerPort: (value: string) => void;
+  followerConfig: string;
+  setFollowerConfig: (value: string) => void;
+  followerConfigs: string[];
+  isLoadingConfigs: boolean;
+  onStart: () => void;
+}
+
+const DirectFollowerModal: React.FC<DirectFollowerModalProps> = ({
+  open,
+  onOpenChange,
+  followerPort,
+  setFollowerPort,
+  followerConfig,
+  setFollowerConfig,
+  followerConfigs,
+  isLoadingConfigs,
+  onStart,
+}) => {
+  const [showPortDetection, setShowPortDetection] = useState(false);
+
+  // Load saved follower port on component mount
+  useEffect(() => {
+    const loadSavedPort = async () => {
+      try {
+        const followerResponse = await fetch(
+          "http://localhost:8000/robot-port/follower"
+        );
+        const followerData = await followerResponse.json();
+        if (followerData.status === "success" && followerData.default_port) {
+          setFollowerPort(followerData.default_port);
+        }
+      } catch (error) {
+        console.error("Error loading saved follower port:", error);
+      }
+    };
+
+    if (open) {
+      loadSavedPort();
+    }
+  }, [open, setFollowerPort]);
+
+  const handlePortDetection = () => {
+    setShowPortDetection(true);
+  };
+
+  const handlePortDetected = (port: string) => {
+    setFollowerPort(port);
+  };
+
+  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">
+            <Settings className="w-8 h-8 text-blue-500" />
+          </div>
+          <DialogTitle className="text-white text-center text-2xl font-bold">
+            Configure Direct Follower Control
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6 py-4">
+          <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
+            Configure the follower robot arm for direct control with 6-axis commands.
+          </DialogDescription>
+
+          <div className="grid grid-cols-1 gap-6">
+            <div className="space-y-2">
+              <Label
+                htmlFor="followerPort"
+                className="text-sm font-medium text-gray-300"
+              >
+                Follower Port
+              </Label>
+              <div className="flex gap-2">
+                <Input
+                  id="followerPort"
+                  value={followerPort}
+                  onChange={(e) => setFollowerPort(e.target.value)}
+                  placeholder="/dev/tty.usbmodem5A460816621"
+                  className="bg-gray-800 border-gray-700 text-white flex-1"
+                />
+                <PortDetectionButton
+                  onClick={handlePortDetection}
+                  robotType="follower"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <Label
+                htmlFor="followerConfig"
+                className="text-sm font-medium text-gray-300"
+              >
+                Follower Calibration Config
+              </Label>
+              <Select value={followerConfig} onValueChange={setFollowerConfig}>
+                <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                  <SelectValue
+                    placeholder={
+                      isLoadingConfigs
+                        ? "Loading configs..."
+                        : "Select follower config"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-700">
+                  {followerConfigs.map((config) => (
+                    <SelectItem
+                      key={config}
+                      value={config}
+                      className="text-white hover:bg-gray-700"
+                    >
+                      {config}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+            <Button
+              onClick={onStart}
+              className="w-full sm:w-auto bg-blue-500 hover:bg-blue-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-blue-500/30 hover:shadow-lg hover:shadow-blue-500/40"
+              disabled={isLoadingConfigs}
+            >
+              Start Direct Control
+            </Button>
+            <Button
+              onClick={() => onOpenChange(false)}
+              variant="outline"
+              className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+
+      <PortDetectionModal
+        open={showPortDetection}
+        onOpenChange={setShowPortDetection}
+        robotType="follower"
+        onPortDetected={handlePortDetected}
+      />
+    </Dialog>
+  );
+};
+
+export default DirectFollowerModal;

src/components/landing/LandingHeader.tsx

@@ -1,9 +1,68 @@
-import React from 'react';
-const LandingHeader = () => {
-  return <div className="text-center space-y-4 max-w-lg w-full">
-      <img src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png" alt="LiveLab Logo" className="mx-auto h-20 w-20" />
-      <h1 className="text-5xl font-bold tracking-tight">LeLab</h1>
-      <p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
-    </div>;
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Info, Globe, Wifi, WifiOff } from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+
+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="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png"
+          alt="LiveLab Logo"
+          className="mx-auto h-20 w-20"
+        />
+        <h1 className="text-5xl font-bold tracking-tight">LeLab</h1>
+        <p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={onShowInstructions}
+          className="mx-auto"
+        >
+          <Info className="h-6 w-6 text-gray-400 hover:text-white" />
+        </Button>
+      </div>
+    </div>
+  );
 };
-export default LandingHeader;
+export default LandingHeader;

src/components/landing/NgrokConfigModal.tsx

@@ -0,0 +1,212 @@
+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

@@ -1,5 +1,4 @@
-
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -17,7 +16,11 @@ 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 { useApi } from "@/contexts/ApiContext";
 interface RecordingModalProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -40,7 +43,6 @@ interface RecordingModalProps {
   isLoadingConfigs: boolean;
   onStart: () => void;
 }
-
 const RecordingModal: React.FC<RecordingModalProps> = ({
   open,
   onOpenChange,
@@ -63,159 +65,305 @@ const RecordingModal: React.FC<RecordingModalProps> = ({
   isLoadingConfigs,
   onStart,
 }) => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const [showPortDetection, setShowPortDetection] = useState(false);
+  const [detectionRobotType, setDetectionRobotType] = useState<
+    "leader" | "follower"
+  >("leader");
+  const [showQrCodeModal, setShowQrCodeModal] = useState(false);
+  const [sessionId, setSessionId] = useState("");
+
+  // Load saved ports on component mount
+  useEffect(() => {
+    const loadSavedPorts = async () => {
+      try {
+        // Load leader port
+        const leaderResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-port/leader`
+        );
+        const leaderData = await leaderResponse.json();
+        if (leaderData.status === "success" && leaderData.default_port) {
+          setLeaderPort(leaderData.default_port);
+        }
+
+        // Load follower port
+        const followerResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-port/follower`
+        );
+        const followerData = await followerResponse.json();
+        if (followerData.status === "success" && followerData.default_port) {
+          setFollowerPort(followerData.default_port);
+        }
+      } catch (error) {
+        console.error("Error loading saved ports:", error);
+      }
+    };
+    if (open) {
+      loadSavedPorts();
+    }
+  }, [open, setLeaderPort, setFollowerPort]);
+  const handlePortDetection = (robotType: "leader" | "follower") => {
+    setDetectionRobotType(robotType);
+    setShowPortDetection(true);
+  };
+  const handlePortDetected = (port: string) => {
+    if (detectionRobotType === "leader") {
+      setLeaderPort(port);
+    } else {
+      setFollowerPort(port);
+    }
+  };
+  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}>
-      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8 max-h-[90vh] overflow-y-auto">
-        <DialogHeader>
-          <div className="flex justify-center items-center gap-4 mb-4">
-            <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
-              <span className="text-white font-bold text-sm">REC</span>
+    <>
+      <Dialog open={open} onOpenChange={onOpenChange}>
+        <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8 max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <div className="flex justify-center items-center mb-4">
+              <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
+                <span className="text-white font-bold text-sm">REC</span>
+              </div>
             </div>
-          </div>
-          <DialogTitle className="text-white text-center text-2xl font-bold">
-            Configure Recording
-          </DialogTitle>
-        </DialogHeader>
-        <div className="space-y-6 py-4">
-          <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
-            Configure the robot arm settings and dataset parameters for
-            recording.
-          </DialogDescription>
+            <DialogTitle className="text-white text-center text-2xl font-bold">
+              Configure Recording
+            </DialogTitle>
+          </DialogHeader>
+          <div className="space-y-6 py-4">
+            <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
+              Configure the robot arm settings and dataset parameters for
+              recording.
+            </DialogDescription>
 
-          <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">
-                Robot Configuration
+            <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>
-              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="recordLeaderPort" className="text-sm font-medium text-gray-300">
-                    Leader Port
-                  </Label>
-                  <Input
-                    id="recordLeaderPort"
-                    value={leaderPort}
-                    onChange={(e) => setLeaderPort(e.target.value)}
-                    placeholder="/dev/tty.usbmodem5A460816421"
-                    className="bg-gray-800 border-gray-700 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="recordLeaderConfig" className="text-sm font-medium text-gray-300">
-                    Leader Calibration Config
-                  </Label>
-                  <Select value={leaderConfig} onValueChange={setLeaderConfig}>
-                    <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
-                      <SelectValue placeholder={isLoadingConfigs ? "Loading configs..." : "Select leader config"} />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-700">
-                      {leaderConfigs.map((config) => (
-                        <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
-                          {config}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="recordFollowerPort" className="text-sm font-medium text-gray-300">
-                    Follower Port
-                  </Label>
-                  <Input
-                    id="recordFollowerPort"
-                    value={followerPort}
-                    onChange={(e) => setFollowerPort(e.target.value)}
-                    placeholder="/dev/tty.usbmodem5A460816621"
-                    className="bg-gray-800 border-gray-700 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="recordFollowerConfig" className="text-sm font-medium text-gray-300">
-                    Follower Calibration Config
-                  </Label>
-                  <Select value={followerConfig} onValueChange={setFollowerConfig}>
-                    <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
-                      <SelectValue placeholder={isLoadingConfigs ? "Loading configs..." : "Select follower config"} />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-700">
-                      {followerConfigs.map((config) => (
-                        <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
-                          {config}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
+              <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="space-y-4">
-              <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
-                Dataset Configuration
-              </h3>
-              <div className="grid grid-cols-1 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="datasetRepoId" className="text-sm font-medium text-gray-300">
-                    Dataset Repository ID *
-                  </Label>
-                  <Input
-                    id="datasetRepoId"
-                    value={datasetRepoId}
-                    onChange={(e) => setDatasetRepoId(e.target.value)}
-                    placeholder="username/dataset_name"
-                    className="bg-gray-800 border-gray-700 text-white"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="singleTask" className="text-sm font-medium text-gray-300">
-                    Task Name *
-                  </Label>
-                  <Input
-                    id="singleTask"
-                    value={singleTask}
-                    onChange={(e) => setSingleTask(e.target.value)}
-                    placeholder="e.g., pick_and_place"
-                    className="bg-gray-800 border-gray-700 text-white"
-                  />
+            <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">
+                  Robot Configuration
+                </h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="recordLeaderPort"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Leader Port
+                    </Label>
+                    <div className="flex gap-2">
+                      <Input
+                        id="recordLeaderPort"
+                        value={leaderPort}
+                        onChange={(e) => setLeaderPort(e.target.value)}
+                        placeholder="/dev/tty.usbmodem5A460816421"
+                        className="bg-gray-800 border-gray-700 text-white flex-1"
+                      />
+                      <PortDetectionButton
+                        onClick={() => handlePortDetection("leader")}
+                        robotType="leader"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="recordLeaderConfig"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Leader Calibration Config
+                    </Label>
+                    <Select
+                      value={leaderConfig}
+                      onValueChange={setLeaderConfig}
+                    >
+                      <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                        <SelectValue
+                          placeholder={
+                            isLoadingConfigs
+                              ? "Loading configs..."
+                              : "Select leader config"
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent className="bg-gray-800 border-gray-700">
+                        {leaderConfigs.map((config) => (
+                          <SelectItem
+                            key={config}
+                            value={config}
+                            className="text-white hover:bg-gray-700"
+                          >
+                            {config}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="recordFollowerPort"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Follower Port
+                    </Label>
+                    <div className="flex gap-2">
+                      <Input
+                        id="recordFollowerPort"
+                        value={followerPort}
+                        onChange={(e) => setFollowerPort(e.target.value)}
+                        placeholder="/dev/tty.usbmodem5A460816621"
+                        className="bg-gray-800 border-gray-700 text-white flex-1"
+                      />
+                      <PortDetectionButton
+                        onClick={() => handlePortDetection("follower")}
+                        robotType="follower"
+                      />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="recordFollowerConfig"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Follower Calibration Config
+                    </Label>
+                    <Select
+                      value={followerConfig}
+                      onValueChange={setFollowerConfig}
+                    >
+                      <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                        <SelectValue
+                          placeholder={
+                            isLoadingConfigs
+                              ? "Loading configs..."
+                              : "Select follower config"
+                          }
+                        />
+                      </SelectTrigger>
+                      <SelectContent className="bg-gray-800 border-gray-700">
+                        {followerConfigs.map((config) => (
+                          <SelectItem
+                            key={config}
+                            value={config}
+                            className="text-white hover:bg-gray-700"
+                          >
+                            {config}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
                 </div>
-                <div className="space-y-2">
-                  <Label htmlFor="numEpisodes" className="text-sm font-medium text-gray-300">
-                    Number of Episodes
-                  </Label>
-                  <Input
-                    id="numEpisodes"
-                    type="number"
-                    min="1"
-                    max="100"
-                    value={numEpisodes}
-                    onChange={(e) => setNumEpisodes(parseInt(e.target.value))}
-                    className="bg-gray-800 border-gray-700 text-white"
-                  />
+              </div>
+
+              <div className="space-y-4">
+                <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
+                  Dataset Configuration
+                </h3>
+                <div className="grid grid-cols-1 gap-4">
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="datasetRepoId"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Dataset Repository ID *
+                    </Label>
+                    <Input
+                      id="datasetRepoId"
+                      value={datasetRepoId}
+                      onChange={(e) => setDatasetRepoId(e.target.value)}
+                      placeholder="username/dataset_name"
+                      className="bg-gray-800 border-gray-700 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="singleTask"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Task Name *
+                    </Label>
+                    <Input
+                      id="singleTask"
+                      value={singleTask}
+                      onChange={(e) => setSingleTask(e.target.value)}
+                      placeholder="e.g., pick_and_place"
+                      className="bg-gray-800 border-gray-700 text-white"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label
+                      htmlFor="numEpisodes"
+                      className="text-sm font-medium text-gray-300"
+                    >
+                      Number of Episodes
+                    </Label>
+                    <Input
+                      id="numEpisodes"
+                      type="number"
+                      min="1"
+                      max="100"
+                      value={numEpisodes}
+                      onChange={(e) => setNumEpisodes(parseInt(e.target.value))}
+                      className="bg-gray-800 border-gray-700 text-white"
+                    />
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
 
-          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
-            <Button
-              onClick={onStart}
-              className="w-full sm:w-auto bg-red-500 hover:bg-red-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-red-500/30 hover:shadow-lg hover:shadow-red-500/40"
-              disabled={isLoadingConfigs}
-            >
-              Start Recording
-            </Button>
-            <Button
-              onClick={() => onOpenChange(false)}
-              variant="outline"
-              className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
-            >
-              Cancel
-            </Button>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+              <Button
+                onClick={onStart}
+                className="w-full sm:w-auto bg-red-500 hover:bg-red-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-red-500/30 hover:shadow-lg hover:shadow-red-500/40"
+                disabled={isLoadingConfigs}
+              >
+                Start Recording
+              </Button>
+              <Button
+                onClick={() => onOpenChange(false)}
+                variant="outline"
+                className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
+              >
+                Cancel
+              </Button>
+            </div>
           </div>
-        </div>
-      </DialogContent>
-    </Dialog>
+        </DialogContent>
+      </Dialog>
+
+      <PortDetectionModal
+        open={showPortDetection}
+        onOpenChange={setShowPortDetection}
+        robotType={detectionRobotType}
+        onPortDetected={handlePortDetected}
+      />
+
+      <QrCodeModal
+        open={showQrCodeModal}
+        onOpenChange={setShowQrCodeModal}
+        sessionId={sessionId}
+      />
+    </>
   );
 };
-
 export default RecordingModal;

src/components/landing/RobotModelSelector.tsx

@@ -9,31 +9,42 @@ const RobotModelSelector: React.FC<RobotModelSelectorProps> = ({
   robotModel,
   onValueChange
 }) => {
-  return <>
-      <h2 className="text-2xl font-semibold text-center text-white">
+  return <div className="flex items-center justify-center gap-6">
+      <h2 className="font-semibold text-white text-xl whitespace-nowrap">
         Select Robot Model
       </h2>
-      <RadioGroup value={robotModel} onValueChange={onValueChange} className="space-y-2">
+      <RadioGroup value={robotModel} onValueChange={onValueChange} className="flex items-center gap-3">
         <div>
           <RadioGroupItem value="SO100" id="so100" className="sr-only" />
-          <Label htmlFor="so100" className="flex items-center space-x-4 p-4 rounded-lg bg-gray-800 border border-gray-700 cursor-pointer transition-all">
-            <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center">
-              {robotModel === "SO100" && <span className="w-3 h-3 rounded-full bg-orange-500" />}
+          <Label htmlFor="so100" className="flex items-center gap-2 px-3 py-2 rounded-full bg-gray-800 border border-gray-700 cursor-pointer transition-all hover:bg-gray-750 min-w-[80px] justify-center">
+            <span className="w-4 h-4 rounded-full border-2 border-gray-500 flex items-center justify-center">
+              {robotModel === "SO100" && <span className="w-2 h-2 rounded-full bg-orange-500" />}
             </span>
-            <span className="text-lg flex-1">SO100/SO101
-          </span>
+            <span className="text-sm font-medium">SO100</span>
           </Label>
         </div>
         <div>
-          <RadioGroupItem value="LeKiwi" id="lekiwi" className="sr-only" />
-          <Label htmlFor="lekiwi" className="flex items-center space-x-4 p-4 rounded-lg bg-gray-800 border border-gray-700 cursor-pointer transition-all">
-            <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center">
-              {robotModel === "LeKiwi" && <span className="w-3 h-3 rounded-full bg-orange-500" />}
+          <RadioGroupItem value="SO101" id="so101" className="sr-only" />
+          <Label htmlFor="so101" className="flex items-center gap-2 px-3 py-2 rounded-full bg-gray-800 border border-gray-700 cursor-pointer transition-all hover:bg-gray-750 min-w-[80px] justify-center">
+            <span className="w-4 h-4 rounded-full border-2 border-gray-500 flex items-center justify-center">
+              {robotModel === "SO101" && <span className="w-2 h-2 rounded-full bg-orange-500" />}
             </span>
-            <span className="text-lg flex-1">LeKiwi</span>
+            <span className="text-sm font-medium">SO101</span>
+          </Label>
+        </div>
+        <div>
+          <RadioGroupItem value="LeKiwi" id="lekiwi" className="sr-only" disabled />
+          <Label htmlFor="lekiwi" className="flex items-center gap-2 rounded-full bg-gray-800 border border-gray-700 cursor-not-allowed opacity-50 transition-all min-w-[80px] justify-center px-[20px] py-[6px]">
+            <span className="w-4 h-4 rounded-full border-2 border-gray-500 flex items-center justify-center">
+              {robotModel === "LeKiwi" && <span className="w-2 h-2 rounded-full bg-orange-500" />}
+            </span>
+            <div className="flex flex-col items-center">
+              <span className="text-sm font-medium">LeKiwi</span>
+              <span className="text-xs text-gray-400">Not available</span>
+            </div>
           </Label>
         </div>
       </RadioGroup>
-    </>;
+    </div>;
 };
 export default RobotModelSelector;

src/components/landing/TeleoperationModal.tsx

@@ -1,5 +1,4 @@
-
-import React from 'react';
+import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -18,6 +17,9 @@ import {
   DialogDescription,
 } from "@/components/ui/dialog";
 import { Settings } from "lucide-react";
+import PortDetectionModal from "@/components/ui/PortDetectionModal";
+import PortDetectionButton from "@/components/ui/PortDetectionButton";
+import { useApi } from "@/contexts/ApiContext";
 
 interface TeleoperationModalProps {
   open: boolean;
@@ -52,6 +54,55 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
   isLoadingConfigs,
   onStart,
 }) => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const [showPortDetection, setShowPortDetection] = useState(false);
+  const [detectionRobotType, setDetectionRobotType] = useState<
+    "leader" | "follower"
+  >("leader");
+
+  // Load saved ports on component mount
+  useEffect(() => {
+    const loadSavedPorts = async () => {
+      try {
+        // Load leader port
+        const leaderResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-port/leader`
+        );
+        const leaderData = await leaderResponse.json();
+        if (leaderData.status === "success" && leaderData.default_port) {
+          setLeaderPort(leaderData.default_port);
+        }
+
+        // Load follower port
+        const followerResponse = await fetchWithHeaders(
+          `${baseUrl}/robot-port/follower`
+        );
+        const followerData = await followerResponse.json();
+        if (followerData.status === "success" && followerData.default_port) {
+          setFollowerPort(followerData.default_port);
+        }
+      } catch (error) {
+        console.error("Error loading saved ports:", error);
+      }
+    };
+
+    if (open) {
+      loadSavedPorts();
+    }
+  }, [open, setLeaderPort, setFollowerPort]);
+
+  const handlePortDetection = (robotType: "leader" | "follower") => {
+    setDetectionRobotType(robotType);
+    setShowPortDetection(true);
+  };
+
+  const handlePortDetected = (port: string) => {
+    if (detectionRobotType === "leader") {
+      setLeaderPort(port);
+    } else {
+      setFollowerPort(port);
+    }
+  };
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8">
@@ -71,33 +122,51 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
 
           <div className="grid grid-cols-1 gap-6">
             <div className="space-y-2">
-              <Label htmlFor="leaderPort" className="text-sm font-medium text-gray-300">
+              <Label
+                htmlFor="leaderPort"
+                className="text-sm font-medium text-gray-300"
+              >
                 Leader Port
               </Label>
-              <Input
-                id="leaderPort"
-                value={leaderPort}
-                onChange={(e) => setLeaderPort(e.target.value)}
-                placeholder="/dev/tty.usbmodem5A460816421"
-                className="bg-gray-800 border-gray-700 text-white"
-              />
+              <div className="flex gap-2">
+                <Input
+                  id="leaderPort"
+                  value={leaderPort}
+                  onChange={(e) => setLeaderPort(e.target.value)}
+                  placeholder="/dev/tty.usbmodem5A460816421"
+                  className="bg-gray-800 border-gray-700 text-white flex-1"
+                />
+                <PortDetectionButton
+                  onClick={() => handlePortDetection("leader")}
+                  robotType="leader"
+                />
+              </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="leaderConfig" className="text-sm font-medium text-gray-300">
+              <Label
+                htmlFor="leaderConfig"
+                className="text-sm font-medium text-gray-300"
+              >
                 Leader Calibration Config
               </Label>
               <Select value={leaderConfig} onValueChange={setLeaderConfig}>
                 <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                   <SelectValue
                     placeholder={
-                      isLoadingConfigs ? "Loading configs..." : "Select leader config"
+                      isLoadingConfigs
+                        ? "Loading configs..."
+                        : "Select leader config"
                     }
                   />
                 </SelectTrigger>
                 <SelectContent className="bg-gray-800 border-gray-700">
                   {leaderConfigs.map((config) => (
-                    <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                    <SelectItem
+                      key={config}
+                      value={config}
+                      className="text-white hover:bg-gray-700"
+                    >
                       {config}
                     </SelectItem>
                   ))}
@@ -106,33 +175,51 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="followerPort" className="text-sm font-medium text-gray-300">
+              <Label
+                htmlFor="followerPort"
+                className="text-sm font-medium text-gray-300"
+              >
                 Follower Port
               </Label>
-              <Input
-                id="followerPort"
-                value={followerPort}
-                onChange={(e) => setFollowerPort(e.target.value)}
-                placeholder="/dev/tty.usbmodem5A460816621"
-                className="bg-gray-800 border-gray-700 text-white"
-              />
+              <div className="flex gap-2">
+                <Input
+                  id="followerPort"
+                  value={followerPort}
+                  onChange={(e) => setFollowerPort(e.target.value)}
+                  placeholder="/dev/tty.usbmodem5A460816621"
+                  className="bg-gray-800 border-gray-700 text-white flex-1"
+                />
+                <PortDetectionButton
+                  onClick={() => handlePortDetection("follower")}
+                  robotType="follower"
+                />
+              </div>
             </div>
 
             <div className="space-y-2">
-              <Label htmlFor="followerConfig" className="text-sm font-medium text-gray-300">
+              <Label
+                htmlFor="followerConfig"
+                className="text-sm font-medium text-gray-300"
+              >
                 Follower Calibration Config
               </Label>
               <Select value={followerConfig} onValueChange={setFollowerConfig}>
                 <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
                   <SelectValue
                     placeholder={
-                      isLoadingConfigs ? "Loading configs..." : "Select follower config"
+                      isLoadingConfigs
+                        ? "Loading configs..."
+                        : "Select follower config"
                     }
                   />
                 </SelectTrigger>
                 <SelectContent className="bg-gray-800 border-gray-700">
                   {followerConfigs.map((config) => (
-                    <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                    <SelectItem
+                      key={config}
+                      value={config}
+                      className="text-white hover:bg-gray-700"
+                    >
                       {config}
                     </SelectItem>
                   ))}
@@ -159,6 +246,13 @@ const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
           </div>
         </div>
       </DialogContent>
+
+      <PortDetectionModal
+        open={showPortDetection}
+        onOpenChange={setShowPortDetection}
+        robotType={detectionRobotType}
+        onPortDetected={handlePortDetected}
+      />
     </Dialog>
   );
 };

src/components/landing/UsageInstructionsModal.tsx

@@ -0,0 +1,123 @@
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Terminal } from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+
+interface UsageInstructionsModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const UsageInstructionsModal: React.FC<UsageInstructionsModalProps> = ({
+  open,
+  onOpenChange,
+}) => {
+  const { baseUrl } = useApi();
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-700 text-gray-300 sm:max-w-xl">
+        <DialogHeader className="text-center sm:text-center">
+          <DialogTitle className="text-white flex items-center justify-center gap-2 text-xl">
+            <Terminal className="w-6 h-6" />
+            Running LeLab Locally
+          </DialogTitle>
+          <DialogDescription>
+            Instructions for setting up and running the project on your machine.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-8 text-sm py-4">
+          <div className="space-y-4">
+            <h4 className="font-semibold text-gray-100 text-lg mb-2 border-b border-gray-700 pb-2">
+              1. Installation
+            </h4>
+            <p>
+              Clone the repository from GitHub:{" "}
+              <a
+                href="https://github.com/nicolas-rabault/leLab"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:underline"
+              >
+                nicolas-rabault/leLab
+              </a>
+            </p>
+            <pre className="bg-gray-800 p-3 rounded-md text-xs overflow-x-auto text-left">
+              <code>
+                git clone https://github.com/nicolas-rabault/leLab
+                <br />
+                cd leLab
+              </code>
+            </pre>
+            <p className="mt-2 font-medium text-gray-200">
+              Install dependencies (virtual environment recommended):
+            </p>
+            <pre className="bg-gray-800 p-3 rounded-md text-xs overflow-x-auto text-left">
+              <code>
+                # Create and activate virtual environment
+                <br />
+                python -m venv .venv
+                <br />
+                source .venv/bin/activate
+                <br />
+                <br />
+                # Install in editable mode
+                <br />
+                pip install -e .
+              </code>
+            </pre>
+          </div>
+          <div className="space-y-4">
+            <h4 className="font-semibold text-gray-100 text-lg mb-2 border-b border-gray-700 pb-2">
+              2. Running the Application
+            </h4>
+            <p>After installation, use one of the command-line tools:</p>
+            <ul className="space-y-4 text-xs text-left">
+              <li>
+                <code className="bg-gray-800 p-1 rounded font-mono text-sm">
+                  lelab
+                </code>
+                <p className="text-gray-400 mt-1">
+                  Starts only the FastAPI backend server on{" "}
+                  <a
+                    href={baseUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-blue-400 hover:underline"
+                  >
+                    {baseUrl}
+                  </a>
+                  .
+                </p>
+              </li>
+              <li>
+                <code className="bg-gray-800 p-1 rounded font-mono text-sm">
+                  lelab-fullstack
+                </code>
+                <p className="text-gray-400 mt-1">
+                  Starts both FastAPI backend (port 8000) and this Vite frontend
+                  (port 8080).
+                </p>
+              </li>
+              <li>
+                <code className="bg-gray-800 p-1 rounded font-mono text-sm">
+                  lelab-frontend
+                </code>
+                <p className="text-gray-400 mt-1">
+                  Starts only the frontend development server.
+                </p>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UsageInstructionsModal;

src/components/landing/types.ts

@@ -4,4 +4,5 @@ export interface Action {
   description: string;
   handler: () => void;
   color: string;
+  isWorkInProgress?: boolean;
 }

src/components/recording/PhoneCameraFeed.tsx

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,145 @@
+
+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/components/replay/DatasetSelector.tsx

@@ -0,0 +1,45 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Database } from 'lucide-react';
+
+interface Dataset {
+    id: string;
+    name: string;
+}
+
+interface DatasetSelectorProps {
+    datasets: Dataset[];
+    selectedDataset: string | null;
+    onSelectDataset: (id: string | null) => void;
+}
+
+const DatasetSelector: React.FC<DatasetSelectorProps> = ({ datasets, selectedDataset, onSelectDataset }) => {
+    return (
+        <Card className="bg-gray-900 border-gray-700">
+            <CardHeader>
+                <CardTitle className="flex items-center gap-3 text-white">
+                    <Database className="w-5 h-5 text-purple-400" />
+                    Select Dataset
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <Select onValueChange={(value) => onSelectDataset(value)} value={selectedDataset ?? ''}>
+                    <SelectTrigger className="w-full bg-gray-800 border-gray-600 text-white">
+                        <SelectValue placeholder="Choose a dataset to replay..." />
+                    </SelectTrigger>
+                    <SelectContent className="bg-gray-800 text-white border-gray-600">
+                        {datasets.map(dataset => (
+                            <SelectItem key={dataset.id} value={dataset.id} className="focus:bg-gray-700">
+                                {dataset.name}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </CardContent>
+        </Card>
+    );
+};
+
+export default DatasetSelector;

src/components/replay/EpisodePlayer.tsx

@@ -0,0 +1,76 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Film, ListVideo } from 'lucide-react';
+import PlaybackControls from './PlaybackControls';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { cn } from '@/lib/utils';
+
+interface Episode {
+    id: string;
+    name: string;
+    duration: number;
+}
+
+interface EpisodePlayerProps {
+    episodes: Episode[];
+    selectedEpisode: string | null;
+    onSelectEpisode: (id: string | null) => void;
+}
+
+const EpisodePlayer: React.FC<EpisodePlayerProps> = ({ episodes, selectedEpisode, onSelectEpisode }) => {
+    const currentEpisode = episodes.find(e => e.id === selectedEpisode);
+
+    return (
+        <Card className="bg-gray-900 border-gray-700 flex-1 flex flex-col">
+            <CardHeader>
+                <CardTitle className="flex items-center gap-3 text-white">
+                    <ListVideo className="w-5 h-5 text-purple-400" />
+                    Episodes
+                </CardTitle>
+            </CardHeader>
+            <CardContent className="flex-1 flex flex-col gap-4">
+                <ScrollArea className="h-48 pr-4 border border-gray-700 rounded-lg">
+                    <div className="p-2 space-y-1">
+                        {episodes.length > 0 ? (
+                            episodes.map(episode => (
+                                <button
+                                    key={episode.id}
+                                    onClick={() => onSelectEpisode(episode.id)}
+                                    className={cn(
+                                        "w-full text-left p-2 rounded-md transition-colors text-sm",
+                                        selectedEpisode === episode.id
+                                            ? "bg-purple-500/20 text-purple-300"
+                                            : "hover:bg-gray-800 text-gray-300"
+                                    )}
+                                >
+                                    {episode.name} ({episode.duration}s)
+                                </button>
+                            ))
+                        ) : (
+                            <div className="text-center text-gray-500 py-16">
+                                Select a dataset to see episodes.
+                            </div>
+                        )}
+                    </div>
+                </ScrollArea>
+
+                {currentEpisode ? (
+                    <div className="border-t border-gray-700 pt-4 flex flex-col gap-4">
+                       <div className="flex items-center gap-3">
+                         <Film className="w-5 h-5 text-gray-400" />
+                         <h3 className="font-semibold">{currentEpisode.name}</h3>
+                       </div>
+                        <PlaybackControls duration={currentEpisode.duration} />
+                    </div>
+                ) : (
+                    <div className="text-center text-gray-500 pt-16 border-t border-gray-700">
+                        Select an episode to play.
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+    );
+};
+
+export default EpisodePlayer;

src/components/replay/PlaybackControls.tsx

@@ -0,0 +1,94 @@
+
+import React, { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Play, Pause, FastForward, Rewind, ChevronsRight, ChevronsLeft } from 'lucide-react';
+import { Slider } from '@/components/ui/slider';
+
+interface PlaybackControlsProps {
+    duration: number; // in seconds
+}
+
+const PlaybackControls: React.FC<PlaybackControlsProps> = ({ duration }) => {
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [currentTime, setCurrentTime] = useState(0);
+    const [playbackSpeed, setPlaybackSpeed] = useState(1);
+
+    useEffect(() => {
+      // Reset time when episode changes (duration changes)
+      setCurrentTime(0);
+      setIsPlaying(false);
+    }, [duration]);
+
+    // This is a mock playback timer.
+    useEffect(() => {
+        let interval: NodeJS.Timeout;
+        if (isPlaying && currentTime < duration) {
+            interval = setInterval(() => {
+                setCurrentTime(prev => Math.min(prev + (1 * playbackSpeed), duration));
+            }, 1000);
+        }
+        if (currentTime >= duration) {
+            setIsPlaying(false);
+        }
+        return () => clearInterval(interval);
+    }, [isPlaying, duration, playbackSpeed, currentTime]);
+
+    const formatTime = (time: number) => {
+        const minutes = Math.floor(time / 60);
+        const seconds = Math.floor(time % 60);
+        return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    };
+
+    const speedOptions = [0.5, 1, 1.5, 2];
+
+    return (
+        <div className="space-y-3">
+            <div className="flex items-center gap-2">
+                <Slider
+                    value={[currentTime]}
+                    max={duration}
+                    step={1}
+                    onValueChange={(value) => setCurrentTime(value[0])}
+                    className="w-full"
+                />
+            </div>
+             <div className="flex justify-between items-center text-xs text-gray-400">
+                <span>{formatTime(currentTime)}</span>
+                <span>{formatTime(duration)}</span>
+            </div>
+            <div className="flex items-center justify-center gap-2">
+                <Button variant="ghost" size="icon" className="text-gray-300 hover:text-white hover:bg-gray-700">
+                    <ChevronsLeft />
+                </Button>
+                 <Button onClick={() => setCurrentTime(t => Math.max(0, t - 5))} variant="ghost" size="icon" className="text-gray-300 hover:text-white hover:bg-gray-700">
+                    <Rewind />
+                </Button>
+                <Button onClick={() => setIsPlaying(!isPlaying)} variant="ghost" size="icon" className="h-12 w-12 text-gray-300 hover:text-white hover:bg-gray-700">
+                    {isPlaying ? <Pause className="h-6 w-6" /> : <Play className="h-6 w-6" />}
+                </Button>
+                <Button onClick={() => setCurrentTime(t => Math.min(duration, t + 5))} variant="ghost" size="icon" className="text-gray-300 hover:text-white hover:bg-gray-700">
+                    <FastForward />
+                </Button>
+                 <Button variant="ghost" size="icon" className="text-gray-300 hover:text-white hover:bg-gray-700">
+                    <ChevronsRight />
+                </Button>
+            </div>
+            <div className="flex justify-center items-center gap-2 pt-2">
+                <span className="text-sm text-gray-400">Speed:</span>
+                {speedOptions.map(speed => (
+                    <Button
+                        key={speed}
+                        variant={playbackSpeed === speed ? 'secondary' : 'ghost'}
+                        size="sm"
+                        onClick={() => setPlaybackSpeed(speed)}
+                        className="text-xs"
+                    >
+                        {speed}x
+                    </Button>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default PlaybackControls;

src/components/replay/ReplayHeader.tsx

@@ -0,0 +1,33 @@
+
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
+import Logo from '@/components/Logo';
+
+const ReplayHeader = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-4 text-3xl">
+        <Button variant="ghost" size="icon" onClick={() => navigate("/")} className="text-slate-400 hover:bg-slate-800 hover:text-white rounded-lg">
+          <ArrowLeft className="w-5 h-5" />
+        </Button>
+        <Logo />
+        <h1 className="font-bold text-white text-2xl">
+          Replay Dataset
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className={`w-3 h-3 rounded-full bg-slate-500`}></div>
+        <span className={`font-semibold text-gray-400`}>
+          Idle
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default ReplayHeader;

src/components/replay/ReplayVisualizer.tsx

@@ -0,0 +1,46 @@
+
+import React from "react";
+import { VideoOff } from "lucide-react";
+import { cn } from "@/lib/utils";
+import UrdfViewer from "../UrdfViewer";
+import UrdfProcessorInitializer from "../UrdfProcessorInitializer";
+
+interface ReplayVisualizerProps {
+  className?: string;
+}
+
+const ReplayVisualizer: React.FC<ReplayVisualizerProps> = ({
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "h-full w-full space-y-4 flex flex-col",
+        className
+      )}
+    >
+      <div className="bg-gray-900 rounded-lg p-4 flex-1 flex flex-col border border-gray-700">
+        <div className="flex-1 bg-black rounded border border-gray-800 min-h-[50vh]">
+          <UrdfProcessorInitializer />
+          <UrdfViewer />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        {[1, 2, 3, 4].map((cam) => (
+          <div
+            key={cam}
+            className="aspect-video bg-gray-900 rounded-lg border border-gray-800 flex flex-col items-center justify-center p-2"
+          >
+            <VideoOff className="h-8 w-8 text-gray-600 mb-2" />
+            <span className="text-gray-500 text-xs text-center">
+              Camera {cam} Feed
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ReplayVisualizer;

src/components/test/WebSocketTest.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
+import { useApi } from "@/contexts/ApiContext";
 
 interface JointData {
   type: "joint_update";
@@ -8,6 +9,7 @@ interface JointData {
 }
 
 const WebSocketTest: React.FC = () => {
+  const { baseUrl, wsBaseUrl, fetchWithHeaders } = useApi();
   const [isConnected, setIsConnected] = useState(false);
   const [lastMessage, setLastMessage] = useState<JointData | null>(null);
   const [connectionStatus, setConnectionStatus] =
@@ -16,13 +18,13 @@ const WebSocketTest: React.FC = () => {
 
   const connect = () => {
     // First test server health
-    fetch("http://localhost:8000/health")
+    fetchWithHeaders(`${baseUrl}/health`)
       .then((response) => response.json())
       .then((data) => {
         console.log("Server health:", data);
 
         // Now try WebSocket connection
-        const websocket = new WebSocket("ws://localhost:8000/ws/joint-data");
+        const websocket = new WebSocket(`${wsBaseUrl}/ws/joint-data`);
 
         websocket.onopen = () => {
           console.log("WebSocket connected");
@@ -120,7 +122,7 @@ const WebSocketTest: React.FC = () => {
         )}
 
         <div className="text-sm text-gray-400">
-          <div>Expected URL: ws://localhost:8000/ws/joint-data</div>
+          <div>Expected URL: {wsBaseUrl}/ws/joint-data</div>
           <div>Make sure your FastAPI server is running!</div>
         </div>
       </div>

src/components/ui/PortDetectionButton.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { Search } from "lucide-react";
+
+interface PortDetectionButtonProps {
+  onClick: () => void;
+  robotType?: "leader" | "follower";
+  className?: string;
+}
+
+const PortDetectionButton: React.FC<PortDetectionButtonProps> = ({
+  onClick,
+  robotType,
+  className = "",
+}) => {
+  return (
+    <Button
+      type="button"
+      onClick={onClick}
+      variant="outline"
+      size="sm"
+      className={`
+        h-8 px-2 
+        border-gray-600 hover:border-blue-500 
+        text-gray-400 hover:text-blue-400 
+        bg-gray-800 hover:bg-gray-700
+        transition-all duration-200
+        ${className}
+      `}
+      title={`Find ${robotType || "robot"} port automatically`}
+    >
+      <Search className="w-3 h-3 mr-1" />
+      Find
+    </Button>
+  );
+};
+
+export default PortDetectionButton;

src/components/ui/PortDetectionModal.tsx

@@ -0,0 +1,334 @@
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Loader2, Search, CheckCircle, AlertCircle } from "lucide-react";
+import { useToast } from "@/hooks/use-toast";
+import { useApi } from "@/contexts/ApiContext";
+
+interface PortDetectionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  robotType: "leader" | "follower";
+  onPortDetected: (port: string) => void;
+}
+
+const PortDetectionModal: React.FC<PortDetectionModalProps> = ({
+  open,
+  onOpenChange,
+  robotType,
+  onPortDetected,
+}) => {
+  const [step, setStep] = useState<
+    "instructions" | "detecting" | "success" | "error"
+  >("instructions");
+  const [detectedPort, setDetectedPort] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const [portsBeforeDisconnect, setPortsBeforeDisconnect] = useState<string[]>(
+    []
+  );
+  const { toast } = useToast();
+  const { baseUrl, fetchWithHeaders } = useApi();
+
+  const handleStartDetection = async () => {
+    try {
+      setStep("detecting");
+      setError("");
+
+      // Start port detection process
+      const response = await fetchWithHeaders(
+        `${baseUrl}/start-port-detection`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            robot_type: robotType,
+          }),
+        }
+      );
+
+      const data = await response.json();
+
+      if (data.status === "success") {
+        setPortsBeforeDisconnect(data.data.ports_before);
+        // Give user time to disconnect
+        setTimeout(() => {
+          detectPortAfterDisconnect(data.data.ports_before);
+        }, 3000); // 3 second delay to allow disconnection
+      } else {
+        throw new Error(data.message || "Failed to start port detection");
+      }
+    } catch (error) {
+      console.error("Error starting port detection:", error);
+      setError(
+        `Error starting detection: ${
+          error instanceof Error ? error.message : "Unknown error"
+        }`
+      );
+      setStep("error");
+    }
+  };
+
+  const detectPortAfterDisconnect = async (portsBefore: string[]) => {
+    try {
+      const response = await fetchWithHeaders(
+        `${baseUrl}/detect-port-after-disconnect`,
+        {
+          method: "POST",
+          body: JSON.stringify({
+            ports_before: portsBefore,
+          }),
+        }
+      );
+
+      const data = await response.json();
+
+      if (data.status === "success") {
+        setDetectedPort(data.port);
+
+        // Save the port for future use
+        await savePort(data.port);
+
+        setStep("success");
+
+        toast({
+          title: "Port Detected Successfully",
+          description: `${robotType} port detected: ${data.port}`,
+        });
+      } else {
+        throw new Error(data.message || "Failed to detect port");
+      }
+    } catch (error) {
+      console.error("Error detecting port:", error);
+      setError(
+        `Error detecting port: ${
+          error instanceof Error ? error.message : "Unknown error"
+        }`
+      );
+      setStep("error");
+    }
+  };
+
+  const savePort = async (port: string) => {
+    try {
+      await fetchWithHeaders(`${baseUrl}/save-robot-port`, {
+        method: "POST",
+        body: JSON.stringify({
+          robot_type: robotType,
+          port: port,
+        }),
+      });
+    } catch (error) {
+      console.error("Error saving port:", error);
+      // Don't throw here, as the main detection was successful
+    }
+  };
+
+  const handleUsePort = () => {
+    onPortDetected(detectedPort);
+    onOpenChange(false);
+    resetModal();
+  };
+
+  const handleClose = () => {
+    onOpenChange(false);
+    resetModal();
+  };
+
+  const resetModal = () => {
+    setStep("instructions");
+    setDetectedPort("");
+    setError("");
+    setPortsBeforeDisconnect([]);
+  };
+
+  const renderStepContent = () => {
+    switch (step) {
+      case "instructions":
+        return (
+          <div className="space-y-6">
+            <div className="text-center space-y-4">
+              <Search className="w-16 h-16 text-blue-500 mx-auto" />
+              <div className="space-y-2">
+                <h3 className="text-lg font-semibold text-white">
+                  Detect {robotType === "leader" ? "Leader" : "Follower"} Port
+                </h3>
+                <p className="text-gray-400">
+                  Follow these steps to automatically detect the robot port:
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-gray-800 rounded-lg p-4 space-y-3">
+              <div className="flex items-start gap-3">
+                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                  1
+                </div>
+                <p className="text-gray-300 text-sm">
+                  Make sure your {robotType} robot arm is currently connected
+                </p>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                  2
+                </div>
+                <p className="text-gray-300 text-sm">
+                  Click "Start Detection" below
+                </p>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                  3
+                </div>
+                <p className="text-gray-300 text-sm">
+                  When prompted,{" "}
+                  <strong>unplug the {robotType} robot arm</strong> from USB
+                </p>
+              </div>
+              <div className="flex items-start gap-3">
+                <div className="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm font-bold">
+                  4
+                </div>
+                <p className="text-gray-300 text-sm">
+                  The system will automatically detect which port was
+                  disconnected
+                </p>
+              </div>
+            </div>
+
+            <div className="flex gap-4 justify-center">
+              <Button
+                onClick={handleStartDetection}
+                className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-2"
+              >
+                Start Detection
+              </Button>
+              <Button
+                onClick={handleClose}
+                variant="outline"
+                className="border-gray-500 hover:border-gray-200 text-gray-300 hover:text-white px-8 py-2"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        );
+
+      case "detecting":
+        return (
+          <div className="space-y-6 text-center">
+            <Loader2 className="w-16 h-16 text-blue-500 mx-auto animate-spin" />
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-white">
+                Detecting Port...
+              </h3>
+              <p className="text-gray-400">
+                Please <strong>unplug the {robotType} robot arm</strong> from
+                USB now
+              </p>
+              <p className="text-sm text-gray-500">
+                Detection will complete automatically in a few seconds
+              </p>
+            </div>
+          </div>
+        );
+
+      case "success":
+        return (
+          <div className="space-y-6 text-center">
+            <CheckCircle className="w-16 h-16 text-green-500 mx-auto" />
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-white">
+                Port Detected Successfully!
+              </h3>
+              <p className="text-gray-400">
+                {robotType === "leader" ? "Leader" : "Follower"} port detected:
+              </p>
+              <p className="text-xl font-mono text-green-400 bg-gray-800 px-4 py-2 rounded">
+                {detectedPort}
+              </p>
+              <p className="text-sm text-gray-500">
+                This port has been saved as the default for future use.
+                <br />
+                You can now reconnect your robot arm.
+              </p>
+            </div>
+
+            <div className="flex gap-4 justify-center">
+              <Button
+                onClick={handleUsePort}
+                className="bg-green-500 hover:bg-green-600 text-white px-8 py-2"
+              >
+                Use This Port
+              </Button>
+              <Button
+                onClick={handleClose}
+                variant="outline"
+                className="border-gray-500 hover:border-gray-200 text-gray-300 hover:text-white px-8 py-2"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        );
+
+      case "error":
+        return (
+          <div className="space-y-6 text-center">
+            <AlertCircle className="w-16 h-16 text-red-500 mx-auto" />
+            <div className="space-y-2">
+              <h3 className="text-lg font-semibold text-white">
+                Detection Failed
+              </h3>
+              <p className="text-gray-400">Unable to detect the robot port.</p>
+              <div className="bg-red-900/20 border border-red-800 rounded-lg p-3">
+                <p className="text-red-400 text-sm">{error}</p>
+              </div>
+            </div>
+
+            <div className="flex gap-4 justify-center">
+              <Button
+                onClick={() => setStep("instructions")}
+                className="bg-blue-500 hover:bg-blue-600 text-white px-8 py-2"
+              >
+                Try Again
+              </Button>
+              <Button
+                onClick={handleClose}
+                variant="outline"
+                className="border-gray-500 hover:border-gray-200 text-gray-300 hover:text-white px-8 py-2"
+              >
+                Cancel
+              </Button>
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[500px] p-8">
+        <DialogHeader>
+          <DialogTitle className="text-white text-center text-xl font-bold">
+            Port Detection
+          </DialogTitle>
+          <DialogDescription className="text-gray-400 text-center">
+            Automatically detect the USB port for your robot arm
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="py-4">{renderStepContent()}</div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PortDetectionModal;

src/contexts/ApiContext.tsx

@@ -0,0 +1,134 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  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>;
+}
+
+const ApiContext = createContext<ApiContextType | undefined>(undefined);
+
+const DEFAULT_LOCALHOST = "http://localhost:8000";
+const DEFAULT_WS_LOCALHOST = "ws://localhost:8000";
+
+interface ApiProviderProps {
+  children: ReactNode;
+}
+
+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;
+  };
+
+  // Enhanced fetch function that automatically includes necessary headers
+  const fetchWithHeaders = async (
+    url: string,
+    options: RequestInit = {}
+  ): Promise<Response> => {
+    const enhancedOptions: RequestInit = {
+      ...options,
+      headers: {
+        ...getHeaders(),
+        ...options.headers,
+      },
+    };
+
+    return fetch(url, enhancedOptions);
+  };
+
+  return (
+    <ApiContext.Provider
+      value={{
+        baseUrl,
+        wsBaseUrl,
+        isNgrokEnabled,
+        setNgrokUrl,
+        resetToLocalhost,
+        ngrokUrl,
+        getHeaders,
+        fetchWithHeaders,
+      }}
+    >
+      {children}
+    </ApiContext.Provider>
+  );
+};
+
+export const useApi = (): ApiContextType => {
+  const context = useContext(ApiContext);
+  if (context === undefined) {
+    throw new Error("useApi must be used within an ApiProvider");
+  }
+  return context;
+};

src/hooks/useRealTimeJoints.ts

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useCallback } from "react";
 import { URDFViewerElement } from "@/lib/urdfViewerHelpers";
+import { useApi } from "@/contexts/ApiContext";
 
 interface JointData {
   type: "joint_update";
@@ -16,8 +17,11 @@ interface UseRealTimeJointsProps {
 export const useRealTimeJoints = ({
   viewerRef,
   enabled = true,
-  websocketUrl = "ws://localhost:8000/ws/joint-data",
+  websocketUrl,
 }: UseRealTimeJointsProps) => {
+  const { baseUrl, wsBaseUrl, fetchWithHeaders } = useApi();
+  const defaultWebSocketUrl = `${wsBaseUrl}/ws/joint-data`;
+  const finalWebSocketUrl = websocketUrl || defaultWebSocketUrl;
   const wsRef = useRef<WebSocket | null>(null);
   const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isConnectedRef = useRef<boolean>(false);
@@ -47,7 +51,7 @@ export const useRealTimeJoints = ({
     // First, test if the server is running
     const testServerConnection = async () => {
       try {
-        const response = await fetch("http://localhost:8000/health");
+        const response = await fetchWithHeaders(`${baseUrl}/health`);
         if (!response.ok) {
           console.error("❌ Server health check failed:", response.status);
           return false;
@@ -72,9 +76,9 @@ export const useRealTimeJoints = ({
       }
 
       try {
-        console.log("🔗 Connecting to WebSocket:", websocketUrl);
+        console.log("🔗 Connecting to WebSocket:", finalWebSocketUrl);
 
-        const ws = new WebSocket(websocketUrl);
+        const ws = new WebSocket(finalWebSocketUrl);
         wsRef.current = ws;
 
         ws.onopen = () => {

src/lib/urdfViewerHelpers.ts

@@ -66,26 +66,8 @@ export function createUrdfViewer(
   directionalLight.castShadow = true;
   viewer.scene.add(directionalLight);
 
-  // Set initial camera position for more zoomed-in view
-  // Wait for the viewer to be fully initialized before adjusting camera
-  setTimeout(() => {
-    if (viewer.camera) {
-      // Move camera closer to the robot for a more zoomed-in initial view
-      viewer.camera.position.set(0.5, 0.3, 0.5);
-      viewer.camera.lookAt(0, 0.2, 0); // Look at center of robot
-
-      // Update controls target if available
-      if (viewer.controls) {
-        viewer.controls.target.set(0, 0.2, 0);
-        viewer.controls.update();
-      }
-
-      // Trigger a redraw
-      if (viewer.redraw) {
-        viewer.redraw();
-      }
-    }
-  }, 100);
+  // Camera position is no longer adjusted automatically to prevent auto-zooming.
+  // The user can control the view with the mouse.
 
   return viewer;
 }
@@ -172,27 +154,6 @@ export function setupModelLoading(
   viewer.setAttribute("urdf", loadPath);
   viewer.setAttribute("package", packagePath);
 
-  // Handle successful loading and set initial zoom
-  const onLoadSuccess = () => {
-    // Set more zoomed-in camera position after model loads
-    setTimeout(() => {
-      if (viewer.camera && viewer.robot) {
-        // Position camera closer for better initial view
-        viewer.camera.position.set(0.4, 0.25, 0.4);
-        viewer.camera.lookAt(0, 0.15, 0);
-
-        if (viewer.controls) {
-          viewer.controls.target.set(0, 0.15, 0);
-          viewer.controls.update();
-        }
-
-        if (viewer.redraw) {
-          viewer.redraw();
-        }
-      }
-    }, 50);
-  };
-
   // Handle error loading
   const onLoadError = () => {
     // toast.error("Failed to load model", {
@@ -216,12 +177,11 @@ export function setupModelLoading(
   };
 
   viewer.addEventListener("error", onLoadError);
-  viewer.addEventListener("urdf-processed", onLoadSuccess);
+  // The 'urdf-processed' event that handled auto-zooming has been removed.
 
   // Return cleanup function
   return () => {
     viewer.removeEventListener("error", onLoadError);
-    viewer.removeEventListener("urdf-processed", onLoadSuccess);
   };
 }
 

src/pages/Calibration.tsx

@@ -30,6 +30,9 @@ import {
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import Logo from "@/components/Logo";
+import PortDetectionButton from "@/components/ui/PortDetectionButton";
+import PortDetectionModal from "@/components/ui/PortDetectionModal";
+import { useApi } from "@/contexts/ApiContext";
 
 interface CalibrationStatus {
   calibration_active: boolean;
@@ -58,6 +61,7 @@ interface CalibrationConfig {
 const Calibration = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { baseUrl, fetchWithHeaders } = useApi();
 
   // Ref for auto-scrolling console
   const consoleRef = useRef<HTMLDivElement>(null);
@@ -73,6 +77,12 @@ const Calibration = () => {
     []
   );
 
+  // Port detection state
+  const [showPortDetection, setShowPortDetection] = useState(false);
+  const [detectionRobotType, setDetectionRobotType] = useState<
+    "leader" | "follower"
+  >("leader");
+
   // Calibration state
   const [calibrationStatus, setCalibrationStatus] = useState<CalibrationStatus>(
     {
@@ -91,7 +101,7 @@ const Calibration = () => {
   // Poll calibration status
   const pollStatus = async () => {
     try {
-      const response = await fetch("http://localhost:8000/calibration-status");
+      const response = await fetchWithHeaders(`${baseUrl}/calibration-status`);
       if (response.ok) {
         const status = await response.json();
         setCalibrationStatus(status);
@@ -127,11 +137,8 @@ const Calibration = () => {
     };
 
     try {
-      const response = await fetch("http://localhost:8000/start-calibration", {
+      const response = await fetchWithHeaders(`${baseUrl}/start-calibration`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify(request),
       });
 
@@ -163,7 +170,7 @@ const Calibration = () => {
   // Stop calibration
   const handleStopCalibration = async () => {
     try {
-      const response = await fetch("http://localhost:8000/stop-calibration", {
+      const response = await fetchWithHeaders(`${baseUrl}/stop-calibration`, {
         method: "POST",
       });
 
@@ -215,8 +222,8 @@ const Calibration = () => {
 
     setIsLoadingConfigs(true);
     try {
-      const response = await fetch(
-        `http://localhost:8000/calibration-configs/${deviceType}`
+      const response = await fetchWithHeaders(
+        `${baseUrl}/calibration-configs/${deviceType}`
       );
       const data = await response.json();
 
@@ -245,8 +252,8 @@ const Calibration = () => {
     if (!deviceType) return;
 
     try {
-      const response = await fetch(
-        `http://localhost:8000/calibration-configs/${deviceType}/${configName}`,
+      const response = await fetchWithHeaders(
+        `${baseUrl}/calibration-configs/${deviceType}/${configName}`,
         { method: "DELETE" }
       );
       const data = await response.json();
@@ -281,11 +288,8 @@ const Calibration = () => {
     console.log("🔵 Enter button clicked - sending input...");
 
     try {
-      const response = await fetch("http://localhost:8000/calibration-input", {
+      const response = await fetchWithHeaders(`${baseUrl}/calibration-input`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify({ input: "\n" }), // Send actual newline character
       });
 
@@ -356,6 +360,43 @@ const Calibration = () => {
     }
   }, [calibrationStatus.console_output]);
 
+  // Load default port when device type changes
+  useEffect(() => {
+    const loadDefaultPort = async () => {
+      if (!deviceType) return;
+
+      try {
+        const robotType = deviceType === "robot" ? "follower" : "leader";
+        const response = await fetchWithHeaders(
+          `${baseUrl}/robot-port/${robotType}`
+        );
+        const data = await response.json();
+        if (data.status === "success") {
+          // Use saved port if available, otherwise use default port
+          const portToUse = data.saved_port || data.default_port;
+          if (portToUse) {
+            setPort(portToUse);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading default port:", error);
+      }
+    };
+
+    loadDefaultPort();
+  }, [deviceType]);
+
+  // Handle port detection
+  const handlePortDetection = () => {
+    const robotType = deviceType === "robot" ? "follower" : "leader";
+    setDetectionRobotType(robotType);
+    setShowPortDetection(true);
+  };
+
+  const handlePortDetected = (detectedPort: string) => {
+    setPort(detectedPort);
+  };
+
   // Get status color and icon
   const getStatusDisplay = () => {
     switch (calibrationStatus.status) {
@@ -455,16 +496,10 @@ const Calibration = () => {
                     <SelectValue placeholder="Select device type" />
                   </SelectTrigger>
                   <SelectContent className="bg-slate-800 border-slate-700 text-white">
-                    <SelectItem
-                      value="robot"
-                      className="hover:bg-slate-700"
-                    >
+                    <SelectItem value="robot" className="hover:bg-slate-700">
                       Robot (Follower)
                     </SelectItem>
-                    <SelectItem
-                      value="teleop"
-                      className="hover:bg-slate-700"
-                    >
+                    <SelectItem value="teleop" className="hover:bg-slate-700">
                       Teleoperator (Leader)
                     </SelectItem>
                   </SelectContent>
@@ -479,13 +514,20 @@ const Calibration = () => {
                 >
                   Port *
                 </Label>
-                <Input
-                  id="port"
-                  value={port}
-                  onChange={(e) => setPort(e.target.value)}
-                  placeholder="/dev/tty.usbmodem..."
-                  className="bg-slate-700 border-slate-600 text-white rounded-md"
-                />
+                <div className="flex gap-2">
+                  <Input
+                    id="port"
+                    value={port}
+                    onChange={(e) => setPort(e.target.value)}
+                    placeholder="/dev/tty.usbmodem..."
+                    className="bg-slate-700 border-slate-600 text-white rounded-md flex-1"
+                  />
+                  <PortDetectionButton
+                    onClick={handlePortDetection}
+                    robotType={deviceType === "robot" ? "follower" : "leader"}
+                    className="border-slate-600 hover:border-blue-500 text-slate-400 hover:text-blue-400 bg-slate-700 hover:bg-slate-600"
+                  />
+                </div>
               </div>
 
               {/* Config File Name */}
@@ -728,6 +770,13 @@ const Calibration = () => {
           </Card>
         </div>
       </div>
+
+      <PortDetectionModal
+        open={showPortDetection}
+        onOpenChange={setShowPortDetection}
+        robotType={detectionRobotType}
+        onPortDetected={handlePortDetected}
+      />
     </div>
   );
 };

src/pages/DirectFollower.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import VisualizerPanel from "@/components/control/VisualizerPanel";
+import { useToast } from "@/hooks/use-toast";
+import DirectFollowerControlPanel from "@/components/control/DirectFollowerControlPanel";
+import UrdfViewer from "@/components/UrdfViewer";
+import UrdfProcessorInitializer from "@/components/UrdfProcessorInitializer";
+import Logo from "@/components/Logo";
+
+const DirectFollowerPage = () => {
+  const navigate = useNavigate();
+  const { toast } = useToast();
+
+  const handleGoBack = async () => {
+    try {
+      // Stop the direct follower control process before navigating back
+      console.log("🛑 Stopping direct follower control...");
+      const response = await fetch("http://localhost:8000/stop-direct-follower", {
+        method: "POST",
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        console.log("✅ Direct follower control stopped:", result.message);
+        toast({
+          title: "Direct Follower Control Stopped",
+          description:
+            result.message ||
+            "Direct follower control has been stopped successfully.",
+        });
+      } else {
+        const errorText = await response.text();
+        console.warn(
+          "⚠️ Failed to stop direct follower control:",
+          response.status,
+          errorText
+        );
+        toast({
+          title: "Warning",
+          description: `Failed to stop direct follower control properly. Status: ${response.status}`,
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      console.error("❌ Error stopping direct follower control:", error);
+      toast({
+        title: "Error",
+        description: "Failed to communicate with the robot server.",
+        variant: "destructive",
+      });
+    } finally {
+      // Navigate back regardless of the result
+      navigate("/");
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-black flex items-center justify-center p-2 sm:p-4">
+      <div className="w-full h-[95vh] flex flex-col lg:flex-row gap-4">
+        {/* Left: Visualizer */}
+        <div className="flex-1 flex flex-col">
+          <div className="bg-gray-900 rounded-lg p-4 flex-1 flex flex-col">
+            <div className="flex items-center gap-4 mb-4">
+              <button
+                onClick={handleGoBack}
+                className="text-gray-400 hover:text-white hover:bg-gray-800 p-2 rounded transition-colors"
+                aria-label="Go Back"
+              >
+                <svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+                </svg>
+              </button>
+              {/* Only the logo, no "LiveLab" or blue L avatar */}
+              <Logo iconOnly />
+              <div className="w-px h-6 bg-gray-700" />
+              <h2 className="text-xl font-medium text-gray-200">Direct Follower Control</h2>
+            </div>
+            {/* Visualization area */}
+            <div className="flex-1 bg-black rounded border border-gray-800 min-h-[50vh]">
+              <div className="w-full h-full flex items-center justify-center">
+                <div className="w-full h-full">
+                  {/* Urdf Viewer only */}
+                  <VisualizerOnlyUrdf />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* Right: Control Panel */}
+        <div className="lg:w-[400px] flex-shrink-0 flex flex-col">
+          <DirectFollowerControlPanel />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Helper component to render just the URDF viewer
+const VisualizerOnlyUrdf: React.FC = () => {
+  // Important: Keep this separate from panels with cameras!
+  return (
+    <div className="w-full h-full">
+      {/* Use the same URDF viewer as in Teleoperation */}
+      <React.Suspense fallback={<div className="text-gray-400 p-12 text-center">Loading robot model...</div>}>
+        <UrdfVisualizerWithProcessor />
+      </React.Suspense>
+    </div>
+  );
+};
+
+const UrdfVisualizerWithProcessor: React.FC = () => (
+  <>
+    <UrdfProcessorInitializer />
+    <UrdfViewer />
+  </>
+);
+
+export default DirectFollowerPage;

src/pages/Landing.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useToast } from "@/hooks/use-toast";
@@ -9,12 +8,18 @@ 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";
 
 const Landing = () => {
-  const [robotModel, setRobotModel] = useState("");
+  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"
@@ -24,6 +29,7 @@ const Landing = () => {
   const [leaderConfigs, setLeaderConfigs] = useState<string[]>([]);
   const [followerConfigs, setFollowerConfigs] = useState<string[]>([]);
   const [isLoadingConfigs, setIsLoadingConfigs] = useState(false);
+  const { baseUrl, fetchWithHeaders } = useApi();
 
   // Recording state
   const [showRecordingModal, setShowRecordingModal] = useState(false);
@@ -39,13 +45,20 @@ const Landing = () => {
   const [singleTask, setSingleTask] = useState("");
   const [numEpisodes, setNumEpisodes] = useState(5);
 
+  // Direct follower control state
+  const [showDirectFollowerModal, setShowDirectFollowerModal] = useState(false);
+  const [directFollowerPort, setDirectFollowerPort] = useState(
+    "/dev/tty.usbmodem5A460816621"
+  );
+  const [directFollowerConfig, setDirectFollowerConfig] = useState("");
+
   const navigate = useNavigate();
   const { toast } = useToast();
 
   const loadConfigs = async () => {
     setIsLoadingConfigs(true);
     try {
-      const response = await fetch("http://localhost:8000/get-configs");
+      const response = await fetchWithHeaders(`${baseUrl}/get-configs`);
       const data = await response.json();
       setLeaderConfigs(data.leader_configs || []);
       setFollowerConfigs(data.follower_configs || []);
@@ -73,16 +86,16 @@ const Landing = () => {
     }
   };
 
-  const handleRecordingClick = () => {
+  const handleCalibrationClick = () => {
     if (robotModel) {
-      setShowRecordingModal(true);
-      loadConfigs();
+      navigate("/calibration");
     }
   };
 
-  const handleEditDatasetClick = () => {
+  const handleRecordingClick = () => {
     if (robotModel) {
-      navigate("/edit-dataset");
+      setShowRecordingModal(true);
+      loadConfigs();
     }
   };
 
@@ -94,7 +107,14 @@ const Landing = () => {
 
   const handleReplayDatasetClick = () => {
     if (robotModel) {
-      navigate("/edit-dataset");
+      navigate("/replay-dataset");
+    }
+  };
+
+  const handleDirectFollowerClick = () => {
+    if (robotModel) {
+      setShowDirectFollowerModal(true);
+      loadConfigs();
     }
   };
 
@@ -110,11 +130,8 @@ const Landing = () => {
     }
 
     try {
-      const response = await fetch("http://localhost:8000/move-arm", {
+      const response = await fetchWithHeaders(`${baseUrl}/move-arm`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify({
           leader_port: leaderPort,
           follower_port: followerPort,
@@ -185,6 +202,55 @@ const Landing = () => {
     navigate("/recording", { state: { recordingConfig } });
   };
 
+  const handleStartDirectFollower = async () => {
+    if (!directFollowerConfig) {
+      toast({
+        title: "Missing Configuration",
+        description: "Please select a calibration config for the follower.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      const response = await fetch("http://localhost:8000/direct-follower", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          follower_port: directFollowerPort,
+          follower_config: directFollowerConfig,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok) {
+        toast({
+          title: "Direct Follower Control Started",
+          description:
+            data.message || "Successfully started direct follower control.",
+        });
+        setShowDirectFollowerModal(false);
+        navigate("/direct-follower");
+      } else {
+        toast({
+          title: "Error Starting Direct Follower Control",
+          description:
+            data.message || "Failed to start direct follower control.",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Connection Error",
+        description: "Could not connect to the backend server.",
+        variant: "destructive",
+      });
+    }
+  };
+
   const handlePermissions = async (allow: boolean) => {
     setShowPermissionModal(false);
     if (allow) {
@@ -219,49 +285,57 @@ const Landing = () => {
   };
 
   const actions: Action[] = [
-    {
-      title: "Begin Session",
-      description: "Start a new control session.",
-      handler: handleBeginSession,
-      color: "bg-orange-500 hover:bg-orange-600",
-    },
     {
       title: "Teleoperation",
       description: "Control the robot arm in real-time.",
       handler: handleTeleoperationClick,
       color: "bg-yellow-500 hover:bg-yellow-600",
     },
+    {
+      title: "Direct Follower Control",
+      description: "Train a model on your datasets.",
+      handler: handleDirectFollowerClick,
+      color: "bg-blue-500 hover:bg-blue-600",
+    },
+    {
+      title: "Calibration",
+      description: "Calibrate robot arm positions.",
+      handler: handleCalibrationClick,
+      color: "bg-indigo-500 hover:bg-indigo-600",
+      isWorkInProgress: true,
+    },
     {
       title: "Record Dataset",
       description: "Record episodes for training data.",
       handler: handleRecordingClick,
       color: "bg-red-500 hover:bg-red-600",
     },
-    {
-      title: "Edit Dataset",
-      description: "Review and modify recorded datasets.",
-      handler: handleEditDatasetClick,
-      color: "bg-blue-500 hover:bg-blue-600",
-    },
     {
       title: "Training",
       description: "Train a model on your datasets.",
       handler: handleTrainingClick,
       color: "bg-green-500 hover:bg-green-600",
+      isWorkInProgress: true,
     },
     {
       title: "Replay Dataset",
       description: "Replay and analyze recorded datasets.",
       handler: handleReplayDatasetClick,
       color: "bg-purple-500 hover:bg-purple-600",
+      isWorkInProgress: true,
     },
   ];
 
   return (
     <div className="min-h-screen bg-black text-white flex flex-col items-center p-4 pt-12 sm:pt-20">
-      <LandingHeader />
+      <div className="w-full max-w-7xl mx-auto px-4 mb-12">
+        <LandingHeader
+          onShowInstructions={() => setShowUsageModal(true)}
+          onShowNgrokConfig={() => setShowNgrokModal(true)}
+        />
+      </div>
 
-      <div className="mt-12 p-8 bg-gray-900 rounded-lg shadow-xl w-full max-w-lg space-y-6 border border-gray-700">
+      <div className="p-8 bg-gray-900 rounded-lg shadow-xl w-full max-w-4xl space-y-6 border border-gray-700">
         <RobotModelSelector
           robotModel={robotModel}
           onValueChange={setRobotModel}
@@ -275,6 +349,11 @@ const Landing = () => {
         onPermissionsResult={handlePermissions}
       />
 
+      <UsageInstructionsModal
+        open={showUsageModal}
+        onOpenChange={setShowUsageModal}
+      />
+
       <TeleoperationModal
         open={showTeleoperationModal}
         onOpenChange={setShowTeleoperationModal}
@@ -314,6 +393,22 @@ const Landing = () => {
         isLoadingConfigs={isLoadingConfigs}
         onStart={handleStartRecording}
       />
+
+      <DirectFollowerModal
+        open={showDirectFollowerModal}
+        onOpenChange={setShowDirectFollowerModal}
+        followerPort={directFollowerPort}
+        setFollowerPort={setDirectFollowerPort}
+        followerConfig={directFollowerConfig}
+        setFollowerConfig={setDirectFollowerConfig}
+        followerConfigs={followerConfigs}
+        isLoadingConfigs={isLoadingConfigs}
+        onStart={handleStartDirectFollower}
+      />
+      <NgrokConfigModal
+        open={showNgrokModal}
+        onOpenChange={setShowNgrokModal}
+      />
     </div>
   );
 };

src/pages/PhoneCamera.tsx

@@ -0,0 +1,223 @@
+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

@@ -2,14 +2,11 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { useToast } from "@/hooks/use-toast";
-import {
-  ArrowLeft,
-  Square,
-  SkipForward,
-  RotateCcw,
-  Play,
-  GraduationCap,
-} from "lucide-react";
+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 {
   leader_port: string;
@@ -32,9 +29,11 @@ interface BackendStatus {
   current_phase: string;
   current_episode?: number;
   total_episodes?: number;
+  saved_episodes?: number;
   phase_elapsed_seconds?: number;
   phase_time_limit_s?: number;
   session_elapsed_seconds?: number;
+  session_ended?: boolean;
   available_controls: {
     stop_recording: boolean;
     exit_early: boolean;
@@ -46,6 +45,7 @@ const Recording = () => {
   const location = useLocation();
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { baseUrl, wsBaseUrl, fetchWithHeaders } = useApi();
 
   // Get recording config from navigation state
   const recordingConfig = location.state?.recordingConfig as RecordingConfig;
@@ -56,6 +56,11 @@ 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);
+
   // Redirect if no config provided
   useEffect(() => {
     if (!recordingConfig) {
@@ -82,19 +87,30 @@ const Recording = () => {
     if (recordingSessionStarted) {
       const pollStatus = async () => {
         try {
-          const response = await fetch(
-            "http://localhost:8000/recording-status"
+          const response = await fetchWithHeaders(
+            `${baseUrl}/recording-status`
           );
           if (response.ok) {
             const status = await response.json();
             setBackendStatus(status);
 
-            // If backend recording stopped, session is complete
-            if (!status.recording_active && recordingSessionStarted) {
-              toast({
-                title: "Recording Complete!",
-                description: `All episodes have been recorded successfully.`,
-              });
+            // If backend recording stopped and session ended, navigate to upload
+            if (
+              !status.recording_active &&
+              status.session_ended &&
+              recordingSessionStarted
+            ) {
+              // Navigate to upload window with dataset info
+              const datasetInfo = {
+                dataset_repo_id: recordingConfig.dataset_repo_id,
+                single_task: recordingConfig.single_task,
+                num_episodes: recordingConfig.num_episodes,
+                saved_episodes: status.saved_episodes || 0,
+                session_elapsed_seconds: status.session_elapsed_seconds || 0,
+              };
+
+              navigate("/upload", { state: { datasetInfo } });
+              return; // Stop polling after navigation
             }
           }
         } catch (error) {
@@ -110,7 +126,52 @@ const Recording = () => {
     return () => {
       if (statusInterval) clearInterval(statusInterval);
     };
-  }, [recordingSessionStarted, toast]);
+  }, [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]);
 
   const formatTime = (seconds: number): string => {
     const mins = Math.floor(seconds / 60);
@@ -122,11 +183,8 @@ const Recording = () => {
 
   const startRecordingSession = async () => {
     try {
-      const response = await fetch("http://localhost:8000/start-recording", {
+      const response = await fetchWithHeaders(`${baseUrl}/start-recording`, {
         method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
         body: JSON.stringify(recordingConfig),
       });
 
@@ -161,8 +219,8 @@ const Recording = () => {
     if (!backendStatus?.available_controls.exit_early) return;
 
     try {
-      const response = await fetch(
-        "http://localhost:8000/recording-exit-early",
+      const response = await fetchWithHeaders(
+        `${baseUrl}/recording-exit-early`,
         {
           method: "POST",
         }
@@ -203,8 +261,8 @@ const Recording = () => {
     if (!backendStatus?.available_controls.rerecord_episode) return;
 
     try {
-      const response = await fetch(
-        "http://localhost:8000/recording-rerecord-episode",
+      const response = await fetchWithHeaders(
+        `${baseUrl}/recording-rerecord-episode`,
         {
           method: "POST",
         }
@@ -235,7 +293,7 @@ const Recording = () => {
   // Equivalent to pressing ESC key in original record.py
   const handleStopRecording = async () => {
     try {
-      const response = await fetch("http://localhost:8000/stop-recording", {
+      const response = await fetchWithHeaders(`${baseUrl}/stop-recording`, {
         method: "POST",
       });
 
@@ -243,7 +301,17 @@ const Recording = () => {
         title: "Recording Stopped",
         description: "Recording session has been stopped.",
       });
-      navigate("/");
+
+      // Navigate to upload window with current dataset info
+      const datasetInfo = {
+        dataset_repo_id: recordingConfig.dataset_repo_id,
+        single_task: recordingConfig.single_task,
+        num_episodes: recordingConfig.num_episodes,
+        saved_episodes: backendStatus?.saved_episodes || 0,
+        session_elapsed_seconds: backendStatus?.session_elapsed_seconds || 0,
+      };
+
+      navigate("/upload", { state: { datasetInfo } });
     } catch (error) {
       toast({
         title: "Error",
@@ -332,9 +400,11 @@ const Recording = () => {
             Back to Home
           </Button>
 
-          <div className="flex items-center gap-3">
-            <div className={`w-3 h-3 rounded-full ${getDotColor()}`}></div>
-            <h1 className="text-3xl font-bold">Recording Session</h1>
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-3">
+              <div className={`w-3 h-3 rounded-full ${getDotColor()}`}></div>
+              <h1 className="text-3xl font-bold">Recording Session</h1>
+            </div>
           </div>
         </div>
 
@@ -402,155 +472,169 @@ const Recording = () => {
         </div>
 
         {/* Status and Controls */}
-        <div className="bg-gray-900 rounded-lg p-6 border border-gray-700">
-          <div className="flex items-center justify-between mb-6">
-            <div>
-              <h2 className="text-xl font-semibold text-white mb-2">
-                Recording Status
-              </h2>
-              <div className="flex items-center gap-3">
-                <div className={`w-2 h-2 rounded-full ${getDotColor()}`}></div>
-                <span className={`font-semibold ${getStatusColor()}`}>
-                  {getStatusText()}
-                </span>
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
+          {/* Recording Status - takes up 3 columns */}
+          <div className="lg:col-span-3 bg-gray-900 rounded-lg p-6 border border-gray-700">
+            {/* Status header */}
+            <div className="flex items-center justify-between mb-6">
+              <div>
+                <h2 className="text-xl font-semibold text-white mb-2">
+                  Recording Status
+                </h2>
+                <div className="flex items-center gap-3">
+                  <div
+                    className={`w-2 h-2 rounded-full ${getDotColor()}`}
+                  ></div>
+                  <span className={`font-semibold ${getStatusColor()}`}>
+                    {getStatusText()}
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* Recording Phase Controls */}
-          {currentPhase === "recording" && (
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <Button
-                onClick={handleExitEarly}
-                disabled={!backendStatus.available_controls.exit_early}
-                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
-              </Button>
-
-              <Button
-                onClick={handleRerecordEpisode}
-                disabled={!backendStatus.available_controls.rerecord_episode}
-                className="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-4 text-lg disabled:opacity-50"
-              >
-                <RotateCcw className="w-5 h-5 mr-2" />
-                Re-record Episode
-              </Button>
-
-              <Button
-                onClick={handleStopRecording}
-                disabled={!backendStatus.available_controls.stop_recording}
-                className="bg-red-500 hover:bg-red-600 text-white font-semibold py-4 text-lg disabled:opacity-50"
-              >
-                <Square className="w-5 h-5 mr-2" />
-                Stop Recording
-              </Button>
-            </div>
-          )}
+            {/* Recording Phase Controls */}
+            {currentPhase === "recording" && (
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <Button
+                  onClick={handleExitEarly}
+                  disabled={!backendStatus.available_controls.exit_early}
+                  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
+                </Button>
 
-          {/* Reset Phase Controls */}
-          {currentPhase === "resetting" && (
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <Button
-                onClick={handleExitEarly}
-                disabled={!backendStatus.available_controls.exit_early}
-                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
-              </Button>
-
-              <Button
-                onClick={handleStopRecording}
-                disabled={!backendStatus.available_controls.stop_recording}
-                className="bg-red-500 hover:bg-red-600 text-white font-semibold py-6 text-xl disabled:opacity-50"
-              >
-                <Square className="w-5 h-5 mr-2" />
-                Stop Recording
-              </Button>
-            </div>
-          )}
+                <Button
+                  onClick={handleRerecordEpisode}
+                  disabled={!backendStatus.available_controls.rerecord_episode}
+                  className="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-4 text-lg disabled:opacity-50"
+                >
+                  <RotateCcw className="w-5 h-5 mr-2" />
+                  Re-record Episode
+                </Button>
 
-          {currentPhase === "completed" && (
-            <div className="text-center">
-              <p className="text-lg text-green-400 mb-6">
-                ✅ Recording session completed successfully!
-              </p>
-              <p className="text-gray-400 mb-6">
-                Dataset:{" "}
-                <span className="text-white font-semibold">
-                  {recordingConfig.dataset_repo_id}
-                </span>
-              </p>
-              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 <Button
-                  onClick={() => navigate("/training")}
-                  className="bg-purple-500 hover:bg-purple-600 text-white font-semibold py-3 px-6 text-lg"
+                  onClick={handleStopRecording}
+                  disabled={!backendStatus.available_controls.stop_recording}
+                  className="bg-red-500 hover:bg-red-600 text-white font-semibold py-4 text-lg disabled:opacity-50"
                 >
-                  <GraduationCap className="w-5 h-5 mr-2" />
-                  Start Training
+                  <Square className="w-5 h-5 mr-2" />
+                  Stop Recording
                 </Button>
+              </div>
+            )}
+
+            {/* Reset Phase Controls */}
+            {currentPhase === "resetting" && (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 <Button
-                  onClick={() => navigate("/")}
-                  variant="outline"
-                  className="bg-transparent border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white py-3 px-6 text-lg"
+                  onClick={handleExitEarly}
+                  disabled={!backendStatus.available_controls.exit_early}
+                  className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-6 text-xl disabled:opacity-50"
                 >
-                  Return to Home
+                  <Play className="w-6 h-6 mr-2" />
+                  Continue to Next Phase
                 </Button>
+
+                <Button
+                  onClick={handleStopRecording}
+                  disabled={!backendStatus.available_controls.stop_recording}
+                  className="bg-red-500 hover:bg-red-600 text-white font-semibold py-6 text-xl disabled:opacity-50"
+                >
+                  <Square className="w-5 h-5 mr-2" />
+                  Stop Recording
+                </Button>
+              </div>
+            )}
+
+            {currentPhase === "completed" && (
+              <div className="text-center">
+                <p className="text-lg text-green-400 mb-6">
+                  ✅ Recording session completed successfully!
+                </p>
+                <p className="text-gray-400 mb-6">
+                  Dataset:{" "}
+                  <span className="text-white font-semibold">
+                    {recordingConfig.dataset_repo_id}
+                  </span>
+                </p>
+                <p className="text-gray-400 mb-6">
+                  You will be redirected to the upload window shortly...
+                </p>
               </div>
+            )}
+
+            {/* Instructions */}
+            <div className="mt-6 p-4 bg-gray-800 rounded-lg">
+              <h3 className="font-semibold mb-2">
+                {currentPhase === "recording"
+                  ? "Episode Recording Instructions:"
+                  : currentPhase === "resetting"
+                  ? "Environment Reset Instructions:"
+                  : "Session Instructions:"}
+              </h3>
+              {currentPhase === "recording" && (
+                <ul className="text-sm text-gray-400 space-y-1">
+                  <li>
+                    • <strong>End Episode:</strong> Complete current episode and
+                    enter reset phase (Right Arrow)
+                  </li>
+                  <li>
+                    • <strong>Re-record Episode:</strong> Restart current
+                    episode after reset phase (Left Arrow)
+                  </li>
+                  <li>
+                    • <strong>Auto-end:</strong> Episode ends automatically
+                    after {formatTime(phaseTimeLimit)}
+                  </li>
+                  <li>
+                    • <strong>Stop Recording:</strong> End entire session (ESC
+                    key)
+                  </li>
+                </ul>
+              )}
+              {currentPhase === "resetting" && (
+                <ul className="text-sm text-gray-400 space-y-1">
+                  <li>
+                    • <strong>Continue to Next Phase:</strong> Skip reset phase
+                    and continue (Right Arrow)
+                  </li>
+                  <li>
+                    • <strong>Auto-continue:</strong> Automatically continues
+                    after {formatTime(phaseTimeLimit)}
+                  </li>
+                  <li>
+                    • <strong>Reset Phase:</strong> Use this time to prepare
+                    your environment for the next episode
+                  </li>
+                  <li>
+                    • <strong>Stop Recording:</strong> End entire session (ESC
+                    key)
+                  </li>
+                </ul>
+              )}
+            </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>
 
-          {/* Instructions */}
-          <div className="mt-6 p-4 bg-gray-800 rounded-lg">
-            <h3 className="font-semibold mb-2">
-              {currentPhase === "recording"
-                ? "Episode Recording Instructions:"
-                : currentPhase === "resetting"
-                ? "Environment Reset Instructions:"
-                : "Session Instructions:"}
-            </h3>
-            {currentPhase === "recording" && (
-              <ul className="text-sm text-gray-400 space-y-1">
-                <li>
-                  • <strong>End Episode:</strong> Complete current episode and
-                  enter reset phase (Right Arrow)
-                </li>
-                <li>
-                  • <strong>Re-record Episode:</strong> Restart current episode
-                  after reset phase (Left Arrow)
-                </li>
-                <li>
-                  • <strong>Auto-end:</strong> Episode ends automatically after{" "}
-                  {formatTime(phaseTimeLimit)}
-                </li>
-                <li>
-                  • <strong>Stop Recording:</strong> End entire session (ESC
-                  key)
-                </li>
-              </ul>
-            )}
-            {currentPhase === "resetting" && (
-              <ul className="text-sm text-gray-400 space-y-1">
-                <li>
-                  • <strong>Continue to Next Phase:</strong> Skip reset phase
-                  and continue (Right Arrow)
-                </li>
-                <li>
-                  • <strong>Auto-continue:</strong> Automatically continues
-                  after {formatTime(phaseTimeLimit)}
-                </li>
-                <li>
-                  • <strong>Reset Phase:</strong> Use this time to prepare your
-                  environment for the next episode
-                </li>
-                <li>
-                  • <strong>Stop Recording:</strong> End entire session (ESC
-                  key)
-                </li>
-              </ul>
-            )}
+        {/* URDF Viewer Section */}
+        <div className="bg-gray-900 rounded-lg p-6 border border-gray-700 mb-8">
+          <h2 className="text-xl font-semibold text-white mb-4">
+            Robot Visualizer
+          </h2>
+          <div className="h-96 bg-gray-800 rounded-lg overflow-hidden">
+            <UrdfViewer />
+            <UrdfProcessorInitializer />
           </div>
         </div>
       </div>

src/pages/ReplayDataset.tsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import ReplayHeader from '@/components/replay/ReplayHeader';
+import DatasetSelector from '@/components/replay/DatasetSelector';
+import EpisodePlayer from '@/components/replay/EpisodePlayer';
+import ReplayVisualizer from '@/components/replay/ReplayVisualizer';
+
+// Mock data for now, this would be fetched from the backend
+const mockDatasets = [
+  { id: 'dataset-1', name: 'Kitchen Task - Day 1' },
+  { id: 'dataset-2', name: 'Assembly Task - Morning' },
+  { id: 'dataset-3', name: 'Sorting Cans - Run 4' },
+];
+
+const mockEpisodes = {
+  'dataset-1': [
+    { id: 'ep-1', name: 'Episode 1', duration: 62 },
+    { id: 'ep-2', name: 'Episode 2', duration: 58 },
+  ],
+  'dataset-2': [
+    { id: 'ep-3', name: 'Episode 1', duration: 120 },
+  ],
+  'dataset-3': [
+    { id: 'ep-4', name: 'Episode 1', duration: 45 },
+    { id: 'ep-5', name: 'Episode 2', duration: 47 },
+    { id: 'ep-6', name: 'Episode 3', duration: 43 },
+  ],
+};
+
+
+const ReplayDataset = () => {
+  // Normally you would fetch datasets and handle loading/error states
+  const [selectedDataset, setSelectedDataset] = React.useState<string | null>(mockDatasets.length > 0 ? mockDatasets[0].id : null);
+  const [selectedEpisode, setSelectedEpisode] = React.useState<string | null>(null);
+
+  const episodes = selectedDataset ? mockEpisodes[selectedDataset] || [] : [];
+
+  React.useEffect(() => {
+    // When dataset changes, reset episode selection
+    setSelectedEpisode(null);
+  }, [selectedDataset]);
+
+  return (
+    <div className="min-h-screen bg-black text-white flex flex-col p-4 sm:p-6 lg:p-8">
+      <ReplayHeader />
+      <div className="flex-1 flex flex-col lg:flex-row gap-6 mt-6">
+        <div className="w-full lg:w-1/3 xl:w-1/4 flex flex-col gap-6">
+          <DatasetSelector 
+            datasets={mockDatasets}
+            selectedDataset={selectedDataset}
+            onSelectDataset={setSelectedDataset}
+          />
+          <EpisodePlayer
+            episodes={episodes}
+            selectedEpisode={selectedEpisode}
+            onSelectEpisode={setSelectedEpisode}
+          />
+        </div>
+        <div className="flex-1">
+          <ReplayVisualizer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ReplayDataset;

src/pages/Teleoperation.tsx

@@ -2,16 +2,18 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 import VisualizerPanel from "@/components/control/VisualizerPanel";
 import { useToast } from "@/hooks/use-toast";
+import { useApi } from "@/contexts/ApiContext";
 
 const TeleoperationPage = () => {
   const navigate = useNavigate();
   const { toast } = useToast();
+  const { baseUrl, fetchWithHeaders } = useApi();
 
   const handleGoBack = async () => {
     try {
       // Stop the teleoperation process before navigating back
       console.log("🛑 Stopping teleoperation...");
-      const response = await fetch("http://localhost:8000/stop-teleoperation", {
+      const response = await fetchWithHeaders(`${baseUrl}/stop-teleoperation`, {
         method: "POST",
       });
 

src/pages/Upload.tsx

@@ -0,0 +1,443 @@
+import React, { useState } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/hooks/use-toast";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  ArrowLeft,
+  Upload as UploadIcon,
+  Database,
+  Tag,
+  Eye,
+  EyeOff,
+  ExternalLink,
+  CheckCircle,
+  AlertCircle,
+  Loader2,
+} from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+
+interface DatasetInfo {
+  dataset_repo_id: string;
+  single_task: string;
+  num_episodes: number;
+  saved_episodes?: number;
+  session_elapsed_seconds?: number;
+  fps?: number;
+  total_frames?: number;
+  robot_type?: string;
+}
+
+interface UploadConfig {
+  tags: string[];
+  private: boolean;
+}
+
+const Upload = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { toast } = useToast();
+  const { baseUrl, fetchWithHeaders } = useApi();
+
+  // Get initial dataset info from navigation state
+  const initialDatasetInfo = location.state?.datasetInfo as DatasetInfo;
+
+  // State for actual dataset info (will be loaded from backend)
+  const [datasetInfo, setDatasetInfo] = useState<DatasetInfo | null>(null);
+  const [isLoadingDatasetInfo, setIsLoadingDatasetInfo] = useState(true);
+
+  // Upload configuration state
+  const [uploadConfig, setUploadConfig] = useState<UploadConfig>({
+    tags: ["robotics", "lerobot"],
+    private: false,
+  });
+
+  const [tagsInput, setTagsInput] = useState(uploadConfig.tags.join(", "));
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadSuccess, setUploadSuccess] = useState(false);
+
+  // Load actual dataset information from backend
+  React.useEffect(() => {
+    const loadDatasetInfo = async () => {
+      if (!initialDatasetInfo?.dataset_repo_id) {
+        toast({
+          title: "No Dataset Information",
+          description: "Please complete a recording session first.",
+          variant: "destructive",
+        });
+        navigate("/");
+        return;
+      }
+
+      try {
+        const response = await fetchWithHeaders(`${baseUrl}/dataset-info`, {
+          method: "POST",
+          body: JSON.stringify({
+            dataset_repo_id: initialDatasetInfo.dataset_repo_id,
+          }),
+        });
+
+        const data = await response.json();
+
+        if (response.ok && data.success) {
+          // Merge the loaded dataset info with any session info we have
+          setDatasetInfo({
+            ...data,
+            saved_episodes: data.num_episodes, // Use actual episodes from dataset
+            session_elapsed_seconds:
+              initialDatasetInfo.session_elapsed_seconds || 0,
+          });
+        } else {
+          // Fallback to initial dataset info if backend fails
+          toast({
+            title: "Warning",
+            description:
+              "Could not load complete dataset information. Using session data.",
+            variant: "destructive",
+          });
+          setDatasetInfo(initialDatasetInfo);
+        }
+      } catch (error) {
+        console.error("Error loading dataset info:", error);
+        // Fallback to initial dataset info
+        toast({
+          title: "Warning",
+          description: "Could not connect to backend. Using session data.",
+          variant: "destructive",
+        });
+        setDatasetInfo(initialDatasetInfo);
+      } finally {
+        setIsLoadingDatasetInfo(false);
+      }
+    };
+
+    loadDatasetInfo();
+  }, [initialDatasetInfo, navigate, toast]);
+
+  const formatDuration = (seconds: number): string => {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    if (hours > 0) {
+      return `${hours}h ${minutes}m ${secs}s`;
+    } else if (minutes > 0) {
+      return `${minutes}m ${secs}s`;
+    } else {
+      return `${secs}s`;
+    }
+  };
+
+  const handleUploadToHub = async () => {
+    if (!datasetInfo) return;
+
+    setIsUploading(true);
+    try {
+      // Parse tags from input
+      const tags = tagsInput
+        .split(",")
+        .map((tag) => tag.trim())
+        .filter((tag) => tag.length > 0);
+
+      const response = await fetchWithHeaders(`${baseUrl}/upload-dataset`, {
+        method: "POST",
+        body: JSON.stringify({
+          dataset_repo_id: datasetInfo.dataset_repo_id,
+          tags,
+          private: uploadConfig.private,
+        }),
+      });
+
+      const data = await response.json();
+
+      if (response.ok && data.success) {
+        setUploadSuccess(true);
+        toast({
+          title: "Upload Successful!",
+          description: `Dataset ${datasetInfo.dataset_repo_id} has been uploaded to HuggingFace Hub.`,
+        });
+      } else {
+        toast({
+          title: "Upload Failed",
+          description:
+            data.message || "Failed to upload dataset to HuggingFace Hub.",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      console.error("Error uploading dataset:", error);
+      toast({
+        title: "Connection Error",
+        description: "Could not connect to the backend server.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleSkipUpload = () => {
+    toast({
+      title: "Upload Skipped",
+      description: "Dataset saved locally. You can upload it manually later.",
+    });
+    navigate("/");
+  };
+
+  // Show loading state while fetching dataset info
+  if (isLoadingDatasetInfo || !datasetInfo) {
+    return (
+      <div className="min-h-screen bg-black text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+          <p className="text-lg">Loading dataset information...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-black text-white p-8">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <Button
+            onClick={() => navigate("/")}
+            variant="outline"
+            className="border-gray-500 hover:border-gray-200 text-gray-300 hover:text-white"
+          >
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Home
+          </Button>
+
+          <div className="flex items-center gap-3">
+            {uploadSuccess ? (
+              <CheckCircle className="w-8 h-8 text-green-500" />
+            ) : (
+              <Database className="w-8 h-8 text-blue-500" />
+            )}
+            <h1 className="text-3xl font-bold">
+              {uploadSuccess ? "Upload Complete" : "Dataset Upload"}
+            </h1>
+          </div>
+        </div>
+
+        {/* Success State */}
+        {uploadSuccess && (
+          <div className="bg-green-900/20 border border-green-600 rounded-lg p-6 mb-8">
+            <div className="flex items-center gap-3 mb-4">
+              <CheckCircle className="w-6 h-6 text-green-500" />
+              <h2 className="text-xl font-semibold text-green-400">
+                Successfully Uploaded!
+              </h2>
+            </div>
+            <p className="text-gray-300 mb-4">
+              Your dataset has been uploaded to HuggingFace Hub and is now
+              available for training and sharing.
+            </p>
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Button
+                onClick={() =>
+                  window.open(
+                    `https://huggingface.co/datasets/${datasetInfo.dataset_repo_id}`,
+                    "_blank"
+                  )
+                }
+                className="bg-blue-500 hover:bg-blue-600 text-white"
+              >
+                <ExternalLink className="w-4 h-4 mr-2" />
+                View on HuggingFace Hub
+              </Button>
+              <Button
+                onClick={() =>
+                  navigate("/training", {
+                    state: { datasetRepoId: datasetInfo.dataset_repo_id },
+                  })
+                }
+                className="bg-purple-500 hover:bg-purple-600 text-white"
+              >
+                Start Training
+              </Button>
+              <Button
+                onClick={() => navigate("/")}
+                variant="outline"
+                className="border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              >
+                Return to Home
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Upload Form */}
+        {!uploadSuccess && (
+          <>
+            {/* Dataset Summary */}
+            <div className="bg-gray-900 rounded-lg p-6 border border-gray-700 mb-8">
+              <h2 className="text-xl font-semibold text-white mb-4">
+                Dataset Summary
+              </h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className="space-y-3">
+                  <div>
+                    <span className="text-gray-400">Repository ID:</span>
+                    <p className="text-white font-mono text-lg">
+                      {datasetInfo.dataset_repo_id}
+                    </p>
+                  </div>
+                  <div>
+                    <span className="text-gray-400">Task:</span>
+                    <p className="text-white">{datasetInfo.single_task}</p>
+                  </div>
+                </div>
+                <div className="space-y-3">
+                  <div>
+                    <span className="text-gray-400">Episodes Recorded:</span>
+                    <p className="text-white text-2xl font-bold text-green-400">
+                      {datasetInfo.saved_episodes || datasetInfo.num_episodes}
+                    </p>
+                    {datasetInfo.total_frames && (
+                      <p className="text-gray-400 text-sm">
+                        {datasetInfo.total_frames} total frames
+                      </p>
+                    )}
+                  </div>
+                  <div>
+                    <span className="text-gray-400">Session Duration:</span>
+                    <p className="text-white">
+                      {formatDuration(datasetInfo.session_elapsed_seconds || 0)}
+                    </p>
+                    {datasetInfo.fps && (
+                      <p className="text-gray-400 text-sm">
+                        {datasetInfo.fps} FPS
+                      </p>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Upload Configuration */}
+            <div className="bg-gray-900 rounded-lg p-6 border border-gray-700 mb-8">
+              <h2 className="text-xl font-semibold text-white mb-6">
+                Upload Configuration
+              </h2>
+
+              <div className="space-y-6">
+                {/* Tags */}
+                <div>
+                  <Label htmlFor="tags" className="text-gray-300 mb-2 block">
+                    Tags (comma-separated)
+                  </Label>
+                  <Input
+                    id="tags"
+                    value={tagsInput}
+                    onChange={(e) => setTagsInput(e.target.value)}
+                    placeholder="robotics, lerobot, manipulation"
+                    className="bg-gray-800 border-gray-600 text-white"
+                  />
+                  <p className="text-sm text-gray-500 mt-1">
+                    Tags help others discover your dataset on HuggingFace Hub
+                  </p>
+                </div>
+
+                {/* Privacy Setting */}
+                <div className="flex items-center space-x-3">
+                  <Checkbox
+                    id="private"
+                    checked={uploadConfig.private}
+                    onCheckedChange={(checked) =>
+                      setUploadConfig({
+                        ...uploadConfig,
+                        private: checked as boolean,
+                      })
+                    }
+                  />
+                  <div className="flex items-center gap-2">
+                    {uploadConfig.private ? (
+                      <EyeOff className="w-4 h-4 text-gray-400" />
+                    ) : (
+                      <Eye className="w-4 h-4 text-gray-400" />
+                    )}
+                    <Label htmlFor="private" className="text-gray-300">
+                      Make dataset private
+                    </Label>
+                  </div>
+                </div>
+                <p className="text-sm text-gray-500 ml-6">
+                  {uploadConfig.private
+                    ? "Only you will be able to access this dataset"
+                    : "Dataset will be publicly accessible on HuggingFace Hub"}
+                </p>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <Button
+                onClick={handleUploadToHub}
+                disabled={isUploading}
+                className="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-4 px-8 text-lg"
+              >
+                {isUploading ? (
+                  <>
+                    <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+                    Uploading to Hub...
+                  </>
+                ) : (
+                  <>
+                    <UploadIcon className="w-5 h-5 mr-2" />
+                    Upload to HuggingFace Hub
+                  </>
+                )}
+              </Button>
+
+              <Button
+                onClick={handleSkipUpload}
+                disabled={isUploading}
+                variant="outline"
+                className="border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white py-4 px-8 text-lg"
+              >
+                Skip Upload
+              </Button>
+            </div>
+
+            {/* Info Box */}
+            <div className="mt-8 p-4 bg-blue-900/20 border border-blue-600 rounded-lg">
+              <div className="flex items-start gap-3">
+                <AlertCircle className="w-5 h-5 text-blue-400 mt-0.5" />
+                <div>
+                  <h3 className="font-semibold text-blue-400 mb-2">
+                    About HuggingFace Hub Upload
+                  </h3>
+                  <ul className="text-sm text-gray-300 space-y-1">
+                    <li>
+                      • Your dataset will be uploaded to HuggingFace Hub for
+                      sharing and collaboration
+                    </li>
+                    <li>
+                      • You need to be logged in to HuggingFace CLI on the
+                      server
+                    </li>
+                    <li>
+                      • Uploaded datasets can be used for training models and
+                      sharing with the community
+                    </li>
+                    <li>
+                      • You can always upload manually later using the
+                      HuggingFace CLI
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Upload;

vite.config.ts

@@ -8,40 +8,15 @@ export default defineConfig(({ mode }) => ({
   server: {
     host: "::",
     port: 8080,
-    proxy: {
-      "/start-training": "http://localhost:8000",
-      "/stop-training": "http://localhost:8000",
-      "/training-status": "http://localhost:8000",
-      "/training-logs": "http://localhost:8000",
-      "/start-recording": "http://localhost:8000",
-      "/stop-recording": "http://localhost:8000",
-      "/recording-status": "http://localhost:8000",
-      "/recording-exit-early": "http://localhost:8000",
-      "/recording-rerecord-episode": "http://localhost:8000",
-      "/start-calibration": "http://localhost:8000",
-      "/stop-calibration": "http://localhost:8000",
-      "/calibration-status": "http://localhost:8000",
-      "/calibration-input": "http://localhost:8000",
-      "/calibration-debug": "http://localhost:8000",
-      "/calibration-configs": "http://localhost:8000",
-      "/move-arm": "http://localhost:8000",
-      "/stop-teleoperation": "http://localhost:8000",
-      "/teleoperation-status": "http://localhost:8000",
-      "/joint-positions": "http://localhost:8000",
-      "/get-configs": "http://localhost:8000",
-      "/health": "http://localhost:8000",
-      "/ws": {
-        target: "ws://localhost:8000",
-        ws: true,
-      },
-    },
-  },
-  preview: {
-    allowedHosts: ["jurmy24-lelab.hf.space"],
+    // Proxy removed - the React app now handles API URLs directly through the ApiContext
+    // This provides full flexibility for localhost/ngrok switching at runtime
   },
   plugins: [react(), mode === "development" && componentTagger()].filter(
     Boolean
   ),
+  preview: {
+    allowedHosts: ["jurmy24-lelab.hf.space"],
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),