Spaces:

NERDDISCO
/

LeRobot.js

Running

App Files Files Community

NERDDISCO commited on Jul 7

Commit

4500b8e

1 Parent(s): e5f6285

refactor: move examples into separate folders

Browse files

Files changed (13) hide show

examples/iframe-dialog-test/README.md +39 -0
examples/iframe-dialog-test/iframe-content.html +155 -0
examples/iframe-dialog-test/iframe-dialog-test.html +202 -0
examples/iframe-dialog-test/iframe-dialog-test.ts +375 -0
examples/iframe-dialog-test/package.json +17 -0
examples/iframe-dialog-test/vite.config.ts +21 -0
examples/test-sequential-operations/README.md +49 -0
examples/test-sequential-operations/package.json +17 -0
examples/{test-sequential-operations.html → test-sequential-operations/test-sequential-operations.html} +0 -0
examples/{test-sequential-operations.ts → test-sequential-operations/test-sequential-operations.ts} +14 -4
examples/test-sequential-operations/vite.config.ts +20 -0
package.json +6 -1
vite.config.ts +0 -21

examples/iframe-dialog-test/README.md ADDED Viewed

	@@ -0,0 +1,39 @@

+# Iframe Dialog Test
+This example tests WebSerial + WebUSB dialog behavior in iframe vs standalone environments to replicate HuggingFace Spaces behavior.
+## Purpose
+Tests the user gesture consumption issue that occurs when WebSerial and WebUSB dialogs conflict in iframe contexts (like HuggingFace Spaces).
+## Files
+- `iframe-dialog-test.html` - Main test page with iframe controls
+- `iframe-content.html` - Content loaded in iframe to simulate HuggingFace Spaces
+- `iframe-dialog-test.ts` - TypeScript logic for testing dialog behavior
+## Running
+From the root directory:
+```bash
+pnpm example:iframe-test
+```
+Or from this directory:
+```bash
+pnpm dev
+```
+## Testing
+1. Click "🔓 Permissive" to load iframe in permissive mode
+2. In the iframe, click "Test Actual findPort Function"
+3. Should demonstrate sequential dialog behavior working in iframe context
+## Browser Requirements
+- Chrome/Edge 89+ with WebSerial and WebUSB APIs
+- HTTPS or localhost
+- Real robot hardware for full testing

examples/iframe-dialog-test/iframe-content.html ADDED Viewed

	@@ -0,0 +1,155 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Iframe Test Content</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        padding: 20px;
