Sync from leLab @ 7317f7103e3a9d7f45fe4c0d6e4660a8f9d295e3

.gitattributes

@@ -0,0 +1,40 @@
+*.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
+
+# Build output: store as plain binary (overrides LFS) so the wheel can ship real files
+dist/** -filter -diff -merge

.gitignore

@@ -0,0 +1,48 @@
+# Dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# Testing
+/coverage
+
+# Production
+/build
+
+# 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,35 @@
+FROM node:18-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
+RUN npm install
+
+# 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,88 @@
+{
+  "name": "vite_react_shadcn_ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "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": "^6.26.2",
+    "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": "^3.5.0",
+    "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",
+    "lovable-tagger": "^1.1.7",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.11",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.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,61 @@
+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 { TooltipProvider } from "@radix-ui/react-tooltip";
+import { ApiProvider } from "./contexts/ApiContext";
+import { HfAuthProvider } from "./contexts/HfAuthContext";
+
+const queryClient = new QueryClient();
+
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <ThemeProvider>
+          <ApiProvider>
+            <HfAuthProvider>
+              <UrdfProvider>
+                <DragAndDropProvider>
+                  <BrowserRouter>
+                    <SingleTabGuard>
+                      <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>
+                    </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,136 @@
+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]);
+
+  return (
+    <>
+      {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/UrdfViewer.tsx

@@ -0,0 +1,304 @@
+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,
+  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);
+
+        // 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/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;

src/components/control/VisualizerPanel.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+import UrdfViewer from "../UrdfViewer";
+import Logo from "@/components/Logo";
+
+interface VisualizerPanelProps {
+  onGoBack: () => void;
+  className?: string;
+}
+
+const VisualizerPanel: React.FC<VisualizerPanelProps> = ({
+  onGoBack,
+  className,
+}) => {
+  return (
+    <div
+      className={cn(
+        "w-full p-2 sm:p-4 space-y-4 lg:space-y-0 lg:space-x-4 flex flex-col lg:flex-row",
+        className
+      )}
+    >
+      <div className="bg-gray-900 rounded-lg p-4 flex-1 flex flex-col">
+        <div className="flex items-center gap-4 mb-4">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={onGoBack}
+            className="text-gray-400 hover:text-white hover:bg-gray-800 flex-shrink-0"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Button>
+          <Logo iconOnly={true} />
+          <div className="w-px h-6 bg-gray-700" />
+          <h2 className="text-xl font-medium text-gray-200">Teleoperation</h2>
+        </div>
+        <div className="flex-1 bg-black rounded border border-gray-800 min-h-[50vh] lg:min-h-0">
+          <UrdfViewer />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VisualizerPanel;

src/components/jobs/CheckpointDropdown.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { JobCheckpoint } from "@/lib/checkpointsApi";
+
+interface Props {
+  checkpoints: JobCheckpoint[];
+  selectedStep: number | null;
+  onChange: (step: number) => void;
+  disabled?: boolean;
+  placeholder?: string;
+}
+
+export const CheckpointDropdown: React.FC<Props> = ({
+  checkpoints,
+  selectedStep,
+  onChange,
+  disabled,
+  placeholder = "Select checkpoint",
+}) => {
+  const value = selectedStep != null ? String(selectedStep) : undefined;
+  return (
+    <Select
+      value={value}
+      onValueChange={(v) => onChange(Number(v))}
+      disabled={disabled || checkpoints.length === 0}
+    >
+      <SelectTrigger
+        className="bg-slate-800 border-slate-700 text-white h-8 text-xs px-2 w-auto min-w-[110px]"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent className="bg-slate-900 border-slate-700 text-white">
+        {checkpoints.map((c) => (
+          <SelectItem
+            key={c.step}
+            value={String(c.step)}
+            onClick={(e) => e.stopPropagation()}
+          >
+            step {c.step}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+};
+
+export default CheckpointDropdown;

src/components/jobs/HubJobCard.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { HubJob } from "@/lib/jobsApi";
+import {
+  ExternalLink,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  XCircle,
+  Clock,
+  HelpCircle,
+} from "lucide-react";
+
+interface Props {
+  job: HubJob;
+}
+
+function relativeTime(iso: string | null): string {
+  if (!iso) return "—";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "—";
+  const diff = Math.max(0, (Date.now() - t) / 1000);
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+interface StagePresentation {
+  label: string;
+  color: string;
+  Icon: React.ComponentType<{ className?: string }>;
+  spin?: boolean;
+}
+
+const stagePresentation: Record<string, StagePresentation> = {
+  RUNNING: { label: "Running", color: "text-green-400", Icon: Loader2, spin: true },
+  QUEUED: { label: "Queued", color: "text-amber-400", Icon: Clock },
+  SCHEDULING: { label: "Scheduling", color: "text-amber-400", Icon: Clock },
+  COMPLETED: { label: "Done", color: "text-slate-400", Icon: CheckCircle2 },
+  FAILED: { label: "Failed", color: "text-red-400", Icon: XCircle },
+  // HF API uses "CANCELED" (single L); accept both spellings.
+  CANCELED: { label: "Cancelled", color: "text-amber-400", Icon: AlertTriangle },
+  CANCELLED: { label: "Cancelled", color: "text-amber-400", Icon: AlertTriangle },
+};
+
+const HubJobCard: React.FC<Props> = ({ job }) => {
+  const stage = job.status?.stage?.toUpperCase() ?? "";
+  const present: StagePresentation = stagePresentation[stage] ?? {
+    label: stage || "Unknown",
+    color: "text-slate-400",
+    Icon: HelpCircle,
+  };
+  const Icon = present.Icon;
+  const title =
+    job.docker_image ?? job.space_id ?? `Job ${job.id.slice(0, 12)}…`;
+
+  return (
+    <Card
+      onClick={() => window.open(job.url, "_blank", "noopener,noreferrer")}
+      className="bg-slate-800/50 border-slate-700 rounded-xl cursor-pointer hover:border-slate-500 transition-colors"
+    >
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className={`flex items-center gap-1.5 text-xs font-semibold ${present.color}`}>
+            <Icon className={`w-3.5 h-3.5 ${present.spin ? "animate-spin" : ""}`} />
+            {present.label}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            asChild
+            className="h-7 w-7 text-slate-400 hover:text-white"
+            aria-label="View on Hub"
+          >
+            <a
+              href={job.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          </Button>
+        </div>
+        <div>
+          <div className="text-white font-semibold truncate" title={title}>
+            {title}
+          </div>
+          <div className="text-xs text-slate-400 truncate">
+            {job.flavor ?? "—"} · {relativeTime(job.created_at)}
+            {job.owner ? ` · ${job.owner}` : ""}
+          </div>
+        </div>
+        {job.status?.message ? (
+          <div className="text-xs text-slate-500 truncate" title={job.status.message}>
+            {job.status.message}
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default HubJobCard;

src/components/jobs/HubModelCard.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { HubModel } from "@/lib/jobsApi";
+import { ExternalLink, Lock, Upload } from "lucide-react";
+
+interface Props {
+  model: HubModel;
+}
+
+function relativeTime(iso: string | null): string {
+  if (!iso) return "—";
+  const t = Date.parse(iso);
+  if (Number.isNaN(t)) return "—";
+  const diff = Math.max(0, (Date.now() - t) / 1000);
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+const HubModelCard: React.FC<Props> = ({ model }) => {
+  const url = `https://huggingface.co/${model.repo_id}`;
+  const shortName = model.repo_id.includes("/")
+    ? model.repo_id.split("/").slice(1).join("/")
+    : model.repo_id;
+
+  return (
+    <Card
+      onClick={() => window.open(url, "_blank", "noopener,noreferrer")}
+      className="bg-slate-800/50 border-slate-700 rounded-xl cursor-pointer hover:border-slate-500 transition-colors"
+    >
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className="flex items-center gap-1.5 text-xs font-semibold text-sky-400">
+            <Upload className="w-3.5 h-3.5" />
+            Uploaded
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            asChild
+            className="h-7 w-7 text-slate-400 hover:text-white"
+            aria-label="View on Hub"
+          >
+            <a
+              href={url}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          </Button>
+        </div>
+        <div>
+          <div
+            className="text-white font-semibold truncate flex items-center gap-1.5"
+            title={model.repo_id}
+          >
+            {model.private ? (
+              <Lock className="w-3.5 h-3.5 text-slate-400 shrink-0" />
+            ) : null}
+            <span className="truncate">{shortName}</span>
+          </div>
+          <div className="text-xs text-slate-400 truncate" title={model.repo_id}>
+            {model.repo_id} · updated {relativeTime(model.last_modified)}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default HubModelCard;

src/components/jobs/JobCard.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { JobRecord } from "@/lib/jobsApi";
+import {
+  Square,
+  X,
+  AlertTriangle,
+  CheckCircle2,
+  Loader2,
+  XCircle,
+  ExternalLink,
+  Play,
+} from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+import {
+  JobCheckpoint,
+  listJobCheckpoints,
+} from "@/lib/checkpointsApi";
+import CheckpointDropdown from "@/components/jobs/CheckpointDropdown";
+
+interface Props {
+  job: JobRecord;
+  onStop: (id: string) => void;
+  onDelete: (id: string) => void;
+  onPlay: (job: JobRecord, step: number) => void;
+}
+
+function relativeTime(epochSec: number): string {
+  const diff = Math.max(0, Date.now() / 1000 - epochSec);
+  if (diff < 60) return `${Math.floor(diff)}s ago`;
+  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+  return `${Math.floor(diff / 86400)}d ago`;
+}
+
+const statePresentation: Record<
+  JobRecord["state"],
+  { label: string; color: string; Icon: React.ComponentType<{ className?: string }> }
+> = {
+  running: { label: "Running", color: "text-green-400", Icon: Loader2 },
+  done: { label: "Done", color: "text-slate-400", Icon: CheckCircle2 },
+  failed: { label: "Failed", color: "text-red-400", Icon: XCircle },
+  interrupted: { label: "Interrupted", color: "text-amber-400", Icon: AlertTriangle },
+};
+
+const JobCard: React.FC<Props> = ({ job, onStop, onDelete, onPlay }) => {
+  const navigate = useNavigate();
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const present = statePresentation[job.state];
+  const Icon = present.Icon;
+  const isRunning = job.state === "running";
+  const isStarting = isRunning && job.metrics.total_steps === 0;
+  const progressPct =
+    job.metrics.total_steps > 0
+      ? Math.min(100, (job.metrics.current_step / job.metrics.total_steps) * 100)
+      : 0;
+
+  const subtitle = isStarting
+    ? "starting…"
+    : isRunning
+    ? `started ${relativeTime(job.started_at)}`
+    : job.ended_at != null
+    ? `ended ${relativeTime(job.ended_at)}`
+    : present.label.toLowerCase();
+
+  const [checkpoints, setCheckpoints] = useState<JobCheckpoint[]>([]);
+  const [selectedStep, setSelectedStep] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (job.checkpoint_count <= 0) {
+      setCheckpoints([]);
+      setSelectedStep(null);
+      return;
+    }
+    let cancelled = false;
+    listJobCheckpoints(baseUrl, fetchWithHeaders, job.id)
+      .then((cks) => {
+        if (cancelled) return;
+        setCheckpoints(cks);
+        if (cks.length > 0) {
+          const latest = cks[cks.length - 1].step;
+          setSelectedStep((prev) =>
+            prev != null && cks.some((c) => c.step === prev) ? prev : latest,
+          );
+        } else {
+          setSelectedStep(null);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setCheckpoints([]);
+          setSelectedStep(null);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [baseUrl, fetchWithHeaders, job.id, job.checkpoint_count]);
+
+  const handleAction = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (isRunning) {
+      if (window.confirm("Stop this run?")) onStop(job.id);
+    } else {
+      if (window.confirm("Delete this run? This wipes the output directory.")) onDelete(job.id);
+    }
+  };
+
+  const handlePlay = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (selectedStep == null) return;
+    onPlay(job, selectedStep);
+  };
+
+  const showProgressBar = isRunning;
+  const showInferenceRow = checkpoints.length > 0 && selectedStep != null;
+
+  return (
+    <Card
+      onClick={() => navigate(`/training/${job.id}`)}
+      className="bg-slate-800/50 border-slate-700 rounded-xl cursor-pointer hover:border-slate-500 transition-colors"
+    >
+      <CardContent className="p-4 space-y-3">
+        <div className="flex items-start justify-between gap-2">
+          <div className={`flex items-center gap-1.5 text-xs font-semibold ${present.color}`}>
+            <Icon className={`w-3.5 h-3.5 ${isRunning ? "animate-spin" : ""}`} />
+            {present.label}
+          </div>
+          {job.runner === "hf_cloud" && job.hf_job_url ? (
+            <Button
+              variant="ghost"
+              size="icon"
+              asChild
+              className="h-7 w-7 text-slate-400 hover:text-white"
+              aria-label="Open Hub job page"
+            >
+              <a
+                href={job.hf_job_url}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={(e) => e.stopPropagation()}
+              >
+                <ExternalLink className="w-3.5 h-3.5" />
+              </a>
+            </Button>
+          ) : (
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={handleAction}
+              className="h-7 w-7 text-slate-400 hover:text-white"
+              aria-label={isRunning ? "Stop job" : "Delete job"}
+            >
+              {isRunning ? <Square className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
+            </Button>
+          )}
+        </div>
+        <div>
+          <div className="text-white font-semibold truncate" title={job.name}>
+            {job.name}
+          </div>
+          <div className="text-xs text-slate-400">{subtitle}</div>
+        </div>
+        {showProgressBar ? (
+          <div className="relative h-5 w-full overflow-hidden rounded-md bg-slate-900 border border-slate-700">
+            <div
+              className="h-full bg-gradient-to-r from-blue-500 to-sky-400 transition-[width] duration-500"
+              style={{ width: `${progressPct}%` }}
+            />
+            <div className="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white tabular-nums drop-shadow">
+              {isStarting ? "Training starting…" : `${progressPct.toFixed(1)}%`}
+            </div>
+          </div>
+        ) : null}
+        {showInferenceRow ? (
+          <div className="flex items-center gap-2">
+            <CheckpointDropdown
+              checkpoints={checkpoints}
+              selectedStep={selectedStep}
+              onChange={setSelectedStep}
+            />
+            <Button
+              size="icon"
+              onClick={handlePlay}
+              className="h-8 w-8 bg-green-500 hover:bg-green-600 text-white"
+              aria-label="Run inference with this checkpoint"
+            >
+              <Play className="w-4 h-4" />
+            </Button>
+          </div>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default JobCard;

src/components/jobs/JobsSection.tsx

@@ -0,0 +1,379 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { useApi } from "@/contexts/ApiContext";
+import { useToast } from "@/hooks/use-toast";
+import { useJobsChangedSignal } from "@/hooks/useJobsChangedSignal";
+import {
+  HubJob,
+  HubModel,
+  JobProgressSnapshot,
+  JobRecord,
+  deleteJob,
+  listHubJobs,
+  listJobs,
+  stopJob,
+} from "@/lib/jobsApi";
+import JobCard from "./JobCard";
+import HubJobCard from "./HubJobCard";
+import HubModelCard from "./HubModelCard";
+import InferenceModal from "@/components/landing/InferenceModal";
+import { useRobots } from "@/hooks/useRobots";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ChevronRight, RefreshCw, Search } from "lucide-react";
+
+const LIMIT = 10;
+
+// Hub stages still doing work. Anything outside this set (COMPLETED, FAILED,
+// CANCELED, …) gets demoted to UNTRACKED.
+const HUB_ACTIVE_STAGES = new Set(["RUNNING", "QUEUED", "SCHEDULING"]);
+
+const isJobActive = (j: JobRecord) =>
+  j.state === "running" || j.checkpoint_count > 0;
+
+const isHubJobActive = (h: HubJob) =>
+  HUB_ACTIVE_STAGES.has((h.status?.stage ?? "").toUpperCase());
+
+const JobsSection: React.FC = () => {
+  const { baseUrl, fetchWithHeaders } = useApi();
+  const { toast } = useToast();
+
+  const [jobs, setJobs] = useState<JobRecord[]>([]);
+  const [hubJobs, setHubJobs] = useState<HubJob[]>([]);
+  const [hubModels, setHubModels] = useState<HubModel[]>([]);
+  const [hubAuthenticated, setHubAuthenticated] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [search, setSearch] = useState("");
+
+  const { selectedRecord } = useRobots();
+  const [inferenceModalOpen, setInferenceModalOpen] = useState(false);
+  const [inferenceJob, setInferenceJob] = useState<JobRecord | null>(null);
+  const [inferenceStep, setInferenceStep] = useState<number | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      const [next, hub] = await Promise.all([
+        listJobs(baseUrl, fetchWithHeaders, LIMIT),
+        listHubJobs(baseUrl, fetchWithHeaders),
+      ]);
+      setJobs(next);
+      setHubJobs(hub.jobs);
+      setHubModels(hub.models);
+      setHubAuthenticated(hub.authenticated);
+      setError(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }, [baseUrl, fetchWithHeaders]);
+
+  // Initial fetch on mount + refetch when the tab regains focus. Backend
+  // pushes a `jobs_changed` WS event on every registry mutation, which
+  // covers any change originating on this machine. The focus refresh
+  // catches changes originating elsewhere (e.g. a job submitted from
+  // another tab or the HF dashboard) without burning the rate limit.
+  useEffect(() => {
+    refresh();
+    const onVisible = () => {
+      if (document.visibilityState === "visible") refresh();
+    };
+    document.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("focus", refresh);
+    return () => {
+      document.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("focus", refresh);
+    };
+  }, [refresh]);
+
+  const applyProgress = useCallback((snapshots: JobProgressSnapshot[]) => {
+    if (snapshots.length === 0) return;
+    setJobs((prev) => {
+      if (prev.length === 0) return prev;
+      const byId = new Map(snapshots.map((s) => [s.id, s]));
+      let mutated = false;
+      const next = prev.map((j) => {
+        const s = byId.get(j.id);
+        if (!s) return j;
+        mutated = true;
+        return {
+          ...j,
+          state: s.state,
+          metrics: s.metrics,
+          wandb_run_url: s.wandb_run_url,
+          checkpoint_count: s.checkpoint_count,
+        };
+      });
+      return mutated ? next : prev;
+    });
+  }, []);
+
+  useJobsChangedSignal(refresh, applyProgress);
+
+  const handleStop = async (id: string) => {
+    try {
+      await stopJob(baseUrl, fetchWithHeaders, id);
+      toast({ title: "Job stopping" });
+      refresh();
+    } catch (e) {
+      toast({
+        title: "Stop failed",
+        description: e instanceof Error ? e.message : String(e),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const handlePlay = (job: JobRecord, step: number) => {
+    setInferenceJob(job);
+    setInferenceStep(step);
+    setInferenceModalOpen(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await deleteJob(baseUrl, fetchWithHeaders, id);
+      toast({ title: "Job removed" });
+      refresh();
+    } catch (e) {
+      toast({
+        title: "Delete failed",
+        description: e instanceof Error ? e.message : String(e),
+        variant: "destructive",
+      });
+    }
+  };
+
+  const query = search.trim().toLowerCase();
+  const matchesQuery = useCallback(
+    (text: string | null | undefined) =>
+      !query || (text ?? "").toLowerCase().includes(query),
+    [query],
+  );
+
+  const filteredJobs = useMemo(
+    () => jobs.filter((j) => matchesQuery(j.name)),
+    [jobs, matchesQuery],
+  );
+  const filteredHubJobs = useMemo(
+    () =>
+      hubJobs.filter((h) =>
+        matchesQuery(h.docker_image ?? h.space_id ?? h.id),
+      ),
+    [hubJobs, matchesQuery],
+  );
+  const filteredHubModels = useMemo(
+    () => hubModels.filter((m) => matchesQuery(m.repo_id)),
+    [hubModels, matchesQuery],
+  );
+
+  const localJobs = useMemo(
+    () => filteredJobs.filter((j) => j.runner === "local"),
+    [filteredJobs],
+  );
+  const trackedCloudJobs = useMemo(
+    () => filteredJobs.filter((j) => j.runner === "hf_cloud"),
+    [filteredJobs],
+  );
+  // Hub jobs already mirrored by a local JobRecord get their richer card via
+  // trackedCloudJobs; everything else from the hub gets a plain HubJobCard.
+  const trackedHfJobIds = useMemo(
+    () =>
+      new Set(
+        trackedCloudJobs
+          .map((j) => j.hf_job_id)
+          .filter((id): id is string => !!id),
+      ),
+    [trackedCloudJobs],
+  );
+  const untrackedHubJobs = useMemo(
+    () => filteredHubJobs.filter((h) => !trackedHfJobIds.has(h.id)),
+    [filteredHubJobs, trackedHfJobIds],
+  );
+  // Hide model repos that map 1-to-1 to a tracked cloud job (those already
+  // appear via JobCard); the remainder are past trainings the registry no
+  // longer remembers.
+  const trackedRepoIds = useMemo(
+    () =>
+      new Set(
+        trackedCloudJobs
+          .map((j) => j.hf_repo_id)
+          .filter((id): id is string => !!id),
+      ),
+    [trackedCloudJobs],
+  );
+  const untrackedHubModels = useMemo(
+    () => filteredHubModels.filter((m) => !trackedRepoIds.has(m.repo_id)),
+    [filteredHubModels, trackedRepoIds],
+  );
+
+  // Active = running or has runnable checkpoints. Everything else collapses
+  // under UNTRACKED so the eye lands on what's still relevant.
+  const localActive = useMemo(() => localJobs.filter(isJobActive), [localJobs]);
+  const localUntracked = useMemo(
+    () => localJobs.filter((j) => !isJobActive(j)),
+    [localJobs],
+  );
+  const trackedCloudActive = useMemo(
+    () => trackedCloudJobs.filter(isJobActive),
+    [trackedCloudJobs],
+  );
+  const trackedCloudUntracked = useMemo(
+    () => trackedCloudJobs.filter((j) => !isJobActive(j)),
+    [trackedCloudJobs],
+  );
+  const untrackedHubActive = useMemo(
+    () => untrackedHubJobs.filter(isHubJobActive),
+    [untrackedHubJobs],
+  );
+  const untrackedHubInactive = useMemo(
+    () => untrackedHubJobs.filter((h) => !isHubJobActive(h)),
+    [untrackedHubJobs],
+  );
+
+  const untrackedCount =
+    localUntracked.length +
+    trackedCloudUntracked.length +
+    untrackedHubInactive.length;
+
+  return (
+    <section className="space-y-6">
+      <div className="flex items-center justify-between gap-3">
+        <h2 className="text-lg font-semibold text-white">Jobs</h2>
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-400 pointer-events-none" />
+            <Input
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="Search jobs"
+              className="h-8 w-48 sm:w-60 pl-8 bg-slate-800/50 border-slate-700 text-sm text-white placeholder:text-slate-500"
+              aria-label="Search jobs"
+            />
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={refresh}
+            className="h-7 w-7 text-slate-400 hover:text-white"
+            aria-label="Refresh jobs"
+          >
+            <RefreshCw className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {error ? <p className="text-sm text-red-300">Couldn't load jobs: {error}</p> : null}
+
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">
+          Local jobs
+        </h3>
+        {localActive.length === 0 ? (
+          <p className="text-sm text-slate-500">
+            {query
+              ? "No local jobs match your search."
+              : "No active local jobs. Start one from the Training page."}
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {localActive.map((job) => (
+              <JobCard
+                key={job.id}
+                job={job}
+                onStop={handleStop}
+                onDelete={handleDelete}
+                onPlay={handlePlay}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="border-t border-slate-700" />
+
+      <div className="space-y-3">
+        <h3 className="text-sm font-semibold uppercase tracking-wide text-slate-400">
+          Online jobs
+        </h3>
+        {!hubAuthenticated && trackedCloudJobs.length === 0 ? (
+          <p className="text-sm text-slate-500">
+            Sign in with Hugging Face to see your cloud jobs.
+          </p>
+        ) : trackedCloudActive.length === 0 &&
+          untrackedHubActive.length === 0 &&
+          untrackedHubModels.length === 0 ? (
+          <p className="text-sm text-slate-500">
+            {query ? "No online jobs match your search." : "No active cloud jobs."}
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {trackedCloudActive.map((job) => (
+              <JobCard
+                key={job.id}
+                job={job}
+                onStop={handleStop}
+                onDelete={handleDelete}
+                onPlay={handlePlay}
+              />
+            ))}
+            {untrackedHubActive.map((job) => (
+              <HubJobCard key={job.id} job={job} />
+            ))}
+            {untrackedHubModels.map((model) => (
+              <HubModelCard key={model.repo_id} model={model} />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {untrackedCount > 0 ? (
+        <Collapsible>
+          <CollapsibleTrigger className="group flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wide text-slate-400 hover:text-white transition-colors">
+            <ChevronRight className="w-3.5 h-3.5 transition-transform group-data-[state=open]:rotate-90" />
+            Untracked ({untrackedCount})
+          </CollapsibleTrigger>
+          <CollapsibleContent className="pt-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {localUntracked.map((job) => (
+                <JobCard
+                  key={job.id}
+                  job={job}
+                  onStop={handleStop}
+                  onDelete={handleDelete}
+                  onPlay={handlePlay}
+                />
+              ))}
+              {trackedCloudUntracked.map((job) => (
+                <JobCard
+                  key={job.id}
+                  job={job}
+                  onStop={handleStop}
+                  onDelete={handleDelete}
+                  onPlay={handlePlay}
+                />
+              ))}
+              {untrackedHubInactive.map((job) => (
+                <HubJobCard key={job.id} job={job} />
+              ))}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
+      ) : null}
+
+      {inferenceJob ? (
+        <InferenceModal
+          open={inferenceModalOpen}
+          onOpenChange={setInferenceModalOpen}
+          robot={selectedRecord}
+          jobId={inferenceJob.id}
+          initialStep={inferenceStep}
+        />
+      ) : null}
+    </section>
+  );
+};
+
+export default JobsSection;