feat: record (#14)

* feat: moved record-demo to own view

* feat: simplified recording; interactive how to

* feat: add visual progress indicators to recording how-to; fix keyboard teleop not to hijack inputs or browser shortcuts; handle only teleop keys with normalized casing; allow editing camera names while teleop is active; add per-camera source selector on card via camera icon with fixed-width inline select; switch streams and persist camera config; disable source changes during active recording

* feat: improved performance of webcam while teleop is active

* feat: select supported video format

* fix: attach camera to recorder

* docs: best pratcise when recording video in the web

* fix: make video work

* fix: each episode has its own video

* feat(record): making sure that we use version 2.1 of the spec

* refactor: move upload logic from library to demo, unify on record() api

remove cloud storage uploaders (LeRobotHFUploader, LeRobotS3Uploader) from
@lerobot/web library, reducing dependencies by ~700kb (@huggingface/hub,
@aws-sdk/client-s3, @aws-sdk/lib-storage).

add dataset-uploader.ts utility to demo for handling HuggingFace and S3 uploads,
allowing applications to implement custom upload strategies.

update RecordConfig to support videoStreams parameter for multi-camera recording.
enhance RecordProcess to expose underlying recorder instance for advanced use cases
(episode persistence, dynamic camera management, custom metadata).

update cyberpunk demo to use record() function with recorder access for all
advanced features, eliminating direct LeRobotDatasetRecorder instantiation.

update package.json, README, index.ts exports, and type definitions accordingly.

BREAKING CHANGE: exportForLeRobot('huggingface') and exportForLeRobot('s3')
removed from library (users should export 'blobs' and handle upload in their apps)

* feat(record): add flexible recordprocess api with runtime management

expand RecordConfig to support robotType metadata for upfront configuration.

enhance RecordProcess with runtime management methods:
- getEpisodeCount() / getEpisodes() - episode introspection
- clearEpisodes() - delete all recorded episodes
- nextEpisode() - create new episode segment
- restoreEpisodes() - restore persisted episodes
- addCamera() / removeCamera() - dynamic camera management

remove direct recorder access requirement from demo. update cyberpunk example
to use clean RecordProcess API instead of accessing internal recorder instance.

support both upfront configuration (videos, robot type, options) and runtime
operations (add cameras, manage episodes, export), providing maximum flexibility
for both simple and complex recording workflows.

update recorder.tsx to use new RecordProcess methods:
- record() call with robotType metadata
- episode management via getEpisodeCount() instead of direct access
- camera management via addCamera() instead of direct recorder access
- episode display via getEpisodes() for clean data access

this eliminates need for 'as any' casts and direct recorder access in demo,
maintaining clean API surface while supporting all advanced recording features.

* docs(record): simplify readme to show unified record() api only

remove references to LeRobotDatasetRecorder class and advanced use cases.
show single, clean record() function with all features available through
unified RecordProcess API.

simplify example to show:
- record() creation with config (teleoperator, videoStreams, robotType, options)
- recording control (start, stop, getState)
- episode management (getEpisodeCount, nextEpisode, clearEpisodes)
- dynamic camera management (addCamera)
- export options (zip-download, blobs)

users dont need to know about internal classes - record() handles everything.

* docs(readme): remove duplicate record() section

the 'dataset recording and export' section was a duplicate of the
record() documentation already in the core api section. remove it
to avoid confusion - one section, one api.

* docs(demo): add record() api documentation to docs section

add complete record() api reference to the demo's docs section including:
- usage example with teleoperation and video streams
- complete options and return types
- episode management methods (getEpisodeCount, nextEpisode, clearEpisodes)
- dynamic camera management (addCamera)
- export formats (blobs, zip, zip-download)

keeps documentation in sync with the library api.

* docs(demo): simplify record() example, remove setTimeout

remove unnecessary setTimeout from docs example and show cleaner,
more straightforward usage pattern. add nextEpisode() call to demonstrate
runtime episode management feature.

* docs(readme): fix record() example and api reference

remove setTimeout and show clean, straightforward usage.
add videoStreams, robotType to example and options documentation.
update returns to document all RecordProcess methods:
- episode management (getEpisodeCount, nextEpisode, clearEpisodes)
- dynamic cameras (addCamera)
- export (exportForLeRobot)

* chore: add changeset for @lerobot/web minor release

record api enhancements including flexible runtime management,
video stream support, and episode/camera management methods.

* chore(demo): mark record() as completed on roadmap

move record from in_progress to completed status.
reorder roadmap so record appears before SO-100 leader arm.
keep train and eval as planned features.

.changeset/odd-mice-eat.md

@@ -0,0 +1,24 @@
+---
+"@lerobot/web": minor
+---
+
+enhance record() api with flexible runtime management and video stream support.
+
+add videoStreams and robotType to RecordConfig for upfront configuration.
+expose episode management methods on RecordProcess:
+- getEpisodeCount() / getEpisodes() - introspect recorded episodes
+- clearEpisodes() - delete all episodes
+- nextEpisode() - create new episode segment
+- restoreEpisodes() - restore persisted episodes
+
+expose dynamic camera management methods:
+- addCamera(name, stream) - add camera during recording
+- removeCamera(name) - remove camera
+
+all functionality previously requiring direct LeRobotDatasetRecorder access
+now available through clean, type-safe RecordProcess interface. supports both
+upfront configuration and runtime operations for maximum flexibility.
+
+update demo to use unified record() api exclusively, removing direct recorder
+access and supporting all advanced features (episode management, dynamic cameras,
+custom metadata) through consistent api surface.

docs/conventions.md

@@ -441,6 +441,26 @@ const response = await new Promise((resolve, reject) => {
   }
   ```
 
+##### 6. Media Recording Workflow (Web Cameras)
+
+**Required order of operations for video export to work correctly:**
+
+- Attach camera streams before recording: call `recorder.addVideoStream(key, stream)` on the same `LeRobotDatasetRecorder` instance before `startRecording()`.
+- Do not add/replace streams while recording: changing streams during an active recording is unsupported and will throw.
+- Stop before export: always stop recording before calling any export method so `MediaRecorder` can finalize the video blob.
+
+**Implementation notes:**
+
+- Use a separate preview stream and clone for recording (e.g., `const recordingStream = previewStream.clone()`) to avoid preview interruptions.
+- If your UI allows configuring cameras before enabling control, attach those streams to the recorder immediately after the recorder is created.
+- The recorder selects a supported container/mime per browser; exported files are placed under `videos/chunk-000/observation.images.<cameraName>/episode_000000.<ext>`.
+
+**Anti-patterns (avoid):**
+
+- Creating the recorder, starting recording, then adding cameras.
+- Mutating `videoStreams` during recording.
+- Exporting while recording is still active.
+
 #### Web Implementation Blockers Solved
 
 **These blockers were identified during SO-100 web calibration development:**

docs/dataset/v2.1.md

@@ -0,0 +1,209 @@
+# LeRobot Dataset Format v2.1 — Complete Spec
+
+This document describes the **exact structure and syntax** of a dataset repository following the **LeRobot 2.1 standard**.  
+It is intended as an implementation guide — follow it exactly to ensure 100% compatibility with the dataset viewer and `LeRobotDataset` loader.
+
+---
+
+## 1) Repository Layout (typical)
+
+```
+<dataset-root>/
+├─ data/
+│  ├─ chunk-000/
+│  │  ├─ episode_000000.parquet
+│  │  └─ episode_000001.parquet
+│  └─ chunk-001/
+│     └─ ...
+├─ videos/
+│  ├─ chunk-000/
+│  │  ├─ observation.images.front/
+│  │  │  ├─ episode_000000.mp4
+│  │  │  └─ episode_000001.mp4
+│  │  └─ observation.images.wrist/
+│  │     ├─ episode_000000.mp4
+│  │     └─ episode_000001.mp4
+│  └─ chunk-001/
+│     └─ ...
+├─ meta/
+│  ├─ info.json
+│  ├─ episodes.jsonl
+│  ├─ tasks.jsonl
+│  └─ episodes_stats.jsonl  # (v2.1); older v2.0 used stats.json
+└─ README.md
+```
+
+---
+
+## 2) `data/`
+
+- Contains **one Parquet file per episode**.
+- Path pattern (from `info.json.data_path`):
+  ```
+  data/chunk-{episode_chunk:03d}/episode_{episode_index:06d}.parquet
+  ```
+
+Each Parquet file stores synchronized timesteps with:
+
+- `timestamp`
+- `observations` (sensor values, images, poses, etc.)
+- `actions` (target joint commands, end-effector states, etc.)
+
+---
+
+## 3) `videos/`
+
+- Contains **one MP4 video per episode per camera key**.
+- Path pattern (from `info.json.video_path`):
+  ```
+  videos/chunk-{episode_chunk:03d}/{video_key}/episode_{episode_index:06d}.mp4
+  ```
+- `{video_key}` MUST exactly match a feature key in `info.json.features` under `observation.images.*`.
+
+**Requirements:**
+
+- Codec: H.264 (`avc1`)
+- FPS matches `info.json.fps`
+- Frame count == number of timesteps in corresponding Parquet
+
+---
+
+## 4) `meta/`
+
+### `info.json`
+
+Top-level dataset metadata and templates.
+
+```json
+{
+  "version": "2.1",
+  "fps": 30,
+  "chunks_size": 1000,
+  "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": {
+    "observation.images.front": {
+      "dtype": "video",
+      "shape": [240, 320, 3],
+      "names": ["height", "width", "channel"],
+      "video_info": { "video.fps": 30.0, "video.codec": "avc1" }
+    }
+  }
+}
+```
+
+---
+
+### `episodes.jsonl`
+
+Line-delimited JSON, one entry per episode.
+
+```json
+{"episode_id":"000000","task":"pick_and_place","length":243,"chunk":0}
+{"episode_id":"000001","task":"pick_and_place","length":198,"chunk":0}
+```
+
+Fields:
+
+- `episode_id` → must match filenames (`episode_000000`)
+- `task` → must exist in `tasks.jsonl`
+- `length` → number of timesteps (and frames)
+- `chunk` → numeric index (0,1,2…) matching folder
+
+---
+
+### `tasks.jsonl`
+
+Defines available tasks.
+
+```json
+{"task":"pick_and_place","description":"Pick an object and place it"}
+{"task":"push_button","description":"Push the button until LED lights up"}
+```
+
+---
+
+### `episodes_stats.jsonl`
+
+Dataset statistics for analysis & normalization.
+
+```json
+{
+  "total_frames": 25873,
+  "episode_lengths": { "min": 120, "max": 450, "mean": 215 },
+  "action_stats": {
+    "x": { "min": -0.12, "max": 0.12, "mean": 0.0, "std": 0.05 },
+    "y": { "min": -0.1, "max": 0.1, "mean": 0.0, "std": 0.04 },
+    "z": { "min": 0.05, "max": 0.35, "mean": 0.2, "std": 0.06 }
+  }
+}
+```
+
+---
+
+## 5) Chunking explained
+
+- **Purpose:** purely structural; keeps folders manageable and enables fast lookups.
+- **Decided by dataset builder:** choose `chunks_size` (often 1000).
+- **Rule:**
+  ```
+  episode_chunk = episode_index // chunks_size
+  ```
+
+### Examples
+
+- Small dataset (N ≤ 1000, chunks_size=1000) → all in `chunk-000`
+- Large dataset (N=2000, chunks_size=1000):
+  - episodes 0–999 → `chunk-000`
+  - episodes 1000–1999 → `chunk-001`
+
+### Naming
+
+- Chunk folder must be `chunk-XXX` with zero padding.
+
+---
+
+## 6) Synchronization rules
+
+- Parquet rows = MP4 frames = `episodes.jsonl.length`
+- Episode IDs consistent across parquet, mp4, and JSONL
+- Video folder name = exact feature key (`observation.images.front`)
+- Codecs = H.264 (`avc1`)
+- Forward slashes in all paths
+
+---
+
+## 7) Common pitfalls
+
+1. Wrong folder naming (`front/` instead of `observation.images.front/`)
+2. Skipping `chunk-000` entirely (must exist, even for small datasets)
+3. Filename mismatch (`000001.mp4` vs `episode_000001.mp4`)
+4. Nested JSON instead of JSONL
+5. Using unsupported codec (HEVC/AV1)
+
+---
+
+## 8) Quick implementation checklist
+
+- [ ] `info.json.version == "2.1"`
+- [ ] `chunks_size` defined (e.g., 1000)
+- [ ] `data_path` and `video_path` templates correct
+- [ ] All `video_key` entries match `features` keys under `observation.images.*`
+- [ ] Episode IDs zero‑padded: `episode_{:06d}`
+- [ ] `episodes.jsonl` one JSON per line
+- [ ] Parquet rows == MP4 frames == `length`
+- [ ] Codec = H.264 (`avc1`), FPS correct
+- [ ] All paths use `/` slashes
+
+---
+
+## 9) Minimal valid dataset (≤1000 episodes)
+
+```
+my_dataset/
+├─ data/chunk-000/episode_000000.parquet
+├─ data/chunk-000/episode_000001.parquet
+├─ videos/chunk-000/observation.images.front/episode_000000.mp4
+├─ videos/chunk-000/observation.images.front/episode_000001.mp4
+└─ meta/{info.json, episodes.jsonl, tasks.jsonl, episodes_stats.jsonl}
+```

docs/planning/{007_record.md → 007_refactor_record.md}

@@ -4,76 +4,126 @@
 
 **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
+**So that** I can capture teleoperation sessions for training AI models, analysis, and replay with the same simple patterns as other LeRobot.js functions
 
 ## 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()`.
+A community contributor has successfully implemented comprehensive recording functionality, including a `LeRobotDatasetRecorder` class with video recording, data export, and LeRobot dataset format support. The implementation is functional and well-integrated, but doesn't follow our established simple function API patterns from `calibrate()`, `teleoperate()`, and `findPort()`.
 
-### Current Implementation Problems
+### Current Recording Implementation (From README)
 
-The existing `LeRobotDatasetRecorder` implementation has several architectural issues:
+The existing system works as documented in the web package README:
 
-- **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
+```typescript
+import { LeRobotDatasetRecorder } from "@lerobot/web";
+
+// Create a recorder with teleoperator and video streams
+const recorder = new LeRobotDatasetRecorder(
+  [teleoperator], // Array of teleoperators to record
+  { main: videoStream }, // Video streams by camera key
+  30, // Target FPS
+  "Pick and place task" // Task description
+);
+
+// Start recording
+await recorder.startRecording();
+// ... robot performs task ...
+const recordingData = await recorder.stopRecording();
+
+// Export the dataset in various formats
+await recorder.exportForLeRobot("zip-download");
+await recorder.exportForLeRobot("huggingface", { repoName, accessToken });
+await recorder.exportForLeRobot("s3", { bucketName, credentials });
+```
+
+This implementation has **excellent architecture** - the explicit teleoperator dependency makes it clear, testable, and flexible.
+
+### Current Implementation Status
+
+The existing recording system is **fully functional** with these components:
+
+✅ **Already Working Well:**
+
+- `LeRobotDatasetRecorder` class with complete functionality
+- Proper callback-based integration with teleoperators (no polling issues)
+- Full LeRobot dataset format support with Parquet export
+- Video recording and synchronization capabilities
+- Complete cyberpunk example integration with camera management
+- Clean separation between recording logic and teleoperator classes
+- Export to ZIP, Hugging Face, and S3
+
+### What Works Well (Keep This)
+
+The current implementation has **excellent architectural decisions**:
+
+- **Explicit Teleoperator Dependency**: `LeRobotDatasetRecorder([teleoperator], ...)` makes dependencies clear and predictable
+- **Clean Separation**: Recording subscribes to teleoperator callbacks without tight coupling
+- **Flexible Architecture**: Can record from any teleoperator, multiple teleoperators, or no teleoperator at all
+
+### Areas for Improvement
+
+The only issues are **API consistency** and **UI organization**:
+
+- **Missing Simple Function API**: Users must instantiate `LeRobotDatasetRecorder` class directly instead of calling `record()` like other functions
+- **UI Integration Pattern**: Recording is embedded within teleoperation view instead of being its own separate component/page
+- **Library vs Demo Boundary**: Complex export functionality (video processing, cloud uploads) should be in demo layer, not standard library
 
 ### 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
+- **Simple Function API**: `const process = await record(config)` (currently requires class instantiation)
+- **Clean Process Objects**: Consistent `start()`, `stop()`, `getState()`, `result` interface (class has `startRecording()`, `stopRecording()`)
+- **Hardware-Only Library**: Standard library handles only robotics hardware (currently includes video/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
+- [ ] **Standard Library API**: Clean `record(config)` function matching our established patterns (wrap existing `LeRobotDatasetRecorder`)
+- [ ] **Process Object Interface**: Consistent `RecordProcess` with `start()`, `stop()`, `getState()`, `result` methods (adapt existing methods)
+- [ ] **Hardware-Only Recording**: Library captures only robot motor positions and teleoperation data (move video/export to demo)
+- [ ] **Clean Teleoperator Integration**: Recording uses existing callback system in `BaseWebTeleoperator`
+- [ ] **Preserve Advanced Features**: Keep `LeRobotDatasetRecorder` class for users who need full control
 
 ### 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
+- [ ] **Separate UI Component**: Move recording from teleoperation view to its own dedicated page/section in cyberpunk example
 - [ ] **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`
+- [ ] **Library/Demo Separation**: Move video recording, complex export logic (HF, S3) to examples/demo layer
+- [ ] **Wrapper Function**: Create simple `record()` function that wraps existing `LeRobotDatasetRecorder`
+- [ ] **Preserve Existing Integration**: Keep current callback system in `BaseWebTeleoperator` (it works well)
 - [ ] **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
+- [ ] **No Breaking Changes**: Existing `LeRobotDatasetRecorder` class should remain available for advanced users
 
 ## Expected User Flow
 
-### Basic Robot Recording
+### Basic Robot Recording (Proposed Simple API)
 
 ```typescript
-import { record } from "@lerobot/web";
+import { teleoperate, record } from "@lerobot/web";
 
-// Clean API matching our conventions
-const recordProcess = await record({
+// 1. Create teleoperation first (existing pattern)
+const teleoperationProcess = await teleoperate({
   robot: connectedRobot,
+  teleop: { type: "keyboard" },
+  calibrationData: calibrationData,
+});
+
+// 2. NEW: Clean API with explicit teleoperator dependency
+const recordProcess = await record({
+  teleoperator: teleoperationProcess.teleoperator, // ← Explicit dependency
   options: {
     fps: 30,
+    taskDescription: "Pick and place task",
     onDataUpdate: (data) => {
       // Real-time recording data for UI feedback
       console.log(`Recorded ${data.frameCount} frames`);
@@ -87,26 +137,57 @@ const recordProcess = await record({
   },
 });
 
-// Consistent process interface
+// 3. Start both processes
+teleoperationProcess.start();
 recordProcess.start();
 
-// Recording runs automatically while teleoperation is active
+// 4. Recording captures teleoperation automatically via callbacks
 setTimeout(() => {
   recordProcess.stop();
 }, 30000);
 
-// Get pure robot recording data
+// 5. Get pure robot recording data (no video/export complexity)
 const robotData = await recordProcess.result;
 console.log("Episodes:", robotData.episodes);
 console.log("Metadata:", robotData.metadata);
 ```
 
-### Recording with Teleoperation
+### Current Implementation (Works Well, Just Different API Style)
+
+```typescript
+import { LeRobotDatasetRecorder } from "@lerobot/web";
+
+// CURRENT: Class-based API with explicit dependencies (good architecture!)
+const recorder = new LeRobotDatasetRecorder(
+  [teleoperator], // ← GOOD: Explicit teleoperator dependency
+  { main: videoStream }, // Video complexity in library (to be moved)
+  30, // fps
+  "Pick and place task" // Task description
+);
+
+// Different method names than our conventions (but functional)
+await recorder.startRecording();
+// ... robot performs task ...
+const result = await recorder.stopRecording();
+
+// Complex export in standard library (should be demo-only)
+await recorder.exportForLeRobot("zip-download");
+await recorder.exportForLeRobot("huggingface", { repoName, accessToken });
+```
+
+**What's Good About Current Implementation:**
+
+- ✅ **Explicit Dependencies**: Clear what the recorder needs to work
+- ✅ **Clean Architecture**: Recording subscribes to teleoperator via callbacks
+- ✅ **Full Functionality**: Complete LeRobot dataset format support
+- ✅ **Flexible**: Can record from any teleoperator instance
+
+### Recording with Teleoperation (Proposed Simple API)
 
 ```typescript
 import { teleoperate, record } from "@lerobot/web";
 
-// Start teleoperation
+// 1. Start teleoperation (existing pattern)
 const teleoperationProcess = await teleoperate({
   robot: connectedRobot,
   teleop: { type: "keyboard" },
@@ -116,21 +197,23 @@ const teleoperationProcess = await teleoperate({
   },
 });
 
-// Add recording to existing teleoperation
+// 2. NEW: Add recording with explicit teleoperator dependency
 const recordProcess = await record({
-  robot: connectedRobot,
+  teleoperator: teleoperationProcess.teleoperator, // ← Explicit dependency (good!)
   options: {
+    fps: 30,
+    taskDescription: "Pick and place task",
     onDataUpdate: (data) => {
       console.log(`Recording frame ${data.frameCount}`);
     },
   },
 });
 
-// Both run independently
+// 3. Both run independently
 teleoperationProcess.start();
 recordProcess.start();
 
-// Control independently
+// 4. Control independently
 setTimeout(() => {
   recordProcess.stop(); // Stop recording, keep teleoperation
 }, 60000);
@@ -140,12 +223,19 @@ setTimeout(() => {
 }, 120000);
 ```
 
-### Demo-Layer Dataset Export
+**Why Explicit Teleoperator Dependency is Good:**
+
+- 🎯 **Clear**: You know exactly what gets recorded
+- 🔧 **Flexible**: Can record from any teleoperator
+- 🧪 **Testable**: Easy to mock teleoperator for testing
+- 📦 **Reusable**: Same teleoperator can serve multiple recorders
+
+### Demo-Layer Dataset Export (Proposed Architecture)
 
 ```typescript
 // In examples/demo - NOT in standard library
 import { record } from "@lerobot/web";
-import { DatasetExporter } from "./dataset-exporter"; // Demo code
+import { DatasetExporter } from "./dataset-exporter"; // MOVE complex logic here
 
 const recordProcess = await record({ robot, options });
 recordProcess.start();
@@ -153,21 +243,35 @@ recordProcess.start();
 // ... recording session ...
 
 recordProcess.stop();
-const robotData = await recordProcess.result;
+const robotData = await recordProcess.result; // Pure motor data only
 
-// Demo handles complex export logic
+// MOVE TO DEMO: Complex export logic with video/cloud features
 const exporter = new DatasetExporter({
   robotData,
   videoStreams: cameraStreams, // Demo manages video
   taskDescription: "Pick and place task",
 });
 
-// Export options handled by demo
+// MOVE TO DEMO: Export options
 await exporter.downloadZip();
 await exporter.uploadToHuggingFace({ apiKey, repoName });
 await exporter.uploadToS3({ credentials });
 ```
 
+### Current Cyberpunk Example Integration
+
+```typescript
+// CURRENT: Recording embedded in teleoperation view
+// examples/cyberpunk-standalone/src/components/teleoperation-view.tsx
+<TeleoperationView robot={robot} />
+// ^ Contains embedded <Recorder /> component
+
+// PROPOSED: Separate recording page/component
+// examples/cyberpunk-standalone/src/components/recording-view.tsx
+<RecordingView robot={robot} />
+// ^ Dedicated component with full recording interface
+```
+
 ### Component Integration
 
 ```typescript
@@ -203,45 +307,61 @@ const handleStopRecording = async () => {
 
 ## Implementation Details
 
-### File Structure Refactoring
+### File Structure Changes
 
 ```
 packages/web/src/
-├── record.ts                         # NEW: Clean record() function
+├── record.ts                         # UPDATE: Add simple record() function wrapper
+├── record-class.ts                   # RENAME: Move LeRobotDatasetRecorder here
 ├── types/
-│   └── recording.ts                  # NEW: Recording-specific types
-├── utils/
-│   └── recording-manager.ts          # NEW: Internal recording logic
+│   └── recording.ts                  # NEW: Recording-specific types for simple API
 ├── 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
+│   └── base-teleoperator.ts          # KEEP: Current callback system works well
+└── [MOVE TO EXAMPLES]
+    ├── dataset-exporter.ts            # Video recording + export functionality
+    ├── hf_uploader.ts                 # HuggingFace upload logic
+    └── s3_uploader.ts                 # S3 upload logic
 ```
 
+### Current vs Proposed Architecture
+
+**Current (Working):**
+
+- `LeRobotDatasetRecorder` class with full functionality
+- Integrated in cyberpunk example within teleoperation view
+- Video, HF, S3 export in standard library
+
+**Proposed (Convention-Aligned):**
+
+- Simple `record()` function wrapping existing class
+- Separate recording component/page in cyberpunk example
+- Video, HF, S3 export moved to demo layer
+- Keep existing class available for advanced users
+
 ### Key Dependencies
 
-#### No New Dependencies for Standard Library
+#### Standard Library (Minimal Changes)
 
-- **Existing**: Reuse all current dependencies (motor communication, teleoperation integration)
-- **Architecture Only**: Pure refactoring to clean up existing functionality
+- **Keep Existing**: All current dependencies for core recording functionality
+- **Wrapper Only**: Simple `record()` function is just a wrapper, no new dependencies
 
-#### Demo Dependencies (Moved)
+#### Demo Dependencies (To Be Moved)
 
-- **Video/Export**: `parquet-wasm`, `apache-arrow`, `jszip` - moved to examples
-- **Upload**: `@huggingface/hub`, AWS SDK - moved to examples
+- **Video/Export**: `parquet-wasm`, `apache-arrow`, `jszip` - move to examples
+- **Upload**: `@huggingface/hub`, AWS SDK - move to examples
+- **Keep Available**: Advanced users can still import `LeRobotDatasetRecorder` for full features
 
 ### Core Functions to Implement
 
-#### Clean Record API
+#### Simple Record API (Wrapper)
 
 ```typescript
-// record.ts - New clean API
+// record.ts - Simple wrapper around existing LeRobotDatasetRecorder
 interface RecordConfig {
-  robot: RobotConnection;
+  teleoperator: WebTeleoperator; // ← Explicit dependency (keep this!)
   options?: {
     fps?: number; // Default: 30
+    taskDescription?: string;
     onDataUpdate?: (data: RecordingData) => void;
     onStateUpdate?: (state: RecordingState) => void;
   };
@@ -265,11 +385,11 @@ interface RecordingState {
 interface RecordingData {
   frameCount: number;
   currentEpisode: number;
-  recentFrames: MotorPositionFrame[]; // Last few frames for UI
+  recentFrames: any[]; // Simplified for basic API
 }
 
 interface RobotRecordingData {
-  episodes: MotorPositionFrame[][]; // Pure motor data only
+  episodes: any[]; // Pure motor data only (no video)
   metadata: {
     fps: number;
     robotType: string;
@@ -280,106 +400,80 @@ interface RobotRecordingData {
   };
 }
 
-// Main function - matches our conventions
+// Simple wrapper function - internally uses LeRobotDatasetRecorder
+// Preserves the excellent explicit dependency architecture
 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;
+#### Implementation Strategy
 
-    this.isActive = true;
-    this.startTime = Date.now();
+**Phase 1: Simple Wrapper (Preserves Current Architecture)**
 
-    // 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
-      });
-    }
-  }
+```typescript
+// record.ts - Simple wrapper implementation
+import { LeRobotDatasetRecorder } from "./record-class.js";
+
+export async function record(config: RecordConfig): Promise<RecordProcess> {
+  // Use the provided teleoperator (explicit dependency - good!)
+  const recorder = new LeRobotDatasetRecorder(
+    [config.teleoperator], // ← Use explicit teleoperator dependency
+    {}, // No video streams in simple API (move to demo)
+    config.options?.fps || 30,
+    config.options?.taskDescription || "Robot recording"
+  );
 
-  getState(): RecordingState {
-    return {
-      isActive: this.isActive,
-      frameCount: this.frameCount,
-      episodeCount: this.episodes.length,
-      duration: this.isActive ? Date.now() - this.startTime : 0,
+  return {
+    start: () => {
+      recorder.startRecording();
+      if (config.options?.onStateUpdate) {
+        // Set up state update polling for simple API
+        const updateLoop = () => {
+          if (recorder.isRecording) {
+            config.options.onStateUpdate!({
+              isActive: recorder.isRecording,
+              frameCount: recorder.teleoperatorData.length,
+              episodeCount: recorder.teleoperatorData.length,
+              duration: Date.now() - (recorder as any).startTime,
+              lastUpdate: Date.now(),
+            });
+            setTimeout(updateLoop, 100);
+          }
+        };
+        updateLoop();
+      }
+    },
+    stop: () => {
+      return recorder.stopRecording();
+    },
+    getState: () => ({
+      isActive: recorder.isRecording,
+      frameCount: recorder.teleoperatorData.length,
+      episodeCount: recorder.teleoperatorData.length,
+      duration: 0, // Calculate from recorder
       lastUpdate: Date.now(),
-    };
-  }
-
-  async getResult(): Promise<RobotRecordingData> {
-    return {
-      episodes: [...this.episodes],
+    }),
+    result: recorder.stopRecording().then(() => ({
+      episodes: recorder.episodes, // Pure motor data
       metadata: {
-        fps: this.options.fps || 30,
-        robotType: this.robot.robotType || "unknown",
-        startTime: this.startTime,
+        fps: config.options?.fps || 30,
+        robotType: "unknown", // Get from teleoperator if possible
+        startTime: Date.now(),
         endTime: Date.now(),
-        totalFrames: this.frameCount,
-        totalEpisodes: this.episodes.length,
+        totalFrames: recorder.teleoperatorData.length,
+        totalEpisodes: recorder.teleoperatorData.length,
       },
-    };
-  }
+    })),
+  };
 }
 ```
 
+**Key Benefits of This Approach:**
+
+- ✅ **Preserves Explicit Dependencies**: Keeps the excellent `teleoperator` parameter
+- ✅ **Minimal Changes**: Just wraps existing `LeRobotDatasetRecorder`
+- ✅ **No Breaking Changes**: Current class remains available
+- ✅ **Consistent API**: Follows `start()`, `stop()`, `getState()`, `result` pattern
+
 #### Updated Teleoperate Integration
 
 ```typescript
@@ -468,16 +562,29 @@ class AdvancedDatasetExporter extends DatasetExporter {
 
 ## Definition of Done
 
-- [ ] **Clean Record API**: `record(config)` function implemented matching our established patterns
+### Phase 1: Simple Function API (Priority)
+
+- [ ] **Clean Record API**: `record(config)` function implemented as wrapper around existing `LeRobotDatasetRecorder`
 - [ ] **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
+- [ ] **Hardware-Only Simple API**: Simple `record()` function captures only robot motor data (no video)
+- [ ] **Preserve Advanced Features**: Keep existing `LeRobotDatasetRecorder` class available for full functionality
+- [ ] **TypeScript Coverage**: Full type safety with proper interfaces for simple recording API
+
+### Phase 2: UI Separation (Secondary)
+
+- [ ] **Separate Recording Component**: Move recording from teleoperation view to dedicated component/page
+- [ ] **Clean Navigation**: Add recording as separate section in cyberpunk example navigation
+- [ ] **No Breaking Changes**: Existing functionality continues to work during transition
+
+### Phase 3: Library/Demo Boundary (Future)
+
+- [ ] **Demo Separation**: Video recording, export formats moved to examples layer (optional enhancement)
+- [ ] **Advanced Export Demo**: Create demo showing complex export features using `LeRobotDatasetRecorder`
+- [ ] **Documentation**: Clear examples showing simple API vs advanced class usage
+
+### Success Criteria
+
+- [ ] **API Consistency**: `record()` function follows same patterns as `calibrate()` and `teleoperate()`
+- [ ] **No Regression**: All existing recording functionality preserved and working
+- [ ] **Easy Migration**: Users can easily switch between simple API and advanced class
+- [ ] **Clean Example**: Recording has its own dedicated UI section in cyberpunk demo

examples/cyberpunk-standalone/src/App.tsx

@@ -13,6 +13,7 @@ import { EditRobotDialog } from "@/components/edit-robot-dialog";
 import { DeviceDashboard } from "@/components/device-dashboard";
 import { CalibrationView } from "@/components/calibration-view";
 import { TeleoperationView } from "@/components/teleoperation-view";
+import { RecordingView } from "@/components/recording-view";
 import { SetupCards } from "@/components/setup-cards";
 import { DocsSection } from "@/components/docs-section";
 import { RoadmapSection } from "@/components/roadmap-section";
@@ -225,31 +226,17 @@ function App() {
   };
 
   const handleCalibrate = (robot: RobotConnection) => {
-    if (!robot.isConnected) {
-      toast({
-        title: "Robot Not Connected",
-        description: "Please connect the robot before calibrating",
-        variant: "destructive",
-      });
-      return;
-    }
-
     navigate(`/device/${robot.serialNumber}/calibrate`);
   };
 
   const handleTeleoperate = (robot: RobotConnection) => {
-    if (!robot.isConnected) {
-      toast({
-        title: "Robot Not Connected",
-        description: "Please connect the robot before teleoperating",
-        variant: "destructive",
-      });
-      return;
-    }
-
     navigate(`/device/${robot.serialNumber}/control`);
   };
 
+  const handleRecord = (robot: RobotConnection) => {
+    navigate(`/device/${robot.serialNumber}/record`);
+  };
+
   const handleBackToDashboard = () => {
     navigate("/");
   };
@@ -270,6 +257,7 @@ function App() {
                 robots={robots}
                 onCalibrate={handleCalibrate}
                 onTeleoperate={handleTeleoperate}
+                onRecord={handleRecord}
                 onRemove={handleRemoveRobot}
                 onEdit={setEditingRobot}
                 onFindNew={handleFindNewRobots}
@@ -297,6 +285,15 @@ function App() {
               />
             }
           />
+          <Route
+            path="/device/:serialNumber/record"
+            element={
+              <RecordPage
+                robots={robots}
+                onBackToDashboard={handleBackToDashboard}
+              />
+            }
+          />
         </Routes>
         <EditRobotDialog
           robot={editingRobot}
@@ -316,6 +313,7 @@ function DashboardPage({
   robots,
   onCalibrate,
   onTeleoperate,
+  onRecord,
   onRemove,
   onEdit,
   onFindNew,
@@ -326,6 +324,7 @@ function DashboardPage({
   robots: RobotConnection[];
   onCalibrate: (robot: RobotConnection) => void;
   onTeleoperate: (robot: RobotConnection) => void;
+  onRecord: (robot: RobotConnection) => void;
   onRemove: (robot: RobotConnection) => void;
   onEdit: (robot: RobotConnection | null) => void;
   onFindNew: () => void;
@@ -341,6 +340,7 @@ function DashboardPage({
           robots={robots}
           onCalibrate={onCalibrate}
           onTeleoperate={onTeleoperate}
+          onRecord={onRecord}
           onRemove={onRemove}
           onEdit={onEdit}
           onFindNew={onFindNew}
@@ -442,6 +442,43 @@ function ControlPage({
   );
 }
 
+// Record Page Component
+function RecordPage({
+  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}
+      />
+      <RecordingView robot={selectedRobot} />
+    </div>
+  );
+}
+
 // Page Header Component
 function PageHeader({
   onBackToDashboard,
@@ -454,6 +491,7 @@ function PageHeader({
   const isDashboard = location.pathname === "/";
   const isCalibrating = location.pathname.includes("/calibrate");
   const isTeleoperating = location.pathname.includes("/control");
+  const isRecording = location.pathname.includes("/record");
 
   return (
     <div className="flex items-center justify-between mb-12">
@@ -483,6 +521,16 @@ function PageHeader({
                 {selectedRobot.robotId?.toUpperCase()}
               </span>
             </h1>
+          ) : isRecording && selectedRobot ? (
+            <h1 className="font-mono text-4xl font-bold tracking-wider">
+              <span className="text-muted-foreground uppercase">record:</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"

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

@@ -3,6 +3,7 @@ import { useState, useMemo, useEffect, useCallback } from "react";
 import { Download } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,6 +29,7 @@ import {
   type CalibrationMetadata,
 } from "@/lib/unified-storage";
 import { MotorCalibrationVisual } from "@/components/motor-calibration-visual";
+import { cn } from "@/lib/utils";
 
 interface CalibrationViewProps {
   robot: RobotConnection;
@@ -281,32 +283,50 @@ export function CalibrationView({ robot }: CalibrationViewProps) {
               </p>
             </div>
           </div>
-          <div className="flex gap-4">
-            {!isCalibrating ? (
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-mono text-muted-foreground uppercase">
+                robot status:
+              </span>
+              <Badge
+                variant="outline"
+                className={cn(
+                  "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
+                  robot.isConnected
+                    ? "border-green-500/50 bg-green-500/20 text-green-400"
+                    : "border-red-500/50 bg-red-500/20 text-red-400"
+                )}
+              >
+                {robot.isConnected ? "ONLINE" : "OFFLINE"}
+              </Badge>
+            </div>
+            <div className="flex gap-4">
+              {!isCalibrating ? (
+                <Button
+                  onClick={handleStart}
+                  size="lg"
+                  disabled={isPreparing || !robot.isConnected}
+                >
+                  {isPreparing
+                    ? "Preparing..."
+                    : calibrationResults
+                    ? "Re-calibrate"
+                    : "Start Calibration"}
+                </Button>
+              ) : (
+                <Button onClick={handleFinish} variant="destructive" size="lg">
+                  Finish Recording
+                </Button>
+              )}
               <Button
-                onClick={handleStart}
+                onClick={downloadJson}
+                variant="outline"
                 size="lg"
-                disabled={isPreparing || !robot.isConnected}
+                disabled={!calibrationResults}
               >
-                {isPreparing
-                  ? "Preparing..."
-                  : calibrationResults
-                  ? "Re-calibrate"
-                  : "Start Calibration"}
+                <Download className="w-4 h-4 mr-2" /> Download JSON
               </Button>
-            ) : (
-              <Button onClick={handleFinish} variant="destructive" size="lg">
-                Finish Recording
-              </Button>
-            )}
-            <Button
-              onClick={downloadJson}
-              variant="outline"
-              size="lg"
-              disabled={!calibrationResults}
-            >
-              <Download className="w-4 h-4 mr-2" /> Download JSON
-            </Button>
+            </div>
           </div>
         </div>
         <div className="pt-6 p-6">

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

@@ -8,6 +8,7 @@ import {
   Pencil,
   Plus,
   ExternalLink,
+  Disc,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Card, CardFooter } from "@/components/ui/card";
@@ -31,6 +32,7 @@ interface DeviceDashboardProps {
   robots: RobotConnection[];
   onCalibrate: (robot: RobotConnection) => void;
   onTeleoperate: (robot: RobotConnection) => void;
+  onRecord: (robot: RobotConnection) => void;
   onRemove: (robotId: string) => void;
   onEdit: (robot: RobotConnection) => void;
   onFindNew: () => void;
@@ -42,6 +44,7 @@ export function DeviceDashboard({
   robots,
   onCalibrate,
   onTeleoperate,
+  onRecord,
   onRemove,
   onEdit,
   onFindNew,
@@ -162,7 +165,9 @@ export function DeviceDashboard({
                           variant="outline"
                           className={cn(
                             "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
-                            robot.isConnected && "animate-pulse-slow"
+                            robot.isConnected
+                              ? "border-green-500/50 bg-green-500/20 text-green-400 animate-pulse-slow"
+                              : "border-red-500/50 bg-red-500/20 text-red-400"
                           )}
                         >
                           {robot.isConnected ? "ONLINE" : "OFFLINE"}
@@ -220,6 +225,14 @@ export function DeviceDashboard({
                       >
                         <Gamepad2 className="w-3 h-3 mr-0.5" /> control
                       </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => onRecord(robot)}
+                        className="font-mono text-xs uppercase px-2"
+                      >
+                        <Disc className="w-3 h-3 mr-0.5" /> record
+                      </Button>
                       <Button
                         variant="destructive"
                         size="sm"

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

@@ -592,6 +592,113 @@ await releaseMotors(robot, [1, 2, 3]);`}
                     </ul>
                   </div>
                 </div>
+
+                {/* record */}
+                <div>
+                  <h4 className="font-bold text-primary">record(config)</h4>
+                  <p className="text-sm mt-1">
+                    Records robot teleoperator data and camera streams in the LeRobot dataset format.
+                  </p>
+                  <CodeBlock>
+                    {`import { teleoperate, record } from "@lerobot/web";
+
+// Start teleoperation first
+const teleoperationProcess = await teleoperate({
+  robot: connectedRobot,
+  teleop: { type: "keyboard" },
+  calibrationData: calibrationData,
+});
+
+// Create recording with teleoperator
+const recordProcess = await record({
+  teleoperator: teleoperationProcess.teleoperator,
+  videoStreams: {
+    main: mainCameraStream,
+    wrist: wristCameraStream,
+  },
+  robotType: "so100",
+  options: {
+    fps: 30,
+    taskDescription: "Pick and place task",
+    onStateUpdate: (state) => {
+      console.log(\`Recording: \${state.frameCount} frames\`);
+    },
+  },
+});
+
+// Start both recording and teleoperation
+teleoperationProcess.start();
+recordProcess.start();
+
+// Manage recording during operation
+recordProcess.nextEpisode(); // Start new episode if needed
+
+// Stop recording when finished
+const robotData = await recordProcess.stop();
+await recordProcess.exportForLeRobot("zip-download");`}
+                  </CodeBlock>
+                  <div className="mt-3">
+                    <h5 className="font-bold text-sm tracking-wider">
+                      Options
+                    </h5>
+                    <ul className="mt-1 ml-4 space-y-1 text-sm">
+                      <li>
+                        • <code>teleoperator: WebTeleoperator</code> - The teleoperator to record from
+                      </li>
+                      <li>
+                        • <code>videoStreams?: {`{ [name: string]: MediaStream }`}</code> - Optional camera streams
+                      </li>
+                      <li>
+                        • <code>robotType?: string</code> - Robot metadata (e.g., "so100")
+                      </li>
+                      <li>
+                        • <code>options?: RecordOptions</code> - Optional configuration:
+                        <ul className="mt-1 ml-4 space-y-1">
+                          <li>
+                            • <code>fps?: number</code> - Target frames per second (default: 30)
+                          </li>
+                          <li>
+                            • <code>taskDescription?: string</code> - Task description
+                          </li>
+                          <li>
+                            • <code>onStateUpdate?: (state: RecordingState) =&gt; void</code> - State changes
+                          </li>
+                        </ul>
+                      </li>
+                    </ul>
+                  </div>
+                  <div className="mt-3">
+                    <h5 className="font-bold text-sm tracking-wider">
+                      Returns: RecordProcess
+                    </h5>
+                    <ul className="mt-1 ml-4 space-y-1 text-sm">
+                      <li>
+                        • <code>start(): void</code> - Start recording
+                      </li>
+                      <li>
+                        • <code>stop(): Promise&lt;RobotRecordingData&gt;</code> - Stop recording
+                      </li>
+                      <li>
+                        • <code>getState(): RecordingState</code> - Current recording state
+                      </li>
+                      <li>
+                        • <code>getEpisodeCount(): number</code> - Get number of episodes
+                      </li>
+                      <li>
+                        • <code>nextEpisode(): Promise&lt;number&gt;</code> - Start new episode
+                      </li>
+                      <li>
+                        • <code>clearEpisodes(): void</code> - Delete all episodes
+                      </li>
+                      <li>
+                        • <code>addCamera(name: string, stream: MediaStream): void</code> - Add camera dynamically
+                      </li>
+                      <li>
+                        • <code>exportForLeRobot(format?: "blobs" | "zip" | "zip-download"): Promise&lt;any&gt;</code> - Export dataset
+                      </li>
+                    </ul>
+                  </div>
+                </div>
               </div>
             </div>
           </TabsContent>

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

@@ -1,17 +1,7 @@
 "use client";
 
-import { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import { useState, useEffect, useRef, useCallback, memo } 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 {
@@ -36,20 +26,38 @@ import {
   Edit2,
   Check,
 } from "lucide-react";
-import { LeRobotDatasetRecorder, LeRobotDatasetRow, NonIndexedLeRobotDatasetRow, LeRobotEpisode } from "@lerobot/web";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { record, LeRobotEpisode } from "@lerobot/web";
+import type { RecordProcess } from "@lerobot/web";
 import { TeleoperatorEpisodesView } from "./teleoperator-episodes-view";
+import { uploadToHuggingFace } from "@/utils/dataset-uploader";
 
 interface RecorderProps {
   teleoperators: any[];
   robot: any; // eslint-disable-line @typescript-eslint/no-explicit-any
   onNeedsTeleoperation: () => Promise<boolean>;
+  showConfigure: boolean;
+  onRecorderReady?: (callbacks: {
+    startRecording: () => Promise<void>;
+    stopRecording: () => Promise<void>;
+    isRecording: boolean;
+  }) => void;
   videoStreams?: { [key: string]: MediaStream };
 }
 
-
-
 interface RecorderSettings {
   huggingfaceApiKey: string;
+  huggingfaceRepoName?: string;
+  huggingfacePrivate?: boolean;
   cameraConfigs: {
     [cameraName: string]: {
       deviceId: string;
@@ -72,6 +80,8 @@ function getRecorderSettings(): RecorderSettings {
   }
   return {
     huggingfaceApiKey: "",
+    huggingfaceRepoName: "",
+    huggingfacePrivate: true,
     cameraConfigs: {},
   };
 }
@@ -88,9 +98,15 @@ export function Recorder({
   teleoperators,
   robot,
   onNeedsTeleoperation,
+  showConfigure,
+  onRecorderReady,
 }: RecorderProps) {
   const [isRecording, setIsRecording] = useState(false);
   const [currentEpisode, setCurrentEpisode] = useState(0);
+  const [persistedEpisodes, setPersistedEpisodes] = useState<any[]>([]);
+  const [uiTick, setUiTick] = useState(0);
+  const [showDeleteEpisodesDialog, setShowDeleteEpisodesDialog] =
+    useState(false);
   // Use huggingfaceApiKey from recorderSettings instead of separate state
   const [cameraName, setCameraName] = useState("");
   const [additionalCameras, setAdditionalCameras] = useState<{
@@ -105,8 +121,7 @@ export function Recorder({
   const [cameraPermissionState, setCameraPermissionState] = useState<
     "unknown" | "granted" | "denied"
   >("unknown");
-  const [showCameraConfig, setShowCameraConfig] = useState(false);
-  const [showConfigure, setShowConfigure] = useState(false);
+
   const [recorderSettings, setRecorderSettings] = useState<RecorderSettings>(
     () => getRecorderSettings()
   );
@@ -115,68 +130,106 @@ export function Recorder({
     null
   );
   const [editingCameraNewName, setEditingCameraNewName] = useState("");
-  const [huggingfaceApiKey, setHuggingfaceApiKey] = useState("")
-  const recorderRef = useRef<LeRobotDatasetRecorder | null>(null);
+  const [sourceSelectorOpenFor, setSourceSelectorOpenFor] = useState<
+    string | null
+  >(null);
+  const [uploadState, setUploadState] = useState<
+    { status: "idle" } | { status: "uploading" } | { status: "done" }
+  >({ status: "idle" });
+
+  const recordProcessRef = useRef<RecordProcess | 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"
-      );
+    if (teleoperators.length > 0 && !recordProcessRef.current) {
+      (async () => {
+        // Get robot type/family for metadata
+        let robotType = "unknown";
+        try {
+          const type = (robot?.robotType || "").toString();
+          robotType = type.split("_")[0] || type || "unknown";
+        } catch {}
+
+        // Create record process with upfront config
+        const recordProcess = await record({
+          teleoperator: teleoperators[0],
+          videoStreams: additionalCameras,
+          robotType,
+          options: {
+            fps: 30,
+            taskDescription: "Robot teleoperation recording",
+          },
+        });
+        recordProcessRef.current = recordProcess;
+
+        // Restore episodes if any were persisted
+        if (persistedEpisodes.length > 0) {
+          recordProcess.restoreEpisodes(persistedEpisodes);
+          setCurrentEpisode(persistedEpisodes.length - 1);
+        }
+
+        // Attach any cameras that were configured before control was enabled
+        for (const [key, stream] of Object.entries(additionalCameras)) {
+          try {
+            recordProcess.addCamera(key, stream as MediaStream);
+          } catch (e) {
+            console.warn("[Recorder] init: addCamera failed", key, e);
+          }
+        }
+      })();
     }
-  }, [teleoperators, additionalCameras]);
+  }, [teleoperators, persistedEpisodes, 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"}`,
-      });
+  // Sync additional cameras into recorder without re-creating it
+  useEffect(() => {
+    if (!recordProcessRef.current) return;
+    if (isRecording) return; // don't change streams during recording
+    const recordProcess = recordProcessRef.current;
 
-      const success = await onNeedsTeleoperation();
-      if (!success) {
-        toast({
-          title: "Recording Error",
-          description: "Failed to initialize robot control",
-          variant: "destructive",
-        });
-        return;
+    // Add any new cameras
+    for (const [key, stream] of Object.entries(additionalCameras)) {
+      try {
+        recordProcess.addCamera(key, stream);
+      } catch (e) {
+        console.warn("Failed to add camera", key, e);
       }
+    }
+  }, [additionalCameras, isRecording]);
 
-      // Wait a moment for the recorder to initialize with new teleoperators
-      await new Promise((resolve) => setTimeout(resolve, 100));
+  // Notify parent of recorder state changes
+  useEffect(() => {
+    if (onRecorderReady) {
+      onRecorderReady({
+        startRecording: handleStartRecordingClick,
+        stopRecording: handleStopRecording,
+        isRecording: isRecording,
+      });
     }
+  }, [isRecording, onRecorderReady]);
 
-    if (!recorderRef.current) {
+  // Simple recording start - just like the original working version
+  const handleStartRecordingClick = async () => {
+    if (!recordProcessRef.current) {
       toast({
         title: "Recording Error",
-        description: "Recorder not ready yet. Please try again.",
+        description: "Recorder not ready yet. Please enable control first.",
         variant: "destructive",
       });
       return;
     }
 
     try {
-      // Set the episode index
-      recorderRef.current.setEpisodeIndex(currentEpisode);
-      recorderRef.current.setTaskIndex(0); // Default task index
-
       // Start recording
-      recorderRef.current.startRecording();
+      recordProcessRef.current.start();
       setIsRecording(true);
       setHasRecordedFrames(true);
 
-      toast({
-        title: "Recording Started",
-        description: `Episode ${currentEpisode} is now recording`,
-      });
+      // Sync current episode to recorder's latest
+      setCurrentEpisode(
+        Math.max(0, (recordProcessRef.current.getEpisodeCount() || 1) - 1)
+      );
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : "Failed to start recording";
@@ -189,18 +242,18 @@ export function Recorder({
   };
 
   const handleStopRecording = async () => {
-    if (!recorderRef.current || !isRecording) {
+    if (!recordProcessRef.current || !isRecording) {
       return;
     }
 
     try {
-      const result = await recorderRef.current.stopRecording();
+      const result = await recordProcessRef.current.stop();
       setIsRecording(false);
 
-      toast({
-        title: "Recording Stopped",
-        description: `Episode ${currentEpisode} completed with ${result.teleoperatorData.length} frames`,
-      });
+      // No need to manually persist - episodes are managed by record process
+
+      // Force a small delay to ensure videoBlobs populated before export
+      await new Promise((r) => setTimeout(r, 50));
     } catch (error) {
       const errorMessage =
         error instanceof Error ? error.message : "Failed to stop recording";
@@ -212,37 +265,47 @@ export function Recorder({
     }
   };
 
-  const handleNextEpisode = () => {
-    // Make sure we're not recording
-    if (isRecording) {
-      handleStopRecording();
+  const handleDeleteEpisodes = async () => {
+    if (recordProcessRef.current) {
+      recordProcessRef.current.clearEpisodes();
     }
 
-    // Increment episode counter
-    setCurrentEpisode((prev) => prev + 1);
+    // Clear persisted episodes only if not recording
+    if (!isRecording) {
+      setPersistedEpisodes([]);
+    }
 
-    toast({
-      title: "New Episode",
-      description: `Ready to record episode ${currentEpisode + 1}`,
-    });
+    setCurrentEpisode(0);
+    setHasRecordedFrames(isRecording); // Keep true if recording, false if not
+    setShowDeleteEpisodesDialog(false);
+
+    // No toast needed; dialog confirmation provides sufficient feedback
   };
 
-  // Reset frames by clearing the recorder data
-  const handleResetFrames = useCallback(() => {
-    if (isRecording) {
-      handleStopRecording();
+  const handleNextEpisode = () => {
+    if (!isRecording || !recordProcessRef.current) {
+      return;
     }
 
-    if (recorderRef.current) {
-      recorderRef.current.clearRecording();
-      setHasRecordedFrames(false);
-
-      toast({
-        title: "Frames Reset",
-        description: "All recorded frames have been cleared",
+    // Finalize current video segment and start a new one
+    recordProcessRef.current
+      .nextEpisode()
+      .then((newIndex: number) => setCurrentEpisode(newIndex))
+      .catch(() => {
+        /* noop */
       });
-    }
-  }, [isRecording, toast]);
+  };
+
+  // Force lightweight UI refresh while recording so episode table updates in near real-time
+  useEffect(() => {
+    if (!isRecording) return;
+    const id = setInterval(() => {
+      setUiTick((t) => (t + 1) % 1_000_000);
+    }, 500);
+    return () => clearInterval(id);
+  }, [isRecording]);
+
+  // (Removed) Reset frames button in favor of Delete Episodes with confirmation
 
   // Load available cameras
   const loadAvailableCameras = useCallback(
@@ -375,6 +438,79 @@ export function Recorder({
     [previewStream, toast]
   );
 
+  // Change camera source for an already-added camera card
+  const handleChangeCameraSourceForCard = useCallback(
+    async (cameraName: string, deviceId: string) => {
+      if (hasRecordedFrames) {
+        toast({
+          title: "Camera Error",
+          description:
+            "Cannot change camera source after recording has started",
+          variant: "destructive",
+        });
+        return;
+      }
+
+      try {
+        // Create new stream for selected device
+        const newStream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            deviceId: { exact: deviceId },
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
+          },
+        });
+
+        // Replace existing stream in additionalCameras
+        setAdditionalCameras((prev) => {
+          const next = { ...prev };
+          const old = next[cameraName];
+          if (old) {
+            old.getTracks().forEach((t) => t.stop());
+          }
+          next[cameraName] = newStream;
+          return next;
+        });
+
+        // Update persistent config
+        const selected = availableCameras.find((c) => c.deviceId === deviceId);
+        const newSettings = {
+          ...recorderSettings,
+          cameraConfigs: { ...recorderSettings.cameraConfigs },
+        };
+        if (!newSettings.cameraConfigs[cameraName]) {
+          newSettings.cameraConfigs[cameraName] = {
+            deviceId,
+            deviceLabel: selected?.label || `Camera ${deviceId.slice(0, 8)}...`,
+          };
+        } else {
+          newSettings.cameraConfigs[cameraName].deviceId = deviceId;
+          newSettings.cameraConfigs[cameraName].deviceLabel =
+            selected?.label || `Camera ${deviceId.slice(0, 8)}...`;
+        }
+        setRecorderSettings(newSettings);
+        saveRecorderSettings(newSettings);
+
+        setSourceSelectorOpenFor(null);
+        toast({
+          title: "Camera Source Updated",
+          description: `\"${cameraName}\" now uses \"${
+            selected?.label || deviceId
+          }\"`,
+        });
+      } catch (error) {
+        toast({
+          title: "Camera Error",
+          description: `Failed to switch camera: ${
+            error instanceof Error ? error.message : String(error)
+          }`,
+          variant: "destructive",
+        });
+      }
+    },
+    [hasRecordedFrames, availableCameras, recorderSettings, toast]
+  );
+
   // Add a new camera to the recorder
   const handleAddCamera = useCallback(async () => {
     if (!cameraName.trim()) {
@@ -622,31 +758,26 @@ export function Recorder({
   }, [availableCameras, cameraPermissionState, restoreSavedCameras]);
 
   const handleDownloadZip = async () => {
-    if (!recorderRef.current) {
+    if (!recordProcessRef.current) return;
+    try {
+      if (isRecording) {
+        await handleStopRecording();
+      }
+      await recordProcessRef.current.exportForLeRobot("zip-download");
+    } catch (e) {
       toast({
-        title: "Download Error",
-        description: "Recorder not initialized",
+        title: "Export Error",
+        description:
+          e instanceof Error ? e.message : "Failed to export the dataset",
         variant: "destructive",
       });
       return;
     }
-
-    await recorderRef.current.exportForLeRobot("zip-download");
-    toast({
-      title: "Download Started",
-      description: "Your dataset is being downloaded as a ZIP file",
-    });
+    // No toast; the browser download prompt is sufficient feedback
   };
 
   const handleUploadToHuggingFace = async () => {
-    if (!recorderRef.current) {
-      toast({
-        title: "Upload Error",
-        description: "Recorder not initialized",
-        variant: "destructive",
-      });
-      return;
-    }
+    if (!recordProcessRef.current) return;
 
     if (!recorderSettings.huggingfaceApiKey) {
       toast({
@@ -658,25 +789,36 @@ export function Recorder({
     }
 
     try {
-      toast({
-        title: "Upload Started",
-        description: "Uploading dataset to Hugging Face...",
-      });
-
-      // Generate a unique repository name
-      const repoName = `lerobot-recording-${Date.now()}`;
+      // Use provided repo name or generate one
+      const repoName =
+        (recorderSettings.huggingfaceRepoName || "").trim() ||
+        `lerobot-recording-${Date.now()}`;
+
+      // Get blobs from recorder
+      const blobArray = await recordProcessRef.current.exportForLeRobot(
+        "blobs"
+      );
 
-      const uploader = await recorderRef.current.exportForLeRobot(
-        "huggingface",
-        {
-          repoName,
-          accessToken: recorderSettings.huggingfaceApiKey,
-        }
+      // Upload using demo utility
+      const uploader = await uploadToHuggingFace(
+        blobArray,
+        recorderSettings.huggingfaceApiKey,
+        repoName,
+        !!recorderSettings.huggingfacePrivate
       );
 
-      uploader.addEventListener("progress", (event: Event) => {
-        console.log(event);
-      });
+      // Progress UI next to button
+      setUploadState({ status: "uploading" });
+      const onProgress = (_event: Event) => {
+        // Spinner-only UI; keep uploading state
+        setUploadState({ status: "uploading" });
+      };
+      const onFinished = () => setUploadState({ status: "done" });
+      const onError = () => setUploadState({ status: "idle" });
+      uploader.addEventListener("progress", onProgress);
+      uploader.addEventListener("finished", onFinished);
+      uploader.addEventListener("error", onError);
+      // No fake progress; spinner indicates activity
     } catch (error) {
       const errorMessage =
         error instanceof Error
@@ -690,444 +832,212 @@ export function Recorder({
     }
   };
 
-  // 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}
+    <div className="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 className="space-y-2">
+                <label className="text-sm text-muted-foreground">
+                  Hugging Face Repo Name
+                </label>
+                <Input
+                  placeholder="e.g. my-dataset-name"
+                  value={recorderSettings.huggingfaceRepoName || ""}
+                  onChange={(e) => {
+                    const newSettings = {
+                      ...recorderSettings,
+                      huggingfaceRepoName: e.target.value,
+                    };
+                    setRecorderSettings(newSettings);
+                    saveRecorderSettings(newSettings);
+                  }}
+                  className="bg-black/20 border-white/10"
+                />
+                <label className="flex items-center gap-2 text-sm text-muted-foreground">
+                  <input
+                    type="checkbox"
+                    className="accent-white"
+                    checked={!!recorderSettings.huggingfacePrivate}
                     onChange={(e) => {
                       const newSettings = {
                         ...recorderSettings,
-                        huggingfaceApiKey: e.target.value,
+                        huggingfacePrivate: e.target.checked,
                       };
                       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>
+                  Private repository
+                </label>
               </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>
+          {/* 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>
-                    )}
-
-                    {/* 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 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>
-                    )}
-
-                    {/* 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>
-                      )}
+                    </div>
+                  )}
 
-                    {/* Camera Name Input */}
-                    {selectedCameraId && (
+                  {/* Camera List with Refresh Button */}
+                  {cameraPermissionState === "granted" &&
+                    availableCameras.length > 0 && (
                       <div className="space-y-2">
                         <label className="text-sm text-white/70">
-                          Camera Name:
+                          Select Camera:
                         </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 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>
                     )}
-                  </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>
-                      )}
+                  {/* 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>
-                  </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;
+                  )}
+
+                  {/* Add Camera Button */}
+                  {selectedCameraId && (
+                    <div className="flex justify-end">
+                      <Button
+                        onClick={handleAddCamera}
+                        className="gap-2"
+                        disabled={
+                          hasRecordedFrames ||
+                          !cameraName.trim() ||
+                          !selectedCameraId ||
+                          !previewStream
                         }
-                      }}
-                    />
-                  </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>
+                        <PlusCircle className="w-4 h-4" />
+                        Add Camera to Recorder
+                      </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 */}
+                {/* Right Column: Camera Preview */}
                 <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
@@ -1141,178 +1051,270 @@ export function Recorder({
                       <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 === "unknown" ? (
+                            <p className="text-sm">
+                              Request camera access to preview
+                            </p>
                           ) : cameraPermissionState === "denied" ? (
-                            <div>
-                              <p>Camera access denied</p>
-                              <p className="text-xs mt-1">
-                                Please allow camera access and refresh
-                              </p>
-                            </div>
+                            <p className="text-sm">Camera access denied</p>
                           ) : availableCameras.length === 0 ? (
-                            <p>Click "Load Cameras" to start</p>
+                            <p className="text-sm">No cameras available</p>
+                          ) : !selectedCameraId ? (
+                            <p className="text-sm">
+                              Select a camera to preview
+                            </p>
                           ) : (
-                            <p>Select a camera to preview</p>
+                            <p className="text-sm">Loading 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>
+              </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) {
+                        const current = video.srcObject as MediaStream | null;
+                        if (current !== stream) {
+                          video.srcObject = stream;
+                        }
+                      }
+                    }}
+                  />
+                </div>
+                <div className="flex items-center justify-between">
+                  {editingCameraName === cameraName ? (
+                    <div className="flex items-center gap-1 flex-1">
                       <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}
+                        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
                       />
-                      <p className="text-xs text-white/50">
-                        Give this camera a descriptive name for your recording
-                        setup
-                      </p>
+                      <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={handleAddCamera}
-                      className="w-full gap-2"
-                      disabled={
-                        hasRecordedFrames ||
-                        !cameraName.trim() ||
-                        !selectedCameraId ||
-                        !previewStream
-                      }
+                  ) : (
+                    <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}
                     >
-                      <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}
+                      {cameraName}
+                      <Edit2 className="w-3 h-3 opacity-50" />
+                    </button>
+                  )}
+                  <div className="flex items-center gap-2 ml-2">
+                    {/* Inline camera source selector trigger */}
+                    <div className="relative">
+                      <button
+                        onClick={() =>
+                          setSourceSelectorOpenFor((prev) =>
+                            prev === cameraName ? null : cameraName
+                          )
+                        }
+                        className="text-white/80 hover:text-white p-1"
+                        disabled={hasRecordedFrames}
+                        title="Change camera source"
+                      >
+                        <Camera className="w-4 h-4" />
+                      </button>
+                      {sourceSelectorOpenFor === cameraName && (
+                        <div className="absolute right-0 mt-1 z-20 bg-black/90 border border-white/20 rounded p-2 w-64">
+                          <label className="text-xs text-white/70">
+                            Camera Source
+                          </label>
+                          <Select
+                            value={
+                              recorderSettings.cameraConfigs[cameraName]
+                                ?.deviceId || ""
+                            }
+                            onValueChange={(deviceId) =>
+                              handleChangeCameraSourceForCard(
+                                cameraName,
+                                deviceId
+                              )
+                            }
+                            disabled={hasRecordedFrames}
+                          >
+                            <SelectTrigger className="w-full h-8 bg-black/20 border-white/10">
+                              <SelectValue placeholder="Choose a camera" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {availableCameras.map((cam) => (
+                                <SelectItem
+                                  key={cam.deviceId}
+                                  value={cam.deviceId}
+                                >
+                                  {cam.label ||
+                                    `Camera ${cam.deviceId.slice(0, 8)}...`}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      )}
+                    </div>
                     <button
-                      onClick={() => handleRemoveCamera(name)}
-                      className="ml-1 text-muted-foreground hover:text-destructive"
+                      onClick={() => handleRemoveCamera(cameraName)}
+                      className="text-red-400 hover:text-red-300 p-1"
                       disabled={hasRecordedFrames}
+                      title="Remove camera"
                     >
-                      ×
+                      <X className="w-4 h-4" />
                     </button>
-                  </Badge>
-                ))}
+                  </div>
+                </div>
               </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={handleNextEpisode}
+            disabled={!isRecording}
+          >
+            <PlusCircle className="w-4 h-4" />
+            Next Episode
+          </Button>
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={() => setShowDeleteEpisodesDialog(true)}
+            disabled={
+              persistedEpisodes.length === 0 &&
+              (recordProcessRef.current?.getEpisodeCount() || 0) === 0
+            }
+          >
+            <Trash2 className="w-4 h-4" />
+            Delete Episodes
+          </Button>
         </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>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            className="gap-2"
+            onClick={handleDownloadZip}
+            disabled={
+              (recordProcessRef.current?.getEpisodeCount() || 0) === 0 ||
+              isRecording
+            }
+          >
+            <Download className="w-4 h-4" />
+            Download as ZIP
+          </Button>
+          <Button
+            variant="outline"
+            className="gap-2 relative"
+            onClick={handleUploadToHuggingFace}
+            disabled={
+              (recordProcessRef.current?.getEpisodeCount() || 0) === 0 ||
+              isRecording ||
+              !recorderSettings.huggingfaceApiKey ||
+              uploadState.status === "uploading"
+            }
+          >
+            <Upload className="w-4 h-4" />
+            {uploadState.status === "uploading" ? (
+              <span className="inline-flex items-center gap-2">
+                Uploading…
+                <span className="inline-block w-4 h-4 border-2 border-white/50 border-t-white rounded-full animate-spin" />
+              </span>
+            ) : uploadState.status === "done" ? (
+              <span>Uploaded ✓</span>
+            ) : (
+              <span>Upload to Hugging Face</span>
+            )}
+          </Button>
+        </div>
+      </div>
 
-            {/* Reset Frames button moved to top bar */}
-          </div>
+      <div className="border border-white/10 rounded-md overflow-hidden">
+        <TeleoperatorEpisodesView
+          teleoperatorData={
+            (uiTick,
+            recordProcessRef.current?.getEpisodes() || persistedEpisodes)
+          }
+          isRecording={isRecording}
+          refreshTick={uiTick}
+        />
+      </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
-              }
+      {/* Delete Episodes Confirmation Dialog */}
+      <AlertDialog
+        open={showDeleteEpisodesDialog}
+        onOpenChange={setShowDeleteEpisodesDialog}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete All Episodes</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete all recorded episodes? This action
+              cannot be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteEpisodes}
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
             >
-              <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>
+              Delete Episodes
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
   );
 }
+
+export const MemoRecorder = memo(Recorder);

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

@@ -0,0 +1,598 @@
+"use client";
+
+import {
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  useCallback,
+  startTransition,
+} from "react";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import {
+  Gamepad2,
+  Keyboard,
+  Settings,
+  Square,
+  Disc as Record,
+  Check,
+} from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  teleoperate,
+  type TeleoperationProcess,
+  type TeleoperationState,
+  type TeleoperateConfig,
+  type RobotConnection,
+} from "@lerobot/web";
+import { getUnifiedRobotData } from "@/lib/unified-storage";
+import { MemoRecorder as Recorder } from "@/components/recorder";
+
+const UI_UPDATE_INTERVAL_MS = 100;
+
+interface RecordingViewProps {
+  robot: RobotConnection;
+}
+
+export function RecordingView({ robot }: RecordingViewProps) {
+  const [teleopState, setTeleopState] = useState<TeleoperationState>({
+    isActive: false,
+    motorConfigs: [],
+    lastUpdate: 0,
+    keyStates: {},
+  });
+
+  const [isInitialized, setIsInitialized] = useState(false);
+  const [controlEnabled, setControlEnabled] = useState(false);
+  const [selectedTeleoperatorType, setSelectedTeleoperatorType] = useState<
+    "direct" | "keyboard"
+  >("keyboard");
+  const [showConfigure, setShowConfigure] = useState(false);
+  const [recorderCallbacks, setRecorderCallbacks] = useState<{
+    startRecording: () => Promise<void>;
+    stopRecording: () => Promise<void>;
+    isRecording: boolean;
+  } | null>(null);
+
+  // Current step tracking
+  const currentStep = useMemo(() => {
+    if (!robot.isConnected) return 0; // No steps active if robot offline
+    if (!controlEnabled) return 1; // Step 1: Enable Control
+    if (!recorderCallbacks?.isRecording) return 2; // Step 2: Start Recording
+    return 3; // Step 3: Move Robot (recording active)
+  }, [robot.isConnected, controlEnabled, recorderCallbacks?.isRecording]);
+  const keyboardProcessRef = useRef<TeleoperationProcess | null>(null);
+  const directProcessRef = useRef<TeleoperationProcess | null>(null);
+  const lastUiUpdateRef = useRef(0);
+
+  // Load calibration data from unified storage
+  const calibrationData = useMemo(() => {
+    if (!robot.serialNumber) return undefined;
+
+    const data = getUnifiedRobotData(robot.serialNumber);
+    if (data?.calibration) {
+      return data.calibration;
+    }
+
+    // Return undefined if no calibration data - let library handle defaults
+    return undefined;
+  }, [robot.serialNumber]);
+
+  // Initialize teleoperation for recording
+  const initializeTeleoperation = useCallback(async () => {
+    if (!robot || !robot.robotType) {
+      return false;
+    }
+
+    try {
+      // Create keyboard teleoperation process
+      const keyboardConfig: TeleoperateConfig = {
+        robot: robot,
+        teleop: {
+          type: "keyboard",
+        },
+        calibrationData,
+        onStateUpdate: (state: TeleoperationState) => {
+          const now = performance.now();
+          if (now - lastUiUpdateRef.current >= UI_UPDATE_INTERVAL_MS) {
+            lastUiUpdateRef.current = now;
+            startTransition(() => setTeleopState(state));
+          }
+        },
+      };
+      const keyboardProcess = await teleoperate(keyboardConfig);
+
+      // Create direct teleoperation process
+      const directConfig: TeleoperateConfig = {
+        robot: robot,
+        teleop: {
+          type: "direct",
+        },
+        calibrationData,
+        onStateUpdate: (state: TeleoperationState) => {
+          const now = performance.now();
+          if (now - lastUiUpdateRef.current >= UI_UPDATE_INTERVAL_MS) {
+            lastUiUpdateRef.current = now;
+            startTransition(() => setTeleopState(state));
+          }
+        },
+      };
+      const directProcess = await teleoperate(directConfig);
+
+      keyboardProcessRef.current = keyboardProcess;
+      directProcessRef.current = directProcess;
+      setTeleopState(directProcess.getState());
+
+      setIsInitialized(true);
+
+      return true;
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error
+          ? error.message
+          : "Failed to initialize teleoperation for recording";
+      toast({
+        title: "Teleoperation Error",
+        description: errorMessage,
+        variant: "destructive",
+      });
+      return false;
+    }
+  }, [robot, robot.robotType, calibrationData]);
+
+  // Enable robot control for recording
+  const enableControl = useCallback(async () => {
+    if (!robot.isConnected) {
+      return false;
+    }
+
+    const success = await initializeTeleoperation();
+    if (success) {
+      // Start the appropriate teleoperator based on selection
+      if (
+        selectedTeleoperatorType === "keyboard" &&
+        keyboardProcessRef.current
+      ) {
+        keyboardProcessRef.current.start();
+      } else if (
+        selectedTeleoperatorType === "direct" &&
+        directProcessRef.current
+      ) {
+        directProcessRef.current.start();
+      }
+
+      setControlEnabled(true);
+      return true;
+    }
+    return false;
+  }, [robot.isConnected, initializeTeleoperation, selectedTeleoperatorType]);
+
+  // Disable robot control
+  const disableControl = useCallback(async () => {
+    if (keyboardProcessRef.current) {
+      keyboardProcessRef.current.stop();
+    }
+    if (directProcessRef.current) {
+      directProcessRef.current.stop();
+    }
+    setControlEnabled(false);
+  }, [selectedTeleoperatorType]);
+
+  // Keyboard event handlers (guarded to not interfere with inputs/shortcuts)
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!teleopState.isActive || !keyboardProcessRef.current) return;
+
+      // Ignore when user is typing in inputs/textareas or contenteditable elements
+      const target = event.target as HTMLElement | null;
+      const isEditableTarget = !!(
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT" ||
+          target.isContentEditable ||
+          target.closest(
+            '[role="textbox"], [contenteditable="true"], input, textarea, select'
+          ))
+      );
+      if (isEditableTarget) return;
+
+      // Allow browser/system shortcuts (e.g. Ctrl/Cmd+R, Ctrl/Cmd+L, etc.)
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+      // Only handle specific teleop keys
+      const rawKey = event.key;
+      const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
+      const allowedKeys = new Set([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "w",
+        "a",
+        "s",
+        "d",
+        "q",
+        "e",
+        "o",
+        "c",
+        "Escape",
+      ]);
+      if (!allowedKeys.has(normalizedKey)) return;
+
+      event.preventDefault();
+      const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+      if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+        (
+          keyboardTeleoperator as {
+            updateKeyState: (key: string, pressed: boolean) => void;
+          }
+        ).updateKeyState(normalizedKey, true);
+      }
+    },
+    [teleopState.isActive]
+  );
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent) => {
+      if (!teleopState.isActive || !keyboardProcessRef.current) return;
+
+      // Ignore when user is typing in inputs/textareas or contenteditable elements
+      const target = event.target as HTMLElement | null;
+      const isEditableTarget = !!(
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT" ||
+          target.isContentEditable ||
+          target.closest(
+            '[role="textbox"], [contenteditable="true"], input, textarea, select'
+          ))
+      );
+      if (isEditableTarget) return;
+
+      // Allow browser/system shortcuts (e.g. Ctrl/Cmd+R, Ctrl/Cmd+L, etc.)
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+      // Only handle specific teleop keys
+      const rawKey = event.key;
+      const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
+      const allowedKeys = new Set([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "w",
+        "a",
+        "s",
+        "d",
+        "q",
+        "e",
+        "o",
+        "c",
+        "Escape",
+      ]);
+      if (!allowedKeys.has(normalizedKey)) return;
+
+      event.preventDefault();
+      const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
+      if (keyboardTeleoperator && "updateKeyState" in keyboardTeleoperator) {
+        (
+          keyboardTeleoperator as {
+            updateKeyState: (key: string, pressed: boolean) => void;
+          }
+        ).updateKeyState(normalizedKey, false);
+      }
+    },
+    [teleopState.isActive]
+  );
+
+  // Register keyboard events
+  useEffect(() => {
+    if (teleopState.isActive && selectedTeleoperatorType === "keyboard") {
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+
+      return () => {
+        window.removeEventListener("keydown", handleKeyDown);
+        window.removeEventListener("keyup", handleKeyUp);
+      };
+    }
+  }, [
+    teleopState.isActive,
+    selectedTeleoperatorType,
+    handleKeyDown,
+    handleKeyUp,
+  ]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      const cleanup = async () => {
+        try {
+          if (keyboardProcessRef.current) {
+            await keyboardProcessRef.current.disconnect();
+            keyboardProcessRef.current = null;
+          }
+          if (directProcessRef.current) {
+            await directProcessRef.current.disconnect();
+            directProcessRef.current = null;
+          }
+        } catch (error) {
+          console.warn("Error during teleoperation cleanup:", error);
+        }
+      };
+      cleanup();
+    };
+  }, []);
+
+  // Memoize teleoperators array for the Recorder component
+  const memoizedTeleoperators = useMemo(() => {
+    if (!controlEnabled) return [];
+
+    // Return the active teleoperator based on selection
+    const activeTeleoperator =
+      selectedTeleoperatorType === "keyboard"
+        ? keyboardProcessRef.current?.teleoperator
+        : directProcessRef.current?.teleoperator;
+
+    return activeTeleoperator ? [activeTeleoperator] : [];
+  }, [controlEnabled, selectedTeleoperatorType]);
+
+  return (
+    <div className="space-y-6">
+      {/* Robot Movement Recorder Header */}
+      <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 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={
+                    recorderCallbacks?.isRecording ? "destructive" : "default"
+                  }
+                  size="lg"
+                  className="gap-2"
+                  disabled={!robot.isConnected || !recorderCallbacks}
+                  onClick={
+                    recorderCallbacks?.isRecording
+                      ? recorderCallbacks.stopRecording
+                      : recorderCallbacks?.startRecording
+                  }
+                >
+                  {recorderCallbacks?.isRecording ? (
+                    <>
+                      <Square className="w-5 h-5" />
+                      Stop Recording
+                    </>
+                  ) : (
+                    <>
+                      <Record className="w-5 h-5" />
+                      Start Recording
+                    </>
+                  )}
+                </Button>
+              </div>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-mono text-muted-foreground uppercase">
+                  robot:
+                </span>
+                <Badge
+                  variant="outline"
+                  className={cn(
+                    "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
+                    robot.isConnected
+                      ? "border-green-500/50 bg-green-500/20 text-green-400"
+                      : "border-red-500/50 bg-red-500/20 text-red-400"
+                  )}
+                >
+                  {robot.isConnected ? "ONLINE" : "OFFLINE"}
+                </Badge>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="p-6 space-y-6">
+          {/* Step-by-Step Recording Guide */}
+          <div className="bg-black/40 border border-white/20 rounded-lg p-6">
+            <h4 className="text-lg font-semibold text-foreground mb-4">
+              How to Record Robot Data
+            </h4>
+            <div className="space-y-4">
+              {/* Step 1 */}
+              <div className="flex items-start gap-4">
+                <div
+                  className={cn(
+                    "flex-shrink-0 w-8 h-8 border rounded-full flex items-center justify-center text-sm font-mono",
+                    currentStep > 1
+                      ? "bg-green-500/20 border-green-500/50 text-green-400" // Completed
+                      : currentStep === 1
+                      ? "bg-yellow-500/20 border-yellow-500/50 text-yellow-400" // Active
+                      : "bg-muted/20 border-muted/50 text-muted-foreground" // Inactive
+                  )}
+                >
+                  {currentStep > 1 ? <Check className="w-4 h-4" /> : "1"}
+                </div>
+                <div className="flex-1">
+                  <h5 className="font-semibold text-foreground">
+                    Enable Robot Control
+                  </h5>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    Choose how you want to control the robot during recording.
+                  </p>
+
+                  {!controlEnabled && robot.isConnected && (
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-3">
+                        <label className="text-sm text-muted-foreground min-w-0">
+                          Control Type:
+                        </label>
+                        <Select
+                          value={selectedTeleoperatorType}
+                          onValueChange={(value: "direct" | "keyboard") =>
+                            setSelectedTeleoperatorType(value)
+                          }
+                        >
+                          <SelectTrigger className="w-48 bg-black/20 border-white/10">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="direct">
+                              <div className="flex items-center gap-2">
+                                <Gamepad2 className="w-4 h-4" />
+                                Direct Control
+                              </div>
+                            </SelectItem>
+                            <SelectItem value="keyboard">
+                              <div className="flex items-center gap-2">
+                                <Keyboard className="w-4 h-4" />
+                                Keyboard Control
+                              </div>
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {selectedTeleoperatorType === "direct"
+                          ? "Programmatic control (use teleoperation page for manual sliders)"
+                          : "Move robot using keyboard keys (WASD, arrows, Q/E, O/C)"}
+                      </p>
+                    </div>
+                  )}
+
+                  <div className="mt-3">
+                    <Button
+                      variant={controlEnabled ? "destructive" : "default"}
+                      onClick={controlEnabled ? disableControl : enableControl}
+                      disabled={!robot.isConnected}
+                      className="gap-2"
+                      size="sm"
+                    >
+                      {selectedTeleoperatorType === "keyboard" ? (
+                        <Keyboard className="w-4 h-4" />
+                      ) : (
+                        <Gamepad2 className="w-4 h-4" />
+                      )}
+                      {controlEnabled
+                        ? `${selectedTeleoperatorType} Control Active`
+                        : `Enable ${selectedTeleoperatorType} Control`}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Step 2 */}
+              <div className="flex items-start gap-4">
+                <div
+                  className={cn(
+                    "flex-shrink-0 w-8 h-8 border rounded-full flex items-center justify-center text-sm font-mono",
+                    currentStep > 2
+                      ? "bg-green-500/20 border-green-500/50 text-green-400" // Completed
+                      : currentStep === 2
+                      ? "bg-yellow-500/20 border-yellow-500/50 text-yellow-400" // Active
+                      : "bg-muted/20 border-muted/50 text-muted-foreground" // Inactive
+                  )}
+                >
+                  {currentStep > 2 ? <Check className="w-4 h-4" /> : "2"}
+                </div>
+                <div>
+                  <h5
+                    className={cn(
+                      "font-semibold",
+                      controlEnabled
+                        ? "text-foreground"
+                        : "text-muted-foreground"
+                    )}
+                  >
+                    Start Recording
+                  </h5>
+                  <p className="text-sm text-muted-foreground">
+                    Click "Start Recording" to begin capturing robot movements.
+                  </p>
+                  {null}
+                </div>
+              </div>
+
+              {/* Step 3 */}
+              <div className="flex items-start gap-4">
+                <div
+                  className={cn(
+                    "flex-shrink-0 w-8 h-8 border rounded-full flex items-center justify-center text-sm font-mono",
+                    currentStep === 3
+                      ? "bg-yellow-500/20 border-yellow-500/50 text-yellow-400 animate-pulse" // Active with pulse
+                      : "bg-muted/20 border-muted/50 text-muted-foreground" // Inactive
+                  )}
+                >
+                  3
+                </div>
+                <div>
+                  <h5
+                    className={cn(
+                      "font-semibold",
+                      currentStep === 3
+                        ? "text-foreground"
+                        : "text-muted-foreground"
+                    )}
+                  >
+                    Move the Robot
+                  </h5>
+                  <p className="text-sm text-muted-foreground">
+                    {currentStep === 3 ? (
+                      <span className="text-yellow-400">
+                        🎯 Recording active! Move the robot to demonstrate your
+                        task.
+                      </span>
+                    ) : (
+                      "Move the robot manually to demonstrate the task you want to teach. Recording will capture your movements."
+                    )}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Robot Movement Recorder */}
+          <Recorder
+            teleoperators={memoizedTeleoperators}
+            robot={robot}
+            onNeedsTeleoperation={enableControl}
+            showConfigure={showConfigure}
+            onRecorderReady={setRecorderCallbacks}
+          />
+        </div>
+      </Card>
+    </div>
+  );
+}

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

@@ -36,14 +36,14 @@ const roadmapItems: RoadmapItem[] = [
     description: "Node.js CLI tools for robot control and automation scripts",
     status: "completed",
   },
-  {
-    title: "SO-100 leader arm",
-    description: "Leader arm teleoperation support for intuitive robot control",
-    status: "in_progress",
-  },
   {
     title: "record",
     description: "Record robot trajectories and sensor data to create datasets",
+    status: "completed",
+  },
+  {
+    title: "SO-100 leader arm",
+    description: "Leader arm teleoperation support for intuitive robot control",
     status: "in_progress",
   },
   {

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

@@ -22,7 +22,6 @@ 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";
@@ -196,12 +195,48 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
     };
   }, []);
 
-  // Keyboard event handlers
+  // Keyboard event handlers (guarded to not interfere with inputs/shortcuts)
   const handleKeyDown = useCallback(
     (event: KeyboardEvent) => {
       if (!teleopState.isActive || !keyboardProcessRef.current) return;
 
-      const key = event.key;
+      // Ignore when user is typing in inputs/textareas or contenteditable elements
+      const target = event.target as HTMLElement | null;
+      const isEditableTarget = !!(
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT" ||
+          target.isContentEditable ||
+          target.closest(
+            '[role="textbox"], [contenteditable="true"], input, textarea, select'
+          ))
+      );
+      if (isEditableTarget) return;
+
+      // Allow browser/system shortcuts (e.g. Ctrl/Cmd+R, Ctrl/Cmd+L, etc.)
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+      // Only handle specific teleop keys
+      const rawKey = event.key;
+      const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
+      const allowedKeys = new Set([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "w",
+        "a",
+        "s",
+        "d",
+        "q",
+        "e",
+        "o",
+        "c",
+        "Escape",
+      ]);
+      if (!allowedKeys.has(normalizedKey)) return;
+
       event.preventDefault();
 
       const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
@@ -210,7 +245,7 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           keyboardTeleoperator as {
             updateKeyState: (key: string, pressed: boolean) => void;
           }
-        ).updateKeyState(key, true);
+        ).updateKeyState(normalizedKey, true);
       }
     },
     [teleopState.isActive]
@@ -220,7 +255,43 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
     (event: KeyboardEvent) => {
       if (!teleopState.isActive || !keyboardProcessRef.current) return;
 
-      const key = event.key;
+      // Ignore when user is typing in inputs/textareas or contenteditable elements
+      const target = event.target as HTMLElement | null;
+      const isEditableTarget = !!(
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.tagName === "SELECT" ||
+          target.isContentEditable ||
+          target.closest(
+            '[role="textbox"], [contenteditable="true"], input, textarea, select'
+          ))
+      );
+      if (isEditableTarget) return;
+
+      // Allow browser/system shortcuts (e.g. Ctrl/Cmd+R, Ctrl/Cmd+L, etc.)
+      if (event.metaKey || event.ctrlKey || event.altKey) return;
+
+      // Only handle specific teleop keys
+      const rawKey = event.key;
+      const normalizedKey = rawKey.length === 1 ? rawKey.toLowerCase() : rawKey;
+      const allowedKeys = new Set([
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "w",
+        "a",
+        "s",
+        "d",
+        "q",
+        "e",
+        "o",
+        "c",
+        "Escape",
+      ]);
+      if (!allowedKeys.has(normalizedKey)) return;
+
       event.preventDefault();
 
       const keyboardTeleoperator = keyboardProcessRef.current.teleoperator;
@@ -229,7 +300,7 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           keyboardTeleoperator as {
             updateKeyState: (key: string, pressed: boolean) => void;
           }
-        ).updateKeyState(key, false);
+        ).updateKeyState(normalizedKey, false);
       }
     },
     [teleopState.isActive]
@@ -414,15 +485,6 @@ 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">
@@ -456,19 +518,37 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
                     <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>
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono text-muted-foreground uppercase">
+                      robot:
+                    </span>
+                    <Badge
+                      variant="outline"
+                      className={cn(
+                        "border-primary/50 bg-primary/20 text-primary font-mono text-xs",
+                        robot.isConnected
+                          ? "border-green-500/50 bg-green-500/20 text-green-400"
+                          : "border-red-500/50 bg-red-500/20 text-red-400"
+                      )}
+                    >
+                      {robot.isConnected ? "ONLINE" : "OFFLINE"}
+                    </Badge>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-mono text-muted-foreground uppercase">
+                      control:
+                    </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>
+                  </div>
                 </div>
               </div>
             </div>
@@ -759,13 +839,6 @@ export function TeleoperationView({ robot }: TeleoperationViewProps) {
           </div>
         </div>
       </Card>
-
-      {/* Robot Movement Recorder - Always show UI */}
-      <Recorder
-        teleoperators={memoizedTeleoperators}
-        robot={robot}
-        onNeedsTeleoperation={initializeTeleoperation}
-      />
     </>
   );
 }

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

@@ -7,23 +7,38 @@ import { Button } from "./ui/button";
 
 interface TeleoperatorEpisodesViewProps {
   teleoperatorData?: LeRobotEpisode[];
+  isRecording?: boolean;
+  refreshTick?: number;
 }
 
-export function TeleoperatorEpisodesView({ teleoperatorData }: TeleoperatorEpisodesViewProps) {
+export function TeleoperatorEpisodesView({
+  teleoperatorData,
+  isRecording,
+  refreshTick,
+}: TeleoperatorEpisodesViewProps) {
   // State to track which episodes are expanded
-  const [expandedEpisodes, setExpandedEpisodes] = useState<Record<number, boolean>>({});
-  
+  const [expandedEpisodes, setExpandedEpisodes] = useState<
+    Record<number, boolean>
+  >({});
+
+  const formatSeconds = (s: number): string => {
+    if (!Number.isFinite(s)) return String(s);
+    return s.toFixed(3);
+  };
+
   // Toggle expanded state for an episode
   const toggleEpisode = (index: number) => {
-    setExpandedEpisodes(prev => ({
+    setExpandedEpisodes((prev) => ({
       ...prev,
-      [index]: !prev[index]
+      [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="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">
@@ -31,7 +46,7 @@ export function TeleoperatorEpisodesView({ teleoperatorData }: TeleoperatorEpiso
           <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) => (
@@ -39,26 +54,37 @@ export function TeleoperatorEpisodesView({ teleoperatorData }: TeleoperatorEpiso
               {/* 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 className="flex-1 px-4 py-2 font-mono">
+                  {formatSeconds(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} />
+                <TeleoperatorFramesView
+                  frames={episode.frames}
+                  isRecording={isRecording}
+                  refreshTick={refreshTick}
+                />
               )}
             </div>
           ))
         ) : (
           <div className="flex flex-row border-t border-gray-700">
-            <div 
-              className="flex-1 px-4 py-4 text-center text-muted-foreground"
-            >
+            <div className="flex-1 px-4 py-4 text-center text-muted-foreground">
               No episodes recorded yet. Click "Start Recording" to begin.
             </div>
           </div>

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

@@ -1,21 +1,28 @@
 "use client";
 
+import React, { memo, useMemo } from "react";
 import { NonIndexedLeRobotDatasetRow } from "@lerobot/web";
 import { TeleoperatorJointGraph } from "./teleoperator-joint-graph";
 
 interface TeleoperatorFramesViewProps {
   frames: NonIndexedLeRobotDatasetRow[];
+  isRecording?: boolean;
+  refreshTick?: number;
 }
 
-export function TeleoperatorFramesView({ frames }: TeleoperatorFramesViewProps) {
+export const TeleoperatorFramesView = memo(function TeleoperatorFramesView({
+  frames,
+  isRecording,
+  refreshTick,
+}: TeleoperatorFramesViewProps) {
   // Joint names in the order they appear in the arrays
   const jointNames = [
-    "shoulder_pan", 
+    "shoulder_pan",
     "shoulder_lift",
     "elbow_flex",
     "wrist_flex",
     "wrist_roll",
-    "gripper"
+    "gripper",
   ];
 
   // Helper function to format an object as a column of key-value pairs with joint names
@@ -24,55 +31,77 @@ export function TeleoperatorFramesView({ frames }: TeleoperatorFramesViewProps)
       .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}`;
+        const jointName =
+          !isNaN(index) && index < jointNames.length ? jointNames[index] : key;
+        const formatted = Number.isFinite(value)
+          ? value.toFixed(2)
+          : String(value);
+        return `${jointName}: ${formatted}`;
       })
-      .join('\n');
+      .join("\n");
   };
-  
+
+  const visibleFrames = useMemo(
+    () => frames || ([] as NonIndexedLeRobotDatasetRow[]),
+    [frames, refreshTick]
+  );
+
   return (
     <div className="ml-8 mr-4 mb-2">
       {/* Joint visualization graph */}
-      <TeleoperatorJointGraph frames={frames} />
-      
+      <TeleoperatorJointGraph
+        frames={visibleFrames}
+        refreshTick={refreshTick}
+        isRecording={isRecording}
+      />
+
       {/* 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>
+        <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>
-            ))}
-          </tbody>
-        </table>
-      </div>
+            </thead>
+
+            {/* Frame rows */}
+            <tbody className="max-h-60 overflow-y-auto">
+              {visibleFrames.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">
+                      {Number.isFinite(frame.timestamp)
+                        ? frame.timestamp.toFixed(3)
+                        : String(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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { memo, useMemo } from "react";
 import {
   LineChart,
   Line,
@@ -7,15 +7,21 @@ import {
   CartesianGrid,
   Tooltip,
   Legend,
-  ResponsiveContainer
+  ResponsiveContainer,
 } from "recharts";
 import { NonIndexedLeRobotDatasetRow } from "@lerobot/web";
 
 interface TeleoperatorJointGraphProps {
   frames: NonIndexedLeRobotDatasetRow[];
+  refreshTick?: number;
 }
 
-export function TeleoperatorJointGraph({ frames }: TeleoperatorJointGraphProps) {
+const MAX_POINTS = 5000;
+
+export const TeleoperatorJointGraph = memo(function TeleoperatorJointGraph({
+  frames,
+  refreshTick,
+}: TeleoperatorJointGraphProps) {
   // Skip rendering if no frames
   if (!frames || frames.length === 0) {
     return null;
@@ -23,100 +29,129 @@ export function TeleoperatorJointGraph({ frames }: TeleoperatorJointGraphProps)
 
   // Use hardcoded joint names that match the LeRobot dataset format
   const jointNames = [
-    "shoulder_pan", 
+    "shoulder_pan",
     "shoulder_lift",
     "elbow_flex",
     "wrist_flex",
     "wrist_roll",
-    "gripper"
+    "gripper",
   ];
-  
+
   // Generate a color palette for the joints
   const colors = [
-    "#8884d8", "#82ca9d", "#ffc658", "#ff8042", "#0088fe", "#00C49F", 
-    "#FFBB28", "#FF8042", "#a4de6c", "#d0ed57"
+    "#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];
+  const chartData = useMemo(
+    () =>
+      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];
+
+        // 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;
-  });
-  
+
+        return dataPoint;
+      }),
+    [frames, refreshTick]
+  );
+
+  const limitedData = useMemo(() => {
+    if (!chartData) return [] as typeof chartData;
+    const len = chartData.length;
+    if (len <= MAX_POINTS) return chartData;
+    return chartData.slice(len - MAX_POINTS, len);
+  }, [chartData]);
+
   // Create lines for each joint
-  const linesToRender = jointNames.flatMap(jointName => [
+  const linesToRender = jointNames.flatMap((jointName) => [
     {
       key: `action_${jointName}`,
       dataKey: `action_${jointName}`,
       name: `Action: ${jointName}`,
-      isDotted: true
+      isDotted: true,
     },
     {
       key: `state_${jointName}`,
       dataKey: `state_${jointName}`,
       name: `State: ${jointName}`,
-      isDotted: false
-    }
+      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>
+      <h3 className="text-sm font-medium text-gray-300 mb-2">
+        Joint Positions Over Time
+      </h3>
       <ResponsiveContainer width="100%" height={300}>
         <LineChart
-          data={chartData}
+          data={limitedData}
           margin={{
             top: 5,
             right: 30,
             left: 20,
-            bottom: 5
+            bottom: 5,
           }}
         >
           <CartesianGrid strokeDasharray="3 3" stroke="#444" />
-          <XAxis 
-            dataKey="name" 
-            label={{ value: 'Frame Index', position: 'insideBottomRight', offset: -10 }}
-            stroke="#aaa" 
+          <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' }}
+          <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 jointName = lineConfig.dataKey.replace(
+              /^(action|state)_/,
+              ""
+            );
             const jointIndex = jointNames.indexOf(jointName);
-            const colorIndex = jointIndex >= 0 ? jointIndex : index % colors.length;
-            
+            const colorIndex =
+              jointIndex >= 0 ? jointIndex : index % colors.length;
+
             return (
               <Line
                 key={lineConfig.key}
@@ -134,4 +169,4 @@ export function TeleoperatorJointGraph({ frames }: TeleoperatorJointGraphProps)
       </ResponsiveContainer>
     </div>
   );
-}
+});

examples/cyberpunk-standalone/src/utils/dataset-uploader.ts

@@ -0,0 +1,243 @@
+import * as hub from "@huggingface/hub";
+import { S3Client, HeadBucketCommand } from "@aws-sdk/client-s3";
+import { Upload } from "@aws-sdk/lib-storage";
+
+type FileArray = Array<{ path: string; content: Blob | Uint8Array }>;
+
+/**
+ * Uploads a leRobot dataset to Hugging Face
+ *
+ * @param files Array of files to upload
+ * @param accessToken Hugging Face access token
+ * @param repoName Repository name (will be created if it doesn't exist)
+ * @param privateRepo Whether the repo should be private (default: false)
+ * @returns EventTarget that emits 'repoCreated', 'progress', 'finished', and 'error' events
+ */
+export async function uploadToHuggingFace(
+  files: FileArray,
+  accessToken: string,
+  repoName: string,
+  privateRepo: boolean = false
+): Promise<EventTarget> {
+  const eventTarget = new EventTarget();
+
+  // Run upload asynchronously so UI can subscribe to events immediately
+  (async () => {
+    try {
+      // Get username from token
+      const { name: username } = await hub.whoAmI({ accessToken });
+
+      const repoDesignation = {
+        name: `${username}/${repoName}`,
+        type: "dataset" as const,
+      };
+
+      // Try to create repo; if it already exists (409), continue and upload
+      try {
+        await hub.createRepo({
+          repo: repoDesignation,
+          accessToken,
+          license: "mit",
+          private: privateRepo,
+        });
+        eventTarget.dispatchEvent(
+          new CustomEvent("repoCreated", { detail: repoDesignation })
+        );
+      } catch (error: any) {
+        const message = (error && (error.message || `${error}`)) as string;
+        const isConflict =
+          message?.includes("409") ||
+          message?.toLowerCase()?.includes("already created") ||
+          message?.toLowerCase()?.includes("already exists");
+        if (!isConflict) {
+          eventTarget.dispatchEvent(new CustomEvent("error", { detail: error }));
+          throw error;
+        }
+        // Repo exists: proceed as created
+        eventTarget.dispatchEvent(
+          new CustomEvent("repoCreated", { detail: repoDesignation })
+        );
+      }
+
+      // Upload files to v2.1 branch, fallback to main if branch doesn't exist
+      let uploadedBranch = "v2.1";
+      try {
+        await uploadFilesWithProgress(
+          files,
+          accessToken,
+          repoDesignation,
+          uploadedBranch,
+          eventTarget
+        );
+      } catch (error: any) {
+        const message = (error && (error.message || `${error}`)) as string;
+        const invalidRev = message?.toLowerCase()?.includes("invalid rev id");
+        if (invalidRev) {
+          console.warn(
+            "v2.1 branch not available. Falling back to main branch."
+          );
+          uploadedBranch = "main";
+          await uploadFilesWithProgress(
+            files,
+            accessToken,
+            repoDesignation,
+            uploadedBranch,
+            eventTarget
+          );
+        } else {
+          throw error;
+        }
+      }
+
+      console.log(
+        `Successfully uploaded dataset to ${username}/${repoName} (${uploadedBranch})`
+      );
+      eventTarget.dispatchEvent(
+        new CustomEvent("finished", { detail: { branch: uploadedBranch } })
+      );
+    } catch (error) {
+      console.error("Error uploading to Hugging Face:", error);
+      eventTarget.dispatchEvent(new CustomEvent("error", { detail: error }));
+    }
+  })();
+
+  return eventTarget;
+}
+
+/**
+ * Uploads a leRobot dataset to Amazon S3
+ *
+ * @param files Array of files to upload
+ * @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 for uploaded files
+ * @returns EventTarget that emits 'bucketVerified', 'progress', 'finished', and 'error' events
+ */
+export async function uploadToS3(
+  files: FileArray,
+  bucketName: string,
+  accessKeyId: string,
+  secretAccessKey: string,
+  region: string = "us-east-1",
+  prefix: string = ""
+): Promise<EventTarget> {
+  const eventTarget = new EventTarget();
+
+  // Run upload asynchronously
+  (async () => {
+    try {
+      const s3Client = new S3Client({
+        region,
+        credentials: {
+          accessKeyId,
+          secretAccessKey,
+        },
+      });
+
+      // Verify bucket exists
+      try {
+        await s3Client.send(
+          new HeadBucketCommand({ Bucket: bucketName })
+        );
+        eventTarget.dispatchEvent(
+          new CustomEvent("bucketVerified", {
+            detail: { bucketName, region },
+          })
+        );
+      } catch (error: any) {
+        const message = error?.message || `${error}`;
+        if (message.includes("404") || message.includes("NotFound")) {
+          throw new Error(
+            `S3 bucket "${bucketName}" not found in region "${region}"`
+          );
+        }
+        throw error;
+      }
+
+      // Upload files
+      for (const file of files) {
+        const key = prefix ? `${prefix}/${file.path}` : file.path;
+
+        const upload = new Upload({
+          client: s3Client,
+          params: {
+            Bucket: bucketName,
+            Key: key,
+            Body:
+              file.content instanceof Blob
+                ? Buffer.from(await file.content.arrayBuffer())
+                : Buffer.from(file.content),
+          },
+        });
+
+        upload.on("httpUploadProgress", (progress) => {
+          eventTarget.dispatchEvent(
+            new CustomEvent("progress", { detail: { file: file.path, progress } })
+          );
+        });
+
+        await upload.done();
+        console.log(`Uploaded ${key}`);
+      }
+
+      console.log(
+        `Successfully uploaded dataset to S3 bucket: ${bucketName}${prefix ? `/${prefix}` : ""}`
+      );
+      eventTarget.dispatchEvent(
+        new CustomEvent("finished", {
+          detail: { bucketName, prefix, filesCount: files.length },
+        })
+      );
+    } catch (error) {
+      console.error("Error uploading to S3:", error);
+      eventTarget.dispatchEvent(new CustomEvent("error", { detail: error }));
+    }
+  })();
+
+  return eventTarget;
+}
+
+/**
+ * Helper function to upload files to Hugging Face with progress tracking
+ */
+async function uploadFilesWithProgress(
+  files: FileArray,
+  accessToken: string,
+  repoDesignation: { name: string; type: "dataset" },
+  branch: string,
+  eventTarget: EventTarget
+): Promise<void> {
+  const referenceId = `lerobot-upload-${Date.now()}`;
+
+  // Upload each file
+  for (const file of files) {
+    let blob: Blob;
+
+    if (file.content instanceof Blob) {
+      blob = file.content;
+    } else {
+      blob = new Blob([file.content]);
+    }
+
+    await hub.uploadFile({
+      repo: repoDesignation,
+      credentials: { accessToken },
+      file: {
+        content: blob,
+        path: file.path,
+      },
+      revision: branch,
+    });
+
+    eventTarget.dispatchEvent(
+      new CustomEvent("progress", {
+        detail: { file: file.path, referenceId },
+      })
+    );
+
+    console.log(`Uploaded ${file.path}`);
+  }
+}
+

package.json

@@ -1,7 +1,7 @@
 {
   "name": "lerobot",
   "version": "0.0.0",
-  "description": "State-of-the-art AI for real-world robotics in JS",
+  "description": "Control your robots with JS, inspired by LeRobot (python)",
   "type": "module",
   "workspaces": [
     "packages/*"

packages/web/README.md

@@ -20,7 +20,13 @@ yarn add @lerobot/web
 ## Quick Start
 
 ```typescript
-import { findPort, releaseMotors, calibrate, teleoperate } from "@lerobot/web";
+import {
+  findPort,
+  releaseMotors,
+  calibrate,
+  teleoperate,
+  record,
+} from "@lerobot/web";
 
 // 1. find available robot ports (shows browser port dialog)
 console.log("🔍 finding available robot ports...");
@@ -387,72 +393,68 @@ await releaseMotors(robot, [1, 2, 3]);
 
 ---
 
-## Dataset Recording and Export
+### `record(config): Promise<RecordProcess>`
 
-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.
+Records robot motor positions and teleoperation data using a clean function API that matches the patterns established by `calibrate()` and `teleoperate()`.
 
 ```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();
+import { teleoperate, record } from "@lerobot/web";
 
-// ... 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_...',
+// 1. Create teleoperation first
+const teleoperationProcess = await teleoperate({
+  robot: connectedRobot,
+  teleop: { type: "keyboard" },
+  calibrationData: calibrationData,
 });
 
-// 3. Upload to S3
-const s3Uploader = await recorder.exportForLeRobot('s3', {
-  bucketName: 'my-bucket',
-  accessKeyId: 'AKIA...',
-  secretAccessKey: '...',
-  region: 'us-east-1',
+// 2. Create recording with teleoperator
+const recordProcess = await record({
+  teleoperator: teleoperationProcess.teleoperator,
+  videoStreams: {
+    main: mainCameraStream,
+  },
+  robotType: "so100",
+  options: {
+    fps: 30,
+    taskDescription: "Pick and place task",
+  },
 });
-```
 
-#### Key Features
+// 3. Start both processes
+teleoperationProcess.start();
+recordProcess.start();
 
-- **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
+// 4. Manage recording during operation
+recordProcess.nextEpisode(); // Start new episode if needed
 
-> **Note:** The dataset statistical data currently generated is incorrect and needs to be updated in a future release.
+// 5. Stop recording and export
+const robotData = await recordProcess.stop();
+await recordProcess.exportForLeRobot("zip-download");
+```
 
-#### Dataset Format
+#### Options
 
-The exported dataset follows the LeRobot format with this structure:
+- `config: RecordConfig`
+  - `teleoperator: WebTeleoperator` - The teleoperator to record from
+  - `videoStreams?: { [name: string]: MediaStream }` - Optional camera streams (e.g., `{ main: stream1, wrist: stream2 }`)
+  - `robotType?: string` - Robot metadata (e.g., "so100")
+  - `options?: RecordOptions` - Optional recording configuration:
+    - `fps?: number` - Target frames per second (default: 30)
+    - `taskDescription?: string` - Task description
+    - `onStateUpdate?: (state: RecordingState) => void` - Recording state changes
+
+#### Returns: `RecordProcess`
+
+- `start(): void` - Start recording
+- `stop(): Promise<RobotRecordingData>` - Stop recording and get data
+- `getState(): RecordingState` - Current recording state
+- `getEpisodeCount(): number` - Get total episodes
+- `nextEpisode(): Promise<number>` - Start new episode
+- `clearEpisodes(): void` - Delete all episodes
+- `addCamera(name: string, stream: MediaStream): void` - Add camera dynamically
+- `exportForLeRobot(format?: "blobs" | "zip" | "zip-download"): Promise<any>` - Export dataset
 
-```
-/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
 

packages/web/package.json

@@ -68,9 +68,6 @@
     "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/hf_uploader.ts

@@ -1,86 +0,0 @@
-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

@@ -9,6 +9,7 @@ export { calibrate } from "./calibrate.js";
 export { teleoperate } from "./teleoperate.js";
 export { findPort } from "./find_port.js";
 export { releaseMotors } from "./release_motors.js";
+export { record } from "./record.js";
 
 // Browser support utilities
 export {
@@ -51,6 +52,14 @@ export type {
   KeyboardControl,
 } from "./types/robot-config.js";
 
+export type {
+  RecordConfig,
+  RecordProcess,
+  RecordingState,
+  RecordingData,
+  RobotRecordingData,
+} from "./types/recording.js";
+
 // Utilities (advanced users)
 export { WebSerialPortWrapper } from "./utils/serial-port-wrapper.js";
 export {
@@ -64,5 +73,4 @@ export {
 export { KEYBOARD_TELEOPERATOR_DEFAULTS } from "./teleoperators/index.js";
 
 // Record
-export { LeRobotDatasetRecorder } from "./record.js";
-export { LeRobotHFUploader } from "./hf_uploader.js";
+export { LeRobotDatasetRecorder, LeRobotEpisode } from "./record.js";

packages/web/src/record.ts

@@ -3,12 +3,7 @@ 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 {
@@ -338,12 +333,18 @@ export class LeRobotDatasetRecorder {
   mediaRecorders: { [key: string]: MediaRecorder };
   videoChunks: { [key: string]: Blob[] };
   videoBlobs: { [key: string]: Blob };
+  private videoBlobsByEpisode: {
+    [episodeIndex: number]: { [key: string]: Blob };
+  };
+  private videoMimeByKey: { [key: string]: { mime: string; ext: string } };
   teleoperatorData: LeRobotEpisode[];
   private _isRecording: boolean;
   private episodeIndex: number = 0;
   private taskIndex: number = 0;
+  private currentVideoSegmentEpisodeIndex: number | null = null;
   fps: number;
   taskDescription: string;
+  private robotLabel?: string;
 
   /**
    * Ensures BlobPart compatibility across environments by converting Uint8Array
@@ -382,17 +383,45 @@ export class LeRobotDatasetRecorder {
     this.mediaRecorders = {};
     this.videoChunks = {};
     this.videoBlobs = {};
+    this.videoBlobsByEpisode = {};
     this.videoStreams = {};
+    this.videoMimeByKey = {};
     this.teleoperatorData = [];
     this._isRecording = false;
     this.fps = fps;
     this.taskDescription = taskDescription;
+    this.robotLabel = undefined;
 
     for (const [key, stream] of Object.entries(videoStreams)) {
       this.addVideoStream(key, stream);
     }
   }
 
+  setRobotLabel(label: string) {
+    this.robotLabel = label;
+  }
+
+  private static getSupportedRecorderType(): { mime: string; ext: string } {
+    // Prefer H.264 MP4 for viewer compatibility; fall back to WebM
+    const candidates: { mime: string; ext: string }[] = [
+      { mime: "video/mp4;codecs=h264", ext: "mp4" },
+      { mime: "video/mp4", ext: "mp4" },
+      { mime: "video/webm;codecs=vp9", ext: "webm" },
+      { mime: "video/webm;codecs=vp8", ext: "webm" },
+      { mime: "video/webm", ext: "webm" },
+    ];
+    for (const c of candidates) {
+      if (
+        (window as any).MediaRecorder &&
+        MediaRecorder.isTypeSupported &&
+        MediaRecorder.isTypeSupported(c.mime)
+      ) {
+        return c;
+      }
+    }
+    return { mime: "video/webm", ext: "webm" };
+  }
+
   get isRecording(): boolean {
     return this._isRecording;
   }
@@ -407,21 +436,18 @@ export class LeRobotDatasetRecorder {
    * @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
+    // Initialize chunks storage
     this.videoChunks[key] = [];
+
+    // Pre-warm container selection for consistent extension even if added before start
+    const { mime, ext } = LeRobotDatasetRecorder.getSupportedRecorderType();
+    this.videoMimeByKey[key] = { mime, ext };
   }
 
   /**
@@ -466,7 +492,6 @@ export class LeRobotDatasetRecorder {
    * Starts recording for all teleoperators and video streams
    */
   startRecording() {
-    console.log("Starting recording");
     if (this._isRecording) {
       console.warn("Recording already in progress");
       return;
@@ -474,19 +499,26 @@ export class LeRobotDatasetRecorder {
 
     this._isRecording = true;
 
-    // add a new episode
+    // Always start a brand new episode using the next available index
+    this.episodeIndex = this.teleoperatorData.length;
     this.teleoperatorData.push(new LeRobotEpisode());
+    this.currentVideoSegmentEpisodeIndex = this.episodeIndex;
 
     // 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",
-      });
+      // Pick a supported mime/container pair per browser
+      const supported =
+        this.videoMimeByKey[key] ||
+        LeRobotDatasetRecorder.getSupportedRecorderType();
+      const { mime, ext } = supported;
+      this.videoMimeByKey[key] = { mime, ext };
+
+      // Reset chunks for a clean segment start
+      this.videoChunks[key] = [];
+      const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
 
       // 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);
         }
@@ -495,8 +527,6 @@ export class LeRobotDatasetRecorder {
       // 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}`);
     });
   }
 
@@ -560,8 +590,17 @@ export class LeRobotDatasetRecorder {
           recorder.onstop = () => {
             // Combine all chunks into a single blob
             const chunks = this.videoChunks[key] || [];
-            const blob = new Blob(chunks, { type: "video/mp4" });
+            const mime = this.videoMimeByKey[key]?.mime || "video/webm";
+            const blob = new Blob(chunks, { type: mime });
             this.videoBlobs[key] = blob;
+            const segmentEpisodeIndex =
+              this.currentVideoSegmentEpisodeIndex ?? this.episodeIndex;
+            if (!this.videoBlobsByEpisode[segmentEpisodeIndex]) {
+              this.videoBlobsByEpisode[segmentEpisodeIndex] = {} as any;
+            }
+            this.videoBlobsByEpisode[segmentEpisodeIndex][key] = blob;
+            // Prepare for any subsequent recording
+            this.videoChunks[key] = [];
             resolve();
           };
 
@@ -579,12 +618,95 @@ export class LeRobotDatasetRecorder {
     };
   }
 
+  /**
+   * Finalizes the current video segment and immediately starts a new one
+   * while continuing the recording session. Also advances to the next
+   * episode and begins collecting frames under the new episode index.
+   *
+   * @returns The new episode index
+   */
+  async nextEpisodeSegment(): Promise<number> {
+    if (!this._isRecording) {
+      console.warn("nextEpisodeSegment() called while not recording");
+      // Ensure episode index points to last episode if any
+      this.episodeIndex = Math.max(0, this.teleoperatorData.length - 1);
+      return this.episodeIndex;
+    }
+
+    const oldSegmentEpisodeIndex =
+      this.currentVideoSegmentEpisodeIndex ?? this.episodeIndex;
+
+    // Stop current media recorders and persist the segment blobs under the old episode index
+    const stopPromises = Object.entries(this.mediaRecorders).map(
+      ([key, recorder]) => {
+        return new Promise<void>((resolve) => {
+          if (recorder.state === "inactive") {
+            resolve();
+            return;
+          }
+          recorder.onstop = () => {
+            const chunks = this.videoChunks[key] || [];
+            const mime = this.videoMimeByKey[key]?.mime || "video/webm";
+            const blob = new Blob(chunks, { type: mime });
+            if (!this.videoBlobsByEpisode[oldSegmentEpisodeIndex]) {
+              this.videoBlobsByEpisode[oldSegmentEpisodeIndex] = {} as any;
+            }
+            this.videoBlobsByEpisode[oldSegmentEpisodeIndex][key] = blob;
+            // Reset chunks for the next segment
+            this.videoChunks[key] = [];
+            resolve();
+          };
+          recorder.stop();
+        });
+      }
+    );
+
+    await Promise.all(stopPromises);
+
+    // Advance to the next episode
+    const newEpisodeIndex = this.teleoperatorData.length;
+    this.episodeIndex = newEpisodeIndex;
+    this.teleoperatorData.push(new LeRobotEpisode());
+
+    // Start new media recorders for the next segment
+    Object.entries(this.videoStreams).forEach(([key, stream]) => {
+      const supported =
+        this.videoMimeByKey[key] ||
+        LeRobotDatasetRecorder.getSupportedRecorderType();
+      const { mime, ext } = supported;
+      this.videoMimeByKey[key] = { mime, ext };
+
+      // Ensure a fresh chunk buffer
+      this.videoChunks[key] = [];
+      const mediaRecorder = new MediaRecorder(stream, { mimeType: mime });
+      mediaRecorder.ondataavailable = (event) => {
+        if (event.data && event.data.size > 0) {
+          this.videoChunks[key].push(event.data);
+        }
+      };
+      this.mediaRecorders[key] = mediaRecorder;
+      mediaRecorder.start(1000);
+    });
+
+    // Point subsequent stop() to the new episode index
+    this.currentVideoSegmentEpisodeIndex = newEpisodeIndex;
+
+    return newEpisodeIndex;
+  }
+
   /**
    * Clears the teleoperator data and video blobs
    */
   clearRecording() {
     this.teleoperatorData = [];
     this.videoBlobs = {};
+    this.videoBlobsByEpisode = {} as any;
+    // Reset video chunk buffers so future segments don't include cleared data
+    for (const key of Object.keys(this.videoChunks)) {
+      this.videoChunks[key] = [];
+    }
+    this.episodeIndex = 0;
+    this.currentVideoSegmentEpisodeIndex = null;
   }
 
   /**
@@ -939,68 +1061,17 @@ export class LeRobotDatasetRecorder {
    * 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,
-    });
+  // Deprecated for v2.1 exporter; left for backwards-compat APIs
+  async generateMetadata(_data: any[]): Promise<any> {
+    return {};
   }
 
   /**
    * 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);
+  async getStatistics(_data: any[]): Promise<any> {
+    return {};
   }
 
   /**
@@ -1057,299 +1128,8 @@ export class LeRobotDatasetRecorder {
    * 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/parquet-wasm@0.6.1/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);
+  async getEpisodeStatistics(_data: any[]): Promise<Uint8Array> {
+    return new Uint8Array();
   }
 
   generateREADME(metaInfo: string) {
@@ -1363,59 +1143,236 @@ export class LeRobotDatasetRecorder {
    * @private
    */
   async _exportForLeRobotBlobs() {
-    const teleoperatorDataJson = (await this.exportEpisodes("json")) as any[];
+    const regularizedEpisodes = (await this.exportEpisodes("json")) as any[];
+
+    // Build episodes parquet files under data/chunk-000/episode_<id>.parquet
     const parquetEpisodeDataFiles = await this._exportEpisodesToBlob(
-      teleoperatorDataJson
+      regularizedEpisodes
     );
-    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
+
+    // Rewrite parquet file paths to v2.1 layout with chunk folder
+    const rewrittenParquet = parquetEpisodeDataFiles.map((file, idx) => {
+      return {
+        path: `data/chunk-000/episode_${idx
+          .toString()
+          .padStart(6, "0")}.parquet`,
+        content: file.content,
+      };
+    });
+
+    // Videos: videos/chunk-000/observation.images.<camera>/episode_<id>.<ext>
+    const blobArray: { path: string; content: Blob }[] = [...rewrittenParquet];
+
+    const allEpisodeIndices = regularizedEpisodes.map((_: any, i: number) => i);
+    const cameraKeySet = new Set<string>();
+    const episodesVideoMap: { [ep: number]: { [cam: string]: string } } = {};
+
+    for (const epIdx of allEpisodeIndices) {
+      const byCam = this.videoBlobsByEpisode[epIdx] || {};
+      episodesVideoMap[epIdx] = {};
+      for (const [key, blob] of Object.entries(byCam)) {
+        const ext = this.videoMimeByKey[key]?.ext || "mp4";
+        const episodeId = epIdx.toString().padStart(6, "0");
+        const path = `videos/chunk-000/observation.images.${key}/episode_${episodeId}.${ext}`;
+        cameraKeySet.add(key);
+        episodesVideoMap[epIdx][key] = path;
+        blobArray.push({ path, content: blob });
+      }
+    }
+
+    // info.json (v2.1)
+    const cameras = Array.from(cameraKeySet);
+    const numEpisodes = regularizedEpisodes.length;
+    const totalFrames = regularizedEpisodes.reduce(
+      (sum: number, ep: any) => sum + ep.frames.length,
+      0
     );
-    const readme = this.generateREADME(JSON.stringify(metadata));
+    // Determine a default video extension for video_path pattern
+    let defaultVideoExt = "mp4";
+    if (cameras.length > 0) {
+      const firstKey = cameras[0];
+      const ext = this.videoMimeByKey[firstKey]?.ext;
+      if (ext) defaultVideoExt = ext;
+    }
+
+    // Build features object
+    const features: Record<string, any> = {
+      action: {
+        dtype: "float32",
+        shape: [6],
+        names: [
+          "main_shoulder_pan",
+          "main_shoulder_lift",
+          "main_elbow_flex",
+          "main_wrist_flex",
+          "main_wrist_roll",
+          "main_gripper",
+        ],
+      },
+      "observation.state": {
+        dtype: "float32",
+        shape: [6],
+        names: [
+          "main_shoulder_pan",
+          "main_shoulder_lift",
+          "main_elbow_flex",
+          "main_wrist_flex",
+          "main_wrist_roll",
+          "main_gripper",
+        ],
+      },
+      timestamp: { dtype: "float32", shape: [1], names: null },
+      frame_index: { dtype: "int64", shape: [1], names: null },
+      episode_index: { dtype: "int64", shape: [1], names: null },
+      index: { dtype: "int64", shape: [1], names: null },
+      task_index: { dtype: "int64", shape: [1], names: null },
+    };
+    for (const cam of cameras) {
+      // Map mime to codec
+      const mime = this.videoMimeByKey[cam]?.mime || "video/mp4";
+      let codec = "avc1";
+      if (mime.includes("vp9")) codec = "vp9";
+      else if (mime.includes("vp8")) codec = "vp8";
+      features[`observation.images.${cam}`] = {
+        dtype: "video",
+        shape: [480, 640, 3],
+        names: ["height", "width", "channels"],
+        info: {
+          "video.fps": this.fps,
+          "video.height": 480,
+          "video.width": 640,
+          "video.channels": 3,
+          "video.codec": codec,
+          "video.pix_fmt": "yuv420p",
+          "video.is_depth_map": false,
+          has_audio: false,
+        },
+      };
+    }
+
+    const infoJson = {
+      version: "2.1",
+      // Compatibility fields consumed by visualizers
+      total_episodes: numEpisodes,
+      total_frames: totalFrames,
+      fps: this.fps,
+      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}.${defaultVideoExt}`,
+      features,
+      // Extra descriptive fields
+      name: `lerobot_dataset_${new Date().toISOString().slice(0, 10)}`,
+      robot: this.robotLabel || "unknown",
+      cameras,
+      action_space: "joint_position",
+      frame_rate: this.fps,
+      num_episodes: numEpisodes,
+      created_by: "lerobot.js",
+      created_at: new Date().toISOString(),
+    } as any;
+
+    // episodes.jsonl
+    const episodesJsonlLines: string[] = [];
+    for (let epIdx = 0; epIdx < numEpisodes; epIdx++) {
+      const episodeId = epIdx.toString().padStart(6, "0");
+      const length = regularizedEpisodes[epIdx]?.frames.length || 0;
+      const videos: any = {};
+      Object.entries(episodesVideoMap[epIdx] || {}).forEach(([cam, path]) => {
+        videos[cam] = path;
+      });
+      const row = {
+        episode_id: episodeId,
+        task: this.taskDescription || "default",
+        length,
+        videos,
+      };
+      episodesJsonlLines.push(JSON.stringify(row));
+    }
 
-    // Create the blob array with proper paths
-    const blobArray = [
-      ...parquetEpisodeDataFiles,
+    // tasks.jsonl (single task)
+    const tasksJsonl = JSON.stringify({
+      task: this.taskDescription || "default",
+      description: this.taskDescription || "default",
+    });
+
+    // stats.json (minimal)
+    const lengths = regularizedEpisodes.map((ep: any) => ep.frames.length);
+    const epMin = lengths.length ? Math.min(...lengths) : 0;
+    const epMax = lengths.length ? Math.max(...lengths) : 0;
+    const epMean = lengths.length
+      ? lengths.reduce((a, b) => a + b, 0) / lengths.length
+      : 0;
+    const statsJson = {
+      total_frames: totalFrames,
+      episode_lengths: { min: epMin, max: epMax, mean: Math.round(epMean) },
+    } as any;
+
+    const readme = this.generateREADME(JSON.stringify(infoJson));
+
+    blobArray.push(
       {
         path: "meta/info.json",
-        content: new Blob([JSON.stringify(metadata, null, 2)], {
+        content: new Blob([JSON.stringify(infoJson, null, 2)], {
           type: "application/json",
         }),
       },
       {
-        path: "meta/stats.json",
-        content: new Blob([JSON.stringify(statistics, null, 2)], {
-          type: "application/json",
+        path: "meta/episodes.jsonl",
+        content: new Blob([episodesJsonlLines.join("\n") + "\n"], {
+          type: "application/jsonlines",
         }),
       },
       {
-        path: "meta/tasks.parquet",
-        content: new Blob([
-          LeRobotDatasetRecorder.toArrayBuffer(tasksParquet as Uint8Array),
-        ]),
+        path: "meta/tasks.jsonl",
+        content: new Blob([tasksJsonl + "\n"], {
+          type: "application/jsonlines",
+        }),
       },
       {
-        path: "meta/episodes/chunk-000/file-000.parquet",
-        content: new Blob([
-          LeRobotDatasetRecorder.toArrayBuffer(episodesParquet as Uint8Array),
-        ]),
+        path: "meta/stats.json",
+        content: new Blob([JSON.stringify(statsJson, null, 2)], {
+          type: "application/json",
+        }),
       },
       {
         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,
-      });
+    // episodes_stats.jsonl (v2.1)
+    const episodesStatsLines: string[] = [];
+    for (let epIdx = 0; epIdx < numEpisodes; epIdx++) {
+      const episodeId = epIdx.toString().padStart(6, "0");
+      const length = regularizedEpisodes[epIdx]?.frames.length || 0;
+      const timestamps = (regularizedEpisodes[epIdx]?.frames || []).map(
+        (f: any) => f.timestamp
+      );
+      const fromTs = timestamps.length ? Math.min(...timestamps) : 0;
+      const toTs = timestamps.length ? Math.max(...timestamps) : 0;
+
+      const row: any = {
+        episode_id: episodeId,
+        "data/chunk_index": 0,
+        "data/file": `data/chunk-000/episode_${episodeId}.parquet`,
+        length,
+      };
+      // add per-camera video fields
+      const map = episodesVideoMap[epIdx] || {};
+      for (const [cam, path] of Object.entries(map)) {
+        row[`videos/observation.images.${cam}/chunk_index`] = 0;
+        row[`videos/observation.images.${cam}/file`] = path;
+        row[`videos/observation.images.${cam}/from_timestamp`] = fromTs;
+        row[`videos/observation.images.${cam}/to_timestamp`] = toTs;
+      }
+      episodesStatsLines.push(JSON.stringify(row));
     }
+    blobArray.push({
+      path: "meta/episodes_stats.jsonl",
+      content: new Blob([episodesStatsLines.join("\n") + "\n"], {
+        type: "application/jsonlines",
+      }),
+    });
 
     return blobArray;
   }
@@ -1452,130 +1409,15 @@ export class LeRobotDatasetRecorder {
     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
+   * @param format The export format - 'blobs', 'zip', or 'zip-download'
+   * @param options Additional options (currently unused)
+   * @returns The exported data in the requested format
    */
   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;
-    }
+    format: "blobs" | "zip" | "zip-download" = "zip-download"
   ) {
     switch (format) {
       case "blobs":
@@ -1584,49 +1426,6 @@ export class LeRobotDatasetRecorder {
       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
@@ -1654,3 +1453,185 @@ export class LeRobotDatasetRecorder {
     }
   }
 }
+
+// Simple record() function API - wraps LeRobotDatasetRecorder
+import type {
+  RecordConfig,
+  RecordProcess,
+  RecordingState,
+  RecordingData,
+  RobotRecordingData,
+} from "./types/recording.js";
+
+/**
+ * Simple recording function that follows LeRobot.js conventions
+ *
+ * Records robot motor positions and teleoperation data using a clean function API
+ * that matches the patterns established by calibrate() and teleoperate().
+ *
+ * @param config Recording configuration with explicit teleoperator dependency
+ * @returns RecordProcess with start(), stop(), getState(), and result
+ *
+ * @example
+ * ```typescript
+ * // 1. Create teleoperation
+ * const teleoperationProcess = await teleoperate({
+ *   robot: connectedRobot,
+ *   teleop: { type: "keyboard" },
+ *   calibrationData: calibrationData,
+ * });
+ *
+ * // 2. Create recording with explicit teleoperator dependency
+ * const recordProcess = await record({
+ *   teleoperator: teleoperationProcess.teleoperator,
+ *   options: {
+ *     fps: 30,
+ *     taskDescription: "Pick and place task",
+ *     onDataUpdate: (data) => console.log(`Recorded ${data.frameCount} frames`),
+ *   }
+ * });
+ *
+ * // 3. Start both processes
+ * teleoperationProcess.start();
+ * recordProcess.start();
+ *
+ * // 4. Stop recording
+ * const robotData = await recordProcess.stop();
+ * ```
+ */
+export async function record(config: RecordConfig): Promise<RecordProcess> {
+  // Use the provided teleoperator (explicit dependency - good architecture!)
+  const recorder = new LeRobotDatasetRecorder(
+    [config.teleoperator],
+    config.videoStreams || {},
+    config.options?.fps || 30,
+    config.options?.taskDescription || "Robot recording"
+  );
+
+  // Set robot metadata if provided
+  if (config.robotType) {
+    (recorder as any).setRobotLabel?.(config.robotType);
+  }
+
+  let startTime = 0;
+  let resultPromise: Promise<RobotRecordingData> | null = null;
+  let stateUpdateInterval: NodeJS.Timeout | null = null;
+
+  const recordProcess: RecordProcess = {
+    start(): void {
+      startTime = Date.now();
+      recorder.startRecording();
+
+      // Set up state update polling for callbacks
+      if (config.options?.onStateUpdate || config.options?.onDataUpdate) {
+        stateUpdateInterval = setInterval(() => {
+          if (recorder.isRecording) {
+            const state = recordProcess.getState();
+
+            if (config.options?.onStateUpdate) {
+              config.options.onStateUpdate(state);
+            }
+
+            if (config.options?.onDataUpdate) {
+              config.options.onDataUpdate({
+                frameCount: state.frameCount,
+                currentEpisode: state.episodeCount,
+                recentFrames: [],
+              });
+            }
+          }
+        }, 100);
+      }
+    },
+
+    async stop(): Promise<RobotRecordingData> {
+      if (stateUpdateInterval) {
+        clearInterval(stateUpdateInterval);
+        stateUpdateInterval = null;
+      }
+
+      const result = await recorder.stopRecording();
+
+      const robotData: RobotRecordingData = {
+        episodes: recorder.episodes.map((episode) => episode.frames),
+        metadata: {
+          fps: config.options?.fps || 30,
+          robotType: config.robotType || "unknown",
+          startTime: startTime,
+          endTime: Date.now(),
+          totalFrames: recorder.teleoperatorData.reduce(
+            (sum, ep) => sum + ep.length,
+            0
+          ),
+          totalEpisodes: recorder.teleoperatorData.length,
+        },
+      };
+
+      return robotData;
+    },
+
+    getState(): RecordingState {
+      return {
+        isActive: recorder.isRecording,
+        frameCount: recorder.teleoperatorData.reduce(
+          (sum, ep) => sum + ep.length,
+          0
+        ),
+        episodeCount: recorder.teleoperatorData.length,
+        duration: recorder.isRecording ? Date.now() - startTime : 0,
+        lastUpdate: Date.now(),
+      };
+    },
+
+    get result(): Promise<RobotRecordingData> {
+      if (!resultPromise) {
+        resultPromise = new Promise((resolve) => {
+          const originalStop = recordProcess.stop;
+          recordProcess.stop = async () => {
+            const data = await originalStop();
+            resolve(data);
+            return data;
+          };
+        });
+      }
+      return resultPromise;
+    },
+
+    getEpisodeCount(): number {
+      return recorder.teleoperatorData.length;
+    },
+
+    getEpisodes(): any[] {
+      return recorder.teleoperatorData;
+    },
+
+    clearEpisodes(): void {
+      (recorder as any).clearRecording();
+    },
+
+    async nextEpisode(): Promise<number> {
+      return (recorder as any).nextEpisodeSegment();
+    },
+
+    restoreEpisodes(episodes: any[]): void {
+      (recorder as any).teleoperatorData = [...episodes];
+    },
+
+    addCamera(name: string, stream: MediaStream): void {
+      (recorder as any).addVideoStream(name, stream);
+    },
+
+    removeCamera(name: string): void {
+      const videoStreams = (recorder as any).videoStreams || {};
+      delete videoStreams[name];
+    },
+
+    async exportForLeRobot(
+      format: "blobs" | "zip" | "zip-download" = "zip-download"
+    ): Promise<any> {
+      return recorder.exportForLeRobot(format);
+    },
+  };
+
+  return recordProcess;
+}

packages/web/src/s3_uploader.ts

@@ -1,172 +0,0 @@
-// 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/types/recording.ts

@@ -0,0 +1,122 @@
+/**
+ * Types for the simple record() function API
+ */
+
+import type { WebTeleoperator } from "../teleoperators/base-teleoperator.js";
+import type { LeRobotDatasetRecorder } from "../record.js";
+
+/**
+ * Configuration for the record() function
+ * Supports both upfront configuration and runtime management
+ */
+export interface RecordConfig {
+  /** The teleoperator to record from (explicit dependency) */
+  teleoperator: WebTeleoperator;
+
+  /** Optional: video streams to record by camera name (e.g. { main: videoStream, wrist: videoStream }) */
+  videoStreams?: { [cameraName: string]: MediaStream };
+
+  /** Optional: robot type/model name for metadata (e.g. "so100") */
+  robotType?: string;
+
+  /** Optional recording configuration */
+  options?: {
+    /** Target frames per second (default: 30) */
+    fps?: number;
+    /** Task description for the recording */
+    taskDescription?: string;
+    /** Callback for real-time recording data updates */
+    onDataUpdate?: (data: RecordingData) => void;
+    /** Callback for recording state changes */
+    onStateUpdate?: (state: RecordingState) => void;
+  };
+}
+
+/**
+ * Process interface returned by record() function
+ * Supports flexible upfront config and runtime management
+ */
+export interface RecordProcess {
+  // Recording control
+  /** Start recording */
+  start(): void;
+  /** Stop recording and return the result */
+  stop(): Promise<RobotRecordingData>;
+  /** Get current recording state */
+  getState(): RecordingState;
+  /** Promise that resolves when recording is stopped with the data */
+  result: Promise<RobotRecordingData>;
+
+  // Episode management (runtime)
+  /** Get total number of episodes recorded */
+  getEpisodeCount(): number;
+  /** Get raw episode data for viewing/analysis */
+  getEpisodes(): any[];
+  /** Delete all recorded episodes */
+  clearEpisodes(): void;
+  /** Start a new episode segment and get the new episode index */
+  nextEpisode(): Promise<number>;
+  /** Restore previously recorded episodes */
+  restoreEpisodes(episodes: any[]): void;
+
+  // Camera management (runtime)
+  /** Add a camera stream for recording */
+  addCamera(name: string, stream: MediaStream): void;
+  /** Remove a camera from recording */
+  removeCamera(name: string): void;
+
+  // Export
+  /** Export the recorded dataset in various formats */
+  exportForLeRobot(format?: "blobs" | "zip" | "zip-download"): Promise<any>;
+}
+
+/**
+ * Current state of the recording process
+ */
+export interface RecordingState {
+  /** Whether recording is currently active */
+  isActive: boolean;
+  /** Total number of frames recorded */
+  frameCount: number;
+  /** Number of episodes recorded */
+  episodeCount: number;
+  /** Duration of current recording in milliseconds */
+  duration: number;
+  /** Timestamp of last update */
+  lastUpdate: number;
+}
+
+/**
+ * Real-time recording data for UI feedback
+ */
+export interface RecordingData {
+  /** Total frames recorded */
+  frameCount: number;
+  /** Current episode number */
+  currentEpisode: number;
+  /** Recent frames for preview (last few frames) */
+  recentFrames: any[];
+}
+
+/**
+ * Final robot recording data (hardware only, no video)
+ */
+export interface RobotRecordingData {
+  /** Recorded episodes with motor position data */
+  episodes: any[];
+  /** Recording metadata */
+  metadata: {
+    /** Frames per second */
+    fps: number;
+    /** Robot type if available */
+    robotType: string;
+    /** Recording start time */
+    startTime: number;
+    /** Recording end time */
+    endTime: number;
+    /** Total frames recorded */
+    totalFrames: number;
+    /** Total episodes recorded */
+    totalEpisodes: number;
+  };
+}

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

@@ -1,159 +0,0 @@
-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

@@ -1,79 +0,0 @@
-/**
- * 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;