Sync from leLab @ 84b6251cec3471195dfa35119827fbd1da2a801e

.gitattributes

@@ -0,0 +1,42 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.stl filter=lfs diff=lfs merge=lfs -text
+*.lockb filter=lfs diff=lfs merge=lfs -text
+
+# Plain binary (overrides LFS): installing from git skips LFS, and the build copies these into the wheel.
+# sync_space.yml puts them back in LFS for the Space.
+public/so-101-urdf/meshes/*.stl -filter -diff -merge
+public/so-101-urdf/meshes/*.stl filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,49 @@
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Production
+/build
+/dist
+
+# Misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+.env*.local
+
+# Debug logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# IDE
+.idea/
+.vscode/
+*.swp
+*.swo
+
+# TypeScript
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity

Dockerfile

@@ -0,0 +1,38 @@
+# Vite 8 requires Node ^20.19.0 or >=22.12.0.
+FROM node:22-alpine
+
+# Use the existing node user (usually UID 1000)
+# Set up environment variables for the node user
+ENV HOME=/home/node \
+    PATH=/home/node/.local/bin:$PATH
+
+# Create and set up app directory owned by node user
+# Go to user's home directory first to ensure it exists
+WORKDIR $HOME
+RUN mkdir -p $HOME/app && \
+    chown -R node:node $HOME/app && \
+    chmod -R 755 $HOME/app # Set initial permissions
+WORKDIR $HOME/app
+
+# Switch to the node user
+USER node
+
+# Copy package files (owned by node)
+COPY --chown=node:node package*.json ./
+
+# Install dependencies straight from the committed lockfile. `npm ci` honours
+# the `resolved` URLs in package-lock.json and ignores the builder's configured
+# registry, so the install can't be derailed by a slow/incomplete npm mirror.
+RUN npm ci
+
+# Copy the entire viewer directory (owned by node)
+COPY --chown=node:node . .
+
+# Build the application
+RUN npm run build
+
+# Expose port
+EXPOSE 7860
+
+# Start the application
+CMD ["npm", "run", "preview", "--", "--port", "7860", "--host"]

HTTPS_SETUP.md

@@ -0,0 +1,219 @@
+# HTTPS Setup for Local Development
+
+This guide explains how to enable HTTPS for the frontend development server to ensure camera access works properly from mobile devices.
+
+## Why HTTPS is Required
+
+Modern browsers require HTTPS for accessing sensitive APIs like `getUserMedia()` (camera access), especially when:
+
+- Accessing from a different device (e.g., phone connecting to laptop's dev server)
+- The origin is not `localhost` or `127.0.0.1`
+
+Without HTTPS, camera access will be blocked by the browser's security policies.
+
+## Automatic Setup
+
+We've already set up HTTPS for you! The certificates are generated and the development server is configured to use them.
+
+### Quick Start
+
+1. **Start the development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+2. **Access from your computer:**
+
+   - `https://localhost:8080`
+   - `https://127.0.0.1:8080`
+
+3. **Access from your phone:**
+   - `https://192.168.1.103:8080` (or your current local IP)
+
+## Manual Setup (if needed)
+
+If you need to regenerate certificates or set up on a new machine:
+
+```bash
+# Run our setup script
+./scripts/setup-https.sh
+```
+
+Or manually:
+
+```bash
+# Install mkcert
+brew install mkcert  # macOS
+# For other platforms: https://github.com/FiloSottile/mkcert#installation
+
+# Install local CA
+mkcert -install
+
+# Generate certificates
+mkdir -p certs
+cd certs
+mkcert localhost 127.0.0.1 $(ipconfig getifaddr en0) ::1
+cd ..
+
+# Start development server
+npm run dev
+```
+
+## Certificate Details
+
+- **Location:** `./certs/`
+- **Files:**
+  - `localhost+3.pem` (certificate)
+  - `localhost+3-key.pem` (private key)
+- **Validity:** 3 months
+- **Domains:** localhost, 127.0.0.1, your local IP, IPv6 localhost
+
+## Mobile Device Setup
+
+### For Phone Access:
+
+1. **Ensure same WiFi network:** Your phone and development machine must be on the same WiFi network
+
+2. **Find your local IP:**
+
+   ```bash
+   ipconfig getifaddr en0  # macOS
+   # or check the console output when starting the dev server
+   ```
+
+3. **Access from phone:**
+
+   - Open Safari (iOS) or Chrome (Android)
+   - Navigate to `https://YOUR_LOCAL_IP:8080`
+   - You may see a security warning - this is normal for local certificates
+
+4. **Accept the certificate:**
+
+   - **iOS Safari:** Tap "Advanced" → "Proceed to website"
+   - **Android Chrome:** Tap "Advanced" → "Proceed to site (unsafe)"
+
+5. **Test camera access:**
+   - Go to the recording page OR use our camera test page: `https://YOUR_LOCAL_IP:8080/test-camera.html`
+   - Try to add a camera or click "Start Camera"
+   - The browser should prompt for camera permission
+   - Grant permission to test `getUserMedia()` functionality
+
+## Troubleshooting
+
+### Certificate Issues
+
+If you see certificate errors:
+
+```bash
+# Regenerate certificates
+rm -rf certs/
+./scripts/setup-https.sh
+```
+
+### IP Address Changes
+
+If your local IP changes (common with DHCP):
+
+```bash
+# Check current IP
+ipconfig getifaddr en0
+
+# Regenerate certificates with new IP
+rm -rf certs/
+./scripts/setup-https.sh
+```
+
+### Port Already in Use
+
+If port 8080 is busy:
+
+```bash
+# Check what's using the port
+lsof -ti:8080
+
+# Kill the process if needed
+kill -9 $(lsof -ti:8080)
+```
+
+### Browser Cache Issues
+
+If you're having issues after certificate changes:
+
+1. Clear browser cache and cookies for localhost
+2. Restart the browser
+3. Try incognito/private mode
+
+## Network Address Detection
+
+The app automatically detects the appropriate URL for phone access:
+
+- **Localhost access:** Automatically converts to network IP for QR codes
+- **Network access:** Uses current URL as-is
+- **Domain access:** Works with existing SSL certificates
+
+You can see the detected address in:
+
+- Browser console logs
+- Camera configuration UI (blue info box)
+
+## Security Notes
+
+- These certificates are only trusted on your local machine
+- They're perfect for development but should never be used in production
+- The private key is stored locally and should not be shared
+- Certificates expire after 3 months for security
+
+## Production Deployment
+
+For production:
+
+- Use a proper SSL certificate from a trusted CA
+- Configure your reverse proxy (nginx, Apache) or hosting platform
+- Ensure HTTPS is enforced across your entire application
+
+## Verification
+
+To verify HTTPS is working:
+
+1. **Check the URL bar:** Should show `https://` with a lock icon
+2. **Check console:** Network address detection should show HTTPS URLs
+3. **Test camera access:** `getUserMedia()` should work without security errors
+4. **Check from phone:** Camera permissions should be available
+
+### Quick Test Page
+
+We've included a dedicated camera test page for easy verification:
+
+**Desktop:** `https://localhost:8080/test-camera.html`
+**Phone:** `https://192.168.1.103:8080/test-camera.html`
+
+This page will:
+
+- ✅ Verify HTTPS and secure context
+- ✅ Test camera permissions and `getUserMedia()`
+- ✅ Display real-time video stream
+- ✅ Show detailed connection information
+- ✅ Provide troubleshooting guidance
+
+### Expected Results
+
+**✅ Success indicators:**
+
+- Green protocol check: "Camera access should work!"
+- Camera permission prompt appears
+- Video stream displays without errors
+- No console security warnings
+
+**❌ Failure indicators:**
+
+- Red protocol check: "Camera access may be blocked"
+- `NotAllowedError` or `NotSecureError` in console
+- No camera permission prompt
+- "This site is not secure" warnings
+
+## Additional Resources
+
+- [mkcert GitHub Repository](https://github.com/FiloSottile/mkcert)
+- [MDN: getUserMedia()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
+- [Chrome Developer: HTTPS for Localhost](https://web.dev/how-to-use-local-https/)

LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -0,0 +1,20 @@
+---
+title: LeLab
+emoji: ⚡
+colorFrom: yellow
+colorTo: red
+sdk: docker
+app_port: 7860
+pinned: false
+short_description: Simple Interface to use LeRobot
+---
+
+<img width="1283" alt="Screenshot 2025-06-19 at 00 23 55" src="https://github.com/user-attachments/assets/ce1b5888-d24b-4adf-a422-694d4b0aa751" />
+
+# LeLab official Space repository
+
+If you've used [LeLab](https://huggingface.co/spaces/lerobot/LeLab) and want to contribute or found a bug, this is the place to be. This repo is directly hooked up to the Hugging Face space.
+
+Here's the equivalent [backend](https://github.com/huggingface/leLab) that keeps the FastAPI server you run to actually wrap the LeRobot library.
+
+We'll be updating this README shortly.

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

eslint.config.js

@@ -0,0 +1,29 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  }
+);

index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>LeLab</title>
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="description" content="LeRobot but on your browser." />
+
+    <meta property="og:title" content="LeLab" />
+    <meta property="og:description" content="LeRobot but on your browser." />
+    <meta property="og:type" content="website" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,91 @@
+{
+  "name": "vite_react_shadcn_ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "test": "vitest run",
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
+    "@react-three/drei": "^9.122.0",
+    "@react-three/fiber": "^8.18.0",
+    "@tanstack/react-query": "^5.56.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.3.0",
+    "input-otp": "^1.2.4",
+    "jszip": "^3.10.1",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.0",
+    "react-resizable-panels": "^2.1.3",
+    "react-router-dom": "^7.18.3",
+    "recharts": "^2.12.7",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "three": "^0.177.0",
+    "urdf-loader": "^0.12.6",
+    "vaul": "^0.9.3",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react-swc": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "jsdom": "^28.1.0",
+    "lovable-tagger": "^1.3.0",
+    "postcss": "^8.5.25",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^8.0.16",
+    "vitest": "^5.0.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/robots.txt

@@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /

public/so-101-urdf/CMakeLists.txt

@@ -0,0 +1,37 @@
+cmake_minimum_required(VERSION 3.10.2)
+
+project(so_arm_description)
+
+find_package(ament_cmake REQUIRED)
+find_package(urdf REQUIRED)
+
+# Install the mesh files from SO101/assets
+install(
+	DIRECTORY
+		SO101/assets/
+	DESTINATION
+		share/${PROJECT_NAME}/meshes
+	FILES_MATCHING PATTERN "*.stl"
+)
+
+# Install URDF files
+install(
+	DIRECTORY
+		urdf/
+	DESTINATION
+		share/${PROJECT_NAME}/urdf
+	FILES_MATCHING PATTERN "*.urdf"
+)
+
+# Install other directories
+install(
+	DIRECTORY
+		meshes
+		config
+		launch
+	DESTINATION
+		share/${PROJECT_NAME}
+	OPTIONAL
+)
+
+ament_package()

public/so-101-urdf/README.md

@@ -0,0 +1,45 @@
+# SO-ARM ROS2 URDF Package
+
+A complete ROS2 package for the SO-ARM101 robotic arm with URDF description.
+
+## 📋 Overview
+
+This package provides a complete ROS2 implementation for the SO-ARM101 robotic arm, including:
+
+- URDF robot description with visual and collision meshes
+- RViz visualization with pre-configured displays
+- Launch files for easy robot visualization
+- Integration with MoveIt for motion planning
+- Joint state publishers for interactive control
+
+## 🎯 Original Source
+
+https://github.com/TheRobotStudio/SO-ARM100/tree/main/Simulation/SO101
+
+## 🚀 Key Improvements Made
+
+### 1. **Complete ROS2 Package Structure**
+
+- ✅ Proper `package.xml` with all necessary dependencies
+- ✅ CMakeLists.txt for ROS2 build system
+- ✅ Organized directory structure following ROS2 conventions
+
+### 2. **Enhanced Visualization**
+
+- ✅ Fixed mesh file paths for proper package integration
+
+### Build Instructions
+
+1. Clone this repository into your ROS2 workspace:
+
+   ```bash
+   cd ~/your_ros2_ws/src
+   git clone <your-repo-url> so_arm_description
+   ```
+
+2. Build the package:
+   ```bash
+   cd ~/your_ros2_ws
+   colcon build --packages-select so_arm_description
+   source install/setup.bash
+   ```

public/so-101-urdf/config/joint_names_so_arm_urdf.yaml

@@ -0,0 +1 @@
+controller_joint_names: ['', 'Rotation', 'Pitch', 'Elbow', 'Wrist_Pitch', 'Wrist_Roll', 'Jaw', ]

public/so-101-urdf/joints_properties.xml

@@ -0,0 +1,12 @@
+<default>
+    <default class="sts3215">
+        <geom contype="0" conaffinity="0"/>
+        <joint damping="0.60" frictionloss="0.052" armature="0.028"/>
+        <position kp="17.8" kv="0.0" forcerange="-3.35 3.35"/>
+    </default>
+    <default class="backlash">
+        <!-- +/- 0.5° of backlash -->
+        <joint damping="0.01" frictionloss="0" armature="0.01" limited="true"
+            range="-0.008726646259971648 0.008726646259971648"/>
+    </default>
+</default>

public/so-101-urdf/meshes/base_motor_holder_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8cd2f241037ea377af1191fffe0dd9d9006beea6dcc48543660ed41647072424
+size 1877084

public/so-101-urdf/meshes/base_so101_v2.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bb12b7026575e1f70ccc7240051f9d943553bf34e5128537de6cd86fae33924d
+size 471584

public/so-101-urdf/meshes/motor_holder_so101_base_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:31242ae6fb59d8b15c66617b88ad8e9bded62d57c35d11c0c43a70d2f4caa95b
+size 1129384

public/so-101-urdf/meshes/motor_holder_so101_wrist_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:887f92e6013cb64ea3a1ab8675e92da1e0beacfd5e001f972523540545e08011
+size 1052184

public/so-101-urdf/meshes/moving_jaw_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:785a9dded2f474bc1d869e0d3dae398a3dcd9c0c345640040472210d2861fa9d
+size 1413584

public/so-101-urdf/meshes/rotation_pitch_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9be900cc2a2bf718102841ef82ef8d2873842427648092c8ed2ca1e2ef4ffa34
+size 883684

public/so-101-urdf/meshes/sts3215_03a_no_horn_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:75ef3781b752e4065891aea855e34dc161a38a549549cd0970cedd07eae6f887
+size 865884

public/so-101-urdf/meshes/sts3215_03a_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a37c871fb502483ab96c256baf457d36f2e97afc9205313d9c5ab275ef941cd0
+size 954084

public/so-101-urdf/meshes/under_arm_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d01d1f2de365651dcad9d6669e94ff87ff7652b5bb2d10752a66a456a86dbc71
+size 1975884

public/so-101-urdf/meshes/upper_arm_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:475056e03a17e71919b82fd88ab9a0b898ab50164f2a7943652a6b2941bb2d4f
+size 1303484

public/so-101-urdf/meshes/waveshare_mounting_plate_so101_v2.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e197e24005a07d01bbc06a8c42311664eaeda415bf859f68fa247884d0f1a6e9
+size 62784

public/so-101-urdf/meshes/wrist_roll_follower_so101_v1.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b17b410a12d64ec39554abc3e8054d8a97384b2dc4a8d95a5ecb2a93670f5f4
+size 1439884

public/so-101-urdf/meshes/wrist_roll_pitch_so101_v2.stl

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c7ec5525b4d8b9e397a30ab4bb0037156a5d5f38a4adf2c7d943d6c56eda5ae
+size 2699784

public/so-101-urdf/package.xml

@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<?xml-model href="http://download.ros.org/schema/package_format3.xsd" schematypens="http://www.w3.org/2001/XMLSchema"?>
+<package format="3">
+  <name>so_arm_description</name>
+  <version>1.0.0</version>
+  <description>SO-ARM101 URDF Resources</description>
+
+  <author email="contact@lycheeai-hub.com">LycheeAI</author>
+
+  <maintainer email="contact@lycheeai-hub.com">LycheeAI</maintainer>
+
+  <license>BSD</license>
+
+  <buildtool_depend>ament_cmake</buildtool_depend>
+
+  <depend>urdf</depend>
+  <exec_depend>robot_state_publisher</exec_depend>
+  <exec_depend>joint_state_publisher</exec_depend>
+  <exec_depend>joint_state_publisher_gui</exec_depend>
+  <exec_depend>rviz2</exec_depend>
+  <exec_depend>xacro</exec_depend>
+
+  <export>
+    <build_type>ament_cmake</build_type>
+  </export>
+</package>

public/so-101-urdf/urdf/so101_new_calib.urdf

@@ -0,0 +1,435 @@
+<?xml version='1.0' encoding='utf-8'?>
+<!-- Generated using onshape-to-robot -->
+<!-- Onshape https://cad.onshape.com/documents/7715cc284bb430fe6dab4ffd/w/4fd0791b683777b02f8d975a/e/826c553ede3b7592eb9ca800 -->
+<robot name="so101_new_calib">
+
+  <!-- Materials -->
+  <material name="3d_printed">
+    <color rgba="1.0 0.82 0.12 1.0"/>
+  </material>
+  <material name="sts3215">
+    <color rgba="0.1 0.1 0.1 1.0"/>
+  </material>
+
+  <!-- Link base -->
+  <link name="base">
+    <inertial>
+      <origin xyz="0.020739 0.00204287 0.065966" rpy="0 0 0"/>
+      <mass value="0.147"/>
+      <inertia ixx="0.000136117" ixy="4.59787e-07" ixz="9.75275e-08" iyy="0.000114686" iyz="-4.97151e-06" izz="0.000130364"/>
+    </inertial>
+    <!-- Part base_motor_holder_so101_v1 -->
+    <visual>
+      <origin xyz="0.0206915 0.0221255 0.0300817" rpy="1.5708 -1.23909e-16 2.33147e-15"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/base_motor_holder_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0206915 0.0221255 0.0300817" rpy="1.5708 -1.23909e-16 2.33147e-15"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/base_motor_holder_so101_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part base_so101_v2 -->
+    <visual>
+      <origin xyz="0.0207909 0.0221255 0.0300817" rpy="1.5708 -0 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/base_so101_v2.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0207909 0.0221255 0.0300817" rpy="1.5708 -0 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/base_so101_v2.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part sts3215_03a_v1 -->
+    <visual>
+      <origin xyz="0.0207909 -0.0105745 0.0761817" rpy="-2.20282e-15 2.77556e-17 -1.5708"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0207909 -0.0105745 0.0761817" rpy="-2.20282e-15 2.77556e-17 -1.5708"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part waveshare_mounting_plate_so101_v2 -->
+    <visual>
+      <origin xyz="0.0205915 0.0467435 0.0798817" rpy="1.5708 -1.21716e-14 2.33147e-15"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/waveshare_mounting_plate_so101_v2.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0205915 0.0467435 0.0798817" rpy="1.5708 -1.21716e-14 2.33147e-15"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/waveshare_mounting_plate_so101_v2.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link shoulder -->
+  <link name="shoulder">
+    <inertial>
+      <origin xyz="-0.0307604 -1.66727e-05 -0.0252713" rpy="0 0 0"/>
+      <mass value="0.100006"/>
+      <inertia ixx="8.3759e-05" ixy="7.55525e-08" ixz="-1.16342e-06" iyy="8.10403e-05" iyz="1.54663e-07" izz="2.39783e-05"/>
+    </inertial>
+    <!-- Part sts3215_03a_v1_2 -->
+    <visual>
+      <origin xyz="-0.0303992 0.000422241 -0.0417" rpy="1.5708 1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.0303992 0.000422241 -0.0417" rpy="1.5708 1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part motor_holder_so101_base_v1 -->
+    <visual>
+      <origin xyz="-0.0675992 -0.000177759 0.0158499" rpy="1.5708 -1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/motor_holder_so101_base_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.0675992 -0.000177759 0.0158499" rpy="1.5708 -1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/motor_holder_so101_base_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part rotation_pitch_so101_v1 -->
+    <visual>
+      <origin xyz="0.0122008 2.22413e-05 0.0464" rpy="-1.5708 -0 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/rotation_pitch_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0122008 2.22413e-05 0.0464" rpy="-1.5708 -0 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/rotation_pitch_so101_v1.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link upper_arm -->
+  <link name="upper_arm">
+    <inertial>
+      <origin xyz="-0.0898471 -0.00838224 0.0184089" rpy="0 0 0"/>
+      <mass value="0.103"/>
+      <inertia ixx="4.08002e-05" ixy="-1.97819e-05" ixz="-4.03016e-08" iyy="0.000147318" iyz="8.97326e-09" izz="0.000142487"/>
+    </inertial>
+    <!-- Part sts3215_03a_v1_3 -->
+    <visual>
+      <origin xyz="-0.11257 -0.0155 0.0187" rpy="-3.14159 -6.8695e-16 -1.5708"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.11257 -0.0155 0.0187" rpy="-3.14159 -6.8695e-16 -1.5708"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part upper_arm_so101_v1 -->
+    <visual>
+      <origin xyz="-0.065085 0.012 0.0182" rpy="3.14159 -9.35612e-32 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/upper_arm_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.065085 0.012 0.0182" rpy="3.14159 -9.35612e-32 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/upper_arm_so101_v1.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link lower_arm -->
+  <link name="lower_arm">
+    <inertial>
+      <origin xyz="-0.0980701 0.00324376 0.0182831" rpy="0 0 0"/>
+      <mass value="0.104"/>
+      <inertia ixx="2.87438e-05" ixy="7.41152e-06" ixz="1.26409e-06" iyy="0.000159844" iyz="-4.90188e-08" izz="0.00014529"/>
+    </inertial>
+    <!-- Part under_arm_so101_v1 -->
+    <visual>
+      <origin xyz="-0.0648499 -0.032 0.0182" rpy="-3.14159 -0 3.9443e-31"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/under_arm_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.0648499 -0.032 0.0182" rpy="-3.14159 -0 3.9443e-31"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/under_arm_so101_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part motor_holder_so101_wrist_v1 -->
+    <visual>
+      <origin xyz="-0.0648499 -0.032 0.018" rpy="-3.14159 4.73317e-30 7.88861e-31"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/motor_holder_so101_wrist_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.0648499 -0.032 0.018" rpy="-3.14159 4.73317e-30 7.88861e-31"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/motor_holder_so101_wrist_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part sts3215_03a_v1_4 -->
+    <visual>
+      <origin xyz="-0.1224 0.0052 0.0187" rpy="-3.14159 -3.58047e-15 -3.14159"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="-0.1224 0.0052 0.0187" rpy="-3.14159 -3.58047e-15 -3.14159"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link wrist -->
+  <link name="wrist">
+    <inertial>
+      <origin xyz="-0.000103312 -0.0386143 0.0281156" rpy="0 0 0"/>
+      <mass value="0.079"/>
+      <inertia ixx="3.68263e-05" ixy="1.7893e-08" ixz="-5.28128e-08" iyy="2.5391e-05" iyz="3.6412e-06" izz="2.1e-05"/>
+    </inertial>
+    <!-- Part sts3215_03a_no_horn_v1 -->
+    <visual>
+      <origin xyz="5.55112e-17 -0.0424 0.0306" rpy="1.5708 1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_no_horn_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="5.55112e-17 -0.0424 0.0306" rpy="1.5708 1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_no_horn_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part wrist_roll_pitch_so101_v2 -->
+    <visual>
+      <origin xyz="0 -0.028 0.0181" rpy="-1.5708 -1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/wrist_roll_pitch_so101_v2.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="0 -0.028 0.0181" rpy="-1.5708 -1.5708 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/wrist_roll_pitch_so101_v2.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link gripper -->
+  <link name="gripper">
+    <inertial>
+      <origin xyz="0.000213627 0.000245138 -0.025187" rpy="0 0 0"/>
+      <mass value="0.087"/>
+      <inertia ixx="2.75087e-05" ixy="-3.35241e-07" ixz="-5.7352e-06" iyy="4.33657e-05" iyz="-5.17847e-08" izz="3.45059e-05"/>
+    </inertial>
+    <!-- Part sts3215_03a_v1_5 -->
+    <visual>
+      <origin xyz="0.0077 0.0001 -0.0234" rpy="-1.5708 -5.55112e-17 -1.38213e-14"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+      <material name="sts3215"/>
+    </visual>
+    <collision>
+      <origin xyz="0.0077 0.0001 -0.0234" rpy="-1.5708 -5.55112e-17 -1.38213e-14"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/sts3215_03a_v1.stl"/>
+      </geometry>
+    </collision>
+    <!-- Part wrist_roll_follower_so101_v1 -->
+    <visual>
+      <origin xyz="5.55112e-17 -0.000218214 0.000949706" rpy="-3.14159 -5.55112e-17 -9.17912e-24"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/wrist_roll_follower_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="5.55112e-17 -0.000218214 0.000949706" rpy="-3.14159 -5.55112e-17 -9.17912e-24"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/wrist_roll_follower_so101_v1.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Link jaw -->
+  <link name="jaw">
+    <inertial>
+      <origin xyz="-0.00157495 -0.0300244 0.0192755" rpy="0 0 0"/>
+      <mass value="0.012"/>
+      <inertia ixx="6.61427e-06" ixy="-3.19807e-07" ixz="-5.90717e-09" iyy="1.89032e-06" iyz="-1.09945e-07" izz="5.28738e-06"/>
+    </inertial>
+    <!-- Part moving_jaw_so101_v1 -->
+    <visual>
+      <origin xyz="-5.55112e-17 -1.94746e-17 0.0189" rpy="9.53145e-17 -4.66093e-24 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/moving_jaw_so101_v1.stl"/>
+      </geometry>
+      <material name="3d_printed"/>
+    </visual>
+    <collision>
+      <origin xyz="-5.55112e-17 -1.94746e-17 0.0189" rpy="9.53145e-17 -4.66093e-24 0"/>
+      <geometry>
+        <mesh filename="package://so_arm_description/meshes/moving_jaw_so101_v1.stl"/>
+      </geometry>
+    </collision>
+  </link>
+
+  <!-- Joint from gripper to jaw -->
+  <joint name="Jaw" type="revolute">
+    <origin xyz="0.0202 0.0188 -0.0234" rpy="1.5708 -5.14108e-17 -1.38655e-14"/>
+    <parent link="gripper"/>
+    <child link="jaw"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-0.174533" upper="1.74533"/>
+  </joint>
+
+  <transmission name="6_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Jaw">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor6">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+  <!-- Joint from wrist to gripper -->
+  <joint name="Wrist_Roll" type="revolute">
+    <origin xyz="0 -0.0611 0.0181" rpy="1.5708 -9.38083e-08 3.14159"/>
+    <parent link="wrist"/>
+    <child link="gripper"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-2.79253" upper="2.79253"/>
+  </joint>
+
+  <transmission name="5_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Wrist_Roll">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor5">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+  <!-- Joint from lower_arm to wrist -->
+  <joint name="Wrist_Pitch" type="revolute">
+    <origin xyz="-0.1349 0.0052 1.65232e-16" rpy="3.2474e-15 2.86219e-15 -1.5708"/>
+    <parent link="lower_arm"/>
+    <child link="wrist"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-1.65806" upper="1.65806"/>
+  </joint>
+
+  <transmission name="4_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Wrist_Pitch">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor4">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+  <!-- Joint from upper_arm to lower_arm -->
+  <joint name="Elbow" type="revolute">
+    <origin xyz="-0.11257 -0.028 2.46331e-16" rpy="-1.22818e-15 5.75928e-16 1.5708"/>
+    <parent link="upper_arm"/>
+    <child link="lower_arm"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-1.74533" upper="1.5708"/>
+  </joint>
+
+  <transmission name="3_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Elbow">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor3">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+  <!-- Joint from shoulder to upper_arm -->
+  <joint name="Pitch" type="revolute">
+    <origin xyz="-0.0303992 -0.0182778 -0.0542" rpy="-1.5708 -1.5708 0"/>
+    <parent link="shoulder"/>
+    <child link="upper_arm"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-1.74533" upper="1.74533"/>
+  </joint>
+
+  <transmission name="2_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Pitch">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor2">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+  <!-- Joint from base to shoulder -->
+  <joint name="Rotation" type="revolute">
+    <origin xyz="0.0207909 -0.0230745 0.0948817" rpy="-3.14159 6.03684e-16 1.5708"/>
+    <parent link="base"/>
+    <child link="shoulder"/>
+    <axis xyz="0 0 1"/>
+    <limit effort="10" velocity="10" lower="-1.91986" upper="1.91986"/>
+  </joint>
+
+  <transmission name="1_trans">
+    <type>transmission_interface/SimpleTransmission</type>
+    <joint name="Rotation">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+    </joint>
+    <actuator name="motor1">
+      <hardwareInterface>hardware_interface/PositionJointInterface</hardwareInterface>
+      <mechanicalReduction>1</mechanicalReduction>
+    </actuator>
+  </transmission>
+
+</robot>

src/.gitignore

@@ -0,0 +1 @@
+node_modules/

src/App.tsx

@@ -0,0 +1,68 @@
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ThemeProvider } from "@/contexts/ThemeContext";
+import { UrdfProvider } from "@/contexts/UrdfContext";
+import { DragAndDropProvider } from "@/contexts/DragAndDropContext";
+import { Toaster } from "@/components/ui/toaster";
+import Landing from "@/pages/Landing";
+import Teleoperation from "@/pages/Teleoperation";
+import Calibration from "@/pages/Calibration";
+import Recording from "@/pages/Recording";
+import Training from "@/pages/Training";
+import Inference from "@/pages/Inference";
+import EditDataset from "@/pages/EditDataset";
+import Upload from "@/pages/Upload";
+
+import NotFound from "@/pages/NotFound";
+import SingleTabGuard from "@/components/SingleTabGuard";
+import TeleopStopNotice from "@/components/TeleopStopNotice";
+import UpdateNotice from "@/components/UpdateNotice";
+import { TooltipProvider } from "@radix-ui/react-tooltip";
+import { ApiProvider } from "./contexts/ApiContext";
+import { HfAuthProvider } from "./contexts/HfAuthContext";
+import { OnboardingProvider } from "./contexts/OnboardingContext";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <ThemeProvider>
+          <ApiProvider>
+            <HfAuthProvider>
+              <UrdfProvider>
+                <DragAndDropProvider>
+                  <BrowserRouter>
+                    <SingleTabGuard>
+                      <OnboardingProvider>
+                        <TeleopStopNotice />
+                        <UpdateNotice />
+                        <Routes>
+                          <Route path="/" element={<Landing />} />
+                          <Route path="/teleoperation" element={<Teleoperation />} />
+                          <Route path="/recording" element={<Recording />} />
+                          <Route path="/upload" element={<Upload />} />
+                          <Route path="/training" element={<Training />} />
+                          <Route path="/training/:jobId" element={<Training />} />
+                          <Route path="/inference" element={<Inference />} />
+                          <Route path="/calibration" element={<Calibration />} />
+                          <Route path="/edit-dataset" element={<EditDataset />} />
+
+                          <Route path="*" element={<NotFound />} />
+                        </Routes>
+                      </OnboardingProvider>
+                    </SingleTabGuard>
+                    <Toaster />
+                  </BrowserRouter>
+                </DragAndDropProvider>
+              </UrdfProvider>
+            </HfAuthProvider>
+          </ApiProvider>
+        </ThemeProvider>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+}
+
+export default App;

src/components/Footer.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+import { Github, BookOpen } from "lucide-react";
+
+const DiscordIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    role="img"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    className={className}
+  >
+    <path d="M20.317 4.369A19.79 19.79 0 0 0 16.558 3.2a.07.07 0 0 0-.074.035c-.211.375-.444.864-.608 1.249a18.27 18.27 0 0 0-5.487 0 12.51 12.51 0 0 0-.617-1.249.077.077 0 0 0-.074-.035 19.736 19.736 0 0 0-3.76 1.169.07.07 0 0 0-.032.027C2.533 8.046 1.79 11.624 2.155 15.157a.082.082 0 0 0 .031.056 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.027c.462-.63.873-1.295 1.226-1.994a.076.076 0 0 0-.041-.105 13.13 13.13 0 0 1-1.873-.892.077.077 0 0 1-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 0 1 .077-.01c3.927 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.009c.12.099.246.198.373.292a.077.077 0 0 1-.006.128 12.32 12.32 0 0 1-1.873.891.077.077 0 0 0-.04.106c.36.698.772 1.363 1.225 1.993a.076.076 0 0 0 .084.028 19.84 19.84 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-4.087-.838-7.636-3.548-10.787a.061.061 0 0 0-.031-.028zM8.02 12.997c-1.182 0-2.156-1.085-2.156-2.419 0-1.333.955-2.419 2.156-2.419 1.21 0 2.175 1.095 2.156 2.42 0 1.333-.955 2.418-2.156 2.418zm7.974 0c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.175 1.095 2.156 2.42 0 1.333-.946 2.418-2.156 2.418z" />
+  </svg>
+);
+
+const links = [
+  {
+    href: "https://github.com/huggingface/lerobot",
+    label: "GitHub",
+    Icon: Github,
+  },
+  {
+    href: "https://huggingface.co/docs/lerobot",
+    label: "Documentation",
+    Icon: BookOpen,
+  },
+  {
+    href: "https://discord.com/invite/s3KuuzsPFb",
+    label: "Discord",
+    Icon: DiscordIcon,
+  },
+];
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="fixed inset-x-0 bottom-0 z-30 border-t border-gray-800 bg-black/95">
+      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-3 px-4 py-4 text-sm text-gray-400 sm:flex-row">
+        <span>
+          Powered by{" "}
+          <a
+            href="https://github.com/huggingface/lerobot"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="font-medium text-gray-200 hover:text-white"
+          >
+            LeRobot
+          </a>
+        </span>
+        <nav className="flex items-center gap-4">
+          {links.map(({ href, label, Icon }) => (
+            <a
+              key={label}
+              href={href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 text-gray-400 hover:text-white"
+            >
+              <Icon className="h-4 w-4" />
+              <span>{label}</span>
+            </a>
+          ))}
+        </nav>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/Logo.tsx

@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+  iconOnly?: boolean;
+}
+
+const Logo: React.FC<LogoProps> = ({
+  className,
+  iconOnly = false
+}) => {
+  return <div className={cn("flex items-center gap-2", className)}>
+      <img src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png" alt="LeLab Logo" className="h-8 w-8" />
+      {!iconOnly && <span className="font-bold text-white text-2xl">LeLab</span>}
+    </div>;
+};
+
+export default Logo;

src/components/SingleTabGuard.tsx

@@ -0,0 +1,141 @@
+import { useCallback, useEffect, useRef, useState, ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+type Peer = { id: string; openedAt: number; lastSeen: number };
+
+const CHANNEL = "lelab-tabs-v1";
+const HEARTBEAT_MS = 1000;
+const PEER_TIMEOUT_MS = 3000;
+
+const SingleTabGuard = ({ children }: { children: ReactNode }) => {
+  const [isPrimary, setIsPrimary] = useState(true);
+  const peersRef = useRef<Map<string, Peer>>(new Map());
+  const myIdRef = useRef<string>("");
+  const myOpenedAtRef = useRef<number>(0);
+  const channelRef = useRef<BroadcastChannel | null>(null);
+
+  const recompute = useCallback(() => {
+    const peers = peersRef.current;
+    const cutoff = Date.now() - PEER_TIMEOUT_MS;
+    for (const [id, peer] of peers) {
+      if (peer.lastSeen < cutoff) peers.delete(id);
+    }
+    let winnerId = myIdRef.current;
+    let winnerOpenedAt = myOpenedAtRef.current;
+    for (const peer of peers.values()) {
+      if (
+        peer.openedAt < winnerOpenedAt ||
+        (peer.openedAt === winnerOpenedAt && peer.id < winnerId)
+      ) {
+        winnerId = peer.id;
+        winnerOpenedAt = peer.openedAt;
+      }
+    }
+    setIsPrimary(winnerId === myIdRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof BroadcastChannel === "undefined") {
+      return;
+    }
+
+    myIdRef.current = crypto.randomUUID();
+    myOpenedAtRef.current = Date.now();
+
+    const channel = new BroadcastChannel(CHANNEL);
+    channelRef.current = channel;
+
+    const send = (type: string) => {
+      channel.postMessage({
+        type,
+        id: myIdRef.current,
+        openedAt: myOpenedAtRef.current,
+      });
+    };
+
+    channel.onmessage = (e) => {
+      const msg = e.data;
+      if (!msg || msg.id === myIdRef.current) return;
+      const peers = peersRef.current;
+
+      if (msg.type === "HEARTBEAT") {
+        peers.set(msg.id, {
+          id: msg.id,
+          openedAt: msg.openedAt,
+          lastSeen: Date.now(),
+        });
+      } else if (msg.type === "RELEASE") {
+        peers.delete(msg.id);
+      } else if (msg.type === "TAKEOVER") {
+        peers.set(msg.id, {
+          id: msg.id,
+          openedAt: msg.openedAt,
+          lastSeen: Date.now(),
+        });
+        // Move ourselves behind the taker so the election flips.
+        if (myOpenedAtRef.current <= msg.openedAt) {
+          myOpenedAtRef.current = msg.openedAt + 1;
+        }
+      }
+      recompute();
+    };
+
+    send("HEARTBEAT");
+    const interval = setInterval(() => {
+      send("HEARTBEAT");
+      recompute();
+    }, HEARTBEAT_MS);
+
+    const onUnload = () => send("RELEASE");
+    window.addEventListener("beforeunload", onUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", onUnload);
+      clearInterval(interval);
+      send("RELEASE");
+      channel.close();
+      channelRef.current = null;
+    };
+  }, [recompute]);
+
+  const takeOver = useCallback(() => {
+    myOpenedAtRef.current = 0;
+    channelRef.current?.postMessage({
+      type: "TAKEOVER",
+      id: myIdRef.current,
+      openedAt: 0,
+    });
+    recompute();
+  }, [recompute]);
+
+  // A non-primary tab renders only the blocker, not `children`. Anything the
+  // app mounts as a descendant (a Radix modal that sets `pointer-events: none`
+  // on `body`, the onboarding welcome dialog and `?` launcher) would otherwise
+  // sit behind this overlay and, in the modal case, kill the "Use this tab"
+  // button along with the rest of the page.
+  return (
+    <>
+      {isPrimary && children}
+      {!isPrimary && (
+        <div
+          className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/80 backdrop-blur-sm"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div className="mx-4 max-w-md space-y-4 rounded-lg border bg-background p-6 text-center shadow-lg">
+            <h2 className="text-lg font-semibold">
+              LeLab is already open in another tab
+            </h2>
+            <p className="text-sm text-muted-foreground">
+              Only one tab can control the robot at a time. Switch back to the
+              original tab, or take over here — the other tab will lock.
+            </p>
+            <Button onClick={takeOver}>Use this tab</Button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SingleTabGuard;

src/components/TeleopStopNotice.tsx

@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useToast } from "@/hooks/use-toast";
+
+const FLAG = "lelab:teleop-stopped";
+
+/**
+ * One-time confirmation that teleoperation was stopped during the previous
+ * page's unload (a browser navigation, reload, or tab close from the
+ * teleoperation page set a sessionStorage flag, since React cleanup can't run
+ * in those cases). On the next fresh load we surface a toast wherever the user
+ * landed, then clear the flag. In-app navigation away from teleop toasts
+ * directly and never sets the flag, so this never double-fires.
+ */
+const TeleopStopNotice = () => {
+  const { toast } = useToast();
+
+  useEffect(() => {
+    let stopped = false;
+    try {
+      stopped = sessionStorage.getItem(FLAG) === "1";
+      if (stopped) sessionStorage.removeItem(FLAG);
+    } catch {
+      /* sessionStorage unavailable — nothing to show */
+    }
+    if (stopped) {
+      toast({
+        title: "Teleoperation stopped",
+        description: "The arm was disconnected cleanly when you left the page.",
+      });
+    }
+  }, [toast]);
+
+  return null;
+};
+
+export default TeleopStopNotice;

