chore: remove unused files

examples/robot-control-web/App.tsx

@@ -1,19 +0,0 @@
-import { useState } from "react";
-import { Home } from "./pages/Home";
-import { ErrorBoundary } from "./components/ErrorBoundary";
-import type { RobotConnection } from "@lerobot/web";
-
-export function App() {
-  const [connectedRobots, setConnectedRobots] = useState<RobotConnection[]>([]);
-
-  return (
-    <ErrorBoundary>
-      <div className="min-h-screen bg-background">
-        <Home
-          connectedRobots={connectedRobots}
-          onConnectedRobotsChange={setConnectedRobots}
-        />
-      </div>
-    </ErrorBoundary>
-  );
-}

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

@@ -1,49 +0,0 @@
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-
-interface CalibrationModalProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  deviceType: string;
-  onContinue: () => void;
-}
-
-export function CalibrationModal({
-  open,
-  onOpenChange,
-  deviceType,
-  onContinue,
-}: CalibrationModalProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>📍 Set Homing Position</DialogTitle>
-          <DialogDescription className="text-base py-4">
-            Move the SO-100 {deviceType} to the <strong>MIDDLE</strong> of its
-            range of motion and click OK when ready.
-            <br />
-            <br />
-            The calibration will then automatically:
-            <br />• Record homing offsets
-            <br />• Record joint ranges (manual - you control when to stop)
-            <br />• Save configuration file
-          </DialogDescription>
-        </DialogHeader>
-
-        <DialogFooter>
-          <Button onClick={onContinue} className="w-full">
-            OK - Start Calibration
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}

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

