feat: calibration in web

docs/conventions.md

@@ -48,17 +48,35 @@
 
 ## Architecture Principles
 
-### 1. Python lerobot Faithfulness (Primary Principle)
+### 1. Platform-Appropriate Design Philosophy
 
-**lerobot.js must maintain UX/API compatibility with Python lerobot**
+**Each platform should leverage its strengths while maintaining core robotics compatibility**
+
+#### Node.js: Python lerobot Faithfulness
 
 - **Identical Commands**: `npx lerobot find-port` matches `python -m lerobot.find_port`
 - **Same Terminology**: Use "MotorsBus", not "robot arms" - keep Python's exact wording
 - **Matching Output**: Error messages, prompts, and flow identical to Python version
 - **Familiar Workflows**: Python lerobot users should feel immediately at home
-- **No "Improvements"**: Resist urge to add features/UX that Python version doesn't have
+- **CLI Compatibility**: Direct migration path from Python CLI
+
+> **Why for Node.js?** CLI users are already trained on Python lerobot. Node.js provides seamless migration to TypeScript without learning new patterns.
+
+#### Web: Modern Robotics UX
+
+- **Superior User Experience**: Leverage browser capabilities for better robotics interfaces
+- **Real-time Visual Feedback**: Live motor position displays, progress indicators, interactive calibration
+- **Professional Web UI**: Modern component libraries, responsive design, accessibility
+- **Browser-Native Patterns**: Use web standards like dialogs, forms, notifications appropriately
+- **Enhanced Workflows**: Improve upon CLI limitations with graphical interfaces
 
-> **Why?** Users are already trained on Python lerobot. Our goal is seamless migration to TypeScript, not learning a new tool.
+> **Why for Web?** Web platforms can provide significantly better UX than CLI tools. Users expect modern, intuitive interfaces when using browser applications.
+
+#### Shared Core: Robotics Protocol Compatibility
+
+- **Identical Hardware Communication**: Same motor protocols, timing, calibration algorithms
+- **Compatible Data Formats**: Calibration files work across all platforms
+- **Consistent Robotics Logic**: Motor control, kinematics, safety systems identical
 
 ### 2. Modular Design
 
@@ -123,17 +141,34 @@ lerobot/
 
 ### Implementation Philosophy
 
+#### Node.js Development
+
 - **Python First**: When in doubt, check how Python lerobot does it
-- **Port, Don't Innovate**: Direct ports are better than clever improvements
-- **User Expectations**: Maintain the exact experience Python users expect
+- **Direct Ports**: Mirror Python implementation for CLI compatibility
+- **User Expectations**: Maintain exact experience Python CLI users expect
 - **Terminology Consistency**: Use Python lerobot's exact naming and messaging
 
+#### Web Development
+
+- **Hardware Logic First**: Reuse Node.js's proven robotics protocols and algorithms
+- **UX Innovation**: Improve upon CLI limitations with modern web interfaces
+- **User Expectations**: Provide intuitive, visual experiences that exceed CLI capabilities
+- **Web Standards**: Follow browser conventions and accessibility guidelines
+
 ### Development Process
 
+#### Node.js Process
+
 - **Python Reference**: Always check Python lerobot implementation first
-- **UX Matching**: Test that commands, outputs, and workflows match exactly
+- **CLI Matching**: Test that commands, outputs, and workflows match exactly
 - **User Story Validation**: Validate against real Python lerobot users
 
+#### Web Process
+
+- **Hardware Foundation**: Start with Node.js robotics logic as proven base
+- **UX Enhancement**: Design interfaces that provide better experience than CLI
+- **User Testing**: Validate with both robotics experts and general web users
+
 ### Testing Strategy
 
 - **Unit Tests**: Vitest for individual functions and classes
@@ -165,9 +200,166 @@ lerobot/
 - **Hardware**: Platform-specific libraries for device access
 - **Development**: Vitest, ESLint, Prettier
 
-## Hardware Implementation Lessons
+## Platform-Specific Implementation
+
+### Node.js Implementation (Python-Compatible Foundation)
+
+**Node.js serves as our Python-compatible foundation - closest to original lerobot behavior**
+
+#### Core Principles for Node.js
+
+- **Direct Python Ports**: Mirror Python lerobot APIs and workflows exactly
+- **System-Level Access**: Leverage Node.js's full system capabilities
+- **Performance Priority**: Direct hardware access without browser security constraints
+- **CLI Compatibility**: Commands should feel identical to Python lerobot CLI
+
+#### Node.js Hardware Stack
+
+- **Serial Communication**: `serialport` package for direct hardware access
+- **Data Types**: Node.js Buffer API for binary communication
+- **File System**: Direct fs access for calibration files and datasets
+- **Port Discovery**: Programmatic port enumeration without user dialogs
+- **Process Management**: Direct process control and system integration
+
+### Web Implementation (Modern Robotics Interface)
+
+**Web provides superior robotics UX by building on Node.js's proven hardware protocols**
+
+#### Core Principles for Web
+
+- **Hardware Protocol Reuse**: Leverage Node.js's proven motor communication and calibration algorithms
+- **Superior User Experience**: Create intuitive, visual interfaces that surpass CLI limitations
+- **Browser-Native Design**: Use modern web patterns, components, and interactions appropriately
+- **Real-time Capabilities**: Provide live feedback and interactive control impossible in CLI
+- **Professional Quality**: Match or exceed commercial robotics software interfaces
+
+#### Critical Web-Specific Adaptations
+
+##### 1. Serial Communication Adaptation
+
+- **Foundation**: Reuse Node.js Feetech protocol timing and packet structures
+- **API Translation**:
+
+  ```typescript
+  // Node.js (serialport)
+  port.on("data", callback);
+
+  // Web (Web Serial API)
+  const reader = port.readable.getReader();
+  const { value } = await reader.read();
+  ```
+
+- **Browser Constraints**: Promise-based instead of event-based, user permission required
+- **Timing Differences**: 10ms write-to-read delays, different buffer management
+
+##### 2. Data Type Adaptation
+
+- **Node.js**: `Buffer` API for binary data
+- **Web**: `Uint8Array` for browser compatibility
+- **Translation Pattern**:
+
+  ```typescript
+  // Node.js
+  const packet = Buffer.from([0xff, 0xff, motorId]);
+
+  // Web
+  const packet = new Uint8Array([0xff, 0xff, motorId]);
+  ```
+
+##### 3. Storage Strategy Adaptation
+
+- **Node.js**: Direct file system access (`fs.writeFileSync`)
+- **Web**: Browser storage APIs (`localStorage`, `IndexedDB`)
+- **Device Persistence**:
+  - **Node.js**: File-based device configs
+  - **Web**: Hardware serial numbers + `WebUSB.getDevices()` for auto-restoration
+
+##### 4. Device Discovery Adaptation
+
+- **Node.js**: Programmatic port listing (`SerialPort.list()`)
+- **Web**: User-initiated port selection (`navigator.serial.requestPort()`)
+- **Auto-Reconnection**:
+  - **Node.js**: Automatic based on saved port paths
+  - **Web**: WebUSB device matching + Web Serial port restoration
+
+##### 5. UI Framework Integration
+
+- **Node.js**: CLI-based interaction (inquirer, chalk)
+- **Web**: React components with real-time hardware data binding
+- **Critical Challenges Solved**:
+  - **React.StrictMode**: Disabled for hardware interfaces (`src/demo/main.tsx`)
+  - **Concurrent Access**: Single controlled serial operation via custom hooks
+  - **Real-time Updates**: Hardware callbacks → React state updates
+  - **Professional UI**: shadcn Dialog, Card, Button components for robotics interfaces
+- **Architecture Pattern**:
+  ```typescript
+  // Custom hook for hardware state management
+  function useCalibration(robot: ConnectedRobot) {
+    const [controller, setController] =
+      useState<WebCalibrationController | null>(null);
+    // Stable dependencies to prevent infinite re-renders
+    const startCalibration = useCallback(async () => {
+      /* ... */
+    }, [dependencies]);
+  }
+  ```
+
+#### Web Implementation Blockers Solved
+
+**These blockers were identified during SO-100 web calibration development:**
+
+1. **Web Serial Communication Protocol**
+
+   - **Issue**: Browser timing differs from Node.js serialport
+   - **Solution**: Adapt Node.js Feetech patterns with Promise.race timeouts
+   - **Pattern**: Reuse protocol logic, translate API calls
+
+2. **React + Hardware Integration**
+
+   - **Issue**: React lifecycle conflicts with hardware state
+   - **Solution**: Controlled serial access, proper useCallback dependencies
+   - **Pattern**: Hardware operations outside React render cycle
+
+3. **Real-Time Hardware Display**
+
+   - **Issue**: UI showing calculated values instead of live positions
+   - **Solution**: Hardware callbacks pass current positions to React
+   - **Pattern**: Hardware → callback → React state → UI update
+
+4. **Browser Storage for Hardware**
+
+   - **Issue**: Multiple localStorage keys causing state inconsistency (e.g., `lerobot-robot-{serial}`, `lerobot-calibration-{serial}`, `lerobot_calibration_{type}_{id}`)
+   - **Solution**: Unified storage system with automatic migration from old formats
+   - **Implementation**:
+
+     ```typescript
+     // Unified key format
+     const key = `lerobotjs-${serialNumber}`
+
+     // Unified data structure
+     {
+       device_info: { serialNumber, robotType, robotId, usbMetadata },
+       calibration: { motor_data..., metadata: { timestamp, readCount } }
+     }
+     ```
+
+   - **Auto-Migration**: Automatically consolidates scattered old keys into unified format
+   - **Pattern**: Single source of truth per physical device
+
+5. **Device Persistence Across Sessions**
+
+   - **Issue**: Serial numbers lost on page reload
+   - **Solution**: WebUSB `getDevices()` + automatic device restoration
+   - **Pattern**: Hardware ID persistence without user re-permission
+
+6. **Professional Hardware UI**
+   - **Issue**: Browser alerts inappropriate for robotics interfaces
+   - **Solution**: shadcn Dialog components with device information
+   - **Pattern**: Professional component library for hardware control
+
+### Hardware Implementation Lessons (Universal Patterns)
 
-### Critical Hardware Compatibility
+#### Critical Hardware Compatibility (Both Platforms)
 
 #### Baudrate Configuration
 

package.json

@@ -33,6 +33,8 @@
     "install-global": "pnpm run build && npm link"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
     "log-update": "^6.1.0",
     "serialport": "^12.0.0"
   },

pnpm-lock.yaml

