Update

.prettierignore

@@ -10,3 +10,12 @@ src-python/
 node_modules/
 build/
 .svelte-kit/
+
+# External
+external/
+
+# Build
+build/
+
+# Package
+packages/

README.md

@@ -15,14 +15,14 @@ app_port: 8000
 pinned: true
 license: mit
 fullWidth: true
-short_description: Web interface of the RobotHub platform 
+short_description: Web interface of the RobotHub platform
 ---
 
 # 🤖 RobotHub Arena – Frontend
 
 RobotHub is an **open-source, end-to-end robotics stack** that combines real-time communication, 3-D visualisation, and modern AI policies to control both simulated and physical robots.
 
-**This repository contains the *Frontend*** – a SvelteKit web application that runs completely in the browser (or inside Electron / Tauri).  It talks to two backend micro-services that live in their own repositories:
+**This repository contains the _Frontend_** – a SvelteKit web application that runs completely in the browser (or inside Electron / Tauri). It talks to two backend micro-services that live in their own repositories:
 
 1. **[RobotHub Transport Server](https://github.com/julien-blanchon/RobotHub-TransportServer)**  
    – WebSocket / WebRTC switch-board for video streams & robot joint messages.
@@ -46,22 +46,22 @@ RobotHub is an **open-source, end-to-end robotics stack** that combines real-tim
 ## ✨ Key Features
 
 • **Digital-Twin 3-D Scene** – inspect robots, cameras & AI compute blocks in real-time.  
-• **Multi-Workspace Collaboration** – share a hash URL and others join the *same* WS rooms instantly.  
+• **Multi-Workspace Collaboration** – share a hash URL and others join the _same_ WS rooms instantly.  
 • **Drag-&-Drop Add-ons** – spawn robots, cameras or AI models from the toolbar.  
 • **Transport-Agnostic** – control physical hardware over USB, or send/receive via WebRTC rooms.  
 • **Model Agnostic** – any policy exposed by the Inference Server can be used (ACT, Diffusion, …).  
-• **Reactive Core** – built with *Svelte 5 runes* – state is automatically pushed into the UI.
+• **Reactive Core** – built with _Svelte 5 runes_ – state is automatically pushed into the UI.
 
 ---
 
 ## 📂 Repository Layout (short)
 
-| Path                          | Purpose |
-|-------------------------------|---------|
-| `src/`                        | SvelteKit app (routes, components) |
-| `src/lib/elements`            | Runtime domain logic (robots, video, compute) |
-| `external/RobotHub-*`         | Git sub-modules for the backend services – used for generated clients & tests |
-| `static/`                     | URDFs, STL meshes, textures, favicon |
+| Path                  | Purpose                                                                       |
+| --------------------- | ----------------------------------------------------------------------------- |
+| `src/`                | SvelteKit app (routes, components)                                            |
+| `src/lib/elements`    | Runtime domain logic (robots, video, compute)                                 |
+| `external/RobotHub-*` | Git sub-modules for the backend services – used for generated clients & tests |
+| `static/`             | URDFs, STL meshes, textures, favicon                                          |
 
 A more in-depth component overview can be found in `/src/lib/components/**` – every major popup/modal has its own Svelte file.
 
@@ -96,34 +96,34 @@ $ python launch_simple.py   # →  http://localhost:8001
 $ bun run dev -- --open     # →  http://localhost:5173  (hash = workspace-id)
 ```
 
-The **workspace-id** in the URL hash ties all three services together.  Share `http://localhost:5173/#<id>` and a collaborator instantly joins the same set of rooms.
+The **workspace-id** in the URL hash ties all three services together. Share `http://localhost:5173/#<id>` and a collaborator instantly joins the same set of rooms.
 
 ---
 
 ## 🛠️ Usage Walk-Through
 
-1. **Open the web-app** → a fresh *workspace* is created (☝ left corner shows 🌐 ID).  
-2. Click *Add Robot* → spawns an SO-100 6-DoF arm (URDF).  
-3. Click *Add Sensor → Camera* → creates a virtual camera element.  
-4. Click *Add Model → ACT* → spawns a *Compute* block.
-5. On the Compute block choose *Create Session* – select model path (`LaetusH/act_so101_beyond`) and cameras (`front`).
+1. **Open the web-app** → a fresh _workspace_ is created (☝ left corner shows 🌐 ID).
+2. Click _Add Robot_ → spawns an SO-100 6-DoF arm (URDF).
+3. Click _Add Sensor → Camera_ → creates a virtual camera element.
+4. Click _Add Model → ACT_ → spawns a _Compute_ block.
+5. On the Compute block choose _Create Session_ – select model path (`LaetusH/act_so101_beyond`) and cameras (`front`).
 6. Connect:  
-   • *Video Input* – local webcam → `front` room.  
-   • *Robot Input* – robot → *joint-input* room (producer).  
-   • *Robot Output* – robot ← AI predictions (consumer).
-7. Press *Start Inference* – the model will predict the next joint trajectory every few frames. 🎉
+   • _Video Input_ – local webcam → `front` room.  
+   • _Robot Input_ – robot → _joint-input_ room (producer).  
+   • _Robot Output_ – robot ← AI predictions (consumer).
+7. Press _Start Inference_ – the model will predict the next joint trajectory every few frames. 🎉
 
-All modals (`AISessionConnectionModal`, `RobotInputConnectionModal`, …) expose precisely what is happening under the hood: which room ID, whether you are *producer* or *consumer*, and the live status.
+All modals (`AISessionConnectionModal`, `RobotInputConnectionModal`, …) expose precisely what is happening under the hood: which room ID, whether you are _producer_ or _consumer_, and the live status.
 
 ---
 
 ## 🧩 Package Relations
 
-| Package | Role | Artifacts exposed to this repo |
-|---------|------|--------------------------------|
-| **Transport Server** | Low-latency switch-board (WS/WebRTC).  Creates *rooms* for video & joint messages. | TypeScript & Python client libraries (imported from sub-module) |
-| **Inference Server** | Loads checkpoints (ACT, Pi-0, …) and manages *sessions*.  Each session automatically asks the Transport Server to create dedicated rooms. | Generated TS SDK (`@robothub/inference-server-client`) – auto-called from `RemoteComputeManager` |
-| **Frontend (this repo)** | UI + 3-D scene.  Manages *robots*, *videos* & *compute* blocks and connects them to the correct rooms. | – |
+| Package                  | Role                                                                                                                                     | Artifacts exposed to this repo                                                                   |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| **Transport Server**     | Low-latency switch-board (WS/WebRTC). Creates _rooms_ for video & joint messages.                                                        | TypeScript & Python client libraries (imported from sub-module)                                  |
+| **Inference Server**     | Loads checkpoints (ACT, Pi-0, …) and manages _sessions_. Each session automatically asks the Transport Server to create dedicated rooms. | Generated TS SDK (`@robothub/inference-server-client`) – auto-called from `RemoteComputeManager` |
+| **Frontend (this repo)** | UI + 3-D scene. Manages _robots_, _videos_ & _compute_ blocks and connects them to the correct rooms.                                    | –                                                                                                |
 
 > Because the two backend repos are included as git sub-modules you can develop & debug the whole trio in one repo clone.
 
@@ -135,7 +135,7 @@ All modals (`AISessionConnectionModal`, `RobotInputConnectionModal`, …) expose
 • `RobotManager` – talks to Transport Server and USB drivers.  
 • `VideoManager` – handles local/remote camera streams and WebRTC.
 
-Each element is a small class with `$state` fields which Svelte 5 picks up automatically.  The modals listed below are *thin* UI shells around those classes:
+Each element is a small class with `$state` fields which Svelte 5 picks up automatically. The modals listed below are _thin_ UI shells around those classes:
 
 ```
 AISessionConnectionModal     – create / start / stop AI sessions
@@ -163,9 +163,9 @@ See `Dockerfile` for the full build – it also performs `bun test` & `bun run b
 
 ## 🧑‍💻 Contributing
 
-PRs are welcome!  The codebase is organised into **domain managers** (robot / video / compute) and **pure-UI** components.  If you add a new feature, create a manager first so that business logic can be unit-tested without DOM.
+PRs are welcome! The codebase is organised into **domain managers** (robot / video / compute) and **pure-UI** components. If you add a new feature, create a manager first so that business logic can be unit-tested without DOM.
 
-1. `bun test` – unit tests.  
+1. `bun test` – unit tests.
 2. `bun run typecheck` – strict TS config.
 
 Please run `bun format` before committing – ESLint + Prettier configs are included.
@@ -176,7 +176,8 @@ Please run `bun format` before committing – ESLint + Prettier configs are incl
 
 Huge gratitude to [Tim Qian](https://github.com/timqian) ([X/Twitter](https://x.com/tim_qian)) and the
 [bambot project](https://bambot.org/) for open-sourcing **feetech.js** – the
-delightful js driver that powers our USB communication layer. 
+delightful js driver that powers our USB communication layer.
+
 ---
 
 ## 📄 License
@@ -187,34 +188,34 @@ MIT – see `LICENSE` in the root.
 
 RobotHub follows a **separation-of-concerns** design:
 
-* **Transport Server** is the single source of truth for *real-time* data – video frames, joint values, heart-beats.  Every participant (browser, Python script, robot firmware) only needs one WebSocket/WebRTC connection, no matter how many peers join later.
-* **Inference Server** is stateless with regard to connectivity; it spins up / tears down *sessions* that rely on rooms in the Transport Server.  This lets heavy AI models live on a GPU box while cameras and robots stay on the edge.
-* **Frontend** stays 100 % in the browser – no secret keys or device drivers required – and simply wires together rooms that already exist.
+- **Transport Server** is the single source of truth for _real-time_ data – video frames, joint values, heart-beats. Every participant (browser, Python script, robot firmware) only needs one WebSocket/WebRTC connection, no matter how many peers join later.
+- **Inference Server** is stateless with regard to connectivity; it spins up / tears down _sessions_ that rely on rooms in the Transport Server. This lets heavy AI models live on a GPU box while cameras and robots stay on the edge.
+- **Frontend** stays 100 % in the browser – no secret keys or device drivers required – and simply wires together rooms that already exist.
 
 > By decoupling the pipeline we can deploy each piece on separate hardware or even different clouds, swap alternative implementations (e.g. ROS bridge instead of WebRTC) and scale each micro-service independently.
 
 ---
 
-## 🛰  Transport Server – Real-Time Router
+## 🛰 Transport Server – Real-Time Router
 
 ```
 Browser / Robot ⟷  🌐 Transport Server  ⟷  Other Browser / AI / HW
 ```
 
-* **Creates rooms** – `POST /robotics/workspaces/{ws}/rooms` or `POST /video/workspaces/{ws}/rooms`.
-* **Manages roles** – every WebSocket identifies as *producer* (source) or *consumer* (sink).
-* **Does zero processing** – it only forwards JSON (robotics) or WebRTC SDP/ICE (video).
-* **Health-check** – `GET /api/health` returns a JSON heartbeat.
+- **Creates rooms** – `POST /robotics/workspaces/{ws}/rooms` or `POST /video/workspaces/{ws}/rooms`.
+- **Manages roles** – every WebSocket identifies as _producer_ (source) or _consumer_ (sink).
+- **Does zero processing** – it only forwards JSON (robotics) or WebRTC SDP/ICE (video).
+- **Health-check** – `GET /api/health` returns a JSON heartbeat.
 
 Why useful?
 
-* You never expose robot hardware directly to the internet – it only speaks to the Transport Server.
-* Multiple followers can subscribe to the *same* producer without extra bandwidth on the producer side (server fans out messages).
-* Works across NAT thanks to WebRTC TURN support.
+- You never expose robot hardware directly to the internet – it only speaks to the Transport Server.
+- Multiple followers can subscribe to the _same_ producer without extra bandwidth on the producer side (server fans out messages).
+- Works across NAT thanks to WebRTC TURN support.
 
-## 🏢  Workspaces – Lightweight Multi-Tenant Isolation
+## 🏢 Workspaces – Lightweight Multi-Tenant Isolation
 
-A **workspace** is simply a UUID namespace in the Transport Server.  Every room URL starts with:
+A **workspace** is simply a UUID namespace in the Transport Server. Every room URL starts with:
 
 ```
 /robotics/workspaces/{workspace_id}/rooms/{room_id}
@@ -223,105 +224,110 @@ A **workspace** is simply a UUID namespace in the Transport Server.  Every room
 
 Why bother?
 
-1. **Privacy / Security** – clients in workspace *A* can neither list nor join rooms from workspace *B*. A workspace id is like a private password that keeps the rooms in the same workspace isolated from each other.
+1. **Privacy / Security** – clients in workspace _A_ can neither list nor join rooms from workspace _B_. A workspace id is like a private password that keeps the rooms in the same workspace isolated from each other.
 2. **Organisation** – keep each class, project or experiment separated without spinning up extra servers.
-3. **Zero-config sharing** – the Frontend stores the workspace ID in the URL hash (e.g. `/#d742e85d-c9e9-4f7b-…`).  Send that link to a teammate and they automatically connect to the *same* namespace – all existing video feeds, robot rooms and AI sessions become visible.
+3. **Zero-config sharing** – the Frontend stores the workspace ID in the URL hash (e.g. `/#d742e85d-c9e9-4f7b-…`). Send that link to a teammate and they automatically connect to the _same_ namespace – all existing video feeds, robot rooms and AI sessions become visible.
 4. **Stateless Scale-out** – Transport Server holds no global state; deleting a workspace removes all rooms in one call.
 
 Typical lifecycle:
 
-* **Create** – Frontend generates `crypto.randomUUID()` if the hash is empty.  Back-end rooms are lazily created when the first producer/consumer calls the REST API.
-* **Share** – click the *#workspace* badge → *Copy URL* (handled by `WorkspaceIdButton.svelte`)
+- **Create** – Frontend generates `crypto.randomUUID()` if the hash is empty. Back-end rooms are lazily created when the first producer/consumer calls the REST API.
+- **Share** – click the _#workspace_ badge → _Copy URL_ (handled by `WorkspaceIdButton.svelte`)
 
 > Practical tip: Use one workspace per demo to prevent collisions, then recycle it afterwards.
 
 ---
 
-## 🧠  Inference Server – Session Lifecycle
+## 🧠 Inference Server – Session Lifecycle
 
 1. **Create session**  
    `POST /api/sessions` with JSON:
    ```jsonc
    {
-     "session_id": "pick_place_demo",
-     "policy_path": "LaetusH/act_so101_beyond",
-     "camera_names": ["front", "wrist"],
-     "transport_server_url": "http://localhost:8000",
-     "workspace_id": "<existing-or-new>"  // optional
+   	"session_id": "pick_place_demo",
+   	"policy_path": "LaetusH/act_so101_beyond",
+   	"camera_names": ["front", "wrist"],
+   	"transport_server_url": "http://localhost:8000",
+   	"workspace_id": "<existing-or-new>" // optional
    }
    ```
-2. **Receive response**  
+2. **Receive response**
    ```jsonc
    {
-     "workspace_id": "ws-uuid",
-     "camera_room_ids": { "front": "room-id-a", "wrist": "room-id-b" },
-     "joint_input_room_id":  "room-id-c",
-     "joint_output_room_id": "room-id-d"
+   	"workspace_id": "ws-uuid",
+   	"camera_room_ids": { "front": "room-id-a", "wrist": "room-id-b" },
+   	"joint_input_room_id": "room-id-c",
+   	"joint_output_room_id": "room-id-d"
    }
    ```
 3. **Wire connections**
-   * Camera PC joins `front` / `wrist` rooms as **producer** (WebRTC).
-   * Robot joins `joint_input_room_id` as **producer** (joint states).
-   * Robot (or simulator) joins `joint_output_room_id` as **consumer** (commands).
+   - Camera PC joins `front` / `wrist` rooms as **producer** (WebRTC).
+   - Robot joins `joint_input_room_id` as **producer** (joint states).
+   - Robot (or simulator) joins `joint_output_room_id` as **consumer** (commands).
 4. **Start inference**  
    `POST /api/sessions/{id}/start` – server loads the model and begins publishing commands.
-5. **Stop / delete** as needed.  Stats & health are available via `GET /api/sessions`.
+5. **Stop / delete** as needed. Stats & health are available via `GET /api/sessions`.
 
-The Frontend automates steps 1-4 via the *AI Session* modal – you only click buttons.
+The Frontend automates steps 1-4 via the _AI Session_ modal – you only click buttons.
 
 ---
 
 ## 🌐 Hosted Demo End-Points
 
-| Service | URL | Status |
-|---------|-----|--------|
-| Transport Server | <https://blanchon-robothub-transportserver.hf.space/api> | Public & healthy |
-| Inference Server | <https://blanchon-robothub-inferenceserver.hf.space/api> | `{"status":"healthy"}` |
-| Frontend (read-only preview) | <https://blanchon-robothub-frontend.hf.space> | latest `main` |
+| Service                      | URL                                                      | Status                 |
+| ---------------------------- | -------------------------------------------------------- | ---------------------- |
+| Transport Server             | <https://blanchon-robothub-transportserver.hf.space/api> | Public & healthy       |
+| Inference Server             | <https://blanchon-robothub-inferenceserver.hf.space/api> | `{"status":"healthy"}` |
+| Frontend (read-only preview) | <https://blanchon-robothub-frontend.hf.space>            | latest `main`          |
 
-Point the *Settings → Server Configuration* panel to these URLs and you can play without any local backend.
+Point the _Settings → Server Configuration_ panel to these URLs and you can play without any local backend.
 
 ---
 
 ## 🎯 Main Use-Cases
 
-Below are typical connection patterns you can set-up **entirely from the UI**.  Each example lists the raw data-flow (→ = producer to consumer/AI) plus a video placeholder you can swap for a screen-capture.
+Below are typical connection patterns you can set-up **entirely from the UI**. Each example lists the raw data-flow (→ = producer to consumer/AI) plus a video placeholder you can swap for a screen-capture.
 
 ### Direct Tele-Operation (Leader ➜ Follower)
-*Leader PC*  `USB` ➜ **Robot A** ➜ `Remote producer` → **Transport room** → `Remote consumer` ➜ **Robot B**  (`USB`)
+
+_Leader PC_ `USB` ➜ **Robot A** ➜ `Remote producer` → **Transport room** → `Remote consumer` ➜ **Robot B** (`USB`)
 
 > One human moves Robot A, Robot B mirrors the motion in real-time. Works with any number of followers – just add more consumers to the same room.
 >
-> 📺 *demo-teleop-1.mp4*
+> 📺 _demo-teleop-1.mp4_
 
 ### Web-UI Manual Control
+
 **Browser sliders** (`ManualControlSheet`) → `Remote producer` → **Robot (USB)**
 
 > No physical master arm needed – drive joints from any device.
 >
-> 📺 *demo-webui.mp4*
+> 📺 _demo-webui.mp4_
 
 ### AI Inference Loop
+
 **Robot (USB)** ➜ `Remote producer` → **joint-input room**  
 **Camera PC** ➜ `Video producer` → **camera room(s)**  
 **Inference Server** (consumer) → processes → publishes to **joint-output room** → `Remote consumer` ➜ **Robot**
 
 > Lets a low-power robot PC stream data while a beefy GPU node does the heavy lifting.
 >
-> 📺 *demo-inference.mp4*
+> 📺 _demo-inference.mp4_
 
 ### Hybrid Classroom (Multi-Follower AI)
-*Same as AI Inference Loop* with additional **Robot C, D…** subscribing to `joint_output_room_id` to run the same policy in parallel.
+
+_Same as AI Inference Loop_ with additional **Robot C, D…** subscribing to `joint_output_room_id` to run the same policy in parallel.
 
 > Useful for swarm behaviours or classroom demonstrations.
 >
-> 📺 *demo-classroom.mp4*
+> 📺 _demo-classroom.mp4_
 
 ### Split Video / Robot Across Machines
+
 **Laptop A** (near cameras) → streams video → Transport  
-**Laptop B** (near robot)   → joins joint rooms  
-**Browser** anywhere        → watches video consumer & sends manual overrides
+**Laptop B** (near robot) → joins joint rooms  
+**Browser** anywhere → watches video consumer & sends manual overrides
 
 > Ideal when the camera PC stays close to sensors and you want minimal upstream bandwidth.
 >
-> 📺 *demo-splitio.mp4*
+> 📺 _demo-splitio.mp4_

src/app.css

@@ -6,117 +6,117 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.216 0.006 56.043);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.216 0.006 56.043);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.147 0.004 49.25);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.147 0.004 49.25);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.147 0.004 49.25);
+	--primary: oklch(0.216 0.006 56.043);
+	--primary-foreground: oklch(0.985 0.001 106.423);
+	--secondary: oklch(0.97 0.001 106.424);
+	--secondary-foreground: oklch(0.216 0.006 56.043);
+	--muted: oklch(0.97 0.001 106.424);
+	--muted-foreground: oklch(0.553 0.013 58.071);
+	--accent: oklch(0.97 0.001 106.424);
+	--accent-foreground: oklch(0.216 0.006 56.043);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.923 0.003 48.717);
+	--input: oklch(0.923 0.003 48.717);
+	--ring: oklch(0.709 0.01 56.259);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0.001 106.423);
+	--sidebar-foreground: oklch(0.147 0.004 49.25);
+	--sidebar-primary: oklch(0.216 0.006 56.043);
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-accent: oklch(0.97 0.001 106.424);
+	--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+	--sidebar-border: oklch(0.923 0.003 48.717);
+	--sidebar-ring: oklch(0.709 0.01 56.259);
 }
 
 .dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.923 0.003 48.717);
-  --primary-foreground: oklch(0.216 0.006 56.043);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
+	--background: oklch(0.147 0.004 49.25);
+	--foreground: oklch(0.985 0.001 106.423);
+	--card: oklch(0.216 0.006 56.043);
+	--card-foreground: oklch(0.985 0.001 106.423);
+	--popover: oklch(0.216 0.006 56.043);
+	--popover-foreground: oklch(0.985 0.001 106.423);
+	--primary: oklch(0.923 0.003 48.717);
+	--primary-foreground: oklch(0.216 0.006 56.043);
+	--secondary: oklch(0.268 0.007 34.298);
+	--secondary-foreground: oklch(0.985 0.001 106.423);
+	--muted: oklch(0.268 0.007 34.298);
+	--muted-foreground: oklch(0.709 0.01 56.259);
+	--accent: oklch(0.268 0.007 34.298);
+	--accent-foreground: oklch(0.985 0.001 106.423);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.553 0.013 58.071);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.216 0.006 56.043);
+	--sidebar-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-accent: oklch(0.268 0.007 34.298);
+	--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.553 0.013 58.071);
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

src/app.d.ts

@@ -1,4 +1,4 @@
-import type { InteractivityProps } from '@threlte/extras'
+import type { InteractivityProps } from "@threlte/extras";
 
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces

src/lib/components/3d/elements/compute/ComputeGridItem.svelte

@@ -23,7 +23,6 @@
 		event.stopPropagation();
 		isToggled = !isToggled;
 	}
-
 </script>
 
 <T.Group

src/lib/components/3d/elements/compute/Computes.svelte

@@ -85,14 +85,30 @@
 
 {#if selectedCompute}
 	<!-- Inference Session Configuration Modal (for existing computes without sessions) -->
-	<AISessionConnectionModal bind:open={isAISessionModalOpen} compute={selectedCompute} {workspaceId} />
+	<AISessionConnectionModal
+		bind:open={isAISessionModalOpen}
+		compute={selectedCompute}
+		{workspaceId}
+	/>
 	<!-- Video Input Connection Modal -->
-	<VideoInputConnectionModal bind:open={isVideoInputModalOpen} compute={selectedCompute} {workspaceId} />
+	<VideoInputConnectionModal
+		bind:open={isVideoInputModalOpen}
+		compute={selectedCompute}
+		{workspaceId}
+	/>
 	<!-- Robot Input Connection Modal -->
-	<RobotInputConnectionModal bind:open={isRobotInputModalOpen} compute={selectedCompute} {workspaceId} />
+	<RobotInputConnectionModal
+		bind:open={isRobotInputModalOpen}
+		compute={selectedCompute}
+		{workspaceId}
+	/>
 	<!-- Robot Output Connection Modal -->
-	<RobotOutputConnectionModal bind:open={isRobotOutputModalOpen} compute={selectedCompute} {workspaceId} /> 
+	<RobotOutputConnectionModal
+		bind:open={isRobotOutputModalOpen}
+		compute={selectedCompute}
+		{workspaceId}
+	/>
 {/if}
 
 <!-- AI Model Configuration Modal (for creating new models) -->
-<AIModelConfigurationModal bind:open={isAIConfigModalOpen} {workspaceId} />
+<AIModelConfigurationModal bind:open={isAIConfigModalOpen} {workspaceId} />

src/lib/components/3d/elements/compute/GPU.svelte

@@ -15,7 +15,12 @@
 	}
 
 	// Props with defaults
-	let { position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], rotating = false }: Props = $props();
+	let {
+		position = [0, 0, 0],
+		rotation = [0, 0, 0],
+		scale = [1, 1, 1],
+		rotating = false
+	}: Props = $props();
 
 	// Create the TV frame geometry (outer rounded rectangle)
 	function createTVFrame(
@@ -87,7 +92,7 @@
 
 	let fan_rotation = $state(0);
 	let rotationPerSeconds = $state(1); // 1 rotation per second by default
-	
+
 	onMount(() => {
 		const interval = setInterval(() => {
 			// Calculate angle increment per frame for desired rotations per second
@@ -95,24 +100,16 @@
 				const angleIncrement = (Math.PI * 2 * rotationPerSeconds) / 60;
 				fan_rotation = fan_rotation + angleIncrement;
 			}
-		}, 1000/60); // Run at ~60fps
+		}, 1000 / 60); // Run at ~60fps
 
 		return () => {
 			clearInterval(interval);
 		};
 	});
-
-
 </script>
 
-<T.Group
-	{position}
-	{rotation}
-	{scale}
->
-	<T.Group
-		scale={[1, 1, 1]}
-	>
-		<Model fan_rotation={fan_rotation} />
+<T.Group {position} {rotation} {scale}>
+	<T.Group scale={[1, 1, 1]}>
+		<Model {fan_rotation} />
 	</T.Group>
 </T.Group>

src/lib/components/3d/elements/compute/GPUModel.svelte

@@ -8,193 +8,178 @@ Title: Nvidia GeForce RTX 3090
 -->
 
 <script lang="ts">
-  import type * as THREE from 'three'
+	import type * as THREE from "three";
 
-  import type { Snippet } from 'svelte'
-  import { T, type Props } from '@threlte/core'
-  import { useGltf } from '@threlte/extras'
+	import type { Snippet } from "svelte";
+	import { T, type Props } from "@threlte/core";
+	import { useGltf } from "@threlte/extras";
 
-  let {
-    fan_rotation = 0,
-    fallback,
-    error,
-    children,
-    ref = $bindable(),
-    ...props
-  }: Props<THREE.Group<THREE.Object3DEventMap>> & {
-    fan_rotation?: number
-    ref?: THREE.Group<THREE.Object3DEventMap> | undefined
-    children?: Snippet<[{ ref: THREE.Group<THREE.Object3DEventMap> | undefined }]>
-    fallback?: Snippet
-    error?: Snippet<[{ error: Error }]>
-  } = $props()
+	let {
+		fan_rotation = 0,
+		fallback,
+		error,
+		children,
+		ref = $bindable(),
+		...props
+	}: Props<THREE.Group<THREE.Object3DEventMap>> & {
+		fan_rotation?: number;
+		ref?: THREE.Group<THREE.Object3DEventMap> | undefined;
+		children?: Snippet<[{ ref: THREE.Group<THREE.Object3DEventMap> | undefined }]>;
+		fallback?: Snippet;
+		error?: Snippet<[{ error: Error }]>;
+	} = $props();
 