@@ -1,408 +0,0 @@
-import { useState, useCallback, useMemo } from "react";
-import { Button } from "./ui/button.js";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card.js";
-import { Badge } from "./ui/badge.js";
-import {
-  calibrate,
-  releaseMotors,
-  type WebCalibrationResults,
-  type LiveCalibrationData,
-  type CalibrationProcess,
-} from "@lerobot/web";
-import { CalibrationModal } from "./CalibrationModal.js";
-import type { RobotConnection } from "@lerobot/web";
-
-interface CalibrationPanelProps {
-  robot: RobotConnection;
-  onFinish: () => void;
-}
-
-export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
-  // Simple state management
-  const [isCalibrating, setIsCalibrating] = useState(false);
-  const [calibrationResult, setCalibrationResult] =
-    useState<WebCalibrationResults | null>(null);
-  const [status, setStatus] = useState<string>("Ready to calibrate");
-  const [modalOpen, setModalOpen] = useState(false);
-  const [calibrationProcess, setCalibrationProcess] =
-    useState<CalibrationProcess | null>(null);
-  const [motorData, setMotorData] = useState<LiveCalibrationData>({});
-  const [isPreparing, setIsPreparing] = useState(false);
-
-  // Motor names for display
-  const motorNames = useMemo(
-    () => [
-      "shoulder_pan",
-      "shoulder_lift",
-      "elbow_flex",
-      "wrist_flex",
-      "wrist_roll",
-      "gripper",
-    ],
-    []
-  );
-
-  // Initialize motor data
-  const initializeMotorData = useCallback(() => {
-    const initialData: LiveCalibrationData = {};
-    motorNames.forEach((name) => {
-      initialData[name] = {
-        current: 2047,
-        min: 2047,
-        max: 2047,
-        range: 0,
-      };
-    });
-    setMotorData(initialData);
-  }, [motorNames]);
-
-  // Release motor torque
-  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 - set your homing position");
-    } catch (error) {
-      console.warn("Failed to release motor torque:", error);
-      setStatus("⚠️ Could not release motor torque - try moving joints gently");
-    } finally {
-      setIsPreparing(false);
-    }
-  }, [robot]);
-
-  // Start calibration using new API
-  const handleContinueCalibration = useCallback(async () => {
-    setModalOpen(false);
-
-    if (!robot.port || !robot.robotType) {
-      return;
-    }
-
-    try {
-      setStatus("🤖 Starting calibration process...");
-      setIsCalibrating(true);
-      initializeMotorData();
-
-      // Use the unified config API for calibration
-      const process = await calibrate({
-        robot,
-        onLiveUpdate: (data) => {
-          setMotorData(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;
-        setCalibrationResult(result);
-
-        // App-level concern: Save results to storage
-        const serialNumber =
-          robot.serialNumber || robot.usbMetadata?.serialNumber || "unknown";
-        await saveCalibrationResults(
-          result,
-          robot.robotType,
-          robot.robotId || `${robot.robotType}_1`,
-          serialNumber
-        );
-
-        setStatus(
-          "✅ Calibration completed successfully! Configuration saved."
-        );
-      } 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
-        }`
-      );
-      setIsCalibrating(false);
-      setCalibrationProcess(null);
-    }
-  }, [robot, initializeMotorData]);
-
-  // Stop calibration recording
-  const handleStopRecording = useCallback(() => {
-    if (calibrationProcess) {
-      calibrationProcess.stop();
-    }
-  }, [calibrationProcess]);
-
-  // App-level concern: Save calibration results
-  const saveCalibrationResults = async (
-    results: WebCalibrationResults,
-    robotType: string,
-    robotId: string,
-    serialNumber: string
-  ) => {
-    try {
-      // Save to unified storage (app-level functionality)
-      const { saveCalibrationData } = await import("../lib/unified-storage.js");
-
-      const fullCalibrationData = {
-        ...results,
-        device_type: robotType,
-        device_id: robotId,
-        calibrated_at: new Date().toISOString(),
-        platform: "web",
-        api: "Web Serial API",
-      };
-
-      const metadata = {
-        timestamp: new Date().toISOString(),
-        readCount: Object.keys(motorData).length > 0 ? 100 : 0, // Estimate
-      };
-
-      saveCalibrationData(serialNumber, fullCalibrationData, metadata);
-    } catch (error) {
-      console.warn("Failed to save calibration results:", error);
-    }
-  };
-
-  // App-level concern: JSON export functionality
-  const downloadConfigJSON = useCallback(() => {
-    if (!calibrationResult) return;
-
-    const jsonString = JSON.stringify(calibrationResult, null, 2);
-    const blob = new Blob([jsonString], { type: "application/json" });
-    const url = URL.createObjectURL(blob);
-
-    const link = document.createElement("a");
-    link.href = url;
-    link.download = `${robot.robotId || robot.robotType}_calibration.json`;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  }, [calibrationResult, robot.robotId, robot.robotType]);
-
-  return (
-    <div className="space-y-4">
-      {/* Calibration Status Card */}
-      <Card>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <div>
-              <CardTitle className="text-lg">
-                🛠️ Calibrating: {robot.robotId}
-              </CardTitle>
-              <CardDescription>
-                {robot.robotType?.replace("_", " ")} • {robot.name}
-              </CardDescription>
-            </div>
-            <Badge
-              variant={
-                isCalibrating
-                  ? "default"
-                  : calibrationResult
-                  ? "default"
-                  : "outline"
-              }
-            >
-              {isCalibrating
-                ? "Recording"
-                : calibrationResult
-                ? "Complete"
-                : "Ready"}
-            </Badge>
-          </div>
-        </CardHeader>
-        <CardContent>
-          <div className="space-y-4">
-            <div className="p-3 bg-blue-50 rounded-lg">
-              <p className="text-sm font-medium text-blue-900">Status:</p>
-              <p className="text-sm text-blue-800">{status}</p>
-              {isCalibrating && (
-                <p className="text-xs text-blue-600 mt-1">
-                  Move joints through full range | Press "Finish Recording" or
-                  Enter key when done
-                </p>
-              )}
-            </div>
-
-            <div className="flex gap-2">
-              {!isCalibrating && !calibrationResult && (
-                <Button
-                  onClick={async () => {
-                    // ✅ Release motor torque FIRST - so user can move joints immediately
-                    await releaseMotorTorque();
-                    // THEN open modal - user can now follow instructions right away
-                    setModalOpen(true);
-                  }}
-                  disabled={isPreparing}
-                >
-                  {isPreparing ? "Preparing..." : "Start Calibration"}
-                </Button>
-              )}
-
-              {isCalibrating && calibrationProcess && (
-                <Button onClick={handleStopRecording} variant="default">
-                  Finish Recording
-                </Button>
-              )}
-
-              {calibrationResult && (
-                <>
-                  <Button onClick={downloadConfigJSON} variant="outline">
-                    Download Config JSON
-                  </Button>
-                  <Button onClick={onFinish}>Done</Button>
-                </>
-              )}
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Configuration JSON Display */}
-      {calibrationResult && (
-        <Card>
-          <CardHeader>
-            <CardTitle className="text-lg">
-              🎯 Calibration Configuration
-            </CardTitle>
-            <CardDescription>
-              Copy this JSON or download it for your robot setup
-            </CardDescription>
-          </CardHeader>
-          <CardContent>
-            <div className="space-y-3">
-              <pre className="bg-gray-100 p-4 rounded-lg text-sm overflow-x-auto border">
-                <code>{JSON.stringify(calibrationResult, null, 2)}</code>
-              </pre>
-              <div className="flex gap-2">
-                <Button onClick={downloadConfigJSON} variant="outline">
-                  📄 Download JSON File
-                </Button>
-                <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(
-                      JSON.stringify(calibrationResult, null, 2)
-                    );
-                  }}
-                  variant="outline"
-                >
-                  📋 Copy to Clipboard
-                </Button>
-              </div>
-            </div>
-          </CardContent>
-        </Card>
-      )}
-
-      {/* Live Position Recording Table */}
-      <Card>
-        <CardHeader>
-          <CardTitle className="text-lg">Live Position Recording</CardTitle>
-          <CardDescription>
-            Real-time motor position feedback during calibration
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="overflow-hidden rounded-lg border">
-            <table className="w-full font-mono text-sm">
-              <thead className="bg-gray-50">
-                <tr>
-                  <th className="px-4 py-2 text-left font-medium text-gray-900">
-                    Motor Name
-                  </th>
-                  <th className="px-4 py-2 text-right font-medium text-gray-900">
-                    Current
-                  </th>
-                  <th className="px-4 py-2 text-right font-medium text-gray-900">
-                    Min
-                  </th>
-                  <th className="px-4 py-2 text-right font-medium text-gray-900">
-                    Max
-                  </th>
-                  <th className="px-4 py-2 text-right font-medium text-gray-900">
-                    Range
-                  </th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-gray-200">
-                {motorNames.map((motorName) => {
-                  const motor = motorData[motorName] || {
-                    current: 2047,
-                    min: 2047,
-                    max: 2047,
-                    range: 0,
-                  };
-
-                  return (
-                    <tr key={motorName} className="hover:bg-gray-50">
-                      <td className="px-4 py-2 font-medium flex items-center gap-2">
-                        {motorName}
-                        {motor.range > 100 && (
-                          <span className="text-green-600 text-xs">✓</span>
-                        )}
-                      </td>
-                      <td className="px-4 py-2 text-right">{motor.current}</td>
-                      <td className="px-4 py-2 text-right">{motor.min}</td>
-                      <td className="px-4 py-2 text-right">{motor.max}</td>
-                      <td className="px-4 py-2 text-right font-medium">
-                        <span
-                          className={
-                            motor.range > 100
-                              ? "text-green-600"
-                              : "text-gray-500"
-                          }
-                        >
-                          {motor.range}
-                        </span>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-
-          {isCalibrating && (
-            <div className="mt-3 text-center text-sm text-gray-600">
-              Move joints through their full range of motion...
-            </div>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Calibration Modal */}
-      <CalibrationModal
-        open={modalOpen}
-        onOpenChange={setModalOpen}
-        deviceType={robot.robotType || "robot"}
-        onContinue={handleContinueCalibration}
-      />
-    </div>
-  );
-}

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

@@ -1,65 +0,0 @@
-import { Component, type ErrorInfo, type ReactNode } from "react";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Button } from "./ui/button";
-
-interface Props {
-  children: ReactNode;
-}
-
-interface State {
-  hasError: boolean;
-  error?: Error;
-}
-
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-    this.state = { hasError: false };
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-    console.error("ErrorBoundary caught an error:", error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div className="min-h-screen flex items-center justify-center p-8">
-          <div className="max-w-md w-full">
-            <Alert variant="destructive">
-              <AlertTitle>Something went wrong</AlertTitle>
-              <AlertDescription>
-                The application encountered an error. Please try refreshing the
-                page or contact support if the problem persists.
-              </AlertDescription>
-            </Alert>
-            <div className="mt-4 flex gap-2">
-              <Button onClick={() => window.location.reload()}>
-                Refresh Page
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() =>
-                  this.setState({ hasError: false, error: undefined })
-                }
-              >
-                Try Again
-              </Button>
-            </div>
-            {process.env.NODE_ENV === "development" && this.state.error && (
-              <div className="mt-4 p-4 bg-gray-100 rounded-md text-xs">
-                <pre>{this.state.error.stack}</pre>
-              </div>
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}

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

@@ -1,485 +0,0 @@
-import { useState, useEffect } from "react";
-import { Button } from "./ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { Alert, AlertDescription } from "./ui/alert";
-import { Badge } from "./ui/badge";
-import { findPort, isWebSerialSupported } from "@lerobot/web";
-import type { RobotConnection } from "@lerobot/web";
-
-interface PortManagerProps {
-  connectedRobots: RobotConnection[];
-  onConnectedRobotsChange: (robots: RobotConnection[]) => void;
-  onCalibrate?: (port: any) => void; // Let library handle port type
-  onTeleoperate?: (robot: RobotConnection) => void;
-}
-
-export function PortManager({
-  connectedRobots,
-  onConnectedRobotsChange,
-  onCalibrate,
-  onTeleoperate,
-}: PortManagerProps) {
-  const [isFindingPorts, setIsFindingPorts] = useState(false);
-  const [findPortsLog, setFindPortsLog] = useState<string[]>([]);
-  const [error, setError] = useState<string | null>(null);
-
-  // Load saved robots on mount by calling findPort with saved data
-  useEffect(() => {
-    loadSavedRobots();
-  }, []);
-
-  const loadSavedRobots = async () => {
-    try {
-      console.log("🔄 Loading saved robots from localStorage...");
-
-      // Load saved robot configs for auto-connect mode
-      const robotConfigs: any[] = [];
-      const { getUnifiedRobotData } = await import("../lib/unified-storage");
-
-      // 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);
-
-          if (robotData) {
-            console.log(
-              `✅ Found saved robot: ${robotData.device_info.robotId}`
-            );
-
-            // Create robot config for auto-connect mode
-            robotConfigs.push({
-              robotType: robotData.device_info.robotType,
-              robotId: robotData.device_info.robotId,
-              serialNumber: serialNumber,
-            });
-          }
-        }
-      }
-
-      if (robotConfigs.length > 0) {
-        console.log(
-          `🔄 Auto-connecting to ${robotConfigs.length} saved robots...`
-        );
-
-        // Use auto-connect mode - NO DIALOG will be shown!
-        const findPortProcess = await findPort({
-          robotConfigs,
-          onMessage: (message) => {
-            console.log(`Auto-connect: ${message}`);
-          },
-        });
-
-        const reconnectedRobots = await findPortProcess.result;
-        console.log(
-          `✅ Auto-connected to ${
-            reconnectedRobots.filter((r) => r.isConnected).length
-          }/${robotConfigs.length} saved robots`
-        );
-
-        onConnectedRobotsChange(reconnectedRobots);
-      } else {
-        console.log("No saved robots found in localStorage");
-      }
-    } catch (error) {
-      console.error("Failed to load saved robots:", error);
-    }
-  };
-
-  const handleFindPorts = async () => {
-    if (!isWebSerialSupported()) {
-      setError("Web Serial API is not supported in this browser");
-      return;
-    }
-
-    try {
-      setIsFindingPorts(true);
-      setFindPortsLog([]);
-      setError(null);
-
-      // Use clean library API - library handles everything!
-      const findPortProcess = await findPort({
-        onMessage: (message) => {
-          setFindPortsLog((prev) => [...prev, message]);
-        },
-      });
-
-      const robotConnections = await findPortProcess.result;
-
-      // Add new robots to the list (avoid duplicates)
-      const newRobots = robotConnections.filter(
-        (newRobot) =>
-          !connectedRobots.some(
-            (existing) => existing.serialNumber === newRobot.serialNumber
-          )
-      );
-
-      onConnectedRobotsChange([...connectedRobots, ...newRobots]);
-      setFindPortsLog((prev) => [
-        ...prev,
-        `✅ Found ${newRobots.length} new robots`,
-      ]);
-    } catch (error) {
-      if (
-        error instanceof Error &&
-        (error.message.includes("cancelled") ||
-          error.name === "NotAllowedError")
-      ) {
-        console.log("Port discovery cancelled by user");
-        return;
-      }
-      setError(error instanceof Error ? error.message : "Failed to find ports");
-    } finally {
-      setIsFindingPorts(false);
-    }
-  };
-
-  const handleDisconnect = (index: number) => {
-    const updatedRobots = connectedRobots.filter((_, i) => i !== index);
-    onConnectedRobotsChange(updatedRobots);
-  };
-
-  const handleCalibrate = (robot: RobotConnection) => {
-    if (!robot.robotType || !robot.robotId) {
-      setError("Please configure robot type and ID first");
-      return;
-    }
-    if (onCalibrate) {
-      onCalibrate(robot.port);
-    }
-  };
-
-  const handleTeleoperate = (robot: RobotConnection) => {
-    if (!robot.robotType || !robot.robotId) {
-      setError("Please configure robot type and ID first");
-      return;
-    }
-
-    if (!robot.isConnected || !robot.port) {
-      setError(
-        "Robot is not connected. Please use 'Find & Connect Robots' first."
-      );
-      return;
-    }
-
-    // Robot is connected, proceed with teleoperation
-    if (onTeleoperate) {
-      onTeleoperate(robot);
-    }
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>🔌 Robot Connection Manager</CardTitle>
-        <CardDescription>
-          Find and connect to your robot devices
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <div className="space-y-6">
-          {/* Error Display */}
-          {error && (
-            <Alert variant="destructive">
-              <AlertDescription>{error}</AlertDescription>
-            </Alert>
-          )}
-
-          {/* 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 max-h-32 overflow-y-auto">
-              {findPortsLog.map((log, index) => (
-                <div key={index} className="text-gray-700">
-                  {log}
-                </div>
-              ))}
-            </div>
-          )}
-
-          {/* Connected Robots */}
-          <div>
-            <h4 className="font-semibold mb-3">
-              Connected Robots ({connectedRobots.length})
-            </h4>
-
-            {connectedRobots.length === 0 ? (
-              <div className="text-center py-8 text-gray-500">
-                <div className="text-2xl mb-2">🤖</div>
-                <p>No robots found</p>
-                <p className="text-xs">
-                  Click "Find & Connect Robots" to discover devices
-                </p>
-              </div>
-            ) : (
-              <div className="space-y-4">
-                {connectedRobots.map((robot, index) => (
-                  <RobotCard
-                    key={robot.serialNumber || index}
-                    robot={robot}
-                    onDisconnect={() => handleDisconnect(index)}
-                    onCalibrate={() => handleCalibrate(robot)}
-                    onTeleoperate={() => handleTeleoperate(robot)}
-                  />
-                ))}
-              </div>
-            )}
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-interface RobotCardProps {
-  robot: RobotConnection;
-  onDisconnect: () => void;
-  onCalibrate: () => void;
-  onTeleoperate: () => void;
-}
-
-function RobotCard({
-  robot,
-  onDisconnect,
-  onCalibrate,
-  onTeleoperate,
-}: RobotCardProps) {
-  const [calibrationStatus, setCalibrationStatus] = useState<{
-    timestamp: string;
-    readCount: number;
-  } | null>(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const [editRobotType, setEditRobotType] = useState<
-    "so100_follower" | "so100_leader"
-  >(robot.robotType || "so100_follower");
-  const [editRobotId, setEditRobotId] = useState(robot.robotId || "");
-
-  const isConfigured = robot.robotType && robot.robotId;
-
-  // Check calibration status using unified storage
-  useEffect(() => {
-    const checkCalibrationStatus = async () => {
-      if (!robot.serialNumber) return;
-
-      try {
-        const { getCalibrationStatus } = await import("../lib/unified-storage");
-        const status = getCalibrationStatus(robot.serialNumber);
-        setCalibrationStatus(status);
-      } catch (error) {
-        console.warn("Failed to check calibration status:", error);
-      }
-    };
-
-    checkCalibrationStatus();
-  }, [robot.serialNumber]);
-
-  const handleSaveConfig = async () => {
-    if (!editRobotId.trim() || !robot.serialNumber) return;
-
-    try {
-      const { saveRobotConfig } = await import("../lib/unified-storage");
-      saveRobotConfig(
-        robot.serialNumber,
-        editRobotType,
-        editRobotId.trim(),
-        robot.usbMetadata
-      );
-
-      // Update the robot object (this should trigger a re-render)
-      robot.robotType = editRobotType;
-      robot.robotId = editRobotId.trim();
-
-      setIsEditing(false);
-      console.log("✅ Robot configuration saved");
-    } catch (error) {
-      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 */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-2">
-          <div className="flex flex-col">
-            <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>
-          <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 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">{robot.robotId}</div>
-              <div className="text-xs text-gray-600">
-                {robot.robotType?.replace("_", " ")}
-              </div>
-            </div>
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setIsEditing(true)}
-          >
-            Edit
-          </Button>
-        </div>
-      )}
-
-      {/* 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
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setIsEditing(true)}
-          >
-            Configure
-          </Button>
-        </div>
-      )}
-
-      {/* Robot Configuration Form (when editing) */}
-      {isEditing && (
-        <div className="space-y-3 p-3 bg-gray-50 rounded-lg">
-          <div className="grid grid-cols-2 gap-3">
-            <div>
-              <label className="text-sm font-medium block mb-1">
-                Robot Type
-              </label>
-              <select
-                value={editRobotType}
-                onChange={(e) =>
-                  setEditRobotType(
-                    e.target.value as "so100_follower" | "so100_leader"
-                  )
-                }
-                className="w-full px-2 py-1 border rounded text-sm"
-              >
-                <option value="so100_follower">SO-100 Follower</option>
-                <option value="so100_leader">SO-100 Leader</option>
-              </select>
-            </div>
-            <div>
-              <label className="text-sm font-medium block mb-1">Robot ID</label>
-              <input
-                type="text"
-                value={editRobotId}
-                onChange={(e) => setEditRobotId(e.target.value)}
-                placeholder="e.g., my_robot"
-                className="w-full px-2 py-1 border rounded text-sm"
-              />
-            </div>
-          </div>
-
-          <div className="flex gap-2">
-            <Button
-              size="sm"
-              onClick={handleSaveConfig}
-              disabled={!editRobotId.trim()}
-            >
-              Save
-            </Button>
-            <Button size="sm" variant="outline" onClick={handleCancelEdit}>
-              Cancel
-            </Button>
-          </div>
-        </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

@@ -1,587 +0,0 @@
-import { useState, useEffect, useRef, useCallback } from "react";
-import { Button } from "./ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import { Badge } from "./ui/badge";
-import { Alert, AlertDescription } from "./ui/alert";
-import {
-  teleoperate,
-  type TeleoperationProcess,
-  type TeleoperationState,
-  type TeleoperateConfig,
-} from "@lerobot/web";
-import { getUnifiedRobotData } from "../lib/unified-storage";
-import type { RobotConnection } from "@lerobot/web";
-import { SO100_KEYBOARD_CONTROLS } from "@lerobot/web";
-
-interface TeleoperationPanelProps {
-  robot: RobotConnection;
-  onClose: () => void;
-}
-
-export function TeleoperationPanel({
-  robot,
-  onClose,
-}: TeleoperationPanelProps) {
-  const [teleoperationState, setTeleoperationState] =
-    useState<TeleoperationState>({
-      isActive: false,
-      motorConfigs: [],
-      lastUpdate: 0,
-      keyStates: {},
-    });
-  const [error, setError] = useState<string | null>(null);
-  const [, setIsInitialized] = useState(false);
-
-  // Separate refs for keyboard and direct teleoperators
-  const keyboardProcessRef = useRef<TeleoperationProcess | null>(null);
-  const directProcessRef = useRef<TeleoperationProcess | null>(null);
-
-  // Initialize both teleoperation processes
-  useEffect(() => {
-    const initializeTeleoperation = async () => {
-      if (!robot || !robot.robotType) {
-        setError("No robot configuration available");
-        return;
-      }
-
-      try {
-        // Load calibration data from demo storage (app concern)
-        let calibrationData;
-        if (robot.serialNumber) {
-          const data = getUnifiedRobotData(robot.serialNumber);
-          calibrationData = data?.calibration;
-          if (calibrationData) {
-            console.log("✅ Loaded calibration data for", robot.serialNumber);
-          }
-        }
-
-        // Create keyboard teleoperation process
-        const keyboardConfig: TeleoperateConfig = {
-          robot: robot,
-          teleop: {
-            type: "keyboard",
-          },
-          calibrationData,
-          onStateUpdate: (state: TeleoperationState) => {
-            setTeleoperationState(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;
-        setTeleoperationState(keyboardProcess.getState());
-        setIsInitialized(true);
-        setError(null);
-
-        console.log("✅ Initialized both keyboard and direct teleoperators");
-      } catch (error) {
-        const errorMessage =
-          error instanceof Error
-            ? error.message
-            : "Failed to initialize teleoperation";
-        setError(errorMessage);
-        console.error("❌ Failed to initialize teleoperation:", error);
-      }
-    };
-
-    initializeTeleoperation();
-
-    return () => {
-      // Cleanup on unmount
-      const cleanup = async () => {
-        try {
-          if (keyboardProcessRef.current) {
-            await keyboardProcessRef.current.disconnect();
-            keyboardProcessRef.current = null;
-          }
-          if (directProcessRef.current) {
-            await directProcessRef.current.disconnect();
-            directProcessRef.current = null;
-          }
-          console.log("🧹 Teleoperation cleanup completed");
-        } catch (error) {
-          console.warn("Error during teleoperation cleanup:", error);
-        }
-      };
-      cleanup();
-    };
-  }, [robot]);
-
-  // Keyboard event handlers
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent) => {
-      if (!teleoperationState.isActive || !keyboardProcessRef.current) return;
-
-      const key = event.key;
-      event.preventDefault();
-      keyboardProcessRef.current.updateKeyState(key, true);
-    },
-    [teleoperationState.isActive]
-  );
-
-  const handleKeyUp = useCallback(
-    (event: KeyboardEvent) => {
-      if (!teleoperationState.isActive || !keyboardProcessRef.current) return;
-
-      const key = event.key;
-      event.preventDefault();
-      keyboardProcessRef.current.updateKeyState(key, false);
-    },
-    [teleoperationState.isActive]
-  );
-
-  // Register keyboard events
-  useEffect(() => {
-    if (teleoperationState.isActive) {
-      window.addEventListener("keydown", handleKeyDown);
-      window.addEventListener("keyup", handleKeyUp);
-
-      return () => {
-        window.removeEventListener("keydown", handleKeyDown);
-        window.removeEventListener("keyup", handleKeyUp);
-      };
-    }
-  }, [teleoperationState.isActive, handleKeyDown, handleKeyUp]);
-
-  const handleStart = () => {
-    if (!keyboardProcessRef.current || !directProcessRef.current) {
-      setError("Teleoperation not initialized");
-      return;
-    }
-
-    try {
-      keyboardProcessRef.current.start();
-      directProcessRef.current.start();
-      console.log("🎮 Both keyboard and direct teleoperation started");
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error
-          ? error.message
-          : "Failed to start teleoperation";
-      setError(errorMessage);
-    }
-  };
-
-  const handleStop = async () => {
-    try {
-      if (keyboardProcessRef.current) {
-        keyboardProcessRef.current.stop();
-      }
-      if (directProcessRef.current) {
-        directProcessRef.current.stop();
-      }
-      console.log("🛑 Both keyboard and direct teleoperation stopped");
-    } catch (error) {
-      console.warn("Error during teleoperation stop:", error);
-    }
-  };
-
-  const handleClose = async () => {
-    try {
-      if (keyboardProcessRef.current) {
-        keyboardProcessRef.current.stop();
-        await keyboardProcessRef.current.disconnect();
-      }
-      if (directProcessRef.current) {
-        directProcessRef.current.stop();
-        await directProcessRef.current.disconnect();
-      }
-      console.log("🔌 Properly disconnected from robot");
-    } catch (error) {
-      console.warn("Error during teleoperation cleanup:", error);
-    }
-    onClose();
-  };
-
-  const simulateKeyPress = (key: string) => {
-    if (!keyboardProcessRef.current) return;
-    keyboardProcessRef.current.updateKeyState(key, true);
-  };
-
-  const simulateKeyRelease = (key: string) => {
-    if (!keyboardProcessRef.current) return;
-    keyboardProcessRef.current.updateKeyState(key, false);
-  };
-
-  // Unified motor control: Both sliders AND keyboard use the same teleoperator
-  // This ensures the UI always shows the correct motor positions
-  const moveMotorToPosition = async (motorIndex: number, position: number) => {
-    if (!keyboardProcessRef.current) return;
-
-    try {
-      const motorName = teleoperationState.motorConfigs[motorIndex]?.name;
-      if (motorName) {
-        const keyboardTeleoperator = keyboardProcessRef.current
-          .teleoperator as any;
-        await keyboardTeleoperator.moveMotor(motorName, position);
-      }
-    } catch (error) {
-      console.warn(
-        `Failed to move motor ${motorIndex + 1} to position ${position}:`,
-        error
-      );
-    }
-  };
-
-  const isConnected = robot?.isConnected || false;
-  const isActive = teleoperationState.isActive;
-  const motorConfigs = teleoperationState.motorConfigs;
-  const keyStates = teleoperationState.keyStates;
-
-  // Virtual keyboard component
-  const VirtualKeyboard = () => {
-    const isKeyPressed = (key: string) => {
-      return keyStates?.[key]?.pressed || false;
-    };
-
-    const KeyButton = ({
-      keyCode,
-      children,
-      className = "",
-      size = "default" as "default" | "sm" | "lg" | "icon",
-    }: {
-      keyCode: string;
-      children: React.ReactNode;
-      className?: string;
-      size?: "default" | "sm" | "lg" | "icon";
-    }) => {
-      const control =
-        SO100_KEYBOARD_CONTROLS[
-          keyCode as keyof typeof SO100_KEYBOARD_CONTROLS
-        ];
-      const pressed = isKeyPressed(keyCode);
-
-      const handleMouseDown = (e: React.MouseEvent) => {
-        e.preventDefault();
-        if (!isActive) return;
-        simulateKeyPress(keyCode);
-      };
-
-      const handleMouseUp = (e: React.MouseEvent) => {
-        e.preventDefault();
-        if (!isActive) return;
-        simulateKeyRelease(keyCode);
-      };
-
-      return (
-        <Button
-          variant={pressed ? "default" : "outline"}
-          size={size}
-          className={`
-            ${className}
-            ${
-              pressed
-                ? "bg-blue-600 text-white shadow-inner"
-                : "hover:bg-gray-100"
-            }
-            transition-all duration-75 font-mono text-xs
-            ${!isActive ? "opacity-50 cursor-not-allowed" : ""}
-          `}
-          disabled={!isActive}
-          onMouseDown={handleMouseDown}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-          title={control?.description || keyCode}
-        >
-          {children}
-        </Button>
-      );
-    };
-
-    return (
-      <div className="space-y-4">
-        {/* Arrow Keys */}
-        <div className="text-center">
-          <h4 className="text-xs font-semibold mb-2 text-gray-600">Shoulder</h4>
-          <div className="flex flex-col items-center gap-1">
-            <KeyButton keyCode="ArrowUp" size="sm">
-              ↑
-            </KeyButton>
-            <div className="flex gap-1">
-              <KeyButton keyCode="ArrowLeft" size="sm">
-                ←
-              </KeyButton>
-              <KeyButton keyCode="ArrowDown" size="sm">
-                ↓
-              </KeyButton>
-              <KeyButton keyCode="ArrowRight" size="sm">
-                →
-              </KeyButton>
-            </div>
-          </div>
-        </div>
-
-        {/* WASD Keys */}
-        <div className="text-center">
-          <h4 className="text-xs font-semibold mb-2 text-gray-600">
-            Elbow/Wrist
-          </h4>
-          <div className="flex flex-col items-center gap-1">
-            <KeyButton keyCode="w" size="sm">
-              W
-            </KeyButton>
-            <div className="flex gap-1">
-              <KeyButton keyCode="a" size="sm">
-                A
-              </KeyButton>
-              <KeyButton keyCode="s" size="sm">
-                S
-              </KeyButton>
-              <KeyButton keyCode="d" size="sm">
-                D
-              </KeyButton>
-            </div>
-          </div>
-        </div>
-
-        {/* Q/E and Gripper */}
-        <div className="flex justify-center gap-2">
-          <div className="text-center">
-            <h4 className="text-xs font-semibold mb-2 text-gray-600">Roll</h4>
-            <div className="flex gap-1">
-              <KeyButton keyCode="q" size="sm">
-                Q
-              </KeyButton>
-              <KeyButton keyCode="e" size="sm">
-                E
-              </KeyButton>
-            </div>
-          </div>
-          <div className="text-center">
-            <h4 className="text-xs font-semibold mb-2 text-gray-600">
-              Gripper
-            </h4>
-            <div className="flex gap-1">
-              <KeyButton keyCode="o" size="sm">
-                O
-              </KeyButton>
-              <KeyButton keyCode="c" size="sm">
-                C
-              </KeyButton>
-            </div>
-          </div>
-        </div>
-
-        {/* Emergency Stop */}
-        <div className="text-center border-t pt-2">
-          <KeyButton
-            keyCode="Escape"
-            className="bg-red-100 border-red-300 hover:bg-red-200 text-red-800 text-xs"
-          >
-            ESC
-          </KeyButton>
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="container mx-auto px-6 py-8">
-        {/* Header */}
-        <div className="flex justify-between items-center mb-6">
-          <div>
-            <h1 className="text-3xl font-bold text-gray-900">
-              🎮 Robot Teleoperation
-            </h1>
-            <p className="text-gray-600">
-              {robot.robotId || robot.name} - {robot.serialNumber}
-            </p>
-          </div>
-          <Button variant="outline" onClick={handleClose}>
-            ← Back to Dashboard
-          </Button>
-        </div>
-
-        {/* Error Alert */}
-        {error && (
-          <Alert variant="destructive" className="mb-6">
-            <AlertDescription>{error}</AlertDescription>
-          </Alert>
-        )}
-
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
-          {/* Status Panel */}
-          <Card>
-            <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                Status
-                <Badge variant={isConnected ? "default" : "destructive"}>
-                  {isConnected ? "Connected" : "Disconnected"}
-                </Badge>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-4">
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-600">Teleoperation</span>
-                <Badge variant={isActive ? "default" : "secondary"}>
-                  {isActive ? "Active" : "Stopped"}
-                </Badge>
-              </div>
-
-              <div className="flex items-center justify-between">
-                <span className="text-sm text-gray-600">Active Keys</span>
-                <Badge variant="outline">
-                  {
-                    Object.values(keyStates || {}).filter(
-                      (state) => state.pressed
-                    ).length
-                  }
-                </Badge>
-              </div>
-
-              <div className="space-y-2">
-                {isActive ? (
-                  <Button
-                    onClick={handleStop}
-                    variant="destructive"
-                    className="w-full"
-                  >
-                    ⏹️ Stop Teleoperation
-                  </Button>
-                ) : (
-                  <Button
-                    onClick={handleStart}
-                    disabled={!isConnected}
-                    className="w-full"
-                  >
-                    ▶️ Start Teleoperation
-                  </Button>
-                )}
-              </div>
-            </CardContent>
-          </Card>
-
-          {/* Virtual Keyboard */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Virtual Keyboard</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <VirtualKeyboard />
-            </CardContent>
-          </Card>
-
-          {/* Motor Status */}
-          <Card>
-            <CardHeader>
-              <CardTitle>Motor Positions</CardTitle>
-            </CardHeader>
-            <CardContent className="space-y-3">
-              {motorConfigs.map((motor, index) => {
-                return (
-                  <div key={motor.name} className="space-y-1">
-                    <div className="flex justify-between items-center">
-                      <span className="text-sm font-medium">
-                        {motor.name.replace("_", " ")}
-                      </span>
-                      <span className="text-xs text-gray-500">
-                        {motor.currentPosition}
-                      </span>
-                    </div>
-                    <input
-                      type="range"
-                      min={motor.minPosition}
-                      max={motor.maxPosition}
-                      value={motor.currentPosition}
-                      disabled={!isActive}
-                      className={`w-full h-2 rounded-lg appearance-none cursor-pointer bg-gray-200 slider-thumb ${
-                        !isActive ? "opacity-50 cursor-not-allowed" : ""
-                      }`}
-                      style={{
-                        background: isActive
-                          ? `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${
-                              ((motor.currentPosition - motor.minPosition) /
-                                (motor.maxPosition - motor.minPosition)) *
-                              100
-                            }%, #e5e7eb ${
-                              ((motor.currentPosition - motor.minPosition) /
-                                (motor.maxPosition - motor.minPosition)) *
-                              100
-                            }%, #e5e7eb 100%)`
-                          : "#e5e7eb",
-                      }}
-                      onChange={async (e) => {
-                        if (!isActive) return;
-                        const newPosition = parseInt(e.target.value);
-                        try {
-                          await moveMotorToPosition(index, newPosition);
-                        } catch (error) {
-                          console.warn(
-                            "Failed to move motor via slider:",
-                            error
-                          );
-                        }
-                      }}
-                    />
-                    <div className="flex justify-between text-xs text-gray-400">
-                      <span>{motor.minPosition}</span>
-                      <span>{motor.maxPosition}</span>
-                    </div>
-                  </div>
-                );
-              })}
-            </CardContent>
-          </Card>
-        </div>
-
-        {/* Help Card */}
-        <Card className="mt-6">
-          <CardHeader>
-            <CardTitle>Control Instructions</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
-              <div>
-                <h4 className="font-semibold mb-2">Arrow Keys</h4>
-                <ul className="space-y-1 text-gray-600">
-                  <li>↑ ↓ Shoulder lift</li>
-                  <li>← → Shoulder pan</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-2">WASD Keys</h4>
-                <ul className="space-y-1 text-gray-600">
-                  <li>W S Elbow flex</li>
-                  <li>A D Wrist flex</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-2">Other Keys</h4>
-                <ul className="space-y-1 text-gray-600">
-                  <li>Q E Wrist roll</li>
-                  <li>O Open gripper</li>
-                  <li>C Close gripper</li>
-                </ul>
-              </div>
-              <div>
-                <h4 className="font-semibold mb-2 text-red-700">Emergency</h4>
-                <ul className="space-y-1 text-red-600">
-                  <li>ESC Emergency stop</li>
-                </ul>
-              </div>
-            </div>
-            <div className="mt-4 p-3 bg-blue-50 rounded-lg">
-              <p className="text-sm text-blue-800">
-                💡 <strong>Pro tip:</strong> Use your physical keyboard for
-                faster control, or click the virtual keys below. Hold keys down
-                for continuous movement.
-              </p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    </div>
-  );
-}

