feat: make the cyberpunk example work with @lerobot/web

examples/cyberpunk-standalone/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@lerobot/web": "workspace:*",
     "@hookform/resolvers": "^3.9.1",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",

examples/cyberpunk-standalone/src/App.tsx

@@ -10,80 +10,241 @@ import { SetupCards } from "@/components/setup-cards";
 import { DocsSection } from "@/components/docs-section";
 import { RoadmapSection } from "@/components/roadmap-section";
 import { HardwareSupportSection } from "@/components/hardware-support-section";
-import { lerobot } from "@/lib/mock-api";
-import { useLocalStorage } from "@/hooks/use-local-storage";
-import type { RobotConnection } from "@/types/robot";
+import { useToast } from "@/hooks/use-toast";
+import { Toaster } from "@/components/ui/toaster";
+import {
+  findPort,
+  isWebSerialSupported,
+  type RobotConnection,
+  type RobotConfig,
+} from "@lerobot/web";
+import {
+  getAllSavedRobots,
+  getUnifiedRobotData,
+  saveDeviceInfo,
+  removeRobotData,
+  type DeviceInfo,
+} from "@/lib/unified-storage";
 
 function App() {
   const [view, setView] = useState<
     "dashboard" | "calibrating" | "teleoperating"
   >("dashboard");
-  const [robots, setRobots] = useLocalStorage<RobotConnection[]>(
-    "connected-robots",
-    []
-  );
+  const [robots, setRobots] = useState<RobotConnection[]>([]);
   const [selectedRobot, setSelectedRobot] = useState<RobotConnection | null>(
     null
   );
   const [editingRobot, setEditingRobot] = useState<RobotConnection | null>(
     null
   );
-  const [logs, setLogs] = useState<string[]>([]);
   const [isConnecting, setIsConnecting] = useState(false);
   const hardwareSectionRef = useRef<HTMLDivElement>(null);
+  const { toast } = useToast();
+
+  // Check browser support
+  const isSupported = isWebSerialSupported();
+
+  useEffect(() => {
+    if (!isSupported) {
+      toast({
+        title: "Browser Not Supported",
+        description:
+          "WebSerial API is not supported. Please use Chrome, Edge, or another Chromium-based browser.",
+        variant: "destructive",
+      });
+    }
+  }, [isSupported, toast]);
 
   useEffect(() => {
     const loadSavedRobots = async () => {
-      const robotConfigs = robots.map(({ port, ...config }) => config);
-      if (robotConfigs.length > 0) {
-        const findPortProcess = await lerobot.findPort({
-          robotConfigs,
-          onMessage: (msg) => setLogs((prev) => [...prev, msg]),
+      if (!isSupported) return;
+
+      try {
+        setIsConnecting(true);
+
+        // Get saved robot configurations
+        const savedRobots = getAllSavedRobots();
+
+        if (savedRobots.length > 0) {
+          const robotConfigs: RobotConfig[] = savedRobots.map((device) => ({
+            robotType: device.robotType as "so100_follower" | "so100_leader",
+            robotId: device.robotId,
+            serialNumber: device.serialNumber,
+          }));
+
+          // Auto-connect to saved robots
+          const findPortProcess = await findPort({
+            robotConfigs,
+            onMessage: (msg: string) => {
+              console.log("Connection message:", msg);
+            },
+          });
+
+          const reconnectedRobots = await findPortProcess.result;
+
+          // Merge saved device info (names, etc.) with fresh connection data
+          const robotsWithSavedInfo = reconnectedRobots.map((robot) => {
+            const savedData = getUnifiedRobotData(robot.serialNumber || "");
+            if (savedData?.device_info) {
+              return {
+                ...robot,
+                robotId: savedData.device_info.robotId,
+                name: savedData.device_info.robotId, // Use the saved custom name
+                robotType: savedData.device_info.robotType as
+                  | "so100_follower"
+                  | "so100_leader",
+              };
+            }
+            return robot;
+          });
+
+          setRobots(robotsWithSavedInfo);
+        }
+      } catch (error) {
+        console.error("Failed to load saved robots:", error);
+        toast({
+          title: "Connection Error",
+          description: "Failed to reconnect to saved robots",
+          variant: "destructive",
         });
-        const reconnectedRobots = await findPortProcess.result;
-        setRobots(reconnectedRobots);
+      } finally {
+        setIsConnecting(false);
       }
-      setIsConnecting(false);
     };
+
     loadSavedRobots();
-  }, []);
+  }, [isSupported, toast]);
 
   const handleFindNewRobots = async () => {
-    setIsConnecting(true);
-    const findPortProcess = await lerobot.findPort({
-      onMessage: (msg) => setLogs((prev) => [...prev, msg]),
-    });
-    const newRobots = await findPortProcess.result;
-    setRobots((prev) => {
-      const existingIds = new Set(prev.map((r) => r.robotId));
-      const uniqueNewRobots = newRobots.filter(
-        (r) => !existingIds.has(r.robotId)
-      );
-      return [...prev, ...uniqueNewRobots];
-    });
-    if (newRobots.length > 0) {
-      setEditingRobot(newRobots[0]);
+    if (!isSupported) {
+      toast({
+        title: "Browser Not Supported",
+        description: "WebSerial API is required for robot connection",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      setIsConnecting(true);
+
+      // Interactive mode - show browser dialog
+      const findPortProcess = await findPort({
+        onMessage: (msg: string) => {
+          console.log("Find port message:", msg);
+        },
+      });
+
+      const newRobots = await findPortProcess.result;
+
+      if (newRobots.length > 0) {
+        setRobots((prev: RobotConnection[]) => {
+          const existingSerialNumbers = new Set(
+            prev.map((r: RobotConnection) => r.serialNumber)
+          );
+          const uniqueNewRobots = newRobots.filter(
+            (r: RobotConnection) => !existingSerialNumbers.has(r.serialNumber)
+          );
+
+          // Auto-edit first new robot for configuration
+          if (uniqueNewRobots.length > 0) {
+            setEditingRobot(uniqueNewRobots[0]);
+          }
+
+          return [...prev, ...uniqueNewRobots];
+        });
+
+        toast({
+          title: "Robots Found",
+          description: `Found ${newRobots.length} robot(s)`,
+        });
+      } else {
+        toast({
+          title: "No Robots Found",
+          description: "No compatible devices detected",
+        });
+      }
+    } catch (error) {
+      console.error("Failed to find robots:", error);
+      toast({
+        title: "Connection Error",
+        description: "Failed to find robots. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsConnecting(false);
     }
-    setIsConnecting(false);
   };
 
   const handleUpdateRobot = (updatedRobot: RobotConnection) => {
+    // Save device info to unified storage
+    if (updatedRobot.serialNumber && updatedRobot.robotId) {
+      const deviceInfo: DeviceInfo = {
+        serialNumber: updatedRobot.serialNumber,
+        robotType: updatedRobot.robotType || "so100_follower",
+        robotId: updatedRobot.robotId,
+        usbMetadata: updatedRobot.usbMetadata
+          ? {
+              vendorId: parseInt(updatedRobot.usbMetadata.vendorId || "0", 16),
+              productId: parseInt(
+                updatedRobot.usbMetadata.productId || "0",
+                16
+              ),
+              serialNumber: updatedRobot.usbMetadata.serialNumber,
+              manufacturer: updatedRobot.usbMetadata.manufacturerName,
+              product: updatedRobot.usbMetadata.productName,
+            }
+          : undefined,
+      };
+      saveDeviceInfo(updatedRobot.serialNumber, deviceInfo);
+    }
+
     setRobots((prev) =>
-      prev.map((r) => (r.robotId === updatedRobot.robotId ? updatedRobot : r))
+      prev.map((r) =>
+        r.serialNumber === updatedRobot.serialNumber ? updatedRobot : r
+      )
     );
     setEditingRobot(null);
   };
 
   const handleRemoveRobot = (robotId: string) => {
+    const robot = robots.find((r) => r.robotId === robotId);
+    if (robot?.serialNumber) {
+      removeRobotData(robot.serialNumber);
+    }
+
     setRobots((prev) => prev.filter((r) => r.robotId !== robotId));
+
+    toast({
+      title: "Robot Removed",
+      description: `${robotId} has been removed from the registry`,
+    });
   };
 
   const handleCalibrate = (robot: RobotConnection) => {
+    if (!robot.isConnected) {
+      toast({
+        title: "Robot Not Connected",
+        description: "Please connect the robot before calibrating",
+        variant: "destructive",
+      });
+      return;
+    }
+
     setSelectedRobot(robot);
     setView("calibrating");
   };
 
   const handleTeleoperate = (robot: RobotConnection) => {
+    if (!robot.isConnected) {
+      toast({
+        title: "Robot Not Connected",
+        description: "Please connect the robot before teleoperating",
+        variant: "destructive",
+      });
+      return;
+    }
+
     setSelectedRobot(robot);
     setView("teleoperating");
   };
@@ -139,13 +300,6 @@ function App() {
   };
 
   const PageHeader = () => {
-    let title = "DASHBOARD";
-    if (view === "calibrating" && selectedRobot) {
-      title = `CALIBRATE: ${selectedRobot.name.toUpperCase()}`;
-    } else if (view === "teleoperating" && selectedRobot) {
-      title = `TELEOPERATE: ${selectedRobot.name.toUpperCase()}`;
-    }
-
     return (
       <div className="flex items-center justify-between mb-12">
         <div className="flex items-center gap-4">
@@ -157,9 +311,9 @@ function App() {
                 </span>{" "}
                 <span
                   className="text-primary text-glitch uppercase"
-                  data-text={selectedRobot.name}
+                  data-text={selectedRobot.robotId}
                 >
-                  {selectedRobot.name.toUpperCase()}
+                  {selectedRobot.robotId?.toUpperCase()}
                 </span>
               </h1>
             ) : view === "teleoperating" && selectedRobot ? (
@@ -169,9 +323,9 @@ function App() {
                 </span>{" "}
                 <span
                   className="text-primary text-glitch uppercase"
-                  data-text={selectedRobot.name}
+                  data-text={selectedRobot.robotId}
                 >
-                  {selectedRobot.name.toUpperCase()}
+                  {selectedRobot.robotId?.toUpperCase()}
                 </span>
               </h1>
             ) : (
@@ -202,7 +356,7 @@ function App() {
   };
 
   return (
-    <div className="flex flex-col min-h-screen font-sans scanline-overlay">
+    <div className="flex flex-col min-h-screen font-sans">
       <Header />
       <main className="flex-grow container mx-auto py-12 px-4 md:px-6">
         <PageHeader />
@@ -215,6 +369,7 @@ function App() {
         />
       </main>
       <Footer />
+      <Toaster />
     </div>
   );
 }

examples/cyberpunk-standalone/src/components/VirtualKey.tsx

@@ -1,27 +1,70 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface VirtualKeyProps {
-  label: string
-  subLabel?: string
-  isPressed?: boolean
+  label: string;
+  subLabel?: string;
+  isPressed?: boolean;
+  onMouseDown?: () => void;
+  onMouseUp?: () => void;
+  disabled?: boolean;
 }
 
-const VirtualKey = ({ label, subLabel, isPressed }: VirtualKeyProps) => {
+const VirtualKey = ({
+  label,
+  subLabel,
+  isPressed,
+  onMouseDown,
+  onMouseUp,
+  disabled,
+}: VirtualKeyProps) => {
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!disabled && onMouseDown) {
+      onMouseDown();
+    }
+  };
+
+  const handleMouseUp = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!disabled && onMouseUp) {
+      onMouseUp();
+    }
+  };
+
+  const handleMouseLeave = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (!disabled && onMouseUp) {
+      onMouseUp();
+    }
+  };
+
   return (
     <div className="flex flex-col items-center">
       <div
         className={cn(
           "w-12 h-12 border rounded-md flex items-center justify-center font-bold transition-all duration-100",
+          "select-none user-select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          !disabled &&
+            (onMouseDown || onMouseUp) &&
+            "cursor-pointer hover:bg-white/5",
           isPressed
             ? "bg-primary text-primary-foreground scale-110 border-primary"
-            : "bg-black/30 text-muted-foreground border-white/10",
+            : "bg-black/30 text-muted-foreground border-white/10"
         )}
+        onMouseDown={handleMouseDown}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
       >
         {label}
       </div>
-      {subLabel && <span className="text-xs text-muted-foreground mt-1 font-mono">{subLabel}</span>}
+      {subLabel && (
+        <span className="text-xs text-muted-foreground mt-1 font-mono">
+          {subLabel}
+        </span>
+      )}
     </div>
-  )
-}
+  );
+};
 
-export default VirtualKey
+export default VirtualKey;

examples/cyberpunk-standalone/src/components/calibration-view.tsx

@@ -1,67 +1,227 @@
-"use client"
-import { useState, useMemo } from "react"
-import { Download } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { lerobot } from "@/lib/mock-api"
-import { useLocalStorage } from "@/hooks/use-local-storage"
-import { MotorCalibrationVisual } from "@/components/motor-calibration-visual"
-import type { RobotConnection, LiveCalibrationData, WebCalibrationResults } from "@/types/robot"
+"use client";
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { Download } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { useToast } from "@/hooks/use-toast";
+import {
+  calibrate,
+  releaseMotors,
+  type CalibrationProcess,
+  type LiveCalibrationData,
+  type WebCalibrationResults,
+  type RobotConnection,
+} from "@lerobot/web";
+import {
+  saveCalibrationData,
+  getUnifiedRobotData,
+  type CalibrationMetadata,
+} from "@/lib/unified-storage";
+import { MotorCalibrationVisual } from "@/components/motor-calibration-visual";
 
 interface CalibrationViewProps {
-  robot: RobotConnection
+  robot: RobotConnection;
 }
 
 export function CalibrationView({ robot }: CalibrationViewProps) {
-  const [status, setStatus] = useState("Ready to calibrate.")
-  const [liveData, setLiveData] = useState<LiveCalibrationData | null>(null)
-  const [isCalibrating, setIsCalibrating] = useState(false)
-  const [calibrationProcess, setCalibrationProcess] = useState<{
-    stop: () => void
-    result: Promise<WebCalibrationResults>
-  } | null>(null)
-  const [calibrationResults, setCalibrationResults] = useLocalStorage<WebCalibrationResults | null>(
-    `calibration-${robot.robotId}`,
-    null,
-  )
+  const [status, setStatus] = useState("Ready to calibrate.");
+  const [liveData, setLiveData] = useState<LiveCalibrationData | null>(null);
+  const [isCalibrating, setIsCalibrating] = useState(false);
+  const [isPreparing, setIsPreparing] = useState(false);
+  const [calibrationProcess, setCalibrationProcess] =
+    useState<CalibrationProcess | null>(null);
+  const [calibrationResults, setCalibrationResults] =
+    useState<WebCalibrationResults | null>(null);
+  const { toast } = useToast();
+
+  // Load existing calibration data from unified storage
+  useEffect(() => {
+    if (robot.serialNumber) {
+      const data = getUnifiedRobotData(robot.serialNumber);
+      if (data?.calibration) {
+        setCalibrationResults(data.calibration);
+      }
+    }
+  }, [robot.serialNumber]);
+
+  // Motor names for display
+  const motorNames = useMemo(
+    () => [
+      "shoulder_pan",
+      "shoulder_lift",
+      "elbow_flex",
+      "wrist_flex",
+      "wrist_roll",
+      "gripper",
+    ],
+    []
+  );
+
+  // Release motor torque before calibration
+  const releaseMotorTorque = useCallback(async () => {
+    try {
+      setIsPreparing(true);
+      setStatus("🔓 Releasing motor torque - joints can now be moved freely");
+
+      await releaseMotors(robot);
+
+      setStatus("✅ Joints are now free to move - ready to start calibration");
+      toast({
+        title: "Motors Released",
+        description: "Robot joints can now be moved freely for calibration",
+      });
+    } catch (error) {
+      console.error("Failed to release motor torque:", error);
+      setStatus("⚠️ Could not release motor torque - try moving joints gently");
+      toast({
+        title: "Motor Release Warning",
+        description:
+          "Could not release motor torque. Try moving joints gently.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsPreparing(false);
+    }
+  }, [robot, toast]);
 
   const handleStart = async () => {
-    setIsCalibrating(true)
-    const process = await lerobot.calibrate(robot, {
-      onLiveUpdate: setLiveData,
-      onProgress: setStatus,
-    })
-    setCalibrationProcess(process)
-  }
+    try {
+      setIsCalibrating(true);
+      setStatus("🤖 Starting calibration process...");
+
+      // Release motors first
+      await releaseMotorTorque();
+
+      // Start calibration process
+      const process = await calibrate({
+        robot,
+        onLiveUpdate: (data) => {
+          setLiveData(data);
+          setStatus(
+            "📏 Recording joint ranges - move all joints through their full range"
+          );
+        },
+        onProgress: (message) => {
+          setStatus(message);
+        },
+      });
+
+      setCalibrationProcess(process);
+
+      // Add Enter key listener for stopping (matching Node.js UX)
+      const handleKeyPress = (event: KeyboardEvent) => {
+        if (event.key === "Enter") {
+          process.stop();
+        }
+      };
+      document.addEventListener("keydown", handleKeyPress);
+
+      try {
+        // Wait for calibration to complete
+        const result = await process.result;
+        setCalibrationResults(result);
+
+        // Save results to unified storage
+        if (robot.serialNumber) {
+          const metadata: CalibrationMetadata = {
+            timestamp: new Date().toISOString(),
+            readCount: Object.keys(liveData || {}).length > 0 ? 100 : 0,
+          };
+
+          // Use the result directly as WebCalibrationResults
+          saveCalibrationData(robot.serialNumber, result, metadata);
+        }
+
+        setStatus(
+          "✅ Calibration completed successfully! Configuration saved."
+        );
+        toast({
+          title: "Calibration Complete",
+          description: "Robot calibration has been saved successfully",
+        });
+      } finally {
+        document.removeEventListener("keydown", handleKeyPress);
+        setCalibrationProcess(null);
+        setIsCalibrating(false);
+      }
+    } catch (error) {
+      console.error("Calibration failed:", error);
+      setStatus(
+        `❌ Calibration failed: ${
+          error instanceof Error ? error.message : error
+        }`
+      );
+      toast({
+        title: "Calibration Failed",
+        description:
+          error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
+      setIsCalibrating(false);
+      setCalibrationProcess(null);
+    }
+  };
 
   const handleFinish = async () => {
     if (calibrationProcess) {
-      calibrationProcess.stop()
-      const results = await calibrationProcess.result
-      setCalibrationResults(results)
-      setIsCalibrating(false)
-      setCalibrationProcess(null)
+      try {
+        calibrationProcess.stop();
+        toast({
+          title: "Calibration Stopped",
+          description: "Calibration recording has been stopped",
+        });
+      } catch (error) {
+        console.error("Failed to stop calibration:", error);
+        toast({
+          title: "Stop Error",
+          description: "Failed to stop calibration cleanly",
+          variant: "destructive",
+        });
+      }
     }
-  }
+  };
 
   const downloadJson = () => {
-    if (!calibrationResults) return
-    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(calibrationResults, null, 2))
-    const downloadAnchorNode = document.createElement("a")
-    downloadAnchorNode.setAttribute("href", dataStr)
-    downloadAnchorNode.setAttribute("download", `${robot.robotId}_calibration.json`)
-    document.body.appendChild(downloadAnchorNode)
-    downloadAnchorNode.click()
-    downloadAnchorNode.remove()
-  }
+    if (!calibrationResults) return;
+
+    try {
+      const dataStr =
+        "data:text/json;charset=utf-8," +
+        encodeURIComponent(JSON.stringify(calibrationResults, null, 2));
+      const downloadAnchorNode = document.createElement("a");
+      downloadAnchorNode.setAttribute("href", dataStr);
+      downloadAnchorNode.setAttribute(
+        "download",
+        `${robot.robotId}_calibration.json`
+      );
+      document.body.appendChild(downloadAnchorNode);
+      downloadAnchorNode.click();
+      downloadAnchorNode.remove();
+
+      toast({
+        title: "Download Started",
+        description: "Calibration file download has started",
+      });
+    } catch (error) {
+      console.error("Failed to download calibration file:", error);
+      toast({
+        title: "Download Error",
+        description: "Failed to download calibration file",
+        variant: "destructive",
+      });
+    }
+  };
 
   const motorData = useMemo(
     () =>
       liveData
         ? Object.entries(liveData)
-        : lerobot.MOCK_MOTOR_NAMES.map((name) => [name, { current: 0, min: 4095, max: 0, range: 0 }]),
-    [liveData],
-  )
+        : motorNames.map((name) => [
+            name,
+            { current: 0, min: 4095, max: 0, range: 0 },
+          ]),
+    [liveData, motorNames]
+  );
 
   return (
     <Card className="border-0 rounded-none">
@@ -69,21 +229,32 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
         <div className="flex items-center gap-4">
           <div className="w-1 h-8 bg-primary"></div>
           <div>
-            <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">motor calibration</h3>
-            <p className="text-sm text-muted-foreground font-mono">move all joints to their limits</p>
+            <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">
+              motor calibration
+            </h3>
+            <p className="text-sm text-muted-foreground font-mono">{status}</p>
           </div>
         </div>
         <div className="flex gap-4">
           {!isCalibrating ? (
-            <Button onClick={handleStart} size="lg">
-              Start Calibration
+            <Button
+              onClick={handleStart}
+              size="lg"
+              disabled={isPreparing || !robot.isConnected}
+            >
+              {isPreparing ? "Preparing..." : "Start Calibration"}
             </Button>
           ) : (
             <Button onClick={handleFinish} variant="destructive" size="lg">
               Finish Recording
             </Button>
           )}
-          <Button onClick={downloadJson} variant="outline" size="lg" disabled={!calibrationResults}>
+          <Button
+            onClick={downloadJson}
+            variant="outline"
+            size="lg"
+            disabled={!calibrationResults}
+          >
             <Download className="w-4 h-4 mr-2" /> Download JSON
           </Button>
         </div>
@@ -99,10 +270,21 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
         </div>
         <div className="border-t border-white/10">
           {motorData.map(([name, data]) => (
-            <MotorCalibrationVisual key={name} name={name} data={data} />
+            <MotorCalibrationVisual
+              key={name as string}
+              name={name as string}
+              data={
+                data as {
+                  current: number;
+                  min: number;
+                  max: number;
+                  range: number;
+                }
+              }
+            />
           ))}
         </div>
       </div>
     </Card>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/device-dashboard.tsx

@@ -1,22 +1,29 @@
-"use client"
+"use client";
 
-import { Settings, Gamepad2, Trash2, Pencil, Plus, ExternalLink } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card, CardFooter } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
-import HudCorners from "@/components/hud-corners"
-import type { RobotConnection } from "@/types/robot"
+import {
+  Settings,
+  Gamepad2,
+  Trash2,
+  Pencil,
+  Plus,
+  ExternalLink,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardFooter } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import HudCorners from "@/components/hud-corners";
+import type { RobotConnection } from "@/types/robot";
 
 interface DeviceDashboardProps {
-  robots: RobotConnection[]
-  onCalibrate: (robot: RobotConnection) => void
-  onTeleoperate: (robot: RobotConnection) => void
-  onRemove: (robotId: string) => void
-  onEdit: (robot: RobotConnection) => void
-  onFindNew: () => void
-  isConnecting: boolean
-  onScrollToHardware: () => void
+  robots: RobotConnection[];
+  onCalibrate: (robot: RobotConnection) => void;
+  onTeleoperate: (robot: RobotConnection) => void;
+  onRemove: (robotId: string) => void;
+  onEdit: (robot: RobotConnection) => void;
+  onFindNew: () => void;
+  isConnecting: boolean;
+  onScrollToHardware: () => void;
 }
 
 export function DeviceDashboard({
@@ -35,9 +42,13 @@ export function DeviceDashboard({
         <div className="flex items-center gap-4">
           <div className="w-1 h-8 bg-primary"></div>
           <div>
-            <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">device registry</h3>
+            <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">
+              device registry
+            </h3>
             <div className="flex items-center gap-2 mt-1">
-              <span className="text-xs text-muted-foreground font-mono">currently supports SO-100 </span>
+              <span className="text-xs text-muted-foreground font-mono">
+                currently supports SO-100{" "}
+              </span>
               <button
                 onClick={onScrollToHardware}
                 className="text-xs text-primary hover:text-accent transition-colors underline font-mono flex items-center gap-1"
@@ -49,7 +60,12 @@ export function DeviceDashboard({
           </div>
         </div>
         {robots.length > 0 && (
-          <Button onClick={onFindNew} disabled={isConnecting} size="lg" className="font-mono uppercase">
+          <Button
+            onClick={onFindNew}
+            disabled={isConnecting}
+            size="lg"
+            className="font-mono uppercase"
+          >
             <Plus className="w-4 h-4 mr-2" />
             add unit
           </Button>
@@ -67,17 +83,27 @@ export function DeviceDashboard({
                       <div className="w-16 h-16 mx-auto mb-4 border-2 border-primary/50 rounded-lg flex items-center justify-center animate-pulse">
                         <Plus className="w-8 h-8 text-primary animate-spin" />
                       </div>
-                      <h4 className="text-xl text-primary mb-2 tracking-wider uppercase">scanning for units</h4>
-                      <p className="text-sm text-muted-foreground mb-8">searching for available devices...</p>
+                      <h4 className="text-xl text-primary mb-2 tracking-wider uppercase">
+                        scanning for units
+                      </h4>
+                      <p className="text-sm text-muted-foreground mb-8">
+                        searching for available devices...
+                      </p>
                     </>
                   ) : (
                     <>
                       <div className="w-16 h-16 mx-auto mb-4 border-2 border-dashed border-primary/50 rounded-lg flex items-center justify-center">
                         <Plus className="w-8 h-8 text-primary/50" />
                       </div>
-                      <h4 className="text-xl text-primary mb-2 tracking-wider uppercase">no units detected</h4>
+                      <h4 className="text-xl text-primary mb-2 tracking-wider uppercase">
+                        no units detected
+                      </h4>
 
-                      <Button onClick={onFindNew} size="lg" className="font-mono uppercase">
+                      <Button
+                        onClick={onFindNew}
+                        size="lg"
+                        className="font-mono uppercase"
+                      >
                         <Plus className="w-4 h-4 mr-2" />
                         add unit
                       </Button>
@@ -95,18 +121,26 @@ export function DeviceDashboard({
                   <div className="p-4 border-b border-white/10">
                     <div className="flex items-start justify-between mb-3">
                       <div className="flex-1">
-                        <h4 className="text-xl font-bold text-primary font-mono tracking-wider">{robot.name}</h4>
+                        <h4 className="text-xl font-bold text-primary font-mono tracking-wider">
+                          {robot.name}
+                        </h4>
                         <div className="flex items-center gap-2 mt-1">
-                          <span className="text-xs text-muted-foreground font-mono">{robot.serialNumber}</span>
-                          <span className="text-xs text-muted-foreground">•</span>
-                          <span className="text-xs font-mono uppercase text-muted-foreground">{robot.robotType}</span>
+                          <span className="text-xs text-muted-foreground font-mono">
+                            {robot.serialNumber}
+                          </span>
+                          <span className="text-xs text-muted-foreground">
+                            •
+                          </span>
+                          <span className="text-xs font-mono uppercase text-muted-foreground">
+                            {robot.robotType}
+                          </span>
                         </div>
                       </div>
                       <Badge
                         variant="outline"
                         className={cn(
                           "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
-                          robot.isConnected && "animate-pulse-slow",
+                          robot.isConnected && "animate-pulse-slow"
                         )}
                       >
                         {robot.isConnected ? "ONLINE" : "OFFLINE"}
@@ -117,14 +151,20 @@ export function DeviceDashboard({
                   <div className="flex-grow p-4">
                     <div className="grid grid-cols-2 gap-4 text-xs font-mono">
                       <div>
-                        <span className="text-muted-foreground uppercase">status:</span>
+                        <span className="text-muted-foreground uppercase">
+                          status:
+                        </span>
                         <div className="text-primary uppercase">
                           {robot.isConnected ? "operational" : "disconnected"}
                         </div>
                       </div>
                       <div>
-                        <span className="text-muted-foreground uppercase">type:</span>
-                        <div className="text-accent uppercase">{robot.robotType}</div>
+                        <span className="text-muted-foreground uppercase">
+                          type:
+                        </span>
+                        <div className="text-accent uppercase">
+                          {robot.robotType}
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -157,7 +197,11 @@ export function DeviceDashboard({
                     <Button
                       variant="destructive"
                       size="sm"
-                      onClick={() => onRemove(robot.robotId)}
+                      onClick={() =>
+                        onRemove(
+                          robot.robotId || robot.serialNumber || "unknown"
+                        )
+                      }
                       className="font-mono text-xs uppercase"
                     >
                       <Trash2 className="w-3 h-3 mr-1" /> remove
@@ -170,5 +214,5 @@ export function DeviceDashboard({
         )}
       </div>
     </Card>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/edit-robot-dialog.tsx

@@ -1,37 +1,51 @@
-"use client"
-import { useState, useEffect } from "react"
-import { Button } from "@/components/ui/button"
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "@/components/ui/dialog"
-import { Input } from "@/components/ui/input"
-import { Label } from "@/components/ui/label"
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
-import type { RobotConnection } from "@/types/robot"
+"use client";
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+  DialogClose,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import type { RobotConnection } from "@/types/robot";
 
 interface EditRobotDialogProps {
-  robot: RobotConnection | null
-  isOpen: boolean
-  onOpenChange: (open: boolean) => void
-  onSave: (updatedRobot: RobotConnection) => void
+  robot: RobotConnection | null;
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (updatedRobot: RobotConnection) => void;
 }
 
-export function EditRobotDialog({ robot, isOpen, onOpenChange, onSave }: EditRobotDialogProps) {
-  const [name, setName] = useState("")
-  const [type, setType] = useState<"so100_follower" | "so100_leader">("so100_follower")
+export function EditRobotDialog({
+  robot,
+  isOpen,
+  onOpenChange,
+  onSave,
+}: EditRobotDialogProps) {
+  const [name, setName] = useState("");
+  const [type, setType] = useState<"so100_follower" | "so100_leader">(
+    "so100_follower"
+  );
 
   useEffect(() => {
     if (robot) {
-      setName(robot.name)
-      setType(robot.robotType || "so100_follower")
+      setName(robot.name);
+      setType(robot.robotType || "so100_follower");
     }
-  }, [robot])
+  }, [robot]);
 
   const handleSave = () => {
     if (robot) {
-      onSave({ ...robot, name, robotType: type })
+      onSave({ ...robot, name, robotId: name, robotType: type });
     }
-  }
+  };
 
-  if (!robot) return null
+  if (!robot) return null;
 
   return (
     <Dialog open={isOpen} onOpenChange={onOpenChange}>
@@ -44,11 +58,22 @@ export function EditRobotDialog({ robot, isOpen, onOpenChange, onSave }: EditRob
             <Label htmlFor="name" className="text-right">
               Name
             </Label>
-            <Input id="name" value={name} onChange={(e) => setName(e.target.value)} className="col-span-3 font-mono" />
+            <Input
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="col-span-3 font-mono"
+            />
           </div>
           <div className="grid grid-cols-4 items-center gap-4">
             <Label className="text-right">Type</Label>
-            <RadioGroup value={type} onValueChange={(value) => setType(value as any)} className="col-span-3">
+            <RadioGroup
+              value={type}
+              onValueChange={(value) =>
+                setType(value as "so100_follower" | "so100_leader")
+              }
+              className="col-span-3"
+            >
               <div className="flex items-center space-x-2">
                 <RadioGroupItem value="so100_follower" id="r1" />
                 <Label htmlFor="r1">SO-100 Follower</Label>
@@ -74,5 +99,5 @@ export function EditRobotDialog({ robot, isOpen, onOpenChange, onSave }: EditRob
         </DialogFooter>
       </DialogContent>
     </Dialog>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/teleoperation-view.tsx

@@ -1,73 +1,396 @@
-"use client"
-import { useState, useEffect, useMemo } from "react"
-import { Power, PowerOff, Keyboard } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import { Slider } from "@/components/ui/slider"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { cn } from "@/lib/utils"
-import { lerobot } from "@/lib/mock-api"
-import { useLocalStorage } from "@/hooks/use-local-storage"
-import VirtualKey from "@/components/VirtualKey"
-import type { RobotConnection, WebCalibrationResults, TeleoperationState } from "@/types/robot"
+"use client";
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
+import { Power, PowerOff, Keyboard } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Slider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+import { useToast } from "@/hooks/use-toast";
+import {
+  teleoperate,
+  type TeleoperationProcess,
+  type TeleoperationState,
+  type TeleoperateConfig,
+  type RobotConnection,
+} from "@lerobot/web";
+import { getUnifiedRobotData } from "@/lib/unified-storage";
+import VirtualKey from "@/components/VirtualKey";
 
 interface TeleoperationViewProps {
-  robot: RobotConnection
+  robot: RobotConnection;
 }
 
+// Keyboard controls for SO-100 (from conventions)
+const SO100_KEYBOARD_CONTROLS = {
+  shoulder_pan: { positive: "ArrowRight", negative: "ArrowLeft" },
+  shoulder_lift: { positive: "ArrowUp", negative: "ArrowDown" },
+  elbow_flex: { positive: "w", negative: "s" },
+  wrist_flex: { positive: "a", negative: "d" },
+  wrist_roll: { positive: "q", negative: "e" },
+  gripper: { positive: "o", negative: "c" },
+  stop: "Escape",
+};
+
+// Default motor configurations for immediate display
+const DEFAULT_MOTOR_CONFIGS = [
+  {
+    name: "shoulder_pan",
+    currentPosition: 2048,
+    minPosition: 0,
+    maxPosition: 4095,
+  },
+  {
+    name: "shoulder_lift",
+    currentPosition: 2048,
+    minPosition: 0,
+    maxPosition: 4095,
+  },
+  {
+    name: "elbow_flex",
+    currentPosition: 2048,
+    minPosition: 0,
+    maxPosition: 4095,
+  },
+  {
+    name: "wrist_flex",
+    currentPosition: 2048,
+    minPosition: 0,
+    maxPosition: 4095,
+  },
+  {
+    name: "wrist_roll",
+    currentPosition: 2048,
+    minPosition: 0,
+    maxPosition: 4095,
+  },
+  { name: "gripper", currentPosition: 2048, minPosition: 0, maxPosition: 4095 },
+];
+
 export function TeleoperationView({ robot }: TeleoperationViewProps) {
-  const [localCalibrationData] = useLocalStorage<WebCalibrationResults | null>(`calibration-${robot.robotId}`, null)
-  const [teleopState, setTeleopState] = useState<TeleoperationState | null>(null)
-  const [teleopProcess, setTeleopProcess] = useState<{
-    start: () => void
-    stop: () => void
-    updateKeyState: (key: string, pressed: boolean) => void
-    moveMotor: (motorName: string, position: number) => void
-  } | null>(null)
+  const [teleopState, setTeleopState] = useState<TeleoperationState>({
+    isActive: false,
+    motorConfigs: [],
+    lastUpdate: 0,
+    keyStates: {},
+  });
+
+  const [isInitialized, setIsInitialized] = useState(false);
+  // Local slider positions for immediate UI feedback with timestamps
+  const [localMotorPositions, setLocalMotorPositions] = useState<{
+    [motorName: string]: { position: number; timestamp: number };
+  }>({});
+  const keyboardProcessRef = useRef<TeleoperationProcess | null>(null);
+  const directProcessRef = useRef<TeleoperationProcess | null>(null);
+  const { toast } = useToast();
 
+  // Load calibration data from unified storage
   const calibrationData = useMemo(() => {
-    if (localCalibrationData) return localCalibrationData
-    return lerobot.MOCK_MOTOR_NAMES.reduce((acc, name) => {
-      acc[name] = { min: 1000, max: 3000 }
-      return acc
-    }, {} as WebCalibrationResults)
-  }, [localCalibrationData])
+    if (!robot.serialNumber) return undefined;
 
-  useEffect(() => {
-    let process: Awaited<ReturnType<typeof lerobot.teleoperate>>
-    const setup = async () => {
-      process = await lerobot.teleoperate(robot, {
-        calibrationData,
-        onStateUpdate: setTeleopState,
-      })
-      setTeleopProcess(process)
+    const data = getUnifiedRobotData(robot.serialNumber);
+    if (data?.calibration) {
+      return data.calibration;
     }
-    setup()
 
-    const handleKeyDown = (e: KeyboardEvent) => process?.updateKeyState(e.key, true)
-    const handleKeyUp = (e: KeyboardEvent) => process?.updateKeyState(e.key, false)
+    // Return undefined if no calibration data - let library handle defaults
+    return undefined;
+  }, [robot.serialNumber]);
 
-    window.addEventListener("keydown", handleKeyDown)
-    window.addEventListener("keyup", handleKeyUp)
+  // Lazy initialization function - only connects when user wants to start
+  const initializeTeleoperation = async () => {
+    if (!robot || !robot.robotType) {
+      return false;
+    }
+
+    try {
+      // Create keyboard teleoperation process
+      const keyboardConfig: TeleoperateConfig = {
+        robot: robot,
+        teleop: {
+          type: "keyboard",
+        },
+        calibrationData,
+        onStateUpdate: (state: TeleoperationState) => {
+          setTeleopState(state);
+        },
+      };
+      const keyboardProcess = await teleoperate(keyboardConfig);
 
+      // Create direct teleoperation process
+      const directConfig: TeleoperateConfig = {
+        robot: robot,
+        teleop: {
+          type: "direct",
+        },
+        calibrationData,
+      };
+      const directProcess = await teleoperate(directConfig);
+
+      keyboardProcessRef.current = keyboardProcess;
+      directProcessRef.current = directProcess;
+      setTeleopState(keyboardProcess.getState());
+
+      // Initialize local motor positions from hardware state
+      const initialState = keyboardProcess.getState();
+      const initialPositions: {
+        [motorName: string]: { position: number; timestamp: number };
+      } = {};
+      initialState.motorConfigs.forEach((motor) => {
+        initialPositions[motor.name] = {
+          position: motor.currentPosition,
+          timestamp: Date.now(),
+        };
+      });
+      setLocalMotorPositions(initialPositions);
+
+      setIsInitialized(true);
+
+      return true;
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to initialize teleoperation";
+      toast({
+        title: "Teleoperation Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+      return false;
+    }
+  };
+
+  // Cleanup on unmount
+  useEffect(() => {
     return () => {
-      process?.stop()
-      window.removeEventListener("keydown", handleKeyDown)
-      window.removeEventListener("keyup", handleKeyUp)
+      const cleanup = async () => {
+        try {
+          if (keyboardProcessRef.current) {
+            await keyboardProcessRef.current.disconnect();
+            keyboardProcessRef.current = null;
+          }
+          if (directProcessRef.current) {
+            await directProcessRef.current.disconnect();
+            directProcessRef.current = null;
+          }
+        } catch (error) {
+          console.warn("Error during teleoperation cleanup:", error);
+        }
+      };
+      cleanup();
+    };
+  }, []);
+
+  // Keyboard event handlers
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!teleopState.isActive || !keyboardProcessRef.current) return;
+
+      const key = event.key;
+      event.preventDefault();
+
+      const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+      if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+        (
+          keyboardTeleoperator as {
+            updateKeyState: (key: string, pressed: boolean) => void;
+          }
+        ).updateKeyState(key, true);
+      }
+    },
+    [teleopState.isActive]
+  );
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent) => {
+      if (!teleopState.isActive || !keyboardProcessRef.current) return;
+
+      const key = event.key;
+      event.preventDefault();
+
+      const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+      if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+        (
+          keyboardTeleoperator as {
+            updateKeyState: (key: string, pressed: boolean) => void;
+          }
+        ).updateKeyState(key, false);
+      }
+    },
+    [teleopState.isActive]
+  );
+
+  // Register keyboard events
+  useEffect(() => {
+    if (teleopState.isActive) {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      };
+    }
+  }, [teleopState.isActive, handleKeyDown, handleKeyUp]);
+
+  const handleStart = async () => {
+    // Initialize on first use if not already initialized
+    if (!isInitialized) {
+      const success = await initializeTeleoperation();
+      if (!success) return;
+    }
+
+    if (!keyboardProcessRef.current || !directProcessRef.current) {
+      toast({
+        title: "Teleoperation Error",
+        description: "Teleoperation not initialized",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      keyboardProcessRef.current.start();
+      directProcessRef.current.start();
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to start teleoperation";
+      toast({
+        title: "Start Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleStop = async () => {
+    try {
+      if (keyboardProcessRef.current) {
+        keyboardProcessRef.current.stop();
+      }
+      if (directProcessRef.current) {
+        directProcessRef.current.stop();
+      }
+    } catch (error) {
+      console.warn("Error during teleoperation stop:", error);
     }
-  }, [robot, calibrationData])
-
-  const motorConfigs =
-    teleopState?.motorConfigs ??
-    lerobot.MOCK_MOTOR_NAMES.map((name) => ({
-      name,
-      currentPosition: 2048,
-      minPosition: calibrationData[name]?.min ?? 0,
-      maxPosition: calibrationData[name]?.max ?? 4095,
-    }))
-  const keyStates = teleopState?.keyStates ?? {}
-  const controls = lerobot.SO100_KEYBOARD_CONTROLS
+  };
+
+  // Virtual keyboard functions
+  const simulateKeyPress = (key: string) => {
+    if (!keyboardProcessRef.current || !teleopState.isActive) return;
+
+    const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+    if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+      (
+        keyboardTeleoperator as {
+          updateKeyState: (key: string, pressed: boolean) => void;
+        }
+      ).updateKeyState(key, true);
+    }
+  };
+
+  const simulateKeyRelease = (key: string) => {
+    if (!keyboardProcessRef.current || !teleopState.isActive) return;
+
+    const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+    if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+      (
+        keyboardTeleoperator as {
+          updateKeyState: (key: string, pressed: boolean) => void;
+        }
+      ).updateKeyState(key, false);
+    }
+  };
+
+  // Motor control through direct teleoperator
+  const moveMotor = async (motorName: string, position: number) => {
+    if (!directProcessRef.current) return;
+
+    try {
+      // Immediately update local UI state for responsive slider feedback
+      setLocalMotorPositions((prev) => ({
+        ...prev,
+        [motorName]: { position, timestamp: Date.now() },
+      }));
+
+      const directTeleoperator = directProcessRef.current.teleoperator;
+      if (directTeleoperator && "moveMotor" in directTeleoperator) {
+        await (
+          directTeleoperator as {
+            moveMotor: (motorName: string, position: number) => Promise<void>;
+          }
+        ).moveMotor(motorName, position);
+      }
+    } catch (error) {
+      console.warn(
+        `Failed to move motor ${motorName} to position ${position}:`,
+        error
+      );
+      toast({
+        title: "Motor Control Error",
+        description: `Failed to move ${motorName}`,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // Merge hardware state with local UI state for responsive sliders
+  const motorConfigs = useMemo(() => {
+    const realMotorConfigs = teleopState?.motorConfigs || [];
+    const now = Date.now();
+
+    // If we have real motor configs, use them with local position overrides when recent
+    if (realMotorConfigs.length > 0) {
+      return realMotorConfigs.map((motor) => {
+        const localData = localMotorPositions[motor.name];
+        // Use local position only if it's very recent (within 100ms), otherwise use hardware position
+        const useLocalPosition = localData && now - localData.timestamp < 100;
+        return {
+          ...motor,
+          currentPosition: useLocalPosition
+            ? localData.position
+            : motor.currentPosition,
+        };
+      });
+    }
+
+    // Otherwise, show default configs with calibration data if available
+    return DEFAULT_MOTOR_CONFIGS.map((motor) => {
+      const calibratedMotor = calibrationData?.[motor.name];
+      const localData = localMotorPositions[motor.name];
+      const useLocalPosition = localData && now - localData.timestamp < 100;
+
+      return {
+        ...motor,
+        minPosition: calibratedMotor?.range_min ?? motor.minPosition,
+        maxPosition: calibratedMotor?.range_max ?? motor.maxPosition,
+        // Show 0 when inactive to look deactivated, local/real position when active
+        currentPosition: teleopState?.isActive
+          ? useLocalPosition
+            ? localData.position
+            : motor.currentPosition
+          : 0,
+      };
+    });
+  }, [
+    teleopState?.motorConfigs,
+    teleopState?.isActive,
+    localMotorPositions,
+    calibrationData,
+  ]);
+
+  const keyStates = teleopState?.keyStates || {};
+  const controls = SO100_KEYBOARD_CONTROLS;
 
   return (
     <Card className="border-0 rounded-none">
@@ -76,30 +399,40 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           <div className="flex items-center gap-4">
             <div className="w-1 h-8 bg-primary"></div>
             <div>
-              <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">robot control</h3>
+              <h3 className="text-xl font-bold text-foreground font-mono tracking-wider uppercase">
+                robot control
+              </h3>
               <p className="text-sm text-muted-foreground font-mono">
-                manual <span className="text-muted-foreground">teleoperate</span> interface
+                manual{" "}
+                <span className="text-muted-foreground">teleoperate</span>{" "}
+                interface
               </p>
             </div>
           </div>
           <div className="flex items-center gap-6">
             <div className="border-l border-white/10 pl-6 flex items-center gap-4">
               {teleopState?.isActive ? (
-                <Button onClick={() => teleopProcess?.stop()} variant="destructive" size="lg">
+                <Button onClick={handleStop} variant="destructive" size="lg">
                   <PowerOff className="w-5 h-5 mr-2" /> Stop Control
                 </Button>
               ) : (
-                <Button onClick={() => teleopProcess?.start()} size="lg">
+                <Button
+                  onClick={handleStart}
+                  size="lg"
+                  disabled={!robot.isConnected}
+                >
                   <Power className="w-5 h-5 mr-2" /> Control Robot
                 </Button>
               )}
               <div className="flex items-center gap-2">
-                <span className="text-sm font-mono text-muted-foreground uppercase">status:</span>
+                <span className="text-sm font-mono text-muted-foreground uppercase">
+                  status:
+                </span>
                 <Badge
                   variant="outline"
                   className={cn(
                     "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
-                    teleopState?.isActive && "animate-pulse-slow",
+                    teleopState?.isActive && "animate-pulse-slow"
                   )}
                 >
                   {teleopState?.isActive ? "ACTIVE" : "STOPPED"}
@@ -111,21 +444,33 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
       </div>
       <div className="pt-6 p-6 grid md:grid-cols-2 gap-8">
         <div>
-          <h3 className="font-sans font-semibold mb-4 text-xl">Motor Control</h3>
+          <h3 className="font-sans font-semibold mb-4 text-xl">
+            Motor Control
+          </h3>
           <div className="space-y-6">
             {motorConfigs.map((motor) => (
               <div key={motor.name}>
-                <label className="text-sm font-mono text-muted-foreground">{motor.name}</label>
+                <label className="text-sm font-mono text-muted-foreground">
+                  {motor.name}
+                </label>
                 <div className="flex items-center gap-4">
                   <Slider
                     value={[motor.currentPosition]}
                     min={motor.minPosition}
                     max={motor.maxPosition}
                     step={1}
-                    onValueChange={(val) => teleopProcess?.moveMotor(motor.name, val[0])}
+                    onValueChange={(val) => moveMotor(motor.name, val[0])}
                     disabled={!teleopState?.isActive}
+                    className={!teleopState?.isActive ? "opacity-50" : ""}
                   />
-                  <span className="text-lg font-mono w-16 text-right text-accent">
+                  <span
+                    className={cn(
+                      "text-lg font-mono w-16 text-right",
+                      teleopState?.isActive
+                        ? "text-accent"
+                        : "text-muted-foreground"
+                    )}
+                  >
                     {Math.round(motor.currentPosition)}
                   </span>
                 </div>
@@ -134,30 +479,68 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           </div>
         </div>
         <div>
-          <h3 className="font-sans font-semibold mb-4 text-xl">Keyboard Layout & Status</h3>
+          <h3 className="font-sans font-semibold mb-4 text-xl">
+            Keyboard Layout & Status
+          </h3>
           <div className="p-4 bg-black/30 rounded-lg space-y-4">
             <div className="flex justify-around items-end">
               <div className="flex flex-col items-center gap-2">
                 <VirtualKey
                   label="↑"
                   subLabel="Lift+"
-                  isPressed={!!keyStates[controls.shoulder_lift.positive]?.pressed}
+                  isPressed={
+                    !!keyStates[controls.shoulder_lift.positive]?.pressed
+                  }
+                  onMouseDown={() =>
+                    simulateKeyPress(controls.shoulder_lift.positive)
+                  }
+                  onMouseUp={() =>
+                    simulateKeyRelease(controls.shoulder_lift.positive)
+                  }
+                  disabled={!teleopState?.isActive}
                 />
                 <div className="flex gap-2">
                   <VirtualKey
                     label="←"
                     subLabel="Pan-"
-                    isPressed={!!keyStates[controls.shoulder_pan.negative]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.shoulder_pan.negative]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.shoulder_pan.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.shoulder_pan.negative)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                   <VirtualKey
                     label="↓"
                     subLabel="Lift-"
-                    isPressed={!!keyStates[controls.shoulder_lift.negative]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.shoulder_lift.negative]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.shoulder_lift.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.shoulder_lift.negative)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                   <VirtualKey
                     label="→"
                     subLabel="Pan+"
-                    isPressed={!!keyStates[controls.shoulder_pan.positive]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.shoulder_pan.positive]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.shoulder_pan.positive)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.shoulder_pan.positive)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                 </div>
                 <span className="font-bold text-sm font-sans">Shoulder</span>
@@ -167,22 +550,56 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
                   label="W"
                   subLabel="Elbow+"
                   isPressed={!!keyStates[controls.elbow_flex.positive]?.pressed}
+                  onMouseDown={() =>
+                    simulateKeyPress(controls.elbow_flex.positive)
+                  }
+                  onMouseUp={() =>
+                    simulateKeyRelease(controls.elbow_flex.positive)
+                  }
+                  disabled={!teleopState?.isActive}
                 />
                 <div className="flex gap-2">
                   <VirtualKey
                     label="A"
                     subLabel="Wrist+"
-                    isPressed={!!keyStates[controls.wrist_flex.positive]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.wrist_flex.positive]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.wrist_flex.positive)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.wrist_flex.positive)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                   <VirtualKey
                     label="S"
                     subLabel="Elbow-"
-                    isPressed={!!keyStates[controls.elbow_flex.negative]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.elbow_flex.negative]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.elbow_flex.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.elbow_flex.negative)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                   <VirtualKey
                     label="D"
                     subLabel="Wrist-"
-                    isPressed={!!keyStates[controls.wrist_flex.negative]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.wrist_flex.negative]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.wrist_flex.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.wrist_flex.negative)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                 </div>
                 <span className="font-bold text-sm font-sans">Elbow/Wrist</span>
@@ -192,17 +609,57 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
                   <VirtualKey
                     label="Q"
                     subLabel="Roll+"
-                    isPressed={!!keyStates[controls.wrist_roll.positive]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.wrist_roll.positive]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.wrist_roll.positive)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.wrist_roll.positive)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                   <VirtualKey
                     label="E"
                     subLabel="Roll-"
-                    isPressed={!!keyStates[controls.wrist_roll.negative]?.pressed}
+                    isPressed={
+                      !!keyStates[controls.wrist_roll.negative]?.pressed
+                    }
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.wrist_roll.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.wrist_roll.negative)
+                    }
+                    disabled={!teleopState?.isActive}
                   />
                 </div>
                 <div className="flex gap-2">
-                  <VirtualKey label="O" subLabel="Grip+" isPressed={!!keyStates[controls.gripper.positive]?.pressed} />
-                  <VirtualKey label="C" subLabel="Grip-" isPressed={!!keyStates[controls.gripper.negative]?.pressed} />
+                  <VirtualKey
+                    label="O"
+                    subLabel="Grip+"
+                    isPressed={!!keyStates[controls.gripper.positive]?.pressed}
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.gripper.positive)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.gripper.positive)
+                    }
+                    disabled={!teleopState?.isActive}
+                  />
+                  <VirtualKey
+                    label="C"
+                    subLabel="Grip-"
+                    isPressed={!!keyStates[controls.gripper.negative]?.pressed}
+                    onMouseDown={() =>
+                      simulateKeyPress(controls.gripper.negative)
+                    }
+                    onMouseUp={() =>
+                      simulateKeyRelease(controls.gripper.negative)
+                    }
+                    disabled={!teleopState?.isActive}
+                  />
                 </div>
                 <span className="font-bold text-sm font-sans">Roll/Grip</span>
               </div>
@@ -211,7 +668,10 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
               <div className="flex justify-between items-center font-mono text-sm">
                 <div className="flex items-center gap-2 text-muted-foreground">
                   <Keyboard className="w-4 h-4" />
-                  <span>Active Keys: {Object.values(keyStates).filter((k) => k.pressed).length}</span>
+                  <span>
+                    Active Keys:{" "}
+                    {Object.values(keyStates).filter((k) => k.pressed).length}
+                  </span>
                 </div>
                 <TooltipProvider>
                   <Tooltip>
@@ -219,10 +679,33 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
                       <div
                         className={cn(
                           "w-10 h-6 border rounded-md flex items-center justify-center font-mono text-xs transition-all",
-                          !!keyStates[controls.stop]?.pressed
+                          "select-none user-select-none",
+                          !teleopState?.isActive &&
+                            "opacity-50 cursor-not-allowed",
+                          teleopState?.isActive &&
+                            "cursor-pointer hover:bg-white/5",
+                          keyStates[controls.stop]?.pressed
                             ? "bg-destructive text-destructive-foreground border-destructive"
-                            : "bg-background",
+                            : "bg-background"
                         )}
+                        onMouseDown={(e) => {
+                          e.preventDefault();
+                          if (teleopState?.isActive) {
+                            simulateKeyPress(controls.stop);
+                          }
+                        }}
+                        onMouseUp={(e) => {
+                          e.preventDefault();
+                          if (teleopState?.isActive) {
+                            simulateKeyRelease(controls.stop);
+                          }
+                        }}
+                        onMouseLeave={(e) => {
+                          e.preventDefault();
+                          if (teleopState?.isActive) {
+                            simulateKeyRelease(controls.stop);
+                          }
+                        }}
                       >
                         ESC
                       </div>
@@ -236,5 +719,5 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
         </div>
       </div>
     </Card>
-  )
+  );
 }

examples/cyberpunk-standalone/src/global.css

@@ -123,35 +123,11 @@
     opacity: 1;
   }
   body.dark {
-    background-image: radial-gradient(
-        circle at var(--mouse-x) var(--mouse-y),
-        rgba(255, 193, 7, 0.08),
-        transparent 20vw
-      ),
-      url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(255 255 255 / 0.05)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
   }
 }
 
 @layer utilities {
-  .scanline-overlay::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    pointer-events: none;
-    background: linear-gradient(
-      to bottom,
-      rgba(18, 18, 18, 0) 50%,
-      rgba(0, 0, 0, 0.2) 70%,
-      rgba(18, 18, 18, 0.75)
-    );
-    animation: scanline 8s linear infinite;
-    opacity: 0.1;
-    height: 200%;
-  }
-
   .text-glitch {
     animation: text-glitch 0.3s linear infinite alternate-reverse;
   }

examples/cyberpunk-standalone/src/lib/mock-api.ts

@@ -1,137 +0,0 @@
-import type { RobotConnection, LiveCalibrationData, WebCalibrationResults, TeleoperationState } from "@/types/robot"
-
-const MOCK_MOTOR_NAMES = ["shoulder_pan", "shoulder_lift", "elbow_flex", "wrist_flex", "wrist_roll", "gripper"]
-
-export const lerobot = {
-  isWebSerialSupported: () => true,
-  findPort: async ({
-    robotConfigs,
-    onMessage,
-  }: { robotConfigs?: any[]; onMessage?: (msg: string) => void }): Promise<{ result: Promise<RobotConnection[]> }> => {
-    onMessage?.("Searching for robots...")
-    const resultPromise = new Promise<RobotConnection[]>((resolve) => {
-      setTimeout(() => {
-        if (robotConfigs && robotConfigs.length > 0) {
-          onMessage?.(`Found ${robotConfigs.length} saved robots.`)
-          const reconnectedRobots = robotConfigs.map((config) => ({
-            ...config,
-            isConnected: Math.random() > 0.3,
-            port: {},
-          }))
-          resolve(reconnectedRobots)
-        } else {
-          onMessage?.("Simulating successful device connection.")
-          const newRobot: RobotConnection = {
-            port: {},
-            name: "Cyber-Arm 7",
-            isConnected: true,
-            robotType: "so100_follower",
-            robotId: `robot-${Date.now()}`,
-            serialNumber: `SN-${Math.floor(Math.random() * 1000000)}`,
-          }
-          resolve([newRobot])
-        }
-      }, 1500)
-    })
-    return { result: resultPromise }
-  },
-  calibrate: async (
-    robot: RobotConnection,
-    {
-      onLiveUpdate,
-      onProgress,
-    }: { onLiveUpdate: (data: LiveCalibrationData) => void; onProgress: (msg: string) => void },
-  ): Promise<{ result: Promise<WebCalibrationResults>; stop: () => void }> => {
-    onProgress("MOCK: Starting calibration... Move all joints to their limits.")
-    let intervalId: NodeJS.Timeout
-    const liveData: LiveCalibrationData = MOCK_MOTOR_NAMES.reduce((acc, name) => {
-      acc[name] = { current: 2048, min: 4095, max: 0, range: 0 }
-      return acc
-    }, {} as LiveCalibrationData)
-    intervalId = setInterval(() => {
-      MOCK_MOTOR_NAMES.forEach((name) => {
-        const motor = liveData[name]
-        motor.current = 2048 + Math.floor((Math.random() - 0.5) * 4000)
-        motor.min = Math.min(motor.min, motor.current)
-        motor.max = Math.max(motor.max, motor.current)
-        motor.range = motor.max - motor.min
-      })
-      onLiveUpdate({ ...liveData })
-    }, 100)
-    const resultPromise = new Promise<WebCalibrationResults>((resolve) => {
-      ;(stop as any)._resolver = resolve
-    })
-    const stop = () => {
-      clearInterval(intervalId)
-      onProgress("MOCK: Calibration recording finished.")
-      const finalResults = MOCK_MOTOR_NAMES.reduce((acc, name) => {
-        acc[name] = { min: liveData[name].min, max: liveData[name].max }
-        return acc
-      }, {} as WebCalibrationResults)
-      ;(stop as any)._resolver(finalResults)
-    }
-    return { result: resultPromise, stop }
-  },
-  teleoperate: async (
-    robot: RobotConnection,
-    {
-      calibrationData,
-      onStateUpdate,
-    }: { calibrationData: WebCalibrationResults; onStateUpdate: (state: TeleoperationState) => void },
-  ): Promise<{
-    start: () => void
-    stop: () => void
-    updateKeyState: (key: string, pressed: boolean) => void
-    moveMotor: (motorName: string, position: number) => void
-  }> => {
-    let isActive = false
-    let intervalId: NodeJS.Timeout
-    const keyStates: { [key: string]: { pressed: boolean } } = {}
-    const motorConfigs = MOCK_MOTOR_NAMES.map((name) => ({
-      name,
-      currentPosition: calibrationData[name] ? (calibrationData[name].min + calibrationData[name].max) / 2 : 2048,
-      minPosition: calibrationData[name]?.min ?? 0,
-      maxPosition: calibrationData[name]?.max ?? 4095,
-    }))
-    const teleopState: TeleoperationState = { isActive, motorConfigs, keyStates }
-    const updateLoop = () => onStateUpdate({ ...teleopState, motorConfigs: [...motorConfigs] })
-    return {
-      start: () => {
-        if (isActive) return
-        isActive = true
-        teleopState.isActive = true
-        intervalId = setInterval(updateLoop, 100)
-        onStateUpdate({ ...teleopState })
-      },
-      stop: () => {
-        if (!isActive) return
-        isActive = false
-        teleopState.isActive = false
-        clearInterval(intervalId)
-        onStateUpdate({ ...teleopState })
-      },
-      updateKeyState: (key: string, pressed: boolean) => {
-        keyStates[key] = { pressed }
-        teleopState.keyStates = { ...keyStates }
-        onStateUpdate({ ...teleopState })
-      },
-      moveMotor: (motorName: string, position: number) => {
-        const motor = motorConfigs.find((m) => m.name === motorName)
-        if (motor) {
-          motor.currentPosition = position
-          onStateUpdate({ ...teleopState, motorConfigs: [...motorConfigs] })
-        }
-      },
-    }
-  },
-  SO100_KEYBOARD_CONTROLS: {
-    shoulder_pan: { positive: "ArrowRight", negative: "ArrowLeft" },
-    shoulder_lift: { positive: "ArrowUp", negative: "ArrowDown" },
-    elbow_flex: { positive: "w", negative: "s" },
-    wrist_flex: { positive: "a", negative: "d" },
-    wrist_roll: { positive: "q", negative: "e" },
-    gripper: { positive: "o", negative: "c" },
-    stop: "Escape",
-  },
-  MOCK_MOTOR_NAMES,
-}

examples/cyberpunk-standalone/src/lib/unified-storage.ts

@@ -0,0 +1,137 @@
+/**
+ * Unified storage for robot device data and calibration
+ * Manages device persistence using localStorage with serial numbers as keys
+ */
+
+import type { WebCalibrationResults } from "@lerobot/web";
+
+export interface DeviceInfo {
+  serialNumber: string;
+  robotType: string;
+  robotId: string;
+  usbMetadata?: {
+    vendorId?: number;
+    productId?: number;
+    serialNumber?: string;
+    manufacturer?: string;
+    product?: string;
+  };
+}
+
+export interface CalibrationMetadata {
+  timestamp: string;
+  readCount: number;
+}
+
+export interface UnifiedRobotData {
+  device_info: DeviceInfo;
+  calibration?: WebCalibrationResults & {
+    device_type?: string;
+    device_id?: string;
+    calibrated_at?: string;
+    platform?: string;
+    api?: string;
+  };
+  calibration_metadata?: CalibrationMetadata;
+}
+
+export function getUnifiedRobotData(
+  serialNumber: string
+): UnifiedRobotData | null {
+  try {
+    const key = `lerobotjs-${serialNumber}`;
+    const data = localStorage.getItem(key);
+    if (!data) return null;
+
+    const parsed = JSON.parse(data);
+    return parsed as UnifiedRobotData;
+  } catch (error) {
+    console.warn(`Failed to load robot data for ${serialNumber}:`, error);
+    return null;
+  }
+}
+
+export function saveUnifiedRobotData(
+  serialNumber: string,
+  data: UnifiedRobotData
+): void {
+  try {
+    const key = `lerobotjs-${serialNumber}`;
+    localStorage.setItem(key, JSON.stringify(data));
+  } catch (error) {
+    console.warn(`Failed to save robot data for ${serialNumber}:`, error);
+  }
+}
+
+export function saveCalibrationData(
+  serialNumber: string,
+  calibrationData: WebCalibrationResults,
+  metadata: CalibrationMetadata
+): void {
+  try {
+    const existingData = getUnifiedRobotData(serialNumber);
+    if (!existingData) {
+      console.warn(
+        `No device info found for ${serialNumber}, cannot save calibration`
+      );
+      return;
+    }
+
+    const updatedData: UnifiedRobotData = {
+      ...existingData,
+      calibration: calibrationData,
+      calibration_metadata: metadata,
+    };
+
+    saveUnifiedRobotData(serialNumber, updatedData);
+  } catch (error) {
+    console.warn(`Failed to save calibration data for ${serialNumber}:`, error);
+  }
+}
+
+export function saveDeviceInfo(
+  serialNumber: string,
+  deviceInfo: DeviceInfo
+): void {
+  try {
+    const existingData = getUnifiedRobotData(serialNumber);
+    const updatedData: UnifiedRobotData = {
+      ...existingData,
+      device_info: deviceInfo,
+    };
+
+    saveUnifiedRobotData(serialNumber, updatedData);
+  } catch (error) {
+    console.warn(`Failed to save device info for ${serialNumber}:`, error);
+  }
+}
+
+export function getAllSavedRobots(): DeviceInfo[] {
+  try {
+    const robots: DeviceInfo[] = [];
+
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("lerobotjs-")) {
+        const data = getUnifiedRobotData(key.replace("lerobotjs-", ""));
+        if (data?.device_info) {
+          robots.push(data.device_info);
+        }
+      }
+    }
+
+    return robots;
+  } catch (error) {
+    console.warn("Failed to load saved robots:", error);
+    return [];
+  }
+}
+
+export function removeRobotData(serialNumber: string): void {
+  try {
+    const key = `lerobotjs-${serialNumber}`;
+    localStorage.removeItem(key);
+  } catch (error) {
+    console.warn(`Failed to remove robot data for ${serialNumber}:`, error);
+  }
+}

examples/cyberpunk-standalone/src/types/robot.ts

@@ -1,35 +1,6 @@
-export interface RobotConnection {
-  port: object
-  name: string
-  isConnected: boolean
-  robotType?: "so100_follower" | "so100_leader"
-  robotId: string
-  serialNumber?: string
-}
-
-export interface LiveCalibrationData {
-  [motorName: string]: {
-    current: number
-    min: number
-    max: number
-    range: number
-  }
-}
-
-export interface WebCalibrationResults {
-  [motorName: string]: {
-    min: number
-    max: number
-  }
-}
-
-export interface TeleoperationState {
-  isActive: boolean
-  motorConfigs: Array<{
-    name: string
-    currentPosition: number
-    minPosition: number
-    maxPosition: number
-  }>
-  keyStates: { [key: string]: { pressed: boolean } }
-}
+export type {
+  RobotConnection,
+  LiveCalibrationData,
+  WebCalibrationResults,
+  TeleoperationState,
+} from "@lerobot/web";