feat: added dataset recording; hf uploader, s3 uploader; runpod trainer (#6)

* Added recording options
- Added dataset recorder in record.ts
- Added dataset record show example in recorder.tsx
- Added huggingface upload options
- Added zip download options
- Added S3 upload options

* fixed huggingface upload

* fixed video recording

* feat: added react-router-dom to be able to navigate

* feat: show the recorder all the time; make camera config nicer

* - Added threejs display changes
- fixed storage to work episode wise

* feat(recorder): persist camera; better configuration

* docs: how to refactor the pr to make record fit into the lib

* fixed teleoperator, added frame wise tracking in ui

* fixed multi teleoperator recording, added statistical measurement

* refactored code to move recording into record.ts

* updated README to reflect recorder and export functions

* fixed merge errors

* removed 3d rendering

---------

Co-authored-by: Tim Pietrusky <[email protected]>

docs/planning/007_record.md

@@ -0,0 +1,483 @@
+# User Story 007: Clean Record API Implementation
+
+## Story
+
+**As a** robotics developer building teleoperation recording systems  
+**I want** to record robot motor positions and control data using a clean `record()` function API  
+**So that** I can capture teleoperation sessions for training AI models, analysis, and replay without dealing with complex class-based APIs or mixed concerns
+
+## Background
+
+A community contributor has provided a recording implementation in this PR branch, which includes a comprehensive `LeRobotDatasetRecorder` class with video recording, data export, and LeRobot dataset format support. However, the current implementation violates several of our core conventions and doesn't match the clean API patterns established by `calibrate()`, `teleoperate()`, and `findPort()`.
+
+### Current Implementation Problems
+
+The existing `LeRobotDatasetRecorder` implementation has several architectural issues:
+
+- **Missing Standard Library Pattern**: Uses class instantiation instead of simple function call like our other APIs
+- **Library vs Demo Separation Violation**: Mixes hardware recording (library concern) with video streams, export formats, and UI (demo concerns)
+- **Teleoperator Integration Issues**: Recording logic deeply embedded in `BaseWebTeleoperator` with complex state management
+- **Complex Constructor Anti-Pattern**: Requires pre-configured teleoperators and video streams, violating our "direct library usage" principle
+- **Export API Complexity**: ZIP, HuggingFace, and S3 upload belong in demo code, not standard library
+- **No Clean Process API**: Doesn't follow our consistent `start()/stop()/result` pattern
+- **Redundant Event System**: Uses `dispatchMotorPositionChanged` events that aren't consumed and duplicate callback functionality
+- **Artificial Polling**: 100ms polling in teleoperate instead of immediate callbacks when motors change
+
+### Convention Alignment Needed
+
+Our established patterns from `calibrate()`, `teleoperate()`, and `findPort()` follow these principles:
+
+- **Simple Function API**: `const process = await record(config)`
+- **Clean Process Objects**: Consistent `start()`, `stop()`, `getState()`, `result` interface
+- **Hardware-Only Library**: Standard library handles only robotics hardware, not UI/storage/export
+- **Demo Handles UI**: Examples handle video, export formats, browser storage, file downloads
+- **Immediate Callbacks**: Real-time updates via callbacks, not polling or unused events
+- **Direct Usage**: End users call library functions directly without complex setup
+
+## Acceptance Criteria
+
+### Core Functionality
+
+- [ ] **Standard Library API**: Clean `record(config)` function matching our established patterns
+- [ ] **Process Object Interface**: Consistent `RecordProcess` with `start()`, `stop()`, `getState()`, `result` methods
+- [ ] **Hardware-Only Recording**: Library captures only robot motor positions and teleoperation data
+- [ ] **Real-Time Callbacks**: Immediate `onDataUpdate` and `onStateUpdate` callbacks, no polling
+- [ ] **Device-Agnostic**: Works with any robot type through configuration, not hardcoded values
+- [ ] **Clean Teleoperator Integration**: Recording subscribes to teleoperation changes without embedding in teleoperator classes
+
+### User Experience
+
+- [ ] **Simple Integration**: Easy to add recording to existing teleoperation workflows
+- [ ] **Consistent API**: Same patterns as `calibrate()` and `teleoperate()` for familiar developer experience
+- [ ] **Immediate Feedback**: Real-time recording state and data updates for responsive UI
+- [ ] **Error Handling**: Clear error messages for recording failures or invalid configurations
+- [ ] **Resource Management**: Proper cleanup of recording resources on stop/disconnect
+
+### Technical Requirements
+
+- [ ] **Library/Demo Separation**: Move video, export, and storage logic to examples/demo layer
+- [ ] **Remove Event System**: Eliminate unused `dispatchMotorPositionChanged` events, use callbacks only
+- [ ] **Extract from Teleoperators**: Remove recording state and logic from `BaseWebTeleoperator`
+- [ ] **TypeScript**: Fully typed with proper interfaces for recording configuration and data
+- [ ] **No Code Duplication**: Reuse existing teleoperation and motor communication infrastructure
+- [ ] **Performance**: Immediate callbacks when data changes, no unnecessary polling
+
+## Expected User Flow
+
+### Basic Robot Recording
+
+```typescript
+import { record } from "@lerobot/web";
+
+// Clean API matching our conventions
+const recordProcess = await record({
+  robot: connectedRobot,
+  options: {
+    fps: 30,
+    onDataUpdate: (data) => {
+      // Real-time recording data for UI feedback
+      console.log(`Recorded ${data.frameCount} frames`);
+      updateRecordingUI(data);
+    },
+    onStateUpdate: (state) => {
+      // Recording state changes
+      console.log(`Recording: ${state.isActive}`);
+      updateRecordingStatus(state);
+    },
+  },
+});
+
+// Consistent process interface
+recordProcess.start();
+
+// Recording runs automatically while teleoperation is active
+setTimeout(() => {
+  recordProcess.stop();
+}, 30000);
+
+// Get pure robot recording data
+const robotData = await recordProcess.result;
+console.log("Episodes:", robotData.episodes);
+console.log("Metadata:", robotData.metadata);
+```
+
+### Recording with Teleoperation
+
+```typescript
+import { teleoperate, record } from "@lerobot/web";
+
+// Start teleoperation
+const teleoperationProcess = await teleoperate({
+  robot: connectedRobot,
+  teleop: { type: "keyboard" },
+  calibrationData: calibrationData,
+  onStateUpdate: (state) => {
+    updateTeleoperationUI(state);
+  },
+});
+
+// Add recording to existing teleoperation
+const recordProcess = await record({
+  robot: connectedRobot,
+  options: {
+    onDataUpdate: (data) => {
+      console.log(`Recording frame ${data.frameCount}`);
+    },
+  },
+});
+
+// Both run independently
+teleoperationProcess.start();
+recordProcess.start();
+
+// Control independently
+setTimeout(() => {
+  recordProcess.stop(); // Stop recording, keep teleoperation
+}, 60000);
+
+setTimeout(() => {
+  teleoperationProcess.stop(); // Stop teleoperation
+}, 120000);
+```
+
+### Demo-Layer Dataset Export
+
+```typescript
+// In examples/demo - NOT in standard library
+import { record } from "@lerobot/web";
+import { DatasetExporter } from "./dataset-exporter"; // Demo code
+
+const recordProcess = await record({ robot, options });
+recordProcess.start();
+
+// ... recording session ...
+
+recordProcess.stop();
+const robotData = await recordProcess.result;
+
+// Demo handles complex export logic
+const exporter = new DatasetExporter({
+  robotData,
+  videoStreams: cameraStreams, // Demo manages video
+  taskDescription: "Pick and place task",
+});
+
+// Export options handled by demo
+await exporter.downloadZip();
+await exporter.uploadToHuggingFace({ apiKey, repoName });
+await exporter.uploadToS3({ credentials });
+```
+
+### Component Integration
+
+```typescript
+// React component - direct library usage like calibration
+const [recordingState, setRecordingState] = useState<RecordingState>();
+const [recordingData, setRecordingData] = useState<RecordingData>();
+const recordProcessRef = useRef<RecordProcess | null>(null);
+
+useEffect(() => {
+  const initRecording = async () => {
+    const process = await record({
+      robot,
+      options: {
+        onStateUpdate: setRecordingState,
+        onDataUpdate: setRecordingData,
+      },
+    });
+    recordProcessRef.current = process;
+  };
+  initRecording();
+}, [robot]);
+
+const handleStartRecording = () => {
+  recordProcessRef.current?.start();
+};
+
+const handleStopRecording = async () => {
+  recordProcessRef.current?.stop();
+  const data = await recordProcessRef.current?.result;
+  // Handle recorded data
+};
+```
+
+## Implementation Details
+
+### File Structure Refactoring
+
+```
+packages/web/src/
+├── record.ts                         # NEW: Clean record() function
+├── types/
+│   └── recording.ts                  # NEW: Recording-specific types
+├── utils/
+│   └── recording-manager.ts          # NEW: Internal recording logic
+├── teleoperators/
+│   └── base-teleoperator.ts          # UPDATED: Remove recording logic
+└── [MOVED TO EXAMPLES]
+    ├── LeRobotDatasetRecorder.ts      # Complex export logic
+    ├── dataset-exporter.ts            # Video + export functionality
+    └── upload-handlers.ts             # HuggingFace, S3 upload logic
+```
+
+### Key Dependencies
+
+#### No New Dependencies for Standard Library
+
+- **Existing**: Reuse all current dependencies (motor communication, teleoperation integration)
+- **Architecture Only**: Pure refactoring to clean up existing functionality
+
+#### Demo Dependencies (Moved)
+
+- **Video/Export**: `parquet-wasm`, `apache-arrow`, `jszip` - moved to examples
+- **Upload**: `@huggingface/hub`, AWS SDK - moved to examples
+
+### Core Functions to Implement
+
+#### Clean Record API
+
+```typescript
+// record.ts - New clean API
+interface RecordConfig {
+  robot: RobotConnection;
+  options?: {
+    fps?: number; // Default: 30
+    onDataUpdate?: (data: RecordingData) => void;
+    onStateUpdate?: (state: RecordingState) => void;
+  };
+}
+
+interface RecordProcess {
+  start(): void;
+  stop(): void;
+  getState(): RecordingState;
+  result: Promise<RobotRecordingData>;
+}
+
+interface RecordingState {
+  isActive: boolean;
+  frameCount: number;
+  episodeCount: number;
+  duration: number; // milliseconds
+  lastUpdate: number;
+}
+
+interface RecordingData {
+  frameCount: number;
+  currentEpisode: number;
+  recentFrames: MotorPositionFrame[]; // Last few frames for UI
+}
+
+interface RobotRecordingData {
+  episodes: MotorPositionFrame[][]; // Pure motor data only
+  metadata: {
+    fps: number;
+    robotType: string;
+    startTime: number;
+    endTime: number;
+    totalFrames: number;
+    totalEpisodes: number;
+  };
+}
+
+// Main function - matches our conventions
+export async function record(config: RecordConfig): Promise<RecordProcess>;
+```
+
+#### Recording Manager (Internal)
+
+```typescript
+// utils/recording-manager.ts - Internal implementation
+class RecordingManager {
+  private robot: RobotConnection;
+  private isActive: boolean = false;
+  private episodes: MotorPositionFrame[][] = [];
+  private currentEpisode: MotorPositionFrame[] = [];
+  private startTime: number = 0;
+  private frameCount: number = 0;
+
+  constructor(
+    robot: RobotConnection,
+    private options: RecordOptions,
+    private onDataUpdate?: (data: RecordingData) => void,
+    private onStateUpdate?: (state: RecordingState) => void
+  ) {
+    this.robot = robot;
+  }
+
+  start(): void {
+    if (this.isActive) return;
+
+    this.isActive = true;
+    this.startTime = Date.now();
+
+    // Subscribe to teleoperation changes (NO events, just callbacks)
+    this.subscribeToRobotChanges();
+
+    this.notifyStateUpdate();
+  }
+
+  stop(): void {
+    if (!this.isActive) return;
+
+    this.isActive = false;
+    this.finishCurrentEpisode();
+    this.unsubscribeFromRobotChanges();
+
+    this.notifyStateUpdate();
+  }
+
+  private subscribeToRobotChanges(): void {
+    // Listen to existing teleoperation callbacks - no new events needed
+    // This integrates with the existing onStateUpdate mechanism
+  }
+
+  private recordFrame(motorConfigs: MotorConfig[]): void {
+    const frame: MotorPositionFrame = {
+      timestamp: Date.now() - this.startTime,
+      motorPositions: motorConfigs.map((config) => ({
+        id: config.id,
+        name: config.name,
+        position: config.currentPosition,
+      })),
+      frameIndex: this.frameCount++,
+    };
+
+    this.currentEpisode.push(frame);
+
+    if (this.onDataUpdate) {
+      this.onDataUpdate({
+        frameCount: this.frameCount,
+        currentEpisode: this.episodes.length,
+        recentFrames: this.currentEpisode.slice(-10), // Last 10 frames
+      });
+    }
+  }
+
+  getState(): RecordingState {
+    return {
+      isActive: this.isActive,
+      frameCount: this.frameCount,
+      episodeCount: this.episodes.length,
+      duration: this.isActive ? Date.now() - this.startTime : 0,
+      lastUpdate: Date.now(),
+    };
+  }
+
+  async getResult(): Promise<RobotRecordingData> {
+    return {
+      episodes: [...this.episodes],
+      metadata: {
+        fps: this.options.fps || 30,
+        robotType: this.robot.robotType || "unknown",
+        startTime: this.startTime,
+        endTime: Date.now(),
+        totalFrames: this.frameCount,
+        totalEpisodes: this.episodes.length,
+      },
+    };
+  }
+}
+```
+
+#### Updated Teleoperate Integration
+
+```typescript
+// teleoperate.ts - Remove 100ms polling, add immediate callbacks
+export async function teleoperate(
+  config: TeleoperateConfig
+): Promise<TeleoperationProcess> {
+  const teleoperator = await createTeleoperatorProcess(config);
+
+  return {
+    start: () => {
+      teleoperator.start();
+
+      // NO MORE 100ms polling! Use immediate callbacks
+      if (config.onStateUpdate) {
+        teleoperator.setStateUpdateCallback(config.onStateUpdate);
+      }
+    },
+    // ... rest of interface
+  };
+}
+```
+
+#### Clean Teleoperator Base
+
+```typescript
+// teleoperators/base-teleoperator.ts - Remove recording logic
+export abstract class BaseWebTeleoperator extends WebTeleoperator {
+  protected port: MotorCommunicationPort;
+  public motorConfigs: MotorConfig[] = [];
+  protected isActive: boolean = false;
+
+  // REMOVED: All recording-related properties
+  // REMOVED: dispatchMotorPositionChanged events
+  // REMOVED: recordedMotorPositions, episodeIndex, etc.
+
+  private stateUpdateCallback?: (state: TeleoperationState) => void;
+
+  setStateUpdateCallback(callback: (state: TeleoperationState) => void): void {
+    this.stateUpdateCallback = callback;
+  }
+
+  protected motorPositionsChanged(): void {
+    // Call immediately when motors change - no events, no 100ms delay
+    if (this.stateUpdateCallback) {
+      const state = this.buildCurrentState();
+      this.stateUpdateCallback(state);
+    }
+  }
+
+  // Clean implementation without recording concerns
+}
+```
+
+### Technical Considerations
+
+#### Migration Strategy
+
+**Preserve Existing Functionality:**
+
+1. **Move Complex Logic**: `LeRobotDatasetRecorder` moves to `examples/` as demo code
+2. **Extract Clean Core**: Create new `record()` function for standard library
+3. **Update Examples**: Cyberpunk demo uses new API with demo-layer export functionality
+4. **Remove Event System**: Clean up unused `dispatchMotorPositionChanged` events
+5. **Fix Polling**: Replace 100ms polling with immediate callbacks
+
+#### Performance Improvements
+
+- **Remove Polling**: Eliminate artificial 100ms delays in favor of immediate callbacks
+- **Event-Driven**: Only fire callbacks when robot state actually changes
+- **Memory Efficiency**: No unused event listeners or redundant data structures
+- **Responsive UI**: Immediate feedback for recording status and data updates
+
+#### Future Extensibility
+
+The clean architecture supports advanced recording features as demo enhancements:
+
+```typescript
+// Future: Advanced demo features (NOT in standard library)
+class AdvancedDatasetExporter extends DatasetExporter {
+  // Video synchronization, multi-camera support
+  // Cloud storage, data preprocessing
+  // Visualization, playback, analysis tools
+}
+```
+
+## Definition of Done
+
+- [ ] **Clean Record API**: `record(config)` function implemented matching our established patterns
+- [ ] **Process Interface**: `RecordProcess` with consistent `start()`, `stop()`, `getState()`, `result` methods
+- [ ] **Hardware-Only Library**: Standard library captures only robot motor data, no video/export complexity
+- [ ] **Demo Separation**: Video recording, export formats, and UI logic moved to examples layer
+- [ ] **Remove Events**: `dispatchMotorPositionChanged` events eliminated, callbacks used exclusively
+- [ ] **Fix Polling**: 100ms artificial polling replaced with immediate callbacks when motors change
+- [ ] **Clean Teleoperators**: Recording logic extracted from `BaseWebTeleoperator` and teleoperator classes
+- [ ] **TypeScript Coverage**: Full type safety with proper interfaces for all recording functionality
+- [ ] **Performance**: Immediate, event-driven updates with no unnecessary polling or unused listeners
+- [ ] **Integration**: Easy integration with existing teleoperation workflows using familiar patterns
+- [ ] **Example Updates**: Cyberpunk demo updated to use new clean API with demo-layer export features
+- [ ] **No Regression**: All existing recording functionality preserved through demo layer
+- [ ] **Documentation**: Clear examples showing standard library vs demo separation

examples/cyberpunk-standalone/package.json

@@ -10,7 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@aws-sdk/client-s3": "^3.850.0",
+    "@aws-sdk/lib-storage": "^3.850.0",
     "@hookform/resolvers": "^3.9.1",
+    "@huggingface/hub": "^2.4.0",
     "@lerobot/web": "file:../../packages/web",
     "@radix-ui/react-accordion": "1.2.2",
     "@radix-ui/react-alert-dialog": "1.1.4",
@@ -39,7 +42,11 @@
     "@radix-ui/react-toggle": "1.1.1",
     "@radix-ui/react-toggle-group": "1.1.1",
     "@radix-ui/react-tooltip": "1.1.6",
+    "@react-three/cannon": "^6.6.0",
+    "@react-three/drei": "^10.6.0",
+    "@react-three/fiber": "^9.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
+    "apache-arrow": "^21.0.0",
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -49,16 +56,19 @@
     "input-otp": "1.4.1",
     "lucide-react": "^0.454.0",
     "next-themes": "^0.4.6",
+    "parquet-wasm": "^0.6.1",
     "react": "^19",
     "react-day-picker": "8.10.1",
     "react-dom": "^19",
     "react-hook-form": "^7.54.1",
     "react-resizable-panels": "^2.1.7",
+    "react-router-dom": "^7.7.1",
     "react-syntax-highlighter": "^15.6.1",
     "recharts": "2.15.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
+    "three": "^0.178.0",
     "vaul": "^0.9.6",
     "zod": "^3.24.1"
   },

examples/cyberpunk-standalone/src/App.tsx

@@ -1,4 +1,11 @@
 import { useState, useEffect, useRef } from "react";
+import {
+  Routes,
+  Route,
+  useNavigate,
+  useParams,
+  useLocation,
+} from "react-router-dom";
 import { ChevronLeft } from "lucide-react";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
@@ -27,19 +34,15 @@ import {
 } from "@/lib/unified-storage";
 
 function App() {
-  const [view, setView] = useState<
-    "dashboard" | "calibrating" | "teleoperating"
-  >("dashboard");
   const [robots, setRobots] = useState<RobotConnection[]>([]);
-  const [selectedRobot, setSelectedRobot] = useState<RobotConnection | null>(
-    null
-  );
   const [editingRobot, setEditingRobot] = useState<RobotConnection | null>(
     null
   );
   const [isConnecting, setIsConnecting] = useState(false);
   const hardwareSectionRef = useRef<HTMLDivElement>(null);
   const { toast } = useToast();
+  const navigate = useNavigate();
+  const location = useLocation();
 
   // Check browser support
   const isSupported = isWebSerialSupported();
@@ -231,8 +234,7 @@ function App() {
       return;
     }
 
-    setSelectedRobot(robot);
-    setView("calibrating");
+    navigate(`/device/${robot.serialNumber}/calibrate`);
   };
 
   const handleTeleoperate = (robot: RobotConnection) => {
@@ -245,122 +247,57 @@ function App() {
       return;
     }
 
-    setSelectedRobot(robot);
-    setView("teleoperating");
+    navigate(`/device/${robot.serialNumber}/control`);
   };
 