examples/robot-control-web/components/ui/alert.tsx

@@ -1,58 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-));
-Alert.displayName = "Alert";
-
-const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-AlertTitle.displayName = "AlertTitle";
-
-const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
-));
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertTitle, AlertDescription };

examples/robot-control-web/components/ui/badge.tsx

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
-}
-
-export { Badge, badgeVariants };

examples/robot-control-web/components/ui/button.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

examples/robot-control-web/components/ui/card.tsx

@@ -1,85 +0,0 @@
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
-      className
-    )}
-    {...props}
-  />
-));
-Card.displayName = "Card";
-
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-));
-CardHeader.displayName = "CardHeader";
-
-const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
->(({ className, ...props }, ref) => (
-  <h3
-    ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-));
-CardTitle.displayName = "CardTitle";
-
-const CardDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => (
-  <p
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-CardDescription.displayName = "CardDescription";
-
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-));
-CardContent.displayName = "CardContent";
-
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-));
-CardFooter.displayName = "CardFooter";
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};

examples/robot-control-web/components/ui/dialog.tsx

@@ -1,120 +0,0 @@
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-const Dialog = DialogPrimitive.Root;
-
-const DialogTrigger = DialogPrimitive.Trigger;
-
-const DialogPortal = DialogPrimitive.Portal;
-
-const DialogClose = DialogPrimitive.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-};