src/components/UpdateNotice.tsx

@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { Loader2, Copy, Sparkles, ChevronRight } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useApi } from "@/contexts/ApiContext";
+import { useToast } from "@/hooks/use-toast";
+import { useUpdateCheck } from "@/hooks/useUpdateCheck";
+
+/**
+ * App-level popup that notifies the user when a newer LeLab is available on
+ * GitHub. Offers a copy-able upgrade command, a best-effort "Update now" button
+ * (runs the pip upgrade on the backend), and a "don't ask again" opt-out.
+ */
+const UpdateNotice = () => {
+  const { status, open, dismiss } = useUpdateCheck();
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const { toast } = useToast();
+  const [dontAsk, setDontAsk] = useState(false);
+  const [updating, setUpdating] = useState(false);
+  const [output, setOutput] = useState<string | null>(null);
+
+  if (!status) return null;
+
+  const behind =
+    typeof status.commits_behind === "number" && status.commits_behind > 0
+      ? `${status.commits_behind} commit${status.commits_behind === 1 ? "" : "s"} behind`
+      : "A new version is available";
+
+  const copyCommand = async () => {
+    if (!status.update_command) return;
+    try {
+      await navigator.clipboard.writeText(status.update_command);
+      toast({
+        title: "Copied",
+        description: "Update command copied to clipboard.",
+      });
+    } catch {
+      toast({
+        title: "Copy failed",
+        description: "Select and copy the command manually.",
+        variant: "destructive",
+      });
+    }
+  };
+
+  const runUpdate = async () => {
+    setUpdating(true);
+    setOutput(null);
+    try {
+      const r = await fetchWithHeaders(`${baseUrl}/system/update`, {
+        method: "POST",
+      });
+      const body: { success: boolean; message: string; output: string } =
+        await r.json();
+      if (body.success) {
+        toast({ title: "Updated", description: body.message });
+        dismiss(false);
+      } else {
+        setOutput(body.output || body.message);
+        toast({
+          title: "Update failed",
+          description: body.message,
+          variant: "destructive",
+        });
+      }
+    } catch (e) {
+      toast({
+        title: "Update failed",
+        description: e instanceof Error ? e.message : String(e),
+        variant: "destructive",
+      });
+    } finally {
+      setUpdating(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(o) => {
+        if (!o && !updating) dismiss(dontAsk);
+      }}
+    >
+      <DialogContent
+        className="bg-slate-800 border-slate-700 text-white max-w-lg"
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-3 text-white">
+            <Sparkles className="w-5 h-5 text-amber-400" />
+            LeLab update available
+          </DialogTitle>
+          <DialogDescription className="text-slate-300">
+            You're {behind} 😱.
+            <br />
+            Update to get the latest fixes and features 🤗.
+            {status.compare_url && (
+              <>
+                {" "}
+                <a
+                  href={status.compare_url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="text-sky-300 underline hover:text-sky-200"
+                >
+                  See what changed
+                </a>
+                .
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <Collapsible>
+            <CollapsibleTrigger className="group flex items-center gap-1.5 text-xs font-medium text-slate-300 hover:text-white transition-colors">
+              <ChevronRight className="w-3.5 h-3.5 transition-transform group-data-[state=open]:rotate-90" />
+              Or update manually
+            </CollapsibleTrigger>
+            <CollapsibleContent className="pt-2">
+              <div className="flex items-start gap-2">
+                <code className="min-w-0 flex-1 px-2 py-1.5 rounded bg-slate-900 text-sky-300 text-xs break-all whitespace-pre-wrap">
+                  {status.update_command}
+                </code>
+                <Button
+                  variant="outline"
+                  size="icon"
+                  onClick={copyCommand}
+                  title="Copy command"
+                  className="shrink-0 bg-slate-900 border-slate-600 text-white hover:bg-slate-700"
+                >
+                  <Copy className="w-4 h-4" />
+                </Button>
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
+
+          {output && (
+            <pre className="max-h-40 overflow-auto rounded bg-slate-900 p-2 text-xs text-slate-300 whitespace-pre-wrap">
+              {output}
+            </pre>
+          )}
+
+          <div className="flex items-center justify-between gap-3 pt-1">
+            <label className="flex items-center gap-2 text-sm text-slate-300">
+              <Checkbox
+                checked={dontAsk}
+                onCheckedChange={(v) => setDontAsk(v === true)}
+                className="border-slate-300 data-[state=checked]:bg-slate-300 data-[state=checked]:text-slate-900"
+              />
+              Don't ask me again
+            </label>
+            <div className="flex items-center gap-2">
+              <Button
+                variant="ghost"
+                onClick={() => dismiss(dontAsk)}
+                disabled={updating}
+                className="text-slate-300 hover:bg-slate-700 hover:text-white"
+              >
+                Later
+              </Button>
+              {status.can_auto_update && (
+                <Button onClick={runUpdate} disabled={updating}>
+                  {updating ? (
+                    <>
+                      <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                      Updating…
+                    </>
+                  ) : (
+                    "Update now"
+                  )}
+                </Button>
+              )}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default UpdateNotice;

src/components/UrdfViewer.tsx

@@ -0,0 +1,310 @@
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  useMemo,
+  useCallback,
+  memo,
+} from "react";
+import { cn } from "@/lib/utils";
+
+import URDFManipulator from "urdf-loader/src/urdf-manipulator-element.js";
+import { useUrdf } from "@/hooks/useUrdf";
+import { useRealTimeJoints } from "@/hooks/useRealTimeJoints";
+import {
+  createUrdfViewer,
+  fitGridToRobot,
+  setupMeshLoader,
+  setupJointHighlighting,
+  setupModelLoading,
+  URDFViewerElement,
+} from "@/lib/urdfViewerHelpers";
+
+// Register the URDFManipulator as a custom element if it hasn't been already
+if (typeof window !== "undefined" && !customElements.get("urdf-viewer")) {
+  customElements.define("urdf-viewer", URDFManipulator);
+}
+import * as THREE from "three";
+
+// Extend the interface for the URDF viewer element to include background property
+interface UrdfViewerElement extends HTMLElement {
+  background?: string;
+  setJointValue?: (jointName: string, value: number) => void;
+}
+
+const UrdfViewer: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [highlightedJoint, setHighlightedJoint] = useState<string | null>(null);
+  const { registerUrdfProcessor, alternativeUrdfModels, isDefaultModel } =
+    useUrdf();
+
+  const cleanupAnimationRef = useRef<(() => void) | null>(null);
+  const viewerRef = useRef<URDFViewerElement | null>(null);
+  const hasInitializedRef = useRef<boolean>(false);
+
+  // Real-time joint updates via WebSocket
+  const { isConnected: isWebSocketConnected } = useRealTimeJoints({
+    viewerRef,
+    enabled: isDefaultModel, // Only enable WebSocket for default model
+  });
+
+  // Add state for custom URDF path
+  const [customUrdfPath, setCustomUrdfPath] = useState<string | null>(null);
+  const [urlModifierFunc, setUrlModifierFunc] = useState<
+    ((url: string) => string) | null
+  >(null);
+
+  const packageRef = useRef<string>("");
+
+  // Implement UrdfProcessor interface for drag and drop
+  const urdfProcessor = useMemo(
+    () => ({
+      loadUrdf: (urdfPath: string) => {
+        setCustomUrdfPath(urdfPath);
+      },
+      setUrlModifierFunc: (func: (url: string) => string) => {
+        setUrlModifierFunc(() => func);
+      },
+      getPackage: () => {
+        return packageRef.current;
+      },
+    }),
+    []
+  );
+
+  // Register the URDF processor with the global drag and drop context
+  useEffect(() => {
+    registerUrdfProcessor(urdfProcessor);
+  }, [registerUrdfProcessor, urdfProcessor]);
+
+  // Create URL modifier function for default model
+  const defaultUrlModifier = useCallback((url: string) => {
+    console.log(`🔗 defaultUrlModifier called with: ${url}`);
+
+    // Handle various package:// URL formats for the default SO-101 model
+    if (url.startsWith("package://so_arm_description/meshes/")) {
+      const modifiedUrl = url.replace(
+        "package://so_arm_description/meshes/",
+        "/so-101-urdf/meshes/"
+      );
+      console.log(`🔗 Modified URL (package): ${modifiedUrl}`);
+      return modifiedUrl;
+    }
+
+    // Handle case where package path might be partially resolved
+    if (url.includes("so_arm_description/meshes/")) {
+      const modifiedUrl = url.replace(
+        /.*so_arm_description\/meshes\//,
+        "/so-101-urdf/meshes/"
+      );
+      console.log(`🔗 Modified URL (partial): ${modifiedUrl}`);
+      return modifiedUrl;
+    }
+
+    // Handle the specific problematic path pattern we're seeing in logs
+    if (url.includes("/so-101-urdf/so_arm_description/meshes/")) {
+      const modifiedUrl = url.replace(
+        "/so-101-urdf/so_arm_description/meshes/",
+        "/so-101-urdf/meshes/"
+      );
+      console.log(`🔗 Modified URL (problematic path): ${modifiedUrl}`);
+      return modifiedUrl;
+    }
+
+    // Handle relative paths that might need mesh folder prefix
+    if (
+      url.endsWith(".stl") &&
+      !url.startsWith("/") &&
+      !url.startsWith("http")
+    ) {
+      const modifiedUrl = `/so-101-urdf/meshes/${url}`;
+      console.log(`🔗 Modified URL (relative): ${modifiedUrl}`);
+      return modifiedUrl;
+    }
+
+    console.log(`🔗 Unmodified URL: ${url}`);
+    return url;
+  }, []);
+
+  // Main effect to create and setup the viewer only once
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Create and configure the URDF viewer element
+    const viewer = createUrdfViewer(containerRef.current, true);
+    viewerRef.current = viewer; // Store reference to the viewer
+
+    // Setup mesh loading function with appropriate URL modifier
+    const activeUrlModifier = isDefaultModel
+      ? defaultUrlModifier
+      : urlModifierFunc;
+    setupMeshLoader(viewer, activeUrlModifier);
+
+    // Determine which URDF to load - fixed path to match the actual available file
+    const urdfPath = isDefaultModel
+      ? "/so-101-urdf/urdf/so101_new_calib.urdf"
+      : customUrdfPath || "";
+
+    // Set the package path for the default model
+    if (isDefaultModel) {
+      packageRef.current = "/"; // Set to root so we can handle full path resolution in URL modifier
+    }
+
+    // Setup model loading if a path is available
+    let cleanupModelLoading = () => {};
+    if (urdfPath) {
+      cleanupModelLoading = setupModelLoading(
+        viewer,
+        urdfPath,
+        packageRef.current,
+        setCustomUrdfPath,
+        alternativeUrdfModels
+      );
+    }
+
+    // Setup joint highlighting
+    const cleanupJointHighlighting = setupJointHighlighting(
+      viewer,
+      setHighlightedJoint
+    );
+
+    // Function to fit the robot to the camera view
+    const fitRobotToView = (viewer: URDFViewerElement) => {
+      if (!viewer || !viewer.robot) {
+        console.log(
+          "[RobotViewer] Cannot fit to view: No viewer or robot available"
+        );
+        return;
+      }
+
+      try {
+        // Create a bounding box for the robot
+        const boundingBox = new THREE.Box3().setFromObject(viewer.robot);
+
+        // Calculate the center of the bounding box
+        const center = new THREE.Vector3();
+        boundingBox.getCenter(center);
+
+        // Calculate the size of the bounding box
+        const size = new THREE.Vector3();
+        boundingBox.getSize(size);
+
+        // Get the maximum dimension to ensure the entire robot is visible
+        const maxDim = Math.max(size.x, size.y, size.z);
+
+        // Rescale the ground grid to this robot's actual unit scale — it
+        // starts as a 1x1 placeholder since it's created before any model
+        // is loaded (see createUrdfViewer).
+        fitGridToRobot(viewer, center, boundingBox.min.y, maxDim);
+
+        // Position camera to see the center of the model
+        viewer.camera.position.copy(center);
+
+        // Move the camera back to see the entire robot
+        // Use the model's up direction to determine which axis to move along
+        const upVector = new THREE.Vector3();
+        if (viewer.up === "+Z" || viewer.up === "Z") {
+          upVector.set(1, 1, 1); // Move back in a diagonal
+        } else if (viewer.up === "+Y" || viewer.up === "Y") {
+          upVector.set(1, 1, 1); // Move back in a diagonal
+        } else {
+          upVector.set(1, 1, 1); // Default direction
+        }
+
+        // Normalize the vector and multiply by the size
+        upVector.normalize().multiplyScalar(maxDim * 1.3);
+        viewer.camera.position.add(upVector);
+
+        // Make the camera look at the center of the model
+        viewer.controls.target.copy(center);
+
+        // Update controls and mark for redraw
+        viewer.controls.update();
+        viewer.redraw();
+
+        console.log("[RobotViewer] Robot auto-fitted to view");
+      } catch (error) {
+        console.error("[RobotViewer] Error fitting robot to view:", error);
+      }
+    };
+
+    // Add event listener for when the robot is loaded to auto-fit to view
+    const onRobotLoad = () => {
+      fitRobotToView(viewer);
+    };
+
+    // Setup animation event handler for the default model or when hasAnimation is true
+    const onModelProcessed = () => {
+      hasInitializedRef.current = true;
+      if ("setJointValue" in viewer) {
+        // Clear any existing animation
+        if (cleanupAnimationRef.current) {
+          cleanupAnimationRef.current();
+          cleanupAnimationRef.current = null;
+        }
+      }
+      // Auto-fit the robot to view when the model is processed
+      onRobotLoad();
+    };
+
+    viewer.addEventListener("urdf-processed", onModelProcessed);
+
+    // Return cleanup function
+    return () => {
+      if (cleanupAnimationRef.current) {
+        cleanupAnimationRef.current();
+        cleanupAnimationRef.current = null;
+      }
+      hasInitializedRef.current = false;
+      cleanupJointHighlighting();
+      cleanupModelLoading();
+      viewer.removeEventListener("urdf-processed", onModelProcessed);
+    };
+  }, [
+    isDefaultModel,
+    customUrdfPath,
+    urlModifierFunc,
+    defaultUrlModifier,
+    alternativeUrdfModels,
+  ]);
+
+  return (
+    <div
+      className={cn(
+        "w-full h-full transition-all duration-300 ease-in-out relative",
+        "bg-gradient-to-br from-gray-900 to-gray-800"
+      )}
+    >
+      <div ref={containerRef} className="w-full h-full" />
+
+      {/* Joint highlight indicator */}
+      {highlightedJoint && (
+        <div className="absolute bottom-4 right-4 bg-black/70 text-white px-3 py-2 rounded-md text-sm font-mono z-10">
+          Joint: {highlightedJoint}
+        </div>
+      )}
+
+      {/* WebSocket connection status */}
+      {isDefaultModel && (
+        <div className="absolute top-4 right-4 z-10">
+          <div
+            className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-mono ${
+              isWebSocketConnected
+                ? "bg-green-900/70 text-green-300"
+                : "bg-red-900/70 text-red-300"
+            }`}
+          >
+            <div
+              className={`w-2 h-2 rounded-full ${
+                isWebSocketConnected ? "bg-green-400" : "bg-red-400"
+              }`}
+            />
+            {isWebSocketConnected ? "Live Robot Data" : "Disconnected"}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default memo(UrdfViewer);

src/components/control/BrowserCameraPreview.test.tsx

@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import CameraRotationSelect from "./CameraRotationSelect";
+vi.mock("@/hooks/useCameraStream", () => ({ useCameraStream: () => ({ videoRef: React.createRef<HTMLVideoElement>(), hasError: false }) }));
+let root: Root;
+let container: HTMLDivElement;
+beforeEach(() => { Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true }); container = document.createElement("div"); root = createRoot(container); });
+afterEach(() => act(() => root.unmount()));
+test("the Rotation control exposes four clockwise values and emits a number", () => {
+  const change = vi.fn();
+  act(() => root.render(<CameraRotationSelect rotation={180} onChange={change} />));
+  const select = container.querySelector("select")!;
+  expect(container.querySelector("label")!.htmlFor).toBe(select.id);
+  expect(select.value).toBe("180");
+  expect(Array.from(select.options).map((option) => option.text)).toEqual(["0° clockwise", "90° clockwise", "180° clockwise", "270° clockwise"]);
+  act(() => { select.value = "90"; select.dispatchEvent(new Event("change", { bubbles: true })); });
+  expect(change).toHaveBeenCalledWith(90);
+});
+test("a quarter turn fills the rotated recorded frame", () => {
+  act(() => root.render(<BrowserCameraPreview deviceId="wrist" rotation={90} width={640} height={480} />));
+  const video = container.querySelector("video")!, wrapper = video.parentElement!;
+  expect(wrapper.style.aspectRatio).toBe("480 / 640");
+  expect(video.style.objectFit).toBe("cover");
+  expect(video.style.maxWidth).toBe("none");
+  expect(video.style.transform).toBe("translate(-50%, -50%) rotate(90deg)");
+  expect(parseFloat(video.style.width)).toBeCloseTo(640 / 480 * 100);
+  expect(parseFloat(video.style.height)).toBeCloseTo(480 / 640 * 100);
+});
+test("a stream at another size keeps the recorded aspect ratio", () => {
+  act(() => root.render(<BrowserCameraPreview deviceId="A" rotation={0} width={640} height={480} />));
+  const video = container.querySelector("video")!;
+  Object.defineProperty(video, "videoWidth", { value: 1280 });
+  Object.defineProperty(video, "videoHeight", { value: 720 });
+  act(() => video.dispatchEvent(new Event("loadedmetadata")));
+  expect(video.parentElement!.style.aspectRatio).toBe("640 / 480");
+  expect(video.style.width).toBe("100%");
+  expect(video.style.objectFit).toBe("cover");
+});
+test("the reference ghost sits over the video with its rotation and opacity", () => {
+  act(() => root.render(<BrowserCameraPreview deviceId="wrist" rotation={90} ghostSrc="blob:ref" ghostOpacity={0.3} />));
+  const video = container.querySelector("video")!, ghost = container.querySelector("img")!;
+  expect(ghost.getAttribute("src")).toBe("blob:ref");
+  expect(ghost.style.opacity).toBe("0.3");
+  expect(ghost.style.transform).toBe(video.style.transform);
+  expect(ghost.style.width).toBe(video.style.width);
+  act(() => root.render(<BrowserCameraPreview deviceId="wrist" />));
+  expect(container.querySelector("img")).toBeNull();
+});

src/components/control/BrowserCameraPreview.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { VideoOff } from "lucide-react";
+import { useCameraStream } from "@/hooks/useCameraStream";
+import { CameraRotation, cameraPreviewGeometry, cameraRotationError } from "@/lib/cameraConfig";
+
+interface Props {
+  deviceId: string;
+  paused?: boolean;
+  rotation?: CameraRotation;
+  width?: number;
+  height?: number;
+  className?: string;
+  fallback?: string;
+  /** Saved reference frame, drawn over the live video as a translucent ghost. */
+  ghostSrc?: string;
+  ghostOpacity?: number;
+}
+
+/**
+ * Browser streams contain raw frames, so only browser previews use CSS rotation.
+ * The box keeps the recorded capture size's shape even when the browser stream
+ * has another size, so the preview frames the scene the way recording will.
+ */
+export default function BrowserCameraPreview({
+  deviceId,
+  paused = false,
+  rotation = 0,
+  width = 640,
+  height = 480,
+  className = "",
+  fallback,
+  ghostSrc,
+  ghostOpacity = 0.5,
+}: Props) {
+  const rotationError = cameraRotationError({ rotation });
+  const { videoRef, hasError } = useCameraStream(deviceId, paused || !!rotationError, { width, height });
+  const geometry = rotationError
+    ? { aspectRatio: `${width} / ${height}`, videoStyle: {} }
+    : cameraPreviewGeometry(width, height, rotation);
+  const showVideo = !rotationError && !paused && deviceId && !hasError;
+  return (
+    <div
+      className={`relative overflow-hidden bg-gray-800 ${className}`}
+      style={{ aspectRatio: geometry.aspectRatio }}
+    >
+      {showVideo ? (
+        <>
+        <video
+          ref={videoRef}
+          autoPlay
+          muted
+          playsInline
+          style={geometry.videoStyle}
+        />
+        {ghostSrc && (
+          <img
+            src={ghostSrc}
+            alt=""
+            aria-hidden
+            className="pointer-events-none"
+            style={{ ...geometry.videoStyle, opacity: ghostOpacity }}
+          />
+        )}
+        </>
+      ) : (
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <VideoOff className="w-5 h-5 text-gray-500 mb-1" />
+          <span className="text-xs text-gray-500">
+            {rotationError ?? fallback ?? (paused ? "Preview paused" : deviceId ? "Preview failed" : "No camera selected")}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

src/components/control/CameraFeed.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import { CameraRotation } from "@/lib/cameraConfig";
+
+interface CameraFeedProps {
+  deviceId: string;
+  label?: string;
+  rotation?: CameraRotation;
+  width?: number;
+  height?: number;
+}
+
+const CameraFeed: React.FC<CameraFeedProps> = ({ deviceId, label, rotation, width, height }) => (
+  <div className="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
+    <BrowserCameraPreview deviceId={deviceId} rotation={rotation} width={width} height={height} />
+    {label && (
+      <div className="p-2 text-sm text-gray-300 truncate border-t border-gray-800">{label}</div>
+    )}
+  </div>
+);
+
+export default CameraFeed;

src/components/control/CameraRotationSelect.tsx

@@ -0,0 +1,30 @@
+import React, { useId } from "react";
+import { Label } from "@/components/ui/label";
+import { CAMERA_ROTATIONS, CameraRotation, cameraRotation } from "@/lib/cameraConfig";
+
+interface Props {
+  rotation: CameraRotation | null;
+  onChange: (rotation: CameraRotation) => void;
+  disabled?: boolean;
+}
+
+export default function CameraRotationSelect({ rotation, onChange, disabled }: Props) {
+  const id = useId();
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <Label htmlFor={id} className="text-gray-400">Rotation</Label>
+      <select
+        id={id}
+        value={rotation ?? ""}
+        disabled={disabled}
+        onChange={(event) => onChange(cameraRotation(Number(event.target.value)))}
+        className="bg-gray-800 border border-gray-700 rounded text-white text-xs h-7 px-2"
+      >
+        {rotation === null && <option value="" disabled>Choose rotation</option>}
+        {CAMERA_ROTATIONS.map((angle) => (
+          <option key={angle} value={angle}>{angle}° clockwise</option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/components/control/CommandBar.tsx

@@ -0,0 +1,81 @@
+
+import React from 'react';
+import { Mic, MicOff, Send, Camera } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface CommandBarProps {
+  command: string;
+  setCommand: (command: string) => void;
+  handleSendCommand: () => void;
+  isVoiceActive: boolean;
+  setIsVoiceActive: (isActive: boolean) => void;
+  showCamera: boolean;
+  setShowCamera: (show: boolean) => void;
+  handleEndSession: () => void;
+}
+
+const CommandBar: React.FC<CommandBarProps> = ({
+  command,
+  setCommand,
+  handleSendCommand,
+  isVoiceActive,
+  setIsVoiceActive,
+  showCamera,
+  setShowCamera,
+  handleEndSession
+}) => {
+  return (
+    <div className="bg-gray-900 p-4 space-y-4">
+      <div className="flex flex-col sm:flex-row gap-4 items-center max-w-4xl mx-auto w-full">
+        <Input
+          value={command}
+          onChange={(e) => setCommand(e.target.value)}
+          placeholder="Tell the robot what to do..."
+          className="flex-1 bg-gray-800 border-gray-600 text-white placeholder-gray-400 text-lg py-3"
+          onKeyPress={(e) => e.key === 'Enter' && handleSendCommand()}
+        />
+        <Button
+          onClick={handleSendCommand}
+          className="bg-orange-500 hover:bg-orange-600 px-6 py-3 self-stretch sm:self-auto"
+        >
+          <Send strokeWidth={1.5} />
+          Send
+        </Button>
+      </div>
+
+      <div className="flex justify-center items-center gap-6">
+        <div className="flex flex-wrap justify-center gap-2 sm:gap-4">
+          <Button
+            onClick={() => setIsVoiceActive(!isVoiceActive)}
+            className={`px-6 py-2 ${
+              isVoiceActive ? 'bg-gray-600 text-white hover:bg-gray-500' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            {isVoiceActive ? <Mic strokeWidth={1.5} /> : <MicOff strokeWidth={1.5} />}
+            Voice Command
+          </Button>
+
+          <Button
+            onClick={() => setShowCamera(!showCamera)}
+            className={`px-6 py-2 ${
+              showCamera ? 'bg-gray-600 text-white hover:bg-gray-500' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+            }`}
+          >
+            <Camera strokeWidth={1.5} />
+            Show Camera
+          </Button>
+
+          <Button
+            onClick={handleEndSession}
+            className="bg-red-600 hover:bg-red-700 px-6 py-2"
+          >
+            End Session
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommandBar;

src/components/control/MetricsPanel.tsx

@@ -0,0 +1,190 @@
+
+import React, { useEffect, useRef } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { Camera, MicOff } from 'lucide-react';
+
+interface MetricsPanelProps {
+  activeTab: 'SENSORS' | 'MOTORS';
+  setActiveTab: (tab: 'SENSORS' | 'MOTORS') => void;
+  sensorData: any[];
+  motorData: any[];
+  hasPermissions: boolean;
+  streamRef: React.RefObject<MediaStream | null>;
+  isVoiceActive: boolean;
+  micLevel: number;
+}
+
+const MetricsPanel: React.FC<MetricsPanelProps> = ({
+  activeTab,
+  setActiveTab,
+  sensorData,
+  motorData,
+  hasPermissions,
+  streamRef,
+  isVoiceActive,
+  micLevel,
+}) => {
+  const sensorVideoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (activeTab === 'SENSORS' && hasPermissions && sensorVideoRef.current && streamRef.current) {
+      if (sensorVideoRef.current.srcObject !== streamRef.current) {
+        sensorVideoRef.current.srcObject = streamRef.current;
+      }
+    }
+  }, [activeTab, hasPermissions, streamRef]);
+
+  return (
+    <div className="w-full lg:w-1/2 p-2 sm:p-4">
+      <div className="bg-gray-900 rounded-lg p-4 h-full flex flex-col">
+        {/* Tab Headers */}
+        <div className="flex mb-4">
+          <button
+            onClick={() => setActiveTab('MOTORS')}
+            className={`px-6 py-2 rounded-t-lg text-sm sm:text-base ${
+              activeTab === 'MOTORS'
+                ? 'bg-orange-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            MOTORS
+          </button>
+          <button
+            onClick={() => setActiveTab('SENSORS')}
+            className={`px-6 py-2 rounded-t-lg ml-2 text-sm sm:text-base ${
+              activeTab === 'SENSORS'
+                ? 'bg-orange-500 text-white'
+                : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+            }`}
+          >
+            SENSORS
+          </button>
+        </div>
+
+        {/* Chart Content */}
+        <div className="flex-1 overflow-y-auto">
+          {activeTab === 'SENSORS' && (
+            <div className="space-y-4">
+              {/* Webcam Feed */}
+              <div className="border border-gray-800 rounded p-2 flex flex-col h-64">
+                <h3 className="text-sm text-white font-medium mb-2">Live Camera Feed</h3>
+                {hasPermissions ? (
+                  <div className="flex-1 bg-black rounded overflow-hidden">
+                    <video
+                      ref={sensorVideoRef}
+                      autoPlay
+                      muted
+                      playsInline
+                      className="w-full h-full object-contain"
+                    />
+                  </div>
+                ) : (
+                  <div className="flex-1 flex items-center justify-center bg-black rounded">
+                    <div className="text-center">
+                      <Camera className="w-12 h-12 mx-auto text-gray-500 mb-2" />
+                      <p className="text-gray-400">Camera permission not granted.</p>
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              {/* Mic Detection & Other Sensors */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="border border-gray-800 rounded p-2 flex flex-col justify-center min-h-[120px]">
+                    <h3 className="text-sm text-center text-white font-medium mb-2">Voice Activity</h3>
+                  {hasPermissions ? (
+                    <div className="flex-1 flex flex-col items-center justify-center gap-2 text-center">
+                      <div className="flex items-end h-10 gap-px w-full justify-center">
+                        {[...Array(15)].map((_, i) => {
+                          const barIsActive = isVoiceActive && i < (micLevel / 120 * 15);
+                          return (
+                            <div
+                              key={i}
+                              className={`w-1.5 rounded-full transition-colors duration-75 ${barIsActive ? 'bg-orange-500' : 'bg-gray-700'}`}
+                              style={{ height: `${(i / 15 * 60) + 20}%` }}
+                            />
+                          );
+                        })}
+                      </div>
+                      <p className="text-xs text-gray-300">
+                        {isVoiceActive ? "Voice commands active" : "Voice commands muted"}
+                      </p>
+                    </div>
+                  ) : (
+                    <div className="flex-1 flex items-center justify-center bg-black rounded">
+                      <div className="text-center">
+                        <MicOff className="w-8 h-8 mx-auto text-gray-500 mb-2" />
+                        <p className="text-gray-400">Microphone permission not granted.</p>
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Sensor Charts */}
+                {['sensor3', 'sensor4'].map((sensor, index) => (
+                  <div key={sensor} className="border border-gray-800 rounded p-2 flex flex-col h-auto min-h-[120px]">
+                    <h3 className="text-sm text-white font-medium mb-2">Sensor {index + 3}</h3>
+                    <ResponsiveContainer width="100%" height="90%">
+                      <LineChart data={sensorData}>
+                        <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                        <XAxis hide />
+                        <YAxis fontSize={12} stroke="#9CA3AF" />
+                        <Tooltip
+                          contentStyle={{
+                            backgroundColor: '#1F2937',
+                            border: '1px solid #374151',
+                            color: '#fff'
+                          }}
+                        />
+                        <Line
+                          type="monotone"
+                          dataKey={sensor}
+                          stroke={index % 2 === 1 ? '#ff6b35' : '#ffdd44'}
+                          strokeWidth={2}
+                          dot={false}
+                        />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {activeTab === 'MOTORS' && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              {['motor1', 'motor2', 'motor3', 'motor4', 'motor5', 'motor6'].map((motor, index) => (
+                <div key={motor} className="border border-gray-800 rounded p-2 h-40">
+                  <h3 className="text-sm text-white font-medium mb-2">Motor {index + 1}</h3>
+                  <ResponsiveContainer width="100%" height="80%">
+                    <LineChart data={motorData}>
+                      <CartesianGrid strokeDasharray="3 3" stroke="#374151" />
+                      <XAxis hide />
+                      <YAxis fontSize={12} stroke="#9CA3AF" />
+                      <Tooltip
+                        contentStyle={{
+                          backgroundColor: '#1F2937',
+                          border: '1px solid #374151',
+                          color: '#fff'
+                        }}
+                      />
+                      <Line
+                        type="monotone"
+                        dataKey={motor}
+                        stroke={index % 2 === 0 ? '#ff6b35' : '#ffdd44'}
+                        strokeWidth={2}
+                        dot={false}
+                      />
+                    </LineChart>
+                  </ResponsiveContainer>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MetricsPanel;