+        margin: 0;
+        background: white;
+        text-align: center;
+      }
+      button {
+        background: #2563eb;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 4px;
+        cursor: pointer;
+        margin: 5px;
+        font-size: 14px;
+      }
+      button:hover {
+        background: #1d4ed8;
+      }
+      .status {
+        margin: 10px 0;
+        padding: 10px;
+        background: #f3f4f6;
+        border-radius: 4px;
+        font-size: 14px;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>🖼️ Inside Iframe</h3>
+    <p>This simulates HuggingFace Spaces environment</p>
+    <button onclick="testActualFindPort()">
+      Test Actual findPort Function
+    </button>
+    <button onclick="testSequential()">Test Mock Sequential</button>
+    <button onclick="testSimultaneous()">Test Mock Simultaneous</button>
+    <div id="status" class="status">Ready to test...</div>
+    <script type="module">
+      import { findPort } from "../packages/web/src/index.js";
+      function updateStatus(message) {
+        const status = document.getElementById("status");
+        const timestamp = new Date().toLocaleTimeString();
+        status.textContent = timestamp + ": " + message;
+        // Also log to parent window
+        window.parent.postMessage(
+          {
+            type: "iframe-log",
+            message: message,
+          },
+          "*"
+        );
+      }
+      window.testSequential = async function () {
+        updateStatus("Testing sequential dialogs...");
+        try {
+          updateStatus("Requesting WebSerial port...");
+          const serialPort = await navigator.serial.requestPort();
+          updateStatus("WebSerial port selected");
+          updateStatus("Requesting WebUSB device...");
+          const usbDevice = await navigator.usb.requestDevice({ filters: [] });
+          updateStatus("WebUSB device selected - SUCCESS!");
+        } catch (error) {
+          updateStatus("Failed: " + error.message);
+        }
+      };
+      window.testSimultaneous = async function () {
+        updateStatus("Testing simultaneous dialogs...");
+        try {
+          updateStatus("Starting both dialogs simultaneously...");
+          const [serialPortPromise, usbDevicePromise] = [
+            navigator.serial.requestPort(),
+            navigator.usb.requestDevice({ filters: [] }),
+          ];
+          const [serialPort, usbDevice] = await Promise.all([
+            serialPortPromise,
+            usbDevicePromise,
+          ]);
+          updateStatus("Both dialogs completed - SUCCESS!");
+        } catch (error) {
+          updateStatus("Failed: " + error.message);
+        }
+      };
+      // Test actual findPort function
+      window.testActualFindPort = async function () {
+        updateStatus("Testing actual findPort function...");
+        try {
+          updateStatus("Starting findPort with fallback behavior...");
+          const findProcess = await findPort({
+            onMessage: (msg) => updateStatus("findPort: " + msg),
+          });
+          const robots = await findProcess.result;
+          updateStatus("SUCCESS! Found " + robots.length + " robots");
+          robots.forEach((robot, index) => {
+            updateStatus(
+              "Robot " +
+                (index + 1) +
+                ": " +
+                robot.name +
+                " (" +
+                robot.robotType +
+                ")"
+            );
+          });
+        } catch (error) {
+          updateStatus("findPort failed: " + error.message);
+          // Analyze the error for debugging
+          if (error.message.includes("No port selected")) {
+            updateStatus("🔍 This should trigger sequential fallback mode");
+          } else if (error.message.includes("cancelled")) {
+            updateStatus("🔍 User cancelled dialog - expected for testing");
+          }
+        }
+      };
+      // Check environment on load
+      document.addEventListener("DOMContentLoaded", () => {
+        updateStatus(
+          "Environment: " + (window === window.top ? "Standalone" : "Iframe")
+        );
+        updateStatus(
+          "WebSerial: " +
+            ("serial" in navigator ? "Supported" : "Not supported")
+        );
+        updateStatus(
+          "WebUSB: " + ("usb" in navigator ? "Supported" : "Not supported")
+        );
+      });
+    </script>
+  </body>
+</html>

examples/iframe-dialog-test/iframe-dialog-test.html ADDED Viewed

	@@ -0,0 +1,202 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Iframe Dialog Test</title>
+    <style>
+      body {
+        font-family: system-ui, sans-serif;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 2rem;
+        background: #f5f5f5;
+      }
+      .container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+      button {
+        background: #2563eb;
+        color: white;
+        border: none;
+        padding: 12px 24px;
+        border-radius: 6px;
+        font-size: 16px;
+        cursor: pointer;
+        margin: 8px;
+      }
+      button:hover {
+        background: #1d4ed8;
+      }
+      .test-message {
+        background: #dcfce7;
+        border: 2px solid #16a34a;
+        color: #15803d;
+        padding: 1rem;
+        border-radius: 6px;
+        margin: 1rem 0;
+        font-size: 18px;
+        font-weight: bold;
+        text-align: center;
+      }
+      .iframe-container {
+        background: #e5e7eb;
+        padding: 20px;
+        border-radius: 8px;
+        margin-top: 20px;
+        border: 2px solid #d1d5db;
+      }
+      iframe {
+        width: 100%;
+        height: 400px;
+        border: 2px solid #9ca3af;
+        border-radius: 6px;
+        background: white;
+      }
+      .test-controls {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        flex-wrap: wrap;
+      }
+      .log {
+        background: #1f2937;
+        color: #f9fafb;
+        padding: 1rem;
+        border-radius: 6px;
+        font-family: monospace;
+        font-size: 14px;
+        max-height: 400px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        margin-top: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <h1>🧪 Dialog Test</h1>
+      <div class="test-message">✅ TEST PAGE LOADED SUCCESSFULLY!</div>
+      <div class="test-controls">
+        <button onclick="testDialogs()">🔌 Test Dialogs (Standalone)</button>
+        <button onclick="clearLog()">🗑️ Clear Log</button>
+      </div>
+      <div class="iframe-container">
+        <h3>🖼️ Iframe Environment (Simulates HuggingFace Spaces)</h3>
+        <div class="test-controls">
+          <button onclick="loadIframe('permissive')">🔓 Permissive</button>
+          <button onclick="loadIframe('restricted')">🔒 Restricted</button>
+          <button onclick="loadIframe('crossorigin')">🌐 Cross-Origin</button>
+        </div>
+        <iframe
+          id="testFrame"
+          src="about:blank"
+          title="Dialog Test Iframe"
+        ></iframe>
+        <div
+          id="iframeInfo"
+          style="margin-top: 10px; font-size: 12px; color: #666"
+        >
+          Current iframe mode: None loaded
+        </div>
+      </div>
+      <div id="log" class="log">Ready to test...</div>
+    </div>
+    <script>
+      function log(message) {
+        const logElement = document.getElementById("log");
+        const timestamp = new Date().toLocaleTimeString();
+        logElement.textContent += "[" + timestamp + "] " + message + "\n";
+        logElement.scrollTop = logElement.scrollHeight;
+      }
+      function clearLog() {
+        document.getElementById("log").textContent = "Log cleared.\n";
+      }
+      function loadIframe(mode) {
+        const iframe = document.getElementById("testFrame");
+        const infoElement = document.getElementById("iframeInfo");
+        if (!iframe) return;
+        iframe.removeAttribute("sandbox");
+        iframe.removeAttribute("allow");
+        let description = "";
+        switch (mode) {
+          case "permissive":
+            iframe.setAttribute("allow", "serial; usb");
+            description = "Permissive: Full access to WebSerial and WebUSB";
+            iframe.src = "iframe-content.html";
+            break;
+          case "restricted":
+            iframe.setAttribute(
+              "sandbox",
+              "allow-scripts allow-same-origin allow-popups allow-forms"
+            );
+            iframe.setAttribute("allow", "serial; usb");
+            description = "Restricted: Sandboxed with limited permissions";
+            iframe.src = "iframe-content.html";
+            break;
+          case "crossorigin":
+            iframe.setAttribute(
+              "sandbox",
+              "allow-scripts allow-popups allow-forms"
+            );
+            iframe.setAttribute("allow", "serial; usb");
+            description =
+              "Cross-Origin: Different origin with sandbox restrictions";
+            iframe.src = "iframe-content.html";
+            break;
+        }
+        if (infoElement) {
+          infoElement.textContent = "Current iframe mode: " + description;
+        }
+        log("📝 Loaded iframe in " + mode + " mode: " + description);
+      }
+      async function testDialogs() {
+        log("🎯 Starting dialog test...");
+        try {
+          log("📡 Requesting WebSerial port...");
+          const serialPort = await navigator.serial.requestPort();
+          log("✅ WebSerial port selected");
+          log("🔌 Requesting WebUSB device...");
+          const usbDevice = await navigator.usb.requestDevice({ filters: [] });
+          log("✅ WebUSB device selected - SUCCESS!");
+        } catch (error) {
+          log("❌ Failed: " + error.message);
+        }
+      }
+      document.addEventListener("DOMContentLoaded", () => {
+        log("✅ Page loaded successfully");
+        log(
+          "WebSerial: " +
+            ("serial" in navigator ? "Supported" : "Not supported")
+        );
+        log("WebUSB: " + ("usb" in navigator ? "Supported" : "Not supported"));
+      });
+      window.addEventListener("message", (event) => {
+        if (event.data.type === "iframe-log") {
+          log("[IFRAME] " + event.data.message);
+        }
+      });
+    </script>
+  </body>
+</html>

examples/iframe-dialog-test/iframe-dialog-test.ts ADDED Viewed

	@@ -0,0 +1,375 @@

+/**
+ * Iframe Dialog Test Logic
+ * Tests WebSerial + WebUSB dialog behavior in iframe vs standalone environments
+ */
+import { findPort } from "@lerobot/web";
+let isRunning = false;
+function log(message: string) {
+  const logElement = document.getElementById("log");
+  if (logElement) {
+    const timestamp = new Date().toLocaleTimeString();
+    logElement.textContent += `[${timestamp}] ${message}\n`;
+    logElement.scrollTop = logElement.scrollHeight;
+  }
+}
+function setButtonState(buttonId: string, running: boolean) {
+  const button = document.getElementById(buttonId) as HTMLButtonElement;
+  if (button) {
+    button.disabled = running;
+    if (running) {
+      button.textContent = "⏳ Testing...";
+    } else {
+      // Restore original text
+      if (buttonId === "testStandalone") {
+        button.textContent = "🖥️ Test Standalone (Current Window)";
+      }
+    }
+  }
+}
+// Mock implementation to test dialog behavior without actual findPort
+async function testDialogBehavior(environment: "standalone" | "iframe") {
+  log(`🎯 Testing dialog behavior in ${environment} environment...`);
+  try {
+    // Method 1: Sequential (current approach)
+    log("📡 Method 1: Sequential WebSerial → WebUSB");
+    log("🔸 Requesting WebSerial port...");
+    const serialPort = await navigator.serial.requestPort();
+    log("✅ WebSerial port selected");
+    log("🔸 Requesting WebUSB device...");
+    const usbDevice = await navigator.usb.requestDevice({ filters: [] });
+    log("✅ WebUSB device selected");
+    log("🎉 Sequential method succeeded!");
+    return { serialPort, usbDevice, method: "sequential" };
+  } catch (error: any) {
+    log(`❌ Sequential method failed: ${error.message}`);
+    // Method 2: Simultaneous (new approach)
+    try {
+      log("📡 Method 2: Simultaneous WebSerial + WebUSB");
+      log("🚀 Starting both dialogs simultaneously...");
+      const [serialPortPromise, usbDevicePromise] = [
+        navigator.serial.requestPort(),
+        navigator.usb.requestDevice({ filters: [] }),
+      ];
+      log("⏳ Waiting for both dialogs...");
+      const [serialPort, usbDevice] = await Promise.all([
+        serialPortPromise,
+        usbDevicePromise,
+      ]);
+      log("✅ Both dialogs completed!");
+      log("🎉 Simultaneous method succeeded!");
+      return { serialPort, usbDevice, method: "simultaneous" };
+    } catch (simultaneousError: any) {
+      log(`❌ Simultaneous method also failed: ${simultaneousError.message}`);
+      throw simultaneousError;
+    }
+  }
+}
+// Test using actual findPort function
+async function testActualFindPort() {
+  log("🔍 Testing actual findPort function...");
+  try {
+    const findProcess = await findPort();
+    const robots = await findProcess.result;
+    log(`✅ findPort succeeded! Found ${robots.length} robots`);
+    robots.forEach((robot, index) => {
+      log(`  Robot ${index + 1}: ${robot.name} (${robot.robotType})`);
+    });
+    return robots;
+  } catch (error: any) {
+    log(`❌ findPort failed: ${error.message}`);
+    throw error;
+  }
+}
+declare global {
+  interface Window {
+    clearLog: () => void;
+    testStandalone: () => Promise<void>;
+    loadIframe: (mode: string) => void;
+  }
+}
+window.clearLog = function () {
+  const logElement = document.getElementById("log");
+  if (logElement) {
+    logElement.textContent = "Log cleared.\n";
+  }
+};
+window.loadIframe = function (mode: string) {
+  const iframe = document.getElementById("testFrame") as HTMLIFrameElement;
+  const infoElement = document.getElementById("iframeInfo");
+  if (!iframe) return;
+  // Clear existing attributes
+  iframe.removeAttribute("sandbox");
+  iframe.removeAttribute("allow");
+  let iframeContent = "";
+  let description = "";
+  switch (mode) {
+    case "permissive":
+      // Most permissive - similar to our original test
+      iframe.setAttribute("allow", "serial; usb");
+      description = "Permissive: Full access to WebSerial and WebUSB";
+      iframeContent = generateIframeContent();
+      break;
+    case "restricted":
+      // Restricted with sandbox - might block certain permissions
+      iframe.setAttribute(
+        "sandbox",
+        "allow-scripts allow-same-origin allow-popups allow-forms"
+      );
+      iframe.setAttribute("allow", "serial; usb");
+      description = "Restricted: Sandboxed with limited permissions";
+      iframeContent = generateIframeContent();
+      break;
+    case "crossorigin":
+      // Cross-origin simulation (limited local test)
+      iframe.setAttribute("sandbox", "allow-scripts allow-popups allow-forms");
+      iframe.setAttribute("allow", "serial; usb");
+      description = "Cross-Origin: Different origin with sandbox restrictions";
+      iframeContent = generateIframeContent();
+      break;
+  }
+  if (infoElement) {
+    infoElement.textContent = `Current iframe mode: ${description}`;
+  }
+  iframe.src =
+    "data:text/html;charset=utf-8," + encodeURIComponent(iframeContent);
+  log(`📝 Loaded iframe in ${mode} mode: ${description}`);
+};
+window.testStandalone = async function () {
+  if (isRunning) return;
+  isRunning = true;
+  setButtonState("testStandalone", true);
+  log("🧪 Testing with actual findPort function...");
+  try {
+    // Test the actual findPort function with our new fallback logic
+    await testActualFindPort();
+    log("\n✅ findPort test completed!");
+  } catch (error: any) {
+    log(`❌ findPort test failed: ${error.message}`);
+    // Analyze the error
+    if (error.message.includes("user gesture")) {
+      log("🔍 User gesture consumption detected!");
+      log("💡 This confirms the issue - WebSerial consumes the gesture");
+    } else if (error.message.includes("cancelled")) {
+      log("🔍 User cancelled dialog - this is expected for testing");
+    } else if (error.message.includes("No port selected")) {
+      log("🔍 Dialog conflict detected - this should trigger fallback mode");
+    }
+  } finally {
+    isRunning = false;
+    setButtonState("testStandalone", false);
+  }
+};
+// Generate iframe content dynamically
+function generateIframeContent(): string {
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Iframe Test Content</title>
+    <style>
+        body {
+            font-family: system-ui, sans-serif;
+            padding: 20px;
+            margin: 0;
+            background: white;
+            text-align: center;
+        }
+        button {
+            background: #2563eb;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+            font-size: 14px;
+        }
+        button:hover {
+            background: #1d4ed8;
+        }
+        button:disabled {
+            background: #9ca3af;
+            cursor: not-allowed;
+        }
+        .status {
+            margin: 10px 0;
+            padding: 10px;
+            background: #f3f4f6;
+            border-radius: 4px;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <h3>🖼️ Inside Iframe</h3>
+    <p>This simulates HuggingFace Spaces environment</p>
+    <button onclick="testActualFindPort()">Test Actual findPort Function</button>
+    <button onclick="testIframeDialogs()">Test Mock Sequential</button>
+    <button onclick="testIframeSimultaneous()">Test Mock Simultaneous</button>
+    <div id="iframeStatus" class="status">Ready to test...</div>
+    <script type="module">
+        import { findPort } from '../packages/web/src/index.js';
+        function updateStatus(message) {
+            const status = document.getElementById('iframeStatus');
+            const timestamp = new Date().toLocaleTimeString();
+            status.textContent = timestamp + ': ' + message;
+            // Also log to parent window
+            window.parent.postMessage({
+                type: 'iframe-log',
+                message: message
+            }, '*');
+        }
+        window.testIframeDialogs = async function() {
+            updateStatus('Testing sequential dialogs...');
+            try {
+                updateStatus('Requesting WebSerial port...');
+                const serialPort = await navigator.serial.requestPort();
+                updateStatus('WebSerial port selected');
+                updateStatus('Requesting WebUSB device...');
+                const usbDevice = await navigator.usb.requestDevice({ filters: [] });
+                updateStatus('WebUSB device selected - SUCCESS!');
+            } catch (error) {
+                updateStatus('Failed: ' + error.message);
+            }
+        };
+        window.testIframeSimultaneous = async function() {
+            updateStatus('Testing simultaneous dialogs...');
+            try {
+                updateStatus('Starting both dialogs simultaneously...');
+                const [serialPortPromise, usbDevicePromise] = [
+                    navigator.serial.requestPort(),
+                    navigator.usb.requestDevice({ filters: [] })
+                ];
+                const [serialPort, usbDevice] = await Promise.all([
+                    serialPortPromise,
+                    usbDevicePromise
+                ]);
+                updateStatus('Both dialogs completed - SUCCESS!');
+            } catch (error) {
+                updateStatus('Failed: ' + error.message);
+            }
+        };
+        // Test actual findPort function (imported at top)
+        window.testActualFindPort = async function() {
+            updateStatus('Testing actual findPort function...');
+            try {
+                updateStatus('Starting findPort with fallback behavior...');
+                const findProcess = await findPort({
+                    onMessage: (msg) => updateStatus('findPort: ' + msg)
+                });
+                const robots = await findProcess.result;
+                updateStatus('SUCCESS! Found ' + robots.length + ' robots');
+                robots.forEach((robot, index) => {
+                    updateStatus('Robot ' + (index + 1) + ': ' + robot.name + ' (' + robot.robotType + ')');
+                });
+            } catch (error) {
+                updateStatus('findPort failed: ' + error.message);
+                // Analyze the error for debugging
+                if (error.message.includes('No port selected')) {
+                    updateStatus('🔍 This should trigger sequential fallback mode');
+                } else if (error.message.includes('cancelled')) {
+                                      updateStatus('🔍 User cancelled dialog - expected for testing');
+              }
+          }
+      };
+        // Check environment
+        updateStatus('Environment: ' + (window === window.top ? 'Standalone' : 'Iframe'));
+        updateStatus('WebSerial: ' + ('serial' in navigator ? 'Supported' : 'Not supported'));
+        updateStatus('WebUSB: ' + ('usb' in navigator ? 'Supported' : 'Not supported'));
+    </script>
+</body>
+</html>
+  `;
+}
+// Initialize on DOM load
+document.addEventListener("DOMContentLoaded", () => {
+  // Check browser support
+  if (!("serial" in navigator)) {
+    log("❌ WebSerial API not supported in this browser");
+    log("💡 Try Chrome/Edge with --enable-web-serial flag");
+    const button = document.getElementById(
+      "testStandalone"
+    ) as HTMLButtonElement;
+    if (button) button.disabled = true;
+  } else {
+    log("✅ WebSerial API supported");
+  }
+  if (!("usb" in navigator)) {
+    log("❌ WebUSB API not supported in this browser");
+    log("💡 Try Chrome/Edge with --enable-web-usb flag");
+  } else {
+    log("✅ WebUSB API supported");
+  }
+  log("🎯 Environment: " + (window === window.top ? "Standalone" : "Iframe"));
+  log("Ready to test dialog behavior...");
+  // Set up iframe content - start with permissive mode
+  window.loadIframe("permissive");
+  // Listen for messages from iframe
+  window.addEventListener("message", (event) => {
+    if (event.data.type === "iframe-log") {
+      log(`[IFRAME] ${event.data.message}`);
+    }
+  });
+});

examples/iframe-dialog-test/package.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+  "name": "iframe-dialog-test",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Test iframe WebSerial + WebUSB dialog behavior",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@lerobot/web": "workspace:*",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5"
+  }
+}

examples/iframe-dialog-test/vite.config.ts ADDED Viewed

	@@ -0,0 +1,21 @@

+import { defineConfig } from "vite";
+import { resolve } from "path";
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@lerobot/web": resolve(__dirname, "../../packages/web/src"),
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "iframe-dialog-test.html"),
+        content: resolve(__dirname, "iframe-content.html"),
+      },
+    },
+  },
+  server: {
+    open: "/iframe-dialog-test.html",
+  },
+});

examples/test-sequential-operations/README.md ADDED Viewed

	@@ -0,0 +1,49 @@

+# Test Sequential Operations
+This example tests the complete robotics workflow: findPort → releaseMotors → calibrate → teleoperate.
+## Purpose
+Validates the full API chain and tests all major functions working together in sequence.
+## Files
+- `test-sequential-operations.html` - HTML page with test controls
+- `test-sequential-operations.ts` - TypeScript implementation of sequential testing
+## Running
+From the root directory:
+```bash
+pnpm example:sequential-test
+```
+Or from this directory:
+```bash
+pnpm dev
+```
+## Testing Workflow
+1. Click "🚀 Run Sequential Operations Test"
+2. Workflow executes:
+   - **findPort()** - Discovers and connects to robot
+   - **releaseMotors()** - Releases motor torque for free movement
+   - **calibrate()** - Records motor ranges (auto-stops after 8 seconds)
+   - **teleoperate()** - Starts keyboard control with auto key simulation
+## Expected Behavior
+- Robot connection established
+- Motors released for calibration setup
+- Live calibration updates showing motor positions
+- Automatic teleoperation with simulated key presses
+- Auto-stop after test completion
+## Browser Requirements
+- Chrome/Edge 89+ with WebSerial and WebUSB APIs
+- HTTPS or localhost
+- Connected SO-100 robot arm for full testing

examples/test-sequential-operations/package.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+  "name": "test-sequential-operations",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Test sequential operations: findPort → releaseMotors → calibrate → teleoperate",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@lerobot/web": "workspace:*",
+    "typescript": "~5.8.3",
+    "vite": "^6.3.5"
+  }
+}

examples/{test-sequential-operations.html → test-sequential-operations/test-sequential-operations.html} RENAMED Viewed

File without changes

examples/{test-sequential-operations.ts → test-sequential-operations/test-sequential-operations.ts} RENAMED Viewed

@@ -132,7 +132,8 @@ window.runSequentialTest = async function () {
       log("✅ Calibration completed (simulated)");
     } else {
       // Real calibration
-      const calibrationProcess = await calibrate(robot, {
         onProgress: (message) => log(`📊 ${message}`),
         onLiveUpdate: (data) => {
           const motors = Object.keys(data);
@@ -210,12 +211,21 @@ window.runSequentialTest = async function () {
     // Step 4: Teleoperate with auto key simulation
     log("\n4️⃣ Starting teleoperation...");
-    const teleoperationProcess = await teleoperate(robot, {
       calibrationData: calibrationResult,
       onStateUpdate: (state) => {
-        if (state.isActive && Object.keys(state.keyStates).length > 0) {
           const activeKeys = Object.keys(state.keyStates).filter(
-            (k) => state.keyStates[k].pressed
           );
           log(`🎮 Auto-simulated keys: ${activeKeys.join(", ")}`);
         }

       log("✅ Calibration completed (simulated)");
     } else {
       // Real calibration
+      const calibrationProcess = await calibrate({
+        robot,
         onProgress: (message) => log(`📊 ${message}`),
         onLiveUpdate: (data) => {
           const motors = Object.keys(data);
     // Step 4: Teleoperate with auto key simulation
     log("\n4️⃣ Starting teleoperation...");
+    const teleoperationProcess = await teleoperate({
+      robot,
       calibrationData: calibrationResult,
+      teleop: {
+        type: "keyboard",
+        stepSize: 25,
+      },
       onStateUpdate: (state) => {
+        if (
+          state.isActive &&
+          state.keyStates &&
+          Object.keys(state.keyStates).length > 0
+        ) {
           const activeKeys = Object.keys(state.keyStates).filter(
+            (k) => state.keyStates![k].pressed
           );
           log(`🎮 Auto-simulated keys: ${activeKeys.join(", ")}`);
         }

examples/test-sequential-operations/vite.config.ts ADDED Viewed

	@@ -0,0 +1,20 @@

+import { defineConfig } from "vite";
+import { resolve } from "path";
+export default defineConfig({
+  resolve: {
+    alias: {
+      "@lerobot/web": resolve(__dirname, "../../packages/web/src"),
+    },
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, "test-sequential-operations.html"),
+      },
+    },
+  },
+  server: {
+    open: "/test-sequential-operations.html",
+  },
+});

package.json CHANGED Viewed

@@ -4,7 +4,10 @@
   "description": "State-of-the-art AI for real-world robotics in JS",
   "type": "module",
   "workspaces": [
-    "packages/*"
   ],
   "bin": {
     "lerobot": "./dist/cli/index.js"
@@ -24,6 +27,8 @@
   "scripts": {
     "dev": "vite --mode demo",
     "example:cyberpunk": "cd examples/cyberpunk-standalone && pnpm dev",
     "build": "pnpm run build:cli",
     "build:cli": "tsc --project tsconfig.cli.json",
     "build:demo": "tsc && vite build --mode demo",

   "description": "State-of-the-art AI for real-world robotics in JS",
   "type": "module",
   "workspaces": [
+    "packages/*",
+    "examples/cyberpunk-standalone",
+    "examples/iframe-dialog-test",
+    "examples/test-sequential-operations"
   ],
   "bin": {
     "lerobot": "./dist/cli/index.js"
   "scripts": {
     "dev": "vite --mode demo",
     "example:cyberpunk": "cd examples/cyberpunk-standalone && pnpm dev",
+    "example:iframe-test": "cd examples/iframe-dialog-test && pnpm dev",
+    "example:sequential-test": "cd examples/test-sequential-operations && pnpm dev",
     "build": "pnpm run build:cli",
     "build:cli": "tsc --project tsconfig.cli.json",
     "build:demo": "tsc && vite build --mode demo",

vite.config.ts CHANGED Viewed

@@ -54,27 +54,6 @@ export default defineConfig(({ mode }) => {
     };
   }
-  if (mode === "test") {
-    // Test mode - sequential operations test
-    return {
-      ...baseConfig,
-      server: {
-        open: "/examples/test-sequential-operations.html",
-      },
-      build: {
-        outDir: "dist/test",
-        rollupOptions: {
-          input: {
-            main: resolve(
-              __dirname,
-              "examples/test-sequential-operations.html"
-            ),
-          },
-        },
-      },
-    };
-  }
   if (mode === "lib") {
     // Library mode - core library without any demo UI
     return {

     };
   }
   if (mode === "lib") {
     // Library mode - core library without any demo UI
     return {