examples/robot-control-web/components/ui/progress.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
-
-import { cn } from "../../lib/utils";
-
-const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
->(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative h-4 w-full overflow-hidden rounded-full bg-secondary",
-      className
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 bg-primary transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
-
-export { Progress };

examples/robot-control-web/index.css

@@ -1,12 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

examples/robot-control-web/lib/unified-storage.ts

@@ -1,325 +0,0 @@
-// Unified storage system for robot data
-// Consolidates robot config, calibration data, and metadata under one key per device
-
-export interface UnifiedRobotData {
-  device_info: {
-    serialNumber: string;
-    robotType: "so100_follower" | "so100_leader";
-    robotId: string;
-    usbMetadata?: any;
-    lastUpdated: string;
-  };
-  calibration?: {
-    // Motor calibration data (from lerobot_calibration_* keys)
-    shoulder_pan?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-    shoulder_lift?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-    elbow_flex?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-    wrist_flex?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-    wrist_roll?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-    gripper?: {
-      id: number;
-      drive_mode: number;
-      homing_offset: number;
-      range_min: number;
-      range_max: number;
-    };
-
-    // Calibration metadata (from lerobot-calibration-* keys)
-    metadata: {
-      timestamp: string;
-      readCount: number;
-      platform: string;
-      api: string;
-      device_type: string;
-      device_id: string;
-      calibrated_at: string;
-    };
-  };
-}
-
-/**
- * Get unified storage key for a robot by serial number
- */
-export function getUnifiedKey(serialNumber: string): string {
-  return `lerobotjs-${serialNumber}`;
-}
-
-/**
- * Migrate data from old storage keys to unified format
- * Safely combines data from three sources:
- * 1. lerobot-robot-{serialNumber} - robot config
- * 2. lerobot-calibration-{serialNumber} - calibration metadata
- * 3. lerobot_calibration_{robotType}_{robotId} - actual calibration data
- */
-export function migrateToUnifiedStorage(
-  serialNumber: string
-): UnifiedRobotData | null {
-  try {
-    const unifiedKey = getUnifiedKey(serialNumber);
-
-    // Check if already migrated
-    const existing = localStorage.getItem(unifiedKey);
-    if (existing) {
-      console.log(`✅ Data already unified for ${serialNumber}`);
-      return JSON.parse(existing);
-    }
-
-    console.log(`🔄 Migrating data for serial number: ${serialNumber}`);
-
-    // 1. Get robot configuration
-    const robotConfigKey = `lerobot-robot-${serialNumber}`;
-    const robotConfigRaw = localStorage.getItem(robotConfigKey);
-
-    if (!robotConfigRaw) {
-      return null;
-    }
-
-    const robotConfig = JSON.parse(robotConfigRaw);
-    console.log(`📋 Found robot config:`, robotConfig);
-
-    // 2. Get calibration metadata
-    const calibrationMetaKey = `lerobot-calibration-${serialNumber}`;
-    const calibrationMetaRaw = localStorage.getItem(calibrationMetaKey);
-    const calibrationMeta = calibrationMetaRaw
-      ? JSON.parse(calibrationMetaRaw)
-      : null;
-    console.log(`📊 Found calibration metadata:`, calibrationMeta);
-
-    // 3. Get actual calibration data (using robotType and robotId from config)
-    const calibrationDataKey = `lerobot_calibration_${robotConfig.robotType}_${robotConfig.robotId}`;
-    const calibrationDataRaw = localStorage.getItem(calibrationDataKey);
-    const calibrationData = calibrationDataRaw
-      ? JSON.parse(calibrationDataRaw)
-      : null;
-    console.log(`🔧 Found calibration data:`, calibrationData);
-
-    // 4. Build unified structure
-    const unifiedData: UnifiedRobotData = {
-      device_info: {
-        serialNumber: robotConfig.serialNumber || serialNumber,
-        robotType: robotConfig.robotType,
-        robotId: robotConfig.robotId,
-        lastUpdated: robotConfig.lastUpdated || new Date().toISOString(),
-      },
-    };
-
-    // Add calibration if available
-    if (calibrationData && calibrationMeta) {
-      const motors: any = {};
-
-      // Copy motor data (excluding metadata fields)
-      Object.keys(calibrationData).forEach((key) => {
-        if (
-          ![
-            "device_type",
-            "device_id",
-            "calibrated_at",
-            "platform",
-            "api",
-          ].includes(key)
-        ) {
-          motors[key] = calibrationData[key];
-        }
-      });
-
-      unifiedData.calibration = {
-        ...motors,
-        metadata: {
-          timestamp: calibrationMeta.timestamp || calibrationData.calibrated_at,
-          readCount: calibrationMeta.readCount || 0,
-          platform: calibrationData.platform || "web",
-          api: calibrationData.api || "Web Serial API",
-          device_type: calibrationData.device_type || robotConfig.robotType,
-          device_id: calibrationData.device_id || robotConfig.robotId,
-          calibrated_at:
-            calibrationData.calibrated_at || calibrationMeta.timestamp,
-        },
-      };
-    }
-
-    // 5. Save unified data
-    localStorage.setItem(unifiedKey, JSON.stringify(unifiedData));
-    console.log(`✅ Successfully unified data for ${serialNumber}`);
-    console.log(`📦 Unified data:`, unifiedData);
-
-    // 6. Clean up old keys (optional - keep for now for safety)
-    // localStorage.removeItem(robotConfigKey);
-    // localStorage.removeItem(calibrationMetaKey);
-    // localStorage.removeItem(calibrationDataKey);
-
-    return unifiedData;
-  } catch (error) {
-    console.error(`❌ Failed to migrate data for ${serialNumber}:`, error);
-    return null;
-  }
-}
-
-/**
- * Get unified robot data
- */
-export function getUnifiedRobotData(
-  serialNumber: string
-): UnifiedRobotData | null {
-  const unifiedKey = getUnifiedKey(serialNumber);
-
-  // Try to get existing unified data
-  const existing = localStorage.getItem(unifiedKey);
-  if (existing) {
-    try {
-      return JSON.parse(existing);
-    } catch (error) {
-      console.warn(`Failed to parse unified data for ${serialNumber}:`, error);
-    }
-  }
-
-  return null;
-}
-
-/**
- * Save robot configuration to unified storage
- */
-export function saveRobotConfig(
-  serialNumber: string,
-  robotType: "so100_follower" | "so100_leader",
-  robotId: string,
-  usbMetadata?: any
-): void {
-  const unifiedKey = getUnifiedKey(serialNumber);
-  const existing =
-    getUnifiedRobotData(serialNumber) || ({} as UnifiedRobotData);
-
-  existing.device_info = {
-    serialNumber,
-    robotType,
-    robotId,
-    usbMetadata,
-    lastUpdated: new Date().toISOString(),
-  };
-
-  localStorage.setItem(unifiedKey, JSON.stringify(existing));
-  console.log(`💾 Saved robot config for ${serialNumber}`);
-}
-
-/**
- * Save calibration data to unified storage
- */
-export function saveCalibrationData(
-  serialNumber: string,
-  calibrationData: any,
-  metadata: { timestamp: string; readCount: number }
-): void {
-  const unifiedKey = getUnifiedKey(serialNumber);
-  const existing =
-    getUnifiedRobotData(serialNumber) || ({} as UnifiedRobotData);
-
-  // Ensure device_info exists
-  if (!existing.device_info) {
-    console.warn(
-      `No device info found for ${serialNumber}, cannot save calibration`
-    );
-    return;
-  }
-
-  // Extract motor data (exclude metadata fields)
-  const motors: any = {};
-  Object.keys(calibrationData).forEach((key) => {
-    if (
-      ![
-        "device_type",
-        "device_id",
-        "calibrated_at",
-        "platform",
-        "api",
-      ].includes(key)
-    ) {
-      motors[key] = calibrationData[key];
-    }
-  });
-
-  existing.calibration = {
-    ...motors,
-    metadata: {
-      timestamp: metadata.timestamp,
-      readCount: metadata.readCount,
-      platform: calibrationData.platform || "web",
-      api: calibrationData.api || "Web Serial API",
-      device_type:
-        calibrationData.device_type || existing.device_info.robotType,
-      device_id: calibrationData.device_id || existing.device_info.robotId,
-      calibrated_at: calibrationData.calibrated_at || metadata.timestamp,
-    },
-  };
-
-  localStorage.setItem(unifiedKey, JSON.stringify(existing));
-  console.log(`🔧 Saved calibration data for ${serialNumber}`);
-}
-
-/**
- * Check if robot is calibrated
- */
-export function isRobotCalibrated(serialNumber: string): boolean {
-  const data = getUnifiedRobotData(serialNumber);
-  return !!data?.calibration?.metadata?.timestamp;
-}
-
-/**
- * Get calibration status for dashboard
- */
-export function getCalibrationStatus(
-  serialNumber: string
-): { timestamp: string; readCount: number } | null {
-  const data = getUnifiedRobotData(serialNumber);
-  if (data?.calibration?.metadata) {
-    return {
-      timestamp: data.calibration.metadata.timestamp,
-      readCount: data.calibration.metadata.readCount,
-    };
-  }
-  return null;
-}
-
-/**
- * Get robot configuration
- */
-export function getRobotConfig(
-  serialNumber: string
-): { robotType: string; robotId: string } | null {
-  const data = getUnifiedRobotData(serialNumber);
-  if (data?.device_info) {
-    return {
-      robotType: data.device_info.robotType,
-      robotId: data.device_info.robotId,
-    };
-  }
-  return null;
-}

examples/robot-control-web/lib/utils.ts

@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

examples/robot-control-web/main.tsx

@@ -1,5 +0,0 @@
-import ReactDOM from "react-dom/client";
-import { App } from "./App";
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

examples/robot-control-web/pages/Home.tsx

@@ -1,99 +0,0 @@
-import { useState } from "react";
-import { Button } from "../components/ui/button";
-import { Alert, AlertDescription } from "../components/ui/alert";
-import { PortManager } from "../components/PortManager";
-import { CalibrationPanel } from "../components/CalibrationPanel";
-import { TeleoperationPanel } from "../components/TeleoperationPanel";
-import { isWebSerialSupported } from "@lerobot/web";
-import type { RobotConnection } from "@lerobot/web";
-
-interface HomeProps {
-  connectedRobots: RobotConnection[];
-  onConnectedRobotsChange: (robots: RobotConnection[]) => void;
-}
-
-export function Home({ connectedRobots, onConnectedRobotsChange }: HomeProps) {
-  const [calibratingRobot, setCalibratingRobot] =
-    useState<RobotConnection | null>(null);
-  const [teleoperatingRobot, setTeleoperatingRobot] =
-    useState<RobotConnection | null>(null);
-  const isSupported = isWebSerialSupported();
-
-  const handleCalibrate = (port: SerialPort) => {
-    // Find the robot from connectedRobots
-    const robot = connectedRobots.find((r) => r.port === port);
-    if (robot) {
-      setCalibratingRobot(robot);
-    }
-  };
-
-  const handleTeleoperate = (robot: RobotConnection) => {
-    setTeleoperatingRobot(robot);
-  };
-
-  const handleFinishCalibration = () => {
-    setCalibratingRobot(null);
-  };
-
-  const handleFinishTeleoperation = () => {
-    setTeleoperatingRobot(null);
-  };
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
-      <div className="container mx-auto px-6 py-12">
-        {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-gray-900 mb-4">
-            🤖 LeRobot.js
-          </h1>
-          <p className="text-xl text-gray-600 mb-8">
-            Robotics for the web and node
-          </p>
-
-          {!isSupported && (
-            <Alert variant="destructive" className="max-w-2xl mx-auto mb-8">
-              <AlertDescription>
-                Web Serial API is not supported in this browser. Please use
-                Chrome, Edge, or another Chromium-based browser to use this
-                demo.
-              </AlertDescription>
-            </Alert>
-          )}
-        </div>
-
-        {/* Main Content */}
-        {calibratingRobot ? (
-          <div className="max-w-6xl mx-auto">
-            <div className="mb-4">
-              <Button
-                variant="outline"
-                onClick={() => setCalibratingRobot(null)}
-              >
-                ← Back to Dashboard
-              </Button>
-            </div>
-            <CalibrationPanel
-              robot={calibratingRobot}
-              onFinish={handleFinishCalibration}
-            />
-          </div>
-        ) : teleoperatingRobot ? (
-          <TeleoperationPanel
-            robot={teleoperatingRobot}
-            onClose={handleFinishTeleoperation}
-          />
-        ) : (
-          <div className="max-w-6xl mx-auto">
-            <PortManager
-              onCalibrate={handleCalibrate}
-              onTeleoperate={handleTeleoperate}
-              connectedRobots={connectedRobots}
-              onConnectedRobotsChange={onConnectedRobotsChange}
-            />
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}

index.html

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🤖 lerobot.js - React Demo</title>
-    <meta
-      name="description"
-      content="State-of-the-art AI for real-world robotics in JavaScript/TypeScript - Interactive React Demo"
-    />
-    <style>
-      :root {
-        --background: 0 0% 100%;
-        --foreground: 240 10% 3.9%;
-        --card: 0 0% 100%;
-        --card-foreground: 240 10% 3.9%;
-        --popover: 0 0% 100%;
-        --popover-foreground: 240 10% 3.9%;
-        --primary: 240 9% 17%;
-        --primary-foreground: 0 0% 98%;
-        --secondary: 240 4.8% 95.9%;
-        --secondary-foreground: 240 5.9% 10%;
-        --muted: 240 4.8% 95.9%;
-        --muted-foreground: 240 3.8% 46.1%;
-        --accent: 240 4.8% 95.9%;
-        --accent-foreground: 240 5.9% 10%;
-        --destructive: 0 84.2% 60.2%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 5.9% 90%;
-        --input: 240 5.9% 90%;
-        --ring: 240 10% 3.9%;
-        --chart-1: 12 76% 61%;
-        --chart-2: 173 58% 39%;
-        --chart-3: 197 37% 24%;
-        --chart-4: 43 74% 66%;
-        --chart-5: 27 87% 67%;
-        --radius: 0.5rem;
-      }
-
-      .dark {
-        --background: 240 10% 3.9%;
-        --foreground: 0 0% 98%;
-        --card: 240 10% 3.9%;
-        --card-foreground: 0 0% 98%;
-        --popover: 240 10% 3.9%;
-        --popover-foreground: 0 0% 98%;
-        --primary: 0 0% 98%;
-        --primary-foreground: 240 5.9% 10%;
-        --secondary: 240 3.7% 15.9%;
-        --secondary-foreground: 0 0% 98%;
-        --muted: 240 3.7% 15.9%;
-        --muted-foreground: 240 5% 64.9%;
-        --accent: 240 3.7% 15.9%;
-        --accent-foreground: 0 0% 98%;
-        --destructive: 0 62.8% 30.6%;
-        --destructive-foreground: 0 0% 98%;
-        --border: 240 3.7% 15.9%;
-        --input: 240 3.7% 15.9%;
-        --ring: 240 4.9% 83.9%;
-        --chart-1: 220 70% 50%;
-        --chart-2: 160 60% 45%;
-        --chart-3: 30 80% 55%;
-        --chart-4: 280 65% 60%;
-        --chart-5: 340 75% 55%;
-      }
-
-      * {
-        border-color: hsl(var(--border));
-      }
-
-      body {
-        background-color: hsl(var(--background));
-        color: hsl(var(--foreground));
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/examples/robot-control-web/main.tsx"></script>
-  </body>
-</html>

postcss.config.mjs

@@ -1,6 +0,0 @@
-import tailwindcss from "tailwindcss";
-import autoprefixer from "autoprefixer";
-
-export default {
-  plugins: [tailwindcss, autoprefixer],
-};

src/web_interface.css

@@ -1,238 +0,0 @@
-/* lerobot.js Web Interface Styles */
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #333;
-}
-
-.lerobot-app {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-  max-width: 800px;
-  width: 90%;
-  padding: 2rem;
-  margin: 2rem;
-}
-
-.lerobot-header {
-  text-align: center;
-  margin-bottom: 2rem;
-  padding-bottom: 1rem;
-  border-bottom: 1px solid #eee;
-}
-
-.lerobot-header h1 {
-  font-size: 2.5rem;
-  color: #2c3e50;
-  margin-bottom: 0.5rem;
-}
-
-.lerobot-header p {
-  color: #7f8c8d;
-  font-size: 1.1rem;
-}
-
-.lerobot-main {
-  display: grid;
-  gap: 2rem;
-}
-
-.tool-section {
-  background: #f8f9fa;
-  padding: 1.5rem;
-  border-radius: 8px;
-  border-left: 4px solid #3498db;
-}
-
-.tool-section h2 {
-  color: #2c3e50;
-  margin-bottom: 0.5rem;
-  font-size: 1.4rem;
-}
-
-.tool-section p {
-  color: #7f8c8d;
-  margin-bottom: 1rem;
-}
-
-.button-group {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-}
-
-.info-box {
-  background: #e8f4fd;
-  border: 1px solid #3498db;
-  border-radius: 6px;
-  padding: 12px 16px;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: #2c3e50;
-}
-
-.info-icon {
-  font-size: 1.1rem;
-  flex-shrink: 0;
-}
-
-.info-text {
-  font-size: 0.95rem;
-  line-height: 1.4;
-}
-
-.primary-btn,
-.secondary-btn {
-  border: none;
-  padding: 12px 24px;
-  border-radius: 6px;
-  font-size: 1rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.primary-btn {
-  background: linear-gradient(135deg, #3498db, #2980b9);
-  color: white;
-}
-
-.secondary-btn {
-  background: linear-gradient(135deg, #95a5a6, #7f8c8d);
-  color: white;
-}
-
-.primary-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(52, 152, 219, 0.3);
-}
-
-.secondary-btn:hover:not(:disabled) {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 12px rgba(149, 165, 166, 0.3);
-}
-
-.primary-btn:disabled,
-.secondary-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-  transform: none;
-}
-
-.results-area {
-  background: #2c3e50;
-  color: #ecf0f1;
-  padding: 1rem;
-  border-radius: 6px;
-  font-family: "Fira Code", "Courier New", monospace;
-  font-size: 0.9rem;
-  line-height: 1.4;
-  max-height: 300px;
-  overflow-y: auto;
-  min-height: 100px;
-}
-
-.results-area:empty::before {
-  content: "Results will appear here...";
-  color: #7f8c8d;
-  font-style: italic;
-}
-
-.results-area .log {
-  margin: 0.25rem 0;
-  color: #bdc3c7;
-}
-
-.results-area .status {
-  margin: 0.25rem 0;
-  color: #3498db;
-  font-weight: 600;
-}
-
-.results-area .error {
-  margin: 0.25rem 0;
-  color: #e74c3c;
-  font-weight: 600;
-}
-
-.results-area .success {
-  margin: 0.25rem 0;
-  color: #27ae60;
-  font-weight: 600;
-}
-
-.info-section {
-  background: #fff3cd;
-  padding: 1.5rem;
-  border-radius: 8px;
-  border-left: 4px solid #ffc107;
-}
-
-.info-section h3 {
-  color: #856404;
-  margin-bottom: 0.5rem;
-  font-size: 1.2rem;
-}
-
-.info-section p {
-  color: #856404;
-  margin-bottom: 0.5rem;
-}
-
-.info-section ul {
-  color: #856404;
-  margin-left: 1.5rem;
-}
-
-.info-section li {
-  margin-bottom: 0.25rem;
-}
-
-.info-section a {
-  color: #0056b3;
-  text-decoration: none;
-}
-
-.info-section a:hover {
-  text-decoration: underline;
-}
-
-.info-section code {
-  background: #f5f5f5;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: "Fira Code", "Courier New", monospace;
-  font-size: 0.9em;
-  color: #333;
-}
-
-/* Responsive design */
-@media (max-width: 600px) {
-  .lerobot-app {
-    margin: 1rem;
-    padding: 1.5rem;
-  }
-
-  .lerobot-header h1 {
-    font-size: 2rem;
-  }
-
-  .lerobot-header p {
-    font-size: 1rem;
-  }
-}

tailwind.config.js

@@ -1,59 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    "./index.html",
-    "./examples/robot-control-web/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          1: "hsl(var(--chart-1))",
-          2: "hsl(var(--chart-2))",
-          3: "hsl(var(--chart-3))",
-          4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))",
-        },
-      },
-    },
-  },
-  plugins: [],
-};

tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* React */
-    "jsx": "react-jsx",
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src", "examples/robot-control-web"]
-}

vite.config.ts

@@ -1,83 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import { resolve } from "path";
-import { existsSync } from "fs";
-
-export default defineConfig(({ mode }) => {
-  // Check if we're in a workspace environment (has packages/web/src)
-  const isWorkspace = existsSync(resolve(__dirname, "./packages/web/src"));
-
-  const baseConfig = {
-    plugins: [],
-    resolve: {
-      alias: {
-        "@": resolve(__dirname, "./src"),
-        // Only add workspace alias if in workspace environment
-        ...(isWorkspace && {
-          "@lerobot/web": resolve(__dirname, "./packages/web/src"),
-        }),
-      },
-    },
-  };
-
-  if (mode === "demo") {
-    // React demo mode - includes React, Tailwind, shadcn/ui
-    return {
-      ...baseConfig,
-      plugins: [react()],
-      css: {
-        postcss: "./postcss.config.mjs",
-      },
-      build: {
-        outDir: "dist/demo",
-        rollupOptions: {
-          input: {
-            main: resolve(__dirname, "index.html"),
-          },
-        },
-      },
-    };
-  }
-
-  if (mode === "vanilla") {
-    // Vanilla mode - current implementation without React
-    return {
-      ...baseConfig,
-      build: {
-        outDir: "dist/vanilla",
-        rollupOptions: {
-          input: {
-            main: resolve(__dirname, "vanilla.html"),
-          },
-        },
-      },
-    };
-  }
-
-  if (mode === "lib") {
-    // Library mode - core library without any demo UI
-    return {
-      ...baseConfig,
-      build: {
-        lib: {
-          entry: resolve(__dirname, "src/main.ts"),
-          name: "LeRobot",
-          fileName: "lerobot",
-        },
-        rollupOptions: {
-          external: ["serialport", "react", "react-dom"],
-          output: {
-            globals: {
-              serialport: "SerialPort",
-              react: "React",
-              "react-dom": "ReactDOM",
-            },
-          },
-        },
-      },
-    };
-  }
-
-  // Default mode (fallback to demo)
-  return defineConfig({ mode: "demo" });
-});