feat: improved things around calibrate, findPort (added web usb back)

examples/robot-control-web/components/CalibrationPanel.tsx

@@ -10,13 +10,13 @@ import {
 import { Badge } from "./ui/badge.js";
 import {
   calibrate,
+  releaseMotors,
+  WebSerialPortWrapper,
+  createSO100Config,
   type WebCalibrationResults,
   type LiveCalibrationData,
   type CalibrationProcess,
 } from "@lerobot/web";
-import { releaseMotors } from "@lerobot/web";
-import { WebSerialPortWrapper } from "@lerobot/web";
-import { createSO100Config } from "@lerobot/web";
 import { CalibrationModal } from "./CalibrationModal.js";
 import type { RobotConnection } from "@lerobot/web";
 
@@ -64,22 +64,21 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
     setMotorData(initialData);
   }, [motorNames]);
 
-  // Release motor torque for better UX - allows immediate joint movement
+  // ✅ Release motor torque
   const releaseMotorTorque = useCallback(async () => {
-    if (!robot.port || !robot.robotType) {
-      return;
-    }
-
     try {
       setIsPreparing(true);
       setStatus("🔓 Releasing motor torque - joints can now be moved freely");
 
-      // Create port wrapper and config to get motor IDs
+      if (!robot.robotType) {
+        throw new Error("Robot type not configured");
+      }
+
+      // Create port and get motor config
       const port = new WebSerialPortWrapper(robot.port);
       await port.initialize();
-      const config = createSO100Config(robot.robotType);
 
-      // Release motors so they can be moved freely by hand
+      const config = createSO100Config(robot.robotType);
       await releaseMotors(port, config.motorIds);
 
       setStatus("✅ Joints are now free to move - set your homing position");
@@ -265,7 +264,7 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
               {!isCalibrating && !calibrationResult && (
                 <Button
                   onClick={async () => {
-                    // Release motor torque FIRST - so user can move joints immediately
+                    // ✅ Release motor torque FIRST - so user can move joints immediately
                     await releaseMotorTorque();
                     // THEN open modal - user can now follow instructions right away
                     setModalOpen(true);

examples/robot-control-web/components/PortManager.tsx

@@ -9,39 +9,13 @@ import {
 } from "./ui/card";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Badge } from "./ui/badge";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { isWebSerialSupported } from "@lerobot/web";
+import { findPort, isWebSerialSupported } from "@lerobot/web";
 import type { RobotConnection } from "@lerobot/web";
 
-/**
- * Type definitions for WebSerial API (missing from TypeScript)
- */
-interface SerialPortInfo {
-  usbVendorId?: number;
-  usbProductId?: number;
-}
-
-declare global {
-  interface SerialPort {
-    getInfo(): SerialPortInfo;
-  }
-}
-
 interface PortManagerProps {
   connectedRobots: RobotConnection[];
   onConnectedRobotsChange: (robots: RobotConnection[]) => void;
-  onCalibrate?: (
-    port: SerialPort,
-    robotType: "so100_follower" | "so100_leader",
-    robotId: string
-  ) => void;
+  onCalibrate?: (port: any) => void; // Let library handle port type
   onTeleoperate?: (robot: RobotConnection) => void;
 }
 
@@ -51,407 +25,74 @@ export function PortManager({
   onCalibrate,
   onTeleoperate,
 }: PortManagerProps) {
-  const [isConnecting, setIsConnecting] = useState(false);
   const [isFindingPorts, setIsFindingPorts] = useState(false);
   const [findPortsLog, setFindPortsLog] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
-  const [confirmDeleteDialog, setConfirmDeleteDialog] = useState<{
-    open: boolean;
-    robotIndex: number;
-    robotName: string;
-    serialNumber: string;
-  }>({
-    open: false,
-    robotIndex: -1,
-    robotName: "",
-    serialNumber: "",
-  });
-  // Load saved port data from localStorage on mount
+
+  // Load saved robots on mount by calling findPort with saved data
   useEffect(() => {
-    loadSavedPorts();
+    loadSavedRobots();
   }, []);
 
-  // Note: Robot data is now automatically saved to unified storage when robot config is updated
-
-  const loadSavedPorts = async () => {
+  const loadSavedRobots = async () => {
     try {
-      const existingPorts = await navigator.serial.getPorts();
-      const restoredPorts: RobotConnection[] = [];
-
-      for (const port of existingPorts) {
-        // Get USB device metadata to determine serial number
-        let serialNumber = null;
-        let usbMetadata = null;
-
-        try {
-          // Get all USB devices and try to match with this serial port
-          const usbDevices = await navigator.usb.getDevices();
-          const portInfo = port.getInfo();
+      console.log("🔄 Loading saved robots from localStorage...");
 
-          // Try to find matching USB device by vendor/product ID
-          const matchingDevice = usbDevices.find(
-            (device) =>
-              device.vendorId === portInfo.usbVendorId &&
-              device.productId === portInfo.usbProductId
-          );
+      // Load saved robot configs for auto-connect mode
+      const robotConfigs: any[] = [];
+      const { getUnifiedRobotData } = await import("../lib/unified-storage");
 
-          if (matchingDevice) {
-            serialNumber =
-              matchingDevice.serialNumber ||
-              `${matchingDevice.vendorId}-${
-                matchingDevice.productId
-              }-${Date.now()}`;
-            usbMetadata = {
-              vendorId: `0x${matchingDevice.vendorId
-                .toString(16)
-                .padStart(4, "0")}`,
-              productId: `0x${matchingDevice.productId
-                .toString(16)
-                .padStart(4, "0")}`,
-              serialNumber: matchingDevice.serialNumber || "Generated ID",
-              manufacturerName: matchingDevice.manufacturerName || "Unknown",
-              productName: matchingDevice.productName || "Unknown",
-              usbVersionMajor: matchingDevice.usbVersionMajor,
-              usbVersionMinor: matchingDevice.usbVersionMinor,
-              deviceClass: matchingDevice.deviceClass,
-              deviceSubclass: matchingDevice.deviceSubclass,
-              deviceProtocol: matchingDevice.deviceProtocol,
-            };
-            console.log("✅ Restored USB metadata for port:", serialNumber);
-          }
-        } catch (usbError) {
-          console.log("⚠️ Could not restore USB metadata:", usbError);
-          // Generate fallback if no USB metadata available
-          serialNumber = `fallback-${Date.now()}-${Math.random()
-            .toString(36)
-            .substr(2, 9)}`;
-        }
-
-        // Load robot configuration from unified storage
-        let robotType: "so100_follower" | "so100_leader" | undefined;
-        let robotId: string | undefined;
-        let shouldAutoConnect = false;
-
-        if (serialNumber) {
-          try {
-            const { getUnifiedRobotData } = await import(
-              "../lib/unified-storage"
-            );
-            const unifiedData = getUnifiedRobotData(serialNumber);
-            if (unifiedData?.device_info) {
-              robotType = unifiedData.device_info.robotType;
-              robotId = unifiedData.device_info.robotId;
-              shouldAutoConnect = true;
-              console.log(
-                `📋 Loaded robot config from unified storage: ${robotType} (${robotId})`
-              );
-            }
-          } catch (error) {
-            console.warn("Failed to load unified robot data:", error);
-          }
-        }
+      // Check localStorage for saved robot data
+      for (let i = 0; i < localStorage.length; i++) {
+        const key = localStorage.key(i);
+        if (key && key.startsWith("lerobotjs-")) {
+          const serialNumber = key.replace("lerobotjs-", "");
+          const robotData = getUnifiedRobotData(serialNumber);
 
-        // Auto-connect to configured robots
-        let isConnected = false;
-        try {
-          // Check if already open
-          if (port.readable !== null && port.writable !== null) {
-            isConnected = true;
-            console.log("Port already open, reusing connection");
-          } else if (shouldAutoConnect && robotType && robotId) {
-            // Auto-open robots that have saved configuration
+          if (robotData) {
             console.log(
-              `Auto-connecting to saved robot: ${robotType} (${robotId})`
+              `✅ Found saved robot: ${robotData.device_info.robotId}`
             );
-            await port.open({ baudRate: 1000000 });
-            isConnected = true;
-          } else {
-            console.log(
-              "Port found but no saved robot configuration, skipping auto-connect"
-            );
-            isConnected = false;
+
+            // Create robot config for auto-connect mode
+            robotConfigs.push({
+              robotType: robotData.device_info.robotType,
+              robotId: robotData.device_info.robotId,
+              serialNumber: serialNumber,
+            });
           }
-        } catch (error) {
-          console.log("Could not auto-connect to robot:", error);
-          isConnected = false;
         }
-
-        restoredPorts.push({
-          port,
-          name: getPortDisplayName(port),
-          isConnected,
-          robotType,
-          robotId,
-          serialNumber: serialNumber!,
-          usbMetadata: usbMetadata || undefined,
-        });
       }
 
-      onConnectedRobotsChange(restoredPorts);
-    } catch (error) {
-      console.error("Failed to load saved ports:", error);
-    }
-  };
-
-  const getPortDisplayName = (port: SerialPort): string => {
-    try {
-      const info = port.getInfo();
-      if (info.usbVendorId && info.usbProductId) {
-        return `USB Port (${info.usbVendorId}:${info.usbProductId})`;
-      }
-      if (info.usbVendorId) {
-        return `Serial Port (VID:${info.usbVendorId
-          .toString(16)
-          .toUpperCase()})`;
-      }
-    } catch (error) {
-      // getInfo() might not be available
-    }
-    return `Serial Port ${Date.now()}`;
-  };
-
-  const handleConnect = async () => {
-    if (!isWebSerialSupported()) {
-      setError("Web Serial API is not supported in this browser");
-      return;
-    }
-
-    try {
-      setIsConnecting(true);
-      setError(null);
-
-      // Step 1: Request Web Serial port
-      console.log("Step 1: Requesting Web Serial port...");
-      const port = await navigator.serial.requestPort();
-      await port.open({ baudRate: 1000000 });
-
-      // Step 2: Request WebUSB device for metadata
-      console.log(
-        "Step 2: Requesting WebUSB device for unique identification..."
-      );
-      let serialNumber = null;
-      let usbMetadata = null;
+      if (robotConfigs.length > 0) {
+        console.log(
+          `🔄 Auto-connecting to ${robotConfigs.length} saved robots...`
+        );
 
-      try {
-        // Request USB device access for metadata
-        const usbDevice = await navigator.usb.requestDevice({
-          filters: [
-            { vendorId: 0x0403 }, // FTDI
-            { vendorId: 0x067b }, // Prolific
-            { vendorId: 0x10c4 }, // Silicon Labs
-            { vendorId: 0x1a86 }, // QinHeng Electronics (CH340)
-            { vendorId: 0x239a }, // Adafruit
-            { vendorId: 0x2341 }, // Arduino
-            { vendorId: 0x2e8a }, // Raspberry Pi Foundation
-            { vendorId: 0x1b4f }, // SparkFun
-          ],
+        // Use auto-connect mode - NO DIALOG will be shown!
+        const findPortProcess = await findPort({
+          robotConfigs,
+          onMessage: (message) => {
+            console.log(`Auto-connect: ${message}`);
+          },
         });
 
-        if (usbDevice) {
-          serialNumber =
-            usbDevice.serialNumber ||
-            `${usbDevice.vendorId}-${usbDevice.productId}-${Date.now()}`;
-          usbMetadata = {
-            vendorId: `0x${usbDevice.vendorId.toString(16).padStart(4, "0")}`,
-            productId: `0x${usbDevice.productId.toString(16).padStart(4, "0")}`,
-            serialNumber: usbDevice.serialNumber || "Generated ID",
-            manufacturerName: usbDevice.manufacturerName || "Unknown",
-            productName: usbDevice.productName || "Unknown",
-            usbVersionMajor: usbDevice.usbVersionMajor,
-            usbVersionMinor: usbDevice.usbVersionMinor,
-            deviceClass: usbDevice.deviceClass,
-            deviceSubclass: usbDevice.deviceSubclass,
-            deviceProtocol: usbDevice.deviceProtocol,
-          };
-          console.log("✅ USB device metadata acquired:", usbMetadata);
-        }
-      } catch (usbError) {
+        const reconnectedRobots = await findPortProcess.result;
         console.log(
-          "⚠️ WebUSB request failed, generating fallback ID:",
-          usbError
+          `✅ Auto-connected to ${
+            reconnectedRobots.filter((r) => r.isConnected).length
+          }/${robotConfigs.length} saved robots`
         );
-        // Generate a fallback unique ID if WebUSB fails
-        serialNumber = `fallback-${Date.now()}-${Math.random()
-          .toString(36)
-          .substr(2, 9)}`;
-        usbMetadata = {
-          vendorId: "Unknown",
-          productId: "Unknown",
-          serialNumber: serialNumber,
-          manufacturerName: "USB Metadata Not Available",
-          productName: "Check browser WebUSB support",
-        };
-      }
 
-      const portName = getPortDisplayName(port);
-
-      // Step 3: Check if this robot (by serial number) is already connected
-      const existingIndex = connectedRobots.findIndex(
-        (robot) => robot.serialNumber === serialNumber
-      );
-
-      if (existingIndex === -1) {
-        // New robot - add to list
-        const newRobot: RobotConnection = {
-          port,
-          name: portName,
-          isConnected: true,
-          serialNumber: serialNumber!,
-          usbMetadata: usbMetadata || undefined,
-        };
-
-        // Try to load saved robot info by serial number using unified storage
-        if (serialNumber) {
-          try {
-            const { getRobotConfig } = await import("../lib/unified-storage");
-            const savedConfig = getRobotConfig(serialNumber);
-            if (savedConfig) {
-              newRobot.robotType = savedConfig.robotType as
-                | "so100_follower"
-                | "so100_leader";
-              newRobot.robotId = savedConfig.robotId;
-              console.log("📋 Loaded saved robot configuration:", savedConfig);
-            }
-          } catch (error) {
-            console.warn("Failed to load saved robot data:", error);
-          }
-        }
-
-        onConnectedRobotsChange([...connectedRobots, newRobot]);
-        console.log("🤖 New robot connected with ID:", serialNumber);
+        onConnectedRobotsChange(reconnectedRobots);
       } else {
-        // Existing robot - update port and connection status
-        const updatedRobots = connectedRobots.map((robot, index) =>
-          index === existingIndex
-            ? { ...robot, port, isConnected: true, name: portName }
-            : robot
-        );
-        onConnectedRobotsChange(updatedRobots);
-        console.log("🔄 Existing robot reconnected:", serialNumber);
+        console.log("No saved robots found in localStorage");
       }
     } catch (error) {
-      if (
-        error instanceof Error &&
-        (error.message.includes("cancelled") ||
-          error.message.includes("No port selected by the user") ||
-          error.name === "NotAllowedError")
-      ) {
-        // User cancelled - no error message needed, just log to console
-        console.log("Connection cancelled by user");
-        return;
-      }
-      setError(
-        error instanceof Error ? error.message : "Failed to connect to robot"
-      );
-    } finally {
-      setIsConnecting(false);
-    }
-  };
-
-  const handleDisconnect = async (index: number) => {
-    const portInfo = connectedRobots[index];
-    const robotName = portInfo.robotId || portInfo.name;
-    const serialNumber = portInfo.serialNumber || "unknown";
-
-    // Show confirmation dialog
-    setConfirmDeleteDialog({
-      open: true,
-      robotIndex: index,
-      robotName,
-      serialNumber,
-    });
-  };
-
-  const confirmDelete = async () => {
-    const { robotIndex } = confirmDeleteDialog;
-    const portInfo = connectedRobots[robotIndex];
-
-    setConfirmDeleteDialog({
-      open: false,
-      robotIndex: -1,
-      robotName: "",
-      serialNumber: "",
-    });
-
-    try {
-      // Close the serial port connection
-      if (portInfo.isConnected) {
-        await portInfo.port.close();
-      }
-
-      // Delete from unified storage if serial number is available
-      if (portInfo.serialNumber) {
-        try {
-          const { getUnifiedKey } = await import("../lib/unified-storage");
-          const unifiedKey = getUnifiedKey(portInfo.serialNumber);
-
-          // Remove unified storage data
-          localStorage.removeItem(unifiedKey);
-          console.log(`🗑️ Deleted unified robot data: ${unifiedKey}`);
-        } catch (error) {
-          console.warn("Failed to delete unified storage data:", error);
-        }
-      }
-
-      // Remove from UI
-      const updatedRobots = connectedRobots.filter((_, i) => i !== robotIndex);
-      onConnectedRobotsChange(updatedRobots);
-
-      console.log(
-        `✅ Robot "${confirmDeleteDialog.robotName}" permanently removed from system`
-      );
-    } catch (error) {
-      setError(
-        error instanceof Error ? error.message : "Failed to remove robot"
-      );
+      console.error("Failed to load saved robots:", error);
     }
   };
 
-  const cancelDelete = () => {
-    setConfirmDeleteDialog({
-      open: false,
-      robotIndex: -1,
-      robotName: "",
-      serialNumber: "",
-    });
-  };
-
-  const handleUpdatePortInfo = (
-    index: number,
-    robotType: "so100_follower" | "so100_leader",
-    robotId: string
-  ) => {
-    const updatedRobots = connectedRobots.map((robot, i) => {
-      if (i === index) {
-        const updatedRobot = { ...robot, robotType, robotId };
-
-        // Save robot configuration using unified storage
-        if (updatedRobot.serialNumber) {
-          import("../lib/unified-storage")
-            .then(({ saveRobotConfig }) => {
-              saveRobotConfig(
-                updatedRobot.serialNumber!,
-                robotType,
-                robotId,
-                updatedRobot.usbMetadata
-              );
-              console.log(
-                "💾 Saved robot configuration for:",
-                updatedRobot.serialNumber
-              );
-            })
-            .catch((error) => {
-              console.warn("Failed to save robot configuration:", error);
-            });
-        }
-
-        return updatedRobot;
-      }
-      return robot;
-    });
-    onConnectedRobotsChange(updatedRobots);
-  };
-
   const handleFindPorts = async () => {
     if (!isWebSerialSupported()) {
       setError("Web Serial API is not supported in this browser");
@@ -463,44 +104,35 @@ export function PortManager({
       setFindPortsLog([]);
       setError(null);
 
-      // Use the new findPort API from standard library
-      const { findPort } = await import("@lerobot/web");
-
+      // Use clean library API - library handles everything!
       const findPortProcess = await findPort({
         onMessage: (message) => {
           setFindPortsLog((prev) => [...prev, message]);
         },
       });
 
-      const robotConnections = (await findPortProcess.result) as any; // RobotConnection[] from findPort
-      const robotConnection = robotConnections[0]; // Get first robot from array
+      const robotConnections = await findPortProcess.result;
 
-      const portName = getPortDisplayName(robotConnection.port);
-      setFindPortsLog((prev) => [...prev, `✅ Port ready: ${portName}`]);
-
-      // Add to connected ports if not already there
-      const existingIndex = connectedRobots.findIndex(
-        (p) => p.name === portName
+      // Add new robots to the list (avoid duplicates)
+      const newRobots = robotConnections.filter(
+        (newRobot) =>
+          !connectedRobots.some(
+            (existing) => existing.serialNumber === newRobot.serialNumber
+          )
       );
-      if (existingIndex === -1) {
-        const newPort: RobotConnection = {
-          port: robotConnection.port,
-          name: portName,
-          isConnected: true,
-          robotType: robotConnection.robotType,
-          robotId: robotConnection.robotId,
-          serialNumber: robotConnection.serialNumber,
-        };
-        onConnectedRobotsChange([...connectedRobots, newPort]);
-      }
+
+      onConnectedRobotsChange([...connectedRobots, ...newRobots]);
+      setFindPortsLog((prev) => [
+        ...prev,
+        `✅ Found ${newRobots.length} new robots`,
+      ]);
     } catch (error) {
       if (
         error instanceof Error &&
         (error.message.includes("cancelled") ||
           error.name === "NotAllowedError")
       ) {
-        // User cancelled - no message needed, just log to console
-        console.log("Port identification cancelled by user");
+        console.log("Port discovery cancelled by user");
         return;
       }
       setError(error instanceof Error ? error.message : "Failed to find ports");
@@ -509,54 +141,37 @@ export function PortManager({
     }
   };
 
-  const ensurePortIsOpen = async (robotIndex: number) => {
-    const robot = connectedRobots[robotIndex];
-    if (!robot) return false;
-
-    try {
-      // If port is already open, we're good
-      if (robot.port.readable !== null && robot.port.writable !== null) {
-        return true;
-      }
-
-      // Try to open the port
-      await robot.port.open({ baudRate: 1000000 });
-
-      // Update the robot's connection status
-      const updatedRobots = connectedRobots.map((r, i) =>
-        i === robotIndex ? { ...r, isConnected: true } : r
-      );
-      onConnectedRobotsChange(updatedRobots);
-
-      return true;
-    } catch (error) {
-      console.error("Failed to open port for calibration:", error);
-      setError(error instanceof Error ? error.message : "Failed to open port");
-      return false;
-    }
+  const handleDisconnect = (index: number) => {
+    const updatedRobots = connectedRobots.filter((_, i) => i !== index);
+    onConnectedRobotsChange(updatedRobots);
   };
 
-  const handleCalibrate = async (port: RobotConnection) => {
-    if (!port.robotType || !port.robotId) {
-      setError("Please set robot type and ID before calibrating");
+  const handleCalibrate = (robot: RobotConnection) => {
+    if (!robot.robotType || !robot.robotId) {
+      setError("Please configure robot type and ID first");
       return;
     }
+    if (onCalibrate) {
+      onCalibrate(robot.port);
+    }
+  };
 
-    // Find the robot index
-    const robotIndex = connectedRobots.findIndex((r) => r.port === port.port);
-    if (robotIndex === -1) {
-      setError("Robot not found in connected robots list");
+  const handleTeleoperate = (robot: RobotConnection) => {
+    if (!robot.robotType || !robot.robotId) {
+      setError("Please configure robot type and ID first");
       return;
     }
 
-    // Ensure port is open before calibrating
-    const isOpen = await ensurePortIsOpen(robotIndex);
-    if (!isOpen) {
-      return; // Error already set in ensurePortIsOpen
+    if (!robot.isConnected || !robot.port) {
+      setError(
+        "Robot is not connected. Please use 'Find & Connect Robots' first."
+      );
+      return;
     }
 
-    if (onCalibrate) {
-      onCalibrate(port.port, port.robotType, port.robotId);
+    // Robot is connected, proceed with teleoperation
+    if (onTeleoperate) {
+      onTeleoperate(robot);
     }
   };
 
@@ -565,7 +180,7 @@ export function PortManager({
       <CardHeader>
         <CardTitle>🔌 Robot Connection Manager</CardTitle>
         <CardDescription>
-          Connect, identify, and manage your robot arms
+          Find and connect to your robot devices
         </CardDescription>
       </CardHeader>
       <CardContent>
@@ -577,28 +192,18 @@ export function PortManager({
             </Alert>
           )}
 
-          {/* Connection Controls */}
-          <div className="flex gap-2">
-            <Button
-              onClick={handleConnect}
-              disabled={isConnecting || !isWebSerialSupported()}
-              className="flex-1"
-            >
-              {isConnecting ? "Connecting..." : "Connect Robot"}
-            </Button>
-            <Button
-              variant="outline"
-              onClick={handleFindPorts}
-              disabled={isFindingPorts || !isWebSerialSupported()}
-              className="flex-1"
-            >
-              {isFindingPorts ? "Finding..." : "Find Port"}
-            </Button>
-          </div>
+          {/* Find Ports Button */}
+          <Button
+            onClick={handleFindPorts}
+            disabled={isFindingPorts || !isWebSerialSupported()}
+            className="w-full"
+          >
+            {isFindingPorts ? "Finding Robots..." : "🔍 Find & Connect Robots"}
+          </Button>
 
           {/* Find Ports Log */}
           {findPortsLog.length > 0 && (
-            <div className="bg-gray-50 p-3 rounded-md text-sm space-y-1">
+            <div className="bg-gray-50 p-3 rounded-md text-sm space-y-1 max-h-32 overflow-y-auto">
               {findPortsLog.map((log, index) => (
                 <div key={index} className="text-gray-700">
                   {log}
@@ -607,7 +212,7 @@ export function PortManager({
             </div>
           )}
 
-          {/* Connected Ports */}
+          {/* Connected Robots */}
           <div>
             <h4 className="font-semibold mb-3">
               Connected Robots ({connectedRobots.length})
@@ -616,23 +221,20 @@ export function PortManager({
             {connectedRobots.length === 0 ? (
               <div className="text-center py-8 text-gray-500">
                 <div className="text-2xl mb-2">🤖</div>
-                <p>No robots connected</p>
+                <p>No robots found</p>
                 <p className="text-xs">
-                  Use "Connect Robot" or "Find Port" to add robots
+                  Click "Find & Connect Robots" to discover devices
                 </p>
               </div>
             ) : (
               <div className="space-y-4">
-                {connectedRobots.map((portInfo, index) => (
-                  <PortCard
-                    key={index}
-                    portInfo={portInfo}
+                {connectedRobots.map((robot, index) => (
+                  <RobotCard
+                    key={robot.serialNumber || index}
+                    robot={robot}
                     onDisconnect={() => handleDisconnect(index)}
-                    onUpdateInfo={(robotType, robotId) =>
-                      handleUpdatePortInfo(index, robotType, robotId)
-                    }
-                    onCalibrate={() => handleCalibrate(portInfo)}
-                    onTeleoperate={() => onTeleoperate?.(portInfo)}
+                    onCalibrate={() => handleCalibrate(robot)}
+                    onTeleoperate={() => handleTeleoperate(robot)}
                   />
                 ))}
               </div>
@@ -640,397 +242,127 @@ export function PortManager({
           </div>
         </div>
       </CardContent>
-
-      {/* Confirmation Dialog */}
-      <Dialog open={confirmDeleteDialog.open} onOpenChange={cancelDelete}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>🗑️ Permanently Delete Robot Data?</DialogTitle>
-            <DialogDescription>
-              This action cannot be undone. All robot data will be permanently
-              deleted.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="space-y-3">
-            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
-              <div className="font-medium text-red-900 mb-2">
-                Robot Information:
-              </div>
-              <div className="text-sm text-red-800 space-y-1">
-                <div>
-                  • Name:{" "}
-                  <span className="font-mono">
-                    {confirmDeleteDialog.robotName}
-                  </span>
-                </div>
-                <div>
-                  • Serial:{" "}
-                  <span className="font-mono">
-                    {confirmDeleteDialog.serialNumber}
-                  </span>
-                </div>
-              </div>
-            </div>
-
-            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
-              <div className="font-medium text-red-900 mb-2">
-                This will permanently delete:
-              </div>
-              <div className="text-sm text-red-800 space-y-1">
-                <div>• Robot configuration</div>
-                <div>• Calibration data</div>
-                <div>• All saved settings</div>
-              </div>
-            </div>
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={cancelDelete}>
-              Cancel
-            </Button>
-            <Button variant="destructive" onClick={confirmDelete}>
-              Delete Forever
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
     </Card>
   );
 }
 
-interface PortCardProps {
-  portInfo: RobotConnection;
+interface RobotCardProps {
+  robot: RobotConnection;
   onDisconnect: () => void;
-  onUpdateInfo: (
-    robotType: "so100_follower" | "so100_leader",
-    robotId: string
-  ) => void;
   onCalibrate: () => void;
   onTeleoperate: () => void;
 }
 
-function PortCard({
-  portInfo,
+function RobotCard({
+  robot,
   onDisconnect,
-  onUpdateInfo,
   onCalibrate,
   onTeleoperate,
-}: PortCardProps) {
-  const [robotType, setRobotType] = useState<"so100_follower" | "so100_leader">(
-    portInfo.robotType || "so100_follower"
-  );
-  const [robotId, setRobotId] = useState(portInfo.robotId || "");
+}: RobotCardProps) {
+  const [calibrationStatus, setCalibrationStatus] = useState<{
+    timestamp: string;
+    readCount: number;
+  } | null>(null);
   const [isEditing, setIsEditing] = useState(false);
-  const [isScanning, setIsScanning] = useState(false);
-  const [motorIDs, setMotorIDs] = useState<number[]>([]);
-  const [portMetadata, setPortMetadata] = useState<any>(null);
-  const [showDeviceInfo, setShowDeviceInfo] = useState(false);
-
-  // Check for calibration using unified storage
-  const getCalibrationStatus = () => {
-    // Use the same serial number logic as calibration: prefer main serialNumber, fallback to USB metadata, then "unknown"
-    const serialNumber =
-      portInfo.serialNumber || portInfo.usbMetadata?.serialNumber || "unknown";
-
-    try {
-      // Use unified storage system with automatic migration
-      import("../lib/unified-storage")
-        .then(({ getCalibrationStatus }) => {
-          const status = getCalibrationStatus(serialNumber);
-          return status;
-        })
-        .catch((error) => {
-          console.warn("Failed to load unified calibration data:", error);
-          return null;
-        });
-
-      // For immediate synchronous return, try to get existing unified data first
-      const unifiedKey = `lerobotjs-${serialNumber}`;
-      const existing = localStorage.getItem(unifiedKey);
-      if (existing) {
-        const data = JSON.parse(existing);
-        if (data.calibration?.metadata) {
-          return {
-            timestamp: data.calibration.metadata.timestamp,
-            readCount: data.calibration.metadata.readCount,
-          };
-        }
-      }
-    } catch (error) {
-      console.warn("Failed to read calibration from unified storage:", error);
-    }
-    return null;
-  };
-
-  const calibrationStatus = getCalibrationStatus();
-
-  const handleSave = () => {
-    if (robotId.trim()) {
-      onUpdateInfo(robotType, robotId.trim());
-      setIsEditing(false);
-    }
-  };
-
-  // Use current values (either from props or local state)
-  const currentRobotType = portInfo.robotType || robotType;
-  const currentRobotId = portInfo.robotId || robotId;
-
-  const handleCancel = () => {
-    setRobotType(portInfo.robotType || "so100_follower");
-    setRobotId(portInfo.robotId || "");
-    setIsEditing(false);
-  };
-
-  // Scan for motor IDs and gather USB device metadata
-  const scanDeviceInfo = async () => {
-    if (!portInfo.port || !portInfo.isConnected) {
-      console.warn("Port not connected");
-      return;
-    }
+  const [editRobotType, setEditRobotType] = useState<
+    "so100_follower" | "so100_leader"
+  >(robot.robotType || "so100_follower");
+  const [editRobotId, setEditRobotId] = useState(robot.robotId || "");
 
-    setIsScanning(true);
-    setMotorIDs([]);
-    setPortMetadata(null);
-    const foundIDs: number[] = [];
+  const isConfigured = robot.robotType && robot.robotId;
 
-    try {
-      // Try to get USB device info using WebUSB for better metadata
-      let usbDeviceInfo = null;
+  // Check calibration status using unified storage
+  useEffect(() => {
+    const checkCalibrationStatus = async () => {
+      if (!robot.serialNumber) return;
 
       try {
-        // First, check if we already have USB device permissions
-        let usbDevices = await navigator.usb.getDevices();
-        console.log("Already permitted USB devices:", usbDevices);
-
-        // If no devices found, request permission for USB-to-serial devices
-        if (usbDevices.length === 0) {
-          console.log(
-            "No USB permissions yet, requesting access to USB-to-serial devices..."
-          );
-
-          // Request access to common USB-to-serial chips
-          try {
-            const device = await navigator.usb.requestDevice({
-              filters: [
-                { vendorId: 0x0403 }, // FTDI
-                { vendorId: 0x067b }, // Prolific
-                { vendorId: 0x10c4 }, // Silicon Labs
-                { vendorId: 0x1a86 }, // QinHeng Electronics (CH340)
-                { vendorId: 0x239a }, // Adafruit
-                { vendorId: 0x2341 }, // Arduino
-                { vendorId: 0x2e8a }, // Raspberry Pi Foundation
-                { vendorId: 0x1b4f }, // SparkFun
-              ],
-            });
-
-            if (device) {
-              usbDevices = [device];
-              console.log("USB device access granted:", device);
-            }
-          } catch (requestError) {
-            console.log(
-              "User cancelled USB device selection or no devices found"
-            );
-            // Try requesting any device as fallback
-            try {
-              const anyDevice = await navigator.usb.requestDevice({
-                filters: [], // Allow any USB device
-              });
-              if (anyDevice) {
-                usbDevices = [anyDevice];
-                console.log("Fallback USB device selected:", anyDevice);
-              }
-            } catch (fallbackError) {
-              console.log("No USB device selected");
-            }
-          }
-        }
-
-        // Try to match with Web Serial port (this is tricky, so we'll take the first available)
-        if (usbDevices.length > 0) {
-          // Look for common USB-to-serial chip vendor IDs
-          const serialChipVendors = [
-            0x0403, // FTDI
-            0x067b, // Prolific
-            0x10c4, // Silicon Labs
-            0x1a86, // QinHeng Electronics (CH340)
-            0x239a, // Adafruit
-            0x2341, // Arduino
-            0x2e8a, // Raspberry Pi Foundation
-            0x1b4f, // SparkFun
-          ];
-
-          const serialDevice =
-            usbDevices.find((device) =>
-              serialChipVendors.includes(device.vendorId)
-            ) || usbDevices[0]; // Fallback to first device
-
-          if (serialDevice) {
-            usbDeviceInfo = {
-              vendorId: `0x${serialDevice.vendorId
-                .toString(16)
-                .padStart(4, "0")}`,
-              productId: `0x${serialDevice.productId
-                .toString(16)
-                .padStart(4, "0")}`,
-              serialNumber: serialDevice.serialNumber || "Not available",
-              manufacturerName: serialDevice.manufacturerName || "Unknown",
-              productName: serialDevice.productName || "Unknown",
-              usbVersionMajor: serialDevice.usbVersionMajor,
-              usbVersionMinor: serialDevice.usbVersionMinor,
-              deviceClass: serialDevice.deviceClass,
-              deviceSubclass: serialDevice.deviceSubclass,
-              deviceProtocol: serialDevice.deviceProtocol,
-            };
-            console.log("USB device info:", usbDeviceInfo);
-          }
-        }
-      } catch (usbError) {
-        console.log("WebUSB not available or no permissions:", usbError);
-        // Fallback to Web Serial API info
-        const portInfo_metadata = portInfo.port.getInfo();
-        console.log("Serial port metadata fallback:", portInfo_metadata);
-        if (Object.keys(portInfo_metadata).length > 0) {
-          usbDeviceInfo = {
-            vendorId: portInfo_metadata.usbVendorId
-              ? `0x${portInfo_metadata.usbVendorId
-                  .toString(16)
-                  .padStart(4, "0")}`
-              : "Not available",
-            productId: portInfo_metadata.usbProductId
-              ? `0x${portInfo_metadata.usbProductId
-                  .toString(16)
-                  .padStart(4, "0")}`
-              : "Not available",
-            serialNumber: "Not available via Web Serial",
-            manufacturerName: "Not available via Web Serial",
-            productName: "Not available via Web Serial",
-          };
-        }
-      }
-
-      setPortMetadata(usbDeviceInfo);
-
-      // Get reader/writer for the port
-      const reader = portInfo.port.readable?.getReader();
-      const writer = portInfo.port.writable?.getWriter();
-
-      if (!reader || !writer) {
-        console.warn("Cannot access port reader/writer");
-        setShowDeviceInfo(true);
-        return;
+        const { getCalibrationStatus } = await import("../lib/unified-storage");
+        const status = getCalibrationStatus(robot.serialNumber);
+        setCalibrationStatus(status);
+      } catch (error) {
+        console.warn("Failed to check calibration status:", error);
       }
+    };
 
-      // Test motor IDs 1-10 (common range for servos)
-      for (let motorId = 1; motorId <= 10; motorId++) {
-        try {
-          // Create STS3215 ping packet
-          const packet = new Uint8Array([
-            0xff,
-            0xff,
-            motorId,
-            0x02,
-            0x01,
-            0x00,
-          ]);
-          const checksum = ~(motorId + 0x02 + 0x01) & 0xff;
-          packet[5] = checksum;
-
-          // Send ping
-          await writer.write(packet);
+    checkCalibrationStatus();
+  }, [robot.serialNumber]);
 
-          // Wait a bit for response
-          await new Promise((resolve) => setTimeout(resolve, 20));
+  const handleSaveConfig = async () => {
+    if (!editRobotId.trim() || !robot.serialNumber) return;
 
-          // Try to read response with timeout
-          const timeoutPromise = new Promise((_, reject) =>
-            setTimeout(() => reject(new Error("Timeout")), 50)
-          );
-
-          try {
-            const result = (await Promise.race([
-              reader.read(),
-              timeoutPromise,
-            ])) as ReadableStreamReadResult<Uint8Array>;
-
-            if (
-              result &&
-              !result.done &&
-              result.value &&
-              result.value.length >= 6
-            ) {
-              const response = result.value;
-              const responseId = response[2];
-
-              // If we got a response with matching ID, motor exists
-              if (responseId === motorId) {
-                foundIDs.push(motorId);
-              }
-            }
-          } catch (readError) {
-            // No response from this motor ID - that's normal
-          }
-        } catch (error) {
-          console.warn(`Error testing motor ID ${motorId}:`, error);
-        }
-
-        // Small delay between tests
-        await new Promise((resolve) => setTimeout(resolve, 10));
-      }
+    try {
+      const { saveRobotConfig } = await import("../lib/unified-storage");
+      saveRobotConfig(
+        robot.serialNumber,
+        editRobotType,
+        editRobotId.trim(),
+        robot.usbMetadata
+      );
 
-      reader.releaseLock();
-      writer.releaseLock();
+      // Update the robot object (this should trigger a re-render)
+      robot.robotType = editRobotType;
+      robot.robotId = editRobotId.trim();
 
-      setMotorIDs(foundIDs);
-      setShowDeviceInfo(true);
+      setIsEditing(false);
+      console.log("✅ Robot configuration saved");
     } catch (error) {
-      console.error("Device info scan failed:", error);
-    } finally {
-      setIsScanning(false);
+      console.error("Failed to save robot configuration:", error);
     }
   };
 
+  const handleCancelEdit = () => {
+    setEditRobotType(robot.robotType || "so100_follower");
+    setEditRobotId(robot.robotId || "");
+    setIsEditing(false);
+  };
+
   return (
     <div className="border rounded-lg p-4 space-y-3">
-      {/* Header with port name and status */}
+      {/* Header */}
       <div className="flex items-center justify-between">
         <div className="flex items-center space-x-2">
           <div className="flex flex-col">
-            <span className="font-medium">{portInfo.name}</span>
-            {portInfo.serialNumber && (
-              <span className="text-xs text-gray-500 font-mono">
-                ID:{" "}
-                {portInfo.serialNumber.length > 20
-                  ? portInfo.serialNumber.substring(0, 20) + "..."
-                  : portInfo.serialNumber}
+            <span className="font-medium">
+              {robot.robotId || robot.name || "Unnamed Robot"}
+            </span>
+            <span className="text-xs text-gray-500">
+              {robot.robotType?.replace("_", " ") || "Not configured"}
+            </span>
+            {robot.serialNumber && (
+              <span className="text-xs text-gray-400 font-mono">
+                {robot.serialNumber.length > 20
+                  ? robot.serialNumber.substring(0, 20) + "..."
+                  : robot.serialNumber}
               </span>
             )}
           </div>
-          <Badge variant={portInfo.isConnected ? "default" : "outline"}>
-            {portInfo.isConnected ? "Connected" : "Available"}
-          </Badge>
+          <div className="flex flex-col gap-1">
+            <Badge variant={robot.isConnected ? "default" : "outline"}>
+              {robot.isConnected ? "Connected" : "Available"}
+            </Badge>
+            {calibrationStatus && (
+              <Badge variant="default" className="bg-green-100 text-green-800">
+                ✅ Calibrated
+              </Badge>
+            )}
+          </div>
         </div>
         <Button variant="destructive" size="sm" onClick={onDisconnect}>
           Remove
         </Button>
       </div>
 
-      {/* Robot Info Display (when not editing) */}
-      {!isEditing && currentRobotType && currentRobotId && (
+      {/* Robot Configuration Display (when not editing) */}
+      {!isEditing && isConfigured && (
         <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
           <div className="flex items-center space-x-3">
             <div>
-              <div className="font-medium text-sm">{currentRobotId}</div>
+              <div className="font-medium text-sm">{robot.robotId}</div>
               <div className="text-xs text-gray-600">
-                {currentRobotType.replace("_", " ")}
+                {robot.robotType?.replace("_", " ")}
               </div>
             </div>
-            {calibrationStatus && (
-              <Badge variant="default" className="bg-green-100 text-green-800">
-                ✅ Calibrated
-              </Badge>
-            )}
           </div>
           <Button
             variant="outline"
@@ -1042,8 +374,8 @@ function PortCard({
         </div>
       )}
 
-      {/* Setup prompt for unconfigured robots */}
-      {!isEditing && (!currentRobotType || !currentRobotId) && (
+      {/* Configuration Prompt for unconfigured robots */}
+      {!isEditing && !isConfigured && (
         <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
           <div className="text-sm text-blue-800">
             Robot needs configuration before use
@@ -1067,9 +399,9 @@ function PortCard({
                 Robot Type
               </label>
               <select
-                value={robotType}
+                value={editRobotType}
                 onChange={(e) =>
-                  setRobotType(
+                  setEditRobotType(
                     e.target.value as "so100_follower" | "so100_leader"
                   )
                 }
@@ -1083,8 +415,8 @@ function PortCard({
               <label className="text-sm font-medium block mb-1">Robot ID</label>
               <input
                 type="text"
-                value={robotId}
-                onChange={(e) => setRobotId(e.target.value)}
+                value={editRobotId}
+                onChange={(e) => setEditRobotId(e.target.value)}
                 placeholder="e.g., my_robot"
                 className="w-full px-2 py-1 border rounded text-sm"
               />
@@ -1092,160 +424,62 @@ function PortCard({
           </div>
 
           <div className="flex gap-2">
-            <Button size="sm" onClick={handleSave} disabled={!robotId.trim()}>
+            <Button
+              size="sm"
+              onClick={handleSaveConfig}
+              disabled={!editRobotId.trim()}
+            >
               Save
             </Button>
-            <Button size="sm" variant="outline" onClick={handleCancel}>
+            <Button size="sm" variant="outline" onClick={handleCancelEdit}>
               Cancel
             </Button>
           </div>
         </div>
       )}
 
-      {/* Calibration Status and Action */}
-      {currentRobotType && currentRobotId && (
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-gray-600">
-              {calibrationStatus ? (
-                <span>
-                  Last calibrated:{" "}
-                  {new Date(calibrationStatus.timestamp).toLocaleDateString()}
-                  <span className="text-xs ml-1">
-                    ({calibrationStatus.readCount} readings)
-                  </span>
-                </span>
-              ) : (
-                <span>Not calibrated yet</span>
-              )}
-            </div>
-            <div className="flex gap-2">
-              <Button
-                size="sm"
-                variant={calibrationStatus ? "outline" : "default"}
-                onClick={onCalibrate}
-                disabled={!currentRobotType || !currentRobotId}
-              >
-                {calibrationStatus ? "Re-calibrate" : "Calibrate"}
-              </Button>
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={onTeleoperate}
-                disabled={
-                  !currentRobotType || !currentRobotId || !portInfo.isConnected
-                }
-              >
-                🎮 Teleoperate
-              </Button>
-            </div>
-          </div>
-
-          {/* Device Info Scanner */}
-          <div className="flex items-center justify-between">
-            <div className="text-sm text-gray-600">
-              Scan device info and motor IDs
-            </div>
-            <Button
-              size="sm"
-              variant="outline"
-              onClick={scanDeviceInfo}
-              disabled={!portInfo.isConnected || isScanning}
-            >
-              {isScanning ? "Scanning..." : "Show Device Info"}
-            </Button>
-          </div>
-
-          {/* Device Info Results */}
-          {showDeviceInfo && (
-            <div className="p-3 bg-gray-50 rounded-lg space-y-3">
-              {/* USB Device Information */}
-              {portMetadata && (
-                <div>
-                  <div className="text-sm font-medium mb-2">
-                    📱 USB Device Info:
-                  </div>
-                  <div className="space-y-1 text-xs">
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Vendor ID:</span>
-                      <span className="font-mono">{portMetadata.vendorId}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Product ID:</span>
-                      <span className="font-mono">
-                        {portMetadata.productId}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Serial Number:</span>
-                      <span className="font-mono text-green-600 font-semibold">
-                        {portMetadata.serialNumber}
-                      </span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Manufacturer:</span>
-                      <span>{portMetadata.manufacturerName}</span>
-                    </div>
-                    <div className="flex justify-between">
-                      <span className="text-gray-600">Product:</span>
-                      <span>{portMetadata.productName}</span>
-                    </div>
-                    {portMetadata.usbVersionMajor && (
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">USB Version:</span>
-                        <span>
-                          {portMetadata.usbVersionMajor}.
-                          {portMetadata.usbVersionMinor}
-                        </span>
-                      </div>
-                    )}
-                    {portMetadata.deviceClass !== undefined && (
-                      <div className="flex justify-between">
-                        <span className="text-gray-600">Device Class:</span>
-                        <span>
-                          0x
-                          {portMetadata.deviceClass
-                            .toString(16)
-                            .padStart(2, "0")}
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              )}
-
-              {/* Motor IDs */}
-              <div>
-                <div className="text-sm font-medium mb-2">
-                  🤖 Found Motor IDs:
-                </div>
-                {motorIDs.length > 0 ? (
-                  <div className="flex flex-wrap gap-2">
-                    {motorIDs.map((id) => (
-                      <Badge key={id} variant="outline" className="text-xs">
-                        Motor {id}
-                      </Badge>
-                    ))}
-                  </div>
-                ) : (
-                  <div className="text-sm text-gray-500">
-                    No motor IDs found. Check connection and power.
-                  </div>
-                )}
-              </div>
-
-              <Button
-                size="sm"
-                variant="outline"
-                onClick={() => setShowDeviceInfo(false)}
-                className="mt-2 text-xs"
-              >
-                Hide
-              </Button>
-            </div>
+      {/* Calibration Status */}
+      {isConfigured && !isEditing && (
+        <div className="text-sm text-gray-600">
+          {calibrationStatus ? (
+            <span>
+              Last calibrated:{" "}
+              {new Date(calibrationStatus.timestamp).toLocaleDateString()}
+              <span className="text-xs ml-1">
+                ({calibrationStatus.readCount} readings)
+              </span>
+            </span>
+          ) : (
+            <span>Not calibrated yet</span>
           )}
         </div>
       )}
+
+      {/* Actions */}
+      {isConfigured && !isEditing && (
+        <div className="flex gap-2">
+          <Button
+            size="sm"
+            variant={calibrationStatus ? "outline" : "default"}
+            onClick={onCalibrate}
+          >
+            {calibrationStatus ? "📏 Re-calibrate" : "📏 Calibrate"}
+          </Button>
+          <Button
+            size="sm"
+            variant="outline"
+            onClick={onTeleoperate}
+            disabled={!robot.isConnected}
+            title={
+              !robot.isConnected
+                ? "Use 'Find & Connect Robots' first"
+                : undefined
+            }
+          >
+            🎮 Teleoperate
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

examples/robot-control-web/components/TeleoperationPanel.tsx

@@ -208,6 +208,41 @@ export function TeleoperationPanel({
           keyCode as keyof typeof SO100_KEYBOARD_CONTROLS
         ];
       const pressed = isKeyPressed(keyCode);
+      const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+      const startContinuousPress = () => {
+        if (!isActive || !teleoperationProcessRef.current) return;
+
+        // Initial press
+        simulateKeyPress(keyCode);
+
+        // Set up continuous updates to maintain key state
+        // Update every 50ms to stay well within the 10 second timeout
+        intervalRef.current = setInterval(() => {
+          if (teleoperationProcessRef.current) {
+            simulateKeyPress(keyCode);
+          }
+        }, 50);
+      };
+
+      const stopContinuousPress = () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+        if (isActive) {
+          simulateKeyRelease(keyCode);
+        }
+      };
+
+      // Cleanup interval on unmount
+      useEffect(() => {
+        return () => {
+          if (intervalRef.current) {
+            clearInterval(intervalRef.current);
+          }
+        };
+      }, []);
 
       return (
         <Button
@@ -226,15 +261,15 @@ export function TeleoperationPanel({
           disabled={!isActive}
           onMouseDown={(e) => {
             e.preventDefault();
-            if (isActive) simulateKeyPress(keyCode);
+            startContinuousPress();
           }}
           onMouseUp={(e) => {
             e.preventDefault();
-            if (isActive) simulateKeyRelease(keyCode);
+            stopContinuousPress();
           }}
           onMouseLeave={(e) => {
             e.preventDefault();
-            if (isActive) simulateKeyRelease(keyCode);
+            stopContinuousPress();
           }}
           title={control?.description || keyCode}
         >

examples/test-sequential-operations.html

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sequential Operations Test - LeRobot.js</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 2rem;
+        background: #f5f5f5;
+      }
+
+      .container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+
+      button {
+        background: #2563eb;
+        color: white;
+        border: none;
+        padding: 12px 24px;
+        border-radius: 6px;
+        font-size: 16px;
+        cursor: pointer;
+        margin: 8px;
+      }
+
+      button:hover {
+        background: #1d4ed8;
+      }
+
+      button:disabled {
+        background: #9ca3af;
+        cursor: not-allowed;
+      }
+
+      .log {
+        background: #1f2937;
+        color: #f9fafb;
+        padding: 1rem;
+        border-radius: 6px;
+        font-family: "Courier New", monospace;
+        font-size: 14px;
+        max-height: 400px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        margin-top: 1rem;
+      }
+
+      .warning {
+        background: #fef3c7;
+        border: 1px solid #f59e0b;
+        color: #92400e;
+        padding: 1rem;
+        border-radius: 6px;
+        margin: 1rem 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>🧪 Sequential Operations Test</h1>
+      <p>
+        This test checks if calling <code>findPort</code> →
+        <code>calibrate</code> → <code>releaseMotors</code> →
+        <code>teleoperate</code> works without connection conflicts.
+      </p>
+
+      <div class="warning">
+        <strong>⚠️ Note:</strong> This test requires a robot to be connected.
+        Make sure your SO-100 robot is plugged in via USB.
+      </div>
+
+      <button id="runTest" onclick="runSequentialTest()">
+        🚀 Run Sequential Operations Test
+      </button>
+
+      <button id="clearLog" onclick="clearLog()">🗑️ Clear Log</button>
+
+      <div id="log" class="log"></div>
+    </div>
+
+    <script type="module" src="./test-sequential-operations.ts"></script>
+  </body>
+</html>

examples/test-sequential-operations.ts

@@ -0,0 +1,315 @@
+/**
+ * Sequential Operations Test Logic
+ * Tests: findPort → calibrate → releaseMotors → teleoperate
+ */
+
+import {
+  findPort,
+  calibrate,
+  releaseMotors,
+  teleoperate,
+  WebSerialPortWrapper,
+  createSO100Config,
+} from "@lerobot/web";
+
+let isRunning = false;
+
+function log(message: string) {
+  const logElement = document.getElementById("log");
+  if (logElement) {
+    const timestamp = new Date().toLocaleTimeString();
+    logElement.textContent += `[${timestamp}] ${message}\n`;
+    logElement.scrollTop = logElement.scrollHeight;
+  }
+}
+
+function setButtonState(running: boolean) {
+  isRunning = running;
+  const button = document.getElementById("runTest") as HTMLButtonElement;
+  if (button) {
+    button.disabled = running;
+    button.textContent = running
+      ? "⏳ Running Test..."
+      : "🚀 Run Sequential Operations Test";
+  }
+}
+
+declare global {
+  interface Window {
+    clearLog: () => void;
+    runSequentialTest: () => Promise<void>;
+  }
+}
+
+window.clearLog = function () {
+  const logElement = document.getElementById("log");
+  if (logElement) {
+    logElement.textContent = "Log cleared.\n";
+  }
+};
+
+window.runSequentialTest = async function () {
+  if (isRunning) return;
+
+  setButtonState(true);
+  log("🚀 Starting sequential operations test...");
+
+  try {
+    // Step 1: Find port
+    log("\n1️⃣ Finding robot port...");
+    const findProcess = await findPort();
+    const robots = await findProcess.result;
+    const robot = robots[0]; // Get first robot
+
+    if (!robot || !robot.isConnected) {
+      throw new Error("No robot found or robot not connected");
+    }
+
+    log(`✅ Found robot: ${robot.name} (${robot.robotType})`);
+    log(`   Serial: ${robot.serialNumber}`);
+
+    // Step 2: Release motors first, then calibrate
+    log("\n2️⃣ Releasing motors for calibration setup...");
+
+    if (!robot.robotType) {
+      throw new Error("Robot type not configured");
+    }
+
+    // Release motors so you can move the arm during calibration
+    log("🔧 Creating port and config for motor release...");
+    const setupPort = new WebSerialPortWrapper(robot.port);
+    await setupPort.initialize();
+    const setupConfig = createSO100Config(robot.robotType);
+
+    log(`🔓 Releasing ${setupConfig.motorIds.length} motors...`);
+    await releaseMotors(setupPort, setupConfig.motorIds);
+    log("✅ Motors released - you can now move the arm freely!");
+
+    // Now start calibration
+    log("\n📏 Starting calibration with live position updates...");
+    log("💡 Move the arm through its range of motion to see live updates!");
+
+    const useSimulatedCalibration = false; // Real calibration to see live updates
+    let calibrationResult: any;
+
+    if (useSimulatedCalibration) {
+      // Simulated calibration data (for testing without robot movement)
+      log("📊 Using simulated calibration data for testing...");
+      await new Promise((resolve) => setTimeout(resolve, 2000)); // Simulate calibration time
+
+      calibrationResult = {
+        shoulder_pan: {
+          id: 1,
+          drive_mode: 0,
+          homing_offset: 34,
+          range_min: 994,
+          range_max: 3100,
+        },
+        shoulder_lift: {
+          id: 2,
+          drive_mode: 0,
+          homing_offset: 991,
+          range_min: 960,
+          range_max: 3233,
+        },
+        elbow_flex: {
+          id: 3,
+          drive_mode: 0,
+          homing_offset: -881,
+          range_min: 1029,
+          range_max: 3065,
+        },
+        wrist_flex: {
+          id: 4,
+          drive_mode: 0,
+          homing_offset: 128,
+          range_min: 710,
+          range_max: 3135,
+        },
+        wrist_roll: {
+          id: 5,
+          drive_mode: 0,
+          homing_offset: -15,
+          range_min: 0,
+          range_max: 4095,
+        },
+        gripper: {
+          id: 6,
+          drive_mode: 0,
+          homing_offset: -1151,
+          range_min: 2008,
+          range_max: 3606,
+        },
+      };
+
+      log("✅ Calibration completed (simulated)");
+    } else {
+      // Real calibration
+      const calibrationProcess = await calibrate(robot, {
+        onProgress: (message) => log(`📊 ${message}`),
+        onLiveUpdate: (data) => {
+          const motors = Object.keys(data);
+          if (motors.length > 0) {
+            const ranges = motors.map((m) => data[m].range).join(", ");
+            log(`📏 Motor ranges: [${ranges}]`);
+          }
+        },
+      });
+
+      // Auto-stop calibration after 8 seconds for testing
+      setTimeout(() => {
+        log("⏱️ Auto-stopping calibration for test...");
+        calibrationProcess.stop();
+      }, 8000);
+
+      await calibrationProcess.result;
+      log("✅ Calibration completed (real)");
+    }
+
+    // Step 3: Use your provided calibration config for teleoperation
+    log("\n3️⃣ Setting up teleoperation with your calibration config...");
+
+    // Use your provided calibration config instead of real calibration result
+    calibrationResult = {
+      shoulder_pan: {
+        id: 1,
+        drive_mode: 0,
+        homing_offset: 34,
+        range_min: 994,
+        range_max: 3100,
+      },
+      shoulder_lift: {
+        id: 2,
+        drive_mode: 0,
+        homing_offset: 991,
+        range_min: 960,
+        range_max: 3233,
+      },
+      elbow_flex: {
+        id: 3,
+        drive_mode: 0,
+        homing_offset: -881,
+        range_min: 1029,
+        range_max: 3065,
+      },
+      wrist_flex: {
+        id: 4,
+        drive_mode: 0,
+        homing_offset: 128,
+        range_min: 710,
+        range_max: 3135,
+      },
+      wrist_roll: {
+        id: 5,
+        drive_mode: 0,
+        homing_offset: -15,
+        range_min: 0,
+        range_max: 4095,
+      },
+      gripper: {
+        id: 6,
+        drive_mode: 0,
+        homing_offset: -1151,
+        range_min: 2008,
+        range_max: 3606,
+      },
+    };
+
+    log(
+      `✅ Using your calibration config: ${Object.keys(calibrationResult).join(
+        ", "
+      )}`
+    );
+
+    // Step 4: Teleoperate with auto key simulation
+    log("\n4️⃣ Starting teleoperation...");
+    const teleoperationProcess = await teleoperate(robot, {
+      calibrationData: calibrationResult,
+      onStateUpdate: (state) => {
+        if (state.isActive && Object.keys(state.keyStates).length > 0) {
+          const activeKeys = Object.keys(state.keyStates).filter(
+            (k) => state.keyStates[k].pressed
+          );
+          log(`🎮 Auto-simulated keys: ${activeKeys.join(", ")}`);
+        }
+      },
+    });
+
+    teleoperationProcess.start();
+    log("✅ Teleoperation started");
+    log("🤖 Auto-simulating arrow key presses to move the arm...");
+
+    // Auto-simulate key presses (left/right arrows to move shoulder pan)
+    let keySimulationActive = true;
+    let currentDirection = "ArrowLeft";
+
+    const simulateKeys = () => {
+      if (!keySimulationActive) return;
+
+      // Press current key
+      teleoperationProcess.updateKeyState(currentDirection, true);
+      log(`🔄 Pressing ${currentDirection} (shoulder pan movement)`);
+
+      // Hold for 1 second, then release and switch direction
+      setTimeout(() => {
+        if (!keySimulationActive) return;
+        teleoperationProcess.updateKeyState(currentDirection, false);
+
+        // Switch direction
+        currentDirection =
+          currentDirection === "ArrowLeft" ? "ArrowRight" : "ArrowLeft";
+
+        // Wait 500ms then start next movement
+        setTimeout(() => {
+          if (keySimulationActive) simulateKeys();
+        }, 500);
+      }, 1000);
+    };
+
+    // Start key simulation after a brief delay
+    setTimeout(simulateKeys, 1000);
+
+    // Auto-stop teleoperation after 8 seconds for testing
+    setTimeout(() => {
+      keySimulationActive = false;
+      log("⏱️ Auto-stopping teleoperation for test...");
+      teleoperationProcess.stop();
+      log("\n🎉 All sequential operations completed successfully!");
+      log(
+        "\n📝 RESULT: The current approach works but is too complex for users!"
+      );
+      log(
+        "📝 Users shouldn't need WebSerialPortWrapper and createSO100Config!"
+      );
+      setButtonState(false);
+    }, 8000);
+  } catch (error: any) {
+    log(`❌ Sequential operations failed: ${error.message}`);
+
+    // Check if it's a connection conflict
+    if (
+      error.message.includes("port") ||
+      error.message.includes("serial") ||
+      error.message.includes("connection")
+    ) {
+      log("🔍 This might be a port connection conflict!");
+      log("💡 Multiple WebSerialPortWrapper instances may be interfering");
+    }
+
+    setButtonState(false);
+  }
+};
+
+// Initialize on DOM load
+document.addEventListener("DOMContentLoaded", () => {
+  // Check Web Serial support
+  if (!("serial" in navigator)) {
+    log("❌ Web Serial API not supported in this browser");
+    log("💡 Try Chrome/Edge with --enable-web-serial flag");
+    const button = document.getElementById("runTest") as HTMLButtonElement;
+    if (button) button.disabled = true;
+  } else {
+    log("✅ Web Serial API supported");
+    log("Ready to test. Click 'Run Sequential Operations Test' to begin...");
+  }
+});

package.json

@@ -25,10 +25,12 @@
     "dev": "vite --mode demo",
     "dev:vanilla": "vite --mode vanilla",
     "dev:lib": "vite --mode lib",
+    "test-dev": "vite --mode test",
     "build": "pnpm run build:cli",
     "build:cli": "tsc --project tsconfig.cli.json",
     "build:web": "tsc && vite build --mode lib",
     "build:demo": "tsc && vite build --mode demo",
+    "build:test": "tsc && vite build --mode test",
     "preview": "vite preview",
     "cli:find-port": "tsx src/cli/index.ts find-port",
     "cli:calibrate": "tsx src/cli/index.ts calibrate",

packages/web/README.md

@@ -1,8 +1,16 @@
 # @lerobot/web
 
-Control robotics hardware directly from the browser using WebSerial API.
+Browser-native robotics control using WebSerial API. No Python dependencies required.
 
-## Install
+## Features
+
+- **Direct Hardware Control**: STS3215 motor communication via WebSerial API
+- **Real-time Teleoperation**: Keyboard control with live motor feedback
+- **Motor Calibration**: Automated homing offset and range recording
+- **Cross-browser Support**: Chrome/Edge 89+ with HTTPS or localhost
+- **TypeScript Native**: Full type safety and IntelliSense support
+
+## Installation
 
 ```bash
 npm install @lerobot/web
@@ -13,42 +21,442 @@ npm install @lerobot/web
 ```typescript
 import { findPort, calibrate, teleoperate } from "@lerobot/web";
 
-// 1. Find hardware
-const devices = await findPort();
-const robot = devices[0];
+// 1. Find and connect to hardware
+const findProcess = await findPort();
+const robots = await findProcess.result;
+const robot = robots[0];
+
+// 2. Calibrate motors
+const calibrationProcess = await calibrate(robot, {
+  onProgress: (message) => console.log(message),
+  onLiveUpdate: (data) => console.log("Live positions:", data),
+});
+const calibrationData = await calibrationProcess.result;
+
+// 3. Start teleoperation
+const teleop = await teleoperate(robot, { calibrationData });
+teleop.start();
+```
+
+## Core API
+
+### `findPort(options?): Promise<FindPortProcess>`
+
+Discovers and connects to robotics hardware using WebSerial API. Two modes: interactive (shows port dialog) and auto-connect (reconnects to known robots).
+
+#### Interactive Mode (Default)
+
+First-time usage or discovering new robots. Shows native browser port selection dialog.
+
+```typescript
+// User selects robot via browser dialog
+const findProcess = await findPort();
+const robots = await findProcess.result; // RobotConnection[]
+const robot = robots[0]; // User-selected robot
+
+// Configure and save robot for future auto-connect
+robot.robotType = "so100_follower";
+robot.robotId = "my_robot_arm";
+
+// Save to localStorage (or your storage system)
+localStorage.setItem(
+  `robot-${robot.serialNumber}`,
+  JSON.stringify({
+    robotType: robot.robotType,
+    robotId: robot.robotId,
+    serialNumber: robot.serialNumber,
+  })
+);
+```
+
+#### Auto-Connect Mode
+
+Automatically reconnects to previously configured robots without showing dialogs.
+
+```typescript
+// Build robotConfigs from saved data
+const robotConfigs = [];
+
+// Option 1: Load from localStorage (typical web app pattern)
+for (let i = 0; i < localStorage.length; i++) {
+  const key = localStorage.key(i);
+  if (key?.startsWith("robot-")) {
+    const saved = JSON.parse(localStorage.getItem(key)!);
+    robotConfigs.push({
+      robotType: saved.robotType,
+      robotId: saved.robotId,
+      serialNumber: saved.serialNumber,
+    });
+  }
+}
+
+// Option 2: Create manually if you know your robots
+const robotConfigs = [
+  { robotType: "so100_follower", robotId: "left_arm", serialNumber: "USB123" },
+  { robotType: "so100_leader", robotId: "right_arm", serialNumber: "USB456" },
+];
+
+// Auto-connect to all known robots
+const findProcess = await findPort({
+  robotConfigs,
+  onMessage: (msg) => console.log(msg),
+});
+
+const robots = await findProcess.result;
+const connectedRobots = robots.filter((r) => r.isConnected);
+console.log(
+  `Connected to ${connectedRobots.length}/${robotConfigs.length} robots`
+);
+```
+
+#### Complete Workflow Example
+
+```typescript
+// First run: Interactive discovery
+async function discoverNewRobots() {
+  const findProcess = await findPort();
+  const robots = await findProcess.result;
+
+  for (const robot of robots) {
+    // Configure each robot
+    robot.robotType = "so100_follower"; // User choice
+    robot.robotId = `robot_${Date.now()}`; // User input
+
+    // Save for auto-connect
+    localStorage.setItem(
+      `robot-${robot.serialNumber}`,
+      JSON.stringify({
+        robotType: robot.robotType,
+        robotId: robot.robotId,
+        serialNumber: robot.serialNumber,
+      })
+    );
+  }
+
+  return robots;
+}
+
+// Subsequent runs: Auto-connect
+async function reconnectSavedRobots() {
+  // Load saved robot configs
+  const robotConfigs = [];
+  for (let i = 0; i < localStorage.length; i++) {
+    const key = localStorage.key(i);
+    if (key?.startsWith("robot-")) {
+      const saved = JSON.parse(localStorage.getItem(key)!);
+      robotConfigs.push(saved);
+    }
+  }
+
+  if (robotConfigs.length === 0) {
+    return discoverNewRobots(); // No saved robots, go interactive
+  }
 
-// 2. Calibrate
-const calibration = await calibrate(robot);
-await calibration.result;
+  // Auto-connect to saved robots
+  const findProcess = await findPort({ robotConfigs });
+  return await findProcess.result;
+}
+```
+
+#### RobotConfig Structure
+
+```typescript
+interface RobotConfig {
+  robotType: "so100_follower" | "so100_leader";
+  robotId: string; // Your custom identifier (e.g., "left_arm")
+  serialNumber: string; // Device serial number (from previous findPort)
+}
+```
+
+#### Options
+
+- `robotConfigs?: RobotConfig[]` - Auto-connect to these known robots
+- `onMessage?: (message: string) => void` - Progress messages callback
+
+#### Returns: `FindPortProcess`
+
+- `result: Promise<RobotConnection[]>` - Array of robot connections
+- `stop(): void` - Cancel discovery process
+
+---
+
+### `calibrate(robot, options?): Promise<CalibrationProcess>`
+
+Calibrates motor homing offsets and records range of motion.
+
+```typescript
+const calibrationProcess = await calibrate(robot, {
+  onProgress: (message) => {
+    console.log(message); // "⚙️ Setting motor homing offsets"
+  },
+  onLiveUpdate: (data) => {
+    // Real-time motor positions during range recording
+    Object.entries(data).forEach(([motor, info]) => {
+      console.log(`${motor}: ${info.current} (range: ${info.range})`);
+    });
+  },
+});
+
+// Move robot through full range of motion...
+// Press any key when done
+
+const calibrationData = await calibrationProcess.result;
+// Save calibration data to localStorage or file
+```
+
+#### Parameters
+
+- `robot: RobotConnection` - Connected robot from `findPort()`
+- `options?: CalibrationOptions`
+  - `onProgress?: (message: string) => void` - Progress messages
+  - `onLiveUpdate?: (data: LiveCalibrationData) => void` - Real-time position updates
+
+#### Returns: `CalibrationProcess`
 
-// 3. Control
-const controller = await teleoperate(robot);
-controller.start();
+- `result: Promise<WebCalibrationResults>` - Calibration data (Python-compatible format)
+- `stop(): void` - Stop calibration process
+
+#### Calibration Data Format
+
+```typescript
+{
+  "shoulder_pan": {
+    "id": 1,
+    "drive_mode": 0,
+    "homing_offset": 47,
+    "range_min": 985,
+    "range_max": 3085
+  },
+  // ... other motors
+}
 ```
 
-## API
+---
+
+### `teleoperate(robot, options?): Promise<TeleoperationProcess>`
 
-### `findPort(options?)`
+Enables real-time robot control with keyboard input and programmatic movement.
 
-Detects connected hardware. Returns `RobotConnection[]`.
+```typescript
+const teleop = await teleoperate(robot, {
+  calibrationData: savedCalibrationData, // From calibrate()
+  onStateUpdate: (state) => {
+    console.log(`Active: ${state.isActive}`);
+    console.log(`Motors:`, state.motorConfigs);
+  },
+});
+
+// Start keyboard control
+teleop.start();
+
+// Programmatic control
+await teleop.moveMotor("shoulder_pan", 2048);
+await teleop.setMotorPositions({
+  shoulder_pan: 2048,
+  elbow_flex: 1500,
+});
+
+// Stop when done
+teleop.stop();
+```
+
+#### Parameters
 
-### `calibrate(robot, options?)`
+- `robot: RobotConnection` - Connected robot from `findPort()`
+- `options?: TeleoperationOptions`
+  - `calibrationData?: { [motorName: string]: any }` - Calibration data from `calibrate()`
+  - `onStateUpdate?: (state: TeleoperationState) => void` - State change callback
 
-Calibrates motors and records ranges. Returns `CalibrationProcess`.
+#### Returns: `TeleoperationProcess`
 
-### `teleoperate(robot, options?)`
+- `start(): void` - Begin keyboard teleoperation
+- `stop(): void` - Stop teleoperation and clear key states
+- `updateKeyState(key: string, pressed: boolean): void` - Manual key state control
+- `getState(): TeleoperationState` - Current state and motor positions
+- `moveMotor(motorName: string, position: number): Promise<boolean>` - Move single motor
+- `setMotorPositions(positions: { [motorName: string]: number }): Promise<boolean>` - Move multiple motors
+- `disconnect(): Promise<void>` - Stop and disconnect
 
-Enables real-time control. Returns `TeleoperationProcess`.
+#### Keyboard Controls (SO-100)
+
+```
+Arrow Keys: Shoulder pan/lift
+WASD: Elbow flex, wrist flex
+Q/E: Wrist roll
+O/C: Gripper open/close
+Escape: Emergency stop
+```
+
+---
+
+### `isWebSerialSupported(): boolean`
+
+Checks if WebSerial API is available in the current browser.
+
+```typescript
+if (!isWebSerialSupported()) {
+  console.log("Please use Chrome/Edge 89+ with HTTPS or localhost");
+  return;
+}
+```
+
+---
+
+### `releaseMotors(robot, motorIds?): Promise<void>`
+
+Releases motor torque so robot can be moved freely by hand.
+
+```typescript
+// Release all motors for calibration
+await releaseMotors(robot);
+
+// Release specific motors only
+await releaseMotors(robot, [1, 2, 3]); // First 3 motors
+```
+
+#### Parameters
+
+- `robot: RobotConnection` - Connected robot
+- `motorIds?: number[]` - Specific motor IDs (default: all motors for robot type)
+
+## Types
+
+### `RobotConnection`
+
+```typescript
+interface RobotConnection {
+  port: SerialPort; // WebSerial port object
+  name: string; // Display name
+  isConnected: boolean; // Connection status
+  robotType?: "so100_follower" | "so100_leader";
+  robotId?: string; // User-defined ID
+  serialNumber: string; // Device serial number
+  error?: string; // Error message if failed
+}
+```
+
+### `WebCalibrationResults`
+
+```typescript
+interface WebCalibrationResults {
+  [motorName: string]: {
+    id: number; // Motor ID (1-6)
+    drive_mode: number; // Drive mode (0 for SO-100)
+    homing_offset: number; // Calculated offset
+    range_min: number; // Minimum position
+    range_max: number; // Maximum position
+  };
+}
+```
+
+### `TeleoperationState`
+
+```typescript
+interface TeleoperationState {
+  isActive: boolean; // Whether teleoperation is running
+  motorConfigs: MotorConfig[]; // Current motor positions and limits
+  lastUpdate: number; // Timestamp of last update
+  keyStates: { [key: string]: { pressed: boolean; timestamp: number } };
+}
+```
+
+### `MotorConfig`
+
+```typescript
+interface MotorConfig {
+  id: number; // Motor ID
+  name: string; // Motor name (e.g., "shoulder_pan")
+  currentPosition: number; // Current position
+  minPosition: number; // Position limit minimum
+  maxPosition: number; // Position limit maximum
+}
+```
+
+### `RobotConfig`
+
+```typescript
+interface RobotConfig {
+  robotType: "so100_follower" | "so100_leader";
+  robotId: string; // Your custom identifier (e.g., "left_arm")
+  serialNumber: string; // Device serial number (from previous findPort)
+}
+```
+
+## Advanced Usage
+
+### Custom Motor Communication
+
+```typescript
+import {
+  WebSerialPortWrapper,
+  readMotorPosition,
+  writeMotorPosition,
+} from "@lerobot/web";
+
+const port = new WebSerialPortWrapper(robotConnection.port);
+await port.initialize();
+
+// Read motor position directly
+const position = await readMotorPosition(port, 1);
+
+// Write motor position directly
+await writeMotorPosition(port, 1, 2048);
+```
+
+### Robot Configuration
+
+```typescript
+import { createSO100Config, SO100_KEYBOARD_CONTROLS } from "@lerobot/web";
+
+const config = createSO100Config("so100_follower");
+console.log("Motor names:", config.motorNames);
+console.log("Motor IDs:", config.motorIds);
+console.log("Keyboard controls:", SO100_KEYBOARD_CONTROLS);
+```
+
+### Low-Level Motor Control
+
+```typescript
+import { releaseMotorsLowLevel } from "@lerobot/web";
+
+const port = new WebSerialPortWrapper(robotConnection.port);
+await port.initialize();
+
+// Release specific motors at low level
+await releaseMotorsLowLevel(port, [1, 2, 3]);
+```
+
+## Error Handling
+
+```typescript
+try {
+  const findProcess = await findPort();
+  const robots = await findProcess.result;
+
+  if (robots.length === 0) {
+    throw new Error("No robots found");
+  }
+
+  const robot = robots[0];
+  if (!robot.isConnected) {
+    throw new Error(`Failed to connect: ${robot.error}`);
+  }
+
+  // Proceed with calibration/teleoperation
+} catch (error) {
+  console.error("Robot connection failed:", error.message);
+}
+```
 
-## Browser Support
+## Browser Requirements
 
-- Chrome/Edge 89+
-- Requires HTTPS or localhost
-- [WebSerial API](https://caniuse.com/web-serial) support
+- **Chrome/Edge 89+** with WebSerial API support
+- **HTTPS or localhost** (required for WebSerial API)
+- **User gesture** required for initial port selection
 
-## Hardware
+## Hardware Support
 
-Currently supports SO-100 follower/leader arms. More devices coming.
+Currently supports SO-100 follower and leader arms with STS3215 motors. More devices coming soon.
 
 ## License
 

packages/web/src/calibrate.ts

@@ -218,10 +218,3 @@ export async function calibrate(
     result: resultPromise,
   };
 }
-
-/**
- * Check if Web Serial API is supported
- */
-export function isWebSerialSupported(): boolean {
-  return "serial" in navigator;
-}

packages/web/src/find_port.ts

@@ -1,6 +1,7 @@
 /**
- * Browser implementation of find_port using WebSerial API
- * Clean API with native dialogs and auto-connect modes
+ * Browser implementation of find_port using WebSerial + WebUSB APIs
+ * WebSerial: Communication with device
+ * WebUSB: Device identification and serial numbers
  *
  * Usage Examples:
  *
@@ -30,6 +31,10 @@
 
 import { WebSerialPortWrapper } from "./utils/serial-port-wrapper.js";
 import { readMotorPosition } from "./utils/motor-communication.js";
+import {
+  isWebSerialSupported,
+  isWebUSBSupported,
+} from "./utils/browser-support.js";
 import type {
   RobotConnection,
   RobotConfig,
@@ -39,34 +44,131 @@ import type {
   Serial,
   FindPortOptions,
   FindPortProcess,
+  USBDevice,
 } from "./types/port-discovery.js";
 
-declare global {
-  interface Navigator {
-    serial: Serial;
+/**
+ * Get display name for a port
+ */
+function getPortDisplayName(port: SerialPort): string {
+  const info = port.getInfo();
+  if (info.usbVendorId && info.usbProductId) {
+    return `USB Device (${info.usbVendorId}:${info.usbProductId})`;
   }
+  return "Serial Device";
 }
 
 /**
- * Check if WebSerial API is available
+ * Request USB device for metadata and serial number extraction
  */
-function isWebSerialSupported(): boolean {
-  return "serial" in navigator;
+async function requestUSBDeviceMetadata(): Promise<{
+  serialNumber: string;
+  usbMetadata: RobotConnection["usbMetadata"];
+}> {
+  try {
+    // Request USB device access for metadata (no filters - accept any device)
+    const usbDevice = await navigator.usb.requestDevice({
+      filters: [], // No filtering - let user choose any device
+    });
+
+    const serialNumber =
+      usbDevice.serialNumber ||
+      `${usbDevice.vendorId}-${usbDevice.productId}-${Date.now()}`;
+
+    const usbMetadata = {
+      vendorId: `0x${usbDevice.vendorId.toString(16).padStart(4, "0")}`,
+      productId: `0x${usbDevice.productId.toString(16).padStart(4, "0")}`,
+      serialNumber: usbDevice.serialNumber || "Generated ID",
+      manufacturerName: usbDevice.manufacturerName || "Unknown",
+      productName: usbDevice.productName || "Unknown",
+      usbVersionMajor: usbDevice.usbVersionMajor,
+      usbVersionMinor: usbDevice.usbVersionMinor,
+      deviceClass: usbDevice.deviceClass,
+      deviceSubclass: usbDevice.deviceSubclass,
+      deviceProtocol: usbDevice.deviceProtocol,
+    };
+
+    return { serialNumber, usbMetadata };
+  } catch (usbError) {
+    console.log("⚠️ WebUSB request failed, generating fallback ID:", usbError);
+    // Generate a fallback unique ID if WebUSB fails
+    const serialNumber = `fallback-${Date.now()}-${Math.random()
+      .toString(36)
+      .substr(2, 9)}`;
+
+    const usbMetadata = {
+      vendorId: "Unknown",
+      productId: "Unknown",
+      serialNumber: serialNumber,
+      manufacturerName: "WebUSB Not Available",
+      productName: "Check browser WebUSB support",
+    };
+
+    return { serialNumber, usbMetadata };
+  }
 }
 
 /**
- * Get display name for a port
+ * Get USB device metadata for already permitted devices
  */
-function getPortDisplayName(port: SerialPort): string {
-  const info = port.getInfo();
-  if (info.usbVendorId && info.usbProductId) {
-    return `USB Device (${info.usbVendorId}:${info.usbProductId})`;
+async function getStoredUSBDeviceMetadata(port: SerialPort): Promise<{
+  serialNumber: string;
+  usbMetadata?: RobotConnection["usbMetadata"];
+}> {
+  try {
+    if (!isWebUSBSupported()) {
+      throw new Error("WebUSB not supported");
+    }
+
+    // Get already permitted USB devices
+    const usbDevices = await navigator.usb.getDevices();
+    const portInfo = port.getInfo();
+
+    // Try to find matching USB device by vendor/product ID
+    const matchingDevice = usbDevices.find(
+      (device) =>
+        device.vendorId === portInfo.usbVendorId &&
+        device.productId === portInfo.usbProductId
+    );
+
+    if (matchingDevice) {
+      const serialNumber =
+        matchingDevice.serialNumber ||
+        `${matchingDevice.vendorId}-${matchingDevice.productId}-${Date.now()}`;
+
+      const usbMetadata = {
+        vendorId: `0x${matchingDevice.vendorId.toString(16).padStart(4, "0")}`,
+        productId: `0x${matchingDevice.productId
+          .toString(16)
+          .padStart(4, "0")}`,
+        serialNumber: matchingDevice.serialNumber || "Generated ID",
+        manufacturerName: matchingDevice.manufacturerName || "Unknown",
+        productName: matchingDevice.productName || "Unknown",
+        usbVersionMajor: matchingDevice.usbVersionMajor,
+        usbVersionMinor: matchingDevice.usbVersionMinor,
+        deviceClass: matchingDevice.deviceClass,
+        deviceSubclass: matchingDevice.deviceSubclass,
+        deviceProtocol: matchingDevice.deviceProtocol,
+      };
+
+      console.log("✅ Restored USB metadata for port:", serialNumber);
+      return { serialNumber, usbMetadata };
+    }
+
+    throw new Error("No matching USB device found");
+  } catch (usbError) {
+    console.log("⚠️ Could not restore USB metadata:", usbError);
+    // Generate fallback if no USB metadata available
+    const serialNumber = `fallback-${Date.now()}-${Math.random()
+      .toString(36)
+      .substr(2, 9)}`;
+
+    return { serialNumber };
   }
-  return "Serial Device";
 }
 
 /**
- * Interactive mode: Show native dialog for port selection
+ * Interactive mode: Show native dialogs for port + device selection
  */
 async function findPortInteractive(
   options: FindPortOptions
@@ -76,17 +178,37 @@ async function findPortInteractive(
   onMessage?.("Opening port selection dialog...");
 
   try {
-    // Use native browser dialog - much better UX than port diffing!
+    // Step 1: Request Web Serial port
     const port = await navigator.serial.requestPort();
-
-    // Open the port
     await port.open({ baudRate: 1000000 });
 
     const portName = getPortDisplayName(port);
     onMessage?.(`✅ Connected to ${portName}`);
 
+    // Step 2: Request WebUSB device for metadata (if supported)
+    let serialNumber: string;
+    let usbMetadata: RobotConnection["usbMetadata"];
+
+    if (isWebUSBSupported()) {
+      onMessage?.("📱 Requesting device identification...");
+      const usbData = await requestUSBDeviceMetadata();
+      serialNumber = usbData.serialNumber;
+      usbMetadata = usbData.usbMetadata;
+      onMessage?.(`🆔 Device ID: ${serialNumber}`);
+    } else {
+      onMessage?.("⚠️ WebUSB not supported, using fallback ID");
+      const fallbackId = `no-usb-${Date.now()}`;
+      serialNumber = fallbackId;
+      usbMetadata = {
+        vendorId: "Unknown",
+        productId: "Unknown",
+        serialNumber: fallbackId,
+        manufacturerName: "WebUSB Not Supported",
+        productName: "Browser limitation",
+      };
+    }
+
     // Return unified RobotConnection object in array (consistent API)
-    // In interactive mode, user will need to specify robot details separately
     return [
       {
         port,
@@ -94,7 +216,8 @@ async function findPortInteractive(
         isConnected: true,
         robotType: "so100_follower", // Default, user can change
         robotId: "interactive_robot",
-        serialNumber: `interactive_${Date.now()}`,
+        serialNumber,
+        usbMetadata,
       },
     ];
   } catch (error) {
@@ -127,19 +250,26 @@ async function findPortAutoConnect(
   const availablePorts = await navigator.serial.getPorts();
   onMessage?.(`Found ${availablePorts.length} available port(s)`);
 
-  for (const config of robotConfigs) {
-    onMessage?.(`Connecting to ${config.robotId} (${config.serialNumber})...`);
+  // For each available port, try to restore USB metadata and match with configs
+  for (const port of availablePorts) {
+    try {
+      // Get USB device metadata for this port
+      const { serialNumber, usbMetadata } = await getStoredUSBDeviceMetadata(
+        port
+      );
 
-    let connected = false;
-    let matchedPort: SerialPort | null = null;
-    let error: string | undefined;
+      // Find matching robot config by serial number
+      const matchingConfig = robotConfigs.find(
+        (config) => config.serialNumber === serialNumber
+      );
+
+      if (matchingConfig) {
+        onMessage?.(
+          `Connecting to ${matchingConfig.robotId} (${serialNumber})...`
+        );
 
-    try {
-      // For now, we'll try each available port and see if we can connect
-      // In a future enhancement, we could match by actual serial number reading
-      for (const port of availablePorts) {
         try {
-          // Try to open and use this port
+          // Try to open the port
           const wasOpen = port.readable !== null;
           if (!wasOpen) {
             await port.open({ baudRate: 1000000 });
@@ -154,42 +284,72 @@ async function findPortAutoConnect(
 
           // If we can read a position, this is likely a working robot port
           if (testPosition !== null) {
-            matchedPort = port;
-            connected = true;
-            onMessage?.(`✅ Connected to ${config.robotId}`);
-            break;
+            onMessage?.(`✅ Connected to ${matchingConfig.robotId}`);
+
+            results.push({
+              port,
+              name: getPortDisplayName(port),
+              isConnected: true,
+              robotType: matchingConfig.robotType,
+              robotId: matchingConfig.robotId,
+              serialNumber,
+              usbMetadata,
+            });
           } else {
             throw new Error("No motor response - not a robot port");
           }
-        } catch (portError) {
-          // This port didn't work, try next one
-          console.log(
-            `Port ${getPortDisplayName(port)} didn't match ${config.robotId}:`,
-            portError
+        } catch (connectionError) {
+          onMessage?.(
+            `❌ Failed to connect to ${matchingConfig.robotId}: ${
+              connectionError instanceof Error
+                ? connectionError.message
+                : connectionError
+            }`
           );
-          continue;
-        }
-      }
 
-      if (!connected) {
-        error = `No matching port found for ${config.robotId} (${config.serialNumber})`;
-        onMessage?.(`❌ ${error}`);
+          results.push({
+            port,
+            name: getPortDisplayName(port),
+            isConnected: false,
+            robotType: matchingConfig.robotType,
+            robotId: matchingConfig.robotId,
+            serialNumber,
+            usbMetadata,
+            error:
+              connectionError instanceof Error
+                ? connectionError.message
+                : "Unknown error",
+          });
+        }
+      } else {
+        console.log(
+          `Port with serial ${serialNumber} not in requested configs, skipping`
+        );
       }
-    } catch (err) {
-      error = err instanceof Error ? err.message : "Unknown error";
-      onMessage?.(`❌ Failed to connect to ${config.robotId}: ${error}`);
+    } catch (metadataError) {
+      console.log(`Failed to get metadata for port:`, metadataError);
+      // Skip this port if we can't get metadata
+      continue;
     }
+  }
 
-    // Add result (successful or failed)
-    results.push({
-      port: matchedPort!,
-      name: matchedPort ? getPortDisplayName(matchedPort) : "Unknown Port",
-      isConnected: connected,
-      robotType: config.robotType,
-      robotId: config.robotId,
-      serialNumber: config.serialNumber,
-      error,
-    });
+  // Handle robots that weren't found
+  for (const config of robotConfigs) {
+    const found = results.some((r) => r.serialNumber === config.serialNumber);
+    if (!found) {
+      onMessage?.(
+        `❌ Robot ${config.robotId} (${config.serialNumber}) not found`
+      );
+      results.push({
+        port: null as any, // Will not be used since isConnected = false
+        name: "Not Found",
+        isConnected: false,
+        robotType: config.robotType,
+        robotId: config.robotId,
+        serialNumber: config.serialNumber,
+        error: `Device with serial number ${config.serialNumber} not found`,
+      });
+    }
   }
 
   const successCount = results.filter((r) => r.isConnected).length;

packages/web/src/index.ts

@@ -6,11 +6,15 @@
  */
 
 // Core functions
-export { calibrate, isWebSerialSupported } from "./calibrate.js";
+export { calibrate } from "./calibrate.js";
 export { teleoperate } from "./teleoperate.js";
 export { findPort } from "./find_port.js";
 
-console.log("asdfasdfasdfasdf");
+// Browser support utilities
+export {
+  isWebSerialSupported,
+  isWebUSBSupported,
+} from "./utils/browser-support.js";
 
 // Types
 export type {

packages/web/src/teleoperate.ts

@@ -92,7 +92,7 @@ export class WebTeleoperationController {
   // Movement parameters
   private readonly STEP_SIZE = 8;
   private readonly UPDATE_RATE = 60; // 60 FPS
-  private readonly KEY_TIMEOUT = 600; // ms - longer than browser keyboard repeat delay (~500ms)
+  private readonly KEY_TIMEOUT = 10000; // ms - very long timeout (10 seconds) for virtual buttons
 
   constructor(
     port: MotorCommunicationPort,

packages/web/src/types/port-discovery.ts

@@ -26,6 +26,36 @@ export interface SerialPortFilter {
   usbProductId?: number;
 }
 
+/**
+ * WebUSB API type definitions
+ */
+export interface USBDevice {
+  vendorId: number;
+  productId: number;
+  serialNumber?: string;
+  manufacturerName?: string;
+  productName?: string;
+  usbVersionMajor: number;
+  usbVersionMinor: number;
+  deviceClass: number;
+  deviceSubclass: number;
+  deviceProtocol: number;
+}
+
+export interface USBDeviceFilter {
+  vendorId?: number;
+  productId?: number;
+}
+
+export interface USBDeviceRequestOptions {
+  filters: USBDeviceFilter[];
+}
+
+export interface USB {
+  getDevices(): Promise<USBDevice[]>;
+  requestDevice(options: USBDeviceRequestOptions): Promise<USBDevice>;
+}
+
 /**
  * Options for findPort function
  */

packages/web/src/types/robot-connection.ts

@@ -3,6 +3,8 @@
  * These types are shared between findPort, calibrate, teleoperate, and other modules
  */
 
+import type { RobotHardwareConfig } from "./robot-config.js";
+
 /**
  * Type definitions for WebSerial API (not yet in all TypeScript libs)
  */
@@ -39,6 +41,7 @@ export interface RobotConnection {
   robotId?: string; // Optional until user configures
   serialNumber: string; // Always required for identification
   error?: string; // Error message if connection failed
+  config?: RobotHardwareConfig; // Robot configuration (motorIds, controls, etc.) - set when robotType is configured
   usbMetadata?: {
     // USB device information
     vendorId: string;

packages/web/src/utils/browser-support.ts

@@ -0,0 +1,29 @@
+/**
+ * Browser API support detection utilities
+ * Centralized support checking to avoid duplication across modules
+ */
+
+import type { Serial, USB } from "../types/port-discovery.js";
+
+declare global {
+  interface Navigator {
+    serial: Serial;
+    usb: USB;
+  }
+}
+
+/**
+ * Check if Web Serial API is available in the current browser
+ * @returns true if Web Serial is supported, false otherwise
+ */
+export function isWebSerialSupported(): boolean {
+  return "serial" in navigator && typeof navigator.serial !== "undefined";
+}
+
+/**
+ * Check if WebUSB API is available in the current browser
+ * @returns true if WebUSB is supported, false otherwise
+ */
+export function isWebUSBSupported(): boolean {
+  return "usb" in navigator && typeof navigator.usb !== "undefined";
+}

packages/web/src/utils/motor-communication.ts

@@ -247,14 +247,14 @@ export async function releaseMotor(
 }
 
 /**
- * Release motors (motors can be moved freely - perfect for calibration)
+ * Lock motors (motors will hold their positions - perfect after calibration)
  */
-export async function releaseMotors(
+export async function lockMotors(
   port: MotorCommunicationPort,
   motorIds: number[]
 ): Promise<void> {
   for (const motorId of motorIds) {
-    await releaseMotor(port, motorId);
+    await lockMotor(port, motorId);
     // Small delay between motors
     await new Promise((resolve) =>
       setTimeout(resolve, STS3215_PROTOCOL.INTER_MOTOR_DELAY)
@@ -263,14 +263,14 @@ export async function releaseMotors(
 }
 
 /**
- * Lock motors (motors will hold their positions - perfect after calibration)
+ * Release motors (motors can be moved freely - perfect for calibration)
  */
-export async function lockMotors(
+export async function releaseMotors(
   port: MotorCommunicationPort,
   motorIds: number[]
 ): Promise<void> {
   for (const motorId of motorIds) {
-    await lockMotor(port, motorId);
+    await releaseMotor(port, motorId);
     // Small delay between motors
     await new Promise((resolve) =>
       setTimeout(resolve, STS3215_PROTOCOL.INTER_MOTOR_DELAY)

vite.config.ts

@@ -54,6 +54,27 @@ export default defineConfig(({ mode }) => {
     };
   }
 
+  if (mode === "test") {
+    // Test mode - sequential operations test
+    return {
+      ...baseConfig,
+      server: {
+        open: "/examples/test-sequential-operations.html",
+      },
+      build: {
+        outDir: "dist/test",
+        rollupOptions: {
+          input: {
+            main: resolve(
+              __dirname,
+              "examples/test-sequential-operations.html"
+            ),
+          },
+        },
+      },
+    };
+  }
+
   if (mode === "lib") {
     // Library mode - core library without any demo UI
     return {