-  type GLTFResult = {
-    nodes: {
-      Metal_Frame_Metal_0: THREE.Mesh
-      Front_Cover_Black_0: THREE.Mesh
-      Fan_Circle_Black_Fan_0: THREE.Mesh
-      Fan_F_Black_Fan_0: THREE.Mesh
-      Fan_F_Slot1_0: THREE.Mesh
-      Front_Cover_U_Black_0: THREE.Mesh
-      Front_Cover_T_Black_0: THREE.Mesh
-      Fan_Circle_B_Black_Fan_0: THREE.Mesh
-      Grills_U_Metal_Black_0: THREE.Mesh
-      Grills_T_Metal_Black_0: THREE.Mesh
-      Plane010_Black001_0: THREE.Mesh
-      Socket_Slot_0: THREE.Mesh
-      Side_Metal_Part_Metal_S_0: THREE.Mesh
-      Grills_F003_Metal_Black_0: THREE.Mesh
-      Grills_F002_Metal_Black_0: THREE.Mesh
-      Fan_B_Black_Fan_0: THREE.Mesh
-      Fan_B_Slot1_0: THREE.Mesh
-    }
-    materials: {
-      Metal: THREE.MeshStandardMaterial
-      Black: THREE.MeshStandardMaterial
-      Black_Fan: THREE.MeshStandardMaterial
-      ['Slot.1']: THREE.MeshStandardMaterial
-      Metal_Black: THREE.MeshStandardMaterial
-      ['Black.001']: THREE.MeshStandardMaterial
-      Slot: THREE.MeshStandardMaterial
-      Metal_S: THREE.MeshStandardMaterial
-    }
-  }
+	type GLTFResult = {
+		nodes: {
+			Metal_Frame_Metal_0: THREE.Mesh;
+			Front_Cover_Black_0: THREE.Mesh;
+			Fan_Circle_Black_Fan_0: THREE.Mesh;
+			Fan_F_Black_Fan_0: THREE.Mesh;
+			Fan_F_Slot1_0: THREE.Mesh;
+			Front_Cover_U_Black_0: THREE.Mesh;
+			Front_Cover_T_Black_0: THREE.Mesh;
+			Fan_Circle_B_Black_Fan_0: THREE.Mesh;
+			Grills_U_Metal_Black_0: THREE.Mesh;
+			Grills_T_Metal_Black_0: THREE.Mesh;
+			Plane010_Black001_0: THREE.Mesh;
+			Socket_Slot_0: THREE.Mesh;
+			Side_Metal_Part_Metal_S_0: THREE.Mesh;
+			Grills_F003_Metal_Black_0: THREE.Mesh;
+			Grills_F002_Metal_Black_0: THREE.Mesh;
+			Fan_B_Black_Fan_0: THREE.Mesh;
+			Fan_B_Slot1_0: THREE.Mesh;
+		};
+		materials: {
+			Metal: THREE.MeshStandardMaterial;
+			Black: THREE.MeshStandardMaterial;
+			Black_Fan: THREE.MeshStandardMaterial;
+			["Slot.1"]: THREE.MeshStandardMaterial;
+			Metal_Black: THREE.MeshStandardMaterial;
+			["Black.001"]: THREE.MeshStandardMaterial;
+			Slot: THREE.MeshStandardMaterial;
+			Metal_S: THREE.MeshStandardMaterial;
+		};
+	};
 
-  const gltf = useGltf<GLTFResult>('/gpu/scene.gltf')
+	const gltf = useGltf<GLTFResult>("/gpu/scene.gltf");
 </script>
 
-<T.Group
-  bind:ref
-  dispose={false}
-  {...props as any}
->
-  {#await gltf}
-    {@render fallback?.()}
-  {:then gltf}
-    <T.Group scale={0.01}>
-      <T.Group
-        position={[127.5, 88.51, 10.29]}
-        rotation={[Math.PI / 2, 0.05, 0]}
-        scale={0.3}
-      >
-        <T.Mesh
-          geometry={gltf.nodes.Fan_F_Black_Fan_0.geometry}
-          material={gltf.materials.Black_Fan}
-          rotation={[0, fan_rotation, 0]}
-        />
-        <T.Mesh
-          geometry={gltf.nodes.Fan_F_Slot1_0.geometry}
-          material={gltf.materials['Slot.1']}
-        />
-      </T.Group>
-      <T.Group
-        position={[-123.9, 88.51, -37.82]}
-        rotation={[Math.PI / 2, -0.05, Math.PI]}
-        scale={0.3}
-      >
-        <T.Mesh
-          geometry={gltf.nodes.Fan_B_Black_Fan_0.geometry}
-          material={gltf.materials.Black_Fan}
-          rotation={[0, fan_rotation, 0]}
-        />
-        <T.Mesh
-          geometry={gltf.nodes.Fan_B_Slot1_0.geometry}
-          material={gltf.materials['Slot.1']}
-          
-        />
-      </T.Group>
-      <T.Mesh
-        geometry={gltf.nodes.Metal_Frame_Metal_0.geometry}
-        material={gltf.materials.Metal}
-        position={[0, 88.3, -8.47]}
-        rotation={[Math.PI / 2, 0, 0]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Front_Cover_Black_0.geometry}
-        material={gltf.materials.Black}
-        position={[-122.3, 89.69, 12.11]}
-        rotation={[Math.PI / 2, 0, 0]}
-        scale={[1, 1, 0.84]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Fan_Circle_Black_Fan_0.geometry}
-        material={gltf.materials.Black_Fan}
-        position={[127.5, 88.51, 10.29]}
-        rotation={[Math.PI / 2, 0, 0]}
-        scale={0.79}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Front_Cover_U_Black_0.geometry}
-        material={gltf.materials.Black}
-        position={[0.02, 26.08, 14.09]}
-        rotation={[Math.PI / 2, 0, 0]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Front_Cover_T_Black_0.geometry}
-        material={gltf.materials.Black}
-        position={[-4.75, 163.4, 14.09]}
-        rotation={[-Math.PI / 2 , 0, -Math.PI]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Fan_Circle_B_Black_Fan_0.geometry}
-        material={gltf.materials.Black_Fan}
-        position={[-124.15, 88.51, -40.18]}
-        rotation={[Math.PI / 2, 0, Math.PI]}
-        scale={0.79}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Grills_U_Metal_Black_0.geometry}
-        material={gltf.materials.Metal_Black}
-        position={[-0.12, 3.16, 3.09]}
-        rotation={[Math.PI / 2, -Math.PI / 4, 0]}
-        scale={[0.55, 11.75, 0.55]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Grills_T_Metal_Black_0.geometry}
-        material={gltf.materials.Metal_Black}
-        position={[0.8, 174.49, 3.09]}
-        rotation={[-Math.PI / 2, Math.PI / 4, -Math.PI]}
-        scale={[0.55, 11.75, 0.55]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Plane010_Black001_0.geometry}
-        material={gltf.materials['Black.001']}
-        position={[121.84, 88.42, -34.24]}
-        rotation={[-Math.PI / 2, 0, -Math.PI]}
-        scale={[1, 1, 0.84]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Socket_Slot_0.geometry}
-        material={gltf.materials.Slot}
-        position={[-149.71, 187.47, -39.01]}
-        rotation={[Math.PI / 2, 0, 0]}
-        scale={[1, 1.93, 1]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Side_Metal_Part_Metal_S_0.geometry}
-        material={gltf.materials.Metal_S}
-        position={[-225.87, 118.09, -12.54]}
-        rotation={[Math.PI / 2, 0, 0]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Grills_F003_Metal_Black_0.geometry}
-        material={gltf.materials.Metal_Black}
-        position={[131.49, 88.84, -23.02]}
-        rotation={[Math.PI / 2, 0, 0]}
-        scale={[1, 1, 1.02]}
-      />
-      <T.Mesh
-        geometry={gltf.nodes.Grills_F002_Metal_Black_0.geometry}
-        material={gltf.materials.Metal_Black}
-        position={[-128.18, 88.84, -4.17]}
-        rotation={[Math.PI / 2, 0, Math.PI]}
-        scale={[1, 0.97, 1.02]}
-      />
-    </T.Group>
-  {:catch err}
-    {@render error?.({ error: err })}
-  {/await}
+<T.Group bind:ref dispose={false} {...props as any}>
+	{#await gltf}
+		{@render fallback?.()}
+	{:then gltf}
+		<T.Group scale={0.01}>
+			<T.Group position={[127.5, 88.51, 10.29]} rotation={[Math.PI / 2, 0.05, 0]} scale={0.3}>
+				<T.Mesh
+					geometry={gltf.nodes.Fan_F_Black_Fan_0.geometry}
+					material={gltf.materials.Black_Fan}
+					rotation={[0, fan_rotation, 0]}
+				/>
+				<T.Mesh geometry={gltf.nodes.Fan_F_Slot1_0.geometry} material={gltf.materials["Slot.1"]} />
+			</T.Group>
+			<T.Group
+				position={[-123.9, 88.51, -37.82]}
+				rotation={[Math.PI / 2, -0.05, Math.PI]}
+				scale={0.3}
+			>
+				<T.Mesh
+					geometry={gltf.nodes.Fan_B_Black_Fan_0.geometry}
+					material={gltf.materials.Black_Fan}
+					rotation={[0, fan_rotation, 0]}
+				/>
+				<T.Mesh geometry={gltf.nodes.Fan_B_Slot1_0.geometry} material={gltf.materials["Slot.1"]} />
+			</T.Group>
+			<T.Mesh
+				geometry={gltf.nodes.Metal_Frame_Metal_0.geometry}
+				material={gltf.materials.Metal}
+				position={[0, 88.3, -8.47]}
+				rotation={[Math.PI / 2, 0, 0]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Front_Cover_Black_0.geometry}
+				material={gltf.materials.Black}
+				position={[-122.3, 89.69, 12.11]}
+				rotation={[Math.PI / 2, 0, 0]}
+				scale={[1, 1, 0.84]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Fan_Circle_Black_Fan_0.geometry}
+				material={gltf.materials.Black_Fan}
+				position={[127.5, 88.51, 10.29]}
+				rotation={[Math.PI / 2, 0, 0]}
+				scale={0.79}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Front_Cover_U_Black_0.geometry}
+				material={gltf.materials.Black}
+				position={[0.02, 26.08, 14.09]}
+				rotation={[Math.PI / 2, 0, 0]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Front_Cover_T_Black_0.geometry}
+				material={gltf.materials.Black}
+				position={[-4.75, 163.4, 14.09]}
+				rotation={[-Math.PI / 2, 0, -Math.PI]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Fan_Circle_B_Black_Fan_0.geometry}
+				material={gltf.materials.Black_Fan}
+				position={[-124.15, 88.51, -40.18]}
+				rotation={[Math.PI / 2, 0, Math.PI]}
+				scale={0.79}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Grills_U_Metal_Black_0.geometry}
+				material={gltf.materials.Metal_Black}
+				position={[-0.12, 3.16, 3.09]}
+				rotation={[Math.PI / 2, -Math.PI / 4, 0]}
+				scale={[0.55, 11.75, 0.55]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Grills_T_Metal_Black_0.geometry}
+				material={gltf.materials.Metal_Black}
+				position={[0.8, 174.49, 3.09]}
+				rotation={[-Math.PI / 2, Math.PI / 4, -Math.PI]}
+				scale={[0.55, 11.75, 0.55]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Plane010_Black001_0.geometry}
+				material={gltf.materials["Black.001"]}
+				position={[121.84, 88.42, -34.24]}
+				rotation={[-Math.PI / 2, 0, -Math.PI]}
+				scale={[1, 1, 0.84]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Socket_Slot_0.geometry}
+				material={gltf.materials.Slot}
+				position={[-149.71, 187.47, -39.01]}
+				rotation={[Math.PI / 2, 0, 0]}
+				scale={[1, 1.93, 1]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Side_Metal_Part_Metal_S_0.geometry}
+				material={gltf.materials.Metal_S}
+				position={[-225.87, 118.09, -12.54]}
+				rotation={[Math.PI / 2, 0, 0]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Grills_F003_Metal_Black_0.geometry}
+				material={gltf.materials.Metal_Black}
+				position={[131.49, 88.84, -23.02]}
+				rotation={[Math.PI / 2, 0, 0]}
+				scale={[1, 1, 1.02]}
+			/>
+			<T.Mesh
+				geometry={gltf.nodes.Grills_F002_Metal_Black_0.geometry}
+				material={gltf.materials.Metal_Black}
+				position={[-128.18, 88.84, -4.17]}
+				rotation={[Math.PI / 2, 0, Math.PI]}
+				scale={[1, 0.97, 1.02]}
+			/>
+		</T.Group>
+	{:catch err}
+		{@render error?.({ error: err })}
+	{/await}
 
-  {@render children?.({ ref })}
+	{@render children?.({ ref })}
 </T.Group>

src/lib/components/3d/elements/compute/modal/AISessionConnectionModal.svelte

@@ -380,9 +380,9 @@
 									placeholder="front, wrist, overhead"
 									class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
 								/>