@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.14
+        version: 1.1.14(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-progress':
+        specifier: ^1.1.7
+        version: 1.1.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
       log-update:
         specifier: ^6.1.0
         version: 6.1.0
@@ -341,6 +347,190 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@radix-ui/[email protected]':
+    resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@rolldown/[email protected]':
     resolution: {integrity: sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==}
 
@@ -573,6 +763,10 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==}
+    engines: {node: '>=10'}
+
   [email protected]:
     resolution: {integrity: sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -656,6 +850,9 @@ packages:
       supports-color:
         optional: true
 
+  [email protected]:
+    resolution: {integrity: sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==}
+
   [email protected]:
     resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
 
@@ -732,6 +929,10 @@ packages:
     resolution: {integrity: sha512-vpeMIQKxczTD/0s2CdEWHcb0eeJe6TFjxb+J5xgX7hScxqrGuyjmv4c1D4A/gelKfyox0gJJwIHF+fLjeaM8kQ==}
     engines: {node: '>=18'}
 
+  [email protected]:
+    resolution: {integrity: sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-auHyJ4AgMz7vgS8Hp3N6HXSmlMdUyhSUrfBF16w153rxtLIEOE+HGqaBppczZvnHLqQJfiHotCYpNhl0lUROFQ==}
 
@@ -979,6 +1180,36 @@ packages:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-HpMh8+oahmIdOuS5aFKKY6Pyog+FNaZV/XyJOq7b4YFwsFHe5yYfdbIalI4k3vU2nSDql7YskmUseHsRrJqIPA==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
@@ -1100,6 +1331,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
+  [email protected]:
+    resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
+
   [email protected]:
     resolution: {integrity: sha512-qjbnuR9Tr+FJOMBqJCW5ehvIo/buZq7vH7qD7JziU98h6l3qGy0a/yPFjwO+y0/T7GFpNgNAvEcPPVfyT8rrPQ==}
     engines: {node: '>=18.0.0'}
@@ -1119,6 +1353,26 @@ packages:
     peerDependencies:
       browserslist: '>= 4.21.0'
 
+  [email protected]:
+    resolution: {integrity: sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  [email protected]:
+    resolution: {integrity: sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   [email protected]:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1422,6 +1676,159 @@ snapshots:
   '@pkgjs/[email protected]':
     optional: true
 
+  '@radix-ui/[email protected]': {}
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-dismissable-layer': 1.1.10(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-focus-guards': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-focus-scope': 1.1.7(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-id': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-portal': 1.1.9(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-presence': 1.1.4(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-slot': 1.2.3(@types/[email protected])([email protected])
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/[email protected])([email protected])
+      aria-hidden: 1.2.6
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+      react-remove-scroll: 2.7.1(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/[email protected])([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])':
+    dependencies:
+      '@radix-ui/react-context': 1.1.2(@types/[email protected])([email protected])
+      '@radix-ui/react-primitive': 2.1.3(@types/[email protected](@types/[email protected]))(@types/[email protected])([email protected]([email protected]))([email protected])
+      react: 18.3.1
+      react-dom: 18.3.1([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+      '@types/react-dom': 18.3.7(@types/[email protected])
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/[email protected])([email protected])
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/[email protected])([email protected])
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  '@radix-ui/[email protected](@types/[email protected])([email protected])':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   '@rolldown/[email protected]': {}
 
   '@rollup/[email protected]':
@@ -1611,6 +2018,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      tslib: 2.8.1
+
   [email protected]([email protected]):
     dependencies:
       browserslist: 4.25.0
@@ -1690,6 +2101,8 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -1772,6 +2185,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       resolve-pkg-maps: 1.0.0
@@ -1974,6 +2389,33 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.3.1
+      react-style-singleton: 2.2.3(@types/[email protected])([email protected])
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.3.1
+      react-remove-scroll-bar: 2.3.8(@types/[email protected])([email protected])
+      react-style-singleton: 2.2.3(@types/[email protected])([email protected])
+      tslib: 2.8.1
+      use-callback-ref: 1.3.3(@types/[email protected])([email protected])
+      use-sidecar: 1.1.3(@types/[email protected])([email protected])
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      get-nonce: 1.0.1
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   [email protected]:
     dependencies:
       loose-envify: 1.4.0
@@ -2157,6 +2599,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       esbuild: 0.25.5
@@ -2174,6 +2618,21 @@ snapshots:
       escalade: 3.2.0
       picocolors: 1.1.1
 
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
+  [email protected](@types/[email protected])([email protected]):
+    dependencies:
+      detect-node-es: 1.1.0
+      react: 18.3.1
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.23
+
   [email protected]: {}
 
   [email protected](@types/[email protected])([email protected])([email protected])([email protected]):

src/demo/components/CalibrationModal.tsx

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

src/demo/components/CalibrationPanel.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useMemo,
+} from "react";
 import { Button } from "./ui/button";
 import {
   Card,
@@ -8,7 +14,13 @@ import {
   CardTitle,
 } from "./ui/card";
 import { Badge } from "./ui/badge";
-import { calibrateWithPort } from "../../lerobot/web/calibrate";
+import {
+  createCalibrationController,
+  WebCalibrationController,
+  saveCalibrationResults,
+  type WebCalibrationResults,
+} from "../../lerobot/web/calibrate";
+import { CalibrationModal } from "./CalibrationModal";
 import type { ConnectedRobot } from "../types";
 
 interface CalibrationPanelProps {
@@ -24,275 +36,367 @@ interface MotorCalibrationData {
   range: number;
 }
 
-export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
+/**
+ * Custom hook for calibration that manages the serial port properly
+ * Uses vanilla calibration functions internally, provides React-friendly interface
+ */
+function useCalibration(robot: ConnectedRobot) {
+  const [controller, setController] = useState<WebCalibrationController | null>(
+    null
+  );
   const [isCalibrating, setIsCalibrating] = useState(false);
+  const [isRecordingRanges, setIsRecordingRanges] = useState(false);
+  const [calibrationResult, setCalibrationResult] =
+    useState<WebCalibrationResults | null>(null);
+  const [status, setStatus] = useState<string>("Ready to calibrate");
+
+  // Motor data state
   const [motorData, setMotorData] = useState<MotorCalibrationData[]>([]);
-  const [calibrationStatus, setCalibrationStatus] =
-    useState<string>("Ready to calibrate");
-  const [calibrationComplete, setCalibrationComplete] = useState(false);
-  const [readCount, setReadCount] = useState(0);
 
-  const animationFrameRef = useRef<number>();
-  const lastReadTime = useRef<number>(0);
-  const isReading = useRef<boolean>(false);
+  // Static motor names - use useMemo to prevent recreation on every render
+  const motorNames = useMemo(
+    () => [
+      "shoulder_pan",
+      "shoulder_lift",
+      "elbow_flex",
+      "wrist_flex",
+      "wrist_roll",
+      "gripper",
+    ],
+    []
+  );
 
-  // Motor names matching Node CLI exactly
-  const motorNames = [
-    "waist",
-    "shoulder",
-    "elbow",
-    "forearm_roll",
-    "wrist_angle",
-    "wrist_rotate",
-  ];
+  // Initialize controller when robot changes
+  const initializeController = useCallback(async () => {
+    if (!robot.port || !robot.robotType) {
+      throw new Error("Invalid robot configuration");
+    }
+
+    const newController = await createCalibrationController(
+      robot.robotType,
+      robot.port
+    );
+    setController(newController);
+    return newController;
+  }, [robot.port, robot.robotType]);
 
-  // Initialize motor data with center positions
+  // Read motor positions using the controller (no concurrent access)
+  const readMotorPositions = useCallback(async (): Promise<number[]> => {
+    if (!controller) {
+      throw new Error("Controller not initialized");
+    }
+    return await controller.readMotorPositions();
+  }, [controller]);
+
+  // Update motor data from positions
+  const updateMotorData = useCallback(
+    (
+      positions: number[],
+      rangeMins?: { [motor: string]: number },
+      rangeMaxes?: { [motor: string]: number }
+    ) => {
+      const newData = motorNames.map((name, index) => {
+        const current = positions[index];
+        const min = rangeMins ? rangeMins[name] : current;
+        const max = rangeMaxes ? rangeMaxes[name] : current;
+
+        return {
+          name,
+          current,
+          min,
+          max,
+          range: max - min,
+        };
+      });
+
+      setMotorData(newData);
+    },
+    [motorNames]
+  );
+
+  // Initialize motor data
   const initializeMotorData = useCallback(() => {
     const initialData = motorNames.map((name) => ({
       name,
-      current: 2047, // Center position for STS3215 (4095/2)
+      current: 2047,
       min: 2047,
       max: 2047,
       range: 0,
     }));
     setMotorData(initialData);
-    setReadCount(0);
-  }, []);
+  }, [motorNames]);
 
-  // Keep track of last known good positions to avoid glitches
-  const lastKnownPositions = useRef<number[]>([
-    2047, 2047, 2047, 2047, 2047, 2047,
-  ]);
+  // Start calibration process
+  const startCalibration = useCallback(async () => {
+    try {
+      setStatus("🤖 Starting calibration process...");
+      setIsCalibrating(true);
 
-  // Read actual motor positions with robust error handling
-  const readMotorPositions = useCallback(async (): Promise<number[]> => {
-    if (!robot.port || !robot.port.readable || !robot.port.writable) {
-      throw new Error("Robot port not available for communication");
+      const ctrl = await initializeController();
+
+      // Step 1: Homing
+      setStatus("📍 Setting homing position...");
+      await ctrl.performHomingStep();
+
+      return ctrl;
+    } catch (error) {
+      setIsCalibrating(false);
+      throw error;
     }
+  }, [initializeController]);
+
+  // Start range recording
+  const startRangeRecording = useCallback(
+    async (
+      controllerToUse: WebCalibrationController,
+      stopFunction: () => boolean,
+      onUpdate?: (
+        mins: { [motor: string]: number },
+        maxes: { [motor: string]: number },
+        currentPositions: { [motor: string]: number }
+      ) => void
+    ) => {
+      if (!controllerToUse) {
+        throw new Error("Controller not provided");
+      }
 
-    const positions: number[] = [];
-    const motorIds = [1, 2, 3, 4, 5, 6];
+      setStatus(
+        "📏 Recording joint ranges - move all joints through their full range"
+      );
+      setIsRecordingRanges(true);
 
-    // Get persistent reader/writer for this session
-    const reader = robot.port.readable.getReader();
-    const writer = robot.port.writable.getWriter();
+      try {
+        await controllerToUse.performRangeRecordingStep(
+          stopFunction,
+          (rangeMins, rangeMaxes, currentPositions) => {
+            setStatus("📏 Recording joint ranges - capturing data...");
 
-    try {
-      for (let index = 0; index < motorIds.length; index++) {
-        const motorId = motorIds[index];
-        let success = false;
-        let retries = 2; // Allow 2 retries per motor
-
-        while (!success && retries > 0) {
-          try {
-            // Create STS3215 Read Position packet
-            const packet = new Uint8Array([
-              0xff,
-              0xff,
-              motorId,
-              0x04,
-              0x02,
-              0x38,
-              0x02,
-              0x00,
-            ]);
-            const checksum = ~(motorId + 0x04 + 0x02 + 0x38 + 0x02) & 0xff;
-            packet[7] = checksum;
-
-            // Write packet
-            await writer.write(packet);
-
-            // Wait for response
-            await new Promise((resolve) => setTimeout(resolve, 10));
-
-            // Read with timeout
-            const timeoutPromise = new Promise((_, reject) =>
-              setTimeout(() => reject(new Error("Timeout")), 100)
+            // Update motor data with CURRENT LIVE POSITIONS (not averages!)
+            const currentPositionsArray = motorNames.map(
+              (name) => currentPositions[name]
             );
+            updateMotorData(currentPositionsArray, rangeMins, rangeMaxes);
 
-            const result = (await Promise.race([
-              reader.read(),
-              timeoutPromise,
-            ])) as ReadableStreamReadResult<Uint8Array>;
-
-            if (
-              result &&
-              !result.done &&
-              result.value &&
-              result.value.length >= 7
-            ) {
-              const response = result.value;
-              const responseId = response[2];
-              const error = response[4];
-
-              // Check if this is the response we're looking for
-              if (responseId === motorId && error === 0) {
-                const position = response[5] | (response[6] << 8);
-                positions.push(position);
-                lastKnownPositions.current[index] = position; // Update last known good position
-                success = true;
-              } else {
-                // Wrong motor ID or error - might be out of sync, try again
-                retries--;
-                await new Promise((resolve) => setTimeout(resolve, 5));
-              }
-            } else {
-              retries--;
-              await new Promise((resolve) => setTimeout(resolve, 5));
+            if (onUpdate) {
+              onUpdate(rangeMins, rangeMaxes, currentPositions);
             }
-          } catch (error) {
-            retries--;
-            await new Promise((resolve) => setTimeout(resolve, 5));
           }
-        }
-
-        if (!success) {
-          // Use last known good position instead of fallback center position
-          positions.push(lastKnownPositions.current[index]);
-        }
-
-        // Small delay between motors
-        await new Promise((resolve) => setTimeout(resolve, 2));
+        );
+      } finally {
+        setIsRecordingRanges(false);
       }
-    } finally {
-      reader.releaseLock();
-      writer.releaseLock();
-    }
-
-    return positions;
-  }, [robot.port]);
-
-  // Update motor data with new readings - NO SIMULATION, REAL VALUES ONLY
-  const updateMotorData = useCallback(async () => {
-    if (!isCalibrating || isReading.current) return;
-
-    const now = performance.now();
-    // Read at ~15Hz to reduce serial communication load (66ms intervals)
-    if (now - lastReadTime.current < 66) return;
-
-    lastReadTime.current = now;
-    isReading.current = true;
+    },
+    [motorNames, updateMotorData]
+  );
 
-    try {
-      const positions = await readMotorPositions();
-
-      // Always update since we're now keeping last known good positions
-      // Only show warning if all motors are still at center position (no successful reads yet)
-      const allAtCenter = positions.every((pos) => pos === 2047);
-      if (allAtCenter && readCount === 0) {
-        console.log("No motor data received yet - still trying to connect");
-        setCalibrationStatus("Connecting to motors - please wait...");
+  // Finish calibration
+  const finishCalibration = useCallback(
+    async (
+      controllerToUse?: WebCalibrationController,
+      recordingCount?: number
+    ) => {
+      const ctrl = controllerToUse || controller;
+      if (!ctrl) {
+        throw new Error("Controller not initialized");
       }
 
-      setMotorData((prev) =>
-        prev.map((motor, index) => {
-          const current = positions[index];
-          const min = Math.min(motor.min, current);
-          const max = Math.max(motor.max, current);
-          const range = max - min;
-
-          return {
-            ...motor,
-            current,
-            min,
-            max,
-            range,
-          };
-        })
-      );
-
-      setReadCount((prev) => prev + 1);
-      console.log(`Real motor positions:`, positions);
-    } catch (error) {
-      console.warn("Failed to read motor positions:", error);
-      setCalibrationStatus(
-        `Error reading motors: ${
-          error instanceof Error ? error.message : error
-        }`
+      setStatus("💾 Finishing calibration...");
+      const result = await ctrl.finishCalibration();
+      setCalibrationResult(result);
+
+      // Save results using serial number for dashboard detection
+      // Use the same serial number logic as dashboard: prefer main serialNumber, fallback to USB metadata, then "unknown"
+      const serialNumber =
+        robot.serialNumber || robot.usbMetadata?.serialNumber || "unknown";
+
+      console.log("🔍 Debug - Saving calibration with:", {
+        robotType: robot.robotType,
+        robotId: robot.robotId,
+        mainSerialNumber: robot.serialNumber,
+        usbSerialNumber: robot.usbMetadata?.serialNumber,
+        finalSerialNumber: serialNumber,
+        storageKey: `lerobotjs-${serialNumber}`,
+      });
+
+      await saveCalibrationResults(
+        result,
+        robot.robotType!,
+        robot.robotId || `${robot.robotType}_1`,
+        serialNumber,
+        recordingCount || 0
       );
-    } finally {
-      isReading.current = false;
-    }
-  }, [isCalibrating, readMotorPositions]);
 
-  // Animation loop using RAF (requestAnimationFrame)
-  const animationLoop = useCallback(() => {
-    updateMotorData();
+      // Update final motor data
+      const finalData = motorNames.map((motorName) => {
+        const motorResult = result[motorName];
+        return {
+          name: motorName,
+          current: (motorResult.range_min + motorResult.range_max) / 2,
+          min: motorResult.range_min,
+          max: motorResult.range_max,
+          range: motorResult.range_max - motorResult.range_min,
+        };
+      });
+
+      setMotorData(finalData);
+      setStatus("✅ Calibration completed successfully! Configuration saved.");
+      setIsCalibrating(false);
+
+      return result;
+    },
+    [controller, robot.robotType, robot.robotId, motorNames]
+  );
 
-    if (isCalibrating) {
-      animationFrameRef.current = requestAnimationFrame(animationLoop);
-    }
-  }, [isCalibrating, updateMotorData]);
+  // Reset states
+  const reset = useCallback(() => {
+    setController(null);
+    setIsCalibrating(false);
+    setIsRecordingRanges(false);
+    setCalibrationResult(null);
+    setStatus("Ready to calibrate");
+    initializeMotorData();
+  }, [initializeMotorData]);
 
+  // Initialize on mount
   useEffect(() => {
     initializeMotorData();
   }, [initializeMotorData]);
 
-  useEffect(() => {
-    if (isCalibrating) {
-      animationFrameRef.current = requestAnimationFrame(animationLoop);
-    } else {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    }
+  return {
+    // State
+    controller,
+    isCalibrating,
+    isRecordingRanges,
+    calibrationResult,
+    status,
+    motorData,
+
+    // Actions
+    startCalibration,
+    startRangeRecording,
+    finishCalibration,
+    readMotorPositions,
+    reset,
+
+    // Utilities
+    updateMotorData,
+  };
+}
 
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [isCalibrating, animationLoop]);
+export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
+  const {
+    controller,
+    isCalibrating,
+    isRecordingRanges,
+    calibrationResult,
+    status,
+    motorData,
+    startCalibration,
+    startRangeRecording,
+    finishCalibration,
+    readMotorPositions,
+    reset,
+    updateMotorData,
+  } = useCalibration(robot);
+
+  // Modal state
+  const [modalOpen, setModalOpen] = useState(false);
+
+  // Recording state
+  const [stopRecordingFunction, setStopRecordingFunction] = useState<
+    (() => void) | null
+  >(null);
+
+  // Motor names matching Python lerobot exactly (NOT Node CLI)
+  const motorNames = [
+    "shoulder_pan",
+    "shoulder_lift",
+    "elbow_flex",
+    "wrist_flex",
+    "wrist_roll",
+    "gripper",
+  ];
+
+  // Motor IDs for SO-100 (STS3215 servos)
+  const motorIds = [1, 2, 3, 4, 5, 6];
+
+  // Keep track of last known good positions to avoid glitches
+  const lastKnownPositions = useRef<number[]>([
+    2047, 2047, 2047, 2047, 2047, 2047,
+  ]);
+
+  // NO concurrent motor reading - let the calibration hook handle all serial operations
+
+  const handleContinueCalibration = async () => {
+    setModalOpen(false);
 
-  const startCalibration = async () => {
     if (!robot.port || !robot.robotType) {
-      setCalibrationStatus("Error: Invalid robot configuration");
       return;
     }
 
-    setCalibrationStatus(
-      "Initializing calibration - reading current positions..."
-    );
-
     try {
-      // Get current positions to use as starting point for min/max
-      const currentPositions = await readMotorPositions();
-
-      // Reset calibration data with current positions as both min and max
-      const freshData = motorNames.map((name, index) => ({
-        name,
-        current: currentPositions[index],
-        min: currentPositions[index], // Start with current position
-        max: currentPositions[index], // Start with current position
-        range: 0, // No range yet
-      }));
-
-      setMotorData(freshData);
-      setReadCount(0);
-      setIsCalibrating(true);
-      setCalibrationComplete(false);
-      setCalibrationStatus(
-        "Recording ranges of motion - move all joints through their full range..."
-      );
+      const ctrl = await startCalibration();
+
+      // Set up manual control - user decides when to stop
+      let shouldStopRecording = false;
+      let recordingCount = 0;
+
+      // Create stop function and store it in state for the button
+      const stopRecording = () => {
+        shouldStopRecording = true;
+      };
+      setStopRecordingFunction(() => stopRecording);
+
+      // Add Enter key listener
+      const handleKeyPress = (event: KeyboardEvent) => {
+        if (event.key === "Enter") {
+          shouldStopRecording = true;
+        }
+      };
+
+      document.addEventListener("keydown", handleKeyPress);
+
+      try {
+        await startRangeRecording(
+          ctrl,
+          () => {
+            return shouldStopRecording;
+          },
+          (rangeMins, rangeMaxes, currentPositions) => {
+            recordingCount++;
+          }
+        );
+      } finally {
+        document.removeEventListener("keydown", handleKeyPress);
+        setStopRecordingFunction(null);
+      }
+
+      // Step 3: Finish calibration with recording count
+      await finishCalibration(ctrl, recordingCount);
     } catch (error) {
-      setCalibrationStatus(
-        `Error starting calibration: ${
-          error instanceof Error ? error.message : error
-        }`
-      );
+      console.error("❌ Calibration failed:", error);
     }
   };
 
-  // Generate calibration config JSON matching Node CLI format
+  // Generate calibration config JSON matching Python lerobot format (OBJECT format, not arrays)
   const generateConfigJSON = () => {
-    const calibrationData = {
-      homing_offset: motorData.map((motor) => motor.current - 2047), // Center offset
-      drive_mode: [3, 3, 3, 3, 3, 3], // SO-100 standard drive mode
-      start_pos: motorData.map((motor) => motor.min),
-      end_pos: motorData.map((motor) => motor.max),
-      calib_mode: ["middle", "middle", "middle", "middle", "middle", "middle"], // SO-100 standard
-      motor_names: motorNames,
-    };
+    // Use the calibration result if available
+    if (calibrationResult) {
+      return calibrationResult;
+    }
+
+    // Fallback: generate from motor data (shouldn't happen with new flow)
+    const calibrationData: any = {};
+    motorNames.forEach((motorName, index) => {
+      const motor = motorData[index];
+      calibrationData[motorName] = {
+        homing_offset: motor.current - 2047, // Center offset for STS3215 (4095/2)
+        drive_mode: 0, // Python lerobot SO-100 uses drive_mode 0
+        start_pos: motor.min,
+        end_pos: motor.max,
+        calib_mode: "middle", // Python lerobot SO-100 standard
+      };
+    });
 
     return calibrationData;
   };
@@ -313,47 +417,6 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
     URL.revokeObjectURL(url);
   };
 
-  const finishCalibration = () => {
-    setIsCalibrating(false);
-    setCalibrationComplete(true);
-    setCalibrationStatus(
-      `✅ Calibration completed! Recorded ${readCount} position readings.`
-    );
-
-    // Save calibration config to localStorage using serial number
-    const configData = generateConfigJSON();
-    const serialNumber = (robot as any).serialNumber;
-
-    if (!serialNumber) {
-      console.warn("⚠️ No serial number available for calibration storage");
-      setCalibrationStatus(
-        `⚠️ Calibration completed but cannot save - no robot serial number`
-      );
-      return;
-    }
-
-    const calibrationKey = `lerobot-calibration-${serialNumber}`;
-    try {
-      localStorage.setItem(
-        calibrationKey,
-        JSON.stringify({
-          config: configData,
-          timestamp: new Date().toISOString(),
-          serialNumber: serialNumber,
-          robotId: robot.robotId,
-          robotType: robot.robotType,
-          readCount: readCount,
-        })
-      );
-      console.log(`💾 Calibration saved for robot serial: ${serialNumber}`);
-    } catch (error) {
-      console.warn("Failed to save calibration to localStorage:", error);
-      setCalibrationStatus(
-        `⚠️ Calibration completed but save failed: ${error}`
-      );
-    }
-  };
-
   return (
     <div className="space-y-4">
       {/* Calibration Status Card */}
@@ -372,14 +435,14 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
               variant={
                 isCalibrating
                   ? "default"
-                  : calibrationComplete
+                  : calibrationResult
                   ? "default"
                   : "outline"
               }
             >
               {isCalibrating
                 ? "Recording"
-                : calibrationComplete
+                : calibrationResult
                 ? "Complete"
                 : "Ready"}
             </Badge>
@@ -389,26 +452,35 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
           <div className="space-y-4">
             <div className="p-3 bg-blue-50 rounded-lg">
               <p className="text-sm font-medium text-blue-900">Status:</p>
-              <p className="text-sm text-blue-800">{calibrationStatus}</p>
+              <p className="text-sm text-blue-800">{status}</p>
               {isCalibrating && (
                 <p className="text-xs text-blue-600 mt-1">
-                  Readings: {readCount} | Press "Finish Calibration" when done
+                  Move joints through full range | Press "Finish Recording" when
+                  done
                 </p>
               )}
             </div>
 
             <div className="flex gap-2">
-              {!isCalibrating && !calibrationComplete && (
-                <Button onClick={startCalibration}>Start Calibration</Button>
+              {!isCalibrating && !calibrationResult && (
+                <Button onClick={() => setModalOpen(true)}>
+                  Start Calibration
+                </Button>
               )}
 
-              {isCalibrating && (
+              {isCalibrating && !isRecordingRanges && (
                 <Button onClick={finishCalibration} variant="outline">
                   Finish Calibration
                 </Button>
               )}
 
-              {calibrationComplete && (
+              {isRecordingRanges && stopRecordingFunction && (
+                <Button onClick={stopRecordingFunction} variant="default">
+                  Finish Recording
+                </Button>
+              )}
+
+              {calibrationResult && (
                 <>
                   <Button onClick={downloadConfigJSON} variant="outline">
                     Download Config JSON
@@ -422,7 +494,7 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
       </Card>
 
       {/* Configuration JSON Display */}
-      {calibrationComplete && (
+      {calibrationResult && (
         <Card>
           <CardHeader>
             <CardTitle className="text-lg">
@@ -521,6 +593,14 @@ export function CalibrationPanel({ robot, onFinish }: CalibrationPanelProps) {
           )}
         </CardContent>
       </Card>
+
+      {/* Calibration Modal */}
+      <CalibrationModal
+        open={modalOpen}
+        onOpenChange={setModalOpen}
+        deviceType={robot.robotType || "robot"}
+        onContinue={handleContinueCalibration}
+      />
     </div>
   );
 }

src/demo/components/CalibrationWizard.tsx

@@ -1,217 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "./ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "./ui/card";
-import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { Badge } from "./ui/badge";
-import { calibrateWithPort } from "../../lerobot/web/calibrate";
-import type { ConnectedRobot } from "../types";
-
-interface CalibrationWizardProps {
-  robot: ConnectedRobot;
-  onComplete: () => void;
-  onCancel: () => void;
-}
-
-interface CalibrationStep {
-  id: string;
-  title: string;
-  description: string;
-  status: "pending" | "running" | "complete" | "error";
-  message?: string;
-}
-
-export function CalibrationWizard({
-  robot,
-  onComplete,
-  onCancel,
-}: CalibrationWizardProps) {
-  const [currentStepIndex, setCurrentStepIndex] = useState(0);
-  const [steps, setSteps] = useState<CalibrationStep[]>([
-    {
-      id: "init",
-      title: "Initialize Robot",
-      description: "Connecting to robot and checking status",
-      status: "pending",
-    },
-    {
-      id: "calibrate",
-      title: "Calibrate Motors",
-      description: "Running calibration sequence",
-      status: "pending",
-    },
-    {
-      id: "verify",
-      title: "Verify Calibration",
-      description: "Testing calibrated positions",
-      status: "pending",
-    },
-    {
-      id: "complete",
-      title: "Complete",
-      description: "Calibration finished successfully",
-      status: "pending",
-    },
-  ]);
-
-  const [isRunning, setIsRunning] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    startCalibration();
-  }, []);
-
-  const updateStep = (
-    stepId: string,
-    status: CalibrationStep["status"],
-    message?: string
-  ) => {
-    setSteps((prev) =>
-      prev.map((step) =>
-        step.id === stepId ? { ...step, status, message } : step
-      )
-    );
-  };
-
-  const startCalibration = async () => {
-    if (!robot.port || !robot.robotType) {
-      setError("Invalid robot configuration");
-      return;
-    }
-
-    setIsRunning(true);
-    setError(null);
-
-    try {
-      // Step 1: Initialize
-      setCurrentStepIndex(0);
-      updateStep("init", "running");
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      updateStep("init", "complete", "Robot initialized successfully");
-
-      // Step 2: Calibrate
-      setCurrentStepIndex(1);
-      updateStep("calibrate", "running");
-
-      try {
-        await calibrateWithPort(robot.port, robot.robotType);
-        updateStep("calibrate", "complete", "Motor calibration completed");
-      } catch (error) {
-        updateStep(
-          "calibrate",
-          "error",
-          error instanceof Error ? error.message : "Calibration failed"
-        );
-        throw error;
-      }
-
-      // Step 3: Verify
-      setCurrentStepIndex(2);
-      updateStep("verify", "running");
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-      updateStep("verify", "complete", "Calibration verified");
-
-      // Step 4: Complete
-      setCurrentStepIndex(3);
-      updateStep("complete", "complete", "Robot is ready for use");
-
-      setTimeout(() => {
-        onComplete();
-      }, 2000);
-    } catch (error) {
-      setError(error instanceof Error ? error.message : "Calibration failed");
-    } finally {
-      setIsRunning(false);
-    }
-  };
-
-  const getStepIcon = (status: CalibrationStep["status"]) => {
-    switch (status) {
-      case "pending":
-        return "⏳";
-      case "running":
-        return "🔄";
-      case "complete":
-        return "✅";
-      case "error":
-        return "❌";
-      default:
-        return "⏳";
-    }
-  };
-
-  const getStepBadgeVariant = (status: CalibrationStep["status"]) => {
-    switch (status) {
-      case "pending":
-        return "secondary" as const;
-      case "running":
-        return "default" as const;
-      case "complete":
-        return "default" as const;
-      case "error":
-        return "destructive" as const;
-      default:
-        return "secondary" as const;
-    }
-  };
-
-  return (
-    <div className="space-y-6">
-      <div className="text-center">
-        <h3 className="text-lg font-semibold mb-2">Calibration in Progress</h3>
-        <p className="text-muted-foreground">
-          Calibrating {robot.robotId} ({robot.robotType?.replace("_", " ")})
-        </p>
-      </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <div className="space-y-4">
-        {steps.map((step, index) => (
-          <Card
-            key={step.id}
-            className={index === currentStepIndex ? "ring-2 ring-blue-500" : ""}
-          >
-            <CardHeader className="pb-3">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3">
-                  <span className="text-2xl">{getStepIcon(step.status)}</span>
-                  <div>
-                    <CardTitle className="text-base">{step.title}</CardTitle>
-                    <CardDescription className="text-sm">
-                      {step.description}
-                    </CardDescription>
-                  </div>
-                </div>
-                <Badge variant={getStepBadgeVariant(step.status)}>
-                  {step.status.charAt(0).toUpperCase() + step.status.slice(1)}
-                </Badge>
-              </div>
-            </CardHeader>
-            {step.message && (
-              <CardContent className="pt-0">
-                <p className="text-sm text-muted-foreground">{step.message}</p>
-              </CardContent>
-            )}
-          </Card>
-        ))}
-      </div>
-
-      <div className="flex justify-center space-x-4">
-        <Button variant="outline" onClick={onCancel} disabled={isRunning}>
-          Cancel
-        </Button>
-        {error && <Button onClick={startCalibration}>Retry Calibration</Button>}
-      </div>
-    </div>
-  );
-}

src/demo/components/PortManager.tsx

@@ -9,6 +9,14 @@ import {
 } from "./ui/card";
 import { Alert, AlertDescription } from "./ui/alert";
 import { Badge } from "./ui/badge";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
 import { isWebSerialSupported } from "../../lerobot/web/calibrate";
 import type { ConnectedRobot } from "../types";
 
@@ -31,7 +39,17 @@ export function PortManager({
   const [isFindingPorts, setIsFindingPorts] = useState(false);
   const [findPortsLog, setFindPortsLog] = useState<string[]>([]);
   const [error, setError] = useState<string | null>(null);
-
+  const [confirmDeleteDialog, setConfirmDeleteDialog] = useState<{
+    open: boolean;
+    robotIndex: number;
+    robotName: string;
+    serialNumber: string;
+  }>({
+    open: false,
+    robotIndex: -1,
+    robotName: "",
+    serialNumber: "",
+  });
   // Load saved port data from localStorage on mount
   useEffect(() => {
     loadSavedPorts();
@@ -73,22 +91,84 @@ export function PortManager({
           // Check if already open
           if (port.readable !== null && port.writable !== null) {
             isConnected = true;
+            console.log("Port already open, reusing connection");
           } else {
-            // Auto-open paired robots
-            await port.open({ baudRate: 1000000 });
-            isConnected = true;
+            // Auto-open paired robots only if they have saved configuration
+            if (savedPort?.robotType && savedPort?.robotId) {
+              console.log(
+                `Auto-connecting to saved robot: ${savedPort.robotType} (${savedPort.robotId})`
+              );
+              await port.open({ baudRate: 1000000 });
+              isConnected = true;
+            } else {
+              console.log(
+                "Port found but no saved robot configuration, skipping auto-connect"
+              );
+              isConnected = false;
+            }
           }
         } catch (error) {
           console.log("Could not auto-connect to paired robot:", error);
           isConnected = false;
         }
 
+        // Re-detect serial number for this port
+        let serialNumber = null;
+        let usbMetadata = null;
+
+        // Try to get USB device info to restore serial number
+        try {
+          // Get all USB devices and try to match with this serial port
+          const usbDevices = await navigator.usb.getDevices();
+          const portInfo = port.getInfo();
+
+          // Try to find matching USB device by vendor/product ID
+          const matchingDevice = usbDevices.find(
+            (device) =>
+              device.vendorId === portInfo.usbVendorId &&
+              device.productId === portInfo.usbProductId
+          );
+
+          if (matchingDevice) {
+            serialNumber =
+              matchingDevice.serialNumber ||
+              `${matchingDevice.vendorId}-${
+                matchingDevice.productId
+              }-${Date.now()}`;
+            usbMetadata = {
+              vendorId: `0x${matchingDevice.vendorId
+                .toString(16)
+                .padStart(4, "0")}`,
+              productId: `0x${matchingDevice.productId
+                .toString(16)
+                .padStart(4, "0")}`,
+              serialNumber: matchingDevice.serialNumber || "Generated ID",
+              manufacturerName: matchingDevice.manufacturerName || "Unknown",
+              productName: matchingDevice.productName || "Unknown",
+              usbVersionMajor: matchingDevice.usbVersionMajor,
+              usbVersionMinor: matchingDevice.usbVersionMinor,
+              deviceClass: matchingDevice.deviceClass,
+              deviceSubclass: matchingDevice.deviceSubclass,
+              deviceProtocol: matchingDevice.deviceProtocol,
+            };
+            console.log("✅ Restored USB metadata for port:", serialNumber);
+          }
+        } catch (usbError) {
+          console.log("⚠️ Could not restore USB metadata:", usbError);
+          // Generate fallback if no USB metadata available
+          serialNumber = `fallback-${Date.now()}-${Math.random()
+            .toString(36)
+            .substr(2, 9)}`;
+        }
+
         restoredPorts.push({
           port,
           name: getPortDisplayName(port),
           isConnected,
           robotType: savedPort?.robotType,
           robotId: savedPort?.robotId,
+          serialNumber: serialNumber!,
+          usbMetadata: usbMetadata || undefined,
         });
       }
 
@@ -223,18 +303,21 @@ export function PortManager({
           usbMetadata: usbMetadata || undefined,
         };
 
-        // Try to load saved robot info by serial number
-        try {
-          const savedRobotKey = `lerobot-robot-${serialNumber}`;
-          const savedData = localStorage.getItem(savedRobotKey);
-          if (savedData) {
-            const parsed = JSON.parse(savedData);
-            newRobot.robotType = parsed.robotType;
-            newRobot.robotId = parsed.robotId;
-            console.log("📋 Loaded saved robot configuration:", parsed);
+        // Try to load saved robot info by serial number using unified storage
+        if (serialNumber) {
+          try {
+            const { getRobotConfig } = await import("../lib/unified-storage");
+            const savedConfig = getRobotConfig(serialNumber);
+            if (savedConfig) {
+              newRobot.robotType = savedConfig.robotType as
+                | "so100_follower"
+                | "so100_leader";
+              newRobot.robotId = savedConfig.robotId;
+              console.log("📋 Loaded saved robot configuration:", savedConfig);
+            }
+          } catch (error) {
+            console.warn("Failed to load saved robot data:", error);
           }
-        } catch (error) {
-          console.warn("Failed to load saved robot data:", error);
         }
 
         onConnectedRobotsChange([...connectedRobots, newRobot]);
@@ -269,21 +352,109 @@ export function PortManager({
   };
 
   const handleDisconnect = async (index: number) => {
+    const portInfo = connectedRobots[index];
+    const robotName = portInfo.robotId || portInfo.name;
+    const serialNumber = portInfo.serialNumber || "unknown";
+
+    // Show confirmation dialog
+    setConfirmDeleteDialog({
+      open: true,
+      robotIndex: index,
+      robotName,
+      serialNumber,
+    });
+  };
+
+  const confirmDelete = async () => {
+    const { robotIndex } = confirmDeleteDialog;
+    const portInfo = connectedRobots[robotIndex];
+
+    setConfirmDeleteDialog({
+      open: false,
+      robotIndex: -1,
+      robotName: "",
+      serialNumber: "",
+    });
+
     try {
-      const portInfo = connectedRobots[index];
+      // Close the serial port connection
       if (portInfo.isConnected) {
         await portInfo.port.close();
       }
 
-      const updatedRobots = connectedRobots.filter((_, i) => i !== index);
+      // Delete from unified storage if serial number is available
+      if (portInfo.serialNumber) {
+        try {
+          const { getUnifiedKey } = await import("../lib/unified-storage");
+          const unifiedKey = getUnifiedKey(portInfo.serialNumber);
+
+          // Remove unified storage data
+          localStorage.removeItem(unifiedKey);
+          console.log(`🗑️ Deleted unified robot data: ${unifiedKey}`);
+
+          // Also clean up any old format keys for this robot (if they exist)
+          const oldKeys = [
+            `lerobot-robot-${portInfo.serialNumber}`,
+            `lerobot-calibration-${portInfo.serialNumber}`,
+          ];
+
+          // Try to find old calibration key by checking stored robot config
+          if (portInfo.robotType && portInfo.robotId) {
+            oldKeys.push(
+              `lerobot_calibration_${portInfo.robotType}_${portInfo.robotId}`
+            );
+          }
+
+          oldKeys.forEach((key) => {
+            if (localStorage.getItem(key)) {
+              localStorage.removeItem(key);
+              console.log(`🧹 Cleaned up old key: ${key}`);
+            }
+          });
+        } catch (error) {
+          console.warn("Failed to delete unified storage data:", error);
+
+          // Fallback: try to delete old format keys directly
+          if (portInfo.robotType && portInfo.robotId) {
+            const oldKeys = [
+              `lerobot-robot-${portInfo.serialNumber}`,
+              `lerobot-calibration-${portInfo.serialNumber}`,
+              `lerobot_calibration_${portInfo.robotType}_${portInfo.robotId}`,
+            ];
+
+            oldKeys.forEach((key) => {
+              if (localStorage.getItem(key)) {
+                localStorage.removeItem(key);
+                console.log(`🧹 Removed old format key: ${key}`);
+              }
+            });
+          }
+        }
+      }
+
+      // Remove from UI
+      const updatedRobots = connectedRobots.filter((_, i) => i !== robotIndex);
       onConnectedRobotsChange(updatedRobots);
+
+      console.log(
+        `✅ Robot "${confirmDeleteDialog.robotName}" permanently removed from system`
+      );
     } catch (error) {
       setError(
-        error instanceof Error ? error.message : "Failed to disconnect port"
+        error instanceof Error ? error.message : "Failed to remove robot"
       );
     }
   };
 
+  const cancelDelete = () => {
+    setConfirmDeleteDialog({
+      open: false,
+      robotIndex: -1,
+      robotName: "",
+      serialNumber: "",
+    });
+  };
+
   const handleUpdatePortInfo = (
     index: number,
     robotType: "so100_follower" | "so100_leader",
@@ -293,24 +464,24 @@ export function PortManager({
       if (i === index) {
         const updatedRobot = { ...robot, robotType, robotId };
 
-        // Save robot configuration to localStorage using serial number
+        // Save robot configuration using unified storage
         if (updatedRobot.serialNumber) {
-          try {
-            const robotKey = `lerobot-robot-${updatedRobot.serialNumber}`;
-            const robotData = {
-              robotType,
-              robotId,
-              serialNumber: updatedRobot.serialNumber,
-              lastUpdated: new Date().toISOString(),
-            };
-            localStorage.setItem(robotKey, JSON.stringify(robotData));
-            console.log(
-              "💾 Saved robot configuration for:",
-              updatedRobot.serialNumber
-            );
-          } catch (error) {
-            console.warn("Failed to save robot configuration:", error);
-          }
+          import("../lib/unified-storage")
+            .then(({ saveRobotConfig }) => {
+              saveRobotConfig(
+                updatedRobot.serialNumber!,
+                robotType,
+                robotId,
+                updatedRobot.usbMetadata
+              );
+              console.log(
+                "💾 Saved robot configuration for:",
+                updatedRobot.serialNumber
+              );
+            })
+            .catch((error) => {
+              console.warn("Failed to save robot configuration:", error);
+            });
         }
 
         return updatedRobot;
@@ -519,6 +690,61 @@ export function PortManager({
           </div>
         </div>
       </CardContent>
+
+      {/* Confirmation Dialog */}
+      <Dialog open={confirmDeleteDialog.open} onOpenChange={cancelDelete}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>🗑️ Permanently Delete Robot Data?</DialogTitle>
+            <DialogDescription>
+              This action cannot be undone. All robot data will be permanently
+              deleted.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-3">
+            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
+              <div className="font-medium text-red-900 mb-2">
+                Robot Information:
+              </div>
+              <div className="text-sm text-red-800 space-y-1">
+                <div>
+                  • Name:{" "}
+                  <span className="font-mono">
+                    {confirmDeleteDialog.robotName}
+                  </span>
+                </div>
+                <div>
+                  • Serial:{" "}
+                  <span className="font-mono">
+                    {confirmDeleteDialog.serialNumber}
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="p-4 bg-red-50 rounded-lg border border-red-200">
+              <div className="font-medium text-red-900 mb-2">
+                This will permanently delete:
+              </div>
+              <div className="text-sm text-red-800 space-y-1">
+                <div>• Robot configuration</div>
+                <div>• Calibration data</div>
+                <div>• All saved settings</div>
+              </div>
+            </div>
+          </div>
+
+          <DialogFooter>
+            <Button variant="outline" onClick={cancelDelete}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              Delete Forever
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </Card>
   );
 }
@@ -549,22 +775,38 @@ function PortCard({
   const [portMetadata, setPortMetadata] = useState<any>(null);
   const [showDeviceInfo, setShowDeviceInfo] = useState(false);
 
-  // Check for calibration in localStorage using serial number
+  // Check for calibration using unified storage
   const getCalibrationStatus = () => {
-    if (!portInfo.serialNumber) return null;
+    // Use the same serial number logic as calibration: prefer main serialNumber, fallback to USB metadata, then "unknown"
+    const serialNumber =
+      portInfo.serialNumber || portInfo.usbMetadata?.serialNumber || "unknown";
 
-    const calibrationKey = `lerobot-calibration-${portInfo.serialNumber}`;
     try {
-      const saved = localStorage.getItem(calibrationKey);
-      if (saved) {
-        const calibrationData = JSON.parse(saved);
-        return {
-          timestamp: calibrationData.timestamp,
-          readCount: calibrationData.readCount,
-        };
+      // Use unified storage system with automatic migration
+      import("../lib/unified-storage")
+        .then(({ getCalibrationStatus }) => {
+          const status = getCalibrationStatus(serialNumber);
+          return status;
+        })
+        .catch((error) => {
+          console.warn("Failed to load unified calibration data:", error);
+          return null;
+        });
+
+      // For immediate synchronous return, try to get existing unified data first
+      const unifiedKey = `lerobotjs-${serialNumber}`;
+      const existing = localStorage.getItem(unifiedKey);
+      if (existing) {
+        const data = JSON.parse(existing);
+        if (data.calibration?.metadata) {
+          return {
+            timestamp: data.calibration.metadata.timestamp,
+            readCount: data.calibration.metadata.readCount,
+          };
+        }
       }
     } catch (error) {
-      console.warn("Failed to read calibration from localStorage:", error);
+      console.warn("Failed to read calibration from unified storage:", error);
     }
     return null;
   };
@@ -816,11 +1058,6 @@ function PortCard({
           <Badge variant={portInfo.isConnected ? "default" : "outline"}>
             {portInfo.isConnected ? "Connected" : "Available"}
           </Badge>
-          {portInfo.usbMetadata && (
-            <Badge variant="outline" className="text-xs">
-              {portInfo.usbMetadata.manufacturerName}
-            </Badge>
-          )}
         </div>
         <Button variant="destructive" size="sm" onClick={onDisconnect}>
           Remove

src/demo/components/ui/dialog.tsx

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

src/demo/components/ui/progress.tsx

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

src/demo/lib/unified-storage.ts

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

src/demo/main.tsx

@@ -3,8 +3,4 @@ import ReactDOM from "react-dom/client";
 import { App } from "./App";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
+ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

src/demo/pages/Calibrate.tsx

@@ -1,121 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
-import { Alert, AlertDescription } from "../components/ui/alert";
-import { Badge } from "../components/ui/badge";
-import { CalibrationWizard } from "../components/CalibrationWizard";
-import type { ConnectedRobot } from "../types";
-
-interface CalibrateProps {
-  selectedRobot: ConnectedRobot;
-  onBack: () => void;
-  onHome: () => void;
-}
-
-export function Calibrate({ selectedRobot, onBack, onHome }: CalibrateProps) {
-  const [calibrationStarted, setCalibrationStarted] = useState(false);
-
-  // Auto-start calibration when component mounts
-  useEffect(() => {
-    if (selectedRobot && selectedRobot.isConnected) {
-      setCalibrationStarted(true);
-    }
-  }, [selectedRobot]);
-
-  if (!selectedRobot) {
-    return (
-      <div className="container mx-auto px-4 py-8">
-        <Alert variant="destructive">
-          <AlertDescription>
-            No robot selected. Please go back to setup.
-          </AlertDescription>
-        </Alert>
-        <div className="mt-4">
-          <Button onClick={onBack}>Back to Setup</Button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container mx-auto px-4 py-8 max-w-4xl">
-      <div className="space-y-6">
-        <div className="text-center space-y-2">
-          <h1 className="text-3xl font-bold">Robot Calibration</h1>
-          <p className="text-muted-foreground">
-            Calibrating: {selectedRobot.robotId}
-          </p>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-xl">
-                  {selectedRobot.robotId}
-                </CardTitle>
-                <CardDescription>{selectedRobot.name}</CardDescription>
-              </div>
-              <div className="flex items-center space-x-2">
-                <Badge
-                  variant={selectedRobot.isConnected ? "default" : "secondary"}
-                >
-                  {selectedRobot.isConnected ? "Connected" : "Disconnected"}
-                </Badge>
-                <Badge variant="outline">
-                  {selectedRobot.robotType?.replace("_", " ")}
-                </Badge>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {!selectedRobot.isConnected ? (
-              <Alert variant="destructive">
-                <AlertDescription>
-                  Robot is not connected. Please check connection and try again.
-                </AlertDescription>
-              </Alert>
-            ) : calibrationStarted ? (
-              <CalibrationWizard
-                robot={selectedRobot}
-                onComplete={onHome}
-                onCancel={onBack}
-              />
-            ) : (
-              <div className="space-y-4">
-                <div className="text-center py-8">
-                  <div className="text-2xl mb-4">🛠️</div>
-                  <h3 className="text-lg font-semibold mb-2">
-                    Ready to Calibrate
-                  </h3>
-                  <p className="text-muted-foreground mb-4">
-                    Make sure your robot arm is in a safe position and you have
-                    a clear workspace.
-                  </p>
-                  <Button onClick={() => setCalibrationStarted(true)} size="lg">
-                    Start Calibration
-                  </Button>
-                </div>
-              </div>
-            )}
-          </CardContent>
-        </Card>
-
-        <div className="flex justify-center space-x-4">
-          <Button variant="outline" onClick={onBack}>
-            Back to Setup
-          </Button>
-          <Button variant="outline" onClick={onHome}>
-            Back to Home
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/demo/pages/Setup.tsx

@@ -1,99 +0,0 @@
-import React from "react";
-import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
-import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
-import { Badge } from "../components/ui/badge";
-import type { ConnectedRobot } from "../types";
-
-interface SetupProps {
-  connectedRobots: ConnectedRobot[];
-  onBack: () => void;
-  onNext: (robot: ConnectedRobot) => void;
-}
-
-export function Setup({ connectedRobots, onBack, onNext }: SetupProps) {
-  const configuredRobots = connectedRobots.filter(
-    (r) => r.robotType && r.robotId
-  );
-
-  return (
-    <div className="container mx-auto px-4 py-8 max-w-4xl">
-      <div className="space-y-6">
-        <div className="text-center space-y-2">
-          <h1 className="text-3xl font-bold">Robot Setup</h1>
-          <p className="text-muted-foreground">
-            Select a connected robot to calibrate
-          </p>
-        </div>
-
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-semibold">Connected Robots</h2>
-            <Badge variant="outline">{configuredRobots.length} ready</Badge>
-          </div>
-
-          {configuredRobots.length === 0 ? (
-            <Card>
-              <CardContent className="text-center py-8">
-                <div className="text-muted-foreground space-y-2">
-                  <p>No configured robots found.</p>
-                  <p className="text-sm">
-                    Go back to the home page to connect and configure your
-                    robots.
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-          ) : (
-            <div className="grid gap-4">
-              {configuredRobots.map((robot, index) => (
-                <Card
-                  key={index}
-                  className="cursor-pointer hover:shadow-md transition-shadow"
-                >
-                  <CardHeader>
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <CardTitle className="text-lg">
-                          {robot.robotId}
-                        </CardTitle>
-                        <CardDescription>{robot.name}</CardDescription>
-                      </div>
-                      <div className="flex items-center space-x-2">
-                        <Badge
-                          variant={robot.isConnected ? "default" : "outline"}
-                        >
-                          {robot.isConnected ? "Connected" : "Available"}
-                        </Badge>
-                        <Badge variant="outline">
-                          {robot.robotType?.replace("_", " ")}
-                        </Badge>
-                      </div>
-                    </div>
-                  </CardHeader>
-                  <CardContent>
-                    <Button onClick={() => onNext(robot)} className="w-full">
-                      Calibrate This Robot
-                    </Button>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
-
-        <div className="flex justify-center">
-          <Button variant="outline" onClick={onBack}>
-            Back to Home
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}

src/lerobot/web/calibrate.ts

@@ -1,334 +1,808 @@
 /**
  * Web calibration functionality using Web Serial API
- * For browser environments - matches Node.js implementation
+ * For browser environments - matches Node.js implementation exactly
  */
 
 import type { CalibrateConfig } from "../node/robots/config.js";
 
 /**
- * Web Serial Port wrapper to match Node.js SerialPort interface
+ * Device-agnostic calibration configuration for web
+ * Mirrors the Node.js SO100CalibrationConfig exactly
+ */
+interface WebCalibrationConfig {
+  deviceType: "so100_follower" | "so100_leader";
+  port: WebSerialPortWrapper;
+  motorNames: string[];
+  motorIds: number[];
+  driveModes: number[];
+  calibModes: string[];
+
+  // Protocol-specific configuration (matches Node.js exactly)
+  protocol: {
+    resolution: number;
+    homingOffsetAddress: number;
+    homingOffsetLength: number;
+    presentPositionAddress: number;
+    presentPositionLength: number;
+    minPositionLimitAddress: number;
+    minPositionLimitLength: number;
+    maxPositionLimitAddress: number;
+    maxPositionLimitLength: number;
+    signMagnitudeBit: number;
+  };
+
+  limits: {
+    position_min: number[];
+    position_max: number[];
+    velocity_max: number[];
+    torque_max: number[];
+  };
+}
+
+/**
+ * Calibration results structure matching Python lerobot format exactly
+ */
+export interface WebCalibrationResults {
+  [motorName: string]: {
+    id: number;
+    drive_mode: number;
+    homing_offset: number;
+    range_min: number;
+    range_max: number;
+  };
+}
+
+/**
+ * STS3215 Protocol Configuration for web (matches Node.js exactly)
+ */
+const WEB_STS3215_PROTOCOL = {
+  resolution: 4096, // 12-bit resolution (0-4095)
+  homingOffsetAddress: 31, // Address for Homing_Offset register
+  homingOffsetLength: 2, // 2 bytes for Homing_Offset
+  presentPositionAddress: 56, // Address for Present_Position register
+  presentPositionLength: 2, // 2 bytes for Present_Position
+  minPositionLimitAddress: 9, // Address for Min_Position_Limit register
+  minPositionLimitLength: 2, // 2 bytes for Min_Position_Limit
+  maxPositionLimitAddress: 11, // Address for Max_Position_Limit register
+  maxPositionLimitLength: 2, // 2 bytes for Max_Position_Limit
+  signMagnitudeBit: 11, // Bit 11 is sign bit for Homing_Offset encoding
+} as const;
+
+/**
+ * Sign-magnitude encoding functions (matches Node.js exactly)
+ */
+function encodeSignMagnitude(value: number, signBitIndex: number): number {
+  const maxMagnitude = (1 << signBitIndex) - 1;
+  const magnitude = Math.abs(value);
+
+  if (magnitude > maxMagnitude) {
+    throw new Error(
+      `Magnitude ${magnitude} exceeds ${maxMagnitude} (max for signBitIndex=${signBitIndex})`
+    );
+  }
+
+  const directionBit = value < 0 ? 1 : 0;
+  return (directionBit << signBitIndex) | magnitude;
+}
+
+/**
+ * PROPER Web Serial Port wrapper following Chrome documentation exactly
+ * Direct write/read with immediate lock release - NO persistent connections
  */
 class WebSerialPortWrapper {
   private port: SerialPort;
-  private reader: ReadableStreamDefaultReader<Uint8Array> | null = null;
-  private writer: WritableStreamDefaultWriter<Uint8Array> | null = null;
 
   constructor(port: SerialPort) {
     this.port = port;
   }
 
   get isOpen(): boolean {
-    return this.port !== null && this.port.readable !== null;
+    return (
+      this.port !== null &&
+      this.port.readable !== null &&
+      this.port.writable !== null
+    );
   }
 
   async initialize(): Promise<void> {
-    // Set up reader and writer for already opened port
-    if (this.port.readable) {
-      this.reader = this.port.readable.getReader();
-    }
-    if (this.port.writable) {
-      this.writer = this.port.writable.getWriter();
+    if (!this.port.readable || !this.port.writable) {
+      throw new Error("Port is not open for reading/writing");
     }
   }
 
-  async write(data: Buffer): Promise<void> {
-    if (!this.writer) {
+  /**
+   * Write data - EXACTLY like Chrome documentation
+   * Get writer, write, release lock immediately
+   */
+  async write(data: Uint8Array): Promise<void> {
+    if (!this.port.writable) {
       throw new Error("Port not open for writing");
     }
-    await this.writer.write(new Uint8Array(data));
+
+    // Write packet to motor
+
+    const writer = this.port.writable.getWriter();
+    try {
+      await writer.write(data);
+    } finally {
+      writer.releaseLock();
+    }
   }
 
-  async read(timeout: number = 5000): Promise<Buffer> {
-    if (!this.reader) {
+  /**
+   * Read data - EXACTLY like Chrome documentation
+   * Get reader, read once, release lock immediately
+   */
+  async read(timeout: number = 1000): Promise<Uint8Array> {
+    if (!this.port.readable) {
       throw new Error("Port not open for reading");
     }
 
-    return new Promise<Buffer>((resolve, reject) => {
-      const timer = setTimeout(() => {
-        reject(new Error("Read timeout"));
-      }, timeout);
+    const reader = this.port.readable.getReader();
 
-      this.reader!.read()
-        .then(({ value, done }) => {
-          clearTimeout(timer);
-          if (done || !value) {
-            reject(new Error("Read failed"));
-          } else {
-            resolve(Buffer.from(value));
-          }
-        })
-        .catch(reject);
-    });
-  }
+    try {
+      // Set up timeout
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error("Read timeout")), timeout);
+      });
 
-  async close(): Promise<void> {
-    if (this.reader) {
-      await this.reader.cancel();
-      this.reader = null;
-    }
-    if (this.writer) {
-      this.writer.releaseLock();
-      this.writer = null;
+      // Race between read and timeout
+      const result = await Promise.race([reader.read(), timeoutPromise]);
+
+      const { value, done } = result;
+
+      if (done || !value) {
+        throw new Error("Read failed - port closed or no data");
+      }
+
+      const response = new Uint8Array(value);
+      return response;
+    } finally {
+      reader.releaseLock();
     }
-    // Don't close the port itself - let the UI manage that
   }
-}
 
-/**
- * SO-100 calibration configuration for web
- */
-interface WebSO100CalibrationConfig {
-  deviceType: "so100_follower" | "so100_leader";
-  port: WebSerialPortWrapper;
-  motorNames: string[];
-  driveModes: number[];
-  calibModes: string[];
-  limits: {
-    position_min: number[];
-    position_max: number[];
-    velocity_max: number[];
-    torque_max: number[];
-  };
+  async close(): Promise<void> {
+    // Don't close the port itself - just wrapper cleanup
+  }
 }
 
 /**
- * Read motor positions using Web Serial API
+ * Read motor positions using device-agnostic configuration (exactly like Node.js)
  */
 async function readMotorPositions(
-  config: WebSO100CalibrationConfig
+  config: WebCalibrationConfig
 ): Promise<number[]> {
   const motorPositions: number[] = [];
-  const motorIds = [1, 2, 3, 4, 5, 6]; // SO-100 uses servo IDs 1-6
 
-  for (let i = 0; i < motorIds.length; i++) {
-    const motorId = motorIds[i];
+  // Reading motor positions
+
+  for (let i = 0; i < config.motorIds.length; i++) {
+    const motorId = config.motorIds[i];
+    const motorName = config.motorNames[i];
 
     try {
-      // Create STS3215 Read Position packet
-      const packet = Buffer.from([
+      // Create Read Position packet using configurable address
+      const packet = new Uint8Array([
         0xff,
         0xff,
         motorId,
         0x04,
         0x02,
-        0x38,
+        config.protocol.presentPositionAddress, // Configurable address
         0x02,
         0x00,
       ]);
-      const checksum = ~(motorId + 0x04 + 0x02 + 0x38 + 0x02) & 0xff;
+      const checksum =
+        ~(
+          motorId +
+          0x04 +
+          0x02 +
+          config.protocol.presentPositionAddress +
+          0x02
+        ) & 0xff;
       packet[7] = checksum;
 
-      await config.port.write(packet);
+      // Professional Feetech communication pattern (based on matthieuvigne/STS_servos)
+      let attempts = 0;
+      let success = false;
+
+      while (attempts < 3 && !success) {
+        attempts++;
+
+        // Clear any remaining data in buffer first (critical for Web Serial)
+        try {
+          await config.port.read(0); // Non-blocking read to clear buffer
+        } catch (e) {
+          // Expected - buffer was empty
+        }
+
+        // Write command with proper timing
+        await config.port.write(packet);
+
+        // Arduino library uses careful timing - Web Serial needs more
+        await new Promise((resolve) => setTimeout(resolve, 10));
+
+        const response = await config.port.read(150);
 
-      try {
-        const response = await config.port.read(100);
         if (response.length >= 7) {
           const id = response[2];
           const error = response[4];
+
           if (id === motorId && error === 0) {
             const position = response[5] | (response[6] << 8);
             motorPositions.push(position);
+            success = true;
+          } else if (id === motorId && error !== 0) {
+            // Motor error, retry
           } else {
-            motorPositions.push(2047); // Fallback to center
+            // Wrong response ID, retry
           }
         } else {
-          motorPositions.push(2047);
+          // Short response, retry
+        }
+
+        // Professional timing between attempts (like Arduino libraries)
+        if (!success && attempts < 3) {
+          await new Promise((resolve) => setTimeout(resolve, 20));
         }
-      } catch (readError) {
-        motorPositions.push(2047);
+      }
+
+      // If all attempts failed, use fallback
+      if (!success) {
+        const fallback = Math.floor((config.protocol.resolution - 1) / 2);
+        motorPositions.push(fallback);
       }
     } catch (error) {
-      motorPositions.push(2047);
+      const fallback = Math.floor((config.protocol.resolution - 1) / 2);
+      motorPositions.push(fallback);
     }
 
-    // Minimal delay between servo reads
-    await new Promise((resolve) => setTimeout(resolve, 2));
+    // Professional inter-motor delay (based on Arduino STS_servos library)
+    await new Promise((resolve) => setTimeout(resolve, 10));
   }
 
   return motorPositions;
 }
 
 /**
- * Interactive web calibration with live updates
+ * Reset homing offsets to 0 for all motors (matches Node.js exactly)
  */
-async function performWebCalibration(
-  config: WebSO100CalibrationConfig
-): Promise<any> {
-  // Step 1: Set homing position
-  alert(
-    `📍 STEP 1: Set Homing Position\n\nMove the SO-100 ${config.deviceType} to the MIDDLE of its range of motion and click OK...`
-  );
+async function resetHomingOffsets(config: WebCalibrationConfig): Promise<void> {
+  for (let i = 0; i < config.motorIds.length; i++) {
+    const motorId = config.motorIds[i];
+    const motorName = config.motorNames[i];
+
+    try {
+      const homingOffsetValue = 0;
+
+      // Create Write Homing_Offset packet using configurable address
+      const packet = new Uint8Array([
+        0xff,
+        0xff, // Header
+        motorId, // Servo ID
+        0x05, // Length
+        0x03, // Instruction: WRITE_DATA
+        config.protocol.homingOffsetAddress, // Configurable address
+        homingOffsetValue & 0xff, // Data_L (low byte)
+        (homingOffsetValue >> 8) & 0xff, // Data_H (high byte)
+        0x00, // Checksum (will calculate)
+      ]);
+
+      // Calculate checksum using configurable address
+      const checksum =
+        ~(
+          motorId +
+          0x05 +
+          0x03 +
+          config.protocol.homingOffsetAddress +
+          (homingOffsetValue & 0xff) +
+          ((homingOffsetValue >> 8) & 0xff)
+        ) & 0xff;
+      packet[8] = checksum;
+
+      // Simple write then read like Node.js
+      await config.port.write(packet);
+
+      // Wait for response (silent unless error)
+      try {
+        await config.port.read(200);
+      } catch (error) {
+        // Silent - response not required for successful operation
+      }
+    } catch (error) {
+      throw new Error(
+        `Failed to reset homing offset for ${motorName}: ${
+          error instanceof Error ? error.message : error
+        }`
+      );
+    }
+  }
+}
+
+/**
+ * Write homing offsets to motor registers immediately (matches Node.js exactly)
+ */
+async function writeHomingOffsetsToMotors(
+  config: WebCalibrationConfig,
+  homingOffsets: { [motor: string]: number }
+): Promise<void> {
+  for (let i = 0; i < config.motorIds.length; i++) {
+    const motorId = config.motorIds[i];
+    const motorName = config.motorNames[i];
+    const homingOffset = homingOffsets[motorName];
+
+    try {
+      // Encode using sign-magnitude format
+      const encodedOffset = encodeSignMagnitude(
+        homingOffset,
+        config.protocol.signMagnitudeBit
+      );
+
+      // Create Write Homing_Offset packet
+      const packet = new Uint8Array([
+        0xff,
+        0xff, // Header
+        motorId, // Servo ID
+        0x05, // Length
+        0x03, // Instruction: WRITE_DATA
+        config.protocol.homingOffsetAddress, // Homing_Offset address
+        encodedOffset & 0xff, // Data_L (low byte)
+        (encodedOffset >> 8) & 0xff, // Data_H (high byte)
+        0x00, // Checksum (will calculate)
+      ]);
+
+      // Calculate checksum
+      const checksum =
+        ~(
+          motorId +
+          0x05 +
+          0x03 +
+          config.protocol.homingOffsetAddress +
+          (encodedOffset & 0xff) +
+          ((encodedOffset >> 8) & 0xff)
+        ) & 0xff;
+      packet[8] = checksum;
+
+      // Simple write then read like Node.js
+      await config.port.write(packet);
+
+      // Wait for response (silent unless error)
+      try {
+        await config.port.read(200);
+      } catch (error) {
+        // Silent - response not required for successful operation
+      }
+    } catch (error) {
+      throw new Error(
+        `Failed to write homing offset for ${motorName}: ${
+          error instanceof Error ? error.message : error
+        }`
+      );
+    }
+  }
+}
 
+/**
+ * Record homing offsets with immediate writing (matches Node.js exactly)
+ */
+async function setHomingOffsets(
+  config: WebCalibrationConfig
+): Promise<{ [motor: string]: number }> {
+  console.log("🏠 Setting homing offsets...");
+
+  // CRITICAL: Reset existing homing offsets to 0 first (matching Python)
+  await resetHomingOffsets(config);
+
+  // Wait a moment for reset to take effect
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  // Now read positions (which will be true physical positions)
   const currentPositions = await readMotorPositions(config);
   const homingOffsets: { [motor: string]: number } = {};
+
+  const halfTurn = Math.floor((config.protocol.resolution - 1) / 2);
+
   for (let i = 0; i < config.motorNames.length; i++) {
     const motorName = config.motorNames[i];
     const position = currentPositions[i];
-    const maxRes = 4095; // STS3215 resolution
-    homingOffsets[motorName] = position - Math.floor(maxRes / 2);
+
+    // Generic formula: pos - int((max_res - 1) / 2) using configurable resolution
+    const homingOffset = position - halfTurn;
+    homingOffsets[motorName] = homingOffset;
   }
 
-  // Step 2: Record ranges with simplified interface for web
-  alert(
-    `📏 STEP 2: Record Joint Ranges\n\nMove all joints through their full range of motion, then click OK when finished...`
-  );
+  // CRITICAL: Write homing offsets to motors immediately (matching Python exactly)
+  await writeHomingOffsetsToMotors(config, homingOffsets);
+
+  return homingOffsets;
+}
+
+/**
+ * Generic function to write a 2-byte value to a motor register (matches Node.js exactly)
+ */
+async function writeMotorRegister(
+  config: WebCalibrationConfig,
+  motorId: number,
+  registerAddress: number,
+  value: number,
+  description: string
+): Promise<void> {
+  // Create Write Register packet
+  const packet = new Uint8Array([
+    0xff,
+    0xff, // Header
+    motorId, // Servo ID
+    0x05, // Length
+    0x03, // Instruction: WRITE_DATA
+    registerAddress, // Register address
+    value & 0xff, // Data_L (low byte)
+    (value >> 8) & 0xff, // Data_H (high byte)
+    0x00, // Checksum (will calculate)
+  ]);
+
+  // Calculate checksum
+  const checksum =
+    ~(
+      motorId +
+      0x05 +
+      0x03 +
+      registerAddress +
+      (value & 0xff) +
+      ((value >> 8) & 0xff)
+    ) & 0xff;
+  packet[8] = checksum;
+
+  // Simple write then read like Node.js
+  await config.port.write(packet);
+
+  // Wait for response (silent unless error)
+  try {
+    await config.port.read(200);
+  } catch (error) {
+    // Silent - response not required for successful operation
+  }
+}
+
+/**
+ * Write hardware position limits to motors (matches Node.js exactly)
+ */
+async function writeHardwarePositionLimits(
+  config: WebCalibrationConfig,
+  rangeMins: { [motor: string]: number },
+  rangeMaxes: { [motor: string]: number }
+): Promise<void> {
+  for (let i = 0; i < config.motorIds.length; i++) {
+    const motorId = config.motorIds[i];
+    const motorName = config.motorNames[i];
+    const minLimit = rangeMins[motorName];
+    const maxLimit = rangeMaxes[motorName];
+
+    try {
+      // Write Min_Position_Limit register
+      await writeMotorRegister(
+        config,
+        motorId,
+        config.protocol.minPositionLimitAddress,
+        minLimit,
+        `Min_Position_Limit for ${motorName}`
+      );
+
+      // Write Max_Position_Limit register
+      await writeMotorRegister(
+        config,
+        motorId,
+        config.protocol.maxPositionLimitAddress,
+        maxLimit,
+        `Max_Position_Limit for ${motorName}`
+      );
+    } catch (error) {
+      throw new Error(
+        `Failed to write position limits for ${motorName}: ${
+          error instanceof Error ? error.message : error
+        }`
+      );
+    }
+  }
+}
 
+/**
+ * Record ranges of motion with manual control (user decides when to stop)
+ */
+async function recordRangesOfMotion(
+  config: WebCalibrationConfig,
+  shouldStop: () => boolean,
+  onUpdate?: (
+    rangeMins: { [motor: string]: number },
+    rangeMaxes: { [motor: string]: number },
+    currentPositions: { [motor: string]: number }
+  ) => void
+): Promise<{
+  rangeMins: { [motor: string]: number };
+  rangeMaxes: { [motor: string]: number };
+}> {
   const rangeMins: { [motor: string]: number } = {};
   const rangeMaxes: { [motor: string]: number } = {};
 
-  // Initialize with current positions
-  const initialPositions = await readMotorPositions(config);
+  // Read actual current positions (matching Python exactly)
+  // After homing offsets are applied, these should be ~2047 (centered)
+  const startPositions = await readMotorPositions(config);
+
   for (let i = 0; i < config.motorNames.length; i++) {
     const motorName = config.motorNames[i];
-    const position = initialPositions[i];
-    rangeMins[motorName] = position;
-    rangeMaxes[motorName] = position;
+    const startPosition = startPositions[i];
+    rangeMins[motorName] = startPosition; // Use actual position, not hardcoded 2047
+    rangeMaxes[motorName] = startPosition; // Use actual position, not hardcoded 2047
   }
 
-  // Record positions for a brief period
-  const recordingDuration = 10000; // 10 seconds
-  const startTime = Date.now();
+  // Manual recording using simple while loop like Node.js
+  let recordingCount = 0;
 
-  while (Date.now() - startTime < recordingDuration) {
-    const positions = await readMotorPositions(config);
+  while (!shouldStop()) {
+    try {
+      const positions = await readMotorPositions(config);
+      recordingCount++;
+
+      for (let i = 0; i < config.motorNames.length; i++) {
+        const motorName = config.motorNames[i];
+        const position = positions[i];
+        const oldMin = rangeMins[motorName];
+        const oldMax = rangeMaxes[motorName];
 
-    for (let i = 0; i < config.motorNames.length; i++) {
-      const motorName = config.motorNames[i];
-      const position = positions[i];
+        if (position < rangeMins[motorName]) {
+          rangeMins[motorName] = position;
+        }
+        if (position > rangeMaxes[motorName]) {
+          rangeMaxes[motorName] = position;
+        }
 
-      if (position < rangeMins[motorName]) {
-        rangeMins[motorName] = position;
+        // Track range expansions silently
       }
-      if (position > rangeMaxes[motorName]) {
-        rangeMaxes[motorName] = position;
+
+      // Continue recording silently
+
+      // Call update callback if provided (for live UI updates)
+      if (onUpdate) {
+        // Convert positions array to motor name map for UI
+        const currentPositions: { [motor: string]: number } = {};
+        for (let i = 0; i < config.motorNames.length; i++) {
+          currentPositions[config.motorNames[i]] = positions[i];
+        }
+        onUpdate(rangeMins, rangeMaxes, currentPositions);
       }
+    } catch (error) {
+      console.warn("Error during range recording:", error);
     }
 
-    await new Promise((resolve) => setTimeout(resolve, 100));
+    // 20fps reading rate for stable Web Serial communication while maintaining responsive UI
+    await new Promise((resolve) => setTimeout(resolve, 50));
   }
 
-  return {
-    homing_offset: config.motorNames.map((name) => homingOffsets[name]),
-    drive_mode: config.driveModes,
-    start_pos: config.motorNames.map((name) => rangeMins[name]),
-    end_pos: config.motorNames.map((name) => rangeMaxes[name]),
-    calib_mode: config.calibModes,
-    motor_names: config.motorNames,
-  };
+  // Range recording finished
+
+  return { rangeMins, rangeMaxes };
 }
 
 /**
- * Calibrate a device using an already connected port
+ * Interactive web calibration with manual control - user decides when to stop recording
  */
-export async function calibrateWithPort(
-  armType: "so100_follower" | "so100_leader",
-  armId: string,
-  connectedPort: SerialPort
-): Promise<void> {
-  try {
-    // Create web serial port wrapper
-    const port = new WebSerialPortWrapper(connectedPort);
-    await port.initialize();
-
-    // Get SO-100 calibration configuration
-    const so100Config: WebSO100CalibrationConfig = {
-      deviceType: armType,
-      port,
-      motorNames: [
-        "shoulder_pan",
-        "shoulder_lift",
-        "elbow_flex",
-        "wrist_flex",
-        "wrist_roll",
-        "gripper",
-      ],
-      driveModes: [0, 0, 0, 0, 0, 0],
-      calibModes: [
-        "position",
-        "position",
-        "position",
-        "position",
-        "position",
-        "position",
-      ],
-      limits: {
-        position_min: [0, 0, 0, 0, 0, 0],
-        position_max: [4095, 4095, 4095, 4095, 4095, 4095],
-        velocity_max: [100, 100, 100, 100, 100, 100],
-        torque_max: [50, 50, 50, 50, 25, 25],
-      },
-    };
+async function performWebCalibration(
+  config: WebCalibrationConfig,
+  shouldStopRecording: () => boolean,
+  onRangeUpdate?: (
+    rangeMins: { [motor: string]: number },
+    rangeMaxes: { [motor: string]: number },
+    currentPositions: { [motor: string]: number }
+  ) => void
+): Promise<WebCalibrationResults> {
+  // Step 1: Set homing position
+  const homingOffsets = await setHomingOffsets(config);
 
-    // Perform calibration
-    const calibrationResults = await performWebCalibration(so100Config);
-
-    // Save to browser storage and download
-    const calibrationData = {
-      ...calibrationResults,
-      device_type: armType,
-      device_id: armId,
-      calibrated_at: new Date().toISOString(),
-      platform: "web",
-      api: "Web Serial API",
-    };
+  // Step 2: Record ranges of motion with manual control
+  const { rangeMins, rangeMaxes } = await recordRangesOfMotion(
+    config,
+    shouldStopRecording,
+    onRangeUpdate
+  );
 
-    const storageKey = `lerobot_calibration_${armType}_${armId}`;
-    localStorage.setItem(storageKey, JSON.stringify(calibrationData));
+  // Step 3: Set special range for wrist_roll (full turn motor)
+  rangeMins["wrist_roll"] = 0;
+  rangeMaxes["wrist_roll"] = 4095;
 
-    // Download calibration file
-    downloadCalibrationFile(calibrationData, armId);
+  // Step 4: Write hardware position limits to motors (matching Python behavior)
+  await writeHardwarePositionLimits(config, rangeMins, rangeMaxes);
 
-    // Close wrapper (but not the underlying port)
-    await port.close();
+  // Compile results in Python-compatible format (NOT array format!)
+  const results: WebCalibrationResults = {};
 
-    console.log(`Configuration saved to browser storage and downloaded.`);
-  } catch (error) {
-    throw new Error(
-      `Web calibration failed: ${
-        error instanceof Error ? error.message : error
-      }`
-    );
+  for (let i = 0; i < config.motorNames.length; i++) {
+    const motorName = config.motorNames[i];
+    const motorId = config.motorIds[i];
+
+    results[motorName] = {
+      id: motorId,
+      drive_mode: config.driveModes[i],
+      homing_offset: homingOffsets[motorName],
+      range_min: rangeMins[motorName],
+      range_max: rangeMaxes[motorName],
+    };
   }
+
+  return results;
 }
 
 /**
- * Calibrate a device in the browser using Web Serial API
- * Must be called from user interaction (button click)
- * This version requests a new port - use calibrateWithPort for already connected ports
+ * Step-by-step calibration for React components
  */
-export async function calibrate(config: CalibrateConfig): Promise<void> {
-  // Validate Web Serial API support
-  if (!("serial" in navigator)) {
-    throw new Error("Web Serial API not supported in this browser");
+export class WebCalibrationController {
+  private config: WebCalibrationConfig;
+  private homingOffsets: { [motor: string]: number } | null = null;
+  private rangeMins: { [motor: string]: number } | null = null;
+  private rangeMaxes: { [motor: string]: number } | null = null;
+
+  constructor(config: WebCalibrationConfig) {
+    this.config = config;
   }
 
-  // Validate configuration
-  if (Boolean(config.robot) === Boolean(config.teleop)) {
-    throw new Error("Choose either a robot or a teleop.");
+  async readMotorPositions(): Promise<number[]> {
+    return await readMotorPositions(this.config);
   }
 
-  const deviceConfig = config.robot || config.teleop!;
+  async performHomingStep(): Promise<void> {
+    this.homingOffsets = await setHomingOffsets(this.config);
+  }
 
-  try {
-    // Request a new port for this calibration
-    const port = await navigator.serial.requestPort();
-    await port.open({ baudRate: 1000000 });
-
-    // Use the new port calibration function
-    await calibrateWithPort(
-      deviceConfig.type as "so100_follower" | "so100_leader",
-      deviceConfig.id || deviceConfig.type,
-      port
+  async performRangeRecordingStep(
+    shouldStop: () => boolean,
+    onUpdate?: (
+      rangeMins: { [motor: string]: number },
+      rangeMaxes: { [motor: string]: number },
+      currentPositions: { [motor: string]: number }
+    ) => void
+  ): Promise<void> {
+    const { rangeMins, rangeMaxes } = await recordRangesOfMotion(
+      this.config,
+      shouldStop,
+      onUpdate
+    );
+    this.rangeMins = rangeMins;
+    this.rangeMaxes = rangeMaxes;
+
+    // Set special range for wrist_roll (full turn motor)
+    this.rangeMins["wrist_roll"] = 0;
+    this.rangeMaxes["wrist_roll"] = 4095;
+  }
+
+  async finishCalibration(): Promise<WebCalibrationResults> {
+    if (!this.homingOffsets || !this.rangeMins || !this.rangeMaxes) {
+      throw new Error("Must complete all calibration steps first");
+    }
+
+    // Write hardware position limits to motors (matching Python behavior)
+    await writeHardwarePositionLimits(
+      this.config,
+      this.rangeMins,
+      this.rangeMaxes
     );
 
-    // Close the port we opened
-    await port.close();
+    // Compile results in Python-compatible format (NOT array format!)
+    const results: WebCalibrationResults = {};
+
+    for (let i = 0; i < this.config.motorNames.length; i++) {
+      const motorName = this.config.motorNames[i];
+      const motorId = this.config.motorIds[i];
+
+      results[motorName] = {
+        id: motorId,
+        drive_mode: this.config.driveModes[i],
+        homing_offset: this.homingOffsets[motorName],
+        range_min: this.rangeMins[motorName],
+        range_max: this.rangeMaxes[motorName],
+      };
+    }
+
+    console.log("🎉 Calibration completed successfully!");
+    return results;
+  }
+}
+
+/**
+ * Create SO-100 web configuration (matches Node.js exactly)
+ */
+function createSO100WebConfig(
+  deviceType: "so100_follower" | "so100_leader",
+  port: WebSerialPortWrapper
+): WebCalibrationConfig {
+  return {
+    deviceType,
+    port,
+    motorNames: [
+      "shoulder_pan",
+      "shoulder_lift",
+      "elbow_flex",
+      "wrist_flex",
+      "wrist_roll",
+      "gripper",
+    ],
+    motorIds: [1, 2, 3, 4, 5, 6],
+    protocol: WEB_STS3215_PROTOCOL,
+    driveModes: [0, 0, 0, 0, 0, 0], // Python lerobot uses drive_mode=0 for all motors
+    calibModes: ["DEGREE", "DEGREE", "DEGREE", "DEGREE", "DEGREE", "LINEAR"],
+    limits: {
+      position_min: [-180, -90, -90, -90, -90, -90],
+      position_max: [180, 90, 90, 90, 90, 90],
+      velocity_max: [100, 100, 100, 100, 100, 100],
+      torque_max: [50, 50, 50, 50, 25, 25],
+    },
+  };
+}
+
+/**
+ * Create a calibration controller for step-by-step calibration in React components
+ */
+export async function createCalibrationController(
+  armType: "so100_follower" | "so100_leader",
+  connectedPort: SerialPort
+): Promise<WebCalibrationController> {
+  // Create web serial port wrapper
+  const port = new WebSerialPortWrapper(connectedPort);
+  await port.initialize();
+
+  // Get device-agnostic calibration configuration
+  const config = createSO100WebConfig(armType, port);
+
+  return new WebCalibrationController(config);
+}
+
+/**
+ * Save calibration results to unified storage system
+ */
+export async function saveCalibrationResults(
+  calibrationResults: WebCalibrationResults,
+  armType: "so100_follower" | "so100_leader",
+  armId: string,
+  serialNumber: string,
+  recordingCount: number = 0
+): Promise<void> {
+  // Prepare full calibration data
+  const fullCalibrationData = {
+    ...calibrationResults,
+    device_type: armType,
+    device_id: armId,
+    calibrated_at: new Date().toISOString(),
+    platform: "web",
+    api: "Web Serial API",
+  };
+
+  const metadata = {
+    timestamp: new Date().toISOString(),
+    readCount: recordingCount,
+  };
+
+  // Try to save using unified storage system
+  try {
+    const { saveCalibrationData } = await import(
+      "../../demo/lib/unified-storage"
+    );
+    saveCalibrationData(serialNumber, fullCalibrationData, metadata);
+    console.log(
+      `✅ Calibration saved to unified storage: lerobotjs-${serialNumber}`
+    );
   } catch (error) {
-    throw new Error(
-      `Web calibration failed: ${
-        error instanceof Error ? error.message : error
-      }`
+    console.warn(
+      "Failed to save to unified storage, falling back to old format:",
+      error
     );
+
+    // Fallback to old storage format for compatibility
+    const fullDataKey = `lerobot_calibration_${armType}_${armId}`;
+    localStorage.setItem(fullDataKey, JSON.stringify(fullCalibrationData));
+
+    const dashboardKey = `lerobot-calibration-${serialNumber}`;
+    localStorage.setItem(dashboardKey, JSON.stringify(metadata));
+
+    console.log(`📊 Dashboard data saved to: ${dashboardKey}`);
+    console.log(`🔧 Full calibration data saved to: ${fullDataKey}`);
   }
 }
 
@@ -356,49 +830,3 @@ function downloadCalibrationFile(calibrationData: any, deviceId: string): void {
 export function isWebSerialSupported(): boolean {
   return "serial" in navigator;
 }
-
-/**
- * Create a calibration button for web interface
- * Returns a button element that when clicked starts calibration
- */
-export function createCalibrateButton(
-  config: CalibrateConfig
-): HTMLButtonElement {
-  const button = document.createElement("button");
-  button.textContent = "Calibrate Device";
-  button.style.cssText = `
-    padding: 10px 20px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 16px;
-  `;
-
-  button.addEventListener("click", async () => {
-    button.disabled = true;
-    button.textContent = "Calibrating...";
-
-    try {
-      await calibrate(config);
-      button.textContent = "Calibration Complete!";
-      button.style.backgroundColor = "#28a745";
-    } catch (error) {
-      button.textContent = "Calibration Failed";
-      button.style.backgroundColor = "#dc3545";
-      console.error("Calibration error:", error);
-      alert(
-        `Calibration failed: ${error instanceof Error ? error.message : error}`
-      );
-    } finally {
-      setTimeout(() => {
-        button.disabled = false;
-        button.textContent = "Calibrate Device";
-        button.style.backgroundColor = "#007bff";
-      }, 3000);
-    }
-  });
-
-  return button;
-}

src/main.ts

@@ -1,553 +0,0 @@
-/**
- * lerobot.js Web Interface
- *
- * Browser-based interface for lerobot functionality
- * Provides port connection and calibration functionality
- */
-
-import "./web_interface.css";
-import { findPortWeb } from "./lerobot/web/find_port.js";
-import {
-  calibrateWithPort,
-  isWebSerialSupported,
-} from "./lerobot/web/calibrate.js";
-
-// Extend SerialPort interface for missing methods
-declare global {
-  interface SerialPort {
-    getInfo(): { usbVendorId?: number; usbProductId?: number };
-  }
-}
-
-// Store connected ports with connection state
-let connectedPorts: { port: SerialPort; name: string; isConnected: boolean }[] =
-  [];
-
-// Store original console.log before override
-const originalConsoleLog = console.log;
-
-// Main application setup
-document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
-  <div>
-    <h1>LeRobot.js Demo</h1>
-    <p>Web Serial API implementation for robot calibration and control</p>
-    
-    <div id="serial-support" class="status"></div>
-    
-    <div class="cards-container">
-      <!-- Port Connection Card -->
-      <div class="card">
-        <h2>🔌 Port Connection</h2>
-        <p>Connect to your robot arms to test communication</p>
-        
-        <div class="controls">
-          <button id="connect-port">Connect to Port</button>
-          <button id="find-ports">Find Available Ports</button>
-        </div>
-        
-        <div id="connected-ports">
-          <h3>Connected Ports:</h3>
-          <div id="ports-list">No ports connected</div>
-        </div>
-        
-        <div id="find-ports-log"></div>
-      </div>
-
-      <!-- Robot Calibration Card -->
-      <div class="card">
-        <h2>🤖 Robot Calibration</h2>
-        <p>Calibrate your SO-100 robot arms</p>
-        
-        <div class="controls">
-          <div class="form-group">
-            <label for="arm-type">Arm Type:</label>
-            <select id="arm-type">
-              <option value="so100_follower">SO-100 Follower (Robot)</option>
-              <option value="so100_leader">SO-100 Leader (Teleoperator)</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="port-select">Select Port:</label>
-            <select id="port-select">
-              <option value="">No ports connected</option>
-            </select>
-          </div>
-          
-          <div class="form-group">
-            <label for="arm-id">Arm ID:</label>
-            <input type="text" id="arm-id" placeholder="e.g., my_robot" value="demo_arm">
-          </div>
-          
-          <button id="start-calibration" disabled>Start Calibration</button>
-        </div>
-        
-        <div id="calibration-status"></div>
-      </div>
-    </div>
-    
-    <div id="log"></div>
-  </div>
-`;
-
-// Add CSS for cards
-const style = document.createElement("style");
-style.textContent = `
-  .cards-container {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin: 2rem 0;
-  }
-  
-  .card {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 1.5rem;
-    background: #f9f9f9;
-  }
-  
-  .card h2 {
-    margin-top: 0;
-    color: #333;
-  }
-  
-  .form-group {
-    margin: 1rem 0;
-  }
-  
-  .form-group label {
-    display: block;
-    margin-bottom: 0.5rem;
-    font-weight: bold;
-  }
-  
-  .form-group select,
-  .form-group input {
-    width: 100%;
-    padding: 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1rem;
-  }
-  
-  .controls button {
-    margin: 0.5rem 0.5rem 0.5rem 0;
-  }
-  
-  #connected-ports {
-    margin: 1rem 0;
-    padding: 1rem;
-    background: white;
-    border-radius: 4px;
-  }
-  
-  .port-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.5rem;
-    margin: 0.5rem 0;
-    background: #e9f5ff;
-    border-radius: 4px;
-  }
-  
-  .port-item button {
-    background: #dc3545;
-    color: white;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 3px;
-    cursor: pointer;
-    font-size: 0.875rem;
-    margin-left: 0.25rem;
-  }
-  
-  .port-buttons {
-    display: flex;
-    gap: 0.25rem;
-  }
-  
-  .port-buttons button:not(.unpair-btn) {
-    background: #007bff;
-  }
-  
-  .unpair-btn {
-    background: #dc3545 !important;
-  }
-`;
-document.head.appendChild(style);
-
-// Initialize the application
-async function initializeApp() {
-  // Check Web Serial API support
-  const supportDiv = document.querySelector<HTMLDivElement>("#serial-support")!;
-  if (isWebSerialSupported()) {
-    supportDiv.innerHTML = `
-      <div class="success">✅ Web Serial API is supported in this browser</div>
-    `;
-
-    // Restore previously connected ports on page load
-    await restoreConnectedPorts();
-  } else {
-    supportDiv.innerHTML = `
-      <div class="error">❌ Web Serial API is not supported. Please use Chrome/Edge with experimental features enabled.</div>
-    `;
-  }
-}
-
-// Restore connected ports from browser's serial port list
-async function restoreConnectedPorts() {
-  try {
-    const existingPorts = await navigator.serial.getPorts();
-
-    for (const port of existingPorts) {
-      // Try to reconnect to previously permitted ports
-      let isConnected = false;
-      const portName = getPortDisplayName(port);
-
-      try {
-        // Check if port is already open, if not, open it
-        if (!port.readable || !port.writable) {
-          await port.open({ baudRate: 1000000 });
-        }
-        isConnected = true;
-        originalConsoleLog(`Restored connection to: ${portName}`);
-      } catch (error) {
-        originalConsoleLog(`Could not reconnect to port ${portName}:`, error);
-        // Port might be in use by another application or disconnected
-        // But we still add it to the list so user can see it's paired
-      }
-
-      connectedPorts.push({ port, name: portName, isConnected });
-    }
-
-    if (connectedPorts.length > 0) {
-      const connectedCount = connectedPorts.filter((p) => p.isConnected).length;
-      originalConsoleLog(
-        `Found ${connectedPorts.length} paired ports, ${connectedCount} connected`
-      );
-      updatePortsList();
-      updateCalibrationButton();
-    }
-  } catch (error) {
-    originalConsoleLog("Could not restore ports:", error);
-  }
-}
-
-// Get a meaningful display name for a port
-function getPortDisplayName(port: SerialPort): string {
-  // Use original console.log to avoid showing debug info in the page UI
-  originalConsoleLog("=== PORT DEBUG INFO ===");
-  originalConsoleLog("Full port object:", port);
-  originalConsoleLog("Port readable:", port.readable);
-  originalConsoleLog("Port writable:", port.writable);
-
-  try {
-    const info = port.getInfo();
-    originalConsoleLog("Port getInfo() result:", info);
-    originalConsoleLog("USB Vendor ID:", info.usbVendorId);
-    originalConsoleLog("USB Product ID:", info.usbProductId);
-
-    // Log all properties of the info object
-    originalConsoleLog("All info properties:");
-    for (const [key, value] of Object.entries(info)) {
-      originalConsoleLog(`  ${key}:`, value);
-    }
-
-    // Try to extract port name from port info
-    if (info.usbVendorId && info.usbProductId) {
-      return `USB Port (${info.usbVendorId}:${info.usbProductId})`;
-    }
-
-    // For Windows COM ports, we can't get the exact name from Web Serial API
-    // but we can show some identifying information
-    if (info.usbVendorId) {
-      return `Serial Port (VID:${info.usbVendorId.toString(16).toUpperCase()})`;
-    }
-  } catch (error) {
-    // getInfo() might not be available in all browsers
-    originalConsoleLog("Port info not available:", error);
-  }
-
-  originalConsoleLog("=== END PORT DEBUG ===");
-
-  // Fallback to generic name with unique identifier
-  const portIndex = connectedPorts.length;
-  return `Serial Port ${portIndex + 1}`;
-}
-
-// Simple port connection functionality (restored)
-const connectPortBtn =
-  document.querySelector<HTMLButtonElement>("#connect-port")!;
-const portsListDiv = document.querySelector<HTMLDivElement>("#ports-list")!;
-
-connectPortBtn.addEventListener("click", async () => {
-  try {
-    connectPortBtn.disabled = true;
-    connectPortBtn.textContent = "Connecting...";
-
-    // Simple port connection dialog
-    const port = await navigator.serial.requestPort();
-    await port.open({ baudRate: 1000000 });
-
-    // Add to connected ports with meaningful name
-    const portName = getPortDisplayName(port);
-    connectedPorts.push({ port, name: portName, isConnected: true });
-
-    updatePortsList();
-    updateCalibrationButton();
-
-    connectPortBtn.textContent = "Connect to Port";
-  } catch (error) {
-    alert(
-      `Failed to connect to port: ${
-        error instanceof Error ? error.message : error
-      }`
-    );
-    connectPortBtn.textContent = "Connect to Port";
-  } finally {
-    connectPortBtn.disabled = false;
-  }
-});
-
-// Update connected ports display
-function updatePortsList() {
-  if (connectedPorts.length === 0) {
-    portsListDiv.innerHTML = "No ports paired";
-  } else {
-    portsListDiv.innerHTML = connectedPorts
-      .map(
-        (portInfo, index) => `
-      <div class="port-item">
-        <span>${portInfo.name} ${portInfo.isConnected ? "🟢" : "🔴"}</span>
-        <div class="port-buttons">
-          ${
-            portInfo.isConnected
-              ? `<button onclick="disconnectPort(${index})">Disconnect</button>`
-              : `<button onclick="reconnectPort(${index})">Connect</button>`
-          }
-          <button onclick="unpairPort(${index})" class="unpair-btn">Unpair</button>
-        </div>
-      </div>
-    `
-      )
-      .join("");
-  }
-
-  // Update port selector dropdown (only show connected ports for calibration)
-  updatePortSelector();
-}
-
-// Update port selector dropdown
-function updatePortSelector() {
-  const portSelect = document.querySelector<HTMLSelectElement>("#port-select")!;
-
-  const connectedOnly = connectedPorts.filter(
-    (portInfo) => portInfo.isConnected
-  );
-
-  if (connectedOnly.length === 0) {
-    portSelect.innerHTML = '<option value="">No ports connected</option>';
-  } else {
-    portSelect.innerHTML = connectedOnly
-      .map((portInfo, connectedIndex) => {
-        // Find the original index in the full connectedPorts array
-        const originalIndex = connectedPorts.findIndex((p) => p === portInfo);
-        return `<option value="${originalIndex}">${portInfo.name}</option>`;
-      })
-      .join("");
-  }
-}
-
-// Make port management functions global
-(window as any).disconnectPort = async (index: number) => {
-  try {
-    const portInfo = connectedPorts[index];
-    await portInfo.port.close();
-    connectedPorts[index].isConnected = false;
-    updatePortsList();
-    updateCalibrationButton();
-    originalConsoleLog(`Disconnected from ${portInfo.name}`);
-  } catch (error) {
-    console.error("Failed to disconnect port:", error);
-  }
-};
-
-(window as any).reconnectPort = async (index: number) => {
-  try {
-    const portInfo = connectedPorts[index];
-    await portInfo.port.open({ baudRate: 1000000 });
-    connectedPorts[index].isConnected = true;
-    updatePortsList();
-    updateCalibrationButton();
-    originalConsoleLog(`Reconnected to ${portInfo.name}`);
-  } catch (error) {
-    console.error("Failed to reconnect to port:", error);
-    alert(
-      `Failed to reconnect: ${error instanceof Error ? error.message : error}`
-    );
-  }
-};
-
-(window as any).unpairPort = async (index: number) => {
-  try {
-    const portInfo = connectedPorts[index];
-
-    // Close the port first if it's connected
-    if (portInfo.isConnected) {
-      await portInfo.port.close();
-    }
-
-    // Try to forget the port (requires newer browsers)
-    if ("forget" in portInfo.port) {
-      await (portInfo.port as any).forget();
-      originalConsoleLog(`Unpaired ${portInfo.name}`);
-    } else {
-      // Fallback for browsers that don't support forget()
-      originalConsoleLog(
-        `Browser doesn't support forget() - manually revoke in browser settings`
-      );
-      alert(
-        "This browser doesn't support automatic unpairing. Please revoke access manually in browser settings (Privacy & Security > Site Settings > Serial Ports)"
-      );
-    }
-
-    // Remove from our list
-    connectedPorts.splice(index, 1);
-    updatePortsList();
-    updateCalibrationButton();
-  } catch (error) {
-    console.error("Failed to unpair port:", error);
-    alert(
-      `Failed to unpair: ${error instanceof Error ? error.message : error}`
-    );
-  }
-};
-
-// Set up find ports functionality (restored original)
-const findPortsBtn = document.querySelector<HTMLButtonElement>("#find-ports")!;
-const findPortsLogDiv =
-  document.querySelector<HTMLDivElement>("#find-ports-log")!;
-
-findPortsBtn.addEventListener("click", async () => {
-  try {
-    findPortsBtn.disabled = true;
-    findPortsBtn.textContent = "Finding ports...";
-
-    // Clear previous results
-    findPortsLogDiv.innerHTML = '<div class="status">Finding ports...</div>';
-
-    // Use the web find port functionality
-    await findPortWeb((message: string) => {
-      findPortsLogDiv.innerHTML += `<div class="log-entry">${message}</div>`;
-    });
-  } catch (error) {
-    // Check if user cancelled the dialog
-    if (
-      error instanceof Error &&
-      (error.message.includes("cancelled") ||
-        error.message.includes("canceled") ||
-        error.name === "NotAllowedError" ||
-        error.name === "AbortError")
-    ) {
-      // User cancelled - just log it, no UI message
-      console.log("Find ports cancelled by user");
-    } else {
-      // Real error - show it
-      findPortsLogDiv.innerHTML = `
-        <div class="error">Error finding ports: ${
-          error instanceof Error ? error.message : error
-        }</div>
-      `;
-    }
-  } finally {
-    findPortsBtn.disabled = false;
-    findPortsBtn.textContent = "Find Available Ports";
-  }
-});
-
-// Calibration functionality
-const armTypeSelect = document.querySelector<HTMLSelectElement>("#arm-type")!;
-const portSelect = document.querySelector<HTMLSelectElement>("#port-select")!;
-const armIdInput = document.querySelector<HTMLInputElement>("#arm-id")!;
-const startCalibrationBtn =
-  document.querySelector<HTMLButtonElement>("#start-calibration")!;
-const calibrationStatusDiv = document.querySelector<HTMLDivElement>(
-  "#calibration-status"
-)!;
-
-function updateCalibrationButton() {
-  const hasConnectedPorts = connectedPorts.some((port) => port.isConnected);
-  startCalibrationBtn.disabled = !hasConnectedPorts;
-
-  if (!hasConnectedPorts) {
-    startCalibrationBtn.textContent = "Connect a port first";
-  } else {
-    startCalibrationBtn.textContent = "Start Calibration";
-  }
-}
-
-startCalibrationBtn.addEventListener("click", async () => {
-  try {
-    startCalibrationBtn.disabled = true;
-    startCalibrationBtn.textContent = "Calibrating...";
-    calibrationStatusDiv.innerHTML =
-      '<div class="status">Starting calibration...</div>';
-
-    const armType = armTypeSelect.value as "so100_follower" | "so100_leader";
-    const portIndexStr = portSelect.value;
-    const armId = armIdInput.value.trim() || "demo_arm";
-
-    // Validate port selection
-    if (portIndexStr === "" || connectedPorts.length === 0) {
-      throw new Error("No port selected");
-    }
-
-    const portIndex = parseInt(portIndexStr);
-    if (portIndex < 0 || portIndex >= connectedPorts.length) {
-      throw new Error("Invalid port selection");
-    }
-
-    const selectedPortInfo = connectedPorts[portIndex];
-    if (!selectedPortInfo.isConnected) {
-      throw new Error("Selected port is not connected");
-    }
-
-    const selectedPort = selectedPortInfo.port;
-    await calibrateWithPort(armType, armId, selectedPort);
-
-    calibrationStatusDiv.innerHTML =
-      '<div class="success">✅ Calibration completed successfully!</div>';
-    startCalibrationBtn.textContent = "Start Calibration";
-  } catch (error) {
-    calibrationStatusDiv.innerHTML = `
-      <div class="error">❌ Calibration failed: ${
-        error instanceof Error ? error.message : error
-      }</div>
-    `;
-    startCalibrationBtn.textContent = "Start Calibration";
-  } finally {
-    startCalibrationBtn.disabled = !connectedPorts.some(
-      (port) => port.isConnected
-    );
-  }
-});
-
-// Initialize
-updateCalibrationButton();
-
-// Initialize the application
-initializeApp();
-
-// Override console.log to show in the page
-const logDiv = document.querySelector<HTMLDivElement>("#log")!;
-console.log = (...args) => {
-  originalConsoleLog.apply(console, args);
-
-  const logEntry = document.createElement("div");
-  logEntry.className = "log-entry";
-  logEntry.textContent = args.join(" ");
-  logDiv.appendChild(logEntry);
-  logDiv.scrollTop = logDiv.scrollHeight;
-};

vanilla.html

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>🤖 lerobot.js - Vanilla Demo</title>
-    <meta
-      name="description"
-      content="State-of-the-art AI for real-world robotics in JavaScript/TypeScript"
-    />
-    <style>
-      /* Prevent flash of unstyled content */
-      body {
-        opacity: 0;
-      }
-      body.loaded {
-        opacity: 1;
-        transition: opacity 0.3s ease;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-    <script>
-      // Add loaded class when page is ready
-      window.addEventListener("load", () => {
-        document.body.classList.add("loaded");
-      });
-    </script>
-  </body>
-</html>