feat(example): improved everything to make it release rdy

examples/cyberpunk-standalone/src/App.tsx

@@ -267,7 +267,7 @@ function App() {
       case "dashboard":
       default:
         return (
-          <div className="space-y-12">
+          <div className="space-y-20">
             <DeviceDashboard
               robots={robots}
               onCalibrate={handleCalibrate}
@@ -280,7 +280,7 @@ function App() {
             />
             <div>
               <div className="mb-6">
-                <h2 className="text-2xl font-bold text-primary font-mono tracking-wider mb-2 uppercase">
+                <h2 className="text-3xl font-bold font-mono tracking-wider mb-2 uppercase">
                   install
                 </h2>
                 <p className="text-sm text-muted-foreground font-mono">
@@ -356,7 +356,7 @@ function App() {
   };
 
   return (
-    <div className="flex flex-col min-h-screen font-sans">
+    <div className="flex flex-col min-h-screen font-sans bg-gray-200 dark:bg-background">
       <Header />
       <main className="flex-grow container mx-auto py-12 px-4 md:px-6">
         <PageHeader />

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

@@ -3,6 +3,16 @@ 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 {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { useToast } from "@/hooks/use-toast";
 import {
   calibrate,
@@ -28,6 +38,7 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
   const [liveData, setLiveData] = useState<LiveCalibrationData | null>(null);
   const [isCalibrating, setIsCalibrating] = useState(false);
   const [isPreparing, setIsPreparing] = useState(false);
+  const [showHomingDialog, setShowHomingDialog] = useState(false);
   const [calibrationProcess, setCalibrationProcess] =
     useState<CalibrationProcess | null>(null);
   const [calibrationResults, setCalibrationResults] =
@@ -86,12 +97,38 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
 
   const handleStart = async () => {
     try {
-      setIsCalibrating(true);
-      setStatus("🤖 Starting calibration process...");
+      setIsPreparing(true);
+      setStatus("🤖 Preparing for calibration...");
 
       // Release motors first
       await releaseMotorTorque();
 
+      // Show dialog asking user to put robot in homing position
+      setShowHomingDialog(true);
+    } catch (error) {
+      console.error("Failed to prepare for calibration:", error);
+      setStatus(
+        `❌ Preparation failed: ${
+          error instanceof Error ? error.message : error
+        }`
+      );
+      toast({
+        title: "Preparation Failed",
+        description:
+          error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
+      setIsPreparing(false);
+    }
+  };
+
+  const handleStartCalibration = async () => {
+    try {
+      setShowHomingDialog(false);
+      setIsCalibrating(true);
+      setIsPreparing(false);
+      setStatus("🤖 Starting calibration process...");
+
       // Start calibration process
       const process = await calibrate({
         robot,
@@ -162,6 +199,12 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
     }
   };
 
+  const handleCancelCalibration = () => {
+    setShowHomingDialog(false);
+    setIsPreparing(false);
+    setStatus("Ready to calibrate.");
+  };
+
   const handleFinish = async () => {
     if (calibrationProcess) {
       try {
@@ -224,67 +267,106 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
   );
 
   return (
-    <Card className="border-0 rounded-none">
-      <div className="p-4 border-b border-white/10 flex items-center justify-between">
-        <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">{status}</p>
+    <>
+      <Card className="border-0 rounded-none">
+        <div className="p-4 border-b border-white/10 flex items-center justify-between">
+          <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">
+                {status}
+              </p>
+            </div>
           </div>
-        </div>
-        <div className="flex gap-4">
-          {!isCalibrating ? (
+          <div className="flex gap-4">
+            {!isCalibrating ? (
+              <Button
+                onClick={handleStart}
+                size="lg"
+                disabled={isPreparing || !robot.isConnected}
+              >
+                {isPreparing
+                  ? "Preparing..."
+                  : calibrationResults
+                  ? "Re-calibrate"
+                  : "Start Calibration"}
+              </Button>
+            ) : (
+              <Button onClick={handleFinish} variant="destructive" size="lg">
+                Finish Recording
+              </Button>
+            )}
             <Button
-              onClick={handleStart}
+              onClick={downloadJson}
+              variant="outline"
               size="lg"
-              disabled={isPreparing || !robot.isConnected}
+              disabled={!calibrationResults}
             >
-              {isPreparing ? "Preparing..." : "Start Calibration"}
+              <Download className="w-4 h-4 mr-2" /> Download JSON
             </Button>
-          ) : (
-            <Button onClick={handleFinish} variant="destructive" size="lg">
-              Finish Recording
-            </Button>
-          )}
-          <Button
-            onClick={downloadJson}
-            variant="outline"
-            size="lg"
-            disabled={!calibrationResults}
-          >
-            <Download className="w-4 h-4 mr-2" /> Download JSON
-          </Button>
-        </div>
-      </div>
-      <div className="pt-6 p-6">
-        <div className="flex items-center gap-4 py-2 px-4 text-sm font-sans text-muted-foreground">
-          <div className="w-40">Motor Name</div>
-          <div className="flex-1">Visual Range</div>
-          <div className="w-16 text-right">Current</div>
-          <div className="w-16 text-right">Min</div>
-          <div className="w-16 text-right">Max</div>
-          <div className="w-16 text-right">Range</div>
+          </div>
         </div>
-        <div className="border-t border-white/10">
-          {motorData.map(([name, data]) => (
-            <MotorCalibrationVisual
-              key={name as string}
-              name={name as string}
-              data={
-                data as {
-                  current: number;
-                  min: number;
-                  max: number;
-                  range: number;
+        <div className="pt-6 p-6">
+          <div className="flex items-center gap-4 py-2 px-4 text-sm font-sans text-muted-foreground">
+            <div className="w-40">Motor Name</div>
+            <div className="flex-1">Visual Range</div>
+            <div className="w-16 text-right">Current</div>
+            <div className="w-16 text-right">Min</div>
+            <div className="w-16 text-right">Max</div>
+            <div className="w-16 text-right">Range</div>
+          </div>
+          <div className="border-t border-white/10">
+            {motorData.map(([name, data]) => (
+              <MotorCalibrationVisual
+                key={name as string}
+                name={name as string}
+                data={
+                  data as {
+                    current: number;
+                    min: number;
+                    max: number;
+                    range: number;
+                  }
                 }
-              }
-            />
-          ))}
+              />
+            ))}
+          </div>
         </div>
-      </div>
-    </Card>
+      </Card>
+
+      <AlertDialog open={showHomingDialog} onOpenChange={setShowHomingDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Position Robot for Calibration</AlertDialogTitle>
+            <AlertDialogDescription>
+              The motors have been released and are now free to move. Please
+              position the robot in its homing position:
+              <br />
+              <br />
+              • Move all joints to their center/neutral position
+              <br />
+              • Ensure the robot is in a comfortable, balanced pose
+              <br />
+              • Make sure all motors can move freely through their full range
+              <br />
+              <br />
+              Once the robot is positioned correctly, click "Start Calibration"
+              to begin recording joint ranges.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleCancelCalibration}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction onClick={handleStartCalibration}>
+              Start Calibration
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import {
   Settings,
   Gamepad2,
@@ -11,8 +12,19 @@ import {
 import { Button } from "@/components/ui/button";
 import { Card, CardFooter } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { cn } from "@/lib/utils";
 import HudCorners from "@/components/hud-corners";
+import { getUnifiedRobotData } from "@/lib/unified-storage";
 import type { RobotConnection } from "@/types/robot";
 
 interface DeviceDashboardProps {
@@ -36,183 +48,225 @@ export function DeviceDashboard({
   isConnecting,
   onScrollToHardware,
 }: DeviceDashboardProps) {
+  const [robotToRemove, setRobotToRemove] = useState<RobotConnection | null>(
+    null
+  );
+
+  const handleRemoveClick = (robot: RobotConnection) => {
+    setRobotToRemove(robot);
+  };
+
+  const handleConfirmRemove = () => {
+    if (robotToRemove) {
+      onRemove(
+        robotToRemove.robotId || robotToRemove.serialNumber || "unknown"
+      );
+      setRobotToRemove(null);
+    }
+  };
+
+  const handleCancelRemove = () => {
+    setRobotToRemove(null);
+  };
   return (
-    <Card className="border-0 rounded-none">
-      <div className="p-4 border-b border-white/10 flex items-center justify-between">
-        <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>
-            <div className="flex items-center gap-2 mt-1">
-              <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"
-              >
-                <ExternalLink className="w-3 h-3" />
-                add more devices
-              </button>
+    <>
+      <Card className="border-0 rounded-none">
+        <div className="p-4 border-b border-white/10 flex items-center justify-between">
+          <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>
+              <div className="flex items-center gap-2 mt-1">
+                <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"
+                >
+                  <ExternalLink className="w-3 h-3" />
+                  add more devices
+                </button>
+              </div>
             </div>
           </div>
+          {robots.length > 0 && (
+            <Button
+              onClick={onFindNew}
+              disabled={isConnecting}
+              size="lg"
+              className="font-mono uppercase"
+            >
+              <Plus className="w-4 h-4 mr-2" />
+              add unit
+            </Button>
+          )}
         </div>
-        {robots.length > 0 && (
-          <Button
-            onClick={onFindNew}
-            disabled={isConnecting}
-            size="lg"
-            className="font-mono uppercase"
-          >
-            <Plus className="w-4 h-4 mr-2" />
-            add unit
-          </Button>
-        )}
-      </div>
 
-      <div className="pt-6 p-6">
-        {robots.length === 0 ? (
-          <div className="relative">
-            <HudCorners className="p-16">
-              <div className="text-center font-mono">
-                <div className="mb-6">
-                  {isConnecting ? (
-                    <>
-                      <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>
-                    </>
-                  ) : (
-                    <>
-                      <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>
+        <div className="pt-6 p-6">
+          {robots.length === 0 ? (
+            <div className="relative">
+              <HudCorners className="p-16">
+                <div className="text-center font-mono">
+                  <div className="mb-6">
+                    {isConnecting ? (
+                      <>
+                        <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>
+                      </>
+                    ) : (
+                      <>
+                        <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>
 
-                      <Button
-                        onClick={onFindNew}
-                        size="lg"
-                        className="font-mono uppercase"
-                      >
-                        <Plus className="w-4 h-4 mr-2" />
-                        add unit
-                      </Button>
-                    </>
-                  )}
+                        <Button
+                          onClick={onFindNew}
+                          size="lg"
+                          className="font-mono uppercase"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          add unit
+                        </Button>
+                      </>
+                    )}
+                  </div>
                 </div>
-              </div>
-            </HudCorners>
-          </div>
-        ) : (
-          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-            {robots.map((robot) => (
-              <HudCorners key={robot.robotId}>
-                <Card className="flex flex-col h-full">
-                  <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>
-                        <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>
+              </HudCorners>
+            </div>
+          ) : (
+            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {robots.map((robot) => (
+                <HudCorners key={robot.robotId}>
+                  <Card className="flex flex-col h-full">
+                    <div className="p-4 border-b border-white/10">
+                      <div className="flex items-center justify-between">
+                        <div className="flex-1">
+                          <h4 className="text-2xl font-bold text-primary font-mono tracking-wider">
+                            {robot.name}
+                          </h4>
                         </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 ? "ONLINE" : "OFFLINE"}
+                        </Badge>
                       </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 ? "ONLINE" : "OFFLINE"}
-                      </Badge>
                     </div>
-                  </div>
 
-                  <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>
-                        <div className="text-primary uppercase">
-                          {robot.isConnected ? "operational" : "disconnected"}
+                    <div className="flex-grow p-4">
+                      <div className="grid grid-cols-2 gap-4 text-xs font-mono">
+                        <div>
+                          <span className="text-muted-foreground/40 uppercase">
+                            serial number
+                          </span>
+                          <div className="text-muted-foreground uppercase/70">
+                            {robot.serialNumber}
+                          </div>
                         </div>
-                      </div>
-                      <div>
-                        <span className="text-muted-foreground uppercase">
-                          type:
-                        </span>
-                        <div className="text-accent uppercase">
-                          {robot.robotType}
+                        <div>
+                          <span className="text-muted-foreground/40 uppercase">
+                            type
+                          </span>
+                          <div className="text-muted-foreground uppercase/70">
+                            {robot.robotType}
+                          </div>
                         </div>
                       </div>
                     </div>
-                  </div>
 
-                  <CardFooter className="p-4 border-t border-white/10 flex flex-wrap gap-2">
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => onEdit(robot)}
-                      className="font-mono text-xs uppercase"
-                    >
-                      <Pencil className="w-3 h-3 mr-1" /> edit
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => onCalibrate(robot)}
-                      className="font-mono text-xs uppercase"
-                    >
-                      <Settings className="w-3 h-3 mr-1" /> calibrate
-                    </Button>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      onClick={() => onTeleoperate(robot)}
-                      className="font-mono text-xs uppercase"
-                    >
-                      <Gamepad2 className="w-3 h-3 mr-1" /> control
-                    </Button>
-                    <Button
-                      variant="destructive"
-                      size="sm"
-                      onClick={() =>
-                        onRemove(
-                          robot.robotId || robot.serialNumber || "unknown"
-                        )
-                      }
-                      className="font-mono text-xs uppercase"
-                    >
-                      <Trash2 className="w-3 h-3 mr-1" /> remove
-                    </Button>
-                  </CardFooter>
-                </Card>
-              </HudCorners>
-            ))}
-          </div>
-        )}
-      </div>
-    </Card>
+                    <CardFooter className="p-4 border-t border-white/10 flex flex-wrap gap-2">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onEdit(robot)}
+                        className="font-mono text-xs uppercase px-2"
+                      >
+                        <Pencil className="w-3 h-3 mr-0.5" /> edit
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onCalibrate(robot)}
+                        className="font-mono text-xs uppercase px-2"
+                      >
+                        <Settings className="w-3 h-3 mr-0.5" />
+                        {robot.serialNumber &&
+                        getUnifiedRobotData(robot.serialNumber)?.calibration
+                          ? "re-calibrate"
+                          : "calibrate"}
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onTeleoperate(robot)}
+                        className="font-mono text-xs uppercase px-2"
+                      >
+                        <Gamepad2 className="w-3 h-3 mr-0.5" /> control
+                      </Button>
+                      <Button
+                        variant="destructive"
+                        size="sm"
+                        onClick={() => handleRemoveClick(robot)}
+                        className="font-mono text-xs uppercase px-2"
+                      >
+                        <Trash2 className="w-3 h-3 mr-0.5" /> remove
+                      </Button>
+                    </CardFooter>
+                  </Card>
+                </HudCorners>
+              ))}
+            </div>
+          )}
+        </div>
+      </Card>
+
+      <AlertDialog
+        open={!!robotToRemove}
+        onOpenChange={() => setRobotToRemove(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Remove Robot</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to remove{" "}
+              <strong>{robotToRemove?.name || robotToRemove?.robotId}</strong>{" "}
+              from the device registry?
+              <br />
+              <br />
+              This will permanently delete all stored calibration data and
+              settings for this robot. This action cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={handleCancelRemove}>
+              Cancel
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleConfirmRemove}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            >
+              Remove Robot
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

examples/cyberpunk-standalone/src/components/docs-section.tsx

@@ -30,7 +30,7 @@ const CodeBlock = ({
     typeof children === "string" ? children : children?.toString() || "";
 
   return (
-    <div className="bg-muted/50 dark:bg-black/40 border border-border dark:border-white/10 rounded-md overflow-hidden my-4 relative">
+    <div className="bg-slate-800 dark:bg-black/40 border border-border dark:border-white/10 rounded-md overflow-hidden my-4 relative">
       <SyntaxHighlighter
         language={language}
         style={oneDark}
@@ -40,6 +40,8 @@ const CodeBlock = ({
           fontSize: "0.875rem",
           background: "transparent",
           backgroundColor: "transparent",
+          fontFamily:
+            "Geist Mono, ui-monospace, SFMono-Regular, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
         }}
         wrapLines={true}
         wrapLongLines={true}
@@ -68,16 +70,36 @@ export function DocsSection() {
   return (
     <div className="font-mono">
       <div className="mb-6">
-        <h2 className="text-2xl font-bold text-primary tracking-wider mb-2 uppercase flex items-center gap-3">
+        <h2 className="text-3xl font-bold tracking-wider mb-2 uppercase flex items-center gap-3">
           <Book className="w-6 h-6" />
           Docs
         </h2>
         <p className="text-sm text-muted-foreground">
-          Complete API reference for @lerobot/web robotics library.
+          Complete API reference for @lerobot/web
         </p>
       </div>
 
-      <div className="bg-muted/40 dark:bg-black/30 border-l-4 border-cyan-500 dark:border-accent-cyan p-6 md:p-8 rounded-r-lg space-y-8">
+      <div className="bg-muted/40 dark:bg-black/30 border border-border dark:border-white/10 p-6 md:p-8 rounded-lg space-y-14">
+        {/* Browser Requirements */}
+        <div>
+          <h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase">
+            Browser Requirements
+          </h3>
+          <div className="mt-4 space-y-2 text-sm">
+            <div>
+              • <strong>Chromium 89+</strong> with WebSerial and WebUSB API
+              support
+            </div>
+            <div>
+              • <strong>HTTPS or localhost</strong>
+            </div>
+            <div>
+              • <strong>User gesture</strong> required for initial port
+              selection
+            </div>
+          </div>
+        </div>
+
         {/* Getting Started */}
         <div>
           <h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase flex items-center gap-2">
@@ -115,28 +137,11 @@ const teleop = await teleoperate({
   calibrationData,
   teleop: { type: "keyboard" },
 });
-teleop.start();`}
-          </CodeBlock>
-        </div>
+teleop.start();
 
-        {/* Browser Requirements */}
-        <div>
-          <h3 className="text-xl font-bold text-cyan-600 dark:text-accent-cyan tracking-wider uppercase">
-            Browser Requirements
-          </h3>
-          <div className="mt-4 space-y-2 text-sm">
-            <div>
-              • <strong>Chromium 89+</strong> with WebSerial and WebUSB API
-              support
-            </div>
-            <div>
-              • <strong>HTTPS or localhost</strong>
-            </div>
-            <div>
-              • <strong>User gesture</strong> required for initial port
-              selection
-            </div>
-          </div>
+// 5. stop control (run this when you're done)
+teleop.stop();`}
+          </CodeBlock>
         </div>
 
         {/* API Reference */}
@@ -145,7 +150,7 @@ teleop.start();`}
             <Code2 className="w-5 h-5" />
             API Reference
           </h3>
-          <div className="space-y-6 mt-4">
+          <div className="space-y-12 mt-4">
             {/* findPort */}
             <div>
               <h4 className="font-bold text-primary">findPort(config?)</h4>
@@ -163,14 +168,40 @@ const findProcess = await findPort({
     { robotType: "so100_follower", robotId: "left_arm", serialNumber: "USB123" }
   ],
   onMessage: (msg) => console.log(msg),
-});
-
-// Returns: FindPortProcess
-{
-  result: Promise<RobotConnection[]>, // Array of robot connections
-  stop(): void // Cancel discovery process
-}`}
+});`}
               </CodeBlock>
+              <div className="mt-3">
+                <h5 className="font-bold text-sm text-muted-foreground tracking-wider">
+                  Options
+                </h5>
+                <ul className="mt-1 ml-4 space-y-1 text-sm text-muted-foreground">
+                  <li>
+                    • <code>robotConfigs?: RobotConfig[]</code> - Auto-connect
+                    to these known robots
+                  </li>
+                  <li>
+                    • <code>onMessage?: (message: string) =&gt; void</code> -
+                    Progress messages callback
+                  </li>
+                </ul>
+              </div>
+              <div className="mt-3">
+                <h5 className="font-bold text-sm text-muted-foreground tracking-wider">
+                  Returns:{" "}
+                  <code className="bg-muted/50 px-1 rounded">
+                    FindPortProcess
+                  </code>
+                </h5>
+                <ul className="mt-1 ml-4 space-y-1 text-sm text-muted-foreground">
+                  <li>
+                    • <code>result: Promise&lt;RobotConnection[]&gt;</code> -
+                    Array of robot connections
+                  </li>
+                  <li>
+                    • <code>stop(): void</code> - Cancel discovery process
+                  </li>
+                </ul>
+              </div>
             </div>
 
             {/* calibrate */}
@@ -195,14 +226,25 @@ const findProcess = await findPort({
 
 // Move robot through full range of motion...
 calibrationProcess.stop(); // Stop range recording
-const calibrationData = await calibrationProcess.result;
-
-// Returns: CalibrationProcess
-{
-  result: Promise<WebCalibrationResults>, // Python-compatible format
-  stop(): void // Stop calibration process
-}`}
+const calibrationData = await calibrationProcess.result;`}
               </CodeBlock>
+              <div className="mt-3">
+                <h5 className="font-bold text-sm text-muted-foreground tracking-wider">
+                  Returns:{" "}
+                  <code className="bg-muted/50 px-1 rounded">
+                    CalibrationProcess
+                  </code>
+                </h5>
+                <ul className="mt-1 ml-4 space-y-1 text-sm text-muted-foreground">
+                  <li>
+                    • <code>result: Promise&lt;WebCalibrationResults&gt;</code>{" "}
+                    - Python-compatible format
+                  </li>
+                  <li>
+                    • <code>stop(): void</code> - Stop calibration process
+                  </li>
+                </ul>
+              </div>
             </div>
 
             {/* teleoperate */}
@@ -228,17 +270,37 @@ const directTeleop = await teleoperate({
   robot,
   calibrationData: savedCalibrationData,
   teleop: { type: "direct" },
-});
-
-// Returns: TeleoperationProcess
-{
-  start(): void, // Begin teleoperation
-  stop(): void, // Stop teleoperation and clear states
-  getState(): TeleoperationState, // Current state and motor positions
-  teleoperator: BaseWebTeleoperator, // Access teleoperator-specific methods
-  disconnect(): Promise<void> // Stop and disconnect
-}`}
+});`}
               </CodeBlock>
+              <div className="mt-3">
+                <h5 className="font-bold text-sm text-muted-foreground tracking-wider">
+                  Returns:{" "}
+                  <code className="bg-muted/50 px-1 rounded">
+                    TeleoperationProcess
+                  </code>
+                </h5>
+                <ul className="mt-1 ml-4 space-y-1 text-sm text-muted-foreground">
+                  <li>
+                    • <code>start(): void</code> - Begin teleoperation
+                  </li>
+                  <li>
+                    • <code>stop(): void</code> - Stop teleoperation and clear
+                    states
+                  </li>
+                  <li>
+                    • <code>getState(): TeleoperationState</code> - Current
+                    state and motor positions
+                  </li>
+                  <li>
+                    • <code>teleoperator: BaseWebTeleoperator</code> - Access
+                    teleoperator-specific methods
+                  </li>
+                  <li>
+                    • <code>disconnect(): Promise&lt;void&gt;</code> - Stop and
+                    disconnect
+                  </li>
+                </ul>
+              </div>
             </div>
 
             {/* releaseMotors */}
@@ -254,12 +316,22 @@ const directTeleop = await teleoperate({
 await releaseMotors(robot);
 
 // Release specific motors only
-await releaseMotors(robot, [1, 2, 3]);
-
-// Parameters
-robot: RobotConnection // Connected robot
-motorIds?: number[] // Specific motor IDs (default: all motors for robot type)`}
+await releaseMotors(robot, [1, 2, 3]);`}
               </CodeBlock>
+              <div className="mt-3">
+                <h5 className="font-bold text-sm text-muted-foreground tracking-wider">
+                  Parameters
+                </h5>
+                <ul className="mt-1 ml-4 space-y-1 text-sm text-muted-foreground">
+                  <li>
+                    • <code>robot: RobotConnection</code> - Connected robot
+                  </li>
+                  <li>
+                    • <code>motorIds?: number[]</code> - Specific motor IDs
+                    (default: all motors for robot type)
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
         </div>

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

@@ -1,8 +1,8 @@
-import { Github } from "lucide-react"
+import { Github } from "lucide-react";
 
 export function Footer() {
   return (
-    <footer className="w-full border-t">
+    <footer className="w-full border-t border-gray-300 dark:border-border">
       <div className="container mx-auto flex h-16 items-center justify-center px-4 md:px-6">
         <div className="flex items-center gap-4 text-sm text-muted-foreground">
           <span>
@@ -37,5 +37,5 @@ export function Footer() {
         </div>
       </div>
     </footer>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/hardware-support-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Cpu, Mail, Plus, ExternalLink } from "lucide-react";
+import { Cpu, MessageCircle, Plus } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import HudCorners from "@/components/hud-corners";
 
@@ -17,7 +17,7 @@ export function HardwareSupportSection() {
   return (
     <div className="font-mono">
       <div className="mb-6">
-        <h2 className="text-2xl font-bold text-primary tracking-wider mb-2 uppercase flex items-center gap-3">
+        <h2 className="text-3xl font-bold tracking-wider mb-2 uppercase flex items-center gap-3">
           <Cpu className="w-6 h-6" />
           Hardware Support
         </h2>
@@ -88,7 +88,8 @@ export function HardwareSupportSection() {
               <div>
                 <p className="text-muted-foreground mb-4">
                   please provide us with access to different robot hardware, so
-                  we can add them to lerobot.js
+                  we can add them to lerobot.js. join the LeRobot Discord and DM
+                  me!
                 </p>
 
                 <div className="bg-muted/60 dark:bg-black/40 border border-border dark:border-white/10 rounded-lg p-4 mb-4">
@@ -104,30 +105,16 @@ export function HardwareSupportSection() {
                 </div>
 
                 <div className="flex flex-col sm:flex-row gap-4">
-                  <Button
-                    className="font-mono uppercase flex items-center gap-2"
-                    onClick={() =>
-                      window.open(
-                        "mailto:[email protected]?subject=LeRobot.js Hardware Support",
-                        "_blank"
-                      )
-                    }
-                  >
-                    <Mail className="w-4 h-4" />
-                    Contact Tim
-                  </Button>
-                  <Button
-                    variant="outline"
-                    className="font-mono uppercase flex items-center gap-2 bg-transparent"
-                    onClick={() =>
-                      window.open(
-                        "https://github.com/timpietrusky/lerobot.js",
-                        "_blank"
-                      )
-                    }
-                  >
-                    <ExternalLink className="w-4 h-4" />
-                    GitHub
+                  <Button asChild className="font-mono">
+                    <a
+                      href="https://discord.gg/s3KuuzsPFb"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="flex items-center gap-2"
+                    >
+                      <MessageCircle className="w-4 h-4" />
+                      LeRobot Discord → dm @NERDDISCO
+                    </a>
                   </Button>
                 </div>
               </div>

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

@@ -1,8 +1,8 @@
-import { ThemeToggle } from "./theme-toggle"
+import { ThemeToggle } from "./theme-toggle";
 
 export function Header() {
   return (
-    <header className="w-full border-b">
+    <header className="w-full border-b border-gray-300 dark:border-border">
       <div className="container mx-auto flex h-16 items-center justify-between px-4 md:px-6">
         <div className="flex items-center gap-6">
           <h1 className="text-2xl font-bold">LeRobot.js</h1>
@@ -23,5 +23,5 @@ export function Header() {
         <ThemeToggle />
       </div>
     </header>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/roadmap-section.tsx

@@ -1,12 +1,12 @@
-"use client"
-import { CheckCircle, Clock, Target } from "lucide-react"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
+"use client";
+import { CheckCircle, Clock, Target, Github } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
 
 interface RoadmapItem {
-  title: string
-  description: string
-  status: "completed" | "planned"
+  title: string;
+  description: string;
+  status: "completed" | "planned";
 }
 
 const roadmapItems: RoadmapItem[] = [
@@ -17,7 +17,8 @@ const roadmapItems: RoadmapItem[] = [
   },
   {
     title: "calibrate",
-    description: "Real-time joint calibration with visual feedback and data export",
+    description:
+      "Real-time joint calibration with visual feedback and data export",
     status: "completed",
   },
   {
@@ -32,7 +33,8 @@ const roadmapItems: RoadmapItem[] = [
   },
   {
     title: "replay",
-    description: "Replay any recorded episode or episodes from existing datasets",
+    description:
+      "Replay any recorded episode or episodes from existing datasets",
     status: "planned",
   },
   {
@@ -42,10 +44,11 @@ const roadmapItems: RoadmapItem[] = [
   },
   {
     title: "eval",
-    description: "Run inference using trained policies for autonomous operation",
+    description:
+      "Run inference using trained policies for autonomous operation",
     status: "planned",
   },
-]
+];
 
 const statusConfig = {
   completed: {
@@ -64,20 +67,33 @@ const statusConfig = {
     bgColor: "bg-slate-500/10 dark:bg-muted-foreground/5",
     borderColor: "border-slate-500/30 dark:border-muted-foreground/20",
   },
-}
+};
 
 export function RoadmapSection() {
-  const completedCount = roadmapItems.filter((item) => item.status === "completed").length
-  const totalCount = roadmapItems.length
+  const completedCount = roadmapItems.filter(
+    (item) => item.status === "completed"
+  ).length;
+  const totalCount = roadmapItems.length;
 
   return (
     <div className="font-mono">
       <div className="mb-6">
-        <h2 className="text-2xl font-bold text-primary tracking-wider mb-2 uppercase flex items-center gap-3">
+        <h2 className="text-3xl font-bold tracking-wider mb-2 uppercase flex items-center gap-3">
           <Target className="w-6 h-6" />
           Roadmap
         </h2>
-        <p className="text-sm text-muted-foreground">lfg o7</p>
+        <p className="text-sm text-muted-foreground">
+          our goal is to provide{" "}
+          <a
+            href="https://huggingface.co/docs/lerobot"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:text-accent transition-colors underline"
+          >
+            LeRobot
+          </a>
+          's simple, easy-to-use Python functions for the JavaScript community
+        </p>
       </div>
 
       <div className="bg-gradient-to-br from-muted/60 to-muted/40 dark:from-black/40 dark:to-black/20 border border-primary/20 rounded-lg overflow-hidden">
@@ -85,13 +101,14 @@ export function RoadmapSection() {
         <div className="bg-primary/30 dark:bg-primary/10 border-b border-primary/20 p-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
-              <div className="text-primary font-bold text-lg tracking-wider">SYSTEM OBJECTIVES</div>
               <div className="flex items-center gap-2">
                 <div className="w-2 h-2 bg-green-500 dark:bg-green-400 rounded-full animate-pulse"></div>
-                <span className="text-green-600 dark:text-green-400 text-sm">{completedCount} ACTIVE</span>
+                <span className="text-green-600 dark:text-green-400 text-xs">
+                  {completedCount} COMPLETED
+                </span>
                 <div className="w-2 h-2 bg-slate-500 dark:bg-muted-foreground rounded-full"></div>
-                <span className="text-slate-600 dark:text-muted-foreground text-sm">
-                  {totalCount - completedCount} QUEUED
+                <span className="text-slate-600 dark:text-muted-foreground text-xs">
+                  {totalCount - completedCount} PLANNED
                 </span>
               </div>
             </div>
@@ -115,8 +132,8 @@ export function RoadmapSection() {
         <div className="p-6">
           <div className="space-y-3">
             {roadmapItems.map((item, index) => {
-              const config = statusConfig[item.status]
-              const StatusIcon = config.icon
+              const config = statusConfig[item.status];
+              const StatusIcon = config.icon;
 
               return (
                 <div
@@ -124,7 +141,7 @@ export function RoadmapSection() {
                   className={cn(
                     "flex items-center gap-4 p-4 rounded border transition-all hover:bg-muted/30 dark:hover:bg-white/5",
                     config.bgColor,
-                    config.borderColor,
+                    config.borderColor
                   )}
                 >
                   {/* Number */}
@@ -134,8 +151,12 @@ export function RoadmapSection() {
 
                   {/* Content */}
                   <div className="flex-1 min-w-0">
-                    <h4 className={cn("font-bold text-lg", config.textColor)}>{item.title}()</h4>
-                    <p className="text-muted-foreground text-sm mt-1">{item.description}</p>
+                    <h4 className={cn("font-bold text-lg", config.textColor)}>
+                      {item.title}()
+                    </h4>
+                    <p className="text-muted-foreground text-sm mt-1">
+                      {item.description}
+                    </p>
                   </div>
 
                   {/* Status Badge */}
@@ -144,36 +165,41 @@ export function RoadmapSection() {
                     className={cn(
                       "text-xs font-bold tracking-wider border-0 px-3 py-1 flex-shrink-0",
                       config.textColor,
-                      config.bgColor,
+                      config.bgColor
                     )}
                   >
                     {config.label}
                   </Badge>
 
                   {/* Status Icon */}
-                  <StatusIcon className={cn("w-4 h-4 flex-shrink-0 ml-3", config.textColor)} />
+                  <StatusIcon
+                    className={cn(
+                      "w-4 h-4 flex-shrink-0 ml-3",
+                      config.textColor
+                    )}
+                  />
                 </div>
-              )
+              );
             })}
           </div>
         </div>
 
         {/* Footer */}
-        <div className="bg-muted/50 dark:bg-black/30 border-t border-border dark:border-white/10 p-4">
+        <div className="bg-muted/50 dark:bg-black/30 border-t border-gray-300 dark:border-white/10 p-4">
           <p className="text-muted-foreground text-sm">
-            <span className="text-cyan-600 dark:text-accent-cyan">REFERENCE:</span> functions based on the original{" "}
+            want to help? LeRobot.js is open source on{" "}
             <a
-              href="https://huggingface.co/docs/lerobot"
+              href="https://github.com/lerobot/lerobot.js"
               target="_blank"
               rel="noopener noreferrer"
               className="text-primary hover:text-accent transition-colors underline"
             >
-              LeRobot
-            </a>{" "}
-            (python) and adapted for web robotic ai
+              <Github className="h-4 w-4 inline align-text-bottom mr-1" />
+              GitHub
+            </a>
           </p>
         </div>
       </div>
     </div>
-  )
+  );
 }

examples/cyberpunk-standalone/src/components/setup-cards.tsx

@@ -1,40 +1,48 @@
-"use client"
-import { useState } from "react"
-import { Copy, Package, Clock, Check, Terminal } from "lucide-react"
-import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { Badge } from "@/components/ui/badge"
-import HudCorners from "@/components/hud-corners"
-import { cn } from "@/lib/utils"
+"use client";
+import { useState } from "react";
+import { Copy, Package, Clock, Check, Terminal } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import HudCorners from "@/components/hud-corners";
+import { cn } from "@/lib/utils";
 
-type PackageManager = "npm" | "yarn" | "pnpm" | "bun"
+type PackageManager = "npm" | "yarn" | "pnpm" | "bun";
 
 interface PackageInstallerProps {
-  packageName: string
-  disabled?: boolean
+  packageName: string;
+  disabled?: boolean;
 }
 
-function PackageInstaller({ packageName, disabled = false }: PackageInstallerProps) {
-  const [selectedPM, setSelectedPM] = useState<PackageManager>("pnpm")
-  const [copied, setCopied] = useState(false)
+function PackageInstaller({
+  packageName,
+  disabled = false,
+}: PackageInstallerProps) {
+  const [selectedPM, setSelectedPM] = useState<PackageManager>("pnpm");
+  const [copied, setCopied] = useState(false);
 
-  const packageManagers: { value: PackageManager; label: string; command: string }[] = [
+  const packageManagers: {
+    value: PackageManager;
+    label: string;
+    command: string;
+  }[] = [
     { value: "pnpm", label: "pnpm", command: `pnpm add ${packageName}` },
     { value: "npm", label: "npm", command: `npm i ${packageName}` },
     { value: "yarn", label: "yarn", command: `yarn add ${packageName}` },
-  ]
+  ];
 
   const copyToClipboard = async (text: string) => {
     try {
-      await navigator.clipboard.writeText(text)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      console.error("Failed to copy:", err)
+      console.error("Failed to copy:", err);
     }
-  }
+  };
 
-  const currentCommand = packageManagers.find((pm) => pm.value === selectedPM)?.command || ""
+  const currentCommand =
+    packageManagers.find((pm) => pm.value === selectedPM)?.command || "";
 
   return (
     <div className="max-w-md">
@@ -51,7 +59,7 @@ function PackageInstaller({ packageName, disabled = false }: PackageInstallerPro
                 "font-mono text-xs px-3 min-w-[60px] h-8 border transition-colors",
                 selectedPM === pm.value
                   ? "bg-primary text-primary-foreground border-primary"
-                  : "bg-transparent border-input hover:bg-accent hover:text-accent-foreground",
+                  : "bg-transparent border-input hover:bg-accent hover:text-accent-foreground"
               )}
             >
               {pm.label}
@@ -65,7 +73,7 @@ function PackageInstaller({ packageName, disabled = false }: PackageInstallerPro
               "border rounded-md p-3 font-mono text-sm transition-colors",
               disabled
                 ? "bg-muted/60 dark:bg-black/20 border-dashed border-muted/40 dark:border-muted/20 text-muted-foreground/70 dark:text-muted-foreground/50"
-                : "bg-muted/60 dark:bg-black/40 border-border dark:border-white/10 text-foreground dark:text-primary",
+                : "bg-muted/60 dark:bg-black/40 border-border dark:border-white/10 text-foreground dark:text-primary"
             )}
           >
             {currentCommand}
@@ -88,7 +96,7 @@ function PackageInstaller({ packageName, disabled = false }: PackageInstallerPro
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 export function SetupCards() {
@@ -105,8 +113,12 @@ export function SetupCards() {
                 <Package className="w-6 h-6 text-primary" />
               </div>
               <div>
-                <h3 className="text-xl font-bold text-primary font-mono tracking-wider uppercase">web</h3>
-                <p className="text-sm text-muted-foreground font-mono">run lerobot in the browser</p>
+                <h3 className="text-xl font-bold text-primary font-mono tracking-wider uppercase">
+                  web
+                </h3>
+                <p className="text-sm text-muted-foreground font-mono">
+                  run LeRobot.js in the browser
+                </p>
               </div>
             </div>
 
@@ -128,8 +140,12 @@ export function SetupCards() {
                   <Terminal className="w-6 h-6 text-muted-foreground" />
                 </div>
                 <div>
-                  <h3 className="text-xl font-bold text-muted-foreground font-mono tracking-wider uppercase">node</h3>
-                  <p className="text-sm text-muted-foreground/70 font-mono">run lerobot on the server</p>
+                  <h3 className="text-xl font-bold text-muted-foreground font-mono tracking-wider uppercase">
+                    node
+                  </h3>
+                  <p className="text-sm text-muted-foreground/70 font-mono">
+                    run LeRobot.js on the server
+                  </p>
                 </div>
               </div>
               <Badge
@@ -156,5 +172,5 @@ export function SetupCards() {
         </Card>
       </HudCorners>
     </div>
-  )
+  );
 }