-  const handleCloseSubView = () => {
-    setSelectedRobot(null);
-    setView("dashboard");
+  const handleBackToDashboard = () => {
+    navigate("/");
   };
 
   const scrollToHardware = () => {
     hardwareSectionRef.current?.scrollIntoView({ behavior: "smooth" });
   };
 
-  const renderView = () => {
-    switch (view) {
-      case "calibrating":
-        return selectedRobot && <CalibrationView robot={selectedRobot} />;
-      case "teleoperating":
-        return selectedRobot && <TeleoperationView robot={selectedRobot} />;
-      case "dashboard":
-      default:
-        return (
-          <div className="space-y-20">
-            <DeviceDashboard
-              robots={robots}
-              onCalibrate={handleCalibrate}
-              onTeleoperate={handleTeleoperate}
-              onRemove={handleRemoveRobot}
-              onEdit={setEditingRobot}
-              onFindNew={handleFindNewRobots}
-              isConnecting={isConnecting}
-              onScrollToHardware={scrollToHardware}
-            />
-            <div>
-              <div className="mb-6">
-                <h2 className="text-3xl font-bold font-mono tracking-wider mb-2 uppercase">
-                  install
-                </h2>
-                <p className="text-sm text-muted-foreground font-mono">
-                  Choose your preferred development environment
-                </p>
-              </div>
-              <SetupCards />
-            </div>
-            <DocsSection />
-            <RoadmapSection />
-            <div ref={hardwareSectionRef}>
-              <HardwareSupportSection />
-            </div>
-          </div>
-        );
-    }
-  };
-
-  const PageHeader = () => {
-    return (
-      <div className="flex items-center justify-between mb-12">
-        <div className="flex items-center gap-4">
-          <div>
-            {view === "calibrating" && selectedRobot ? (
-              <h1 className="font-mono text-4xl font-bold tracking-wider">
-                <span className="text-muted-foreground uppercase">
-                  calibrate:
-                </span>{" "}
-                <span
-                  className="text-primary text-glitch uppercase"
-                  data-text={selectedRobot.robotId}
-                >
-                  {selectedRobot.robotId?.toUpperCase()}
-                </span>
-              </h1>
-            ) : view === "teleoperating" && selectedRobot ? (
-              <h1 className="font-mono text-4xl font-bold tracking-wider">
-                <span className="text-muted-foreground uppercase">
-                  teleoperate:
-                </span>{" "}
-                <span
-                  className="text-primary text-glitch uppercase"
-                  data-text={selectedRobot.robotId}
-                >
-                  {selectedRobot.robotId?.toUpperCase()}
-                </span>
-              </h1>
-            ) : (
-              <h1
-                className="font-mono text-4xl font-bold text-primary tracking-wider text-glitch uppercase"
-                data-text="dashboard"
-              >
-                DASHBOARD
-              </h1>
-            )}
-            <div className="h-6 flex items-center">
-              {view !== "dashboard" ? (
-                <button
-                  onClick={handleCloseSubView}
-                  className="flex items-center gap-2 text-sm text-muted-foreground font-mono hover:text-primary transition-colors"
-                >
-                  <ChevronLeft className="w-4 h-4" />
-                  <span className="uppercase">back to dashboard</span>
-                </button>
-              ) : (
-                <p className="text-sm text-muted-foreground font-mono">{""} </p>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   return (
     <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 />
-        {renderView()}
+        <Routes>
+          <Route
+            path="/"
+            element={
+              <DashboardPage
+                robots={robots}
+                onCalibrate={handleCalibrate}
+                onTeleoperate={handleTeleoperate}
+                onRemove={handleRemoveRobot}
+                onEdit={setEditingRobot}
+                onFindNew={handleFindNewRobots}
+                isConnecting={isConnecting}
+                onScrollToHardware={scrollToHardware}
+                hardwareSectionRef={hardwareSectionRef}
+              />
+            }
+          />
+          <Route
+            path="/device/:serialNumber/calibrate"
+            element={
+              <CalibratePage
+                robots={robots}
+                onBackToDashboard={handleBackToDashboard}
+              />
+            }
+          />
+          <Route
+            path="/device/:serialNumber/control"
+            element={
+              <ControlPage
+                robots={robots}
+                onBackToDashboard={handleBackToDashboard}
+              />
+            }
+          />
+        </Routes>
         <EditRobotDialog
           robot={editingRobot}
           isOpen={!!editingRobot}
@@ -374,4 +311,203 @@ function App() {
   );
 }
 
+// Dashboard Page Component
+function DashboardPage({
+  robots,
+  onCalibrate,
+  onTeleoperate,
+  onRemove,
+  onEdit,
+  onFindNew,
+  isConnecting,
+  onScrollToHardware,
+  hardwareSectionRef,
+}: {
+  robots: RobotConnection[];
+  onCalibrate: (robot: RobotConnection) => void;
+  onTeleoperate: (robot: RobotConnection) => void;
+  onRemove: (robot: RobotConnection) => void;
+  onEdit: (robot: RobotConnection | null) => void;
+  onFindNew: () => void;
+  isConnecting: boolean;
+  onScrollToHardware: () => void;
+  hardwareSectionRef: React.RefObject<HTMLDivElement>;
+}) {
+  return (
+    <div>
+      <PageHeader />
+      <div className="space-y-20">
+        <DeviceDashboard
+          robots={robots}
+          onCalibrate={onCalibrate}
+          onTeleoperate={onTeleoperate}
+          onRemove={onRemove}
+          onEdit={onEdit}
+          onFindNew={onFindNew}
+          isConnecting={isConnecting}
+          onScrollToHardware={onScrollToHardware}
+        />
+        <div>
+          <div className="mb-6">
+            <h2 className="text-3xl font-bold font-mono tracking-wider mb-2 uppercase">
+              install
+            </h2>
+            <p className="text-sm text-muted-foreground font-mono">
+              Choose your preferred development environment
+            </p>
+          </div>
+          <SetupCards />
+        </div>
+        <DocsSection />
+        <RoadmapSection />
+        <div ref={hardwareSectionRef}>
+          <HardwareSupportSection />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Calibrate Page Component
+function CalibratePage({
+  robots,
+  onBackToDashboard,
+}: {
+  robots: RobotConnection[];
+  onBackToDashboard: () => void;
+}) {
+  const { serialNumber } = useParams<{ serialNumber: string }>();
+  const selectedRobot = robots.find(
+    (robot) => robot.serialNumber === serialNumber
+  );
+
+  if (!selectedRobot) {
+    return (
+      <div>
+        <PageHeader onBackToDashboard={onBackToDashboard} />
+        <div className="text-center py-20">
+          <p className="text-muted-foreground">
+            Device not found or not connected.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader
+        onBackToDashboard={onBackToDashboard}
+        selectedRobot={selectedRobot}
+      />
+      <CalibrationView robot={selectedRobot} />
+    </div>
+  );
+}
+
+// Control Page Component
+function ControlPage({
+  robots,
+  onBackToDashboard,
+}: {
+  robots: RobotConnection[];
+  onBackToDashboard: () => void;
+}) {
+  const { serialNumber } = useParams<{ serialNumber: string }>();
+  const selectedRobot = robots.find(
+    (robot) => robot.serialNumber === serialNumber
+  );
+
+  if (!selectedRobot) {
+    return (
+      <div>
+        <PageHeader onBackToDashboard={onBackToDashboard} />
+        <div className="text-center py-20">
+          <p className="text-muted-foreground">
+            Device not found or not connected.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <PageHeader
+        onBackToDashboard={onBackToDashboard}
+        selectedRobot={selectedRobot}
+      />
+      <TeleoperationView robot={selectedRobot} />
+    </div>
+  );
+}
+
+// Page Header Component
+function PageHeader({
+  onBackToDashboard,
+  selectedRobot,
+}: {
+  onBackToDashboard?: () => void;
+  selectedRobot?: RobotConnection | null;
+}) {
+  const location = useLocation();
+  const isDashboard = location.pathname === "/";
+  const isCalibrating = location.pathname.includes("/calibrate");
+  const isTeleoperating = location.pathname.includes("/control");
+
+  return (
+    <div className="flex items-center justify-between mb-12">
+      <div className="flex items-center gap-4">
+        <div>
+          {isCalibrating && selectedRobot ? (
+            <h1 className="font-mono text-4xl font-bold tracking-wider">
+              <span className="text-muted-foreground uppercase">
+                calibrate:
+              </span>{" "}
+              <span
+                className="text-primary text-glitch uppercase"
+                data-text={selectedRobot.robotId}
+              >
+                {selectedRobot.robotId?.toUpperCase()}
+              </span>
+            </h1>
+          ) : isTeleoperating && selectedRobot ? (
+            <h1 className="font-mono text-4xl font-bold tracking-wider">
+              <span className="text-muted-foreground uppercase">
+                teleoperate:
+              </span>{" "}
+              <span
+                className="text-primary text-glitch uppercase"
+                data-text={selectedRobot.robotId}
+              >
+                {selectedRobot.robotId?.toUpperCase()}
+              </span>
+            </h1>
+          ) : (
+            <h1
+              className="font-mono text-4xl font-bold text-primary tracking-wider text-glitch uppercase"
+              data-text="dashboard"
+            >
+              DASHBOARD
+            </h1>
+          )}
+          <div className="h-6 flex items-center">
+            {!isDashboard && onBackToDashboard ? (
+              <button
+                onClick={onBackToDashboard}
+                className="flex items-center gap-2 text-sm text-muted-foreground font-mono hover:text-primary transition-colors"
+              >
+                <ChevronLeft className="w-4 h-4" />
+                <span className="uppercase">back to dashboard</span>
+              </button>
+            ) : (
+              <p className="text-sm text-muted-foreground font-mono">{""} </p>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default App;

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

@@ -0,0 +1,1318 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useToast } from "@/hooks/use-toast";
+import {
+  Disc as Record,
+  Download,
+  Upload,
+  PlusCircle,
+  Square,
+  Camera,
+  Trash2,
+  Settings,
+  RefreshCw,
+  X,
+  Edit2,
+  Check,
+} from "lucide-react";
+import { LeRobotDatasetRecorder, LeRobotDatasetRow, NonIndexedLeRobotDatasetRow, LeRobotEpisode } from "@lerobot/web";
+import { TeleoperatorEpisodesView } from "./teleoperator-episodes-view";
+
+interface RecorderProps {
+  teleoperators: any[];
+  robot: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  onNeedsTeleoperation: () => Promise<boolean>;
+  videoStreams?: { [key: string]: MediaStream };
+}
+
+
+
+interface RecorderSettings {
+  huggingfaceApiKey: string;
+  cameraConfigs: {
+    [cameraName: string]: {
+      deviceId: string;
+      deviceLabel: string;
+    };
+  };
+}
+
+// Storage functions for recorder settings
+const RECORDER_SETTINGS_KEY = "lerobot-recorder-settings";
+
+function getRecorderSettings(): RecorderSettings {
+  try {
+    const stored = localStorage.getItem(RECORDER_SETTINGS_KEY);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.warn("Failed to load recorder settings:", error);
+  }
+  return {
+    huggingfaceApiKey: "",
+    cameraConfigs: {},
+  };
+}
+
+function saveRecorderSettings(settings: RecorderSettings): void {
+  try {
+    localStorage.setItem(RECORDER_SETTINGS_KEY, JSON.stringify(settings));
+  } catch (error) {
+    console.warn("Failed to save recorder settings:", error);
+  }
+}
+
+export function Recorder({
+  teleoperators,
+  robot,
+  onNeedsTeleoperation,
+}: RecorderProps) {
+  const [isRecording, setIsRecording] = useState(false);
+  const [currentEpisode, setCurrentEpisode] = useState(0);
+  // Use huggingfaceApiKey from recorderSettings instead of separate state
+  const [cameraName, setCameraName] = useState("");
+  const [additionalCameras, setAdditionalCameras] = useState<{
+    [key: string]: MediaStream;
+  }>({});
+  const [availableCameras, setAvailableCameras] = useState<MediaDeviceInfo[]>(
+    []
+  );
+  const [selectedCameraId, setSelectedCameraId] = useState<string>("");
+  const [previewStream, setPreviewStream] = useState<MediaStream | null>(null);
+  const [isLoadingCameras, setIsLoadingCameras] = useState(false);
+  const [cameraPermissionState, setCameraPermissionState] = useState<
+    "unknown" | "granted" | "denied"
+  >("unknown");
+  const [showCameraConfig, setShowCameraConfig] = useState(false);
+  const [showConfigure, setShowConfigure] = useState(false);
+  const [recorderSettings, setRecorderSettings] = useState<RecorderSettings>(
+    () => getRecorderSettings()
+  );
+  const [hasRecordedFrames, setHasRecordedFrames] = useState(false);
+  const [editingCameraName, setEditingCameraName] = useState<string | null>(
+    null
+  );
+  const [editingCameraNewName, setEditingCameraNewName] = useState("");
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useState("")
+  const recorderRef = useRef<LeRobotDatasetRecorder | null>(null);
+  const videoRef = useRef<HTMLVideoElement | null>(null);
+  const { toast } = useToast();
+
+  // Initialize the recorder when teleoperators are available
+  useEffect(() => {
+    if (teleoperators.length > 0) {
+      recorderRef.current = new LeRobotDatasetRecorder(
+        teleoperators,
+        additionalCameras,
+        30, // fps
+        "Robot teleoperation recording"
+      );
+    }
+  }, [teleoperators, additionalCameras]);
+
+  const handleStartRecording = async () => {
+    // If teleoperators aren't available, initialize teleoperation first
+    if (teleoperators.length === 0) {
+      toast({
+        title: "Initializing...",
+        description: `Setting up robot control for ${robot.robotId || "robot"}`,
+      });
+
+      const success = await onNeedsTeleoperation();
+      if (!success) {
+        toast({
+          title: "Recording Error",
+          description: "Failed to initialize robot control",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      // Wait a moment for the recorder to initialize with new teleoperators
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+
+    if (!recorderRef.current) {
+      toast({
+        title: "Recording Error",
+        description: "Recorder not ready yet. Please try again.",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      // Set the episode index
+      recorderRef.current.setEpisodeIndex(currentEpisode);
+      recorderRef.current.setTaskIndex(0); // Default task index
+
+      // Start recording
+      recorderRef.current.startRecording();
+      setIsRecording(true);
+      setHasRecordedFrames(true);
+
+      toast({
+        title: "Recording Started",
+        description: `Episode ${currentEpisode} is now recording`,
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to start recording";
+      toast({
+        title: "Recording Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleStopRecording = async () => {
+    if (!recorderRef.current || !isRecording) {
+      return;
+    }
+
+    try {
+      const result = await recorderRef.current.stopRecording();
+      setIsRecording(false);
+
+      toast({
+        title: "Recording Stopped",
+        description: `Episode ${currentEpisode} completed with ${result.teleoperatorData.length} frames`,
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to stop recording";
+      toast({
+        title: "Recording Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handleNextEpisode = () => {
+    // Make sure we're not recording
+    if (isRecording) {
+      handleStopRecording();
+    }
+
+    // Increment episode counter
+    setCurrentEpisode((prev) => prev + 1);
+
+    toast({
+      title: "New Episode",
+      description: `Ready to record episode ${currentEpisode + 1}`,
+    });
+  };
+
+  // Reset frames by clearing the recorder data
+  const handleResetFrames = useCallback(() => {
+    if (isRecording) {
+      handleStopRecording();
+    }
+
+    if (recorderRef.current) {
+      recorderRef.current.clearRecording();
+      setHasRecordedFrames(false);
+
+      toast({
+        title: "Frames Reset",
+        description: "All recorded frames have been cleared",
+      });
+    }
+  }, [isRecording, toast]);
+
+  // Load available cameras
+  const loadAvailableCameras = useCallback(
+    async (isAutoLoad = false) => {
+      if (isLoadingCameras) return;
+
+      setIsLoadingCameras(true);
+
+      try {
+        // Check if we already have permission
+        const permission = await navigator.permissions.query({
+          name: "camera" as PermissionName,
+        });
+        setCameraPermissionState(
+          permission.state === "granted"
+            ? "granted"
+            : permission.state === "denied"
+            ? "denied"
+            : "unknown"
+        );
+
+        let tempStream: MediaStream | null = null;
+
+        // Try to enumerate devices first (works if we have permission)
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        // If devices have labels, we already have permission
+        const hasLabels = videoDevices.some((device) => device.label);
+        let finalVideoDevices = videoDevices;
+
+        if (!hasLabels && videoDevices.length > 0) {
+          // Need to request permission to get device labels
+          tempStream = await navigator.mediaDevices.getUserMedia({
+            video: true,
+          });
+
+          // Re-enumerate to get labels
+          const devicesWithLabels =
+            await navigator.mediaDevices.enumerateDevices();
+          const videoDevicesWithLabels = devicesWithLabels.filter(
+            (device) => device.kind === "videoinput"
+          );
+          finalVideoDevices = videoDevicesWithLabels;
+          setAvailableCameras(videoDevicesWithLabels);
+
+          if (!isAutoLoad) {
+            console.log(
+              `Found ${videoDevicesWithLabels.length} video devices:`,
+              videoDevicesWithLabels.map((d) => d.label || d.deviceId)
+            );
+          }
+        } else {
+          setAvailableCameras(videoDevices);
+          if (!isAutoLoad) {
+            console.log(
+              `Found ${videoDevices.length} video devices:`,
+              videoDevices.map((d) => d.label || d.deviceId)
+            );
+          }
+        }
+
+        // Auto-select and preview first camera if none selected
+        if (finalVideoDevices.length > 0 && !selectedCameraId) {
+          const firstCameraId = finalVideoDevices[0].deviceId;
+
+          // Stop temp stream since we'll create a fresh one with switchCameraPreview
+          if (tempStream) {
+            tempStream.getTracks().forEach((track) => track.stop());
+          }
+
+          setCameraPermissionState("granted");
+
+          // Use the same logic as manual camera switching
+          await switchCameraPreview(firstCameraId);
+        } else if (tempStream) {
+          // Stop temp stream if we didn't use it
+          tempStream.getTracks().forEach((track) => track.stop());
+        }
+      } catch (error) {
+        setCameraPermissionState("denied");
+        if (!isAutoLoad) {
+          toast({
+            title: "Camera Error",
+            description: `Failed to load cameras: ${
+              error instanceof Error ? error.message : String(error)
+            }`,
+            variant: "destructive",
+          });
+        }
+      } finally {
+        setIsLoadingCameras(false);
+      }
+    },
+    [selectedCameraId, toast]
+  );
+
+  // Switch camera preview
+  const switchCameraPreview = useCallback(
+    async (deviceId: string) => {
+      try {
+        // Stop current preview stream
+        if (previewStream) {
+          previewStream.getTracks().forEach((track) => track.stop());
+        }
+
+        // Start new stream with selected camera
+        const newStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            deviceId: { exact: deviceId },
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
+          },
+        });
+
+        setPreviewStream(newStream);
+        setSelectedCameraId(deviceId);
+      } catch (error) {
+        toast({
+          title: "Camera Error",
+          description: `Failed to switch camera: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          variant: "destructive",
+        });
+      }
+    },
+    [previewStream, toast]
+  );
+
+  // Add a new camera to the recorder
+  const handleAddCamera = useCallback(async () => {
+    if (!cameraName.trim()) {
+      toast({
+        title: "Camera Error",
+        description: "Please enter a camera name",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (hasRecordedFrames) {
+      toast({
+        title: "Camera Error",
+        description: "Cannot add cameras after recording has started",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!selectedCameraId) {
+      toast({
+        title: "Camera Error",
+        description: "Please select a camera first",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      // Use the current preview stream (already running with correct camera)
+      if (!previewStream) {
+        throw new Error("No camera preview available");
+      }
+
+      // Clone the stream for recording (keep preview running)
+      const recordingStream = previewStream.clone();
+
+      // Add the new camera to our state
+      setAdditionalCameras((prev) => ({
+        ...prev,
+        [cameraName]: recordingStream,
+      }));
+
+      // Save camera configuration to persistent storage
+      const selectedCamera = availableCameras.find(
+        (cam) => cam.deviceId === selectedCameraId
+      );
+      const newSettings = {
+        ...recorderSettings,
+        cameraConfigs: {
+          ...recorderSettings.cameraConfigs,
+          [cameraName]: {
+            deviceId: selectedCameraId,
+            deviceLabel:
+              selectedCamera?.label ||
+              `Camera ${selectedCameraId.slice(0, 8)}...`,
+          },
+        },
+      };
+      setRecorderSettings(newSettings);
+      saveRecorderSettings(newSettings);
+
+      setCameraName(""); // Clear the input
+
+      toast({
+        title: "Camera Added",
+        description: `Camera "${cameraName}" has been added to the recorder`,
+      });
+    } catch (error) {
+      toast({
+        title: "Camera Error",
+        description: `Failed to access camera: ${
+          error instanceof Error ? error.message : String(error)
+        }`,
+        variant: "destructive",
+      });
+    }
+  }, [
+    cameraName,
+    hasRecordedFrames,
+    selectedCameraId,
+    previewStream,
+    availableCameras,
+    recorderSettings,
+    toast,
+  ]);
+
+  // Remove a camera from the recorder
+  const handleRemoveCamera = useCallback(
+    (name: string) => {
+      if (hasRecordedFrames) {
+        toast({
+          title: "Camera Error",
+          description: "Cannot remove cameras after recording has started",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      setAdditionalCameras((prev) => {
+        const newCameras = { ...prev };
+        if (newCameras[name]) {
+          // Stop the stream tracks
+          newCameras[name].getTracks().forEach((track) => track.stop());
+          delete newCameras[name];
+        }
+        return newCameras;
+      });
+
+      // Remove camera configuration from persistent storage
+      const newSettings = {
+        ...recorderSettings,
+        cameraConfigs: { ...recorderSettings.cameraConfigs },
+      };
+      delete newSettings.cameraConfigs[name];
+      setRecorderSettings(newSettings);
+      saveRecorderSettings(newSettings);
+
+      toast({
+        title: "Camera Removed",
+        description: `Camera "${name}" has been removed`,
+      });
+    },
+    [hasRecordedFrames, recorderSettings, toast]
+  );
+
+  // Camera name editing functions
+  const handleStartEditingCameraName = (cameraName: string) => {
+    setEditingCameraName(cameraName);
+    setEditingCameraNewName(cameraName);
+  };
+
+  const handleConfirmCameraNameEdit = (oldName: string) => {
+    if (editingCameraNewName.trim() && editingCameraNewName !== oldName) {
+      const stream = additionalCameras[oldName];
+      if (stream) {
+        // Update camera streams
+        setAdditionalCameras((prev) => {
+          const newCameras = { ...prev };
+          delete newCameras[oldName];
+          newCameras[editingCameraNewName.trim()] = stream;
+          return newCameras;
+        });
+
+        // Update camera configuration in persistent storage
+        const oldConfig = recorderSettings.cameraConfigs[oldName];
+        if (oldConfig) {
+          const newSettings = {
+            ...recorderSettings,
+            cameraConfigs: { ...recorderSettings.cameraConfigs },
+          };
+          delete newSettings.cameraConfigs[oldName];
+          newSettings.cameraConfigs[editingCameraNewName.trim()] = oldConfig;
+          setRecorderSettings(newSettings);
+          saveRecorderSettings(newSettings);
+        }
+      }
+    }
+    setEditingCameraName(null);
+    setEditingCameraNewName("");
+  };
+
+  const handleCancelCameraNameEdit = () => {
+    setEditingCameraName(null);
+    setEditingCameraNewName("");
+  };
+
+  // Restore cameras from saved configurations
+  const restoreSavedCameras = useCallback(async () => {
+    const savedConfigs = recorderSettings.cameraConfigs;
+    if (!savedConfigs || Object.keys(savedConfigs).length === 0) {
+      return;
+    }
+
+    for (const [cameraName, config] of Object.entries(savedConfigs)) {
+      try {
+        // Check if this camera is still available
+        const isDeviceAvailable = availableCameras.some(
+          (cam) => cam.deviceId === config.deviceId
+        );
+
+        if (!isDeviceAvailable) {
+          console.warn(
+            `Saved camera "${cameraName}" (${config.deviceId}) is no longer available`
+          );
+          continue;
+        }
+
+        // Create stream for this saved camera
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            deviceId: { exact: config.deviceId },
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
+          },
+        });
+
+        // Add to additional cameras
+        setAdditionalCameras((prev) => ({
+          ...prev,
+          [cameraName]: stream,
+        }));
+      } catch (error) {
+        console.error(`Failed to restore camera "${cameraName}":`, error);
+        // Remove invalid configuration
+        const newSettings = {
+          ...recorderSettings,
+          cameraConfigs: { ...recorderSettings.cameraConfigs },
+        };
+        delete newSettings.cameraConfigs[cameraName];
+        setRecorderSettings(newSettings);
+        saveRecorderSettings(newSettings);
+      }
+    }
+  }, [availableCameras, recorderSettings]);
+
+  // Auto-load cameras on component mount (only once)
+  useEffect(() => {
+    loadAvailableCameras(true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // Empty dependency array to run only once
+
+  // Handle video stream assignment - runs when stream changes OR when settings panel opens
+  useEffect(() => {
+    if (videoRef.current && previewStream) {
+      videoRef.current.srcObject = previewStream;
+    }
+  }, [previewStream, showConfigure]); // Also depend on showConfigure so it re-runs when video element appears
+
+  // Cleanup preview stream on unmount
+  useEffect(() => {
+    return () => {
+      if (previewStream) {
+        previewStream.getTracks().forEach((track) => track.stop());
+      }
+    };
+  }, [previewStream]);
+
+  // Restore saved cameras when available cameras are loaded
+  useEffect(() => {
+    if (availableCameras.length > 0 && cameraPermissionState === "granted") {
+      restoreSavedCameras();
+    }
+  }, [availableCameras, cameraPermissionState, restoreSavedCameras]);
+
+  const handleDownloadZip = async () => {
+    if (!recorderRef.current) {
+      toast({
+        title: "Download Error",
+        description: "Recorder not initialized",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    await recorderRef.current.exportForLeRobot("zip-download");
+    toast({
+      title: "Download Started",
+      description: "Your dataset is being downloaded as a ZIP file",
+    });
+  };
+
+  const handleUploadToHuggingFace = async () => {
+    if (!recorderRef.current) {
+      toast({
+        title: "Upload Error",
+        description: "Recorder not initialized",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    if (!recorderSettings.huggingfaceApiKey) {
+      toast({
+        title: "Upload Error",
+        description: "Please enter your Hugging Face API key in Configure",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    try {
+      toast({
+        title: "Upload Started",
+        description: "Uploading dataset to Hugging Face...",
+      });
+
+      // Generate a unique repository name
+      const repoName = `lerobot-recording-${Date.now()}`;
+
+      const uploader = await recorderRef.current.exportForLeRobot(
+        "huggingface",
+        {
+          repoName,
+          accessToken: recorderSettings.huggingfaceApiKey,
+        }
+      );
+
+      uploader.addEventListener("progress", (event: Event) => {
+        console.log(event);
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to upload to Hugging Face";
+      toast({
+        title: "Upload Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+    }
+  };
+
+  // Helper function to format duration
+  const formatDuration = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins.toString().padStart(2, "0")}:${secs
+      .toString()
+      .padStart(2, "0")}`;
+  };
+
+  return (
+    <Card className="border-0 rounded-none mt-6">
+      <div className="p-4 border-b border-white/10">
+        <div className="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">
+                robot movement recorder
+              </h3>
+              <p className="text-sm text-muted-foreground font-mono">
+                dataset <span className="text-muted-foreground">recording</span>{" "}
+                interface
+              </p>
+            </div>
+          </div>
+          <div className="flex items-center gap-6">
+            <div className="border-l border-white/10 pl-6 flex items-center gap-4">
+              <Button
+                variant="outline"
+                size="lg"
+                className="gap-2"
+                onClick={() => setShowConfigure(!showConfigure)}
+              >
+                <Settings className="w-5 h-5" />
+                Configure
+              </Button>
+
+              <Button
+                variant={isRecording ? "destructive" : "default"}
+                size="lg"
+                className="gap-2"
+                onClick={
+                  isRecording ? handleStopRecording : handleStartRecording
+                }
+              >
+                {isRecording ? (
+                  <>
+                    <Square className="w-5 h-5" />
+                    Stop Recording
+                  </>
+                ) : (
+                  <>
+                    <Record className="w-5 h-5" />
+                    Start Recording
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="p-6 space-y-6">
+        {/* Recorder Settings - Toggleable Inline */}
+        {showConfigure && (
+          <div className="space-y-6">
+            {/* Hugging Face Settings */}
+            <div className="space-y-3">
+              <h3 className="text-lg font-semibold text-foreground">
+                Settings
+              </h3>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm text-muted-foreground">
+                    Hugging Face API Key
+                  </label>
+                  <Input
+                    placeholder="Enter your Hugging Face API key"
+                    value={recorderSettings.huggingfaceApiKey}
+                    onChange={(e) => {
+                      const newSettings = {
+                        ...recorderSettings,
+                        huggingfaceApiKey: e.target.value,
+                      };
+                      setRecorderSettings(newSettings);
+                      saveRecorderSettings(newSettings);
+                    }}
+                    type="password"
+                    className="bg-black/20 border-white/10"
+                  />
+                  <p className="text-xs text-white/50">
+                    Required to upload datasets to Hugging Face Hub
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* Camera Configuration */}
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-foreground">
+                Camera Setup
+              </h3>
+              <div className="bg-black/40 border border-white/20 p-6">
+                <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                  {/* Left Column: Camera Selection & Adding */}
+                  <div className="space-y-4">
+                    {/* Camera Selection and Refresh */}
+
+                    {/* Camera Access Request */}
+                    {cameraPermissionState === "unknown" && (
+                      <div className="space-y-3">
+                        <div className="bg-black/60 border border-white/20 rounded-lg p-4 text-center">
+                          <Camera className="w-8 h-8 mx-auto mb-2 opacity-50" />
+                          <p className="text-sm text-white/70 mb-3">
+                            Camera access needed to configure cameras
+                          </p>
+                          <Button
+                            onClick={() => loadAvailableCameras(false)}
+                            variant="outline"
+                            className="gap-2"
+                            disabled={isLoadingCameras}
+                          >
+                            <Camera className="w-4 h-4" />
+                            {isLoadingCameras
+                              ? "Loading..."
+                              : "Request Camera Access"}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Camera Access Denied */}
+                    {cameraPermissionState === "denied" && (
+                      <div className="space-y-3">
+                        <div className="bg-red-900/20 border border-red-500/20 rounded-lg p-4 text-center">
+                          <Camera className="w-8 h-8 mx-auto mb-2 opacity-50 text-red-400" />
+                          <p className="text-sm text-red-300 mb-1">
+                            Camera access denied
+                          </p>
+                          <p className="text-xs text-red-400">
+                            Please allow camera access in your browser settings
+                            and refresh
+                          </p>
+                        </div>
+                      </div>
+                    )}
+
+                    {/* Camera List with Refresh Button */}
+                    {cameraPermissionState === "granted" &&
+                      availableCameras.length > 0 && (
+                        <div className="space-y-2">
+                          <label className="text-sm text-white/70">
+                            Select Camera:
+                          </label>
+                          <div className="flex items-center gap-2">
+                            <Select
+                              value={selectedCameraId}
+                              onValueChange={switchCameraPreview}
+                              disabled={hasRecordedFrames}
+                            >
+                              <SelectTrigger className="flex-1 bg-black/20 border-white/10">
+                                <SelectValue placeholder="Choose a camera" />
+                              </SelectTrigger>
+                              <SelectContent>
+                                {availableCameras.map((camera) => (
+                                  <SelectItem
+                                    key={camera.deviceId}
+                                    value={camera.deviceId}
+                                  >
+                                    {camera.label ||
+                                      `Camera ${camera.deviceId.slice(
+                                        0,
+                                        8
+                                      )}...`}
+                                  </SelectItem>
+                                ))}
+                              </SelectContent>
+                            </Select>
+                            <Button
+                              onClick={() => loadAvailableCameras(false)}
+                              variant="ghost"
+                              size="sm"
+                              className="gap-2 text-white/70 hover:text-white"
+                              disabled={isLoadingCameras}
+                            >
+                              <RefreshCw
+                                className={`w-4 h-4 ${
+                                  isLoadingCameras ? "animate-spin" : ""
+                                }`}
+                              />
+                              Refresh
+                            </Button>
+                          </div>
+                        </div>
+                      )}
+
+                    {/* Camera Name Input */}
+                    {selectedCameraId && (
+                      <div className="space-y-2">
+                        <label className="text-sm text-white/70">
+                          Camera Name:
+                        </label>
+                        <Input
+                          placeholder="e.g., 'Overhead View', 'Side Angle', 'Close-up'"
+                          value={cameraName}
+                          onChange={(e) => setCameraName(e.target.value)}
+                          className="bg-black/20 border-white/10"
+                          disabled={hasRecordedFrames}
+                        />
+                        <p className="text-xs text-white/50">
+                          Give this camera a descriptive name for your recording
+                          setup
+                        </p>
+                      </div>
+                    )}
+
+                    {/* Add Camera Button */}
+                    {selectedCameraId && (
+                      <div className="flex justify-end">
+                        <Button
+                          onClick={handleAddCamera}
+                          className="gap-2"
+                          disabled={
+                            hasRecordedFrames ||
+                            !cameraName.trim() ||
+                            !selectedCameraId ||
+                            !previewStream
+                          }
+                        >
+                          <PlusCircle className="w-4 h-4" />
+                          Add Camera to Recorder
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Right Column: Camera Preview */}
+                  <div className="space-y-4">
+                    <div className="aspect-video bg-black/60 border border-white/20 rounded-lg overflow-hidden">
+                      {previewStream ? (
+                        <video
+                          ref={videoRef}
+                          autoPlay
+                          muted
+                          playsInline
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="w-full h-full flex items-center justify-center text-white/60">
+                          <div className="text-center">
+                            <Camera className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                            {cameraPermissionState === "unknown" ? (
+                              <p className="text-sm">
+                                Request camera access to preview
+                              </p>
+                            ) : cameraPermissionState === "denied" ? (
+                              <p className="text-sm">Camera access denied</p>
+                            ) : availableCameras.length === 0 ? (
+                              <p className="text-sm">No cameras available</p>
+                            ) : !selectedCameraId ? (
+                              <p className="text-sm">
+                                Select a camera to preview
+                              </p>
+                            ) : (
+                              <p className="text-sm">Loading preview...</p>
+                            )}
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Added Camera Previews */}
+        {Object.keys(additionalCameras).length > 0 && (
+          <div className="space-y-4">
+            <h3 className="text-lg font-semibold text-foreground">
+              Active Cameras
+            </h3>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+              {Object.entries(additionalCameras).map(([cameraName, stream]) => (
+                <div
+                  key={cameraName}
+                  className="bg-black/40 border border-white/20 rounded-lg p-3 space-y-2"
+                >
+                  <div className="aspect-video bg-black/60 border border-white/10 rounded overflow-hidden">
+                    <video
+                      autoPlay
+                      muted
+                      playsInline
+                      className="w-full h-full object-cover"
+                      ref={(video) => {
+                        if (video && stream) {
+                          video.srcObject = stream;
+                        }
+                      }}
+                    />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    {editingCameraName === cameraName ? (
+                      <div className="flex items-center gap-1 flex-1">
+                        <Input
+                          value={editingCameraNewName}
+                          onChange={(e) =>
+                            setEditingCameraNewName(e.target.value)
+                          }
+                          className="text-xs h-6 bg-black/20 border-white/10"
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                              handleConfirmCameraNameEdit(cameraName);
+                            } else if (e.key === "Escape") {
+                              handleCancelCameraNameEdit();
+                            }
+                          }}
+                          autoFocus
+                        />
+                        <button
+                          onClick={() =>
+                            handleConfirmCameraNameEdit(cameraName)
+                          }
+                          className="text-green-400 hover:text-green-300 p-1"
+                        >
+                          <Check className="w-3 h-3" />
+                        </button>
+                        <button
+                          onClick={handleCancelCameraNameEdit}
+                          className="text-red-400 hover:text-red-300 p-1"
+                        >
+                          <X className="w-3 h-3" />
+                        </button>
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => handleStartEditingCameraName(cameraName)}
+                        className="text-sm font-medium text-white/90 truncate hover:text-white cursor-pointer flex items-center gap-1 flex-1"
+                        disabled={hasRecordedFrames}
+                      >
+                        {cameraName}
+                        <Edit2 className="w-3 h-3 opacity-50" />
+                      </button>
+                    )}
+                    <button
+                      onClick={() => handleRemoveCamera(cameraName)}
+                      className="text-red-400 hover:text-red-300 p-1 ml-2"
+                      disabled={hasRecordedFrames}
+                      title="Remove camera"
+                    >
+                      <X className="w-4 h-4" />
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Episode Management & Dataset Actions */}
+        <div className="flex justify-between items-center">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleResetFrames}
+              disabled={isRecording || !hasRecordedFrames}
+            >
+              <Trash2 className="w-4 h-4" />
+              Reset Frames
+            </Button>
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleNextEpisode}
+              disabled={isRecording}
+            >
+              <PlusCircle className="w-4 h-4" />
+              Next Episode
+            </Button>
+          </div>
+
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleDownloadZip}
+              disabled={recorderRef.current?.teleoperatorData.length === 0 || isRecording}
+            >
+              <Download className="w-4 h-4" />
+              Download as ZIP
+            </Button>
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleUploadToHuggingFace}
+              disabled={
+                recorderRef.current?.teleoperatorData.length === 0 ||
+                isRecording ||
+                !recorderSettings.huggingfaceApiKey
+              }
+            >
+              <Upload className="w-4 h-4" />
+              Upload to Hugging Face
+            </Button>
+          </div>
+        </div>
+
+        <div className="border border-white/10 rounded-md overflow-hidden">
+          <TeleoperatorEpisodesView teleoperatorData={recorderRef.current?.teleoperatorData} />
+        </div>
+
+        {/* Camera Configuration */}
+        <div className="border-t border-white/10 pt-4 mt-4">
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="text-lg font-semibold">Camera Setup</h3>
+            <Button
+              onClick={() => setShowCameraConfig(!showCameraConfig)}
+              variant="outline"
+              size="sm"
+              className="gap-2"
+            >
+              <Camera className="w-4 h-4" />
+              {showCameraConfig ? "Hide Camera Config" : "Configure Cameras"}
+            </Button>
+          </div>
+
+          {showCameraConfig && (
+            <div className="bg-black/40 border border-white/20 rounded-lg p-6 mb-4">
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                {/* Left Column: Camera Preview & Selection */}
+                <div className="space-y-4">
+                  <h4 className="text-md font-semibold text-white/90">
+                    Camera Preview
+                  </h4>
+
+                  {/* Camera Preview */}
+                  <div className="aspect-video bg-black/60 border border-white/20 rounded-lg overflow-hidden">
+                    {previewStream ? (
+                      <video
+                        ref={videoRef}
+                        autoPlay
+                        muted
+                        playsInline
+                        className="w-full h-full object-cover"
+                      />
+                    ) : (
+                      <div className="w-full h-full flex items-center justify-center text-white/60">
+                        <div className="text-center">
+                          <Camera className="w-12 h-12 mx-auto mb-2 opacity-50" />
+                          {isLoadingCameras ? (
+                            <p>Loading cameras...</p>
+                          ) : cameraPermissionState === "denied" ? (
+                            <div>
+                              <p>Camera access denied</p>
+                              <p className="text-xs mt-1">
+                                Please allow camera access and refresh
+                              </p>
+                            </div>
+                          ) : availableCameras.length === 0 ? (
+                            <p>Click "Load Cameras" to start</p>
+                          ) : (
+                            <p>Select a camera to preview</p>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Camera Controls */}
+                  <div className="space-y-3">
+                    <Button
+                      onClick={() => loadAvailableCameras(false)}
+                      variant="outline"
+                      className="w-full gap-2"
+                      disabled={hasRecordedFrames || isLoadingCameras}
+                    >
+                      <Camera className="w-4 h-4" />
+                      {isLoadingCameras
+                        ? "Loading..."
+                        : availableCameras.length > 0
+                        ? "Refresh Cameras"
+                        : "Load Cameras"}
+                    </Button>
+
+                    {availableCameras.length > 0 && (
+                      <div className="space-y-2">
+                        <label className="text-sm text-white/70">
+                          Select Camera:
+                        </label>
+                        <Select
+                          value={selectedCameraId}
+                          onValueChange={switchCameraPreview}
+                          disabled={hasRecordedFrames}
+                        >
+                          <SelectTrigger className="w-full bg-black/20 border-white/10">
+                            <SelectValue placeholder="Choose a camera" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {availableCameras.map((camera) => (
+                              <SelectItem
+                                key={camera.deviceId}
+                                value={camera.deviceId}
+                              >
+                                {camera.label ||
+                                  `Camera ${camera.deviceId.slice(0, 8)}...`}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    )}
+                  </div>
+                </div>
+
+                {/* Right Column: Camera Naming & Adding */}
+                <div className="space-y-4">
+                  <h4 className="text-md font-semibold text-white/90">
+                    Add to Recorder
+                  </h4>
+
+                  <div className="space-y-4">
+                    <div className="space-y-2">
+                      <label className="text-sm text-white/70">
+                        Camera Name:
+                      </label>
+                      <Input
+                        placeholder="e.g., 'Overhead View', 'Side Angle', 'Close-up'"
+                        value={cameraName}
+                        onChange={(e) => setCameraName(e.target.value)}
+                        className="bg-black/20 border-white/10"
+                        disabled={hasRecordedFrames}
+                      />
+                      <p className="text-xs text-white/50">
+                        Give this camera a descriptive name for your recording
+                        setup
+                      </p>
+                    </div>
+
+                    <Button
+                      onClick={handleAddCamera}
+                      className="w-full gap-2"
+                      disabled={
+                        hasRecordedFrames ||
+                        !cameraName.trim() ||
+                        !selectedCameraId ||
+                        !previewStream
+                      }
+                    >
+                      <PlusCircle className="w-4 h-4" />
+                      Add Camera to Recorder
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Display added cameras */}
+          {Object.keys(additionalCameras).length > 0 && (
+            <div className="mb-4 space-y-2">
+              <p className="text-sm text-muted-foreground">Added Cameras:</p>
+              <div className="flex flex-wrap gap-2">
+                {Object.keys(additionalCameras).map((name) => (
+                  <Badge
+                    key={name}
+                    variant="secondary"
+                    className="flex items-center gap-1 py-1 px-2"
+                  >
+                    {name}
+                    <button
+                      onClick={() => handleRemoveCamera(name)}
+                      className="ml-1 text-muted-foreground hover:text-destructive"
+                      disabled={hasRecordedFrames}
+                    >
+                      ×
+                    </button>
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex items-center gap-4">
+          <div className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleDownloadZip}
+              disabled={recorderRef.current?.teleoperatorData.length === 0 || isRecording}
+            >
+              <Download className="w-4 h-4" />
+              Download as ZIP
+            </Button>
+
+            {/* Reset Frames button moved to top bar */}
+          </div>
+
+          <div className="flex items-center gap-2 flex-1">
+            <Button
+              variant="outline"
+              className="gap-2"
+              onClick={handleUploadToHuggingFace}
+              disabled={
+                recorderRef.current?.teleoperatorData.length === 0 || isRecording || !huggingfaceApiKey
+              }
+            >
+              <Upload className="w-4 h-4" />
+              Upload to HuggingFace
+            </Button>
+
+            <Input
+              placeholder="HuggingFace API Key"
+              value={huggingfaceApiKey}
+              onChange={(e) => setHuggingfaceApiKey(e.target.value)}
+              className="flex-1 bg-black/20 border-white/10"
+              type="password"
+            />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

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

@@ -1,6 +1,6 @@
 "use client";
 import { useState, useEffect, useMemo, useRef, useCallback } from "react";
-import { Power, PowerOff, Keyboard } from "lucide-react";
+import { Power, PowerOff, Keyboard, Box } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -22,6 +22,11 @@ import {
 } from "@lerobot/web";
 import { getUnifiedRobotData } from "@/lib/unified-storage";
 import VirtualKey from "@/components/VirtualKey";
+import { Recorder } from "@/components/recorder";
+import { Canvas } from "@react-three/fiber";
+import { Physics } from "@react-three/cannon";
+import * as THREE from "three";
+import { OrbitControls } from "@react-three/drei";
 
 interface TeleoperationViewProps {
   robot: RobotConnection;
@@ -104,7 +109,7 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
   }, [robot.serialNumber]);
 
   // Lazy initialization function - only connects when user wants to start
-  const initializeTeleoperation = async () => {
+  const initializeTeleoperation = useCallback(async () => {
     if (!robot || !robot.robotType) {
       return false;
     }
@@ -130,15 +135,18 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           type: "direct",
         },
         calibrationData,
+        onStateUpdate: (state: TeleoperationState) => {
+          setTeleopState(state);
+        },
       };
       const directProcess = await teleoperate(directConfig);
 
       keyboardProcessRef.current = keyboardProcess;
       directProcessRef.current = directProcess;
-      setTeleopState(keyboardProcess.getState());
+      setTeleopState(directProcess.getState());
 
       // Initialize local motor positions from hardware state
-      const initialState = keyboardProcess.getState();
+      const initialState = directProcess.getState();
       const initialPositions: {
         [motorName: string]: { position: number; timestamp: number };
       } = {};
@@ -165,7 +173,7 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
       });
       return false;
     }
-  };
+  }, [robot, robot.robotType, calibrationData, toast]);
 
   // Cleanup on unmount
   useEffect(() => {
@@ -247,7 +255,7 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
       if (!success) return;
     }
 
-    if (!keyboardProcessRef.current || !directProcessRef.current) {
+    if (!(keyboardProcessRef.current || directProcessRef.current)) {
       toast({
         title: "Teleoperation Error",
         description: "Teleoperation not initialized",
@@ -257,8 +265,8 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
     }
 
     try {
-      keyboardProcessRef.current.start();
-      directProcessRef.current.start();
+      keyboardProcessRef.current?.start();
+      directProcessRef.current?.start();
     } catch (error) {
       const errorMessage =
         error instanceof Error
@@ -349,12 +357,20 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
     const realMotorConfigs = teleopState?.motorConfigs || [];
     const now = Date.now();
 
-    // If we have real motor configs, use them with local position overrides when recent
+    // If we have real motor configs, use them with local position overrides when appropriate
     if (realMotorConfigs.length > 0) {
       return realMotorConfigs.map((motor) => {
         const localData = localMotorPositions[motor.name];
-        // Use local position only if it's very recent (within 100ms), otherwise use hardware position
-        const useLocalPosition = localData && now - localData.timestamp < 100;
+
+        // Use local position if it exists and either:
+        // 1. It's very recent (within 500ms) OR
+        // 2. The hardware position is not yet close to our requested position
+        const isRecent = localData && now - localData.timestamp < 500;
+        const isHardwareNotCaughtUp =
+          localData && Math.abs(motor.currentPosition - localData.position) > 5;
+        const useLocalPosition =
+          localData && (isRecent || isHardwareNotCaughtUp);
+
         return {
           ...motor,
           currentPosition: useLocalPosition
@@ -368,7 +384,13 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
     return DEFAULT_MOTOR_CONFIGS.map((motor) => {
       const calibratedMotor = calibrationData?.[motor.name];
       const localData = localMotorPositions[motor.name];
-      const useLocalPosition = localData && now - localData.timestamp < 100;
+      // Use local position if it exists and either:
+      // 1. It's very recent (within 500ms) OR
+      // 2. We don't have a hardware position yet that's close to our requested position
+      const isRecent = localData && now - localData.timestamp < 500;
+      const isHardwareNotCaughtUp =
+        localData && Math.abs(motor.currentPosition - localData.position) > 5;
+      const useLocalPosition = localData && (isRecent || isHardwareNotCaughtUp);
 
       return {
         ...motor,
@@ -392,332 +414,358 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
   const keyStates = teleopState?.keyStates || {};
   const controls = SO100_KEYBOARD_CONTROLS;
 
+  // Memoize teleoperators array to prevent unnecessary re-renders of the Recorder component
+  const memoizedTeleoperators = useMemo(() => {
+    if (!directProcessRef.current) return [];
+
+    return [
+      directProcessRef.current?.teleoperator,
+    ].filter(Boolean);
+  }, [directProcessRef.current]);
+
   return (
-    <Card className="border-0 rounded-none">
-      <div className="p-4 border-b border-white/10">
-        <div className="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">
-                robot control
-              </h3>
-              <p className="text-sm text-muted-foreground font-mono">
-                manual{" "}
-                <span className="text-muted-foreground">teleoperate</span>{" "}
-                interface
-              </p>
-            </div>
-          </div>
-          <div className="flex items-center gap-6">
-            <div className="border-l border-white/10 pl-6 flex items-center gap-4">
-              {teleopState?.isActive ? (
-                <Button onClick={handleStop} variant="destructive" size="lg">
-                  <PowerOff className="w-5 h-5 mr-2" /> Stop Control
-                </Button>
-              ) : (
-                <Button
-                  onClick={handleStart}
-                  size="lg"
-                  disabled={!robot.isConnected}
-                >
-                  <Power className="w-5 h-5 mr-2" /> Control Robot
-                </Button>
-              )}
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-mono text-muted-foreground uppercase">
-                  status:
-                </span>
-                <Badge
-                  variant="outline"
-                  className={cn(
-                    "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
-                    teleopState?.isActive && "animate-pulse-slow"
-                  )}
-                >
-                  {teleopState?.isActive ? "ACTIVE" : "STOPPED"}
-                </Badge>
+    <>
+      <Card className="border-0 rounded-none">
+        <div className="p-4 border-b border-white/10">
+          <div className="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">
+                  robot control
+                </h3>
+                <p className="text-sm text-muted-foreground font-mono">
+                  manual{" "}
+                  <span className="text-muted-foreground">teleoperate</span>{" "}
+                  interface
+                </p>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div className="pt-6 p-6 grid md:grid-cols-2 gap-8">
-        <div>
-          <h3 className="font-sans font-semibold mb-4 text-xl">
-            Motor Control
-          </h3>
-          <div className="space-y-6">
-            {motorConfigs.map((motor) => (
-              <div key={motor.name}>
-                <label className="text-sm font-mono text-muted-foreground">
-                  {motor.name}
-                </label>
-                <div className="flex items-center gap-4">
-                  <Slider
-                    value={[motor.currentPosition]}
-                    min={motor.minPosition}
-                    max={motor.maxPosition}
-                    step={1}
-                    onValueChange={(val) => moveMotor(motor.name, val[0])}
-                    disabled={!teleopState?.isActive}
-                    className={!teleopState?.isActive ? "opacity-50" : ""}
-                  />
-                  <span
+            <div className="flex items-center gap-6">
+              <div className="border-l border-white/10 pl-6 flex items-center gap-4">
+                {teleopState?.isActive ? (
+                  <Button onClick={handleStop} variant="destructive" size="lg">
+                    <PowerOff className="w-5 h-5 mr-2" /> Stop Control
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={handleStart}
+                    size="lg"
+                    disabled={!robot.isConnected}
+                  >
+                    <Power className="w-5 h-5 mr-2" /> Control Robot
+                  </Button>
+                )}
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-mono text-muted-foreground uppercase">
+                    status:
+                  </span>
+                  <Badge
+                    variant="outline"
                     className={cn(
-                      "text-lg font-mono w-16 text-right",
-                      teleopState?.isActive
-                        ? "text-accent"
-                        : "text-muted-foreground"
+                      "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
+                      teleopState?.isActive && "animate-pulse-slow"
                     )}
                   >
-                    {Math.round(motor.currentPosition)}
-                  </span>
+                    {teleopState?.isActive ? "ACTIVE" : "STOPPED"}
+                  </Badge>
                 </div>
               </div>
-            ))}
+            </div>
           </div>
         </div>
-        <div>
-          <h3 className="font-sans font-semibold mb-4 text-xl">
-            Keyboard Layout & Status
-          </h3>
-          <div className="p-4 bg-black/30 rounded-lg space-y-4">
-            <div className="flex justify-around items-end">
-              <div className="flex flex-col items-center gap-2">
-                <VirtualKey
-                  label="↑"
-                  subLabel="Lift+"
-                  isPressed={
-                    !!keyStates[controls.shoulder_lift.positive]?.pressed
-                  }
-                  onMouseDown={() =>
-                    simulateKeyPress(controls.shoulder_lift.positive)
-                  }
-                  onMouseUp={() =>
-                    simulateKeyRelease(controls.shoulder_lift.positive)
-                  }
-                  disabled={!teleopState?.isActive}
-                />
-                <div className="flex gap-2">
-                  <VirtualKey
-                    label="←"
-                    subLabel="Pan-"
-                    isPressed={
-                      !!keyStates[controls.shoulder_pan.negative]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.shoulder_pan.negative)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.shoulder_pan.negative)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
-                  <VirtualKey
-                    label="↓"
-                    subLabel="Lift-"
-                    isPressed={
-                      !!keyStates[controls.shoulder_lift.negative]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.shoulder_lift.negative)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.shoulder_lift.negative)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
-                  <VirtualKey
-                    label="→"
-                    subLabel="Pan+"
-                    isPressed={
-                      !!keyStates[controls.shoulder_pan.positive]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.shoulder_pan.positive)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.shoulder_pan.positive)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
+        <div className="pt-6 p-6 grid md:grid-cols-2 gap-8">
+          <div>
+            <h3 className="font-sans font-semibold mb-4 text-xl">
+              Motor Control
+            </h3>
+            <div className="space-y-6">
+              {motorConfigs.map((motor) => (
+                <div key={motor.name}>
+                  <label className="text-sm font-mono text-muted-foreground">
+                    {motor.name}
+                  </label>
+                  <div className="flex items-center gap-4">
+                    <Slider
+                      value={[motor.currentPosition]}
+                      min={motor.minPosition}
+                      max={motor.maxPosition}
+                      step={1}
+                      onValueChange={(val) => moveMotor(motor.name, val[0])}
+                      disabled={!teleopState?.isActive}
+                      className={!teleopState?.isActive ? "opacity-50" : ""}
+                    />
+                    <span
+                      className={cn(
+                        "text-lg font-mono w-16 text-right",
+                        teleopState?.isActive
+                          ? "text-accent"
+                          : "text-muted-foreground"
+                      )}
+                    >
+                      {Math.round(motor.currentPosition)}
+                    </span>
+                  </div>
                 </div>
-                <span className="font-bold text-sm font-sans">Shoulder</span>
-              </div>
-              <div className="flex flex-col items-center gap-2">
-                <VirtualKey
-                  label="W"
-                  subLabel="Elbow+"
-                  isPressed={!!keyStates[controls.elbow_flex.positive]?.pressed}
-                  onMouseDown={() =>
-                    simulateKeyPress(controls.elbow_flex.positive)
-                  }
-                  onMouseUp={() =>
-                    simulateKeyRelease(controls.elbow_flex.positive)
-                  }
-                  disabled={!teleopState?.isActive}
-                />
-                <div className="flex gap-2">
-                  <VirtualKey
-                    label="A"
-                    subLabel="Wrist+"
-                    isPressed={
-                      !!keyStates[controls.wrist_flex.positive]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.wrist_flex.positive)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.wrist_flex.positive)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
-                  <VirtualKey
-                    label="S"
-                    subLabel="Elbow-"
-                    isPressed={
-                      !!keyStates[controls.elbow_flex.negative]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.elbow_flex.negative)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.elbow_flex.negative)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
+              ))}
+            </div>
+          </div>
+          <div>
+            <h3 className="font-sans font-semibold mb-4 text-xl">
+              Keyboard Layout & Status
+            </h3>
+            <div className="p-4 bg-black/30 rounded-lg space-y-4">
+              <div className="flex justify-around items-end">
+                <div className="flex flex-col items-center gap-2">
                   <VirtualKey
-                    label="D"
-                    subLabel="Wrist-"
+                    label="↑"
+                    subLabel="Lift+"
                     isPressed={
-                      !!keyStates[controls.wrist_flex.negative]?.pressed
+                      !!keyStates[controls.shoulder_lift.positive]?.pressed
                     }
                     onMouseDown={() =>
-                      simulateKeyPress(controls.wrist_flex.negative)
+                      simulateKeyPress(controls.shoulder_lift.positive)
                     }
                     onMouseUp={() =>
-                      simulateKeyRelease(controls.wrist_flex.negative)
+                      simulateKeyRelease(controls.shoulder_lift.positive)
                     }
                     disabled={!teleopState?.isActive}
                   />
+                  <div className="flex gap-2">
+                    <VirtualKey
+                      label="←"
+                      subLabel="Pan-"
+                      isPressed={
+                        !!keyStates[controls.shoulder_pan.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.shoulder_pan.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.shoulder_pan.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="↓"
+                      subLabel="Lift-"
+                      isPressed={
+                        !!keyStates[controls.shoulder_lift.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.shoulder_lift.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.shoulder_lift.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="→"
+                      subLabel="Pan+"
+                      isPressed={
+                        !!keyStates[controls.shoulder_pan.positive]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.shoulder_pan.positive)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.shoulder_pan.positive)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                  </div>
+                  <span className="font-bold text-sm font-sans">Shoulder</span>
                 </div>
-                <span className="font-bold text-sm font-sans">Elbow/Wrist</span>
-              </div>
-              <div className="flex flex-col items-center gap-2">
-                <div className="flex gap-2">
-                  <VirtualKey
-                    label="Q"
-                    subLabel="Roll+"
-                    isPressed={
-                      !!keyStates[controls.wrist_roll.positive]?.pressed
-                    }
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.wrist_roll.positive)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.wrist_roll.positive)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
+                <div className="flex flex-col items-center gap-2">
                   <VirtualKey
-                    label="E"
-                    subLabel="Roll-"
+                    label="W"
+                    subLabel="Elbow+"
                     isPressed={
-                      !!keyStates[controls.wrist_roll.negative]?.pressed
+                      !!keyStates[controls.elbow_flex.positive]?.pressed
                     }
                     onMouseDown={() =>
-                      simulateKeyPress(controls.wrist_roll.negative)
+                      simulateKeyPress(controls.elbow_flex.positive)
                     }
                     onMouseUp={() =>
-                      simulateKeyRelease(controls.wrist_roll.negative)
+                      simulateKeyRelease(controls.elbow_flex.positive)
                     }
                     disabled={!teleopState?.isActive}
                   />
+                  <div className="flex gap-2">
+                    <VirtualKey
+                      label="A"
+                      subLabel="Wrist+"
+                      isPressed={
+                        !!keyStates[controls.wrist_flex.positive]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.wrist_flex.positive)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.wrist_flex.positive)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="S"
+                      subLabel="Elbow-"
+                      isPressed={
+                        !!keyStates[controls.elbow_flex.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.elbow_flex.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.elbow_flex.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="D"
+                      subLabel="Wrist-"
+                      isPressed={
+                        !!keyStates[controls.wrist_flex.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.wrist_flex.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.wrist_flex.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                  </div>
+                  <span className="font-bold text-sm font-sans">
+                    Elbow/Wrist
+                  </span>
                 </div>
-                <div className="flex gap-2">
-                  <VirtualKey
-                    label="O"
-                    subLabel="Grip+"
-                    isPressed={!!keyStates[controls.gripper.positive]?.pressed}
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.gripper.positive)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.gripper.positive)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
-                  <VirtualKey
-                    label="C"
-                    subLabel="Grip-"
-                    isPressed={!!keyStates[controls.gripper.negative]?.pressed}
-                    onMouseDown={() =>
-                      simulateKeyPress(controls.gripper.negative)
-                    }
-                    onMouseUp={() =>
-                      simulateKeyRelease(controls.gripper.negative)
-                    }
-                    disabled={!teleopState?.isActive}
-                  />
+                <div className="flex flex-col items-center gap-2">
+                  <div className="flex gap-2">
+                    <VirtualKey
+                      label="Q"
+                      subLabel="Roll+"
+                      isPressed={
+                        !!keyStates[controls.wrist_roll.positive]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.wrist_roll.positive)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.wrist_roll.positive)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="E"
+                      subLabel="Roll-"
+                      isPressed={
+                        !!keyStates[controls.wrist_roll.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.wrist_roll.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.wrist_roll.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                  </div>
+                  <div className="flex gap-2">
+                    <VirtualKey
+                      label="O"
+                      subLabel="Grip+"
+                      isPressed={
+                        !!keyStates[controls.gripper.positive]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.gripper.positive)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.gripper.positive)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                    <VirtualKey
+                      label="C"
+                      subLabel="Grip-"
+                      isPressed={
+                        !!keyStates[controls.gripper.negative]?.pressed
+                      }
+                      onMouseDown={() =>
+                        simulateKeyPress(controls.gripper.negative)
+                      }
+                      onMouseUp={() =>
+                        simulateKeyRelease(controls.gripper.negative)
+                      }
+                      disabled={!teleopState?.isActive}
+                    />
+                  </div>
+                  <span className="font-bold text-sm font-sans">Roll/Grip</span>
                 </div>
-                <span className="font-bold text-sm font-sans">Roll/Grip</span>
               </div>
-            </div>
-            <div className="pt-4 border-t border-white/10">
-              <div className="flex justify-between items-center font-mono text-sm">
-                <div className="flex items-center gap-2 text-muted-foreground">
-                  <Keyboard className="w-4 h-4" />
-                  <span>
-                    Active Keys:{" "}
-                    {Object.values(keyStates).filter((k) => k.pressed).length}
-                  </span>
+              <div className="pt-4 border-t border-white/10">
+                <div className="flex justify-between items-center font-mono text-sm">
+                  <div className="flex items-center gap-2 text-muted-foreground">
+                    <Keyboard className="w-4 h-4" />
+                    <span>
+                      Active Keys:{" "}
+                      {Object.values(keyStates).filter((k) => k.pressed).length}
+                    </span>
+                  </div>
+                  <TooltipProvider>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div
+                          className={cn(
+                            "w-10 h-6 border rounded-md flex items-center justify-center font-mono text-xs transition-all",
+                            "select-none user-select-none",
+                            !teleopState?.isActive &&
+                              "opacity-50 cursor-not-allowed",
+                            teleopState?.isActive &&
+                              "cursor-pointer hover:bg-white/5",
+                            keyStates[controls.stop]?.pressed
+                              ? "bg-destructive text-destructive-foreground border-destructive"
+                              : "bg-background"
+                          )}
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            if (teleopState?.isActive) {
+                              simulateKeyPress(controls.stop);
+                            }
+                          }}
+                          onMouseUp={(e) => {
+                            e.preventDefault();
+                            if (teleopState?.isActive) {
+                              simulateKeyRelease(controls.stop);
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            e.preventDefault();
+                            if (teleopState?.isActive) {
+                              simulateKeyRelease(controls.stop);
+                            }
+                          }}
+                        >
+                          ESC
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipContent>Emergency Stop</TooltipContent>
+                    </Tooltip>
+                  </TooltipProvider>
                 </div>
-                <TooltipProvider>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <div
-                        className={cn(
-                          "w-10 h-6 border rounded-md flex items-center justify-center font-mono text-xs transition-all",
-                          "select-none user-select-none",
-                          !teleopState?.isActive &&
-                            "opacity-50 cursor-not-allowed",
-                          teleopState?.isActive &&
-                            "cursor-pointer hover:bg-white/5",
-                          keyStates[controls.stop]?.pressed
-                            ? "bg-destructive text-destructive-foreground border-destructive"
-                            : "bg-background"
-                        )}
-                        onMouseDown={(e) => {
-                          e.preventDefault();
-                          if (teleopState?.isActive) {
-                            simulateKeyPress(controls.stop);
-                          }
-                        }}
-                        onMouseUp={(e) => {
-                          e.preventDefault();
-                          if (teleopState?.isActive) {
-                            simulateKeyRelease(controls.stop);
-                          }
-                        }}
-                        onMouseLeave={(e) => {
-                          e.preventDefault();
-                          if (teleopState?.isActive) {
-                            simulateKeyRelease(controls.stop);
-                          }
-                        }}
-                      >
-                        ESC
-                      </div>
-                    </TooltipTrigger>
-                    <TooltipContent>Emergency Stop</TooltipContent>
-                  </Tooltip>
-                </TooltipProvider>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </Card>
+      </Card>
+
+      {/* Robot Movement Recorder - Always show UI */}
+      <Recorder
+        teleoperators={memoizedTeleoperators}
+        robot={robot}
+        onNeedsTeleoperation={initializeTeleoperation}
+      />
+    </>
   );
 }

examples/cyberpunk-standalone/src/components/teleoperator-episodes-view.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useState } from "react";
+import { LeRobotEpisode } from "@lerobot/web";
+import { TeleoperatorFramesView } from "./teleoperator-frames-view";
+import { Button } from "./ui/button";
+
+interface TeleoperatorEpisodesViewProps {
+  teleoperatorData?: LeRobotEpisode[];
+}
+
+export function TeleoperatorEpisodesView({ teleoperatorData }: TeleoperatorEpisodesViewProps) {
+  // State to track which episodes are expanded
+  const [expandedEpisodes, setExpandedEpisodes] = useState<Record<number, boolean>>({});
+  
+  // Toggle expanded state for an episode
+  const toggleEpisode = (index: number) => {
+    setExpandedEpisodes(prev => ({
+      ...prev,
+      [index]: !prev[index]
+    }));
+  };
+  
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="text-sm text-center text-muted-foreground mb-2">List of recorded episodes</div>
+      <div className="flex flex-col gap-1">
+        {/* Header */}
+        <div className="flex flex-row font-medium text-sm">
+          <div className="flex-1 px-4 py-2">id</div>
+          <div className="flex-1 px-4 py-2">time length</div>
+          <div className="flex-1 px-4 py-2">frames</div>
+        </div>
+        
+        {/* Body */}
+        {teleoperatorData && teleoperatorData.length > 0 ? (
+          teleoperatorData.map((episode: LeRobotEpisode, i: number) => (
+            <div key={i} className="flex flex-col border-t border-gray-700">
+              {/* Episode row */}
+              <div className="flex flex-row">
+                <div className="flex-1 px-4 py-2 font-mono">{i}</div>
+                <div className="flex-1 px-4 py-2 font-mono">{episode.timespan}</div>
+                <div className="flex-1 px-4 py-2 font-mono">{episode.length}</div>
+                <div className="px-4 py-2 cursor-pointer" onClick={() => toggleEpisode(i)}>
+                  {expandedEpisodes[i] ? 
+                    <Button>hide frames</Button> : 
+                    <Button>show frames</Button>}
+                </div>
+              </div>
+              
+              {/* Frames (collapsible) */}
+              {expandedEpisodes[i] && (
+                <TeleoperatorFramesView frames={episode.frames} />
+              )}
+            </div>
+          ))
+        ) : (
+          <div className="flex flex-row border-t border-gray-700">
+            <div 
+              className="flex-1 px-4 py-4 text-center text-muted-foreground"
+            >
+              No episodes recorded yet. Click "Start Recording" to begin.
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

examples/cyberpunk-standalone/src/components/teleoperator-frames-view.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { NonIndexedLeRobotDatasetRow } from "@lerobot/web";
+import { TeleoperatorJointGraph } from "./teleoperator-joint-graph";
+
+interface TeleoperatorFramesViewProps {
+  frames: NonIndexedLeRobotDatasetRow[];
+}
+
+export function TeleoperatorFramesView({ frames }: TeleoperatorFramesViewProps) {
+  // Joint names in the order they appear in the arrays
+  const jointNames = [
+    "shoulder_pan", 
+    "shoulder_lift",
+    "elbow_flex",
+    "wrist_flex",
+    "wrist_roll",
+    "gripper"
+  ];
+
+  // Helper function to format an object as a column of key-value pairs with joint names
+  const formatArrayAsColumn = (obj: Record<number, number>): string => {
+    return Object.entries(obj)
+      .map(([key, value]) => {
+        // Convert numeric key to joint name if possible
+        const index = parseInt(key);
+        const jointName = !isNaN(index) && index < jointNames.length ? jointNames[index] : key;
+        return `${jointName}: ${value}`;
+      })
+      .join('\n');
+  };
+  
+  return (
+    <div className="ml-8 mr-4 mb-2">
+      {/* Joint visualization graph */}
+      <TeleoperatorJointGraph frames={frames} />
+      
+      {/* Frames container with horizontal scroll */}
+      <div className="bg-gray-800/50 rounded-md overflow-hidden">
+      <div className="overflow-x-auto">
+        {/* Frames header */}
+        <table className="w-full min-w-max table-fixed">
+          <thead>
+            <tr className="text-xs font-medium bg-gray-800/80 text-gray-300">
+              <th className="w-16 px-2 py-1 text-left">Frame</th>
+              <th className="w-64 px-2 py-1 text-left">Timestamp</th>
+              <th className="w-[300px] px-2 py-1 text-left">Action</th>
+              <th className="w-[500px] px-2 py-1 text-left">State</th>
+            </tr>
+          </thead>
+          
+          {/* Frame rows */}
+          <tbody className="max-h-60 overflow-y-auto">
+            {frames.map((frame: NonIndexedLeRobotDatasetRow, frameIndex: number) => (
+              <tr key={frameIndex} className="text-xs border-t border-gray-700/50">
+                <td className="w-16 px-2 py-1 font-mono whitespace-nowrap">{frameIndex}</td>
+                <td className="w-64 px-2 py-1 font-mono whitespace-nowrap">
+                  {frame.timestamp}
+                </td>
+                <td className="w-[200px] px-2 py-1 font-mono whitespace-pre-wrap align-top">
+                  {Object.keys(frame.action).length > 0 ? 
+                    formatArrayAsColumn(frame.action) : 
+                    '-'}
+                </td>
+                <td className="w-[300px] px-2 py-1 font-mono whitespace-pre-wrap align-top">
+                  {Object.keys(frame["observation.state"]).length > 0 ? 
+                    formatArrayAsColumn(frame["observation.state"]) : 
+                    '-'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      </div>
+    </div>
+  );
+}

examples/cyberpunk-standalone/src/components/teleoperator-joint-graph.tsx

@@ -0,0 +1,137 @@
+import React from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer
+} from "recharts";
+import { NonIndexedLeRobotDatasetRow } from "@lerobot/web";
+
+interface TeleoperatorJointGraphProps {
+  frames: NonIndexedLeRobotDatasetRow[];
+}
+
+export function TeleoperatorJointGraph({ frames }: TeleoperatorJointGraphProps) {
+  // Skip rendering if no frames
+  if (!frames || frames.length === 0) {
+    return null;
+  }
+
+  // Use hardcoded joint names that match the LeRobot dataset format
+  const jointNames = [
+    "shoulder_pan", 
+    "shoulder_lift",
+    "elbow_flex",
+    "wrist_flex",
+    "wrist_roll",
+    "gripper"
+  ];
+  
+  // Generate a color palette for the joints
+  const colors = [
+    "#8884d8", "#82ca9d", "#ffc658", "#ff8042", "#0088fe", "#00C49F", 
+    "#FFBB28", "#FF8042", "#a4de6c", "#d0ed57"
+  ];
+  
+  // Prepare data for the chart - handling arrays
+  const chartData = frames.map((frame, index) => {
+    // Create base data point with index
+    const dataPoint: any = {
+      name: index,
+      timestamp: frame.timestamp
+    };
+    
+    // Add action values (assuming action is an array)
+    if (Array.isArray(frame.action)) {
+      // Map each array index to the corresponding joint name
+      jointNames.forEach((jointName, i) => {
+        if (i < frame.action.length) {
+          dataPoint[`action_${jointName}`] = frame.action[i];
+        }
+      });
+    }
+    
+    // Add observation state values (assuming observation.state is an array)
+    if (Array.isArray(frame["observation.state"])) {
+      // Map each array index to the corresponding joint name
+      jointNames.forEach((jointName, i) => {
+        if (i < frame["observation.state"].length) {
+          dataPoint[`state_${jointName}`] = frame["observation.state"][i];
+        }
+      });
+    }
+    
+    return dataPoint;
+  });
+  
+  // Create lines for each joint
+  const linesToRender = jointNames.flatMap(jointName => [
+    {
+      key: `action_${jointName}`,
+      dataKey: `action_${jointName}`,
+      name: `Action: ${jointName}`,
+      isDotted: true
+    },
+    {
+      key: `state_${jointName}`,
+      dataKey: `state_${jointName}`,
+      name: `State: ${jointName}`,
+      isDotted: false
+    }
+  ]);
+
+  return (
+    <div className="w-full bg-gray-800/50 rounded-md p-4 mb-4">
+      <h3 className="text-sm font-medium text-gray-300 mb-2">Joint Positions Over Time</h3>
+      <ResponsiveContainer width="100%" height={300}>
+        <LineChart
+          data={chartData}
+          margin={{
+            top: 5,
+            right: 30,
+            left: 20,
+            bottom: 5
+          }}
+        >
+          <CartesianGrid strokeDasharray="3 3" stroke="#444" />
+          <XAxis 
+            dataKey="name" 
+            label={{ value: 'Frame Index', position: 'insideBottomRight', offset: -10 }}
+            stroke="#aaa" 
+          />
+          <YAxis stroke="#aaa" />
+          <Tooltip 
+            contentStyle={{ backgroundColor: '#333', borderColor: '#555' }}
+            labelStyle={{ color: '#eee' }}
+            itemStyle={{ color: '#eee' }}
+          />
+          <Legend />
+          
+          {/* Render all lines */}
+          {linesToRender.map((lineConfig, index) => {
+            const jointName = lineConfig.dataKey.replace(/^(action|state)_/, '');
+            const jointIndex = jointNames.indexOf(jointName);
+            const colorIndex = jointIndex >= 0 ? jointIndex : index % colors.length;
+            
+            return (
+              <Line
+                key={lineConfig.key}
+                type="monotone"
+                dataKey={lineConfig.dataKey}
+                name={lineConfig.name}
+                stroke={colors[colorIndex]}
+                strokeDasharray={lineConfig.isDotted ? "5 5" : undefined}
+                dot={false}
+                activeDot={{ r: 4 }}
+              />
+            );
+          })}
+        </LineChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}

examples/cyberpunk-standalone/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
 import "./global.css";
 import App from "./App";
 import { ThemeProvider } from "./components/theme-provider";
@@ -11,13 +12,15 @@ setTimeout(() => {
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      <App />
-    </ThemeProvider>
+    <BrowserRouter>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <App />
+      </ThemeProvider>
+    </BrowserRouter>
   </StrictMode>
 );

package.json

@@ -34,14 +34,22 @@
     "install-global": "pnpm run build && npm link"
   },
   "dependencies": {
-    "@lerobot/web": "workspace:*",
+    "@aws-sdk/client-s3": "^3.856.0",
+    "@aws-sdk/lib-storage": "^3.856.0",
+    "@huggingface/hub": "^2.4.0",
+    "@react-three/cannon": "^6.6.0",
+    "apache-arrow": "^21.0.0",
+    "jszip": "^3.10.1",
     "log-update": "^6.1.0",
-    "serialport": "^12.0.0"
+    "parquet-wasm": "^0.6.1",
+    "serialport": "^12.0.0",
+    "three": "^0.178.0"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.5",
-    "@types/node": "^22.10.5",
-    "tsx": "^4.19.2",
+    "@types/node": "^22.17.0",
+    "@types/three": "^0.178.1",
+    "tsx": "^4.20.3",
     "typescript": "~5.8.3"
   },
   "repository": {

packages/web/README.md

@@ -312,6 +312,75 @@ await releaseMotors(robot, [1, 2, 3]);
 - `robot: RobotConnection` - Connected robot
 - `motorIds?: number[]` - Specific motor IDs (default: all motors for robot type)
 
+---
+
+## Dataset Recording and Export
+
+The LeRobot.js library provides functionality to record teleoperator data and export it in the LeRobot dataset format, compatible with machine learning models.
+
+### `LeRobotDatasetRecorder`
+
+Records teleoperator movements and camera streams, then exports them in the LeRobot dataset format.
+
+```typescript
+import { LeRobotDatasetRecorder } from "@lerobot/web";
+
+// Create a recorder with teleoperator and video streams
+const recorder = new LeRobotDatasetRecorder(
+  [teleoperator],           // Array of teleoperators to record, currently only supports 1 teleoperator
+  { "main": videoStream },   // Video streams by camera key
+  30,                       // Target FPS
+  "Pick and place task"      // Task description
+);
+
+// Start recording
+await recorder.startRecording();
+
+// ... robot performs task ...
+
+// Stop recording and get the data
+const recordingData = await recorder.stopRecording();
+
+// Export the dataset in various formats
+// 1. As a downloadable zip file
+await recorder.exportForLeRobot('zip-download');
+
+// 2. Upload to Hugging Face
+const hfUploader = await recorder.exportForLeRobot('huggingface', {
+  repoName: 'my-robot-dataset',
+  accessToken: 'hf_...',
+});
+
+// 3. Upload to S3
+const s3Uploader = await recorder.exportForLeRobot('s3', {
+  bucketName: 'my-bucket',
+  accessKeyId: 'AKIA...',
+  secretAccessKey: '...',
+  region: 'us-east-1',
+});
+```
+
+#### Key Features
+
+- **Multi-source Recording**: Records teleoperator movements and synchronized video
+- **Regular Interpolation**: Generates frames at consistent intervals with `episodes` getter
+- **Multiple Export Formats**: Supports local download, Hugging Face, and S3 upload
+- **LeRobot Dataset Format**: Follows the standard format for compatibility with ML models
+
+> **Note:** The dataset statistical data currently generated is incorrect and needs to be updated in a future release.
+
+#### Dataset Format
+
+The exported dataset follows the LeRobot format with this structure:
+
+```
+/data/chunk-000/file-000.parquet  # Teleoperator data
+/videos/observation.images.{camera-key}/chunk-000/file-000.mp4  # Video data
+/metadata.json  # Dataset metadata
+/statistics.json  # Dataset statistics (currently incorrect)
+/README.md  # Dataset documentation
+```
+
 ## Browser Requirements
 
 - **chromium 89+** with WebSerial and WebUSB API support

packages/web/package.json

@@ -36,6 +36,7 @@
   ],
   "scripts": {
     "build": "tsc --project tsconfig.build.json",
+    "watch": "tsc --project tsconfig.build.json --watch",
     "prepublishOnly": "npm run build",
     "dev": "vitest --watch",
     "test": "vitest run",
@@ -43,10 +44,10 @@
     "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
-    "vitest": "^2.0.0",
-    "@vitest/ui": "^2.0.0",
-    "jsdom": "^24.0.0",
-    "vite": "^6.3.5"
+    "@vitest/ui": "^2.1.9",
+    "jsdom": "^24.1.3",
+    "vite": "^6.3.5",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
     "typescript": ">=4.5.0"
@@ -59,5 +60,13 @@
   "author": "Tim Pietrusky",
   "publishConfig": {
     "access": "public"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.856.0",
+    "@aws-sdk/lib-storage": "^3.856.0",
+    "@huggingface/hub": "^2.4.0",
+    "apache-arrow": "^21.0.0",
+    "jszip": "^3.10.1",
+    "parquet-wasm": "^0.6.1"
   }
 }

packages/web/src/calibrate.ts

@@ -15,7 +15,6 @@ import {
   writeHardwarePositionLimits,
 } from "./utils/motor-calibration.js";
 import { createSO100Config } from "./robots/so100_config.js";
-import type { RobotConnection } from "./types/robot-connection.js";
 import type { RobotHardwareConfig } from "./types/robot-config.js";
 import type {
   CalibrateConfig,

packages/web/src/hf_uploader.ts

@@ -0,0 +1,86 @@
+import * as hub from "@huggingface/hub";
+import type { RepoDesignation } from "@huggingface/hub";
+import type { ContentSource } from "@huggingface/hub";
+
+type FileArray = Array<URL | File | { path: string; content: ContentSource }>;
+/**
+ * Uploads a leRobot dataset to huggingface
+ */
+
+export class LeRobotHFUploader extends EventTarget {
+    private _repoDesignation: RepoDesignation;
+    private _uploaded : boolean;
+    private _created_repo : boolean;
+    
+    constructor(username: string, repoName: string) {
+        super();
+        this._repoDesignation = {
+            name : `${username}/${repoName}`,
+            type : "dataset"
+        };
+
+        this._uploaded = false;
+        this._created_repo = false;
+    }
+    
+    /**
+     * Returns whether the repository has been successfully created
+     */
+    get createdRepo(): boolean {
+        return this._created_repo;
+    }
+
+    get uploaded() : boolean {
+        return this._uploaded;
+    }
+
+
+    /**
+     * Uploads the dataset to huggingface
+     * 
+     * A referenceId is used to be able to track progress of the upload,
+     * this provides a progressEvent from huggingface.js (see : https://github.com/huggingface/huggingface.js/blob/main/packages/hub/README.md#usage)
+     * 
+     * both this and huggingface.js have pretty bad documentation, some exploration will be required (sorry!, I have university, and work and I already feel guilty procastinating those to to write this)
+     * 
+     * @param dataset The dataset to upload
+     * @param accessToken The access token for huggingface
+     * @param referenceId The reference id for the upload, to track it (optional)
+     */
+    async createRepoAndUploadFiles(files : FileArray, accessToken : string, referenceId : string = "") {
+        await hub.createRepo({
+            repo: this._repoDesignation,
+            accessToken: accessToken,
+            license: "mit"
+        });
+
+        this._created_repo = true;
+        this.dispatchEvent(new CustomEvent("repoCreated", { detail: this._repoDesignation }));
+
+        const uploadPromises : Promise<void>[] = [];
+        uploadPromises.push(this.uploadFilesWithProgress(files, accessToken, referenceId));
+
+        await Promise.all(uploadPromises);
+    }
+
+    /**
+     * Uploads files to huggingface with progress events
+     * 
+     * @param files The files to upload
+     * @param accessToken The access token for huggingface
+     * @param referenceId The reference id for the upload, to track it (optional)
+     */
+    async uploadFilesWithProgress(files : FileArray, accessToken : string, referenceId : string = "") {
+        for await (const progressEvent of hub.uploadFilesWithProgress({
+            repo: this._repoDesignation,
+            accessToken: accessToken,
+            files: files,
+        })) {
+            this.dispatchEvent(new CustomEvent("progress", { detail: {
+                progressEvent,
+                repoDesignation: this._repoDesignation,
+                referenceId
+            } }));
+        }
+    }
+}

packages/web/src/index.ts

@@ -58,3 +58,7 @@ export {
   SO100_KEYBOARD_CONTROLS,
 } from "./robots/so100_config.js";
 export { KEYBOARD_TELEOPERATOR_DEFAULTS } from "./teleoperators/index.js";
+
+// Record
+export { LeRobotDatasetRecorder } from "./record.js";
+export { LeRobotHFUploader } from "./hf_uploader.js";

packages/web/src/record.ts

@@ -0,0 +1,1412 @@
+import { WebTeleoperator } from "./teleoperators/base-teleoperator";
+import { MotorConfig } from "./types/teleoperation";
+import * as parquet from 'parquet-wasm';
+import * as arrow from 'apache-arrow';
+import JSZip from 'jszip';
+import getMetadataInfo from './utils/record/metadataInfo';
+import type { VideoInfo } from './utils/record/metadataInfo';
+import getStats from './utils/record/stats';
+import generateREADME from './utils/record/generateREADME';
+import { LeRobotHFUploader } from './hf_uploader';
+import { LeRobotS3Uploader } from './s3_uploader';
+
+// declare a type leRobot action that's basically an array of numbers
+interface LeRobotAction {
+    [key: number]: number;
+}
+
+export class LeRobotEpisode {
+    // we assume that the frames are ordered
+    public frames : NonIndexedLeRobotDatasetRow[]
+    
+    /**
+     * Optional start time of the episode
+     * If not set, defaults to the timestamp of the first frame
+     */
+    private _startTime?: number;
+    
+    /**
+     * Optional end time of the episode
+     * If not set, defaults to the timestamp of the last frame
+     */
+    private _endTime?: number;
+
+    /**
+     * Creates a new LeRobotEpisode
+     * 
+     * @param frames Optional array of frames to initialize the episode with
+     * @param startTime Optional explicit start time for the episode
+     * @param endTime Optional explicit end time for the episode
+     */
+    constructor(frames?: NonIndexedLeRobotDatasetRow[], startTime?: number, endTime?: number){
+        this.frames = frames || [];
+        this._startTime = startTime;
+        this._endTime = endTime;
+    }
+
+    /**
+     * Adds a new frame to the episode
+     * Ensures frames are always in chronological order
+     * 
+     * @param frame The frame to add
+     * @throws Error if the frame's timestamp is before the last frame's timestamp
+     */
+    add(frame : NonIndexedLeRobotDatasetRow){
+        const lastFrame = this.frames.at(-1);
+        if (lastFrame && frame.timestamp < lastFrame.timestamp) {
+            throw new Error(`Frame timestamp ${frame.timestamp} is before last frame timestamp ${lastFrame.timestamp}`);
+        }
+        this.frames.push(frame);
+    }
+
+    /**
+     * Gets the start time of the episode
+     * If not explicitly set, returns the timestamp of the first frame
+     * If no frames exist, throws an error
+     */
+    get startTime(): number {
+        if (this._startTime !== undefined) {
+            return this._startTime;
+        }
+        
+        const firstFrame = this.frames.at(0);
+        if (!firstFrame) {
+            throw new Error("Cannot determine start time: no frames in episode");
+        }
+        
+        return firstFrame.timestamp;
+    }
+    
+    /**
+     * Sets an explicit start time for the episode
+     */
+    set startTime(value: number) {
+        this._startTime = value;
+    }
+    
+    /**
+     * Gets the end time of the episode
+     * If not explicitly set, returns the timestamp of the last frame
+     * If no frames exist, throws an error
+     */
+    get endTime(): number {
+        if (this._endTime !== undefined) {
+            return this._endTime;
+        }
+        
+        const lastFrame = this.frames.at(-1);
+        if (!lastFrame) {
+            throw new Error("Cannot determine end time: no frames in episode");
+        }
+        
+        return lastFrame.timestamp;
+    }
+    
+    /**
+     * Sets an explicit end time for the episode
+     */
+    set endTime(value: number) {
+        this._endTime = value;
+    }
+
+    /**
+     * The time difference between the start and end time of the episode, in seconds
+     */
+    get timespan(){
+        const hasNoFrames = this.frames.length === 0
+        if(hasNoFrames) return 0
+
+        return this.endTime - this.startTime;
+    }
+
+    /**
+     * The number of frames in the episode
+     */
+    get length(){
+        return this.frames.length;
+    }
+    
+    /**
+     * Creates a new LeRobotEpisode with frames interpolated at regular intervals
+     * 
+     * @param fps The desired frames per second for the interpolated episode
+     * @param startIndex The desired starting index for the episode frames, useful when storing multiple episodes
+     * @returns A new LeRobotEpisode with interpolated frames
+     */
+    getInterpolatedRegularEpisode(fps: number, startIndex: number = 0): LeRobotEpisode {
+        if (this.frames.length === 0) {
+            return new LeRobotEpisode([], this._startTime, this._endTime);
+        }
+        
+        const actualStartTime = this._startTime !== undefined ? this._startTime : this.frames[0].timestamp;
+        const actualEndTime = this._endTime !== undefined ? this._endTime : this.frames[this.frames.length - 1].timestamp;
+        const timeDifference = actualEndTime - actualStartTime;
+        
+        const numFrames = Math.max(1, Math.floor(timeDifference * fps));
+        const interpolatedFrames: NonIndexedLeRobotDatasetRow[] = [];
+        
+        const firstFrame = this.frames[0];
+        const lastFrame = this.frames[this.frames.length - 1];
+        
+        for (let i = 0; i < numFrames; i++) {
+            const timestamp = actualStartTime + (i / fps);
+            let frameToAdd: NonIndexedLeRobotDatasetRow;
+            
+            if (timestamp < firstFrame.timestamp) {
+                frameToAdd = { ...firstFrame, timestamp };
+                frameToAdd.frame_index = i;
+                frameToAdd.index = startIndex + i;
+            } else if (timestamp > lastFrame.timestamp) {
+                frameToAdd = { ...lastFrame, timestamp };
+                frameToAdd.frame_index = i;
+                frameToAdd.index = startIndex + i;
+            } else {
+                let lowerIndex = 0;
+                for (let j = 0; j < this.frames.length - 1; j++) {
+                    if (this.frames[j].timestamp <= timestamp && this.frames[j + 1].timestamp > timestamp) {
+                        lowerIndex = j;
+                        break;
+                    }
+                }
+                
+                const lowerFrame = this.frames[lowerIndex];
+                const upperFrame = this.frames[lowerIndex + 1];
+                
+                frameToAdd = LeRobotEpisode.interpolateFrames(
+                    lowerFrame, 
+                    upperFrame, 
+                    timestamp
+                );
+
+                frameToAdd.frame_index = i;
+                frameToAdd.episode_index = lowerFrame.episode_index;
+                frameToAdd.index = startIndex + i;
+                frameToAdd.task_index = lowerFrame.task_index;
+            }
+            
+            interpolatedFrames.push(frameToAdd);
+        }
+        
+        return new LeRobotEpisode(interpolatedFrames, actualStartTime, actualEndTime);
+    }
+    
+    /**
+     * Interpolates between two frames to create a new frame at the specified timestamp
+     * 
+     * @param frame1 The first frame
+     * @param frame2 The second frame
+     * @param targetTimestamp The timestamp at which to interpolate
+     * @returns A new interpolated frame
+     */
+    static interpolateFrames(
+        frame1: NonIndexedLeRobotDatasetRow, 
+        frame2: NonIndexedLeRobotDatasetRow, 
+        targetTimestamp: number
+    ): NonIndexedLeRobotDatasetRow {
+        if (targetTimestamp < frame1.timestamp || targetTimestamp > frame2.timestamp) {
+            throw new Error("Target timestamp must be between the timestamps of the two frames");
+        }
+        
+        const timeRange = frame2.timestamp - frame1.timestamp;
+        const interpolationFactor = (targetTimestamp - frame1.timestamp) / timeRange;
+        
+        // Interpolate action array
+        const interpolatedAction = LeRobotEpisode.interpolateArrays(
+            frame1.action, 
+            frame2.action, 
+            interpolationFactor
+        );
+        
+        // Interpolate observation.state array
+        const interpolatedObservationState = LeRobotEpisode.interpolateArrays(
+            frame1["observation.state"], 
+            frame2["observation.state"], 
+            interpolationFactor
+        );
+        
+        // Create the interpolated frame
+        return {
+            timestamp: targetTimestamp,
+            action: interpolatedAction,
+            "observation.state": interpolatedObservationState,
+            episode_index: frame1.episode_index,
+            task_index: frame1.task_index,
+            // Optional properties are not interpolated
+            frame_index: frame1.frame_index,
+            index: frame1.index
+        };
+    }
+    
+    /**
+     * Helper method to interpolate between two arrays
+     * 
+     * @param array1 First array of values
+     * @param array2 Second array of values
+     * @param factor Interpolation factor (0-1)
+     * @returns Interpolated array
+     */
+    private static interpolateArrays(array1: any, array2: any, factor: number): any {
+        // Handle different types of inputs
+        if (Array.isArray(array1) && Array.isArray(array2)) {
+            // For arrays, interpolate each element
+            return array1.map((value, index) => {
+                return value + (array2[index] - value) * factor;
+            });
+        } else if (typeof array1 === 'object' && typeof array2 === 'object') {
+            // For objects, interpolate each property
+            const result: any = {};
+            for (const key of Object.keys(array1)) {
+                if (key in array2) {
+                    result[key] = array1[key] + (array2[key] - array1[key]) * factor;
+                } else {
+                    result[key] = array1[key];
+                }
+            }
+            return result;
+        } else {
+            // For primitive values
+            return array1 + (array2 - array1) * factor;
+        }
+    }
+}
+
+/**
+ * Base interface for LeRobot dataset rows with common fields
+ */
+export interface NonIndexedLeRobotDatasetRow {
+    timestamp: number;
+    action: LeRobotAction;
+    "observation.state": LeRobotAction;
+
+    // properties are optional for back-converstion from normal rows
+    episode_index : number,
+    task_index : number
+    frame_index? : number
+    index? : number
+}
+
+/**
+ * Represents a complete row in the LeRobot dataset format after indexing
+ * Used in the final exported dataset
+ */
+export interface LeRobotDatasetRow extends NonIndexedLeRobotDatasetRow {
+    frame_index: number;
+    index: number;
+}
+
+/**
+ * A mechanism to store and record, the video of all associated cameras
+ * as well as the teleoperator data
+ * 
+ * follows the lerobot dataset format https://github.com/huggingface/lerobot/blob/cf86b9300dc83fdad408cfe4787b7b09b55f12cf/README.md#the-lerobotdataset-format
+ */
+export class LeRobotDatasetRecorder {
+    teleoperators: WebTeleoperator[];
+    videoStreams: { [key: string]: MediaStream };
+    mediaRecorders: { [key: string]: MediaRecorder };
+    videoChunks: { [key: string]: Blob[] };
+    videoBlobs: { [key: string]: Blob };
+    teleoperatorData: LeRobotEpisode[];
+    private _isRecording: boolean;
+    private episodeIndex: number; 
+    private taskIndex: number;
+    fps: number;
+    taskDescription: string;
+
+    constructor(
+        teleoperators: WebTeleoperator[], 
+        videoStreams: { [key: string]: MediaStream }, 
+        fps: number, 
+        taskDescription: string = "Default task description"
+    ) {
+        this.teleoperators = [];
+
+        if(teleoperators.length > 1)
+            throw Error(`
+                Currently, only 1 teleoperator can be recorded at a time!
+
+                Note : Do not attempt to create 2 different recorders via 2 different teleoperators, this would not work either
+            `)
+
+        this.addTeleoperator(teleoperators[0])
+        this.mediaRecorders = {};
+        this.videoChunks = {};
+        this.videoBlobs = {};
+        this.videoStreams = {};
+        this.teleoperatorData = [];
+        this._isRecording = false;
+        this.fps = fps;
+        this.taskDescription = taskDescription;
+
+        for(const [key, stream] of Object.entries(videoStreams)) {
+            this.addVideoStream(key, stream);
+        }
+    }
+
+    get isRecording() : boolean {
+        return this._isRecording;
+    }
+
+    get currentEpisode() : LeRobotEpisode | undefined {
+        return this.teleoperatorData.at(-1);
+    }
+
+    /**
+     * Adds a new video stream to be recorded
+     * @param key The key to identify this video stream
+     * @param stream The media stream to record from
+     */
+    addVideoStream(key: string, stream: MediaStream) {
+        console.log("Adding video stream", key);
+        if (this._isRecording) {
+            throw new Error("Cannot add video streams while recording");
+        }
+        
+        // Add to video streams dictionary
+        this.videoStreams[key] = stream;
+        
+        // Initialize MediaRecorder for this stream
+        this.mediaRecorders[key] = new MediaRecorder(stream, {
+            mimeType: 'video/mp4'
+        });
+
+        // add a video chunk array for this stream
+        this.videoChunks[key] = [];
+    }
+
+    /**
+     * Add a new teleoperator and set up state update callbacks
+     * for recording joint position data in the LeRobot dataset format
+     * 
+     * @param teleoperator The teleoperator to add callbacks to
+     */
+    addTeleoperator(teleoperator : WebTeleoperator) {
+        teleoperator.addOnStateUpdateCallback(params => {
+            if(this._isRecording){
+                if(!this.currentEpisode) throw Error("There is no current episode while recording, something is wrong!, this means that no frames exist on the recorder for some reason")
+
+                // Create a frame with the current state data
+                // Using the normalized configs for consistent data ranges
+                const frame : NonIndexedLeRobotDatasetRow = {
+                    timestamp : params.commandSentTimestamp,
+                    // For observation state, use the current motor positions
+                    "observation.state" : this.convertMotorConfigToArray(params.newMotorConfigsNormalized),
+                    // For action, use the target positions that were commanded
+                    action : this.convertMotorConfigToArray(params.previousMotorConfigsNormalized),
+                    episode_index : this.episodeIndex,
+                    task_index : this.taskIndex
+                }
+                
+                // Add the frame to the current episode
+                this.currentEpisode.add(frame);
+            }
+        });
+
+        this.teleoperators.push(teleoperator)
+    }
+    
+    /**
+     * Starts recording for all teleoperators and video streams
+     */
+    startRecording() {
+        console.log("Starting recording");
+        if (this._isRecording) {
+            console.warn('Recording already in progress');
+            return;
+        }
+
+        this._isRecording = true;
+
+        // add a new episode
+        this.teleoperatorData.push(new LeRobotEpisode())
+        
+        // Start recording video streams
+        Object.entries(this.videoStreams).forEach(([key, stream]) => {
+            // Create a media recorder for this stream
+            const mediaRecorder = new MediaRecorder(stream, {
+                mimeType: 'video/mp4'
+            });
+            
+            // Handle data available events
+            mediaRecorder.ondataavailable = (event) => {
+                console.log("data available for", key);
+                if (event.data && event.data.size > 0) {
+                    this.videoChunks[key].push(event.data);
+                }
+            };
+            
+            // Save the recorder and start recording
+            this.mediaRecorders[key] = mediaRecorder;
+            mediaRecorder.start(1000); // Capture in 1-second chunks
+            
+            console.log(`Started recording video stream: ${key}`);
+        });
+    }
+
+    setEpisodeIndex(index: number): void {
+        this.episodeIndex = index
+    }
+
+    setTaskIndex(index: number): void {
+        this.taskIndex = index
+    }
+
+    /**
+     * teleoperatorData by default only contains data
+     * for the episodes in a non-regularized manner
+     * 
+     * this function returns episodes in a regularized manner, wherein
+     * the frames in each are interpolated through so that all frames are spaced
+     * equally through each other
+     */
+    get episodes() : LeRobotEpisode[]{
+        const regularizedEpisodes : LeRobotEpisode[] = [];
+        let lastFrameIndex = 0;
+
+        for(let i=0; i<this.teleoperatorData.length; i++){
+            let episode = this.teleoperatorData[i];
+            const regularizedEpisode = episode.getInterpolatedRegularEpisode(this.fps, lastFrameIndex);
+            regularizedEpisodes.push(regularizedEpisode)
+
+            lastFrameIndex += regularizedEpisode.frames?.at(-1)?.index || 0
+        }
+
+        return regularizedEpisodes
+    }
+
+    /**
+     * Stops recording for all teleoperators and video streams
+     * @returns An object containing teleoperator data and video blobs
+     */
+    async stopRecording() {
+        if (!this._isRecording) {
+            console.warn('No recording in progress');
+            return { teleoperatorData: [], videoBlobs: {} };
+        }
+        
+        this._isRecording = false;
+
+        // Stop all media recorders
+        const stopPromises = Object.entries(this.mediaRecorders).map(([key, recorder]) => {
+            return new Promise<void>((resolve) => {
+                // Only do this if the recorder is active
+                if (recorder.state === 'inactive') {
+                    resolve();
+                    return;
+                }
+                
+                // When the recorder stops, create a blob
+                recorder.onstop = () => {
+                    // Combine all chunks into a single blob
+                    const chunks = this.videoChunks[key] || [];
+                    const blob = new Blob(chunks, { type: 'video/mp4' });
+                    this.videoBlobs[key] = blob;
+                    resolve();
+                };
+                
+                // Stop the recorder
+                recorder.stop();
+            });
+        });
+        
+        // Wait for all recorders to stop
+        await Promise.all(stopPromises);        
+        return {
+            teleoperatorData: this.episodes,
+            videoBlobs: this.videoBlobs
+        };
+    }
+
+    /**
+     * Clears the teleoperator data and video blobs
+     */
+    clearRecording() {
+        this.teleoperatorData = [];
+        this.videoBlobs = {};
+    }
+
+    /**
+     * Action is a dictionary of motor positions, timestamp1 and timestamp2 are when the actions occurred
+     * reqTimestamp must be between timestamp1 and timestamp2
+     * 
+     * the keys in action1 and action2 must match, this will loop through the dictionary
+     * and interpolate each action to the required timestamp
+     * 
+     * @param action1 Motor positions at timestamp1
+     * @param action2 Motor positions at timestamp2
+     * @param timestamp1 The timestamp of action1
+     * @param timestamp2 The timestamp of action2
+     * @param reqTimestamp The timestamp at which to interpolate
+     * @returns The interpolated action
+     */
+    _actionInterpolatate(action1 : any, action2 : any, timestamp1 : number, timestamp2 : number, reqTimestamp : number) : any {
+        if(reqTimestamp < timestamp1 || reqTimestamp > timestamp2) throw new Error("reqTimestamp must be between timestamp1 and timestamp2");
+        if(timestamp2 < timestamp1) throw new Error("timestamp2 must be greater than timestamp1");
+
+        const numActions = Object.keys(action1).length;
+        const interpolatedAction : any = {};
+        const timeRange = timestamp2 - timestamp1;
+
+        for(let i = 0; i < numActions; i++){
+            const key = Object.keys(action1)[i];
+            interpolatedAction[key] = action1[key] + (action2[key] - action1[key]) * (reqTimestamp - timestamp1) / timeRange;
+        }
+
+        return interpolatedAction;
+    }
+
+    /**
+     * Converts an action object to an array of numbers
+     * follows the same pattern as https://huggingface.co/datasets/lerobot/svla_so100_pickplace
+     * I am not really sure if the array can be in a different order
+     * but I am not going to risk it tbh 😛
+     * 
+     * @param action The action object to convert
+     * @returns An array of numbers
+     */
+    convertActionToArray(action : any) : number[] {
+        return [
+            action["shoulder_pan"], 
+            action["shoulder_lift"],
+            action["elbow_flex"],
+            action["wrist_flex"],
+            action["wrist_roll"],
+            action["gripper"]
+        ]
+    }
+    
+    /**
+     * Converts an array of MotorConfig objects to an action object
+     * following the same joint order as convertActionToArray
+     * 
+     * @param motorConfigs Array of MotorConfig objects
+     * @returns An action object with joint positions
+     */
+    convertMotorConfigToArray(motorConfigs: MotorConfig[]) : number[] {
+        // Create a map for quick lookup of motor positions by name
+        const motorMap: Record<string, number> = {};
+        for (const config of motorConfigs) {
+            motorMap[config.name] = config.currentPosition;
+        }
+        
+        // Define required joint names
+        const requiredJoints = [
+            "shoulder_pan", 
+            "shoulder_lift",
+            "elbow_flex",
+            "wrist_flex",
+            "wrist_roll",
+            "gripper"
+        ];
+        
+        // Check that all required joints are present
+        const missingJoints = requiredJoints.filter(joint => motorMap[joint] === undefined);
+        if (missingJoints.length > 0) {
+            throw new Error(`Missing required joints in motor configs: ${missingJoints.join(", ")}. Available joints: ${Object.keys(motorMap).join(", ")}`);
+        }
+        
+        // Return in the same order as convertActionToArray
+        return [
+            motorMap["shoulder_pan"], 
+            motorMap["shoulder_lift"],
+            motorMap["elbow_flex"],
+            motorMap["wrist_flex"],
+            motorMap["wrist_roll"],
+            motorMap["gripper"]
+        ];
+    }
+
+    /**
+     * Finds the closest timestamp to the target timestamp
+     * 
+     * the data must have timestamps in ascending order
+     * uses binary search to get the closest timestamp
+     * 
+     * @param data The data to search through
+     * @param targetTimestamp The target timestamp
+     * @returns The closest timestamp in the data's index
+     */
+    _findClosestTimestampBefore(data : any[], targetTimestamp : number): number{
+        let firstIndex = 0;
+        let lastIndex = data.length - 1;
+
+        while (firstIndex <= lastIndex) {
+            const middleIndex = Math.floor((firstIndex + lastIndex) / 2);
+            const middleTimestamp = data[middleIndex].timestamp;
+
+            if (middleTimestamp === targetTimestamp) {
+                return middleIndex;
+            } else if (middleTimestamp < targetTimestamp) {
+                firstIndex = middleIndex + 1;
+            } else {
+                lastIndex = middleIndex - 1;
+            }
+        }
+
+        return lastIndex;
+    }
+
+    /**
+     * Takes non-regularly spaced lerobot-ish data and interpolates it to a regularly spaced dataset
+     * also adds additional
+     * - frame_index
+     * - episode_index
+     * - index columns
+     * 
+     * to match lerobot dataset requirements
+     */
+    _interpolateAndCompleteLerobotData(fps : number, frameData : NonIndexedLeRobotDatasetRow[], lastFrameIndex : number) : LeRobotDatasetRow[]{
+        const interpolatedData : LeRobotDatasetRow[] = [];
+        const minTimestamp = frameData[0].timestamp;
+        const maxTimestamp = frameData[frameData.length - 1].timestamp;
+        const timeDifference = maxTimestamp - minTimestamp;
+        const numFrames = Math.floor(timeDifference * fps);
+        const firstFrame = frameData[0]
+
+
+        console.log("frames before interpolation", numFrames, frameData[0].timestamp, frameData[frameData.length - 1].timestamp, fps)
+
+        interpolatedData.push({
+            timestamp: firstFrame.timestamp,
+            action: this.convertActionToArray(firstFrame.action),
+            "observation.state": this.convertActionToArray(firstFrame["observation.state"]),
+            episode_index: firstFrame.episode_index,
+            task_index: firstFrame.task_index,
+            frame_index : 0,
+            index: lastFrameIndex
+        })
+
+        // start from 1 as the first frame is pushed already (see above)
+        for(let i = 1; i < numFrames; i++){
+            const timestamp = (i / fps)
+            const closestIndex = this._findClosestTimestampBefore(frameData, timestamp);
+            const nextIndex = closestIndex + 1;
+            const closestItemData = frameData[closestIndex];
+            const nextItemData = frameData[nextIndex];
+            const action = this._actionInterpolatate(closestItemData.action, nextItemData.action, closestItemData.timestamp, nextItemData.timestamp, timestamp);
+            const observation_state = this._actionInterpolatate(closestItemData["observation.state"], nextItemData["observation.state"], closestItemData.timestamp, nextItemData.timestamp, timestamp);
+
+            interpolatedData.push({
+                timestamp: timestamp,
+                action: this.convertActionToArray(action),
+                "observation.state": this.convertActionToArray(observation_state),
+                episode_index: closestItemData.episode_index,
+                task_index: closestItemData.task_index,
+                frame_index : i,
+                index: lastFrameIndex + i
+            });
+
+        }   
+
+        return interpolatedData;
+    }
+
+    /**
+     * converts all the frames of a recording into lerobot dataset frame style
+     * 
+     * NOTE : This does not interpolate the data, you are only working with raw data
+     * that is called by the teleop when things are actively "changing"
+     * @param episodeRough 
+     */
+    _convertToLeRobotDataFormatFrames(episodeRough : any[]) : NonIndexedLeRobotDatasetRow[]{
+        const properFormatFrames : NonIndexedLeRobotDatasetRow[] = [];
+
+        const firstTimestamp = episodeRough[0].commandSentTimestamp;
+        for(let i=0; i<episodeRough.length; i++){
+            const frameRough  = episodeRough[i]
+
+            properFormatFrames.push({
+                timestamp: frameRough.commandSentTimestamp - firstTimestamp, // so timestamps start from 0, and are in seconds
+                action: frameRough.previousMotorConfigsNormalized,
+                "observation.state": frameRough.newMotorConfigsNormalized,
+                episode_index: frameRough.episodeIndex,
+                task_index: frameRough.taskIndex
+            });
+        }
+
+        return properFormatFrames
+    }
+
+    /**
+     * Converts teleoperator data to a parquet blob
+     * @private
+     * @returns Array of objects containing parquet file content and path
+     */
+    private async _exportEpisodesToBlob(episodes: LeRobotEpisode[]): Promise<{content: Blob, path: string}[]> {
+        // combine all the frames
+        let data : NonIndexedLeRobotDatasetRow[] = [];
+        const episodeBlobs : any[] = []
+
+        for(let i=0; i<episodes.length; i++){
+            const episode = episodes[i]
+            data = episode.frames
+            const { tableFromArrays, vectorFromArray } = arrow;
+
+            const timestamps = data.map((row: any) => row.timestamp);
+            const actions = data.map((row: any) => row.action);
+            const observationStates = data.map((row: any) => row["observation.state"]);
+            const episodeIndexes = data.map((row: any) => row.episode_index);
+            const taskIndexes = data.map((row: any) => row.task_index);
+            const frameIndexes = data.map((row: any) => row.frame_index);
+            const indexes = data.map((row: any) => row.index);
+
+            const table = tableFromArrays({
+                timestamp: timestamps,
+                // @ts-ignore, this works, idk why
+                action: vectorFromArray(actions, new arrow.List(new arrow.Field("item", new arrow.Float32()))),
+                // @ts-ignore, this works, idk why
+                "observation.state": vectorFromArray(observationStates, new arrow.List(new arrow.Field("item", new arrow.Float32()))),
+                episode_index: episodeIndexes,
+                task_index: taskIndexes,
+                frame_index: frameIndexes,
+                index: indexes
+            });
+
+            const wasmUrl = "https://cdn.jsdelivr.net/npm/[email protected]/esm/parquet_wasm_bg.wasm";
+            const initWasm = parquet.default;
+            await initWasm(wasmUrl);
+
+            const wasmTable = parquet.Table.fromIPCStream(arrow.tableToIPC(table, "stream"));
+            const writerProperties = new parquet.WriterPropertiesBuilder()
+                .setCompression(parquet.Compression.UNCOMPRESSED)
+                .build();
+            
+            const parquetUint8Array = parquet.writeParquet(wasmTable, writerProperties);
+            const numpadded = i.toString().padStart(6, "0")
+            const content = new Blob([parquetUint8Array])
+
+            episodeBlobs.push({
+                content, path: `data/chunk-000/episode_${numpadded}.parquet`
+            })
+            
+        }
+
+        return episodeBlobs
+    }
+
+    /**
+     * Exports the teleoperator data in lerobot format
+     * @param format The format to return the data in ('json' or 'blob')
+     * @returns Either an array of data objects or a Uint8Array blob depending on format
+     */
+    exportEpisodes(format: 'json' | 'blob' = 'json') {
+        if(this._isRecording) throw new Error("This can only be called after recording has stopped!");
+        const data = this.episodes;
+        
+        if (format === 'json') {
+            return data;
+        } else {
+            return this._exportEpisodesToBlob(data);
+        }
+    }
+
+    /**
+     * Exports the media (video) data as blobs
+     * @returns A dictionary of video blobs with the same keys as videoStreams
+     */
+    async exportMediaData(): Promise<{ [key: string]: Blob }> {
+        if(this._isRecording) throw new Error("This can only be called after recording has stopped!");
+        return this.videoBlobs;
+    }
+
+    /**
+     * Generates metadata for the dataset
+     * @returns Metadata object for the LeRobot dataset
+     */
+    async generateMetadata(data : any[]): Promise<any> {
+        // Calculate total episodes, frames, and tasks
+        let total_episodes = 0;
+        const total_frames = data.length;
+        let total_tasks = 0;
+
+        for (const row of data) {
+            total_episodes = Math.max(total_episodes, row.episode_index);
+            total_tasks = Math.max(total_tasks, row.task_index);
+        }
+        
+        // Create video info objects for each video stream
+        const videos_info: VideoInfo[] = Object.keys(this.videoBlobs).map(key => {
+            // Default values - in a production environment, you would extract
+            // these from the actual video metadata using the key to identify the video source
+            console.log(`Generating metadata for video stream: ${key}`);
+            return {
+                height: 480,
+                width: 640,
+                channels: 3,
+                codec: 'h264',
+                pix_fmt: 'yuv420p',
+                is_depth_map: false,
+                has_audio: false
+            };
+        });
+        
+        // Calculate approximate file sizes in MB
+        const data_files_size_in_mb = Math.round(data.length * 0.001); // Estimate
+        
+        // Calculate video size by summing the sizes of all video blobs and converting to MB
+        let video_files_size_in_mb = 0;
+        for (const blob of Object.values(this.videoBlobs)) {
+            video_files_size_in_mb += blob.size / (1024 * 1024);
+        }
+        video_files_size_in_mb = Math.round(video_files_size_in_mb);
+        
+        // Generate and return the metadata
+        return getMetadataInfo({
+            total_episodes,
+            total_frames,
+            total_tasks,
+            chunks_size: 1000, // Default chunk size
+            fps: this.fps,
+            splits: { "train": `0:${total_episodes}` }, // All episodes in train split
+            features: {}, // Additional features can be added here
+            videos_info,
+            data_files_size_in_mb,
+            video_files_size_in_mb
+        });
+    }
+
+    /**
+     * Generates statistics for the dataset
+     * @returns Statistics object for the LeRobot dataset
+     */
+    async getStatistics(data : any[]): Promise<any> {
+        
+        // Get camera keys from the video blobs
+        const cameraKeys = Object.keys(this.videoBlobs);
+        
+        // Generate stats using the data and camera keys
+        return getStats(data, cameraKeys);
+    }
+
+    /**
+     * Creates a tasks.parquet file containing task description
+     * @returns A Uint8Array blob containing the parquet data
+     */
+    async createTasksParquet(): Promise<Uint8Array> {
+        // Create a simple data structure with the task description
+        const tasksData = [{
+            task_index: 0,
+            __index_level_0__: this.taskDescription
+        }];
+        
+        // Create Arrow table from the data
+        const taskIndexArr = arrow.vectorFromArray(tasksData.map(d => d.task_index), new arrow.Int32());
+        const descriptionArr = arrow.vectorFromArray(tasksData.map(d => d.__index_level_0__), new arrow.Utf8());
+        
+        const table = arrow.tableFromArrays({
+            // @ts-ignore, this works, idk why
+            task_index: taskIndexArr,
+            // @ts-ignore, this works, idk why
+            __index_level_0__: descriptionArr
+        });
+        
+        // Initialize the WASM module
+        const wasmUrl = "https://cdn.jsdelivr.net/npm/[email protected]/esm/parquet_wasm_bg.wasm";
+        const initWasm = parquet.default;
+        await initWasm(wasmUrl);
+        
+        // Convert Arrow table to Parquet WASM table
+        const wasmTable = parquet.Table.fromIPCStream(arrow.tableToIPC(table, "stream"));
+        
+        // Set compression properties
+        const writerProperties = new parquet.WriterPropertiesBuilder()
+            .setCompression(parquet.Compression.UNCOMPRESSED)
+            .build();
+        
+        // Write the Parquet file
+        return parquet.writeParquet(wasmTable, writerProperties);
+    }
+    
+    /**
+     * Creates the episodes statistics parquet file
+     * @returns A Uint8Array blob containing the parquet data
+     */
+    async getEpisodeStatistics(data : any[]): Promise<Uint8Array> {
+        const { vectorFromArray } = arrow;
+        const statistics = await this.getStatistics(data);
+        
+        // Calculate total episodes and frames
+        let total_episodes = 0;
+        
+        for(let row of data){
+            total_episodes = Math.max(total_episodes, row.episode_index)
+        }
+
+        total_episodes += 1; // +1 since episodes start from 0  
+
+        const episodes: any[] = [];
+        
+        // we'll create one row per episode
+        for (let episode_index = 0; episode_index < total_episodes; episode_index++) {
+            // Get data for this episode only
+            const episodeData = data.filter(row => row.episode_index === episode_index);
+            
+            // Extract timestamps for this episode
+            const timestamps = episodeData.map(row => row.timestamp);
+            let min_timestamp = Infinity;
+            let max_timestamp = -Infinity;
+
+            for(let timestamp of timestamps){
+                min_timestamp = Math.min(min_timestamp, timestamp);
+                max_timestamp = Math.max(max_timestamp, timestamp);
+            }
+
+
+            
+            // Camera keys from video blobs
+            const cameraKeys = Object.keys(this.videoBlobs);
+            
+            // Create entry for this episode
+            const episodeEntry: any = {
+                // Basic episode information
+                episode_index: episode_index,
+                "data/chunk_index": 0,
+                "data/file_index": 0,
+                dataset_from_index: 0,
+                dataset_to_index: episodeData.length - 1,
+                length: episodeData.length,
+                tasks: [0],  // Task index 0, could be extended for multiple tasks
+                
+                // Meta information
+                "meta/episodes/chunk_index": 0,
+                "meta/episodes/file_index": 0,
+            };
+            
+            // Add video information for each camera
+            cameraKeys.forEach(key => {
+                episodeEntry[`videos/observation.images.${key}/chunk_index`] = 0;
+                episodeEntry[`videos/observation.images.${key}/file_index`] = 0;
+                episodeEntry[`videos/observation.images.${key}/from_timestamp`] = min_timestamp;
+                episodeEntry[`videos/observation.images.${key}/to_timestamp`] = max_timestamp;
+            });
+            
+            // Add statistics for each field
+            // This is a simplified approach - in a real implementation, you'd calculate
+            // these values for each episode individually
+            
+            // Add timestamp statistics
+            episodeEntry["stats/timestamp/min"] = [statistics.timestamp.min];
+            episodeEntry["stats/timestamp/max"] = [statistics.timestamp.max];
+            episodeEntry["stats/timestamp/mean"] = [statistics.timestamp.mean];
+            episodeEntry["stats/timestamp/std"] = [statistics.timestamp.std];
+            episodeEntry["stats/timestamp/count"] = [statistics.timestamp.count];
+            
+            // Add frame_index statistics
+            episodeEntry["stats/frame_index/min"] = [statistics.frame_index.min];
+            episodeEntry["stats/frame_index/max"] = [statistics.frame_index.max];
+            episodeEntry["stats/frame_index/mean"] = [statistics.frame_index.mean];
+            episodeEntry["stats/frame_index/std"] = [statistics.frame_index.std];
+            episodeEntry["stats/frame_index/count"] = [statistics.frame_index.count];
+            
+            // Add episode_index statistics
+            episodeEntry["stats/episode_index/min"] = [statistics.episode_index.min];
+            episodeEntry["stats/episode_index/max"] = [statistics.episode_index.max];
+            episodeEntry["stats/episode_index/mean"] = [statistics.episode_index.mean];
+            episodeEntry["stats/episode_index/std"] = [statistics.episode_index.std];
+            episodeEntry["stats/episode_index/count"] = [statistics.episode_index.count];
+            
+            // Add task_index statistics
+            episodeEntry["stats/task_index/min"] = [statistics.task_index.min];
+            episodeEntry["stats/task_index/max"] = [statistics.task_index.max];
+            episodeEntry["stats/task_index/mean"] = [statistics.task_index.mean];
+            episodeEntry["stats/task_index/std"] = [statistics.task_index.std];
+            episodeEntry["stats/task_index/count"] = [statistics.task_index.count];
+            
+            // Add index statistics
+            episodeEntry["stats/index/min"] = [0];
+            episodeEntry["stats/index/max"] = [episodeData.length - 1];
+            episodeEntry["stats/index/mean"] = [episodeData.length / 2];
+            episodeEntry["stats/index/std"] = [episodeData.length / 4]; // Approximate std
+            episodeEntry["stats/index/count"] = [episodeData.length];
+            
+            // Add action statistics (placeholder)
+            episodeEntry["stats/action/min"] = [0.0];
+            episodeEntry["stats/action/max"] = [1.0];
+            episodeEntry["stats/action/mean"] = [0.5];
+            episodeEntry["stats/action/std"] = [0.2];
+            episodeEntry["stats/action/count"] = [episodeData.length];
+            
+            // Add observation.state statistics (placeholder)
+            episodeEntry["stats/observation.state/min"] = [0.0];
+            episodeEntry["stats/observation.state/max"] = [1.0];
+            episodeEntry["stats/observation.state/mean"] = [0.5];
+            episodeEntry["stats/observation.state/std"] = [0.2];
+            episodeEntry["stats/observation.state/count"] = [episodeData.length];
+            
+            // Add observation.images statistics for each camera
+            cameraKeys.forEach(key => {
+                // Get the image statistics from the overall statistics
+                const imageStats = statistics[`observation.images.${key}`] || {
+                    min: [[[0.0]], [[0.0]], [[0.0]]],
+                    max: [[[255.0]], [[255.0]], [[255.0]]],
+                    mean: [[[127.5]], [[127.5]], [[127.5]]],
+                    std: [[[50.0]], [[50.0]], [[50.0]]],
+                    count: [[[episodeData.length * 3]]]
+                };
+                
+                episodeEntry[`stats/observation.images.${key}/min`] = imageStats.min;
+                episodeEntry[`stats/observation.images.${key}/max`] = imageStats.max;
+                episodeEntry[`stats/observation.images.${key}/mean`] = imageStats.mean;
+                episodeEntry[`stats/observation.images.${key}/std`] = imageStats.std;
+                episodeEntry[`stats/observation.images.${key}/count`] = imageStats.count;
+            });
+            
+            episodes.push(episodeEntry);
+        }
+        
+        // Create vector arrays for each column
+        const columns: any = {};
+        
+        // Define column names and default types
+        const columnNames = [
+            "episode_index", "data/chunk_index", "data/file_index", "dataset_from_index", "dataset_to_index",
+            "length", "meta/episodes/chunk_index", "meta/episodes/file_index", "tasks"
+        ];
+        
+        // Add camera-specific columns
+        const cameraKeys = Object.keys(this.videoBlobs);
+        cameraKeys.forEach(key => {
+            columnNames.push(
+                `videos/observation.images.${key}/chunk_index`,
+                `videos/observation.images.${key}/file_index`,
+                `videos/observation.images.${key}/from_timestamp`,
+                `videos/observation.images.${key}/to_timestamp`
+            );
+        });
+        
+        // Add statistic columns for each field
+        const statFields = ["timestamp", "frame_index", "episode_index", "task_index", "index", "action", "observation.state"];
+        statFields.forEach(field => {
+            columnNames.push(
+                `stats/${field}/min`, 
+                `stats/${field}/max`, 
+                `stats/${field}/mean`,
+                `stats/${field}/std`,
+                `stats/${field}/count`
+            );
+        });
+        
+        // Add image statistic columns for each camera
+        cameraKeys.forEach(key => {
+            columnNames.push(
+                `stats/observation.images.${key}/min`,
+                `stats/observation.images.${key}/max`,
+                `stats/observation.images.${key}/mean`,
+                `stats/observation.images.${key}/std`,
+                `stats/observation.images.${key}/count`
+            );
+        });
+        
+        // Create vector arrays for each column
+        columnNames.forEach(columnName => {
+            const values = episodes.map(ep => ep[columnName] || 0);
+            
+            // Check if the column is an array type and needs special handling
+            if (columnName.includes('stats/') || columnName === 'tasks') {
+                // Handle different types of array columns based on their naming pattern
+                if (columnName.includes('/count')) {
+                    // Bigint arrays for count fields
+                    // @ts-ignore
+                    columns[columnName] = vectorFromArray(values.map(v => Number(v)), new arrow.List(new arrow.Field("item", new arrow.Int64())));
+                } else if (columnName.includes('/min') || columnName.includes('/max') || 
+                           columnName.includes('/mean') || columnName.includes('/std')) {
+                    // Double arrays for min, max, mean, std fields
+                    if (columnName.includes('observation.images') && 
+                       (columnName.includes('/min') || columnName.includes('/max') || 
+                        columnName.includes('/mean') || columnName.includes('/std'))) {
+                        // These are 3D arrays [[[value]]]
+                        // For 3D arrays, we need nested Lists
+                        // @ts-ignore
+                        columns[columnName] = vectorFromArray(values, new arrow.List(new arrow.Field("item", 
+                                                 new arrow.List(new arrow.Field("subitem", 
+                                                     new arrow.List(new arrow.Field("value", new arrow.Float64())))))));
+                    } else {
+                        // These are normal arrays [value]
+                        // @ts-ignore
+                        columns[columnName] = vectorFromArray(values, new arrow.List(new arrow.Field("item", new arrow.Float64())));
+                    }
+                } else {
+                    // Default to Float64 List for other array types
+                    // @ts-ignore
+                    columns[columnName] = vectorFromArray(values, new arrow.List(new arrow.Field("item", new arrow.Float64())));
+                }
+            } else {
+                // For non-array columns, use regular vectorFromArray
+                // @ts-ignore
+                columns[columnName] = vectorFromArray(values);
+            }
+        });
+        
+        // Create the table with all columns
+        const table = arrow.tableFromArrays(columns);
+        
+        // Initialize the WASM module
+        const wasmUrl = "https://cdn.jsdelivr.net/npm/[email protected]/esm/parquet_wasm_bg.wasm";
+        const initWasm = parquet.default;
+        await initWasm(wasmUrl);
+        
+        // Convert Arrow table to Parquet WASM table
+        const wasmTable = parquet.Table.fromIPCStream(arrow.tableToIPC(table, "stream"));
+        
+        // Set compression properties
+        const writerProperties = new parquet.WriterPropertiesBuilder()
+            .setCompression(parquet.Compression.UNCOMPRESSED)
+            .build();
+        
+        // Write the Parquet file
+        return parquet.writeParquet(wasmTable, writerProperties);
+    }
+
+    generateREADME(metaInfo : string) {
+        return generateREADME(metaInfo);
+    }
+
+    /**
+     * Creates an array of path and blob content objects for the LeRobot dataset
+     * 
+     * @returns An array of {path, content} objects representing the dataset files
+     * @private
+     */
+    async _exportForLeRobotBlobs() {
+        const teleoperatorDataJson = await this.exportEpisodes('json') as any[];
+        const parquetEpisodeDataFiles = await this._exportEpisodesToBlob(teleoperatorDataJson)
+        const videoBlobs = await this.exportMediaData();
+        const metadata = await this.generateMetadata(teleoperatorDataJson);
+        const statistics = await this.getStatistics(teleoperatorDataJson);
+        const tasksParquet = await this.createTasksParquet();
+        const episodesParquet = await this.getEpisodeStatistics(teleoperatorDataJson);
+        const readme = this.generateREADME(JSON.stringify(metadata));
+
+        // Create the blob array with proper paths
+        const blobArray = [
+            ...parquetEpisodeDataFiles,
+            {
+                path: "meta/info.json",
+                content: new Blob([JSON.stringify(metadata, null, 2)], { type: "application/json" })
+            },
+            {
+                path: "meta/stats.json",
+                content: new Blob([JSON.stringify(statistics, null, 2)], { type: "application/json" })
+            },
+            {
+                path: "meta/tasks.parquet",
+                content: new Blob([tasksParquet])
+            },
+            {
+                path: "meta/episodes/chunk-000/file-000.parquet",
+                content: new Blob([episodesParquet])
+            },
+            {
+                path: "README.md",
+                content: new Blob([readme], { type: "text/markdown" })
+            }
+        ];
+        
+        // Add video blobs with proper paths
+        for (const [key, blob] of Object.entries(videoBlobs)) {
+            blobArray.push({
+                path: `videos/chunk-000/observation.images.${key}/episode_000000.mp4`,
+                content: blob
+            });
+        }
+        
+        return blobArray;
+    }
+
+    /**
+     * Creates a ZIP file from the dataset blobs
+     * 
+     * @returns A Blob containing the ZIP file
+     * @private
+     */
+    async _exportForLeRobotZip() {
+        const blobArray = await this._exportForLeRobotBlobs();
+        const zip = new JSZip();
+        
+        // Add all blobs to the zip with their paths
+        for (const item of blobArray) {
+            // Split the path to handle directories
+            const pathParts = item.path.split('/');
+            const fileName = pathParts.pop() || '';
+            let currentFolder = zip;
+            
+            // Create nested folders as needed
+            if (pathParts.length > 0) {
+                for (const part of pathParts) {
+                    currentFolder = currentFolder.folder(part) || currentFolder;
+                }
+            }
+            
+            // Add file to the current folder
+            currentFolder.file(fileName, item.content);
+        }
+        
+        // Generate the zip file
+        return await zip.generateAsync({ type: "blob" });
+    }
+
+    /**
+     * Uploads the LeRobot dataset to Hugging Face
+     * 
+     * @param username Hugging Face username
+     * @param repoName Repository name for the dataset
+     * @param accessToken Hugging Face access token
+     * @returns The LeRobotHFUploader instance used for upload
+     */
+    async _exportForLeRobotHuggingface(username: string, repoName: string, accessToken: string) {
+        // Create the blobs array for upload
+        const blobArray = await this._exportForLeRobotBlobs();
+        
+        // Create the uploader
+        const uploader = new LeRobotHFUploader(username, repoName);
+        
+        // Convert blobs to File objects for HF uploader
+        const files = blobArray.map(item => {
+            return {
+                path: item.path,
+                content: item.content
+            };
+        });
+        
+        // Generate a unique reference ID for tracking the upload
+        const referenceId = `lerobot-upload-${Date.now()}`;
+        
+        try {
+            // Start the upload process
+            uploader.createRepoAndUploadFiles(files, accessToken, referenceId);
+            console.log(`Successfully uploaded dataset to ${username}/${repoName}`);
+            return uploader;
+        } catch (error) {
+            console.error("Error uploading to Hugging Face:", error);
+            throw error;
+        }
+    }
+
+    /**
+     * Uploads the LeRobot dataset to Amazon S3
+     * 
+     * @param bucketName S3 bucket name
+     * @param accessKeyId AWS access key ID
+     * @param secretAccessKey AWS secret access key
+     * @param region AWS region (default: us-east-1)
+     * @param prefix Optional prefix (folder) to upload files to within the bucket
+     * @returns The LeRobotS3Uploader instance used for upload
+     */
+    async _exportForLeRobotS3(bucketName: string, accessKeyId: string, secretAccessKey: string, region: string = "us-east-1", prefix: string = "") {
+        // Create the blobs array for upload
+        const blobArray = await this._exportForLeRobotBlobs();
+        
+        // Create the uploader
+        const uploader = new LeRobotS3Uploader(bucketName, region);
+        
+        // Convert blobs to File objects for S3 uploader
+        const files = blobArray.map(item => {
+            return {
+                path: item.path,
+                content: item.content
+            };
+        });
+        
+        // Generate a unique reference ID for tracking the upload
+        const referenceId = `lerobot-s3-upload-${Date.now()}`;
+        
+        try {
+            // Start the upload process
+            uploader.checkBucketAndUploadFiles(files, accessKeyId, secretAccessKey, prefix, referenceId);
+            console.log(`Successfully uploaded dataset to S3 bucket: ${bucketName}`);
+            return uploader;
+        } catch (error) {
+            console.error("Error uploading to S3:", error);
+            throw error;
+        }
+    }
+
+    /**
+     * Exports the LeRobot dataset in various formats
+     * 
+     * @param format The export format - 'blobs', 'zip', 'zip-download', 'huggingface', or 's3'
+     * @param options Additional options for specific formats
+     * @param options.username Hugging Face username (if not provided for "huggingface" format, it will use the default username)
+     * @param options.repoName Hugging Face repository name (required for 'huggingface' format)
+     * @param options.accessToken Hugging Face access token (required for 'huggingface' format)
+     * @param options.bucketName S3 bucket name (required for 's3' format)
+     * @param options.accessKeyId AWS access key ID (required for 's3' format)
+     * @param options.secretAccessKey AWS secret access key (required for 's3' format)
+     * @param options.region AWS region (optional for 's3' format, default: us-east-1)
+     * @param options.prefix S3 prefix/folder (optional for 's3' format)
+     * @returns The exported data in the requested format or the uploader instance for 'huggingface'/'s3' formats
+     */
+    async exportForLeRobot(format: 'blobs' | 'zip' | 'zip-download' | 'huggingface' | 's3' = 'zip-download', options?: {
+        username?: string;
+        repoName?: string;
+        accessToken?: string;
+        bucketName?: string;
+        accessKeyId?: string;
+        secretAccessKey?: string;
+        region?: string;
+        prefix?: string;
+    }) {
+        switch (format) {
+            case 'blobs':
+                return this._exportForLeRobotBlobs();
+                
+            case 'zip':
+                return this._exportForLeRobotZip();
+                
+            case 'huggingface':                
+                // Validate required options for Hugging Face upload
+                if (!options || !options.repoName || !options.accessToken) {
+                    throw new Error('Hugging Face upload requires repoName, and accessToken options');
+                }
+
+                if (!options.username) {
+                    const hub = await import("@huggingface/hub");
+                    const {name: username} = await hub.whoAmI({accessToken: options.accessToken});
+                    options.username = username;
+                }
+                
+                return this._exportForLeRobotHuggingface(
+                    options.username,
+                    options.repoName,
+                    options.accessToken
+                );
+                
+            case 's3':
+                // Validate required options for S3 upload
+                if (!options || !options.bucketName || !options.accessKeyId || !options.secretAccessKey) {
+                    throw new Error('S3 upload requires bucketName, accessKeyId, and secretAccessKey options');
+                }
+                
+                return this._exportForLeRobotS3(
+                    options.bucketName,
+                    options.accessKeyId,
+                    options.secretAccessKey,
+                    options.region,
+                    options.prefix
+                );
+                
+            case 'zip-download':
+            default:
+                // Get the zip blob
+                const zipContent = await this._exportForLeRobotZip();
+                
+                // Create a URL for the zip file
+                const url = URL.createObjectURL(zipContent);
+                
+                // Create a download link and trigger the download
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = `lerobot_dataset_${new Date().toISOString().replace(/[:.]/g, '-')}.zip`;
+                document.body.appendChild(link);
+                link.click();
+                
+                // Clean up
+                setTimeout(() => {
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(url);
+                }, 100);
+                
+                return zipContent;
+        }
+    }
+}

packages/web/src/runpodTrainer.ts

@@ -0,0 +1,60 @@
+/**
+ * Class to train a model using runpod
+ */
+class LeRobotRunpodTrainer extends EventTarget {
+    api_token: string;
+    constructor(api_token: string) {
+        super();
+        this.api_token = api_token;
+    }
+
+    async _startPod(api_token: string) {
+        const podOptions = {
+            allowedCudaVersions: ["12.8"],
+            cloudType: "SECURE",
+            computeType: "GPU",
+            containerDiskInGb: 50,
+            countryCodes: ["<string>"],
+            cpuFlavorIds: ["cpu3c"],
+            cpuFlavorPriority: "availability",
+            dataCenterIds: ["EU-RO-1","CA-MTL-1"],
+            dataCenterPriority: "availability",
+            dockerEntrypoint: [],
+            dockerStartCmd: [],
+            env: {"ENV_VAR":"value"},
+            globalNetworking: true,
+            gpuCount: 1,
+            gpuTypeIds: ["NVIDIA GeForce RTX 4090"],
+            gpuTypePriority: "availability",
+            imageName: "runpod/pytorch:2.1.0-py3.10-cuda11.8.0-devel-ubuntu22.04",
+            interruptible: false,
+            locked: false,
+            minDiskBandwidthMBps: 123,
+            minDownloadMbps: 123,
+            minRAMPerGPU: 8,
+            minUploadMbps: 123,
+            minVCPUPerGPU: 2,
+            name: "my pod",
+            ports: ["8888/http","22/tcp"],
+            supportPublicIp: true,
+            templateId: null,
+            vcpuCount: 2,
+            volumeInGb: 20,
+            volumeMountPath: "/workspace"
+        }
+        const options = {
+            method: 'POST',
+            headers: {Authorization: 'Bearer ' + api_token, 'Content-Type': 'application/json'},
+            body: JSON.stringify(podOptions)
+        };
+          
+        const response = await fetch('https://rest.runpod.io/v1/pods', options);
+        const data = await response.json();
+        return data;
+    }
+
+    async start() {
+        await this._startPod(this.api_token);
+        this.dispatchEvent(new CustomEvent("deployed_training_pod"));
+    }
+}

packages/web/src/s3_uploader.ts

@@ -0,0 +1,172 @@
+// Note: To use this module, you'll need to install the AWS SDK:
+// npm install @aws-sdk/client-s3 @aws-sdk/lib-storage
+
+import { S3Client, HeadBucketCommand } from "@aws-sdk/client-s3";
+import { Upload } from "@aws-sdk/lib-storage";
+
+// Define ContentSource type locally to avoid HuggingFace dependency
+type ContentSource = Blob | ArrayBuffer | Uint8Array | string;
+type FileArray = Array<URL | File | { path: string; content: ContentSource }>;
+
+/**
+ * Uploads a leRobot dataset to Amazon S3
+ */
+export class LeRobotS3Uploader extends EventTarget {
+    private _bucketName: string;
+    private _region: string;
+    private _uploaded: boolean;
+    private _bucket_exists: boolean;
+    private _s3Client: S3Client | null;
+    
+    constructor(bucketName: string, region: string = "us-east-1") {
+        super();
+        this._bucketName = bucketName;
+        this._region = region;
+        this._uploaded = false;
+        this._bucket_exists = false;
+        this._s3Client = null;
+    }
+    
+    /**
+     * Returns whether the bucket has been successfully checked/created
+     */
+    get bucketExists(): boolean {
+        return this._bucket_exists;
+    }
+
+    get uploaded(): boolean {
+        return this._uploaded;
+    }
+
+    /**
+     * Initialize the S3 client with credentials
+     * 
+     * @param accessKeyId AWS access key ID
+     * @param secretAccessKey AWS secret access key
+     */
+    initializeClient(accessKeyId: string, secretAccessKey: string): void {
+        this._s3Client = new S3Client({
+            region: this._region,
+            credentials: {
+                accessKeyId,
+                secretAccessKey
+            }
+        });
+    }
+
+    /**
+     * Checks if the bucket exists and uploads files to it
+     * 
+     * @param files The files to upload
+     * @param accessKeyId AWS access key ID
+     * @param secretAccessKey AWS secret access key
+     * @param prefix Optional prefix (folder) to upload files to within the bucket
+     * @param referenceId The reference id for the upload, to track it (optional)
+     */
+    async checkBucketAndUploadFiles(
+        files: FileArray, 
+        accessKeyId: string, 
+        secretAccessKey: string, 
+        prefix: string = "",
+        referenceId: string = ""
+    ): Promise<void> {
+        // Initialize the client if not already done
+        if (!this._s3Client) {
+            this.initializeClient(accessKeyId, secretAccessKey);
+        }
+
+        // Check if bucket exists
+        try {
+            await this._s3Client!.send(new HeadBucketCommand({ Bucket: this._bucketName }));
+            this._bucket_exists = true;
+            this.dispatchEvent(new CustomEvent("bucketExists", { 
+                detail: { bucketName: this._bucketName } 
+            }));
+        } catch (error) {
+            throw new Error(`Bucket ${this._bucketName} does not exist or you don't have permission to access it`);
+        }
+
+        // Upload files
+        const uploadPromises: Promise<void>[] = [];
+        for (const file of files) {
+            uploadPromises.push(this.uploadFileWithProgress([file], prefix, referenceId));
+        }
+
+        await Promise.all(uploadPromises);
+        this._uploaded = true;
+    }
+
+    /**
+     * Uploads files to S3 with progress events
+     * 
+     * @param files The files to upload
+     * @param prefix Optional prefix (folder) to upload files to within the bucket
+     * @param referenceId The reference id for the upload, to track it (optional)
+     */
+    async uploadFileWithProgress(
+        files: FileArray, 
+        prefix: string = "", 
+        referenceId: string = ""
+    ): Promise<void> {
+        if (!this._s3Client) {
+            throw new Error("S3 client not initialized. Call initializeClient first.");
+        }
+
+        for (const file of files) {
+            let key: string;
+            let body: any;
+
+            if (file instanceof URL) {
+                const response = await fetch(file);
+                body = await response.blob();
+                key = `${prefix}${prefix ? '/' : ''}${file.pathname.split('/').pop()}`;
+            } else if (file instanceof File) {
+                body = file;
+                key = `${prefix}${prefix ? '/' : ''}${file.name}`;
+            } else {
+                body = file.content;
+                key = `${prefix}${prefix ? '/' : ''}${file.path}`;
+            }
+
+            const upload = new Upload({
+                client: this._s3Client,
+                params: {
+                    Bucket: this._bucketName,
+                    Key: key,
+                    Body: body,
+                },
+            });
+
+            // Set up progress tracking
+            upload.on('httpUploadProgress', (progress) => {
+                this.dispatchEvent(new CustomEvent("progress", { 
+                    detail: {
+                        progressEvent: progress,
+                        bucketName: this._bucketName,
+                        key,
+                        referenceId
+                    } 
+                }));
+            });
+
+            await upload.done();
+        }
+    }
+
+    /**
+     * Generates a pre-signed URL for downloading a file from S3
+     * 
+     * @param _key The key (path) of the file in the S3 bucket
+     * @param _expiresIn The number of seconds until the URL expires (default: 3600 = 1 hour)
+     * @returns A pre-signed URL for downloading the file
+     */
+    async generatePresignedUrl(_key: string, _expiresIn: number = 3600): Promise<string> {
+        if (!this._s3Client) {
+            throw new Error("S3 client not initialized. Call initializeClient first.");
+        }
+
+        // Note: This requires the @aws-sdk/s3-request-presigner package
+        // Implementation would go here
+        throw new Error("generatePresignedUrl not implemented. Requires @aws-sdk/s3-request-presigner package.");
+    }
+}

packages/web/src/teleoperate.ts

@@ -146,7 +146,6 @@ export async function teleoperate(
   config: TeleoperateConfig
 ): Promise<TeleoperationProcess> {
   const teleoperator = await createTeleoperatorProcess(config);
-  const motorConfigs = teleoperator.motorConfigs;
 
   return {
     start: () => {
@@ -173,7 +172,7 @@ export async function teleoperate(
     },
     getState: () => buildTeleoperationStateFromTeleoperator(teleoperator),
     teleoperator,
-    disconnect: () => teleoperator.disconnect(),
+    disconnect: () => teleoperator.disconnect()
   };
 }
 

packages/web/src/teleoperators/base-teleoperator.ts

@@ -6,17 +6,63 @@
 import type { MotorConfig } from "../types/teleoperation.js";
 import type { MotorCommunicationPort } from "../utils/motor-communication.js";
 
+/**
+ * Normalizes a value from one range to another
+ * @param value The value to normalize
+ * @param minVal The minimum value of the original range
+ * @param maxVal The maximum value of the original range
+ * @param minNorm The minimum value of the normalized range
+ * @param maxNorm The maximum value of the normalized range
+ * @returns The normalized value
+ */
+function normalizeValue(value: number, minVal: number, maxVal: number, minNorm: number, maxNorm: number): number {
+  const range = maxVal - minVal;
+  const normRange = maxNorm - minNorm;
+  const normalized = (value - minVal) / range;
+  return normalized * normRange + minNorm;
+}
+
+/**
+ * Type definition for state update callback parameters
+ */
+interface StateUpdateCallbackParams {
+  previousMotorConfigs: MotorConfig[];
+  newMotorConfigs: MotorConfig[];
+  previousMotorConfigsNormalized: MotorConfig[];
+  newMotorConfigsNormalized: MotorConfig[];
+  commandSentTimestamp: number;
+  positionChangedTimestamp: number;
+}
+
+/**
+ * Type definition for state update callback function
+ */
+type StateUpdateCallback = (params: StateUpdateCallbackParams) => void;
+
+/**
+ * Type definition for array of state update callbacks
+ */
+type StateUpdateCallbackArray = Array<StateUpdateCallback>;
+
 /**
  * Base interface that all Web teleoperators must implement
  */
-export interface WebTeleoperator {
-  initialize(): Promise<void>;
-  start(): void;
-  stop(): void;
-  disconnect(): Promise<void>;
-  getState(): TeleoperatorSpecificState;
-  onMotorConfigsUpdate(motorConfigs: MotorConfig[]): void;
-  motorConfigs: MotorConfig[];
+export abstract class WebTeleoperator {
+  protected onStateUpdateCallbacks: StateUpdateCallbackArray = [];
+  public motorConfigs: MotorConfig[] = [];
+  abstract initialize(): Promise<void>;
+  abstract start(): void;
+  abstract stop(): void;
+
+  abstract recordingTaskIndex : number;
+  abstract recordingEpisodeIndex : number;
+  abstract setEpisodeIndex(index: number): void;
+  abstract setTaskIndex(index: number): void;
+  
+  abstract disconnect(): Promise<void>;
+  abstract getState(): TeleoperatorSpecificState;
+  abstract onMotorConfigsUpdate(motorConfigs: MotorConfig[]): void;
+  abstract addOnStateUpdateCallback(fn : StateUpdateCallback): void;
 }
 
 /**
@@ -31,14 +77,26 @@ export type TeleoperatorSpecificState = {
 /**
  * Base abstract class with common functionality for all teleoperators
  */
-export abstract class BaseWebTeleoperator implements WebTeleoperator {
+export abstract class BaseWebTeleoperator extends WebTeleoperator {
   protected port: MotorCommunicationPort;
   public motorConfigs: MotorConfig[] = [];
   protected isActive: boolean = false;
+  public isRecording: boolean = false;
+  public recordingTaskIndex : number;
+  public recordingEpisodeIndex : number;
+  public recordedMotorPositionEpisodes : any[];
 
   constructor(port: MotorCommunicationPort, motorConfigs: MotorConfig[]) {
+    super();
     this.port = port;
     this.motorConfigs = motorConfigs;
+
+    // store episode positions
+    this.recordedMotorPositionEpisodes = []
+
+    this.isRecording = false;
+    this.recordingTaskIndex = 0;
+    this.recordingEpisodeIndex = 0;
   }
 
   abstract initialize(): Promise<void>;
@@ -53,10 +111,130 @@ export abstract class BaseWebTeleoperator implements WebTeleoperator {
     }
   }
 
+  setEpisodeIndex(index: number): void {
+    this.recordingEpisodeIndex = index;
+
+    // create a new empty array at that position on the array
+    this.recordedMotorPositionEpisodes[this.recordingEpisodeIndex] = []
+  }
+
+  setTaskIndex(index: number): void {
+    this.recordingTaskIndex = index;
+  }
+  
   onMotorConfigsUpdate(motorConfigs: MotorConfig[]): void {
     this.motorConfigs = motorConfigs;
   }
 
+  normalizeMotorConfigPosition(motorConfig: MotorConfig){
+    let minNormPosition;
+    let maxNormPosition;
+
+    /**
+     * This follows the guide at https://github.com/huggingface/lerobot/blob/cf86b9300dc83fdad408cfe4787b7b09b55f12cf/src/lerobot/robots/so100_follower/so100_follower.py#L49
+     * Meaning, for everything except gripper, it normalizes the positions to between -100 and 100
+     * and for gripper it normalizes between 0 - 100
+     */
+    if(["shoulder_pan", "shoulder_lift", "elbow_flex", "wrist_flex", "wrist_roll"].includes(motorConfig.name)) {
+      minNormPosition = -100;
+      maxNormPosition = 100;
+    } else {
+      minNormPosition = 0;
+      maxNormPosition = 100;
+    }
+
+    return normalizeValue(motorConfig.currentPosition, motorConfig.minPosition, motorConfig.maxPosition, minNormPosition, maxNormPosition)
+  }
+
+  /**
+   * Normalize an entire list of motor configurations
+   * 
+   * This follows the guide at https://github.com/huggingface/lerobot/blob/cf86b9300dc83fdad408cfe4787b7b09b55f12cf/src/lerobot/robots/so100_follower/so100_follower.py#L49
+   * Meaning, for everything except gripper, it normalizes the positions to between -100 and 100
+   * and for gripper it normalizes between 0 - 100
+   */
+  normalizeMotorConfigs(motorConfigs : MotorConfig[]) : MotorConfig[] {
+    // Create a deep copy of the motor configs
+    const normalizedConfigs = JSON.parse(JSON.stringify(motorConfigs)) as MotorConfig[];
+    
+    // Normalize the current position values
+    for(let i = 0; i < normalizedConfigs.length; i++) {
+      const config = normalizedConfigs[i];
+      
+      if(config.name === "gripper") {
+        config.currentPosition = normalizeValue(motorConfigs[i].currentPosition, motorConfigs[i].minPosition, motorConfigs[i].maxPosition, 0, 100);
+      } else {
+        config.currentPosition = normalizeValue(motorConfigs[i].currentPosition, motorConfigs[i].minPosition, motorConfigs[i].maxPosition, -100, 100);
+      }
+      
+      // Also normalize min/max positions for consistency
+      if(config.name === "gripper") {
+        config.minPosition = 0;
+        config.maxPosition = 100;
+      } else {
+        config.minPosition = -100;
+        config.maxPosition = 100;
+      }
+    }
+    
+    return normalizedConfigs;
+  }
+
+  /**
+   * Dispatches a motor position changed event
+   * Gets the motor positions, normalized
+   * 
+   * This follows the guide at https://github.com/huggingface/lerobot/blob/cf86b9300dc83fdad408cfe4787b7b09b55f12cf/src/lerobot/robots/so100_follower/so100_follower.py#L49
+   * Meaning, for everything except gripper, it normalizes the positions to between -100 and 100
+   * and for gripper it normalizes between 0 - 100
+   * 
+   * @param motorName The name of the motor that changed
+   * @param motorConfig The motor configuration
+   * @param previousPosition The previous position of the motor
+   * @param currentPosition The current position of the motor
+   * @param timestamp The timestamp of the event
+   */
+  dispatchMotorPositionChanged(prevMotorConfigs: MotorConfig[], newMotorConfigs: MotorConfig[], commandSentTimestamp: number, positionChangedTimestamp: number): void {
+    // Call all registered state update callbacks
+    const callbackParams: StateUpdateCallbackParams = {
+      previousMotorConfigs: prevMotorConfigs,
+      newMotorConfigs: newMotorConfigs,
+      previousMotorConfigsNormalized: this.normalizeMotorConfigs(prevMotorConfigs),
+      newMotorConfigsNormalized: this.normalizeMotorConfigs(newMotorConfigs),
+      commandSentTimestamp: commandSentTimestamp,
+      positionChangedTimestamp: positionChangedTimestamp
+    };
+    
+    // call all the onStateUpdateCallbacks
+    this.onStateUpdateCallbacks.forEach(callback => callback(callbackParams));
+
+    // if recording, store the changes
+    if(this.isRecording) {
+      const data = {
+        previousMotorConfigs : prevMotorConfigs,
+        newMotorConfigs,
+        previousMotorConfigsNormalized : this.normalizeMotorConfigs(prevMotorConfigs),
+        newMotorConfigsNormalized : this.normalizeMotorConfigs(newMotorConfigs),
+        commandSentTimestamp,
+        positionChangedTimestamp,
+        episodeIndex: this.recordingEpisodeIndex,
+        taskIndex: this.recordingTaskIndex,
+      }
+
+      const episodes = this.recordedMotorPositionEpisodes[this.recordingEpisodeIndex]
+      episodes.push(data)
+    }
+  }
+
+  /**
+   * Adds an onstateupdate callback
+   * to return a response for the user with motor config states and timestamps
+   * @param fn Callback function that receives state update parameters
+   */
+  addOnStateUpdateCallback(fn: StateUpdateCallback): void {
+    this.onStateUpdateCallbacks.push(fn);
+  }
+
   get isActiveTeleoperator(): boolean {
     return this.isActive;
   }

packages/web/src/teleoperators/direct-teleoperator.ts

@@ -62,6 +62,7 @@ export class DirectTeleoperator extends BaseWebTeleoperator {
    * Move motor to exact position
    */
   async moveMotor(motorName: string, targetPosition: number): Promise<boolean> {
+    const commandSentTimestamp = performance.now()/1000;
     const motorConfig = this.motorConfigs.find((m) => m.name === motorName);
     if (!motorConfig) return false;
 
@@ -69,6 +70,7 @@ export class DirectTeleoperator extends BaseWebTeleoperator {
       motorConfig.minPosition,
       Math.min(motorConfig.maxPosition, targetPosition)
     );
+    const prevMotorConfigs = structuredClone(this.motorConfigs)
 
     try {
       await writeMotorPosition(
@@ -77,12 +79,14 @@ export class DirectTeleoperator extends BaseWebTeleoperator {
         Math.round(clampedPosition)
       );
       motorConfig.currentPosition = clampedPosition;
+      const positionChangedTimestamp = performance.now()/1000;
 
       // Notify UI of position change
       if (this.onStateUpdate) {
         this.onStateUpdate(this.buildTeleoperationState());
       }
 
+      this.dispatchMotorPositionChanged(prevMotorConfigs,this.motorConfigs, commandSentTimestamp, positionChangedTimestamp);
       return true;
     } catch (error) {
       console.warn(`Failed to move motor ${motorName}:`, error);
@@ -96,11 +100,16 @@ export class DirectTeleoperator extends BaseWebTeleoperator {
   async setMotorPositions(positions: {
     [motorName: string]: number;
   }): Promise<boolean> {
+    const commandSentTimestamp = performance.now()/1000;
+    const prevMotorConfigs = structuredClone(this.motorConfigs)
     const results = await Promise.all(
       Object.entries(positions).map(([motorName, position]) =>
         this.moveMotor(motorName, position)
       )
     );
+    const positionChangedTimestamp = performance.now()/1000;
+
+    this.dispatchMotorPositionChanged(prevMotorConfigs,this.motorConfigs, commandSentTimestamp, positionChangedTimestamp);
 
     return results.every((result) => result);
   }

packages/web/src/teleoperators/keyboard-teleoperator.ts

@@ -171,7 +171,7 @@ export class KeyboardTeleoperator extends BaseWebTeleoperator {
    *
    * Keep it simple - this works!
    */
-  private updateMotorPositions(): void {
+  private async updateMotorPositions(): Promise<void> {
     const now = Date.now();
 
     // Clear timed-out keys
@@ -219,25 +219,44 @@ export class KeyboardTeleoperator extends BaseWebTeleoperator {
       );
     }
 
+    const prevMotorConfigs = structuredClone(this.motorConfigs);
+    const commandSentTimestamp = performance.now()/1000;
+
+
     // Send motor commands and update positions
-    Object.entries(targetPositions).forEach(([motorName, targetPosition]) => {
+    for (const [motorName, targetPosition] of Object.entries(targetPositions)) {
       const motorConfig = this.motorConfigs.find((m) => m.name === motorName);
-      if (motorConfig && targetPosition !== motorConfig.currentPosition) {
-        writeMotorPosition(
-          this.port,
-          motorConfig.id,
-          Math.round(targetPosition)
-        )
-          .then(() => {
-            motorConfig.currentPosition = targetPosition;
-          })
-          .catch((error) => {
-            console.warn(
-              `Failed to write motor ${motorConfig.id} position:`,
-              error
-            );
-          });
+      if (motorConfig && targetPosition !== motorConfig.currentPosition) {        
+        try {
+          await writeMotorPosition(
+            this.port,
+            motorConfig.id,
+            Math.round(targetPosition)
+          );
+          
+          motorConfig.currentPosition = targetPosition;
+        } catch (error) {
+          console.warn(
+            `Failed to write motor ${motorConfig.id} position:`,
+            error
+          );
+        }
       }
-    });
+    }
+
+
+    const positionChangedTimestamp = performance.now()/1000;
+
+    // Dispatch event for motor position change if something has changed
+    const somethingChanged = Object.entries(targetPositions).length > 0;
+
+    if(somethingChanged){
+      this.dispatchMotorPositionChanged(
+        prevMotorConfigs,
+        this.motorConfigs,
+        commandSentTimestamp, 
+        positionChangedTimestamp
+      );
+    }
   }
 }

packages/web/src/threejs_display.ts

@@ -0,0 +1,12 @@
+//import * as THREE from 'three';
+
+
+/**
+ * Module to display a 3D model of a robot, easily via threejs
+ */
+export class LeRobotThreejsDisplay {
+    //scene: THREE.Scene;
+    constructor() {
+        //this.scene = new THREE.Scene();
+    }
+}

packages/web/src/utils/record/generateREADME.ts

@@ -0,0 +1,31 @@
+function generateREADME(metaInfo : string) {
+    return `\
+---
+task_categories:
+- robotics
+tags:
+- LeRobot
+- tutorial
+configs:
+- config_name: default
+  data_files: data/*/*.parquet
+---
+
+This dataset was created using [LeRobot.js](https://github.com/timpietrusky/lerobot.js) which is based on the [LeRobot](https://github.com/huggingface/lerobot) project
+
+## Dataset Description
+
+
+
+- **Homepage:** [More Information Needed]
+- **Paper:** [More Information Needed]
+- **License:** apache-2.0
+
+## Dataset Structure
+
+[meta/info.json](meta/info.json):
+${metaInfo}
+`
+}
+
+export default generateREADME;

packages/web/src/utils/record/metadataInfo.ts

@@ -0,0 +1,159 @@
+export interface VideoInfo {
+    height: number;
+    width: number;
+    channels: number;
+    codec: string;
+    pix_fmt: string;
+    is_depth_map: boolean;
+    has_audio: boolean;
+}
+
+/**
+ * Metadata parameters interface
+ */
+interface MetadataParams {
+    total_episodes: number;
+    total_frames: number;
+    total_tasks: number;
+    chunks_size: number;
+    fps: number;
+    splits: { [key: string]: string };
+    features: { [key: string]: any };
+    videos_info: VideoInfo[];
+    data_files_size_in_mb: number;
+    video_files_size_in_mb: number;
+}
+
+/**
+ * Generates and returns a metadata information dictionary
+ * Needs some named parameters passed as parameters
+ */
+function getMetadataInfo(params: MetadataParams) {
+    return {
+        "codebase_version": "v2.1",
+        "robot_type": "so100",
+        "total_episodes": params.total_episodes,
+        "total_frames": params.total_frames,
+        "total_tasks": params.total_tasks,
+        "total_videos": params.videos_info.length,
+        "total_chunks": 1,
+        "chunks_size": params.chunks_size,
+        "fps": params.fps,
+        "splits": {
+            "train": `0:${params.total_episodes}`
+        },
+        "data_path": "data/chunk-{episode_chunk:03d}/episode_{episode_index:06d}.parquet",
+        "video_path": "videos/chunk-{episode_chunk:03d}/{video_key}/episode_{episode_index:06d}.mp4",
+        "features": {
+            "action": {
+                "dtype": "float32",
+                "shape": [
+                    6
+                ],
+                "names": [
+                    "main_shoulder_pan",
+                    "main_shoulder_lift",
+                    "main_elbow_flex",
+                    "main_wrist_flex",
+                    "main_wrist_roll",
+                    "main_gripper"
+                ],
+                "fps": params.fps
+            },
+            "observation.state": {
+                "dtype": "float32",
+                "shape": [
+                    6
+                ],
+                "names": [
+                    "main_shoulder_pan",
+                    "main_shoulder_lift",
+                    "main_elbow_flex",
+                    "main_wrist_flex",
+                    "main_wrist_roll",
+                    "main_gripper"
+                ],
+                "fps": params.fps
+            },
+            "observation.images.front": {
+                "dtype": "video",
+                "shape": [
+                    480,
+                    640,
+                    3
+                ],
+                "names": [
+                    "height",
+                    "width",
+                    "channels"
+                ],
+                "info": {
+                    "video.fps": params.fps,
+                    "video.height": 480,
+                    "video.width": 640,
+                    "video.channels": 3,
+                    "video.codec": "av1",
+                    "video.pix_fmt": "yuv420p",
+                    "video.is_depth_map": false,
+                    "has_audio": false
+                }
+            },
+            "timestamp": {
+                "dtype": "float32",
+                "shape": [
+                    1
+                ],
+                "names": null,
+                "fps": params.fps
+            },
+            "frame_index": {
+                "dtype": "int64",
+                "shape": [
+                    1
+                ],
+                "names": null,
+                "fps": params.fps
+            },
+            "episode_index": {
+                "dtype": "int64",
+                "shape": [
+                    1
+                ],
+                "names": null,
+                "fps": params.fps
+            },
+            "index": {
+                "dtype": "int64",
+                "shape": [
+                    1
+                ],
+                "names": null,
+                "fps": params.fps
+            },
+            "task_index": {
+                "dtype": "int64",
+                "shape": [
+                    1
+                ],
+                "names": null,
+                "fps": params.fps
+            }
+        },
+        "data_files_size_in_mb": 100,
+        "video_files_size_in_mb": 500
+    }
+}
+
+export function getVideoInfo(width: number, height: number): VideoInfo {
+    return {
+        height,
+        width, 
+        channels: 3,
+        codec: "h264",
+        pix_fmt: "yuv420p",
+        is_depth_map: false,
+        has_audio: false
+    };
+}
+
+export default getMetadataInfo;

packages/web/src/utils/record/stats.ts

@@ -0,0 +1,79 @@
+/**
+ * Calculates basic statistics (min, max, mean, std, count) for a numeric array
+ */
+function calculateStats(values: number[]): { min: number[], max: number[], mean: number[], std: number[], count: number[] } {
+    const count = values.length;
+    if (count === 0) {
+        return {
+            min: [0],
+            max: [0],
+            mean: [0],
+            std: [0],
+            count: [0]
+        };
+    }
+
+    let min = Infinity;
+    let max = -Infinity;
+
+    for(let value of values){
+        min = Math.min(min, value);
+        max = Math.max(max, value);
+    }
+
+    const sum = values.reduce((acc, val) => acc + val, 0);
+    const mean = sum / count;
+
+    // Calculate standard deviation
+    const squareDiffs = values.map(value => Math.pow(value - mean, 2));
+    const avgSquareDiff = squareDiffs.reduce((acc, val) => acc + val, 0) / count;
+    const std = Math.sqrt(avgSquareDiff);
+
+    return {
+        min: [min],
+        max: [max],
+        mean: [mean],
+        std: [std],
+        count: [count]
+    };
+}
+
+/**
+ * Generates statistics for a dataset
+ * @param data The dataset to analyze
+ * @param cameraKeys Array of camera keys for dynamic observation.images entries
+ */
+export function getStats(data: any[], cameraKeys: string[] = []): any {
+    // Extract timestamp and episode_index values
+    const timestamps = data.map(item => item.timestamp);
+    const episodeIndices = data.map(item => item.episode_index);
+    
+    // Extract other common fields if they exist
+    const frameIndices = data.map(item => item.frame_index || 0);
+    const taskIndices = data.map(item => item.task_index || 0);
+    
+    const stats: any = {
+        // Standard fields
+        "timestamp": calculateStats(timestamps),
+        "episode_index": calculateStats(episodeIndices),
+        "frame_index": calculateStats(frameIndices),
+        "task_index": calculateStats(taskIndices),
+    };
+    
+    // Add observation.images entries for each camera key
+    cameraKeys.forEach(key => {
+        // In a real implementation, you would calculate actual stats from video data
+        // Since we don't have actual video frame data to analyze, we'll use placeholder values
+        stats[`observation.images.${key}`] = {
+            "min": [[[0.0]], [[0.0]], [[0.0]]],  // R,G,B channels min
+            "max": [[[255.0]], [[255.0]], [[255.0]]],  // R,G,B channels max
+            "mean": [[[127.5]], [[127.5]], [[127.5]]],  // R,G,B channels mean
+            "std": [[[50.0]], [[50.0]], [[50.0]]],  // R,G,B channels std
+            "count": [[[data.length * 3]]]  // Number of pixels × 3 channels
+        };
+    });
+    
+    return stats;
+}
+
+export default getStats;

packages/web/tests/record.test.ts

@@ -0,0 +1,208 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { vi } from "vitest";
+import { LeRobotDatasetRecorder } from "../src/record";
+import { WebTeleoperator } from "../../web/src/teleoperators/base-teleoperator";
+
+// Mock the WebTeleoperator class
+vi.mock("../../web/src/teleoperators/base-teleoperator", () => {
+  return {
+    WebTeleoperator: vi.fn().mockImplementation(() => {
+      return {
+        startRecording: vi.fn(),
+        stopRecording: vi.fn().mockResolvedValue([]),
+        clearRecording: vi.fn()
+      };
+    })
+  };
+});
+
+describe("LeRobotDatasetRecorder", () => {
+  let recorder: LeRobotDatasetRecorder;
+  
+  beforeEach(() => {
+    // Create a new recorder instance before each test
+    // @ts-ignore
+    const mockTeleoperator = new WebTeleoperator() as unknown as WebTeleoperator;
+    const mockVideoStreams = {};
+    recorder = new LeRobotDatasetRecorder([mockTeleoperator], mockVideoStreams, 30);
+  });
+
+  describe("_interpolateAndCompleteLerobotData", () => {
+    it("should interpolate data to match the specified fps", async () => {
+      // Create test data with non-regular timestamps
+      const roughData = [
+        {
+          timestamp: 0,
+          action: {
+            shoulder_pan: 0,
+            shoulder_lift: 0,
+            elbow_flex: 0,
+            wrist_flex: 0,
+            wrist_roll: 0,
+            gripper: 0
+          },
+          "observation.state": {
+            shoulder_pan: 0,
+            shoulder_lift: 0,
+            elbow_flex: 0,
+            wrist_flex: 0,
+            wrist_roll: 0,
+            gripper: 0
+          },
+          episode_index: 0,
+          task_index: 0
+        },
+        {
+          timestamp: 0.5,
+          action: {
+            shoulder_pan: 10,
+            shoulder_lift: 20,
+            elbow_flex: 30,
+            wrist_flex: 40,
+            wrist_roll: 50,
+            gripper: 60
+          },
+          "observation.state": {
+            shoulder_pan: 15,
+            shoulder_lift: 25,
+            elbow_flex: 35,
+            wrist_flex: 45,
+            wrist_roll: 55,
+            gripper: 65
+          },
+          episode_index: 0,
+          task_index: 0
+        },
+        {
+          timestamp: 1.0,
+          action: {
+            shoulder_pan: 20,
+            shoulder_lift: 40,
+            elbow_flex: 60,
+            wrist_flex: 80,
+            wrist_roll: 100,
+            gripper: 120
+          },
+          "observation.state": {
+            shoulder_pan: 30,
+            shoulder_lift: 50,
+            elbow_flex: 70,
+            wrist_flex: 90,
+            wrist_roll: 110,
+            gripper: 130
+          },
+          episode_index: 1, // New episode
+          task_index: 0
+        },
+        {
+            timestamp: 1.5,
+            action: {
+              shoulder_pan: 25,
+              shoulder_lift: 50,
+              elbow_flex: 75,
+              wrist_flex: 100,
+              wrist_roll: 125,
+              gripper: 150
+            },
+            "observation.state": {
+              shoulder_pan: 35,
+              shoulder_lift: 55,
+              elbow_flex: 75,
+              wrist_flex: 95,
+              wrist_roll: 115,
+              gripper: 135
+            },
+            episode_index: 1, // New episode
+            task_index: 0
+          }
+      ];
+
+      // Set the FPS to 10 for this test
+      const fps = 10;
+      
+      // Call the method under test
+      const result = await recorder._interpolateAndCompleteLerobotData(fps, roughData);
+
+      // log all the results, row by row
+      for (let i = 0; i < result.length; i++) {
+        console.log(result[i]);
+      }
+      
+      // Verify the results
+      expect(result).toBeInstanceOf(Array);
+      expect(result.length).toBe(15); // 1.5 seconds at 10 fps = 15 frames
+      
+      // Check the first frame
+      expect(result[0].timestamp).toBeCloseTo(0, 5);
+      expect(result[0].action).toEqual([0, 0, 0, 0, 0, 0]);
+      expect(result[0]["observation.state"]).toEqual([0, 0, 0, 0, 0, 0]);
+      expect(result[0].episode_index).toBe(0);
+      expect(result[0].task_index).toBe(0);
+      expect(result[0].frame_index).toBe(0);
+      expect(result[0].index).toBe(0);
+      
+      // Check a middle frame (0.3 seconds)
+      const middleFrame = result[3];
+      expect(middleFrame.timestamp).toBeCloseTo(0.3, 5);
+      // At 0.3 seconds, we're 60% between 0 and 0.5 seconds
+      // So action.shoulder_pan should be 60% of 10 = 6
+      expect(middleFrame.action[0]).toBeCloseTo(6, 5);
+      expect(middleFrame.episode_index).toBe(0);
+      expect(middleFrame.frame_index).toBe(3);
+      expect(middleFrame.index).toBe(3);
+      
+      // Check the frame right after the episode change
+      const episodeChangeFrame = result[5]; // 0.5 seconds
+      expect(episodeChangeFrame.timestamp).toBeCloseTo(0.5, 5);
+      expect(episodeChangeFrame.action[0]).toBeCloseTo(10, 5);
+      expect(episodeChangeFrame.episode_index).toBe(0);
+      expect(episodeChangeFrame.frame_index).toBe(5);
+      
+      // Check the last frame before 1 second
+      const lastFrame = result[9]; // 0.9 seconds
+      expect(lastFrame.timestamp).toBeCloseTo(0.9, 5);
+      expect(lastFrame.episode_index).toBe(0);
+      expect(lastFrame.frame_index).toBe(9); // Frame index continues incrementing
+      expect(lastFrame.index).toBe(9);
+    });
+
+    it("should handle episode index changes correctly", async () => {
+      // Create test data with episode changes
+      const roughData = [
+        { timestamp: 0.0, action: { shoulder_pan: 0 }, "observation.state": { shoulder_pan: 0 }, episode_index: 0, task_index: 0 },
+        { timestamp: 0.3, action: { shoulder_pan: 30 }, "observation.state": { shoulder_pan: 30 }, episode_index: 0, task_index: 0 },
+        { timestamp: 0.5, action: { shoulder_pan: 50 }, "observation.state": { shoulder_pan: 50 }, episode_index: 1, task_index: 0 }, // Episode change
+        { timestamp: 0.8, action: { shoulder_pan: 80 }, "observation.state": { shoulder_pan: 80 }, episode_index: 1, task_index: 0 },
+        { timestamp: 1.0, action: { shoulder_pan: 100 }, "observation.state": { shoulder_pan: 100 }, episode_index: 2, task_index: 0 } // Another episode change
+      ];
+
+      const fps = 10;
+      const result = await recorder._interpolateAndCompleteLerobotData(fps, roughData);
+      
+      // Check frame indices reset after episode changes
+      expect(result[0].episode_index).toBe(0);
+      expect(result[0].frame_index).toBe(0);
+      
+      expect(result[5].episode_index).toBe(1); // After episode change
+      expect(result[5].frame_index).toBe(0); // Should reset to 0
+      
+      expect(result[9].episode_index).toBe(1); // After second episode change
+      expect(result[9].frame_index).toBe(4); // Frame index continues incrementing
+    });
+    
+    it("should handle empty or minimal data", async () => {
+      // Test with minimal data (just two points)
+      const minimalData = [
+        { timestamp: 0.0, action: { shoulder_pan: 0 }, "observation.state": { shoulder_pan: 0 }, episode_index: 0, task_index: 0 },
+        { timestamp: 0.1, action: { shoulder_pan: 10 }, "observation.state": { shoulder_pan: 10 }, episode_index: 0, task_index: 0 }
+      ];
+      
+      const fps = 10;
+      const result = await recorder._interpolateAndCompleteLerobotData(fps, minimalData);
+      
+      expect(result.length).toBe(1); // 0.1 seconds at 10fps = 1 frame
+      expect(result[0].timestamp).toBeCloseTo(0, 5);
+      expect(result[0].action[0]).toBeCloseTo(0, 5);
+    });
+  });
+});