-															<p class="text-xs text-slate-600 dark:text-slate-400">
-								Comma-separated camera names
-							</p>
+								<p class="text-xs text-slate-600 dark:text-slate-400">
+									Comma-separated camera names
+								</p>
 							</div>
 
 							{#if modelConfig.requiresLanguageInstruction}
@@ -403,7 +403,9 @@
 								</div>
 							{/if}
 
-							<div class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20">
+							<div
+								class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20"
+							>
 								<div class="flex items-center gap-2">
 									<span class="icon-[mdi--folder] size-4 text-green-600 dark:text-green-400"></span>
 									<span class="text-sm font-medium text-green-700 dark:text-green-300">
@@ -420,9 +422,9 @@
 							>
 								<div class="text-xs text-slate-600 dark:text-slate-400">
 									<span class="icon-[mdi--lightbulb] size-3"></span>
-									<strong>Tip:</strong> This will create a new {modelConfig.label} inference session with dedicated rooms for camera
-									inputs, joint inputs, and joint outputs in the inference server communication
-									system.
+									<strong>Tip:</strong> This will create a new {modelConfig.label} inference session
+									with dedicated rooms for camera inputs, joint inputs, and joint outputs in the inference
+									server communication system.
 								</div>
 							</div>
 
@@ -450,8 +452,8 @@
 				class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500"
 			>
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
-				Inference Sessions require a trained {modelConfig.label} and create dedicated communication rooms for video
-				inputs, robot joint states, and control outputs in the inference server system.
+				Inference Sessions require a trained {modelConfig.label} and create dedicated communication rooms
+				for video inputs, robot joint states, and control outputs in the inference server system.
 			</div>
 		</div>
 	</Dialog.Content>

src/lib/components/3d/elements/compute/status/ComputeBoxUIKit.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import {
-		BaseStatusBox,
-		StatusHeader,
-		StatusContent
-	} from "$lib/components/3d/ui";
+	import { BaseStatusBox, StatusHeader, StatusContent } from "$lib/components/3d/ui";
 
 	interface Props {
 		compute: RemoteCompute;

src/lib/components/3d/elements/compute/status/ComputeStatusBillboard.svelte

@@ -5,7 +5,7 @@
 	import ComputeConnectionFlowBoxUIKit from "./ComputeConnectionFlowBoxUIKit.svelte";
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { Tween } from "svelte/motion";
-	import { cubicOut } from "svelte/easing";	
+	import { cubicOut } from "svelte/easing";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -29,12 +29,18 @@
 
 	interactivity();
 
-	const tweenedScale = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
-	const tweenedOpacity = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedScale = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
+	const tweenedOpacity = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
 </script>
 
 <T.Group

src/lib/components/3d/elements/compute/status/RobotOutputBoxUIKit.svelte

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -13,7 +19,7 @@
 	const outputColor = "rgb(59, 130, 246)";
 </script>
 
-<BaseStatusBox 
+<BaseStatusBox
 	color={outputColor}
 	borderOpacity={0.6}
 	backgroundOpacity={0.2}
@@ -22,14 +28,14 @@
 >
 	{#if compute.hasSession && compute.outputConnections}
 		<!-- Active Robot Output State -->
-		<StatusHeader 
-			icon={ICON["icon-[ix--robotic-arm]"].svg} 
-			text="COMMANDS" 
+		<StatusHeader
+			icon={ICON["icon-[ix--robotic-arm]"].svg}
+			text="COMMANDS"
 			color={outputColor}
 			opacity={0.9}
 		/>
 
-		<StatusContent 
+		<StatusContent
 			title={compute.isRunning ? "AI Commands Active" : "Session Ready"}
 			subtitle="Motor Control"
 			color="rgb(37, 99, 235)"
@@ -46,25 +52,25 @@
 		{/if}
 	{:else}
 		<!-- No Session State -->
-		<StatusHeader 
-			icon={ICON["icon-[ix--robotic-arm]"].svg} 
-			text="NO OUTPUT" 
+		<StatusHeader
+			icon={ICON["icon-[ix--robotic-arm]"].svg}
+			text="NO OUTPUT"
 			color={outputColor}
 			opacity={0.7}
 		/>
 
-		<StatusContent 
-			title={!compute.hasSession ? 'Need Session' : 'Click to Configure'}
+		<StatusContent
+			title={!compute.hasSession ? "Need Session" : "Click to Configure"}
 			color="rgb(59, 130, 246)"
 			variant="secondary"
 		/>
 
-		<StatusButton 
-			icon={ICON["icon-[ix--robotic-arm]"].svg} 
+		<StatusButton
+			icon={ICON["icon-[ix--robotic-arm]"].svg}
 			text="Setup Output"
 			color={outputColor}
 			backgroundOpacity={0.1}
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

src/lib/components/3d/elements/compute/status/VideoInputBoxUIKit.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
-	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
 	import { ICON } from "@/utils/icon";
 
 	interface Props {
@@ -13,7 +19,7 @@
 	const inputColor = "rgb(34, 197, 94)";
 </script>
 
-<BaseStatusBox 
+<BaseStatusBox
 	minWidth={100}
 	minHeight={65}
 	color={inputColor}
@@ -24,16 +30,16 @@
 >
 	{#if compute.hasSession && compute.inputConnections}
 		<!-- Active Video Input State -->
-		<StatusHeader 
-			icon={ICON["icon-[mdi--video]"].svg} 
-			text="VIDEO" 
+		<StatusHeader
+			icon={ICON["icon-[mdi--video]"].svg}
+			text="VIDEO"
 			color={inputColor}
 			opacity={0.9}
 			fontSize={11}
 		/>
 
 		<!-- Camera Streams -->
-		<StatusContent 
+		<StatusContent
 			title={`${Object.keys(compute.inputConnections.cameras).length} Cameras`}
 			color="rgb(21, 128, 61)"
 			variant="primary"
@@ -43,21 +49,17 @@
 		<StatusIndicator color={inputColor} />
 	{:else}
 		<!-- No Session State -->
-		<StatusHeader 
-			icon={ICON["icon-[mdi--video-off]"].svg} 
-			text="NO VIDEO" 
+		<StatusHeader
+			icon={ICON["icon-[mdi--video-off]"].svg}
+			text="NO VIDEO"
 			color={inputColor}
 			opacity={0.7}
 			fontSize={11}
 		/>
 
-		<StatusContent 
-			title="Setup Video" 
-			color="rgb(34, 197, 94)" 
-			variant="secondary"
-		/>
+		<StatusContent title="Setup Video" color="rgb(34, 197, 94)" variant="secondary" />
 
-		<StatusButton 
+		<StatusButton
 			icon={ICON["icon-[mdi--plus]"].svg}
 			text="Add"
 			color={inputColor}
@@ -65,4 +67,4 @@
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

src/lib/components/3d/elements/robot/RobotGridItem.svelte

@@ -106,7 +106,6 @@
 	}
 
 	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
-	
 
 	let isToggled = $state(false);
 
@@ -124,13 +123,17 @@
 	scale={[10, 10, 10]}
 	rotation={[-Math.PI / 2, 0, 0]}
 >
-	<T.Group onpointerenter={(event) => {
-		event.stopPropagation();
-		onPointerEnter();
-	}} onpointerleave={(event) => {
-		event.stopPropagation();
-		onPointerLeave();
-	}} onclick={handleClick}>
+	<T.Group
+		onpointerenter={(event) => {
+			event.stopPropagation();
+			onPointerEnter();
+		}}
+		onpointerleave={(event) => {
+			event.stopPropagation();
+			onPointerLeave();
+		}}
+		onclick={handleClick}
+	>
 		{#if urdfRobotState}
 			{#each getRootLinks(urdfRobotState) as link}
 				<UrdfLink

src/lib/components/3d/elements/robot/URDF/primitives/UrdfJoint.svelte

@@ -81,8 +81,6 @@
 	// 	return norm * 200 - 100; // → [-100, 100]
 	// }
 
-	
-
 	// function denormalizeAngle(normValue: number, name: keyof typeof ANGLE_RANGES): number {
 	// 	if (!(name in ANGLE_RANGES)) {
 	// 		throw new Error(`Unknown angle name: ${name}`);
@@ -156,11 +154,7 @@
 
 			<T.Mesh rotation={[Math.PI / 2, 0, 0]} {...restProps}>
 				<T.CylinderGeometry args={[0.004, 0.004, 0.03]} />
-				<T.MeshBasicMaterial
-					color={jointColor}
-					{opacity}
-					transparent={opacity < 1.0}
-				/>
+				<T.MeshBasicMaterial color={jointColor} {opacity} transparent={opacity < 1.0} />
 			</T.Mesh>
 		{/if}
 	</T.Group>
@@ -174,7 +168,7 @@
 		renderOrder={999}
 		frustumCulled={false}
 	>
-	<!-- text={joint.name + " " + getJointRotationValue(joint).toFixed(0) + "°" + " (" + normalizeAngle2(getJointRotationValue(joint)).toFixed(0) + ")"} -->
+		<!-- text={joint.name + " " + getJointRotationValue(joint).toFixed(0) + "°" + " (" + normalizeAngle2(getJointRotationValue(joint)).toFixed(0) + ")"} -->
 		<Text
 			scale={nameHeight}
 			color={jointColor}

src/lib/components/3d/elements/robot/URDF/primitives/UrdfLink.svelte

@@ -47,7 +47,7 @@
 		jointIndicatorColor = "#000000",
 		nameHeight = 0.1,
 		showLine = true,
-		opacity = 0.7,
+		opacity = 0.7
 	}: Props = $props();
 
 	let showPointCloud = false;

src/lib/components/3d/elements/robot/URDF/utils/UrdfParser.ts

@@ -35,8 +35,6 @@ export function getRootLinks(robot: IUrdfRobot): IUrdfLink[] {
 		}
 	}
 
-
-
 	return links;
 }
 

src/lib/components/3d/elements/robot/modal/InputConnectionModal.svelte

@@ -499,13 +499,15 @@
 															>
 																{room.id}
 															</p>
-															<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
+															<div
+																class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400"
+															>
 																<span>{room.has_producer ? "📤 Has Output" : "📥 No Output"}</span>
 																<span>👥 {room.participants?.total || 0} users</span>
 																<!-- Monitoring links -->
 																<div class="flex gap-1">
 																	<a
-																		href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/consumer?room=${room.id}`}
+																		href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/robotics/consumer?room=${room.id}`}
 																		target="_blank"
 																		rel="noopener noreferrer"
 																		class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
@@ -515,7 +517,7 @@
 																		Consumer
 																	</a>
 																	<a
-																		href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/producer?room=${room.id}`}
+																		href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/robotics/producer?room=${room.id}`}
 																		target="_blank"
 																		rel="noopener noreferrer"
 																		class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
@@ -526,9 +528,8 @@
 																	</a>
 																</div>
 															</div>
-															
 														</div>
-														
+
 														<Button
 															variant="secondary"
 															size="sm"

src/lib/components/3d/elements/robot/modal/OutputConnectionModal.svelte

@@ -191,14 +191,14 @@
 		showUSBCalibration = false;
 		pendingUSBConnection = null;
 		isConnecting = false;
-		
+
 		// Clean up the uncalibrated USB producer
 		const uncalibratedDrivers = robot.getUncalibratedUSBDrivers();
 		if (uncalibratedDrivers.length > 0) {
 			// Remove the most recent producer (should be the one we just added)
 			const lastProducer = robot.producers[robot.producers.length - 1];
 			if (lastProducer) {
-				robot.removeProducer(lastProducer.id).catch(err => {
+				robot.removeProducer(lastProducer.id).catch((err) => {
 					console.error("Failed to clean up USB producer after calibration cancel:", err);
 				});
 			}
@@ -277,9 +277,7 @@
 									onCancel={onCalibrationCancel}
 								/>
 							{:else}
-								<div class="text-center text-slate-400">
-									No USB drivers require calibration
-								</div>
+								<div class="text-center text-slate-400">No USB drivers require calibration</div>
 							{/each}
 						</Card.Content>
 					</Card.Root>
@@ -340,13 +338,14 @@
 							<div class="flex items-center justify-between">
 								<div>
 									<Card.Title
-										class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200 pb-1"
+										class="flex items-center gap-2 pb-1 text-base text-orange-700 dark:text-orange-200"
 									>
 										<span class="icon-[mdi--cloud-sync] size-4"></span>
 										Remote Control
 									</Card.Title>
 									<Card.Description class="text-xs text-orange-600/70 dark:text-orange-300/70">
-										Broadcast robot movements to remote robots or AI systems from anywhere in the world
+										Broadcast robot movements to remote robots or AI systems from anywhere in the
+										world
 									</Card.Description>
 								</div>
 								<Button
@@ -441,13 +440,15 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div
+															class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400"
+														>
 															<span>{room.has_producer ? "🔴 Occupied" : "🟢 Available"}</span>
 															<span>👥 {room.participants?.total || 0} users</span>
 															<!-- Monitoring links -->
 															<div class="flex gap-1">
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/consumer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/robotics/consumer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
@@ -457,7 +458,7 @@
 																	Consumer
 																</a>
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/producer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/robotics/producer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"

src/lib/components/3d/elements/robot/status/ConnectionFlowBoxUIkit.svelte

@@ -18,17 +18,31 @@
 		delay?: number;
 	}
 
-	let { visible, robot, onInputBoxClick, onRobotBoxClick, onOutputBoxClick, duration = 100, delay = 0 }: Props = $props();
+	let {
+		visible,
+		robot,
+		onInputBoxClick,
+		onRobotBoxClick,
+		onOutputBoxClick,
+		duration = 100,
+		delay = 0
+	}: Props = $props();
 
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
 
-	const tweenedScale = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
-	const tweenedOpacity = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedScale = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
+	const tweenedOpacity = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
 </script>
 
 <Container

src/lib/components/3d/elements/robot/status/RobotBoxUIKit.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import type { Robot } from "$lib/elements/robot/Robot.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent, 
-		StatusButton
-	} from "$lib/components/3d/ui";
+	import { BaseStatusBox, StatusHeader, StatusContent, StatusButton } from "$lib/components/3d/ui";
 
 	interface Props {
 		robot: Robot;
@@ -18,34 +13,28 @@
 	const robotColor = "rgb(245, 158, 11)";
 </script>
 
-
 <BaseStatusBox
 	color={robotColor}
 	borderOpacity={0.6}
 	backgroundOpacity={0.2}
 	onclick={() => onRobotBoxClick(robot)}
 >
-		<!-- Robot Header -->
-		<StatusHeader
-			icon={ICON["icon-[ix--robotic-arm]"].svg}
-			text="ROBOT"
-			color={robotColor}
-			opacity={0.9}
-		/>
+	<!-- Robot Header -->
+	<StatusHeader
+		icon={ICON["icon-[ix--robotic-arm]"].svg}
+		text="ROBOT"
+		color={robotColor}
+		opacity={0.9}
+	/>
 
-		<!-- Robot Info -->
-		<StatusContent
-			title={robot.id}
-			subtitle="Active"
-			color={robotColor}
-			variant="primary"
-		/>
+	<!-- Robot Info -->
+	<StatusContent title={robot.id} subtitle="Active" color={robotColor} variant="primary" />
 
-		<!-- Status Button -->
-		<StatusButton
-			text="Active"
-			icon={ICON["icon-[iconamoon--lightning-1-duotone]"].svg}
-			color={robotColor}
-			textOpacity={0.8}
-		/>
+	<!-- Status Button -->
+	<StatusButton
+		text="Active"
+		icon={ICON["icon-[iconamoon--lightning-1-duotone]"].svg}
+		color={robotColor}
+		textOpacity={0.8}
+	/>
 </BaseStatusBox>

src/lib/components/3d/elements/robot/status/RobotStatusBillboard.svelte

@@ -27,34 +27,34 @@
 </script>
 
 <!-- {#if visible} -->
-	<T.Group
-		position.z={0.35}
-		rotation={[Math.PI / 2, 0, 0]}
-		scale={[0.12, 0.12, 0.12]}
-		padding={10}
-		pointerEvents="listener"
-	>
-		<Billboard>
-			<Root name={`robot-status-billboard-${robot.id}`}>
-				<Container
-					width="100%"
-					height="100%"
-					alignItems="center"
-					justifyContent="center"
-					padding={20}
-				>
-					<ConnectionFlowBoxUIkit
-						{visible}
-						{robot}
-						{onInputBoxClick}
-						{onRobotBoxClick}
-						{onOutputBoxClick}
-					/>
-				</Container>
-			</Root>
-		</Billboard>
+<T.Group
+	position.z={0.35}
+	rotation={[Math.PI / 2, 0, 0]}
+	scale={[0.12, 0.12, 0.12]}
+	padding={10}
+	pointerEvents="listener"
+>
+	<Billboard>
+		<Root name={`robot-status-billboard-${robot.id}`}>
+			<Container
+				width="100%"
+				height="100%"
+				alignItems="center"
+				justifyContent="center"
+				padding={20}
+			>
+				<ConnectionFlowBoxUIkit
+					{visible}
+					{robot}
+					{onInputBoxClick}
+					{onRobotBoxClick}
+					{onOutputBoxClick}
+				/>
+			</Container>
+		</Root>
+	</Billboard>
 
-		<!-- <Billboard>
+	<!-- <Billboard>
 		<HTML
 			transform
 			autoRender={true}
@@ -86,5 +86,5 @@
 			</div>
 		</HTML>
 	</Billboard> -->
-	</T.Group>
+</T.Group>
 <!-- {/if} -->

src/lib/components/3d/elements/video/modal/VideoInputConnectionModal.svelte

@@ -356,7 +356,7 @@
 						<div class="flex items-center justify-between">
 							<div>
 								<Card.Title
-									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200 pb-1"
+									class="flex items-center gap-2 pb-1 text-base text-purple-700 dark:text-purple-200"
 								>
 									<span class="icon-[mdi--cloud-download] size-4"></span>
 									Remote Control
@@ -484,7 +484,9 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div
+															class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400"
+														>
 															<span
 																>{room.participants?.producer
 																	? "📹 Has Output"
@@ -494,7 +496,7 @@
 															<!-- Monitoring links -->
 															<div class="flex gap-1">
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/consumer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/video/consumer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
@@ -504,7 +506,7 @@
 																	Consumer
 																</a>
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/producer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/video/producer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
@@ -552,7 +554,6 @@
 						{/if}
 					</Card.Content>
 				</Card.Root>
-
 			</div>
 		</div>
 	</Dialog.Content>

src/lib/components/3d/elements/video/modal/VideoOutputConnectionModal.svelte

@@ -366,7 +366,7 @@
 						<div class="flex items-center justify-between">
 							<div>
 								<Card.Title
-									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200 pb-1"
+									class="flex items-center gap-2 pb-1 text-base text-purple-700 dark:text-purple-200"
 								>
 									<span class="icon-[mdi--cloud-upload] size-4"></span>
 									Remote Control
@@ -494,7 +494,9 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div
+															class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400"
+														>
 															<span
 																>{room.participants?.producer
 																	? "🔴 Has Output"
@@ -504,7 +506,7 @@
 															<!-- Monitoring links -->
 															<div class="flex gap-1">
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/consumer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/video/consumer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
@@ -514,7 +516,7 @@
 																	Consumer
 																</a>
 																<a
-																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/producer?room=${room.id}`}
+																	href={`${settings.transportServerUrl.replace("/api", "")}/${workspaceId}/video/producer?room=${room.id}`}
 																	target="_blank"
 																	rel="noopener noreferrer"
 																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
@@ -562,8 +564,6 @@
 						{/if}
 					</Card.Content>
 				</Card.Root>
-
-
 			</div>
 		</div>
 	</Dialog.Content>

src/lib/components/3d/elements/video/status/VideoBoxUIKit.svelte

@@ -1,11 +1,7 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent
-	} from "$lib/components/3d/ui";
+	import { BaseStatusBox, StatusHeader, StatusContent } from "$lib/components/3d/ui";
 
 	interface Props {
 		video: VideoInstance;
@@ -16,26 +12,20 @@
 	const videoColor = "rgb(217, 119, 6)";
 </script>
 
+<BaseStatusBox color={videoColor} borderOpacity={0.6} backgroundOpacity={0.2} clickable={false}>
+	<!-- Video Header -->
+	<StatusHeader
+		icon={ICON["icon-[mdi--video]"].svg}
+		text="VIDEO"
+		color={videoColor}
+		opacity={0.9}
+	/>
 
-<BaseStatusBox
-	color={videoColor}
-	borderOpacity={0.6}
-	backgroundOpacity={0.2}
-	clickable={false}
->
-		<!-- Video Header -->
-		<StatusHeader
-			icon={ICON["icon-[mdi--video]"].svg}
-			text="VIDEO"
-			color={videoColor}
-			opacity={0.9}
-		/>
-
-		<!-- Video Info -->
-		<StatusContent
-			title={video.name}
-			subtitle={video.id.slice(0, 8)}
-			color="rgb(253, 230, 138)"
-			variant="primary"
-		/>
-</BaseStatusBox> 
+	<!-- Video Info -->
+	<StatusContent
+		title={video.name}
+		subtitle={video.id.slice(0, 8)}
+		color="rgb(253, 230, 138)"
+		variant="primary"
+	/>
+</BaseStatusBox>

src/lib/components/3d/elements/video/status/VideoConnectionFlowBoxUIKit.svelte

@@ -17,17 +17,30 @@
 		delay?: number;
 	}
 
-	let { visible, video, onInputBoxClick, onOutputBoxClick, duration = 100, delay = 0 }: Props = $props();
+	let {
+		visible,
+		video,
+		onInputBoxClick,
+		onOutputBoxClick,
+		duration = 100,
+		delay = 0
+	}: Props = $props();
 
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
 
-	const tweenedScale = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
-	const tweenedOpacity = Tween.of(() => {
-		return visible ? 1 : 0;
-	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedScale = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
+	const tweenedOpacity = Tween.of(
+		() => {
+			return visible ? 1 : 0;
+		},
+		{ duration: duration, easing: cubicOut, delay: delay }
+	);
 </script>
 
 <Container

src/lib/components/3d/elements/video/status/VideoStatusBillboard.svelte

@@ -19,32 +19,32 @@
 </script>
 
 <!-- {#if visible} -->
-	<T.Group
-		onpointerdown={(e) => e.stopPropagation()}
-		onpointerup={(e) => e.stopPropagation()}
-		onpointermove={(e) => e.stopPropagation()}
-		onclick={(e) => e.stopPropagation()}
-		position.z={0.22}
-		padding={10}
-		rotation={[Math.PI / 2, 0, 0]}
-		scale={[0.12, 0.12, 0.12]}
-		pointerEvents="listener"
-	>
-		<Billboard>
-			<Root name={`video-status-billboard-${video.id}`}>
-				<Container
-					width="100%"
-					height="100%"
-					alignItems="center"
-					justifyContent="center"
-					padding={20}
-				>
-					<VideoConnectionFlowBoxUIKit {visible} {video} {onInputBoxClick} {onOutputBoxClick} />
-				</Container>
-			</Root>
-		</Billboard>
+<T.Group
+	onpointerdown={(e) => e.stopPropagation()}
+	onpointerup={(e) => e.stopPropagation()}
+	onpointermove={(e) => e.stopPropagation()}
+	onclick={(e) => e.stopPropagation()}
+	position.z={0.22}
+	padding={10}
+	rotation={[Math.PI / 2, 0, 0]}
+	scale={[0.12, 0.12, 0.12]}
+	pointerEvents="listener"
+>
+	<Billboard>
+		<Root name={`video-status-billboard-${video.id}`}>
+			<Container
+				width="100%"
+				height="100%"
+				alignItems="center"
+				justifyContent="center"
+				padding={20}
+			>
+				<VideoConnectionFlowBoxUIKit {visible} {video} {onInputBoxClick} {onOutputBoxClick} />
+			</Container>
+		</Root>
+	</Billboard>
 
-		<!-- <Billboard>
+	<!-- <Billboard>
 		<HTML
 			transform
 			autoRender={true}
@@ -72,5 +72,5 @@
 			</div>
 		</HTML>
 	</Billboard> -->
-	</T.Group>
+</T.Group>
 <!-- {/if} -->

src/lib/components/3d/ui/StatusArrow.svelte

@@ -6,7 +6,7 @@
 		color?: string;
 		opacity?: number;
 		size?: number;
-		direction?: 'right' | 'down' | 'left' | 'up';
+		direction?: "right" | "down" | "left" | "up";
 		minWidth?: number;
 		minHeight?: number;
 	}
@@ -15,7 +15,7 @@
 		color = "rgb(139, 69, 219)",
 		opacity = 1,
 		size = 12,
-		direction = 'right',
+		direction = "right",
 		minWidth = 20,
 		minHeight = 12
 	}: Props = $props();
@@ -29,7 +29,7 @@
 	{minWidth}
 	{minHeight}
 >
-	{#if direction === 'right'}
+	{#if direction === "right"}
 		<SVG
 			width={size}
 			height={size}
@@ -37,29 +37,11 @@
 			{opacity}
 			src={ICON[`icon-[formkit--arrowright]`].svg}
 		/>
-	{:else if direction === 'down'}
-		<SVG
-			width={size}
-			height={size}
-			{color}
-			{opacity}
-			src={ICON[`icon-[formkit--arrowdown]`].svg}
-		/>
-		{:else if direction === 'left'}
-		<SVG
-			width={size}
-			height={size}
-			{color}
-			{opacity}
-			src={ICON[`icon-[formkit--arrowleft]`].svg}
-		/>
-	{:else if direction === 'up'}
-		<SVG
-			width={size}
-			height={size}
-			{color}
-			{opacity}
-			src={ICON[`icon-[formkit--arrowup]`].svg}
-		/>
+	{:else if direction === "down"}
+		<SVG width={size} height={size} {color} {opacity} src={ICON[`icon-[formkit--arrowdown]`].svg} />
+	{:else if direction === "left"}
+		<SVG width={size} height={size} {color} {opacity} src={ICON[`icon-[formkit--arrowleft]`].svg} />
+	{:else if direction === "up"}
+		<SVG width={size} height={size} {color} {opacity} src={ICON[`icon-[formkit--arrowup]`].svg} />
 	{/if}
-</Container> 
+</Container>

src/lib/components/3d/ui/StatusButton.svelte

@@ -47,15 +47,9 @@
 	{onclick}
 >
 	{#if icon}
-		<SVG
-			width={iconSize}
-			height={iconSize}
-			{color}
-			opacity={textOpacity}
-			src={icon}
-		/>
+		<SVG width={iconSize} height={iconSize} {color} opacity={textOpacity} src={icon} />
 	{/if}
-	
+
 	<Text
 		{text}
 		fontSize={textSize}
@@ -64,4 +58,4 @@
 		opacity={textOpacity}
 		textAlign="center"
 	/>
-</Container> 
+</Container>

src/lib/components/3d/ui/StatusContent.svelte

@@ -6,10 +6,10 @@
 		subtitle?: string;
 		description?: string;
 		color?: string;
-		variant?: 'primary' | 'secondary' | 'tertiary';
-		size?: 'sm' | 'md' | 'lg';
-		align?: 'left' | 'center' | 'right';
-		children?: import('svelte').Snippet;
+		variant?: "primary" | "secondary" | "tertiary";
+		size?: "sm" | "md" | "lg";
+		align?: "left" | "center" | "right";
+		children?: import("svelte").Snippet;
 	}
 
 	let {
@@ -17,9 +17,9 @@
 		subtitle,
 		description,
 		color = "rgb(221, 214, 254)",
-		variant = 'primary',
-		size = 'md',
-		align = 'center',
+		variant = "primary",
+		size = "md",
+		align = "center",
 		children
 	}: Props = $props();
 
@@ -40,19 +40,15 @@
 	const config = sizeConfigs[size];
 	const opacities = opacityLevels[variant];
 
-	const flexAlign = align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center';
+	const flexAlign = align === "left" ? "flex-start" : align === "right" ? "flex-end" : "center";
 </script>
 
-<Container
-	padding={config.padding}
-	marginBottom={4}
-	width="100%"
->
+<Container padding={config.padding} marginBottom={4} width="100%">
 	{#if children}
 		{@render children()}
 	{:else}
-		<Container 
-			flexDirection="column" 
+		<Container
+			flexDirection="column"
 			alignItems={flexAlign}
 			justifyContent="center"
 			gap={config.gap}
@@ -68,7 +64,7 @@
 					width="100%"
 				/>
 			{/if}
-			
+
 			{#if subtitle}
 				<Text
 					text={subtitle}
@@ -80,7 +76,7 @@
 					width="100%"
 				/>
 			{/if}
-			
+
 			{#if description}
 				<Text
 					text={description}
@@ -94,4 +90,4 @@
 			{/if}
 		</Container>
 	{/if}
-</Container> 
+</Container>

src/lib/components/3d/ui/icons.ts

@@ -1,7 +1,8 @@
 // Common generic SVG icons encoded as base64 data URLs
 export const icons = {
 	plus: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnoiLz48L3N2Zz4=",
-	settings: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJtOS4yNSAyMmwtLjQtMy4ycS0uMzI1LS4xMjUtLjYxMi0uM3QtLjU2My0uMzc1TDQuNyAxOS4zNzVsLTIuNzUtNC43NWwyLjU3NS0xLjk1UTQuNSAxMi41IDQuNSAxMi4zMzh2LS42NzVxMC0uMTYzLjAyNS0uMzM4TDEuOTUgOS4zNzVsMi43NS00Ljc1bDIuOTc5IDEuMjVxLjI3NS0uMi41NzUtLjM3NXQuNi0uM2wuNC0zLjJoNS41bC40IDMuMnEuMzI1LjEyNS42MTMuM3QuNTYyLjM3NWwyLjk3NS0xLjI1bDIuNzUgNC43NWwtMi41NzUgMS45NXEuMDI1LjE3NS4wMjUuMzM4di42NzRxMCAuMTYzLS4wNS4zMzhsMi41NzUgMS45NWwtMi43NSA0Ljc1bC0yLjk1LTEuMjVxLS4yNzUuMi0uNTc1LjM3NXQtLjYuM2wtLjQgMy4yem0yLjgtNi41cTEuNDUgMCAyLjQ3NS0xLjAyNVQxNS41NSAxMnQtMS4wMjUtMi40NzVUMTIuMDUgOC41cS0xLjQ3NSAwLTIuNDg4IDEuMDI1VDguNTUgMTJ0MS4wMTMgMi40NzVUMTIuMDUgMTUuNSIvPjwvc3ZnPg=="
+	settings:
+		"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJtOS4yNSAyMmwtLjQtMy4ycS0uMzI1LS4xMjUtLjYxMi0uM3QtLjU2My0uMzc1TDQuNyAxOS4zNzVsLTIuNzUtNC43NWwyLjU3NS0xLjk1UTQuNSAxMi41IDQuNSAxMi4zMzh2LS42NzVxMC0uMTYzLjAyNS0uMzM4TDEuOTUgOS4zNzVsMi43NS00Ljc1bDIuOTc5IDEuMjVxLjI3NS0uMi41NzUtLjM3NXQuNi0uM2wuNC0zLjJoNS41bC40IDMuMnEuMzI1LjEyNS42MTMuM3QuNTYyLjM3NWwyLjk3NS0xLjI1bDIuNzUgNC43NWwtMi41NzUgMS45NXEuMDI1LjE3NS4wMjUuMzM4di42NzRxMCAuMTYzLS4wNS4zMzhsMi41NzUgMS45NWwtMi43NSA0Ljc1bC0yLjk1LTEuMjVxLS4yNzUuMi0uNTc1LjM3NXQtLjYuM2wtLjQgMy4yem0yLjgtNi41cTEuNDUgMCAyLjQ3NS0xLjAyNVQxNS41NSAxMnQtMS4wMjUtMi40NzVUMTIuMDUgOC41cS0xLjQ3NSAwLTIuNDg4IDEuMDI1VDguNTUgMTJ0MS4wMTMgMi40NzVUMTIuMDUgMTUuNSIvPjwvc3ZnPg=="
 } as const;
- 
-export type IconName = keyof typeof icons; 
+
+export type IconName = keyof typeof icons;

src/lib/components/3d/ui/index.ts

@@ -1,6 +1,6 @@
-export { default as BaseStatusBox } from './BaseStatusBox.svelte';
-export { default as StatusHeader } from './StatusHeader.svelte';
-export { default as StatusContent } from './StatusContent.svelte';
-export { default as StatusIndicator } from './StatusIndicator.svelte';
-export { default as StatusButton } from './StatusButton.svelte';
-export { default as StatusArrow } from './StatusArrow.svelte'; 
+export { default as BaseStatusBox } from "./BaseStatusBox.svelte";
+export { default as StatusHeader } from "./StatusHeader.svelte";
+export { default as StatusContent } from "./StatusContent.svelte";
+export { default as StatusIndicator } from "./StatusIndicator.svelte";
+export { default as StatusButton } from "./StatusButton.svelte";
+export { default as StatusArrow } from "./StatusArrow.svelte";

src/lib/components/interface/overlay/AddAIButton.svelte

@@ -13,10 +13,10 @@
 	let { open = $bindable(), workspaceId }: Props = $props();
 
 	let isConfigModalOpen = $state(false);
-	let selectedModelType = $state<ModelType>('act');
+	let selectedModelType = $state<ModelType>("act");
 
 	// Get available model types
-	const availableModels = Object.values(MODEL_TYPES).filter(model => model.enabled);
+	const availableModels = Object.values(MODEL_TYPES).filter((model) => model.enabled);
 
 	function openConfigModal(modelType: ModelType) {
 		selectedModelType = modelType;
@@ -25,7 +25,7 @@
 	}
 
 	function quickAddACT() {
-		openConfigModal('act');
+		openConfigModal("act");
 	}
 
 	function formatModelType(modelType: string): string {
@@ -87,10 +87,12 @@
 		{/snippet}
 	</DropdownMenu.Trigger>
 
-	<DropdownMenu.Content class="w-64 bg-slate-100 border-slate-300 dark:bg-slate-900 dark:border-slate-600">
+	<DropdownMenu.Content
+		class="w-64 border-slate-300 bg-slate-100 dark:border-slate-600 dark:bg-slate-900"
+	>
 		{#each availableModels as model}
 			<DropdownMenu.Item
-				class="flex items-center gap-3 p-3 cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/30"
+				class="flex cursor-pointer items-center gap-3 p-3 hover:bg-purple-100 dark:hover:bg-purple-900/30"
 				onclick={() => openConfigModal(model.id)}
 			>
 				<span class="{model.icon} size-5 text-purple-500 dark:text-purple-400"></span>
@@ -108,8 +110,8 @@
 </DropdownMenu.Root>
 
 <!-- Configuration Modal -->
-<AIModelConfigurationModal 
-	bind:open={isConfigModalOpen} 
+<AIModelConfigurationModal
+	bind:open={isConfigModalOpen}
 	{workspaceId}
 	initialModelType={selectedModelType}
 />

src/lib/components/interface/overlay/AddRobotButton.svelte

@@ -45,7 +45,7 @@
 	}
 
 	async function quickAddDefault() {
-		const defaultRobotType = robotTypes.find(type => robotUrdfConfigMap[type].isDefault);
+		const defaultRobotType = robotTypes.find((type) => robotUrdfConfigMap[type].isDefault);
 		if (defaultRobotType) {
 			await addRobot(defaultRobotType);
 		} else {
@@ -53,7 +53,6 @@
 			await addRobot(robotTypes[0]);
 		}
 	}
-
 </script>
 
 <!-- Main Add Button (Default Robot) -->
@@ -127,7 +126,9 @@
 						<span class="font-medium text-white transition-colors duration-200"
 							>{urdfConfig.displayName || robotType.replace(/-/g, " ").toUpperCase()}</span
 						>
-						<span class="text-xs text-emerald-100 transition-colors duration-200 dark:text-emerald-200">
+						<span
+							class="text-xs text-emerald-100 transition-colors duration-200 dark:text-emerald-200"
+						>
 							{urdfConfig.description || "Robot"}
 						</span>
 					</div>

src/lib/components/interface/overlay/AddSensorButton.svelte

@@ -21,34 +21,34 @@
 	}
 
 	const sensorConfigs: SensorConfig[] = [
-		{ 
-			id: 'camera', 
-			label: 'Camera', 
-			description: 'Video Camera Sensor',
-			icon: 'icon-[mdi--camera]', 
+		{
+			id: "camera",
+			label: "Camera",
+			description: "Video Camera Sensor",
+			icon: "icon-[mdi--camera]",
 			enabled: true,
 			isDefault: true
 		},
-		{ 
-			id: 'depth-camera', 
-			label: 'Depth Camera', 
-			description: 'Depth Camera Sensor',
-			icon: 'icon-[mdi--camera]', 
-			enabled: false 
+		{
+			id: "depth-camera",
+			label: "Depth Camera",
+			description: "Depth Camera Sensor",
+			icon: "icon-[mdi--camera]",
+			enabled: false
 		},
-		{ 
-			id: 'lidar', 
-			label: 'Lidar', 
-			description: 'Distance Sensor',
-			icon: 'icon-[mdi--radar]', 
-			enabled: false 
+		{
+			id: "lidar",
+			label: "Lidar",
+			description: "Distance Sensor",
+			icon: "icon-[mdi--radar]",
+			enabled: false
 		},
-		{ 
-			id: 'imu', 
-			label: 'IMU', 
-			description: 'Motion Sensor',
-			icon: 'icon-[mdi--radar]', 
-			enabled: false 
+		{
+			id: "imu",
+			label: "IMU",
+			description: "Motion Sensor",
+			icon: "icon-[mdi--radar]",
+			enabled: false
 		}
 	];
 
@@ -58,7 +58,7 @@
 			if (!sensorType) return;
 
 			const sensorId = `${sensorType}_${Date.now()}`;
-			
+
 			if (sensorType === "camera") {
 				// Create video camera
 				const video = videoManager.createVideo(sensorId);
@@ -67,7 +67,7 @@
 				});
 			} else {
 				// Placeholder for other sensor types
-				const config = sensorConfigs.find(c => c.id === sensorType);
+				const config = sensorConfigs.find((c) => c.id === sensorType);
 				toast.success("Sensor Added", {
 					description: `${config?.label || sensorType} sensor ${sensorId.slice(0, 12)}... created successfully.`
 				});
@@ -105,7 +105,7 @@
 
 <!-- Dropdown Menu Button -->
 <DropdownMenu.Root bind:open>
-	<DropdownMenu.Trigger >
+	<DropdownMenu.Trigger>
 		{#snippet child({ props })}
 			<Button
 				{...props}
@@ -155,8 +155,7 @@
 						]}
 					></span>
 					<div class="flex flex-1 flex-col">
-						<span class="font-medium text-white transition-colors duration-200"
-							>{sensor.label}</span
+						<span class="font-medium text-white transition-colors duration-200">{sensor.label}</span
 						>
 						<span class="text-xs text-blue-100 transition-colors duration-200 dark:text-blue-200">
 							{sensor.description}
@@ -174,4 +173,4 @@
 			{/each}
 		</DropdownMenu.Group>
 	</DropdownMenu.Content>
-</DropdownMenu.Root> 
+</DropdownMenu.Root>

src/lib/components/interface/overlay/Overlay.svelte

@@ -27,32 +27,34 @@
 
 <div class="select-none">
 	<!-- Responsive Button Bar Container -->
-	<div class="fixed top-2 left-2 right-2 z-50 flex flex-wrap items-center justify-between gap-1 select-none md:top-4 md:left-4 md:right-4 md:gap-2">
+	<div
+		class="fixed top-2 right-2 left-2 z-50 flex flex-wrap items-center justify-between gap-1 select-none md:top-4 md:right-4 md:left-4 md:gap-2"
+	>
 		<!-- Left Group: Logo + Add Buttons -->
-		<div class="flex items-center gap-1 flex-wrap md:gap-2">
+		<div class="flex flex-wrap items-center gap-1 md:gap-2">
 			<!-- Logo/Favicon -->
 			<div class="flex items-center justify-center">
 				<img
 					src="/favicon_1024.png"
 					alt="Logo"
 					draggable="false"
-					class="h-8 w-8 invert-0 filter dark:invert md:h-10 md:w-10"
+					class="h-8 w-8 invert-0 filter md:h-10 md:w-10 dark:invert"
 				/>
 			</div>
-			
+
 			<!-- Add Robot Button Group -->
 			<div class="flex items-center justify-center overflow-hidden rounded-lg">
 				<AddRobotButton bind:open={addRobotDropdownMenuOpen} />
 			</div>
 
 			<!-- Add Sensor Button Group - Hidden on very small screens -->
-			<div class="hidden min-[480px]:flex items-center justify-center overflow-hidden rounded-lg">
+			<div class="hidden items-center justify-center overflow-hidden rounded-lg min-[480px]:flex">
 				<AddSensorButton bind:open={addSensorDropdownMenuOpen} />
 			</div>
 
 			<!-- Add AI Button Group - Hidden on small screens -->
-			<div class="hidden min-[560px]:flex items-center justify-center overflow-hidden rounded-lg">
-				<AddAIButton bind:open={addAIDropdownMenuOpen} workspaceId={workspaceId} />
+			<div class="hidden items-center justify-center overflow-hidden rounded-lg min-[560px]:flex">
+				<AddAIButton bind:open={addAIDropdownMenuOpen} {workspaceId} />
 			</div>
 		</div>
 

src/lib/components/interface/overlay/SettingsSheet.svelte

@@ -130,7 +130,8 @@
 									>Inference Server URL</Label
 								>
 								<p class="text-xs text-slate-600 dark:text-slate-400">
-									URL for the remote AI inference server to run policies using remote compute resources
+									URL for the remote AI inference server to run policies using remote compute
+									resources
 								</p>
 							</div>
 							<div class="flex gap-2">

src/lib/configs/robotUrdfConfig.ts

@@ -13,7 +13,7 @@ export const robotUrdfConfigMap: { [key: string]: RobotUrdfConfig } = {
 			Elbow: 3,
 			Wrist_Pitch: 4,
 			Wrist_Roll: 5,
-			Jaw: 6,
+			Jaw: 6
 			// camera_mount: 7
 		},
 		// Rest position - robot in neutral/calibration pose (all joints at 0 degrees)
@@ -23,7 +23,7 @@ export const robotUrdfConfigMap: { [key: string]: RobotUrdfConfig } = {
 			Elbow: 0,
 			Wrist_Pitch: 0,
 			Wrist_Roll: 0,
-			Jaw: 0,
+			Jaw: 0
 			// camera_mount: 0
 		},
 		compoundMovements: [

src/lib/elements/compute/RemoteCompute.svelte.ts

@@ -1,147 +1,153 @@
-import type { Positionable, Position3D } from '$lib/types/positionable.js';
-import type { AISessionConfig, AISessionResponse, ModelType } from './RemoteComputeManager.svelte';
+import type { Positionable, Position3D } from "$lib/types/positionable.js";
+import type { AISessionConfig, AISessionResponse, ModelType } from "./RemoteComputeManager.svelte";
 
-export type ComputeStatus = 'disconnected' | 'ready' | 'running' | 'stopped' | 'initializing';
+export type ComputeStatus = "disconnected" | "ready" | "running" | "stopped" | "initializing";
 
 export class RemoteCompute implements Positionable {
-  readonly id: string;
-  
-  // Reactive state using Svelte 5 runes
-  position = $state<Position3D>({ x: 0, y: 0, z: 0 });
-  name = $state<string>('');
-  status = $state<ComputeStatus>('disconnected');
-  modelType = $state<ModelType>('act'); // Default to ACT model
-  
-  // Session data
-  sessionId = $state<string | null>(null);
-  sessionConfig = $state<AISessionConfig | null>(null);
-  sessionData = $state<AISessionResponse | null>(null);
-  
-  // Derived reactive values
-  hasSession = $derived(this.sessionId !== null);
-  isRunning = $derived(this.status === 'running');
-  canStart = $derived(this.status === 'ready' || this.status === 'stopped');
-  canStop = $derived(this.status === 'running');
-
-  constructor(id: string, name?: string) {
-    this.id = id;
-    this.name = name || `Compute ${id}`;
-  }
-
-  /**
-   * Get input connections (camera and joint inputs)
-   */
-  get inputConnections() {
-    if (!this.sessionData) return null;
-    
-    return {
-      cameras: this.sessionData.camera_room_ids,
-      jointInput: this.sessionData.joint_input_room_id,
-      workspaceId: this.sessionData.workspace_id
-    };
-  }
-
-  /**
-   * Get output connections (joint output)
-   */
-  get outputConnections() {
-    if (!this.sessionData) return null;
-    
-    return {
-      jointOutput: this.sessionData.joint_output_room_id,
-      workspaceId: this.sessionData.workspace_id
-    };
-  }
-
-  /**
-   * Get display information for UI
-   */
-  get displayInfo() {
-    return {
-      id: this.id,
-      name: this.name,
-      status: this.status,
-      sessionId: this.sessionId,
-      policyPath: this.sessionConfig?.policyPath,
-      cameraNames: this.sessionConfig?.cameraNames || [],
-      hasSession: this.hasSession,
-      isRunning: this.isRunning,
-      canStart: this.canStart,
-      canStop: this.canStop
-    };
-  }
-
-  /**
-   * Get status for billboard display
-   */
-  get statusInfo() {
-    const status = this.status;
-    let statusText = '';
-    let statusColor = '';
-    
-    switch (status) {
-      case 'disconnected':
-        statusText = 'Disconnected';
-        statusColor = 'rgb(107, 114, 128)'; // gray
-        break;
-      case 'ready':
-        statusText = 'Ready';
-        statusColor = 'rgb(245, 158, 11)'; // yellow
-        break;
-      case 'running':
-        statusText = 'Running';
-        statusColor = 'rgb(34, 197, 94)'; // green
-        break;
-      case 'stopped':
-        statusText = 'Stopped';
-        statusColor = 'rgb(239, 68, 68)'; // red
-        break;
-      case 'initializing':
-        statusText = 'Initializing';
-        statusColor = 'rgb(59, 130, 246)'; // blue
-        break;
-    }
-
-    return {
-      status,
-      statusText,
-      statusColor,
-      emoji: this.getStatusEmoji()
-    };
-  }
-
-  private getStatusEmoji(): string {
-    switch (this.status) {
-      case 'disconnected': return '⚪';
-      case 'ready': return '🟡';
-      case 'running': return '🟢';
-      case 'stopped': return '🔴';
-      case 'initializing': return '🟠';
-      default: return '⚪';
-    }
-  }
-
-  /**
-   * Reset session data
-   */
-  resetSession(): void {
-    this.sessionId = null;
-    this.sessionConfig = null;
-    this.sessionData = null;
-    this.status = 'disconnected';
-  }
-
-  /**
-   * Update position
-   */
-  updatePosition(newPosition: Position3D): void {
-    this.position = { ...newPosition };
-  }
-
-  /**
-   * Update name
-   */
-  updateName(newName: string): void {
-    this.name = newName;
-  }
-} 
+	readonly id: string;
+
+	// Reactive state using Svelte 5 runes
+	position = $state<Position3D>({ x: 0, y: 0, z: 0 });
+	name = $state<string>("");
+	status = $state<ComputeStatus>("disconnected");
+	modelType = $state<ModelType>("act"); // Default to ACT model
+
+	// Session data
+	sessionId = $state<string | null>(null);
+	sessionConfig = $state<AISessionConfig | null>(null);
+	sessionData = $state<AISessionResponse | null>(null);
+
+	// Derived reactive values
+	hasSession = $derived(this.sessionId !== null);
+	isRunning = $derived(this.status === "running");
+	canStart = $derived(this.status === "ready" || this.status === "stopped");
+	canStop = $derived(this.status === "running");
+
+	constructor(id: string, name?: string) {
+		this.id = id;
+		this.name = name || `Compute ${id}`;
+	}
+
+	/**
+	 * Get input connections (camera and joint inputs)
+	 */
+	get inputConnections() {
+		if (!this.sessionData) return null;
+
+		return {
+			cameras: this.sessionData.camera_room_ids,
+			jointInput: this.sessionData.joint_input_room_id,
+			workspaceId: this.sessionData.workspace_id
+		};
+	}
+
+	/**
+	 * Get output connections (joint output)
+	 */
+	get outputConnections() {
+		if (!this.sessionData) return null;
+
+		return {
+			jointOutput: this.sessionData.joint_output_room_id,
+			workspaceId: this.sessionData.workspace_id
+		};
+	}
+
+	/**
+	 * Get display information for UI
+	 */
+	get displayInfo() {
+		return {
+			id: this.id,
+			name: this.name,
+			status: this.status,
+			sessionId: this.sessionId,
+			policyPath: this.sessionConfig?.policyPath,
+			cameraNames: this.sessionConfig?.cameraNames || [],
+			hasSession: this.hasSession,
+			isRunning: this.isRunning,
+			canStart: this.canStart,
+			canStop: this.canStop
+		};
+	}
+
+	/**
+	 * Get status for billboard display
+	 */
+	get statusInfo() {
+		const status = this.status;
+		let statusText = "";
+		let statusColor = "";
+
+		switch (status) {
+			case "disconnected":
+				statusText = "Disconnected";
+				statusColor = "rgb(107, 114, 128)"; // gray
+				break;
+			case "ready":
+				statusText = "Ready";
+				statusColor = "rgb(245, 158, 11)"; // yellow
+				break;
+			case "running":
+				statusText = "Running";
+				statusColor = "rgb(34, 197, 94)"; // green
+				break;
+			case "stopped":
+				statusText = "Stopped";
+				statusColor = "rgb(239, 68, 68)"; // red
+				break;
+			case "initializing":
+				statusText = "Initializing";
+				statusColor = "rgb(59, 130, 246)"; // blue
+				break;
+		}
+
+		return {
+			status,
+			statusText,
+			statusColor,
+			emoji: this.getStatusEmoji()
+		};
+	}
+
+	private getStatusEmoji(): string {
+		switch (this.status) {
+			case "disconnected":
+				return "⚪";
+			case "ready":
+				return "🟡";
+			case "running":
+				return "🟢";
+			case "stopped":
+				return "🔴";
+			case "initializing":
+				return "🟠";
+			default:
+				return "⚪";
+		}
+	}
+
+	/**
+	 * Reset session data
+	 */
+	resetSession(): void {
+		this.sessionId = null;
+		this.sessionConfig = null;
+		this.sessionData = null;
+		this.status = "disconnected";
+	}
+
+	/**
+	 * Update position
+	 */
+	updatePosition(newPosition: Position3D): void {
+		this.position = { ...newPosition };
+	}
+
+	/**
+	 * Update name
+	 */
+	updateName(newName: string): void {
+		this.name = newName;
+	}
+}

src/lib/elements/compute/RemoteComputeManager.svelte.ts

@@ -1,497 +1,506 @@
-import { RemoteCompute } from './RemoteCompute.svelte';
-import type { Position3D } from '$lib/types/positionable.js';
-import { generateName } from '$lib/utils/generateName.js';
-import { positionManager } from '$lib/utils/positionManager.js';
-import { 
-  rootGet,
-  healthCheckHealthGet,
-  listSessionsSessionsGet,
-  createSessionSessionsPost,
-  startInferenceSessionsSessionIdStartPost,
-  stopInferenceSessionsSessionIdStopPost,
-  deleteSessionSessionsSessionIdDelete
-} from '@robothub/inference-server-client';
-import { settings } from '$lib/runes/settings.svelte';
-import type { 
-  CreateSessionRequest, 
-  CreateSessionResponse
-} from '@robothub/inference-server-client';
-
-export type ModelType = 'act' | 'diffusion' | 'smolvla' | 'pi0' | 'groot' | 'custom';
+import { RemoteCompute } from "./RemoteCompute.svelte";
+import type { Position3D } from "$lib/types/positionable.js";
+import { generateName } from "$lib/utils/generateName.js";
+import { positionManager } from "$lib/utils/positionManager.js";
+import {
+	rootGet,
+	healthCheckHealthGet,
+	listSessionsSessionsGet,
+	createSessionSessionsPost,
+	startInferenceSessionsSessionIdStartPost,
+	stopInferenceSessionsSessionIdStopPost,
+	deleteSessionSessionsSessionIdDelete
+} from "@robothub/inference-server-client";
+import { settings } from "$lib/runes/settings.svelte";
+import type {
+	CreateSessionRequest,
+	CreateSessionResponse
+} from "@robothub/inference-server-client";
+
+export type ModelType = "act" | "diffusion" | "smolvla" | "pi0" | "groot" | "custom";
 
 export interface ModelTypeConfig {
-  id: ModelType;
-  label: string;
-  icon: string;
-  description: string;
-  defaultPolicyPath: string;
-  defaultCameraNames: string[];
-  requiresLanguageInstruction?: boolean;
-  enabled: boolean;
+	id: ModelType;
+	label: string;
+	icon: string;
+	description: string;
+	defaultPolicyPath: string;
+	defaultCameraNames: string[];
+	requiresLanguageInstruction?: boolean;
+	enabled: boolean;
 }
 
 export const MODEL_TYPES: Record<ModelType, ModelTypeConfig> = {
-  act: {
-    id: 'act',
-    label: 'ACT Model',
-    icon: 'icon-[mdi--brain]',
-    description: 'Action Chunking with Transformers',
-    defaultPolicyPath: 'LaetusH/act_so101_beyond',
-    defaultCameraNames: ['front'],
-    enabled: true
-  },
-  diffusion: {
-    id: 'diffusion',
-    label: 'Diffusion Policy',
-    icon: 'icon-[mdi--creation]',
-    description: 'Diffusion-based robot control',
-    defaultPolicyPath: 'diffusion_policy/default',
-    defaultCameraNames: ['front', 'wrist'],
-    enabled: true
-  },
-  smolvla: {
-    id: 'smolvla',
-    label: 'SmolVLA',
-    icon: 'icon-[mdi--eye-outline]',
-    description: 'Small Vision-Language-Action model',
-    defaultPolicyPath: 'smolvla/latest',
-    defaultCameraNames: ['front'],
-    requiresLanguageInstruction: true,
-    enabled: true
-  },
-  pi0: {
-    id: 'pi0',
-    label: 'Pi0',
-    icon: 'icon-[mdi--pi]',
-    description: 'Lightweight robotics model',
-    defaultPolicyPath: 'pi0/base',
-    defaultCameraNames: ['front'],
-    enabled: true
-  },
-  groot: {
-    id: 'groot',
-    label: 'NVIDIA Groot',
-    icon: 'icon-[mdi--robot-outline]',
-    description: 'Humanoid robotics foundation model',
-    defaultPolicyPath: 'nvidia/groot',
-    defaultCameraNames: ['front', 'left', 'right'],
-    requiresLanguageInstruction: true,
-    enabled: false // Not yet implemented
-  },
-  custom: {
-    id: 'custom',
-    label: 'Custom Model',
-    icon: 'icon-[mdi--cog]',
-    description: 'Custom model configuration',
-    defaultPolicyPath: '',
-    defaultCameraNames: ['front'],
-    enabled: true
-  }
+	act: {
+		id: "act",
+		label: "ACT Model",
+		icon: "icon-[mdi--brain]",
+		description: "Action Chunking with Transformers",
+		defaultPolicyPath: "LaetusH/act_so101_beyond",
+		defaultCameraNames: ["front"],
+		enabled: true
+	},
+	diffusion: {
+		id: "diffusion",
+		label: "Diffusion Policy",
+		icon: "icon-[mdi--creation]",
+		description: "Diffusion-based robot control",
+		defaultPolicyPath: "diffusion_policy/default",
+		defaultCameraNames: ["front", "wrist"],
+		enabled: true
+	},
+	smolvla: {
+		id: "smolvla",
+		label: "SmolVLA",
+		icon: "icon-[mdi--eye-outline]",
+		description: "Small Vision-Language-Action model",
+		defaultPolicyPath: "smolvla/latest",
+		defaultCameraNames: ["front"],
+		requiresLanguageInstruction: true,
+		enabled: true
+	},
+	pi0: {
+		id: "pi0",
+		label: "Pi0",
+		icon: "icon-[mdi--pi]",
+		description: "Lightweight robotics model",
+		defaultPolicyPath: "pi0/base",
+		defaultCameraNames: ["front"],
+		enabled: true
+	},
+	groot: {
+		id: "groot",
+		label: "NVIDIA Groot",
+		icon: "icon-[mdi--robot-outline]",
+		description: "Humanoid robotics foundation model",
+		defaultPolicyPath: "nvidia/groot",
+		defaultCameraNames: ["front", "left", "right"],
+		requiresLanguageInstruction: true,
+		enabled: false // Not yet implemented
+	},
+	custom: {
+		id: "custom",
+		label: "Custom Model",
+		icon: "icon-[mdi--cog]",
+		description: "Custom model configuration",
+		defaultPolicyPath: "",
+		defaultCameraNames: ["front"],
+		enabled: true
+	}
 };
 
 export interface AISessionConfig {
-  sessionId: string;
-  modelType: ModelType;
-  policyPath: string;
-  cameraNames: string[];
-  transportServerUrl: string;
-  workspaceId?: string;
-  languageInstruction?: string;
+	sessionId: string;
+	modelType: ModelType;
+	policyPath: string;
+	cameraNames: string[];
+	transportServerUrl: string;
+	workspaceId?: string;
+	languageInstruction?: string;
 }
 
 export interface AISessionResponse {
-  workspace_id: string;
-  camera_room_ids: Record<string, string>;
-  joint_input_room_id: string;
-  joint_output_room_id: string;
+	workspace_id: string;
+	camera_room_ids: Record<string, string>;
+	joint_input_room_id: string;
+	joint_output_room_id: string;
 }
 
 export interface AISessionStatus {
-  session_id: string;
-  status: 'initializing' | 'ready' | 'running' | 'stopped';
-  policy_path: string;
-  camera_names: string[];
-  workspace_id: string;
-  rooms: {
-    workspace_id: string;
-    camera_room_ids: Record<string, string>;
-    joint_input_room_id: string;
-    joint_output_room_id: string;
-  };
-  stats: {
-    inference_count: number;
-    commands_sent: number;
-    joints_received: number;
-    images_received: Record<string, number>;
-    errors: number;
-    actions_in_queue: number;
-  };
-  inference_stats?: {
-    inference_count: number;
-    total_inference_time: number;
-    average_inference_time: number;
-    average_fps: number;
-    is_loaded: boolean;
-    device: string;
-  };
-  error_message?: string;
+	session_id: string;
+	status: "initializing" | "ready" | "running" | "stopped";
+	policy_path: string;
+	camera_names: string[];
+	workspace_id: string;
+	rooms: {
+		workspace_id: string;
+		camera_room_ids: Record<string, string>;
+		joint_input_room_id: string;
+		joint_output_room_id: string;
+	};
+	stats: {
+		inference_count: number;
+		commands_sent: number;
+		joints_received: number;
+		images_received: Record<string, number>;
+		errors: number;
+		actions_in_queue: number;
+	};
+	inference_stats?: {
+		inference_count: number;
+		total_inference_time: number;
+		average_inference_time: number;
+		average_fps: number;
+		is_loaded: boolean;
+		device: string;
+	};
+	error_message?: string;
 }
 
 export class RemoteComputeManager {
-  private _computes = $state<RemoteCompute[]>([]);
-
-  constructor() {
-    // No client initialization needed anymore
-  }
-
-  // Reactive getters
-  get computes(): RemoteCompute[] {
-    return this._computes;
-  }
-
-  get computeCount(): number {
-    return this._computes.length;
-  }
-
-  get runningComputes(): RemoteCompute[] {
-    return this._computes.filter(compute => compute.status === 'running');
-  }
-
-  /**
-   * Get available model types
-   */
-  get availableModelTypes(): ModelTypeConfig[] {
-    return Object.values(MODEL_TYPES).filter(model => model.enabled);
-  }
-
-  /**
-   * Get model type configuration
-   */
-  getModelTypeConfig(modelType: ModelType): ModelTypeConfig | undefined {
-    return MODEL_TYPES[modelType];
-  }
-
-  /**
-   * Create a new AI compute instance with full configuration
-   */
-  async createComputeWithSession(
-    config: AISessionConfig,
-    computeId?: string,
-    computeName?: string,
-    position?: Position3D
-  ): Promise<{ success: boolean; error?: string; compute?: RemoteCompute }> {
-    const finalComputeId = computeId || generateName();
-    
-    // Check if compute already exists
-    if (this._computes.find(c => c.id === finalComputeId)) {
-      return { success: false, error: `Compute with ID ${finalComputeId} already exists` };
-    }
-
-    try {
-      // Create compute instance
-      const compute = new RemoteCompute(finalComputeId, computeName);
-      compute.modelType = config.modelType;
-
-      // Set position (from position manager if not provided)
-      compute.position = position || positionManager.getNextPosition();
-
-      // Add to reactive array
-      this._computes.push(compute);
-
-      // Create the session immediately
-      const sessionResult = await this.createSession(compute.id, config);
-      if (!sessionResult.success) {
-        // Remove compute if session creation failed
-        await this.removeCompute(compute.id);
-        return { success: false, error: sessionResult.error };
-      }
-
-      console.log(`Created compute ${finalComputeId} with ${config.modelType} model at position (${compute.position.x.toFixed(1)}, ${compute.position.y.toFixed(1)}, ${compute.position.z.toFixed(1)}). Total computes: ${this._computes.length}`);
-
-      return { success: true, compute };
-    } catch (error) {
-      console.error('Failed to create compute with session:', error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Create a new AI compute instance (legacy method)
-   */
-  createCompute(id?: string, name?: string, position?: Position3D): RemoteCompute {
-    const computeId = id || generateName();
-    
-    // Check if compute already exists
-    if (this._computes.find(c => c.id === computeId)) {
-      throw new Error(`Compute with ID ${computeId} already exists`);
-    }
-
-    // Create compute instance
-    const compute = new RemoteCompute(computeId, name);
-
-    // Set position (from position manager if not provided)
-    compute.position = position || positionManager.getNextPosition();
-
-    // Add to reactive array
-    this._computes.push(compute);
-
-    console.log(`Created compute ${computeId} at position (${compute.position.x.toFixed(1)}, ${compute.position.y.toFixed(1)}, ${compute.position.z.toFixed(1)}). Total computes: ${this._computes.length}`);
-
-    return compute;
-  }
-
-  /**
-   * Get compute by ID
-   */
-  getCompute(id: string): RemoteCompute | undefined {
-    return this._computes.find(c => c.id === id);
-  }
-
-  /**
-   * Remove a compute instance
-   */
-  async removeCompute(id: string): Promise<void> {
-    const computeIndex = this._computes.findIndex(c => c.id === id);
-    if (computeIndex === -1) return;
-
-    const compute = this._computes[computeIndex];
-
-    // Clean up compute resources
-    await this.stopSession(id);
-    await this.deleteSession(id);
-
-    // Remove from reactive array
-    this._computes.splice(computeIndex, 1);
-
-    console.log(`Removed compute ${id}. Remaining computes: ${this._computes.length}`);
-  }
-
-  /**
-   * Create an Inference Session
-   */
-  async createSession(computeId: string, config: AISessionConfig): Promise<{ success: boolean; error?: string; data?: AISessionResponse }> {
-    const compute = this.getCompute(computeId);
-    if (!compute) {
-      return { success: false, error: `Compute ${computeId} not found` };
-    }
-
-    try {
-      const request: CreateSessionRequest = {
-        session_id: config.sessionId,
-        policy_path: config.policyPath,
-        camera_names: config.cameraNames,
-        transport_server_url: config.transportServerUrl,
-        workspace_id: config.workspaceId || undefined,
-        policy_type: config.modelType, // Use model type as policy type
-        language_instruction: config.languageInstruction || undefined,
-      };
-
-      const response = await createSessionSessionsPost({
-        body: request,
-        baseUrl: settings.inferenceServerUrl
-      });
-
-      if (!response.data) {
-        throw new Error('Failed to create session - no data returned');
-      }
-
-      const data: CreateSessionResponse = response.data;
-      
-      // Update compute with session info
-      compute.sessionId = config.sessionId;
-      compute.status = 'ready';
-      compute.sessionConfig = config;
-      compute.sessionData = {
-        workspace_id: data.workspace_id,
-        camera_room_ids: data.camera_room_ids,
-        joint_input_room_id: data.joint_input_room_id,
-        joint_output_room_id: data.joint_output_room_id
-      };
-
-      return { success: true, data: compute.sessionData };
-    } catch (error) {
-      console.error(`Failed to create session for compute ${computeId}:`, error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Start inference for a session
-   */
-  async startSession(computeId: string): Promise<{ success: boolean; error?: string }> {
-    const compute = this.getCompute(computeId);
-    if (!compute || !compute.sessionId) {
-      return { success: false, error: 'No session to start' };
-    }
-
-    try {
-      await startInferenceSessionsSessionIdStartPost({
-        path: { session_id: compute.sessionId },
-        baseUrl: settings.inferenceServerUrl
-      });
-      compute.status = 'running';
-      return { success: true };
-    } catch (error) {
-      console.error(`Failed to start session for compute ${computeId}:`, error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Stop inference for a session
-   */
-  async stopSession(computeId: string): Promise<{ success: boolean; error?: string }> {
-    const compute = this.getCompute(computeId);
-    if (!compute || !compute.sessionId) {
-      return { success: false, error: 'No session to stop' };
-    }
-
-    try {
-      await stopInferenceSessionsSessionIdStopPost({
-        path: { session_id: compute.sessionId },
-        baseUrl: settings.inferenceServerUrl
-      });
-      compute.status = 'stopped';
-      return { success: true };
-    } catch (error) {
-      console.error(`Failed to stop session for compute ${computeId}:`, error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Delete a session
-   */
-  async deleteSession(computeId: string): Promise<{ success: boolean; error?: string }> {
-    const compute = this.getCompute(computeId);
-    if (!compute || !compute.sessionId) {
-      return { success: true }; // Already deleted
-    }
-
-    try {
-      await deleteSessionSessionsSessionIdDelete({
-        path: { session_id: compute.sessionId },
-        baseUrl: settings.inferenceServerUrl
-      });
-
-      // Reset compute session info
-      compute.sessionId = null;
-      compute.status = 'disconnected';
-      compute.sessionConfig = null;
-      compute.sessionData = null;
-
-      return { success: true };
-    } catch (error) {
-      console.error(`Failed to delete session for compute ${computeId}:`, error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Get session status
-   */
-  async getSessionStatus(computeId: string): Promise<{ success: boolean; data?: AISessionStatus; error?: string }> {
-    const compute = this.getCompute(computeId);
-    if (!compute || !compute.sessionId) {
-      return { success: false, error: 'No session found' };
-    }
-
-    try {
-      // Get all sessions and find the one we want
-      const response = await listSessionsSessionsGet({
-        baseUrl: settings.inferenceServerUrl
-      });
-
-      if (!response.data) {
-        throw new Error('Failed to get sessions list');
-      }
-
-      const session = response.data.find(s => s.session_id === compute.sessionId);
-      if (!session) {
-        throw new Error(`Session ${compute.sessionId} not found`);
-      }
-      
-      // Update compute status
-      compute.status = session.status as 'initializing' | 'ready' | 'running' | 'stopped';
-      
-      // Convert to AISessionStatus format
-      const sessionStatus: AISessionStatus = {
-        session_id: session.session_id,
-        status: session.status as 'initializing' | 'ready' | 'running' | 'stopped',
-        policy_path: session.policy_path,
-        camera_names: session.camera_names,
-        workspace_id: session.workspace_id,
-        rooms: session.rooms as any,
-        stats: session.stats as any,
-        inference_stats: session.inference_stats as any,
-        error_message: session.error_message || undefined
-      };
-      
-      return { success: true, data: sessionStatus };
-    } catch (error) {
-      console.error(`Failed to get session status for compute ${computeId}:`, error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Check AI server health
-   */
-  async checkServerHealth(): Promise<{ success: boolean; data?: any; error?: string }> {
-    try {
-      const healthResponse = await rootGet({
-        baseUrl: settings.inferenceServerUrl
-      });
-      
-      if (!healthResponse.data) {
-        return { success: false, error: 'Server is not healthy' };
-      }
-      
-      // Get detailed health info
-      const detailedHealthResponse = await healthCheckHealthGet({
-        baseUrl: settings.inferenceServerUrl
-      });
-      
-      return { success: true, data: detailedHealthResponse.data };
-    } catch (error) {
-      console.error('Failed to check AI server health:', error);
-      return { 
-        success: false, 
-        error: error instanceof Error ? error.message : String(error) 
-      };
-    }
-  }
-
-  /**
-   * Clean up all computes
-   */
-  async destroy(): Promise<void> {
-    const cleanupPromises = this._computes.map(async (compute) => {
-      await this.stopSession(compute.id);
-      await this.deleteSession(compute.id);
-    });
-    await Promise.allSettled(cleanupPromises);
-    this._computes.length = 0;
-  }
+	private _computes = $state<RemoteCompute[]>([]);
+
+	constructor() {
+		// No client initialization needed anymore
+	}
+
+	// Reactive getters
+	get computes(): RemoteCompute[] {
+		return this._computes;
+	}
+
+	get computeCount(): number {
+		return this._computes.length;
+	}
+
+	get runningComputes(): RemoteCompute[] {
+		return this._computes.filter((compute) => compute.status === "running");
+	}
+
+	/**
+	 * Get available model types
+	 */
+	get availableModelTypes(): ModelTypeConfig[] {
+		return Object.values(MODEL_TYPES).filter((model) => model.enabled);
+	}
+
+	/**
+	 * Get model type configuration
+	 */
+	getModelTypeConfig(modelType: ModelType): ModelTypeConfig | undefined {
+		return MODEL_TYPES[modelType];
+	}
+
+	/**
+	 * Create a new AI compute instance with full configuration
+	 */
+	async createComputeWithSession(
+		config: AISessionConfig,
+		computeId?: string,
+		computeName?: string,
+		position?: Position3D
+	): Promise<{ success: boolean; error?: string; compute?: RemoteCompute }> {
+		const finalComputeId = computeId || generateName();
+
+		// Check if compute already exists
+		if (this._computes.find((c) => c.id === finalComputeId)) {
+			return { success: false, error: `Compute with ID ${finalComputeId} already exists` };
+		}
+
+		try {
+			// Create compute instance
+			const compute = new RemoteCompute(finalComputeId, computeName);
+			compute.modelType = config.modelType;
+
+			// Set position (from position manager if not provided)
+			compute.position = position || positionManager.getNextPosition();
+
+			// Add to reactive array
+			this._computes.push(compute);
+
+			// Create the session immediately
+			const sessionResult = await this.createSession(compute.id, config);
+			if (!sessionResult.success) {
+				// Remove compute if session creation failed
+				await this.removeCompute(compute.id);
+				return { success: false, error: sessionResult.error };
+			}
+
+			console.log(
+				`Created compute ${finalComputeId} with ${config.modelType} model at position (${compute.position.x.toFixed(1)}, ${compute.position.y.toFixed(1)}, ${compute.position.z.toFixed(1)}). Total computes: ${this._computes.length}`
+			);
+
+			return { success: true, compute };
+		} catch (error) {
+			console.error("Failed to create compute with session:", error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Create a new AI compute instance (legacy method)
+	 */
+	createCompute(id?: string, name?: string, position?: Position3D): RemoteCompute {
+		const computeId = id || generateName();
+
+		// Check if compute already exists
+		if (this._computes.find((c) => c.id === computeId)) {
+			throw new Error(`Compute with ID ${computeId} already exists`);
+		}
+
+		// Create compute instance
+		const compute = new RemoteCompute(computeId, name);
+
+		// Set position (from position manager if not provided)
+		compute.position = position || positionManager.getNextPosition();
+
+		// Add to reactive array
+		this._computes.push(compute);
+
+		console.log(
+			`Created compute ${computeId} at position (${compute.position.x.toFixed(1)}, ${compute.position.y.toFixed(1)}, ${compute.position.z.toFixed(1)}). Total computes: ${this._computes.length}`
+		);
+
+		return compute;
+	}
+
+	/**
+	 * Get compute by ID
+	 */
+	getCompute(id: string): RemoteCompute | undefined {
+		return this._computes.find((c) => c.id === id);
+	}
+
+	/**
+	 * Remove a compute instance
+	 */
+	async removeCompute(id: string): Promise<void> {
+		const computeIndex = this._computes.findIndex((c) => c.id === id);
+		if (computeIndex === -1) return;
+
+		const compute = this._computes[computeIndex];
+
+		// Clean up compute resources
+		await this.stopSession(id);
+		await this.deleteSession(id);
+
+		// Remove from reactive array
+		this._computes.splice(computeIndex, 1);
+
+		console.log(`Removed compute ${id}. Remaining computes: ${this._computes.length}`);
+	}
+
+	/**
+	 * Create an Inference Session
+	 */
+	async createSession(
+		computeId: string,
+		config: AISessionConfig
+	): Promise<{ success: boolean; error?: string; data?: AISessionResponse }> {
+		const compute = this.getCompute(computeId);
+		if (!compute) {
+			return { success: false, error: `Compute ${computeId} not found` };
+		}
+
+		try {
+			const request: CreateSessionRequest = {
+				session_id: config.sessionId,
+				policy_path: config.policyPath,
+				camera_names: config.cameraNames,
+				transport_server_url: config.transportServerUrl,
+				workspace_id: config.workspaceId || undefined,
+				policy_type: config.modelType, // Use model type as policy type
+				language_instruction: config.languageInstruction || undefined
+			};
+
+			const response = await createSessionSessionsPost({
+				body: request,
+				baseUrl: settings.inferenceServerUrl
+			});
+
+			if (!response.data) {
+				throw new Error("Failed to create session - no data returned");
+			}
+
+			const data: CreateSessionResponse = response.data;
+
+			// Update compute with session info
+			compute.sessionId = config.sessionId;
+			compute.status = "ready";
+			compute.sessionConfig = config;
+			compute.sessionData = {
+				workspace_id: data.workspace_id,
+				camera_room_ids: data.camera_room_ids,
+				joint_input_room_id: data.joint_input_room_id,
+				joint_output_room_id: data.joint_output_room_id
+			};
+
+			return { success: true, data: compute.sessionData };
+		} catch (error) {
+			console.error(`Failed to create session for compute ${computeId}:`, error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Start inference for a session
+	 */
+	async startSession(computeId: string): Promise<{ success: boolean; error?: string }> {
+		const compute = this.getCompute(computeId);
+		if (!compute || !compute.sessionId) {
+			return { success: false, error: "No session to start" };
+		}
+
+		try {
+			await startInferenceSessionsSessionIdStartPost({
+				path: { session_id: compute.sessionId },
+				baseUrl: settings.inferenceServerUrl
+			});
+			compute.status = "running";
+			return { success: true };
+		} catch (error) {
+			console.error(`Failed to start session for compute ${computeId}:`, error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Stop inference for a session
+	 */
+	async stopSession(computeId: string): Promise<{ success: boolean; error?: string }> {
+		const compute = this.getCompute(computeId);
+		if (!compute || !compute.sessionId) {
+			return { success: false, error: "No session to stop" };
+		}
+
+		try {
+			await stopInferenceSessionsSessionIdStopPost({
+				path: { session_id: compute.sessionId },
+				baseUrl: settings.inferenceServerUrl
+			});
+			compute.status = "stopped";
+			return { success: true };
+		} catch (error) {
+			console.error(`Failed to stop session for compute ${computeId}:`, error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Delete a session
+	 */
+	async deleteSession(computeId: string): Promise<{ success: boolean; error?: string }> {
+		const compute = this.getCompute(computeId);
+		if (!compute || !compute.sessionId) {
+			return { success: true }; // Already deleted
+		}
+
+		try {
+			await deleteSessionSessionsSessionIdDelete({
+				path: { session_id: compute.sessionId },
+				baseUrl: settings.inferenceServerUrl
+			});
+
+			// Reset compute session info
+			compute.sessionId = null;
+			compute.status = "disconnected";
+			compute.sessionConfig = null;
+			compute.sessionData = null;
+
+			return { success: true };
+		} catch (error) {
+			console.error(`Failed to delete session for compute ${computeId}:`, error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Get session status
+	 */
+	async getSessionStatus(
+		computeId: string
+	): Promise<{ success: boolean; data?: AISessionStatus; error?: string }> {
+		const compute = this.getCompute(computeId);
+		if (!compute || !compute.sessionId) {
+			return { success: false, error: "No session found" };
+		}
+
+		try {
+			// Get all sessions and find the one we want
+			const response = await listSessionsSessionsGet({
+				baseUrl: settings.inferenceServerUrl
+			});
+
+			if (!response.data) {
+				throw new Error("Failed to get sessions list");
+			}
+
+			const session = response.data.find((s) => s.session_id === compute.sessionId);
+			if (!session) {
+				throw new Error(`Session ${compute.sessionId} not found`);
+			}
+
+			// Update compute status
+			compute.status = session.status as "initializing" | "ready" | "running" | "stopped";
+
+			// Convert to AISessionStatus format
+			const sessionStatus: AISessionStatus = {
+				session_id: session.session_id,
+				status: session.status as "initializing" | "ready" | "running" | "stopped",
+				policy_path: session.policy_path,
+				camera_names: session.camera_names,
+				workspace_id: session.workspace_id,
+				rooms: session.rooms as any,
+				stats: session.stats as any,
+				inference_stats: session.inference_stats as any,
+				error_message: session.error_message || undefined
+			};
+
+			return { success: true, data: sessionStatus };
+		} catch (error) {
+			console.error(`Failed to get session status for compute ${computeId}:`, error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Check AI server health
+	 */
+	async checkServerHealth(): Promise<{ success: boolean; data?: any; error?: string }> {
+		try {
+			const healthResponse = await rootGet({
+				baseUrl: settings.inferenceServerUrl
+			});
+
+			if (!healthResponse.data) {
+				return { success: false, error: "Server is not healthy" };
+			}
+
+			// Get detailed health info
+			const detailedHealthResponse = await healthCheckHealthGet({
+				baseUrl: settings.inferenceServerUrl
+			});
+
+			return { success: true, data: detailedHealthResponse.data };
+		} catch (error) {
+			console.error("Failed to check AI server health:", error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : String(error)
+			};
+		}
+	}
+
+	/**
+	 * Clean up all computes
+	 */
+	async destroy(): Promise<void> {
+		const cleanupPromises = this._computes.map(async (compute) => {
+			await this.stopSession(compute.id);
+			await this.deleteSession(compute.id);
+		});
+		await Promise.allSettled(cleanupPromises);
+		this._computes.length = 0;
+	}
 }
 
 // Global compute manager instance
-export const remoteComputeManager = new RemoteComputeManager(); 
+export const remoteComputeManager = new RemoteComputeManager();

src/lib/elements/compute/index.ts

@@ -1,5 +1,11 @@
-export { RemoteComputeManager, remoteComputeManager } from './RemoteComputeManager.svelte.js';
-export { RemoteCompute } from './RemoteCompute.svelte.js';
-export type { AISessionConfig, AISessionResponse, AISessionStatus, ModelType, ModelTypeConfig } from './RemoteComputeManager.svelte.js';
-export { MODEL_TYPES } from './RemoteComputeManager.svelte.js';
-export type { ComputeStatus } from './RemoteCompute.svelte.js'; 
+export { RemoteComputeManager, remoteComputeManager } from "./RemoteComputeManager.svelte.js";
+export { RemoteCompute } from "./RemoteCompute.svelte.js";
+export type {
+	AISessionConfig,
+	AISessionResponse,
+	AISessionStatus,
+	ModelType,
+	ModelTypeConfig
+} from "./RemoteComputeManager.svelte.js";
+export { MODEL_TYPES } from "./RemoteComputeManager.svelte.js";
+export type { ComputeStatus } from "./RemoteCompute.svelte.js";

src/lib/elements/robot/Robot.svelte.ts

@@ -1,496 +1,537 @@
-import type { 
-  JointState, 
-  RobotCommand, 
-  ConnectionStatus, 
-  USBDriverConfig, 
-  RemoteDriverConfig,
-  Consumer,
-  Producer
-} from './models.js';
-import type { Positionable, Position3D } from '$lib/types/positionable.js';
-import { USBConsumer } from './drivers/USBConsumer.js';
-import { USBProducer } from './drivers/USBProducer.js';
-import { RemoteConsumer } from './drivers/RemoteConsumer.js';
-import { RemoteProducer } from './drivers/RemoteProducer.js';
-import { USBServoDriver } from './drivers/USBServoDriver.js';
-
-import { ROBOT_CONFIG } from './config.js';
-import type IUrdfRobot from '@/components/3d/elements/robot/URDF/interfaces/IUrdfRobot.js';
+import type {
+	JointState,
+	RobotCommand,
+	ConnectionStatus,
+	USBDriverConfig,
+	RemoteDriverConfig,
+	Consumer,
+	Producer
+} from "./models.js";
+import type { Positionable, Position3D } from "$lib/types/positionable.js";
+import { USBConsumer } from "./drivers/USBConsumer.js";
+import { USBProducer } from "./drivers/USBProducer.js";
+import { RemoteConsumer } from "./drivers/RemoteConsumer.js";
+import { RemoteProducer } from "./drivers/RemoteProducer.js";
+import { USBServoDriver } from "./drivers/USBServoDriver.js";
+
+import { ROBOT_CONFIG } from "./config.js";
+import type IUrdfRobot from "@/components/3d/elements/robot/URDF/interfaces/IUrdfRobot.js";
 
 export class Robot implements Positionable {
-  // Core robot data
-  readonly id: string;
-  private unsubscribeFns: (() => void)[] = [];
-  
-  // Command synchronization to prevent state conflicts
-  private commandMutex = $state(false);
-  private pendingCommands: RobotCommand[] = [];
-  
-  // Command deduplication to prevent rapid duplicate commands
-  private lastCommandTime = 0;
-  private lastCommandValues: Record<string, number> = {};
-  
-  // Memory management
-  private lastCleanup = 0;
-  
-  // Single consumer and multiple producers using Svelte 5 runes - PUBLIC for reactive access
-  consumer = $state<Consumer | null>(null);
-  producers = $state<Producer[]>([]);
-
-  // Reactive state using Svelte 5 runes - PUBLIC for reactive access
-  joints = $state<Record<string, JointState>>({});
-  position = $state<Position3D>({ x: 0, y: 0, z: 0 });
-  isManualControlEnabled = $state(true);
-  connectionStatus = $state<ConnectionStatus>({ isConnected: false });
-  
-  // URDF robot state for 3D visualization - PUBLIC for reactive access
-  urdfRobotState = $state<IUrdfRobot | null>(null);
-  
-  // Derived reactive values for components
-  jointArray = $derived(Object.values(this.joints));
-  hasProducers = $derived(this.producers.length > 0);
-  hasConsumer = $derived(this.consumer !== null && this.consumer.status.isConnected);
-  outputDriverCount = $derived(this.producers.filter(d => d.status.isConnected).length);
-
-  constructor(id: string, initialJoints: JointState[], urdfRobotState?: IUrdfRobot) {
-    this.id = id;
-    
-    // Store URDF robot state if provided
-    this.urdfRobotState = urdfRobotState || null;
-    
-    // Initialize joints with normalized values
-    initialJoints.forEach(joint => {
-      const isGripper = joint.name.toLowerCase() === 'jaw' || joint.name.toLowerCase() === 'gripper';
-      this.joints[joint.name] = { 
-        ...joint,
-        value: isGripper ? 0 : 0 // Start at neutral position
-      };
-    });
-  }
-
-  // Method to set URDF robot state after creation (for async loading)
-  setUrdfRobotState(urdfRobotState: any): void {
-    this.urdfRobotState = urdfRobotState;
-  }
-
-  /**
-   * Update position (implements Positionable interface)
-   */
-  updatePosition(newPosition: Position3D): void {
-    this.position = { ...newPosition };
-  }
-
-  // Get all USB drivers (both consumer and producers) for calibration
-  getUSBDrivers(): USBServoDriver[] {
-    const usbDrivers: USBServoDriver[] = [];
-    
-    // Check consumer
-    if (this.consumer && USBServoDriver.isUSBDriver(this.consumer)) {
-      usbDrivers.push(this.consumer);
-    }
-    
-    // Check producers
-    this.producers.forEach(producer => {
-      if (USBServoDriver.isUSBDriver(producer)) {
-        usbDrivers.push(producer);
-      }
-    });
-    
-    return usbDrivers;
-  }
-
-  // Get uncalibrated USB drivers that need calibration
-  getUncalibratedUSBDrivers(): USBServoDriver[] {
-    return this.getUSBDrivers().filter(driver => driver.needsCalibration);
-  }
-
-  // Check if robot has any USB drivers
-  hasUSBDrivers(): boolean {
-    return this.getUSBDrivers().length > 0;
-  }
-
-  // Check if all USB drivers are calibrated
-  areAllUSBDriversCalibrated(): boolean {
-    const usbDrivers = this.getUSBDrivers();
-    return usbDrivers.length > 0 && usbDrivers.every(driver => driver.isCalibrated);
-  }
-
-  // Joint value updates (normalized) - for manual control
-  updateJoint(name: string, normalizedValue: number): void {
-    if (!this.isManualControlEnabled) {
-      console.warn('Manual control is disabled');
-      return;
-    }
-
-    this.updateJointValue(name, normalizedValue, true);
-  }
-
-  // Internal joint value update (used by both manual control and USB calibration sync)
-  updateJointValue(name: string, normalizedValue: number, sendToProducers: boolean = false): void {
-    const joint = this.joints[name];
-    if (!joint) {
-      console.warn(`Joint ${name} not found`);
-      return;
-    }
-
-    // Clamp to appropriate normalized range based on joint type
-    if (name.toLowerCase() === 'jaw' || name.toLowerCase() === 'gripper') {
-      normalizedValue = Math.max(0, Math.min(100, normalizedValue));
-    } else {
-      normalizedValue = Math.max(-100, Math.min(100, normalizedValue));
-    }
-
-    console.debug(`[Robot ${this.id}] Update joint ${name} to ${normalizedValue} (normalized, sendToProducers: ${sendToProducers})`);
-
-    // Create a new joint object to ensure reactivity
-    this.joints[name] = { ...joint, value: normalizedValue };
-
-    // Send normalized command to producers if requested
-    if (sendToProducers) {
-      this.sendToProducers({ joints: [{ name, value: normalizedValue }] });
-    }
-  }
-
-  executeCommand(command: RobotCommand): void {
-    // Command deduplication - skip if same values sent within dedup window
-    const now = Date.now();
-    if (now - this.lastCommandTime < ROBOT_CONFIG.commands.dedupWindow) {
-      const hasChanges = command.joints.some(joint => 
-        Math.abs((this.lastCommandValues[joint.name] || 0) - joint.value) > 0.5
-      );
-      if (!hasChanges) {
-        console.debug(`[Robot ${this.id}] 🔄 Skipping duplicate command within ${ROBOT_CONFIG.commands.dedupWindow}ms window`);
-        return;
-      }
-    }
-    
-    // Update deduplication tracking
-    this.lastCommandTime = now;
-    command.joints.forEach(joint => {
-      this.lastCommandValues[joint.name] = joint.value;
-    });
-    
-    // Queue command if mutex is locked to prevent race conditions
-    if (this.commandMutex) {
-      if (this.pendingCommands.length >= ROBOT_CONFIG.commands.maxQueueSize) {
-        console.warn(`[Robot ${this.id}] Command queue full, dropping oldest command`);
-        this.pendingCommands.shift();
-      }
-      this.pendingCommands.push(command);
-      return;
-    }
-    
-    this.commandMutex = true;
-    
-    try {
-      console.debug(`[Robot ${this.id}] Executing command with ${command.joints.length} joints:`, 
-        command.joints.map(j => `${j.name}=${j.value}`).join(', '));
-      
-      // Update virtual robot joints with normalized values
-      command.joints.forEach(jointCmd => {
-        const joint = this.joints[jointCmd.name];
-        if (joint) {
-          // Clamp to appropriate normalized range based on joint type
-          let normalizedValue: number;
-          if (jointCmd.name.toLowerCase() === 'jaw' || jointCmd.name.toLowerCase() === 'gripper') {
-            normalizedValue = Math.max(0, Math.min(100, jointCmd.value));
-          } else {
-            normalizedValue = Math.max(-100, Math.min(100, jointCmd.value));
-          }
-          
-          console.debug(`[Robot ${this.id}] Joint ${jointCmd.name}: ${jointCmd.value} -> ${normalizedValue} (normalized)`);
-          
-          // Create a new joint object to ensure reactivity
-          this.joints[jointCmd.name] = { ...joint, value: normalizedValue };
-        } else {
-          console.warn(`[Robot ${this.id}] Joint ${jointCmd.name} not found`);
-        }
-      });
-
-      // Send normalized command to producers
-      this.sendToProducers(command);
-    } finally {
-      this.commandMutex = false;
-      
-      // Periodic cleanup to prevent memory leaks
-      const now = Date.now();
-      if (now - this.lastCleanup > ROBOT_CONFIG.performance.memoryCleanupInterval) {
-        // Clear old command values that haven't been updated recently
-        Object.keys(this.lastCommandValues).forEach(jointName => {
-          if (now - this.lastCommandTime > ROBOT_CONFIG.performance.memoryCleanupInterval) {
-            delete this.lastCommandValues[jointName];
-          }
-        });
-        this.lastCleanup = now;
-      }
-      
-      // Process any pending commands
-      if (this.pendingCommands.length > 0) {
-        const nextCommand = this.pendingCommands.shift();
-        if (nextCommand) {
-          // Use setTimeout to prevent stack overflow with rapid commands
-          setTimeout(() => this.executeCommand(nextCommand), 0);
-        }
-      }
-    }
-  }
-
-  // Consumer management (input driver) - SINGLE consumer only
-  async setConsumer(config: USBDriverConfig | RemoteDriverConfig): Promise<string> {
-    return this._setConsumer(config, false);
-  }
-
-  // Join existing room as consumer (for Inference Session integration)
-  async joinAsConsumer(config: RemoteDriverConfig): Promise<string> {
-    if (config.type !== 'remote') {
-      throw new Error('joinAsConsumer only supports remote drivers');
-    }
-    return this._setConsumer(config, true);
-  }
-
-  private async _setConsumer(config: USBDriverConfig | RemoteDriverConfig, joinExistingRoom: boolean): Promise<string> {
-    // Remove existing consumer if any
-    if (this.consumer) {
-      await this.removeConsumer();
-    }
-
-    const consumer = this.createConsumer(config);
-    
-    // Set up calibration completion callback for USB drivers
-    if (USBServoDriver.isUSBDriver(consumer)) {
-      const calibrationUnsubscribe = consumer.onCalibrationCompleteWithPositions(async (finalPositions: Record<string, number>) => {
-        console.log(`[Robot ${this.id}] Calibration complete, syncing robot to final positions`);
-        consumer.syncRobotPositions(finalPositions, (jointName: string, normalizedValue: number) => {
-          this.updateJointValue(jointName, normalizedValue, false); // Don't send to producers to avoid feedback loop
-        });
-        
-        // Start listening now that calibration is complete
-        if ('startListening' in consumer && consumer.startListening) {
-          try {
-            await consumer.startListening();
-            console.log(`[Robot ${this.id}] Started listening after calibration completion`);
-          } catch (error) {
-            console.error(`[Robot ${this.id}] Failed to start listening after calibration:`, error);
-          }
-        }
-      });
-      this.unsubscribeFns.push(calibrationUnsubscribe);
-    }
-    
-    // Only pass joinExistingRoom to remote drivers
-    if (config.type === 'remote') {
-      await (consumer as RemoteConsumer).connect(joinExistingRoom);
-    } else {
-      await consumer.connect();
-    }
-    
-    // Set up command listening
-    const commandUnsubscribe = consumer.onCommand((command: RobotCommand) => {
-      this.executeCommand(command);
-    });
-    this.unsubscribeFns.push(commandUnsubscribe);
-
-    // Monitor status changes
-    const statusUnsubscribe = consumer.onStatusChange(() => {
-      this.updateStates();
-    });
-    this.unsubscribeFns.push(statusUnsubscribe);
-
-    // Start listening for consumers with this capability (only if calibrated for USB)
-    if ('startListening' in consumer && consumer.startListening) {
-      // For USB consumers, only start listening if calibrated
-      if (USBServoDriver.isUSBDriver(consumer)) {
-        if (consumer.isCalibrated) {
-          await consumer.startListening();
-        }
-        // If not calibrated, startListening will be called after calibration completion
-      } else {
-        // For non-USB consumers, start listening immediately
-        await consumer.startListening();
-      }
-    }
-
-    this.consumer = consumer;
-    this.updateStates();
-    
-    return consumer.id;
-  }
-
-  // Producer management (output drivers) - MULTIPLE allowed
-  async addProducer(config: USBDriverConfig | RemoteDriverConfig): Promise<string> {
-    return this._addProducer(config, false);
-  }
-
-  // Join existing room as producer (for Inference Session integration)
-  async joinAsProducer(config: RemoteDriverConfig): Promise<string> {
-    if (config.type !== 'remote') {
-      throw new Error('joinAsProducer only supports remote drivers');
-    }
-    return this._addProducer(config, true);
-  }
-
-  private async _addProducer(config: USBDriverConfig | RemoteDriverConfig, joinExistingRoom: boolean): Promise<string> {
-    const producer = this.createProducer(config);
-    
-    // Set up calibration completion callback for USB drivers
-    if (USBServoDriver.isUSBDriver(producer)) {
-      const calibrationUnsubscribe = producer.onCalibrationCompleteWithPositions(async (finalPositions: Record<string, number>) => {
-        console.log(`[Robot ${this.id}] Calibration complete, syncing robot to final positions`);
-        producer.syncRobotPositions(finalPositions, (jointName: string, normalizedValue: number) => {
-          this.updateJointValue(jointName, normalizedValue, false); // Don't send to producers to avoid feedback loop
-        });
-        
-        console.log(`[Robot ${this.id}] USB Producer calibration completed and ready for commands`);
-      });
-      this.unsubscribeFns.push(calibrationUnsubscribe);
-    }
-    
-    // Only pass joinExistingRoom to remote drivers
-    if (config.type === 'remote') {
-      await (producer as RemoteProducer).connect(joinExistingRoom);
-    } else {
-      await producer.connect();
-    }
-
-    // Monitor status changes
-    const statusUnsubscribe = producer.onStatusChange(() => {
-      this.updateStates();
-    });
-    this.unsubscribeFns.push(statusUnsubscribe);
-
-    this.producers.push(producer);
-    this.updateStates();
-    
-    return producer.id;
-  }
-
-  async removeConsumer(): Promise<void> {
-    if (this.consumer) {
-      // Stop listening for consumers with this capability
-      if ('stopListening' in this.consumer && this.consumer.stopListening) {
-        await this.consumer.stopListening();
-      }
-      await this.consumer.disconnect();
-      
-      this.consumer = null;
-      this.updateStates();
-    }
-  }
-
-  async removeProducer(driverId: string): Promise<void> {
-    const driverIndex = this.producers.findIndex(d => d.id === driverId);
-    if (driverIndex >= 0) {
-      const driver = this.producers[driverIndex];
-      await driver.disconnect();
-      
-      this.producers.splice(driverIndex, 1);
-      this.updateStates();
-    }
-  }
-
-  // Private methods
-  private createConsumer(config: USBDriverConfig | RemoteDriverConfig): Consumer {
-    switch (config.type) {
-      case 'usb':
-        return new USBConsumer(config);
-      case 'remote':
-        return new RemoteConsumer(config);
-      default:
-        const _exhaustive: never = config;
-        throw new Error(`Unknown consumer type: ${JSON.stringify(_exhaustive)}`);
-    }
-  }
-
-  private createProducer(config: USBDriverConfig | RemoteDriverConfig): Producer {
-    switch (config.type) {
-      case 'usb':
-        return new USBProducer(config);
-      case 'remote':
-        return new RemoteProducer(config);
-      default:
-        const _exhaustive: never = config;
-        throw new Error(`Unknown producer type: ${JSON.stringify(_exhaustive)}`);
-    }
-  }
-
-  // Convert normalized values to URDF radians for 3D visualization
-  convertNormalizedToUrdfRadians(jointName: string, normalizedValue: number): number {
-    const joint = this.joints[jointName];
-    if (!joint?.limits || joint.limits.lower === undefined || joint.limits.upper === undefined) {
-      // Default ranges
-      if (jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper') {
-        return (normalizedValue / 100) * Math.PI;
-      } else {
-        return (normalizedValue / 100) * Math.PI;
-      }
-    }
-
-    const { lower, upper } = joint.limits;
-    
-    // Map normalized value to URDF range
-    let normalizedRatio: number;
-    if (jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper') {
-      normalizedRatio = normalizedValue / 100; // 0-100 -> 0-1
-    } else {
-      normalizedRatio = (normalizedValue + 100) / 200; // -100-+100 -> 0-1
-    }
-    
-    const urdfRadians = lower + normalizedRatio * (upper - lower);
-    
-    console.debug(`[Robot ${this.id}] Joint ${jointName}: ${normalizedValue} (norm) -> ${urdfRadians.toFixed(3)} (rad)`);
-    
-    return urdfRadians;
-  }
-
-  private async sendToProducers(command: RobotCommand): Promise<void> {
-    const connectedProducers = this.producers.filter(d => d.status.isConnected);
-    
-    console.debug(`[Robot ${this.id}] Sending command to ${connectedProducers.length} producers:`, command);
-    
-    // Send to all connected producers
-    await Promise.all(
-      connectedProducers.map(async (producer) => {
-        try {
-          await producer.sendCommand(command);
-        } catch (error) {
-          console.error(`[Robot ${this.id}] Failed to send command to producer ${producer.id}:`, error);
-        }
-      })
-    );
-  }
-
-  private updateStates(): void {
-    // Update connection status
-    const hasConnectedDrivers = (this.consumer?.status.isConnected) || 
-                               this.producers.some(d => d.status.isConnected);
-    
-    this.connectionStatus = {
-      isConnected: hasConnectedDrivers,
-      lastConnected: hasConnectedDrivers ? new Date() : this.connectionStatus.lastConnected
-    };
-
-    // Manual control is enabled when no connected consumer
-    this.isManualControlEnabled = !this.consumer?.status.isConnected;
-  }
-
-  // Cleanup
-  async destroy(): Promise<void> {
-    // Unsubscribe from all callbacks
-    this.unsubscribeFns.forEach(fn => fn());
-    this.unsubscribeFns = [];
-
-    // Disconnect all drivers
-    const allDrivers = [this.consumer, ...this.producers].filter(Boolean) as (Consumer | Producer)[];
-    await Promise.allSettled(
-      allDrivers.map(async (driver) => {
-        try {
-          await driver.disconnect();
-        } catch (error) {
-          console.error(`Error disconnecting driver ${driver.id}:`, error);
-        }
-      })
-    );
-
-    // Calibration cleanup is handled by individual USB drivers
-  }
-} 
+	// Core robot data
+	readonly id: string;
+	private unsubscribeFns: (() => void)[] = [];
+
+	// Command synchronization to prevent state conflicts
+	private commandMutex = $state(false);
+	private pendingCommands: RobotCommand[] = [];
+
+	// Command deduplication to prevent rapid duplicate commands
+	private lastCommandTime = 0;
+	private lastCommandValues: Record<string, number> = {};
+
+	// Memory management
+	private lastCleanup = 0;
+
+	// Single consumer and multiple producers using Svelte 5 runes - PUBLIC for reactive access
+	consumer = $state<Consumer | null>(null);
+	producers = $state<Producer[]>([]);
+
+	// Reactive state using Svelte 5 runes - PUBLIC for reactive access
+	joints = $state<Record<string, JointState>>({});
+	position = $state<Position3D>({ x: 0, y: 0, z: 0 });
+	isManualControlEnabled = $state(true);
+	connectionStatus = $state<ConnectionStatus>({ isConnected: false });
+
+	// URDF robot state for 3D visualization - PUBLIC for reactive access
+	urdfRobotState = $state<IUrdfRobot | null>(null);
+
+	// Derived reactive values for components
+	jointArray = $derived(Object.values(this.joints));
+	hasProducers = $derived(this.producers.length > 0);
+	hasConsumer = $derived(this.consumer !== null && this.consumer.status.isConnected);
+	outputDriverCount = $derived(this.producers.filter((d) => d.status.isConnected).length);
+
+	constructor(id: string, initialJoints: JointState[], urdfRobotState?: IUrdfRobot) {
+		this.id = id;
+
+		// Store URDF robot state if provided
+		this.urdfRobotState = urdfRobotState || null;
+
+		// Initialize joints with normalized values
+		initialJoints.forEach((joint) => {
+			const isGripper =
+				joint.name.toLowerCase() === "jaw" || joint.name.toLowerCase() === "gripper";
+			this.joints[joint.name] = {
+				...joint,
+				value: isGripper ? 0 : 0 // Start at neutral position
+			};
+		});
+	}
+
+	// Method to set URDF robot state after creation (for async loading)
+	setUrdfRobotState(urdfRobotState: any): void {
+		this.urdfRobotState = urdfRobotState;
+	}
+
+	/**
+	 * Update position (implements Positionable interface)
+	 */
+	updatePosition(newPosition: Position3D): void {
+		this.position = { ...newPosition };
+	}
+
+	// Get all USB drivers (both consumer and producers) for calibration
+	getUSBDrivers(): USBServoDriver[] {
+		const usbDrivers: USBServoDriver[] = [];
+
+		// Check consumer
+		if (this.consumer && USBServoDriver.isUSBDriver(this.consumer)) {
+			usbDrivers.push(this.consumer);
+		}
+
+		// Check producers
+		this.producers.forEach((producer) => {
+			if (USBServoDriver.isUSBDriver(producer)) {
+				usbDrivers.push(producer);
+			}
+		});
+
+		return usbDrivers;
+	}
+
+	// Get uncalibrated USB drivers that need calibration
+	getUncalibratedUSBDrivers(): USBServoDriver[] {
+		return this.getUSBDrivers().filter((driver) => driver.needsCalibration);
+	}
+
+	// Check if robot has any USB drivers
+	hasUSBDrivers(): boolean {
+		return this.getUSBDrivers().length > 0;
+	}
+
+	// Check if all USB drivers are calibrated
+	areAllUSBDriversCalibrated(): boolean {
+		const usbDrivers = this.getUSBDrivers();
+		return usbDrivers.length > 0 && usbDrivers.every((driver) => driver.isCalibrated);
+	}
+
+	// Joint value updates (normalized) - for manual control
+	updateJoint(name: string, normalizedValue: number): void {
+		if (!this.isManualControlEnabled) {
+			console.warn("Manual control is disabled");
+			return;
+		}
+
+		this.updateJointValue(name, normalizedValue, true);
+	}
+
+	// Internal joint value update (used by both manual control and USB calibration sync)
+	updateJointValue(name: string, normalizedValue: number, sendToProducers: boolean = false): void {
+		const joint = this.joints[name];
+		if (!joint) {
+			console.warn(`Joint ${name} not found`);
+			return;
+		}
+
+		// Clamp to appropriate normalized range based on joint type
+		if (name.toLowerCase() === "jaw" || name.toLowerCase() === "gripper") {
+			normalizedValue = Math.max(0, Math.min(100, normalizedValue));
+		} else {
+			normalizedValue = Math.max(-100, Math.min(100, normalizedValue));
+		}
+
+		console.debug(
+			`[Robot ${this.id}] Update joint ${name} to ${normalizedValue} (normalized, sendToProducers: ${sendToProducers})`
+		);
+
+		// Create a new joint object to ensure reactivity
+		this.joints[name] = { ...joint, value: normalizedValue };
+
+		// Send normalized command to producers if requested
+		if (sendToProducers) {
+			this.sendToProducers({ joints: [{ name, value: normalizedValue }] });
+		}
+	}
+
+	executeCommand(command: RobotCommand): void {
+		// Command deduplication - skip if same values sent within dedup window
+		const now = Date.now();
+		if (now - this.lastCommandTime < ROBOT_CONFIG.commands.dedupWindow) {
+			const hasChanges = command.joints.some(
+				(joint) => Math.abs((this.lastCommandValues[joint.name] || 0) - joint.value) > 0.5
+			);
+			if (!hasChanges) {
+				console.debug(
+					`[Robot ${this.id}] 🔄 Skipping duplicate command within ${ROBOT_CONFIG.commands.dedupWindow}ms window`
+				);
+				return;
+			}
+		}
+
+		// Update deduplication tracking
+		this.lastCommandTime = now;
+		command.joints.forEach((joint) => {
+			this.lastCommandValues[joint.name] = joint.value;
+		});
+
+		// Queue command if mutex is locked to prevent race conditions
+		if (this.commandMutex) {
+			if (this.pendingCommands.length >= ROBOT_CONFIG.commands.maxQueueSize) {
+				console.warn(`[Robot ${this.id}] Command queue full, dropping oldest command`);
+				this.pendingCommands.shift();
+			}
+			this.pendingCommands.push(command);
+			return;
+		}
+
+		this.commandMutex = true;
+
+		try {
+			console.debug(
+				`[Robot ${this.id}] Executing command with ${command.joints.length} joints:`,
+				command.joints.map((j) => `${j.name}=${j.value}`).join(", ")
+			);
+
+			// Update virtual robot joints with normalized values
+			command.joints.forEach((jointCmd) => {
+				const joint = this.joints[jointCmd.name];
+				if (joint) {
+					// Clamp to appropriate normalized range based on joint type
+					let normalizedValue: number;
+					if (jointCmd.name.toLowerCase() === "jaw" || jointCmd.name.toLowerCase() === "gripper") {
+						normalizedValue = Math.max(0, Math.min(100, jointCmd.value));
+					} else {
+						normalizedValue = Math.max(-100, Math.min(100, jointCmd.value));
+					}
+
+					console.debug(
+						`[Robot ${this.id}] Joint ${jointCmd.name}: ${jointCmd.value} -> ${normalizedValue} (normalized)`
+					);
+
+					// Create a new joint object to ensure reactivity
+					this.joints[jointCmd.name] = { ...joint, value: normalizedValue };
+				} else {
+					console.warn(`[Robot ${this.id}] Joint ${jointCmd.name} not found`);
+				}
+			});
+
+			// Send normalized command to producers
+			this.sendToProducers(command);
+		} finally {
+			this.commandMutex = false;
+
+			// Periodic cleanup to prevent memory leaks
+			const now = Date.now();
+			if (now - this.lastCleanup > ROBOT_CONFIG.performance.memoryCleanupInterval) {
+				// Clear old command values that haven't been updated recently
+				Object.keys(this.lastCommandValues).forEach((jointName) => {
+					if (now - this.lastCommandTime > ROBOT_CONFIG.performance.memoryCleanupInterval) {
+						delete this.lastCommandValues[jointName];
+					}
+				});
+				this.lastCleanup = now;
+			}
+
+			// Process any pending commands
+			if (this.pendingCommands.length > 0) {
+				const nextCommand = this.pendingCommands.shift();
+				if (nextCommand) {
+					// Use setTimeout to prevent stack overflow with rapid commands
+					setTimeout(() => this.executeCommand(nextCommand), 0);
+				}
+			}
+		}
+	}
+
+	// Consumer management (input driver) - SINGLE consumer only
+	async setConsumer(config: USBDriverConfig | RemoteDriverConfig): Promise<string> {
+		return this._setConsumer(config, false);
+	}
+
+	// Join existing room as consumer (for Inference Session integration)
+	async joinAsConsumer(config: RemoteDriverConfig): Promise<string> {
+		if (config.type !== "remote") {
+			throw new Error("joinAsConsumer only supports remote drivers");
+		}
+		return this._setConsumer(config, true);
+	}
+
+	private async _setConsumer(
+		config: USBDriverConfig | RemoteDriverConfig,
+		joinExistingRoom: boolean
+	): Promise<string> {
+		// Remove existing consumer if any
+		if (this.consumer) {
+			await this.removeConsumer();
+		}
+
+		const consumer = this.createConsumer(config);
+
+		// Set up calibration completion callback for USB drivers
+		if (USBServoDriver.isUSBDriver(consumer)) {
+			const calibrationUnsubscribe = consumer.onCalibrationCompleteWithPositions(
+				async (finalPositions: Record<string, number>) => {
+					console.log(`[Robot ${this.id}] Calibration complete, syncing robot to final positions`);
+					consumer.syncRobotPositions(
+						finalPositions,
+						(jointName: string, normalizedValue: number) => {
+							this.updateJointValue(jointName, normalizedValue, false); // Don't send to producers to avoid feedback loop
+						}
+					);
+
+					// Start listening now that calibration is complete
+					if ("startListening" in consumer && consumer.startListening) {
+						try {
+							await consumer.startListening();
+							console.log(`[Robot ${this.id}] Started listening after calibration completion`);
+						} catch (error) {
+							console.error(
+								`[Robot ${this.id}] Failed to start listening after calibration:`,
+								error
+							);
+						}
+					}
+				}
+			);
+			this.unsubscribeFns.push(calibrationUnsubscribe);
+		}
+
+		// Only pass joinExistingRoom to remote drivers
+		if (config.type === "remote") {
+			await (consumer as RemoteConsumer).connect(joinExistingRoom);
+		} else {
+			await consumer.connect();
+		}
+
+		// Set up command listening
+		const commandUnsubscribe = consumer.onCommand((command: RobotCommand) => {
+			this.executeCommand(command);
+		});
+		this.unsubscribeFns.push(commandUnsubscribe);
+
+		// Monitor status changes
+		const statusUnsubscribe = consumer.onStatusChange(() => {
+			this.updateStates();
+		});
+		this.unsubscribeFns.push(statusUnsubscribe);
+
+		// Start listening for consumers with this capability (only if calibrated for USB)
+		if ("startListening" in consumer && consumer.startListening) {
+			// For USB consumers, only start listening if calibrated
+			if (USBServoDriver.isUSBDriver(consumer)) {
+				if (consumer.isCalibrated) {
+					await consumer.startListening();
+				}
+				// If not calibrated, startListening will be called after calibration completion
+			} else {
+				// For non-USB consumers, start listening immediately
+				await consumer.startListening();
+			}
+		}
+
+		this.consumer = consumer;
+		this.updateStates();
+
+		return consumer.id;
+	}
+
+	// Producer management (output drivers) - MULTIPLE allowed
+	async addProducer(config: USBDriverConfig | RemoteDriverConfig): Promise<string> {
+		return this._addProducer(config, false);
+	}
+
+	// Join existing room as producer (for Inference Session integration)
+	async joinAsProducer(config: RemoteDriverConfig): Promise<string> {
+		if (config.type !== "remote") {
+			throw new Error("joinAsProducer only supports remote drivers");
+		}
+		return this._addProducer(config, true);
+	}
+
+	private async _addProducer(
+		config: USBDriverConfig | RemoteDriverConfig,
+		joinExistingRoom: boolean
+	): Promise<string> {
+		const producer = this.createProducer(config);
+
+		// Set up calibration completion callback for USB drivers
+		if (USBServoDriver.isUSBDriver(producer)) {
+			const calibrationUnsubscribe = producer.onCalibrationCompleteWithPositions(
+				async (finalPositions: Record<string, number>) => {
+					console.log(`[Robot ${this.id}] Calibration complete, syncing robot to final positions`);
+					producer.syncRobotPositions(
+						finalPositions,
+						(jointName: string, normalizedValue: number) => {
+							this.updateJointValue(jointName, normalizedValue, false); // Don't send to producers to avoid feedback loop
+						}
+					);
+
+					console.log(
+						`[Robot ${this.id}] USB Producer calibration completed and ready for commands`
+					);
+				}
+			);
+			this.unsubscribeFns.push(calibrationUnsubscribe);
+		}
+
+		// Only pass joinExistingRoom to remote drivers
+		if (config.type === "remote") {
+			await (producer as RemoteProducer).connect(joinExistingRoom);
+		} else {
+			await producer.connect();
+		}
+
+		// Monitor status changes
+		const statusUnsubscribe = producer.onStatusChange(() => {
+			this.updateStates();
+		});
+		this.unsubscribeFns.push(statusUnsubscribe);
+
+		this.producers.push(producer);
+		this.updateStates();
+
+		return producer.id;
+	}
+
+	async removeConsumer(): Promise<void> {
+		if (this.consumer) {
+			// Stop listening for consumers with this capability
+			if ("stopListening" in this.consumer && this.consumer.stopListening) {
+				await this.consumer.stopListening();
+			}
+			await this.consumer.disconnect();
+
+			this.consumer = null;
+			this.updateStates();
+		}
+	}
+
+	async removeProducer(driverId: string): Promise<void> {
+		const driverIndex = this.producers.findIndex((d) => d.id === driverId);
+		if (driverIndex >= 0) {
+			const driver = this.producers[driverIndex];
+			await driver.disconnect();
+
+			this.producers.splice(driverIndex, 1);
+			this.updateStates();
+		}
+	}
+
+	// Private methods
+	private createConsumer(config: USBDriverConfig | RemoteDriverConfig): Consumer {
+		switch (config.type) {
+			case "usb":
+				return new USBConsumer(config);
+			case "remote":
+				return new RemoteConsumer(config);
+			default:
+				const _exhaustive: never = config;
+				throw new Error(`Unknown consumer type: ${JSON.stringify(_exhaustive)}`);
+		}
+	}
+
+	private createProducer(config: USBDriverConfig | RemoteDriverConfig): Producer {
+		switch (config.type) {
+			case "usb":
+				return new USBProducer(config);
+			case "remote":
+				return new RemoteProducer(config);
+			default:
+				const _exhaustive: never = config;
+				throw new Error(`Unknown producer type: ${JSON.stringify(_exhaustive)}`);
+		}
+	}
+
+	// Convert normalized values to URDF radians for 3D visualization
+	convertNormalizedToUrdfRadians(jointName: string, normalizedValue: number): number {
+		const joint = this.joints[jointName];
+		if (!joint?.limits || joint.limits.lower === undefined || joint.limits.upper === undefined) {
+			// Default ranges
+			if (jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper") {
+				return (normalizedValue / 100) * Math.PI;
+			} else {
+				return (normalizedValue / 100) * Math.PI;
+			}
+		}
+
+		const { lower, upper } = joint.limits;
+
+		// Map normalized value to URDF range
+		let normalizedRatio: number;
+		if (jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper") {
+			normalizedRatio = normalizedValue / 100; // 0-100 -> 0-1
+		} else {
+			normalizedRatio = (normalizedValue + 100) / 200; // -100-+100 -> 0-1
+		}
+
+		const urdfRadians = lower + normalizedRatio * (upper - lower);
+
+		console.debug(
+			`[Robot ${this.id}] Joint ${jointName}: ${normalizedValue} (norm) -> ${urdfRadians.toFixed(3)} (rad)`
+		);
+
+		return urdfRadians;
+	}
+
+	private async sendToProducers(command: RobotCommand): Promise<void> {
+		const connectedProducers = this.producers.filter((d) => d.status.isConnected);
+
+		console.debug(
+			`[Robot ${this.id}] Sending command to ${connectedProducers.length} producers:`,
+			command
+		);
+
+		// Send to all connected producers
+		await Promise.all(
+			connectedProducers.map(async (producer) => {
+				try {
+					await producer.sendCommand(command);
+				} catch (error) {
+					console.error(
+						`[Robot ${this.id}] Failed to send command to producer ${producer.id}:`,
+						error
+					);
+				}
+			})
+		);
+	}
+
+	private updateStates(): void {
+		// Update connection status
+		const hasConnectedDrivers =
+			this.consumer?.status.isConnected || this.producers.some((d) => d.status.isConnected);
+
+		this.connectionStatus = {
+			isConnected: hasConnectedDrivers,
+			lastConnected: hasConnectedDrivers ? new Date() : this.connectionStatus.lastConnected
+		};
+
+		// Manual control is enabled when no connected consumer
+		this.isManualControlEnabled = !this.consumer?.status.isConnected;
+	}
+
+	// Cleanup
+	async destroy(): Promise<void> {
+		// Unsubscribe from all callbacks
+		this.unsubscribeFns.forEach((fn) => fn());
+		this.unsubscribeFns = [];
+
+		// Disconnect all drivers
+		const allDrivers = [this.consumer, ...this.producers].filter(Boolean) as (
+			| Consumer
+			| Producer
+		)[];
+		await Promise.allSettled(
+			allDrivers.map(async (driver) => {
+				try {
+					await driver.disconnect();
+				} catch (error) {
+					console.error(`Error disconnecting driver ${driver.id}:`, error);
+				}
+			})
+		);
+
+		// Calibration cleanup is handled by individual USB drivers
+	}
+}

src/lib/elements/robot/RobotManager.svelte.ts

@@ -1,262 +1,275 @@
-import { Robot } from './Robot.svelte.js';
-import type { JointState, USBDriverConfig, RemoteDriverConfig } from './models.js';
-import type { Position3D } from '$lib/types/positionable.js';
-import { createUrdfRobot } from '@/elements/robot/createRobot.svelte.js';
-import type { RobotUrdfConfig } from '$lib/types/urdf.js';
-import { generateName } from '$lib/utils/generateName.js';
-import { positionManager } from '$lib/utils/positionManager.js';
-import { settings } from '$lib/runes/settings.svelte';
-import { robotics } from '@robothub/transport-server-client';
-import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
+import { Robot } from "./Robot.svelte.js";
+import type { JointState, USBDriverConfig, RemoteDriverConfig } from "./models.js";
+import type { Position3D } from "$lib/types/positionable.js";
+import { createUrdfRobot } from "@/elements/robot/createRobot.svelte.js";
+import type { RobotUrdfConfig } from "$lib/types/urdf.js";
+import { generateName } from "$lib/utils/generateName.js";
+import { positionManager } from "$lib/utils/positionManager.js";
+import { settings } from "$lib/runes/settings.svelte";
+import { robotics } from "@robothub/transport-server-client";
+import type { robotics as roboticsTypes } from "@robothub/transport-server-client";
 import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
 
 export class RobotManager {
-  private _robots = $state<Robot[]>([]);
-  
-  // Room management state - using transport server for communication
-  rooms = $state<roboticsTypes.RoomInfo[]>([]);
-  roomsLoading = $state(false);
-
-  // Reactive getters
-  get robots(): Robot[] {
-    return this._robots;
-  }
-
-  get robotCount(): number {
-    return this._robots.length;
-  }
-
-  /**
-   * Room Management Methods
-   */
-  async listRooms(workspaceId: string): Promise<roboticsTypes.RoomInfo[]> {
-    try {
-      const client = new robotics.RoboticsClientCore(settings.transportServerUrl);
-      const rooms = await client.listRooms(workspaceId);
-      this.rooms = rooms;
-      return rooms;
-    } catch (error) {
-      console.error('Failed to list robotics rooms:', error);
-      return [];
-    }
-  }
-
-  async refreshRooms(workspaceId: string): Promise<void> {
-    this.roomsLoading = true;
-    try {
-      await this.listRooms(workspaceId);
-    } finally {
-      this.roomsLoading = false;
-    }
-  }
-
-  async createRoboticsRoom(workspaceId: string, roomId?: string): Promise<{ success: boolean; roomId?: string; error?: string }> {
-    try {
-      const client = new robotics.RoboticsClientCore(settings.transportServerUrl);
-      const result = await client.createRoom(workspaceId, roomId);
-      // Refresh rooms list to include the new room  
-      await this.refreshRooms(workspaceId);
-      return { success: true, roomId: result.roomId };
-    } catch (error) {
-      console.error('Failed to create robotics room:', error);
-      return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
-    }
-  }
-
-  generateRoomId(robotId: string): string {
-    return `${robotId}-${generateName()}`;
-  }
-
-  /**
-   * Connect consumer to an existing robotics room as consumer
-   * This will receive commands from producers in that room
-   */
-  async connectConsumerToRoom(workspaceId: string, robotId: string, roomId: string): Promise<void> {
-    const robot = this.getRobot(robotId);
-    if (!robot) {
-      throw new Error(`Robot ${robotId} not found`);
-    }
-
-    const config: RemoteDriverConfig = {
-      type: 'remote',
-      url: settings.transportServerUrl.replace('http://', 'ws://').replace('https://', 'wss://'),
-      robotId: roomId,
-      workspaceId: workspaceId
-    };
-
-    // Use joinAsConsumer to join existing room
-    await robot.joinAsConsumer(config);
-  }
-
-  /**
-   * Connect producer to an existing robotics room as producer
-   * This will send commands to consumers in that room
-   */
-  async connectProducerToRoom(workspaceId: string, robotId: string, roomId: string): Promise<void> {
-    const robot = this.getRobot(robotId);
-    if (!robot) {
-      throw new Error(`Robot ${robotId} not found`);
-    }
-
-    const config: RemoteDriverConfig = {
-      type: 'remote',
-      url: settings.transportServerUrl.replace('http://', 'ws://').replace('https://', 'wss://'),
-      robotId: roomId,
-      workspaceId: workspaceId
-    };
-
-    // Use joinAsProducer to join existing room
-    await robot.joinAsProducer(config);
-  }
-
-  /**
-   * Create and connect producer as producer to a new room
-   */
-  async connectProducerAsProducer(workspaceId: string, robotId: string, roomId?: string): Promise<{ success: boolean; roomId?: string; error?: string }> {
-    try {
-      // Create room first if roomId provided, otherwise generate one
-      const finalRoomId = roomId || this.generateRoomId(robotId);
-      const createResult = await this.createRoboticsRoom(workspaceId, finalRoomId);
-      
-      if (!createResult.success) {
-        return createResult;
-      }
-
-      // Connect producer to the new room
-      await this.connectProducerToRoom(workspaceId, robotId, createResult.roomId!);
-      
-      return { success: true, roomId: createResult.roomId };
-    } catch (error) {
-      return { success: false, error: error instanceof Error ? error.message : 'Unknown error' };
-    }
-  }
-
-  /**
-   * Create a robot with the default SO-100 arm configuration
-   */
-  async createSO100Robot(id?: string, position?: Position3D): Promise<Robot> {
-    const robotId = id || `so100-${Date.now()}`;
-    const urdfConfig = robotUrdfConfigMap["so-arm100"];
-    
-    return this.createRobotFromUrdf(robotId, urdfConfig, position);
-  }
-
-  /**
-   * Create a new robot directly from URDF configuration - automatically extracts joint limits
-   */
-  async createRobotFromUrdf(id: string, urdfConfig: RobotUrdfConfig, position?: Position3D): Promise<Robot> {
-    // Check if robot already exists
-    if (this._robots.find(r => r.id === id)) {
-      throw new Error(`Robot with ID ${id} already exists`);
-    }
-
-    try {
-      // Load and parse URDF
-      const robotState = await createUrdfRobot(urdfConfig);
-      
-      // Extract joint information from URDF
-      const joints: JointState[] = [];
-      let servoId = 1; // Auto-assign servo IDs in order
-      
-      for (const urdfJoint of robotState.urdfRobot.joints) {
-        // Only include revolute joints (movable joints)
-        if (urdfJoint.type === 'revolute' && urdfJoint.name) {
-          const jointState: JointState = {
-            name: urdfJoint.name,
-            value: 0, // Start at center (0%)
-            servoId: servoId++
-          };
-          
-          // Extract limits from URDF if available
-          if (urdfJoint.limit) {
-            jointState.limits = {
-              lower: urdfJoint.limit.lower,
-              upper: urdfJoint.limit.upper
-            };
-          }
-          
-          joints.push(jointState);
-        }
-      }
-      
-      console.log(`Extracted ${joints.length} joints from URDF:`, joints.map(j => `${j.name} [${j.limits?.lower?.toFixed(2)}:${j.limits?.upper?.toFixed(2)}]`));
-      
-      // Create robot with extracted joints AND URDF robot state
-      const robot = new Robot(id, joints, robotState.urdfRobot);
-
-      // Set position (from position manager if not provided)
-      robot.position = position || positionManager.getNextPosition();
-
-      // Add to reactive array
-      this._robots.push(robot);
-
-      console.log(`Created robot ${id} from URDF. Total robots: ${this._robots.length}`);
-      return robot;
-      
-    } catch (error) {
-      console.error(`Failed to create robot ${id} from URDF:`, error);
-      throw error;
-    }
-  }
-
-  /**
-   * Create a new robot with joints defined at initialization (for backwards compatibility)
-   */
-  createRobot(id: string, joints: JointState[], position?: Position3D): Robot {
-    // Check if robot already exists
-    if (this._robots.find(r => r.id === id)) {
-      throw new Error(`Robot with ID ${id} already exists`);
-    }
-
-    // Create robot
-    const robot = new Robot(id, joints);
-
-    // Set position (from position manager if not provided)
-    robot.position = position || positionManager.getNextPosition();
-
-    // Add to reactive array
-    this._robots.push(robot);
-
-    console.log(`Created robot ${id}. Total robots: ${this._robots.length}`);
-    return robot;
-  }
-
-  /**
-   * Remove a robot
-   */
-  async removeRobot(id: string): Promise<void> {
-    const robotIndex = this._robots.findIndex(r => r.id === id);
-    if (robotIndex === -1) return;
-
-    const robot = this._robots[robotIndex];
-
-    // Clean up robot resources
-    await robot.destroy();
-
-    // Remove from reactive array
-    this._robots.splice(robotIndex, 1);
-
-    console.log(`Removed robot ${id}. Remaining robots: ${this._robots.length}`);
-  }
-
-  /**
-   * Get robot by ID
-   */
-  getRobot(id: string): Robot | undefined {
-    return this._robots.find(r => r.id === id);
-  }
-
-
-
-  /**
-   * Clean up all robots
-   */
-  async destroy(): Promise<void> {
-    const cleanupPromises = this._robots.map(robot => robot.destroy());
-    await Promise.allSettled(cleanupPromises);
-    this._robots.length = 0;
-  }
+	private _robots = $state<Robot[]>([]);
+
+	// Room management state - using transport server for communication
+	rooms = $state<roboticsTypes.RoomInfo[]>([]);
+	roomsLoading = $state(false);
+
+	// Reactive getters
+	get robots(): Robot[] {
+		return this._robots;
+	}
+
+	get robotCount(): number {
+		return this._robots.length;
+	}
+
+	/**
+	 * Room Management Methods
+	 */
+	async listRooms(workspaceId: string): Promise<roboticsTypes.RoomInfo[]> {
+		try {
+			const client = new robotics.RoboticsClientCore(settings.transportServerUrl);
+			const rooms = await client.listRooms(workspaceId);
+			this.rooms = rooms;
+			return rooms;
+		} catch (error) {
+			console.error("Failed to list robotics rooms:", error);
+			return [];
+		}
+	}
+
+	async refreshRooms(workspaceId: string): Promise<void> {
+		this.roomsLoading = true;
+		try {
+			await this.listRooms(workspaceId);
+		} finally {
+			this.roomsLoading = false;
+		}
+	}
+
+	async createRoboticsRoom(
+		workspaceId: string,
+		roomId?: string
+	): Promise<{ success: boolean; roomId?: string; error?: string }> {
+		try {
+			const client = new robotics.RoboticsClientCore(settings.transportServerUrl);
+			const result = await client.createRoom(workspaceId, roomId);
+			// Refresh rooms list to include the new room
+			await this.refreshRooms(workspaceId);
+			return { success: true, roomId: result.roomId };
+		} catch (error) {
+			console.error("Failed to create robotics room:", error);
+			return { success: false, error: error instanceof Error ? error.message : "Unknown error" };
+		}
+	}
+
+	generateRoomId(robotId: string): string {
+		return `${robotId}-${generateName()}`;
+	}
+
+	/**
+	 * Connect consumer to an existing robotics room as consumer
+	 * This will receive commands from producers in that room
+	 */
+	async connectConsumerToRoom(workspaceId: string, robotId: string, roomId: string): Promise<void> {
+		const robot = this.getRobot(robotId);
+		if (!robot) {
+			throw new Error(`Robot ${robotId} not found`);
+		}
+
+		const config: RemoteDriverConfig = {
+			type: "remote",
+			url: settings.transportServerUrl.replace("http://", "ws://").replace("https://", "wss://"),
+			robotId: roomId,
+			workspaceId: workspaceId
+		};
+
+		// Use joinAsConsumer to join existing room
+		await robot.joinAsConsumer(config);
+	}
+
+	/**
+	 * Connect producer to an existing robotics room as producer
+	 * This will send commands to consumers in that room
+	 */
+	async connectProducerToRoom(workspaceId: string, robotId: string, roomId: string): Promise<void> {
+		const robot = this.getRobot(robotId);
+		if (!robot) {
+			throw new Error(`Robot ${robotId} not found`);
+		}
+
+		const config: RemoteDriverConfig = {
+			type: "remote",
+			url: settings.transportServerUrl.replace("http://", "ws://").replace("https://", "wss://"),
+			robotId: roomId,
+			workspaceId: workspaceId
+		};
+
+		// Use joinAsProducer to join existing room
+		await robot.joinAsProducer(config);
+	}
+
+	/**
+	 * Create and connect producer as producer to a new room
+	 */
+	async connectProducerAsProducer(
+		workspaceId: string,
+		robotId: string,
+		roomId?: string
+	): Promise<{ success: boolean; roomId?: string; error?: string }> {
+		try {
+			// Create room first if roomId provided, otherwise generate one
+			const finalRoomId = roomId || this.generateRoomId(robotId);
+			const createResult = await this.createRoboticsRoom(workspaceId, finalRoomId);
+
+			if (!createResult.success) {
+				return createResult;
+			}
+
+			// Connect producer to the new room
+			await this.connectProducerToRoom(workspaceId, robotId, createResult.roomId!);
+
+			return { success: true, roomId: createResult.roomId };
+		} catch (error) {
+			return { success: false, error: error instanceof Error ? error.message : "Unknown error" };
+		}
+	}
+
+	/**
+	 * Create a robot with the default SO-100 arm configuration
+	 */
+	async createSO100Robot(id?: string, position?: Position3D): Promise<Robot> {
+		const robotId = id || `so100-${Date.now()}`;
+		const urdfConfig = robotUrdfConfigMap["so-arm100"];
+
+		return this.createRobotFromUrdf(robotId, urdfConfig, position);
+	}
+
+	/**
+	 * Create a new robot directly from URDF configuration - automatically extracts joint limits
+	 */
+	async createRobotFromUrdf(
+		id: string,
+		urdfConfig: RobotUrdfConfig,
+		position?: Position3D
+	): Promise<Robot> {
+		// Check if robot already exists
+		if (this._robots.find((r) => r.id === id)) {
+			throw new Error(`Robot with ID ${id} already exists`);
+		}
+
+		try {
+			// Load and parse URDF
+			const robotState = await createUrdfRobot(urdfConfig);
+
+			// Extract joint information from URDF
+			const joints: JointState[] = [];
+			let servoId = 1; // Auto-assign servo IDs in order
+
+			for (const urdfJoint of robotState.urdfRobot.joints) {
+				// Only include revolute joints (movable joints)
+				if (urdfJoint.type === "revolute" && urdfJoint.name) {
+					const jointState: JointState = {
+						name: urdfJoint.name,
+						value: 0, // Start at center (0%)
+						servoId: servoId++
+					};
+
+					// Extract limits from URDF if available
+					if (urdfJoint.limit) {
+						jointState.limits = {
+							lower: urdfJoint.limit.lower,
+							upper: urdfJoint.limit.upper
+						};
+					}
+
+					joints.push(jointState);
+				}
+			}
+
+			console.log(
+				`Extracted ${joints.length} joints from URDF:`,
+				joints.map(
+					(j) => `${j.name} [${j.limits?.lower?.toFixed(2)}:${j.limits?.upper?.toFixed(2)}]`
+				)
+			);
+
+			// Create robot with extracted joints AND URDF robot state
+			const robot = new Robot(id, joints, robotState.urdfRobot);
+
+			// Set position (from position manager if not provided)
+			robot.position = position || positionManager.getNextPosition();
+
+			// Add to reactive array
+			this._robots.push(robot);
+
+			console.log(`Created robot ${id} from URDF. Total robots: ${this._robots.length}`);
+			return robot;
+		} catch (error) {
+			console.error(`Failed to create robot ${id} from URDF:`, error);
+			throw error;
+		}
+	}
+
+	/**
+	 * Create a new robot with joints defined at initialization (for backwards compatibility)
+	 */
+	createRobot(id: string, joints: JointState[], position?: Position3D): Robot {
+		// Check if robot already exists
+		if (this._robots.find((r) => r.id === id)) {
+			throw new Error(`Robot with ID ${id} already exists`);
+		}
+
+		// Create robot
+		const robot = new Robot(id, joints);
+
+		// Set position (from position manager if not provided)
+		robot.position = position || positionManager.getNextPosition();
+
+		// Add to reactive array
+		this._robots.push(robot);
+
+		console.log(`Created robot ${id}. Total robots: ${this._robots.length}`);
+		return robot;
+	}
+
+	/**
+	 * Remove a robot
+	 */
+	async removeRobot(id: string): Promise<void> {
+		const robotIndex = this._robots.findIndex((r) => r.id === id);
+		if (robotIndex === -1) return;
+
+		const robot = this._robots[robotIndex];
+
+		// Clean up robot resources
+		await robot.destroy();
+
+		// Remove from reactive array
+		this._robots.splice(robotIndex, 1);
+
+		console.log(`Removed robot ${id}. Remaining robots: ${this._robots.length}`);
+	}
+
+	/**
+	 * Get robot by ID
+	 */
+	getRobot(id: string): Robot | undefined {
+		return this._robots.find((r) => r.id === id);
+	}
+
+	/**
+	 * Clean up all robots
+	 */
+	async destroy(): Promise<void> {
+		const cleanupPromises = this._robots.map((robot) => robot.destroy());
+		await Promise.allSettled(cleanupPromises);
+		this._robots.length = 0;
+	}
 }
 
 // Global robot manager instance
-export const robotManager = new RobotManager();
+export const robotManager = new RobotManager();

src/lib/elements/robot/calibration/CalibrationState.svelte.ts

@@ -1,271 +1,292 @@
-import type { JointCalibration } from '../models.js';
-import { ROBOT_CONFIG } from '../config.js';
+import type { JointCalibration } from "../models.js";
+import { ROBOT_CONFIG } from "../config.js";
 
 export class CalibrationState {
-  // Reactive calibration state
-  isCalibrating = $state(false);
-  progress = $state(0);
-  
-  // Joint calibration data
-  private jointCalibrations = $state<Record<string, JointCalibration>>({});
-  private currentValues = $state<Record<string, number>>({});
-  
-  // Callbacks for completion with final positions
-  private completionCallbacks: Array<(positions: Record<string, number>) => void> = [];
-
-  constructor() {
-    // Initialize calibration data for expected joints
-    const jointNames = ["Rotation", "Pitch", "Elbow", "Wrist_Pitch", "Wrist_Roll", "Jaw"];
-    jointNames.forEach(name => {
-      this.jointCalibrations[name] = { 
-        isCalibrated: false,
-        minServoValue: undefined,
-        maxServoValue: undefined
-      };
-      this.currentValues[name] = 0;
-    });
-  }
-
-  // Computed properties
-  get needsCalibration(): boolean {
-    return Object.values(this.jointCalibrations).some(cal => !cal.isCalibrated);
-  }
-
-  get isCalibrated(): boolean {
-    return Object.values(this.jointCalibrations).every(cal => cal.isCalibrated);
-  }
-
-  // Update current servo value during calibration
-  updateCurrentValue(jointName: string, servoValue: number): void {
-    this.currentValues[jointName] = servoValue;
-    
-    // Update calibration range if calibrating
-    if (this.isCalibrating) {
-      const calibration = this.jointCalibrations[jointName];
-      if (calibration) {
-        // Update min/max values
-        if (calibration.minServoValue === undefined || servoValue < calibration.minServoValue) {
-          calibration.minServoValue = servoValue;
-        }
-        if (calibration.maxServoValue === undefined || servoValue > calibration.maxServoValue) {
-          calibration.maxServoValue = servoValue;
-        }
-        
-        // Update progress based on range coverage
-        this.updateProgress();
-      }
-    }
-  }
-
-  // Get current value for a joint
-  getCurrentValue(jointName: string): number | undefined {
-    return this.currentValues[jointName];
-  }
-
-  // Get calibration data for a joint
-  getJointCalibration(jointName: string): JointCalibration | undefined {
-    return this.jointCalibrations[jointName];
-  }
-
-  // Get formatted range string for display
-  getJointRange(jointName: string): string {
-    const calibration = this.jointCalibrations[jointName];
-    if (!calibration || calibration.minServoValue === undefined || calibration.maxServoValue === undefined) {
-      return "Not set";
-    }
-    return `${calibration.minServoValue}-${calibration.maxServoValue}`;
-  }
-
-  // Format servo value for display
-  formatServoValue(value: number | undefined): string {
-    return value !== undefined ? value.toString() : "---";
-  }
-
-  // Start calibration process
-  startCalibration(): void {
-    console.log("[CalibrationState] Starting calibration...");
-    this.isCalibrating = true;
-    this.progress = 0;
-    
-    // Reset calibration data
-    Object.keys(this.jointCalibrations).forEach(jointName => {
-      this.jointCalibrations[jointName] = {
-        isCalibrated: false,
-        minServoValue: undefined,
-        maxServoValue: undefined
-      };
-    });
-  }
-
-  // Complete calibration and mark joints as calibrated
-  completeCalibration(): Record<string, number> {
-    console.log("[CalibrationState] Completing calibration...");
-    
-    const finalPositions: Record<string, number> = {};
-    
-    // Mark all joints with sufficient range as calibrated
-    Object.keys(this.jointCalibrations).forEach(jointName => {
-      const calibration = this.jointCalibrations[jointName];
-      if (calibration.minServoValue !== undefined && calibration.maxServoValue !== undefined) {
-        const range = calibration.maxServoValue - calibration.minServoValue;
-        if (range >= ROBOT_CONFIG.calibration.minRangeThreshold) {
-          calibration.isCalibrated = true;
-          finalPositions[jointName] = this.currentValues[jointName] || 0;
-          console.log(`[CalibrationState] Joint ${jointName} calibrated: ${this.getJointRange(jointName)} (range: ${range})`);
-        } else {
-          console.warn(`[CalibrationState] Joint ${jointName} range too small: ${range} < ${ROBOT_CONFIG.calibration.minRangeThreshold}`);
-        }
-      }
-    });
-
-    this.isCalibrating = false;
-    this.progress = 100;
-    
-    // Notify completion callbacks
-    this.completionCallbacks.forEach(callback => {
-      try {
-        callback(finalPositions);
-      } catch (error) {
-        console.error("[CalibrationState] Error in completion callback:", error);
-      }
-    });
-    
-    return finalPositions;
-  }
-
-  // Cancel calibration
-  cancelCalibration(): void {
-    console.log("[CalibrationState] Calibration cancelled");
-    this.isCalibrating = false;
-    this.progress = 0;
-    
-    // Reset calibration data
-    Object.keys(this.jointCalibrations).forEach(jointName => {
-      this.jointCalibrations[jointName] = {
-        isCalibrated: false,
-        minServoValue: undefined,
-        maxServoValue: undefined
-      };
-    });
-  }
-
-  // Skip calibration (use predefined values)
-  skipCalibration(): void {
-    console.log("[CalibrationState] Skipping calibration with predefined values");
-    
-    // Set predefined calibration values for SO-100 arm
-    const predefinedCalibrations = {
-      "Rotation": { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
-      "Pitch": { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
-      "Elbow": { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
-      "Wrist_Pitch": { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
-      "Wrist_Roll": { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
-      "Jaw": { minServoValue: 1000, maxServoValue: 3000, isCalibrated: true }
-    };
-    
-    Object.entries(predefinedCalibrations).forEach(([jointName, calibration]) => {
-      this.jointCalibrations[jointName] = calibration;
-    });
-    
-    this.isCalibrating = false;
-    this.progress = 100;
-  }
-
-  // Convert raw servo value to normalized percentage (for USB INPUT - reading from servo)
-  normalizeValue(rawValue: number, jointName: string): number {
-    const calibration = this.jointCalibrations[jointName];
-    if (!calibration || !calibration.isCalibrated || 
-        calibration.minServoValue === undefined || calibration.maxServoValue === undefined) {
-      // No calibration, use appropriate default conversion
-      const isGripper = jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper';
-      if (isGripper) {
-        return Math.max(0, Math.min(100, (rawValue / 4095) * 100));
-      } else {
-        return Math.max(-100, Math.min(100, ((rawValue - 2048) / 2048) * 100));
-      }
-    }
-
-    const { minServoValue, maxServoValue } = calibration;
-    if (maxServoValue === minServoValue) return 0;
-
-    // Bound the input servo value to calibrated range
-    const bounded = Math.max(minServoValue, Math.min(maxServoValue, rawValue));
-    
-    const isGripper = jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper';
-    if (isGripper) {
-      // Gripper: 0-100%
-      return ((bounded - minServoValue) / (maxServoValue - minServoValue)) * 100;
-    } else {
-      // Regular joint: -100 to +100%
-      return (((bounded - minServoValue) / (maxServoValue - minServoValue)) * 200) - 100;
-    }
-  }
-
-  // Convert normalized percentage to raw servo value (for USB OUTPUT - writing to servo)
-  denormalizeValue(normalizedValue: number, jointName: string): number {
-    const calibration = this.jointCalibrations[jointName];
-    if (!calibration || !calibration.isCalibrated || 
-        calibration.minServoValue === undefined || calibration.maxServoValue === undefined) {
-      // No calibration, use appropriate default conversion
-      const isGripper = jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper';
-      if (isGripper) {
-        return Math.round((normalizedValue / 100) * 4095);
-      } else {
-        return Math.round(2048 + (normalizedValue / 100) * 2048);
-      }
-    }
-
-    const { minServoValue, maxServoValue } = calibration;
-    const range = maxServoValue - minServoValue;
-
-    let normalizedRatio: number;
-    const isGripper = jointName.toLowerCase() === 'jaw' || jointName.toLowerCase() === 'gripper';
-    if (isGripper) {
-      // Gripper: 0-100% -> 0-1
-      normalizedRatio = Math.max(0, Math.min(1, normalizedValue / 100));
-    } else {
-      // Regular joint: -100 to +100% -> 0-1
-      normalizedRatio = Math.max(0, Math.min(1, (normalizedValue + 100) / 200));
-    }
-
-    return Math.round(minServoValue + normalizedRatio * range);
-  }
-
-  // Register callback for calibration completion with final positions
-  onCalibrationCompleteWithPositions(callback: (positions: Record<string, number>) => void): () => void {
-    this.completionCallbacks.push(callback);
-    
-    // Return unsubscribe function
-    return () => {
-      const index = this.completionCallbacks.indexOf(callback);
-      if (index >= 0) {
-        this.completionCallbacks.splice(index, 1);
-      }
-    };
-  }
-
-  // Update progress based on calibration coverage
-  private updateProgress(): void {
-    if (!this.isCalibrating) return;
-
-    let totalProgress = 0;
-    let jointCount = 0;
-
-    Object.values(this.jointCalibrations).forEach(calibration => {
-      jointCount++;
-      if (calibration.minServoValue !== undefined && calibration.maxServoValue !== undefined) {
-        const range = calibration.maxServoValue - calibration.minServoValue;
-        // Progress is based on range size (more range = more progress)
-        const jointProgress = Math.min(100, (range / ROBOT_CONFIG.calibration.minRangeThreshold) * 100);
-        totalProgress += jointProgress;
-      }
-    });
-
-    this.progress = jointCount > 0 ? totalProgress / jointCount : 0;
-  }
-
-  // Cleanup
-  destroy(): void {
-    this.completionCallbacks = [];
-  }
-} 
+	// Reactive calibration state
+	isCalibrating = $state(false);
+	progress = $state(0);
+
+	// Joint calibration data
+	private jointCalibrations = $state<Record<string, JointCalibration>>({});
+	private currentValues = $state<Record<string, number>>({});
+
+	// Callbacks for completion with final positions
+	private completionCallbacks: Array<(positions: Record<string, number>) => void> = [];
+
+	constructor() {
+		// Initialize calibration data for expected joints
+		const jointNames = ["Rotation", "Pitch", "Elbow", "Wrist_Pitch", "Wrist_Roll", "Jaw"];
+		jointNames.forEach((name) => {
+			this.jointCalibrations[name] = {
+				isCalibrated: false,
+				minServoValue: undefined,
+				maxServoValue: undefined
+			};
+			this.currentValues[name] = 0;
+		});
+	}
+
+	// Computed properties
+	get needsCalibration(): boolean {
+		return Object.values(this.jointCalibrations).some((cal) => !cal.isCalibrated);
+	}
+
+	get isCalibrated(): boolean {
+		return Object.values(this.jointCalibrations).every((cal) => cal.isCalibrated);
+	}
+
+	// Update current servo value during calibration
+	updateCurrentValue(jointName: string, servoValue: number): void {
+		this.currentValues[jointName] = servoValue;
+
+		// Update calibration range if calibrating
+		if (this.isCalibrating) {
+			const calibration = this.jointCalibrations[jointName];
+			if (calibration) {
+				// Update min/max values
+				if (calibration.minServoValue === undefined || servoValue < calibration.minServoValue) {
+					calibration.minServoValue = servoValue;
+				}
+				if (calibration.maxServoValue === undefined || servoValue > calibration.maxServoValue) {
+					calibration.maxServoValue = servoValue;
+				}
+
+				// Update progress based on range coverage
+				this.updateProgress();
+			}
+		}
+	}
+
+	// Get current value for a joint
+	getCurrentValue(jointName: string): number | undefined {
+		return this.currentValues[jointName];
+	}
+
+	// Get calibration data for a joint
+	getJointCalibration(jointName: string): JointCalibration | undefined {
+		return this.jointCalibrations[jointName];
+	}
+
+	// Get formatted range string for display
+	getJointRange(jointName: string): string {
+		const calibration = this.jointCalibrations[jointName];
+		if (
+			!calibration ||
+			calibration.minServoValue === undefined ||
+			calibration.maxServoValue === undefined
+		) {
+			return "Not set";
+		}
+		return `${calibration.minServoValue}-${calibration.maxServoValue}`;
+	}
+
+	// Format servo value for display
+	formatServoValue(value: number | undefined): string {
+		return value !== undefined ? value.toString() : "---";
+	}
+
+	// Start calibration process
+	startCalibration(): void {
+		console.log("[CalibrationState] Starting calibration...");
+		this.isCalibrating = true;
+		this.progress = 0;
+
+		// Reset calibration data
+		Object.keys(this.jointCalibrations).forEach((jointName) => {
+			this.jointCalibrations[jointName] = {
+				isCalibrated: false,
+				minServoValue: undefined,
+				maxServoValue: undefined
+			};
+		});
+	}
+
+	// Complete calibration and mark joints as calibrated
+	completeCalibration(): Record<string, number> {
+		console.log("[CalibrationState] Completing calibration...");
+
+		const finalPositions: Record<string, number> = {};
+
+		// Mark all joints with sufficient range as calibrated
+		Object.keys(this.jointCalibrations).forEach((jointName) => {
+			const calibration = this.jointCalibrations[jointName];
+			if (calibration.minServoValue !== undefined && calibration.maxServoValue !== undefined) {
+				const range = calibration.maxServoValue - calibration.minServoValue;
+				if (range >= ROBOT_CONFIG.calibration.minRangeThreshold) {
+					calibration.isCalibrated = true;
+					finalPositions[jointName] = this.currentValues[jointName] || 0;
+					console.log(
+						`[CalibrationState] Joint ${jointName} calibrated: ${this.getJointRange(jointName)} (range: ${range})`
+					);
+				} else {
+					console.warn(
+						`[CalibrationState] Joint ${jointName} range too small: ${range} < ${ROBOT_CONFIG.calibration.minRangeThreshold}`
+					);
+				}
+			}
+		});
+
+		this.isCalibrating = false;
+		this.progress = 100;
+
+		// Notify completion callbacks
+		this.completionCallbacks.forEach((callback) => {
+			try {
+				callback(finalPositions);
+			} catch (error) {
+				console.error("[CalibrationState] Error in completion callback:", error);
+			}
+		});
+
+		return finalPositions;
+	}
+
+	// Cancel calibration
+	cancelCalibration(): void {
+		console.log("[CalibrationState] Calibration cancelled");
+		this.isCalibrating = false;
+		this.progress = 0;
+
+		// Reset calibration data
+		Object.keys(this.jointCalibrations).forEach((jointName) => {
+			this.jointCalibrations[jointName] = {
+				isCalibrated: false,
+				minServoValue: undefined,
+				maxServoValue: undefined
+			};
+		});
+	}
+
+	// Skip calibration (use predefined values)
+	skipCalibration(): void {
+		console.log("[CalibrationState] Skipping calibration with predefined values");
+
+		// Set predefined calibration values for SO-100 arm
+		const predefinedCalibrations = {
+			Rotation: { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
+			Pitch: { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
+			Elbow: { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
+			Wrist_Pitch: { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
+			Wrist_Roll: { minServoValue: 500, maxServoValue: 3500, isCalibrated: true },
+			Jaw: { minServoValue: 1000, maxServoValue: 3000, isCalibrated: true }
+		};
+
+		Object.entries(predefinedCalibrations).forEach(([jointName, calibration]) => {
+			this.jointCalibrations[jointName] = calibration;
+		});
+
+		this.isCalibrating = false;
+		this.progress = 100;
+	}
+
+	// Convert raw servo value to normalized percentage (for USB INPUT - reading from servo)
+	normalizeValue(rawValue: number, jointName: string): number {
+		const calibration = this.jointCalibrations[jointName];
+		if (
+			!calibration ||
+			!calibration.isCalibrated ||
+			calibration.minServoValue === undefined ||
+			calibration.maxServoValue === undefined
+		) {
+			// No calibration, use appropriate default conversion
+			const isGripper = jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper";
+			if (isGripper) {
+				return Math.max(0, Math.min(100, (rawValue / 4095) * 100));
+			} else {
+				return Math.max(-100, Math.min(100, ((rawValue - 2048) / 2048) * 100));
+			}
+		}
+
+		const { minServoValue, maxServoValue } = calibration;
+		if (maxServoValue === minServoValue) return 0;
+
+		// Bound the input servo value to calibrated range
+		const bounded = Math.max(minServoValue, Math.min(maxServoValue, rawValue));
+
+		const isGripper = jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper";
+		if (isGripper) {
+			// Gripper: 0-100%
+			return ((bounded - minServoValue) / (maxServoValue - minServoValue)) * 100;
+		} else {
+			// Regular joint: -100 to +100%
+			return ((bounded - minServoValue) / (maxServoValue - minServoValue)) * 200 - 100;
+		}
+	}
+
+	// Convert normalized percentage to raw servo value (for USB OUTPUT - writing to servo)
+	denormalizeValue(normalizedValue: number, jointName: string): number {
+		const calibration = this.jointCalibrations[jointName];
+		if (
+			!calibration ||
+			!calibration.isCalibrated ||
+			calibration.minServoValue === undefined ||
+			calibration.maxServoValue === undefined
+		) {
+			// No calibration, use appropriate default conversion
+			const isGripper = jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper";
+			if (isGripper) {
+				return Math.round((normalizedValue / 100) * 4095);
+			} else {
+				return Math.round(2048 + (normalizedValue / 100) * 2048);
+			}
+		}
+
+		const { minServoValue, maxServoValue } = calibration;
+		const range = maxServoValue - minServoValue;
+
+		let normalizedRatio: number;
+		const isGripper = jointName.toLowerCase() === "jaw" || jointName.toLowerCase() === "gripper";
+		if (isGripper) {
+			// Gripper: 0-100% -> 0-1
+			normalizedRatio = Math.max(0, Math.min(1, normalizedValue / 100));
+		} else {
+			// Regular joint: -100 to +100% -> 0-1
+			normalizedRatio = Math.max(0, Math.min(1, (normalizedValue + 100) / 200));
+		}
+
+		return Math.round(minServoValue + normalizedRatio * range);
+	}
+
+	// Register callback for calibration completion with final positions
+	onCalibrationCompleteWithPositions(
+		callback: (positions: Record<string, number>) => void
+	): () => void {
+		this.completionCallbacks.push(callback);
+
+		// Return unsubscribe function
+		return () => {
+			const index = this.completionCallbacks.indexOf(callback);
+			if (index >= 0) {
+				this.completionCallbacks.splice(index, 1);
+			}
+		};
+	}
+
+	// Update progress based on calibration coverage
+	private updateProgress(): void {
+		if (!this.isCalibrating) return;
+
+		let totalProgress = 0;
+		let jointCount = 0;
+
+		Object.values(this.jointCalibrations).forEach((calibration) => {
+			jointCount++;
+			if (calibration.minServoValue !== undefined && calibration.maxServoValue !== undefined) {
+				const range = calibration.maxServoValue - calibration.minServoValue;
+				// Progress is based on range size (more range = more progress)
+				const jointProgress = Math.min(
+					100,
+					(range / ROBOT_CONFIG.calibration.minRangeThreshold) * 100
+				);
+				totalProgress += jointProgress;
+			}
+		});
+
+		this.progress = jointCount > 0 ? totalProgress / jointCount : 0;
+	}
+
+	// Cleanup
+	destroy(): void {
+		this.completionCallbacks = [];
+	}
+}

src/lib/elements/robot/calibration/USBCalibrationPanel.svelte

@@ -39,7 +39,6 @@
 				}
 	);
 
-
 	async function startCalibration() {
 		await calibrationManager.startCalibration();
 	}
@@ -109,7 +108,8 @@
 				<div class="grid grid-cols-2 gap-2">
 					{#each jointNames as jointName}
 						{@const currentValue = calibrationManager.calibrationState.getCurrentValue(jointName)}
-						{@const calibration = calibrationManager.calibrationState.getJointCalibration(jointName)}
+						{@const calibration =
+							calibrationManager.calibrationState.getJointCalibration(jointName)}
 
 						<div class="space-y-1 rounded bg-slate-700/50 p-2">
 							<div class="flex items-center justify-between">
@@ -120,8 +120,16 @@
 							</div>
 
 							<div class="flex justify-between text-xs text-slate-500">
-								<span>Min: {calibrationManager.calibrationState.formatServoValue(calibration?.minServoValue)}</span>
-								<span>Max: {calibrationManager.calibrationState.formatServoValue(calibration?.maxServoValue)}</span>
+								<span
+									>Min: {calibrationManager.calibrationState.formatServoValue(
+										calibration?.minServoValue
+									)}</span
+								>
+								<span
+									>Max: {calibrationManager.calibrationState.formatServoValue(
+										calibration?.maxServoValue
+									)}</span
+								>
 							</div>
 
 							{#if calibration?.minServoValue !== undefined && calibration?.maxServoValue !== undefined && currentValue !== undefined}
@@ -167,7 +175,8 @@
 			<div class="max-h-32 overflow-y-auto">
 				<div class="grid grid-cols-2 gap-1">
 					{#each jointNames as jointName}
-						{@const calibration = calibrationManager.calibrationState.getJointCalibration(jointName)}
+						{@const calibration =
+							calibrationManager.calibrationState.getJointCalibration(jointName)}
 						{@const range = calibrationManager.calibrationState.getJointRange(jointName)}
 
 						<div class="flex items-center justify-between rounded bg-slate-700/30 p-2 text-xs">

src/lib/elements/robot/calibration/index.ts

@@ -1,2 +1,2 @@
-export { CalibrationState } from './CalibrationState.svelte.js';
-export { default as USBCalibrationPanel } from './USBCalibrationPanel.svelte'; 
+export { CalibrationState } from "./CalibrationState.svelte.js";
+export { default as USBCalibrationPanel } from "./USBCalibrationPanel.svelte";

src/lib/elements/robot/components/ConnectionPanel.svelte

@@ -42,11 +42,11 @@
 	// Find USB driver for calibration (if any)
 	function getUSBDriver(): any {
 		// Check consumer first
-		if (robot.consumer && 'calibrationState' in robot.consumer) {
+		if (robot.consumer && "calibrationState" in robot.consumer) {
 			return robot.consumer;
 		}
 		// Then check producers
-		return robot.producers.find(p => 'calibrationState' in p) || null;
+		return robot.producers.find((p) => "calibrationState" in p) || null;
 	}
 
 	async function connectUSBConsumer() {
@@ -62,7 +62,7 @@
 		} catch (err) {
 			console.error("Failed to connect USB consumer:", err);
 			// Check if it's a calibration error
-			if (err instanceof Error && err.message.includes('calibration')) {
+			if (err instanceof Error && err.message.includes("calibration")) {
 				pendingUSBConnection = "consumer";
 				showUSBCalibration = true;
 				return;
@@ -104,7 +104,7 @@
 		} catch (err) {
 			console.error("Failed to connect USB producer:", err);
 			// Check if it's a calibration error
-			if (err instanceof Error && err.message.includes('calibration')) {
+			if (err instanceof Error && err.message.includes("calibration")) {
 				pendingUSBConnection = "producer";
 				showUSBCalibration = true;
 				return;
@@ -545,9 +545,7 @@
 						onCancel={onCalibrationCancel}
 					/>
 				{:else}
-					<div class="text-center text-slate-400">
-						No USB driver available for calibration
-					</div>
+					<div class="text-center text-slate-400">No USB driver available for calibration</div>
 				{/if}
 			</div>
 		</div>

src/lib/elements/robot/components/RobotGrid.svelte

@@ -1,106 +1,111 @@
 <script lang="ts">
-  import { T } from "@threlte/core";
-  import { robotManager } from '../RobotManager.svelte.js';
-  import { settings } from '$lib/runes/settings.svelte';
-  import RobotItem from './RobotItem.svelte';
-  import type { Robot } from '../Robot.svelte.js';
-  
-  let selectedRobot = $state<Robot | null>(null);
-  let showConnectionModal = $state(false);
-  let modalType = $state<'consumer' | 'producer' | 'manual'>('consumer');
+	import { T } from "@threlte/core";
+	import { robotManager } from "../RobotManager.svelte.js";
+	import { settings } from "$lib/runes/settings.svelte";
+	import RobotItem from "./RobotItem.svelte";
+	import type { Robot } from "../Robot.svelte.js";
 
-  function handleRobotClick(robot: Robot, type: 'consumer' | 'producer' | 'manual') {
-    selectedRobot = robot;
-    modalType = type;
-    showConnectionModal = true;
-  }
+	let selectedRobot = $state<Robot | null>(null);
+	let showConnectionModal = $state(false);
+	let modalType = $state<"consumer" | "producer" | "manual">("consumer");
 
-  // Access reactive robots
-  const robots = $derived(robotManager.robots);
+	function handleRobotClick(robot: Robot, type: "consumer" | "producer" | "manual") {
+		selectedRobot = robot;
+		modalType = type;
+		showConnectionModal = true;
+	}
+
+	// Access reactive robots
+	const robots = $derived(robotManager.robots);
 </script>
 
 <T.Group>
-  {#each robots as robot (robot.id)}
-    <RobotItem 
-      {robot} 
-      onInteract={handleRobotClick}
-    />
-  {/each}
+	{#each robots as robot (robot.id)}
+		<RobotItem {robot} onInteract={handleRobotClick} />
+	{/each}
 </T.Group>
 
 <!-- Connection modal will be added here -->
 {#if showConnectionModal && selectedRobot}
-  <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
-    <div class="bg-slate-800 rounded-lg p-6 max-w-md w-full m-4 space-y-4">
-      <div class="flex justify-between items-center">
-        <h2 class="text-lg font-semibold text-white">
-          {modalType === 'consumer' ? 'Consumer Driver' : modalType === 'producer' ? 'Producer Drivers' : 'Manual Control'}
-        </h2>
-        <button
-          onclick={() => showConnectionModal = false}
-          class="text-gray-400 hover:text-white"
-        >
-          ✕
-        </button>
-      </div>
-      
-      <div class="space-y-3">
-        {#if modalType === 'consumer'}
-          <button
-            onclick={async () => {
-              await selectedRobot?.setConsumer({ type: 'usb', baudRate: 1000000 });
-              showConnectionModal = false;
-            }}
-            class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md"
-          >
-            Connect USB Consumer
-          </button>
-          <button
-            onclick={async () => {
-              await selectedRobot?.setConsumer({ 
-                type: 'remote', 
-                url: settings.transportServerUrl.replace('http://', 'ws://').replace('https://', 'wss://'), 
-                robotId: selectedRobot.id 
-              });
-              showConnectionModal = false;
-            }}
-            class="w-full px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md"
-          >
-            Connect Transport Consumer
-          </button>
-        {:else if modalType === 'producer'}
-          <button
-            onclick={async () => {
-              await selectedRobot?.addProducer({ type: 'usb', baudRate: 1000000 });
-              showConnectionModal = false;
-            }}
-            class="w-full px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md"
-          >
-            Connect USB Producer
-          </button>
-          <button
-            onclick={async () => {
-              await selectedRobot?.addProducer({ 
-                type: 'remote', 
-                url: settings.transportServerUrl.replace('http://', 'ws://').replace('https://', 'wss://'), 
-                robotId: selectedRobot.id 
-              });
-              showConnectionModal = false;
-            }}
-            class="w-full px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-md"
-          >
-            Connect Transport Producer
-          </button>
-        {:else}
-          <p class="text-gray-300">Manual control interface would go here</p>
-        {/if}
-      </div>
-      
-      <div class="text-xs text-slate-500 text-center">
-        {#if modalType !== 'manual'}
-          Note: USB connections will prompt for calibration if needed
-        {/if}
-      </div>
-    </div>
-  </div>
-{/if} 
+	<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+		<div class="m-4 w-full max-w-md space-y-4 rounded-lg bg-slate-800 p-6">
+			<div class="flex items-center justify-between">
+				<h2 class="text-lg font-semibold text-white">
+					{modalType === "consumer"
+						? "Consumer Driver"
+						: modalType === "producer"
+							? "Producer Drivers"
+							: "Manual Control"}
+				</h2>
+				<button
+					onclick={() => (showConnectionModal = false)}
+					class="text-gray-400 hover:text-white"
+				>
+					✕
+				</button>
+			</div>
+
+			<div class="space-y-3">
+				{#if modalType === "consumer"}
+					<button
+						onclick={async () => {
+							await selectedRobot?.setConsumer({ type: "usb", baudRate: 1000000 });
+							showConnectionModal = false;
+						}}
+						class="w-full rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
+					>
+						Connect USB Consumer
+					</button>
+					<button
+						onclick={async () => {
+							await selectedRobot?.setConsumer({
+								type: "remote",
+								url: settings.transportServerUrl
+									.replace("http://", "ws://")
+									.replace("https://", "wss://"),
+								robotId: selectedRobot.id
+							});
+							showConnectionModal = false;
+						}}
+						class="w-full rounded-md bg-purple-600 px-4 py-2 text-white hover:bg-purple-700"
+					>
+						Connect Transport Consumer
+					</button>
+				{:else if modalType === "producer"}
+					<button
+						onclick={async () => {
+							await selectedRobot?.addProducer({ type: "usb", baudRate: 1000000 });
+							showConnectionModal = false;
+						}}
+						class="w-full rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700"
+					>
+						Connect USB Producer
+					</button>
+					<button
+						onclick={async () => {
+							await selectedRobot?.addProducer({
+								type: "remote",
+								url: settings.transportServerUrl
+									.replace("http://", "ws://")
+									.replace("https://", "wss://"),
+								robotId: selectedRobot.id
+							});
+							showConnectionModal = false;
+						}}
+						class="w-full rounded-md bg-orange-600 px-4 py-2 text-white hover:bg-orange-700"
+					>
+						Connect Transport Producer
+					</button>
+				{:else}
+					<p class="text-gray-300">Manual control interface would go here</p>
+				{/if}
+			</div>
+
+			<div class="text-center text-xs text-slate-500">
+				{#if modalType !== "manual"}
+					Note: USB connections will prompt for calibration if needed
+				{/if}
+			</div>
+		</div>
+	</div>
+{/if}

src/lib/elements/robot/components/RobotItem.svelte

@@ -1,205 +1,217 @@
 <script lang="ts">
-  import { T } from "@threlte/core";
-  import { Billboard } from "@threlte/extras";
-  import type { Robot } from '../Robot.svelte.js';
-  import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
-  import { getRootLinks } from "@/components/3d/elements/robot/URDF/utils/UrdfParser";
-  import UrdfLink from "@/components/3d/elements/robot/URDF/primitives/UrdfLink.svelte";
-  import { ROBOT_CONFIG } from '../config.js';
-
-  interface Props {
-    robot: Robot;
-    onInteract: (robot: Robot, type: 'consumer' | 'producer' | 'manual') => void;
-  }
-
-  let { robot, onInteract }: Props = $props();
-
-  // Reactive values
-  const position = $derived(robot.position);
-  const hasConsumer = $derived(robot.hasConsumer);
-  const outputDriverCount = $derived(robot.outputDriverCount);
-  const isManualControl = $derived(robot.isManualControlEnabled);
-  const connectionStatus = $derived(robot.connectionStatus);
-  const jointArray = $derived(robot.jointArray);
-  
-  // Use the robot's stored URDF state (loaded once when robot was created)
-  const urdfRobotState = $derived(robot.urdfRobotState);
-
-  let isHovered = $state(false);
-  let isSelected = $state(false);
-  let lastJointValues = $state<Record<string, number>>({});
-
-  // Sync joint values from simplified Robot to URDF joints with optimized updates
-  $effect(() => {
-    if (!urdfRobotState || jointArray.length === 0) return;
-
-    // Check if this is the initial sync (no previous values recorded)
-    const isInitialSync = Object.keys(lastJointValues).length === 0;
-    
-    // Check if any joint values have actually changed (using config threshold)
-    const threshold = isInitialSync ? 0 : ROBOT_CONFIG.performance.uiUpdateThreshold;
-    const hasSignificantChanges = isInitialSync || jointArray.some(joint => 
-      Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold
-    );
-    if (!hasSignificantChanges) return;
-
-    // Batch update all joints that have changed (or all joints on initial sync)
-    let updatedCount = 0;
-    jointArray.forEach(joint => {
-      if (isInitialSync || Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold) {
-        lastJointValues[joint.name] = joint.value;
-        const urdfJoint = findUrdfJoint(urdfRobotState, joint.name);
-        if (urdfJoint) {
-          // Initialize rotation array if it doesn't exist
-          if (!urdfJoint.rotation) {
-            urdfJoint.rotation = [0, 0, 0];
-          }
-          
-          // Use the Robot's conversion method for proper coordinate mapping
-          const radians = robot.convertNormalizedToUrdfRadians(joint.name, joint.value);
-          const axis = urdfJoint.axis_xyz || [0, 0, 1];
-          
-          // Reset rotation and apply to the appropriate axis
-          urdfJoint.rotation = [0, 0, 0];
-          for (let i = 0; i < 3; i++) {
-            if (Math.abs(axis[i]) > 0.001) {
-              urdfJoint.rotation[i] = radians * axis[i];
-            }
-          }
-          updatedCount++;
-        }
-      }
-    });
-
-    if (updatedCount > 0) {
-      console.debug(`${isInitialSync ? 'Initial sync: ' : ''}Updated ${updatedCount} URDF joints for robot ${robot.id}`);
-    }
-  });
-
-  function findUrdfJoint(robot: any, jointName: string): any {
-    // Search through the robot's joints array
-    if (robot.joints && Array.isArray(robot.joints)) {
-      for (const joint of robot.joints) {
-        if (joint.name === jointName) {
-          return joint;
-        }
-      }
-    }
-    return null;
-  }
-
-  const { onPointerEnter, onPointerLeave } = useCursor();
-  interactivity();
+	import { T } from "@threlte/core";
+	import { Billboard } from "@threlte/extras";
+	import type { Robot } from "../Robot.svelte.js";
+	import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
+	import { getRootLinks } from "@/components/3d/elements/robot/URDF/utils/UrdfParser";
+	import UrdfLink from "@/components/3d/elements/robot/URDF/primitives/UrdfLink.svelte";
+	import { ROBOT_CONFIG } from "../config.js";
+
+	interface Props {
+		robot: Robot;
+		onInteract: (robot: Robot, type: "consumer" | "producer" | "manual") => void;
+	}
+
+	let { robot, onInteract }: Props = $props();
+
+	// Reactive values
+	const position = $derived(robot.position);
+	const hasConsumer = $derived(robot.hasConsumer);
+	const outputDriverCount = $derived(robot.outputDriverCount);
+	const isManualControl = $derived(robot.isManualControlEnabled);
+	const connectionStatus = $derived(robot.connectionStatus);
+	const jointArray = $derived(robot.jointArray);
+
+	// Use the robot's stored URDF state (loaded once when robot was created)
+	const urdfRobotState = $derived(robot.urdfRobotState);
+
+	let isHovered = $state(false);
+	let isSelected = $state(false);
+	let lastJointValues = $state<Record<string, number>>({});
+
+	// Sync joint values from simplified Robot to URDF joints with optimized updates
+	$effect(() => {
+		if (!urdfRobotState || jointArray.length === 0) return;
+
+		// Check if this is the initial sync (no previous values recorded)
+		const isInitialSync = Object.keys(lastJointValues).length === 0;
+
+		// Check if any joint values have actually changed (using config threshold)
+		const threshold = isInitialSync ? 0 : ROBOT_CONFIG.performance.uiUpdateThreshold;
+		const hasSignificantChanges =
+			isInitialSync ||
+			jointArray.some(
+				(joint) => Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold
+			);
+		if (!hasSignificantChanges) return;
+
+		// Batch update all joints that have changed (or all joints on initial sync)
+		let updatedCount = 0;
+		jointArray.forEach((joint) => {
+			if (isInitialSync || Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold) {
+				lastJointValues[joint.name] = joint.value;
+				const urdfJoint = findUrdfJoint(urdfRobotState, joint.name);
+				if (urdfJoint) {
+					// Initialize rotation array if it doesn't exist
+					if (!urdfJoint.rotation) {
+						urdfJoint.rotation = [0, 0, 0];
+					}
+
+					// Use the Robot's conversion method for proper coordinate mapping
+					const radians = robot.convertNormalizedToUrdfRadians(joint.name, joint.value);
+					const axis = urdfJoint.axis_xyz || [0, 0, 1];
+
+					// Reset rotation and apply to the appropriate axis
+					urdfJoint.rotation = [0, 0, 0];
+					for (let i = 0; i < 3; i++) {
+						if (Math.abs(axis[i]) > 0.001) {
+							urdfJoint.rotation[i] = radians * axis[i];
+						}
+					}
+					updatedCount++;
+				}
+			}
+		});
+
+		if (updatedCount > 0) {
+			console.debug(
+				`${isInitialSync ? "Initial sync: " : ""}Updated ${updatedCount} URDF joints for robot ${robot.id}`
+			);
+		}
+	});
+
+	function findUrdfJoint(robot: any, jointName: string): any {
+		// Search through the robot's joints array
+		if (robot.joints && Array.isArray(robot.joints)) {
+			for (const joint of robot.joints) {
+				if (joint.name === jointName) {
+					return joint;
+				}
+			}
+		}
+		return null;
+	}
+
+	const { onPointerEnter, onPointerLeave } = useCursor();
+	interactivity();
 </script>
 
 <T.Group
-  position.x={position.x}
-  position.y={position.y}
-  position.z={position.z}
-  scale={[10, 10, 10]}
-  rotation={[-Math.PI / 2, 0, 0]}
+	position.x={position.x}
+	position.y={position.y}
+	position.z={position.z}
+	scale={[10, 10, 10]}
+	rotation={[-Math.PI / 2, 0, 0]}
 >
-  {#if urdfRobotState}
-    <!-- URDF Robot representation -->
-    <T.Group
-      onclick={(event: IntersectionEvent<MouseEvent>) => {
-        event.stopPropagation();
-        isSelected = true;
-        onInteract(robot, 'manual');
-      }}
-      onpointerenter={(event: IntersectionEvent<PointerEvent>) => {
-        event.stopPropagation();
-        onPointerEnter();
-        isHovered = true;
-      }}
-      onpointerleave={(event: IntersectionEvent<PointerEvent>) => {
-        event.stopPropagation();
-        onPointerLeave();
-        isHovered = false;
-      }}
-    >
-      {#each getRootLinks(urdfRobotState) as link}
-        <UrdfLink
-          robot={urdfRobotState}
-          {link}
-          textScale={0.2}
-          showName={isHovered || isSelected}
-          showVisual={true}
-          showCollision={false}
-          visualColor={connectionStatus.isConnected ? "#10b981" : "#6b7280"}
-          visualOpacity={isHovered || isSelected ? 0.4 : 1.0}
-          collisionOpacity={1.0}
-          collisionColor="#813d9c"
-          jointNames={isHovered}
-          joints={isHovered}
-          jointColor="#62a0ea"
-          jointIndicatorColor="#f66151"
-          nameHeight={0.1}
-          showLine={isHovered || isSelected}
-          opacity={1}
-        />
-      {/each}
-    </T.Group>
-  {:else}
-    <!-- Fallback simple representation while URDF loads -->
-    <T.Mesh
-      onpointerenter={() => isHovered = true}
-      onpointerleave={() => isHovered = false}
-      onclick={() => onInteract(robot, 'manual')}
-    >
-      <T.BoxGeometry args={[0.1, 0.1, 0.1]} />
-      <T.MeshStandardMaterial 
-        color={connectionStatus.isConnected ? "#10b981" : "#6b7280"}
-        opacity={isHovered ? 0.8 : 1.0}
-        transparent
-      />
-    </T.Mesh>
-  {/if}
-
-  <!-- Status billboard when hovered -->
-  {#if isHovered}
-    <Billboard>
-      <T.Group position.y={1.5}>
-        <div class="bg-slate-800/90 rounded-lg p-3 text-white text-sm min-w-48 backdrop-blur">
-          <div class="font-semibold mb-2">{robot.id}</div>
-          
-          <!-- Connection status boxes -->
-          <div class="flex gap-2 mb-2">
-            <!-- Consumer status -->
-            <button
-              onclick={() => onInteract(robot, 'consumer')}
-              class="flex-1 p-2 rounded border transition-colors {hasConsumer ? 'bg-green-600 border-green-500' : 'bg-gray-600 border-gray-500 hover:bg-gray-500'}"
-            >
-              <div class="text-xs">Consumer</div>
-              <div class="text-[10px] opacity-75">
-                {hasConsumer ? 'Connected' : 'None'}
-              </div>
-            </button>
-
-            <!-- Robot status -->
-            <div class="flex-1 p-2 rounded border border-yellow-500 bg-yellow-600">
-              <div class="text-xs">Robot</div>
-              <div class="text-[10px] opacity-75">{robot.jointArray.length} joints</div>
-            </div>
-
-            <!-- Producer status -->
-            <button
-              onclick={() => onInteract(robot, 'producer')}
-              class="flex-1 p-2 rounded border transition-colors {outputDriverCount > 0 ? 'bg-blue-600 border-blue-500' : 'bg-gray-600 border-gray-500 hover:bg-gray-500'}"
-            >
-              <div class="text-xs">Producer</div>
-              <div class="text-[10px] opacity-75">
-                {outputDriverCount} driver{outputDriverCount !== 1 ? 's' : ''}
-              </div>
-            </button>
-          </div>
-
-          <!-- Control status -->
-          <div class="text-xs text-center px-2 py-1 rounded {isManualControl ? 'bg-purple-600' : 'bg-orange-600'}">
-            {isManualControl ? 'Manual Control' : 'External Control'}
-          </div>
-        </div>
-      </T.Group>
-    </Billboard>
-  {/if}
-</T.Group> 
+	{#if urdfRobotState}
+		<!-- URDF Robot representation -->
+		<T.Group
+			onclick={(event: IntersectionEvent<MouseEvent>) => {
+				event.stopPropagation();
+				isSelected = true;
+				onInteract(robot, "manual");
+			}}
+			onpointerenter={(event: IntersectionEvent<PointerEvent>) => {
+				event.stopPropagation();
+				onPointerEnter();
+				isHovered = true;
+			}}
+			onpointerleave={(event: IntersectionEvent<PointerEvent>) => {
+				event.stopPropagation();
+				onPointerLeave();
+				isHovered = false;
+			}}
+		>
+			{#each getRootLinks(urdfRobotState) as link}
+				<UrdfLink
+					robot={urdfRobotState}
+					{link}
+					textScale={0.2}
+					showName={isHovered || isSelected}
+					showVisual={true}
+					showCollision={false}
+					visualColor={connectionStatus.isConnected ? "#10b981" : "#6b7280"}
+					visualOpacity={isHovered || isSelected ? 0.4 : 1.0}
+					collisionOpacity={1.0}
+					collisionColor="#813d9c"
+					jointNames={isHovered}
+					joints={isHovered}
+					jointColor="#62a0ea"
+					jointIndicatorColor="#f66151"
+					nameHeight={0.1}
+					showLine={isHovered || isSelected}
+					opacity={1}
+				/>
+			{/each}
+		</T.Group>
+	{:else}
+		<!-- Fallback simple representation while URDF loads -->
+		<T.Mesh
+			onpointerenter={() => (isHovered = true)}
+			onpointerleave={() => (isHovered = false)}
+			onclick={() => onInteract(robot, "manual")}
+		>
+			<T.BoxGeometry args={[0.1, 0.1, 0.1]} />
+			<T.MeshStandardMaterial
+				color={connectionStatus.isConnected ? "#10b981" : "#6b7280"}
+				opacity={isHovered ? 0.8 : 1.0}
+				transparent
+			/>
+		</T.Mesh>
+	{/if}
+
+	<!-- Status billboard when hovered -->
+	{#if isHovered}
+		<Billboard>
+			<T.Group position.y={1.5}>
+				<div class="min-w-48 rounded-lg bg-slate-800/90 p-3 text-sm text-white backdrop-blur">
+					<div class="mb-2 font-semibold">{robot.id}</div>
+
+					<!-- Connection status boxes -->
+					<div class="mb-2 flex gap-2">
+						<!-- Consumer status -->
+						<button
+							onclick={() => onInteract(robot, "consumer")}
+							class="flex-1 rounded border p-2 transition-colors {hasConsumer
+								? 'border-green-500 bg-green-600'
+								: 'border-gray-500 bg-gray-600 hover:bg-gray-500'}"
+						>
+							<div class="text-xs">Consumer</div>
+							<div class="text-[10px] opacity-75">
+								{hasConsumer ? "Connected" : "None"}
+							</div>
+						</button>
+
+						<!-- Robot status -->
+						<div class="flex-1 rounded border border-yellow-500 bg-yellow-600 p-2">
+							<div class="text-xs">Robot</div>
+							<div class="text-[10px] opacity-75">{robot.jointArray.length} joints</div>
+						</div>
+
+						<!-- Producer status -->
+						<button
+							onclick={() => onInteract(robot, "producer")}
+							class="flex-1 rounded border p-2 transition-colors {outputDriverCount > 0
+								? 'border-blue-500 bg-blue-600'
+								: 'border-gray-500 bg-gray-600 hover:bg-gray-500'}"
+						>
+							<div class="text-xs">Producer</div>
+							<div class="text-[10px] opacity-75">
+								{outputDriverCount} driver{outputDriverCount !== 1 ? "s" : ""}
+							</div>
+						</button>
+					</div>
+
+					<!-- Control status -->
+					<div
+						class="rounded px-2 py-1 text-center text-xs {isManualControl
+							? 'bg-purple-600'
+							: 'bg-orange-600'}"
+					>
+						{isManualControl ? "Manual Control" : "External Control"}
+					</div>
+				</div>
+			</T.Group>
+		</Billboard>
+	{/if}
+</T.Group>

src/lib/elements/robot/components/index.ts

@@ -1,5 +1,5 @@
 // Robot components exports
-export { default as RobotItem } from './RobotItem.svelte';
-export { default as RobotGrid } from './RobotGrid.svelte';
-export { default as ConnectionPanel } from './ConnectionPanel.svelte';
-export { default as RobotControls } from './RobotControls.svelte'; 
+export { default as RobotItem } from "./RobotItem.svelte";
+export { default as RobotGrid } from "./RobotGrid.svelte";
+export { default as ConnectionPanel } from "./ConnectionPanel.svelte";
+export { default as RobotControls } from "./RobotControls.svelte";