Update

README.md

@@ -1,297 +1,327 @@
 ---
-title: LeRobot Arena Frontend
+title: RobotHub Arena Frontend
+tags:
+  - robotics
+  - control
+  - simulation
+  - svelte
+  - frontend
+  - realtime
 emoji: 🤖
 colorFrom: blue
 colorTo: purple
 sdk: docker
 app_port: 8000
 pinned: true
-fullWidth: true
 license: mit
-short_description: A web-based robotics control and simulation platform
-tags:
-  - robotics
-  - control
-  - simulation
-  - svelte
-  - static
-  - frontend
+fullWidth: true
+short_description: Web interface of the RobotHub platform – build, monitor & control robots with AI assistance
 ---
 
-# 🤖 LeRobot Arena
+# 🤖 RobotHub Arena – Frontend
 
-A web-based robotics control and simulation platform that bridges digital twins and physical robots. Built with Svelte for the frontend and FastAPI for the backend.
+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.
 
-## 🚀 Simple Deployment Options
+**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:
 
-Here are the easiest ways to deploy this Svelte frontend:
+1. **[RobotHub Transport Server](https://github.com/julien-blanchon/RobotHub-TransportServer)**  
+   – WebSocket / WebRTC switch-board for video streams & robot joint messages.
+2. **[RobotHub Inference Server](https://github.com/julien-blanchon/RobotHub-InferenceServer)**  
+   – FastAPI service that loads large language- and vision-based policies (ACT, Pi-0, SmolVLA, …) and turns camera images + state into joint commands.
 
-### 🏆 Option 1: Hugging Face Spaces (Static) - RECOMMENDED ✨
+```text
+┌────────────────────┐        ┌────────────────────────┐             ┌──────────────────────────┐
+│  RobotHub Frontend │  HTTP  │  Transport Server      │   WebSocket │   Robot / Camera HW      │
+│  (this repo)       │ <────► │  (rooms, WS, WebRTC)   │ ◄──────────►│   – servo bus, USB…      │
+│                    │        └────────────────────────┘             └──────────────────────────┘
+│  3-D scene (Threlte)│
+│  UI / Settings     │        ┌────────────────────────┐
+│  Svelte 5 runes    │  HTTP  │  Inference Server      │   HTTP/WS   │  GPU (Torch, HF models)  │
+└────────────────────┘ <────► │  (FastAPI, PyTorch)     │ ◄──────────►└──────────────────────────┘
+                           └────────────────────────┘
+```
 
-**Automatic deployment** (easiest):
-1. **Fork this repository** to your GitHub account
-2. **Create a new Space** on [Hugging Face Spaces](https://huggingface.co/spaces)
-3. **Connect your GitHub repo** - it will auto-detect the static SDK
-4. **Push to main branch** - auto-builds and deploys!
+---
 
-The frontmatter is already configured with:
-```yaml
-sdk: static
-app_build_command: bun install && bun run build
-app_file: build/index.html
-```
+## ✨ Key Features
 
-**Manual upload**:
-1. Run `bun install && bun run build` locally
-2. Create a Space with "Static HTML" SDK
-3. Upload all files from `build/` folder
-
-### 🚀 Option 2: Vercel - One-Click Deploy
-
-[![Deploy to Vercel](https://vercel.com/button)](https://vercel.com/new)
-
-Settings: Build command `bun run build`, Output directory `build`
-
-### 📁 Option 3: Netlify - Drag & Drop
-
-1. Build locally: `bun install && bun run build`
-2. Drag `build/` folder to [Netlify](https://netlify.com)
-
-### 🆓 Option 4: GitHub Pages
-
-Add this workflow file (`.github/workflows/deploy.yml`):
-```yaml
-name: Deploy to GitHub Pages
-on:
-  push:
-    branches: [ main ]
-jobs:
-  deploy:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: oven-sh/setup-bun@v1
-      - run: bun install --frozen-lockfile
-      - run: bun run build
-      - uses: peaceiris/actions-gh-pages@v3
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
-```
+• **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.  
+• **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.
 
-### 🐳 Option 5: Docker (Optional)
+---
 
-For local development or custom hosting:
-```bash
-docker build -t lerobot-arena-frontend .
-docker run -p 3000:3000 lerobot-arena-frontend
-```
+## 📂 Repository Layout (short)
 
-The Docker setup uses Bun's simple static server - much simpler than the complex server.js approach!
+| 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 |
 
-## 🛠️ Development Setup
+A more in-depth component overview can be found in `/src/lib/components/**` – every major popup/modal has its own Svelte file.
 
-For local development with hot-reload capabilities:
+---
 
-### Frontend Development
+## 🚀 Quick Start (dev)
 
 ```bash
-# Install dependencies
-bun install
+# 1. clone with submodules (transport + inference)
+$ git clone --recurse-submodules https://github.com/julien-blanchon/RobotHub-Frontend robothub-frontend
+$ cd robothub-frontend
 
-# Start the development server
-bun run dev
+# 2. install deps (uses Bun)
+$ bun install
 
-# Or open in browser automatically
-bun run dev -- --open
+# 3. start dev server (http://localhost:5173)
+$ bun run dev -- --open
 ```
 
-### Backend Development
+### Running the full stack locally
 
 ```bash
-# Navigate to Python backend
-cd src-python
-
-# Install Python dependencies (using uv)
-uv sync
+# 1. start Transport Server (rooms & streaming)
+$ cd external/RobotHub-InferenceServer/external/RobotHub-TransportServer/server
+$ uv run launch_with_ui.py  # →  http://localhost:8000
 
-# Or using pip
-pip install -e .
+# 2. start Inference Server (AI brains)
+$ cd ../../..
+$ python launch_simple.py   # →  http://localhost:8001
 
-# Start the backend server
-python start_server.py
+# 3. frontend (separate terminal)
+$ bun run dev -- --open     # →  http://localhost:5173  (hash = workspace-id)
 ```
 
-### Building Standalone Executable
+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 backend can be packaged as a standalone executable using box-packager:
+---
 
-```bash
-# Navigate to Python backend
-cd src-python
+## 🛠️ Usage Walk-Through
 
-# Install box-packager (if not already installed)
-uv pip install box-packager
+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 (`./checkpoints/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. 🎉
 
-# Package the application
-box package
+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.
 
-# The executable will be in target/release/lerobot-arena-server
-./target/release/lerobot-arena-server
-```
+---
 
-Note: Requires [Rust/Cargo](https://rustup.rs/) to be installed for box-packager to work.
+## 🧩 Package Relations
 
-## 📋 Project Structure
+| 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. | – |
 
-```
-lerobot-arena/
-├── src/                    # Svelte frontend source
-│   ├── lib/               # Reusable components and utilities
-│   ├── routes/            # SvelteKit routes
-│   └── app.html           # App template
-├── src-python/            # Python backend
-│   ├── src/               # Python source code
-│   ├── start_server.py    # Server entry point
-│   ├── target/            # Box-packager build output (excluded from git)
-│   └── pyproject.toml     # Python dependencies
-├── static/                # Static assets
-├── Dockerfile             # Docker configuration
-├── docker-compose.yml     # Docker Compose setup
-└── package.json           # Node.js dependencies
-```
+> Because the two backend repos are included as git sub-modules you can develop & debug the whole trio in one repo clone.
 
-## 🐳 Docker Information
+---
 
-The Docker setup includes:
+## 📜 Important Components (frontend)
 
-- **Multi-stage build**: Optimized for production using Bun and uv
-- **Automatic startup**: Both services start together
-- **Port mapping**: Backend on 8080, Frontend on 3000 (HF Spaces compatible)
-- **Static file serving**: Compiled Svelte app served efficiently
-- **User permissions**: Properly configured for Hugging Face Spaces
-- **Standalone executable**: Backend packaged with box-packager for faster startup
+• `RemoteComputeManager` – wraps the Inference Server REST API.  
+• `RobotManager` – talks to Transport Server and USB drivers.  
+• `VideoManager` – handles local/remote camera streams and WebRTC.
 
-For detailed Docker documentation, see [DOCKER_README.md](./DOCKER_README.md).
+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:
 
-## 🔧 Building for Production
+```
+AISessionConnectionModal     – create / start / stop AI sessions
+RobotInputConnectionModal    – joint-states → AI
+RobotOutputConnectionModal   – AI commands → robot
+VideoInputConnectionModal    – camera → AI or screen
+ManualControlSheet           – slider control, runs when no consumer connected
+SettingsSheet                – configure base URLs of the two servers
+```
 
-### Frontend Only
+---
 
-```bash
-bun run build
-```
+## 🐳 Docker
 
-### Backend Standalone Executable
+A production-grade image is provided (multi-stage, 24 MB with Bun runtime):
 
 ```bash
-cd src-python
-box package
+$ docker build -t robothub-frontend .
+$ docker run -p 8000:8000 robothub-frontend  # served by vite-preview
 ```
 
-### Complete Docker Build
+See `Dockerfile` for the full build – it also performs `bun test` & `bun run build` for the TS clients inside the sub-modules so that the image is completely self-contained.
 
-```bash
-docker-compose up --build
-```
+---
 
-## 🌐 What's Included
+## 🧑‍💻 Contributing
 
-- **Real-time Robot Control**: WebSocket-based communication
-- **3D Visualization**: Three.js integration for robot visualization
-- **URDF Support**: Load and display robot models
-- **Multi-robot Management**: Control multiple robots simultaneously
-- **WebSocket API**: Real-time bidirectional communication
-- **Standalone Distribution**: Self-contained executable with box-packager
+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.
 
-## 🚨 Troubleshooting
+1. `bun test` – unit tests.  
+2. `bun run typecheck` – strict TS config.
 
-### Port Conflicts
+Please run `bun format` before committing – ESLint + Prettier configs are included.
 
-If ports 8080 or 3000 are already in use:
+---
 
-```bash
-# Check what's using the ports
-lsof -i :8080
-lsof -i :3000
+## 🙏 Special Thanks
 
-# Use different ports
-docker run -p 8081:8080 -p 7861:3000 lerobot-arena
-```
+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. 
+---
 
-### Container Issues
+## 📄 License
 
-```bash
-# View logs
-docker-compose logs lerobot-arena
+MIT – see `LICENSE` in the root.
 
-# Rebuild without cache
-docker-compose build --no-cache
-docker-compose up
-```
+## 🌱 Project Philosophy
 
-### Development Issues
+RobotHub follows a **separation-of-concerns** design:
 
-```bash
-# Clear node modules and reinstall
-rm -rf node_modules
-bun install
+* **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
 
-# Clear Svelte kit cache
-rm -rf .svelte-kit
-bun run dev
+```
+Browser / Robot ⟷  🌐 Transport Server  ⟷  Other Browser / AI / HW
 ```
 
-### Box-packager Issues
+* **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.
 
-```bash
-# Clean build artifacts
-cd src-python
-box clean
+Why useful?
 
-# Rebuild executable
-box package
+* 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.
 
-# Install cargo if missing
-curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+## 🏢  Workspaces – Lightweight Multi-Tenant Isolation
+
+A **workspace** is simply a UUID namespace in the Transport Server.  Every room URL starts with:
+
+```
+/robotics/workspaces/{workspace_id}/rooms/{room_id}
+/video/workspaces/{workspace_id}/rooms/{room_id}
 ```
 
-## 🚀 Hugging Face Spaces Deployment
+Why bother?
 
-This project is configured for **Static HTML** deployment on Hugging Face Spaces (much simpler than Docker!):
+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.
+4. **Stateless Scale-out** – Transport Server holds no global state; deleting a workspace removes all rooms in one call.
 
-**Manual Upload (Easiest):**
-1. Run `bun install && bun run build` locally
-2. Create a new Space with "Static HTML" SDK
-3. Upload all files from `build/` folder
-4. Your app is live!
+Typical lifecycle:
 
-**GitHub Integration:**
-1. Fork this repository 
-2. Create a Space and connect your GitHub repo
-3. The Static HTML SDK will be auto-detected from the README frontmatter
-4. Push changes to auto-deploy
+* **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`)
 
-No Docker, no complex setup - just static files! 🎉
+> Practical tip: Use one workspace per demo to prevent collisions, then recycle it afterwards.
 
-## 📚 Additional Documentation
+---
 
-- [Docker Setup Guide](./DOCKER_README.md) - Detailed Docker instructions
-- [Robot Architecture](./ROBOT_ARCHITECTURE.md) - System architecture overview
-- [Robot Instancing Guide](./ROBOT_INSTANCING_README.md) - Multi-robot setup
+## 🧠  Inference Server – Session Lifecycle
+
+1. **Create session**  
+   `POST /api/sessions` with JSON:
+   ```jsonc
+   {
+     "session_id": "pick_place_demo",
+     "policy_path": "./checkpoints/act_so101_beyond",
+     "camera_names": ["front", "wrist"],
+     "transport_server_url": "http://localhost:8000",
+     "workspace_id": "<existing-or-new>"  // optional
+   }
+   ```
+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"
+   }
+   ```
+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).
+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`.
+
+The Frontend automates steps 1-4 via the *AI Session* modal – you only click buttons.
 
-## 🤝 Contributing
+---
 
-1. Fork the repository
-2. Create a feature branch
-3. Make your changes
-4. Test with Docker: `docker-compose up --build`
-5. Submit a pull request
+## 🌐 Hosted Demo End-Points
 
-## 📄 License
+| 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` |
 
-This project is licensed under the MIT License.
+Point the *Settings → Server Configuration* panel to these URLs and you can play without any local backend.
 
 ---
 
-**Built with ❤️ for the robotics community** 🤖
+## 🎯 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.
+
+### Direct Tele-Operation (Leader ➜ Follower)
+*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*
+
+### Web-UI Manual Control
+**Browser sliders** (`ManualControlSheet`) → `Remote producer` → **Robot (USB)**
+
+> No physical master arm needed – drive joints from any device.
+>
+> 📺 *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*
+
+### 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.
+
+> Useful for swarm behaviours or classroom demonstrations.
+>
+> 📺 *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
+
+> Ideal when the camera PC stays close to sensors and you want minimal upstream bandwidth.
+>
+> 📺 *demo-splitio.mp4*

docker-build.sh

@@ -1,30 +0,0 @@
-#!/bin/bash
-
-# Build and run the LeRobot Arena Frontend Docker container
-
-set -e
-
-echo "🏗️  Building LeRobot Arena Frontend Docker image..."
-
-# Build the image
-docker build -t lerobot-arena-svelte-frontend .
-
-echo "✅ Build completed successfully!"
-
-echo "🚀 Starting the container..."
-
-# Run the container
-docker run -d \
-  --name lerobot-arena-svelte-frontend \
-  -p 3000:3000 \
-  --restart unless-stopped \
-  lerobot-arena-svelte-frontend
-
-echo "✅ Container started successfully!"
-echo "🌐 Frontend is available at: http://localhost:3000"
-echo ""
-echo "📋 Useful commands:"
-echo "  • View logs:    docker logs -f lerobot-arena-svelte-frontend"
-echo "  • Stop:         docker stop lerobot-arena-svelte-frontend"
-echo "  • Remove:       docker rm lerobot-arena-svelte-frontend"
-echo "  • Health check: docker inspect --format='{{.State.Health.Status}}' lerobot-arena-svelte-frontend" 

log.txt

@@ -1 +0,0 @@
-.venv/bin/python: can't open file '/Users/julienblanchon/Git/lerobot-arena/lerobot-arena/src-python-video/src/main.py': [Errno 2] No such file or directory

src/lib/components/3d/Floor.svelte

@@ -1,30 +1,24 @@
 <script lang="ts">
 	import { T } from "@threlte/core";
-	import { PlaneGeometry } from 'three';
-	import { Grid } from '@threlte/extras'
+	import { PlaneGeometry } from "three";
+	import { Grid } from "@threlte/extras";
 	import { mode } from "mode-watcher";
-	
+
 	const floorGeometry = new PlaneGeometry(20, 20);
 </script>
 
-<T.Mesh 
-	receiveShadow 
-	position.y={0} 
-	rotation.x={-Math.PI / 2}
-	frustumCulled={false}
->
+<T.Mesh receiveShadow position.y={0} rotation.x={-Math.PI / 2} frustumCulled={false}>
 	<T is={floorGeometry} />
-	<T.ShadowMaterial 
-		opacity={0.3} 
+	<T.ShadowMaterial
+		opacity={0.3}
 		transparent={true}
 		polygonOffset={true}
 		polygonOffsetFactor={1}
 		polygonOffsetUnits={1}
 	/>
 </T.Mesh>
-<Grid 
-	backgroundColor={mode.current === 'dark' ? "#dadada" : "#e2e8f0"}
-	cellColor={mode.current === 'dark' ? "#000000" : "#94a3b8"}
-	selectionColor={mode.current === 'dark' ? "#0000ee" : "#3b82f6"}
+<Grid
+	backgroundColor={mode.current === "dark" ? "#dadada" : "#e2e8f0"}
+	cellColor={mode.current === "dark" ? "#000000" : "#94a3b8"}
+	selectionColor={mode.current === "dark" ? "#0000ee" : "#3b82f6"}
 />
-

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

@@ -12,7 +12,8 @@
 		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
 	}
 
-	let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props = $props();
+	let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props =
+		$props();
 
 	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
 	interactivity();
@@ -31,21 +32,16 @@
 	position.z={compute.position.z}
 	scale={[1, 1, 1]}
 >
-	<T.Group
-		onpointerenter={onPointerEnter}
-		onpointerleave={onPointerLeave}
-		onclick={handleClick}
-	>
+	<T.Group onpointerenter={onPointerEnter} onpointerleave={onPointerLeave} onclick={handleClick}>
 		<GPU rotating={$hovering} />
 	</T.Group>
 	<T.Group scale={[8, 8, 8]} rotation={[-Math.PI / 2, 0, 0]}>
 		<ComputeStatusBillboard
 			{compute}
-			offset={0.8}
 			{onVideoInputBoxClick}
 			{onRobotInputBoxClick}
 			{onRobotOutputBoxClick}
 			visible={isToggled}
 		/>
 	</T.Group>
-</T.Group> 
+</T.Group>

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

@@ -1,13 +1,9 @@
 <script lang="ts">
-	import { useCursor } from '@threlte/extras'
 	import { T } from "@threlte/core";
-	import { HTML, type IntersectionEvent } from "@threlte/extras";
-	import { GLTF, useGltf } from "@threlte/extras";
+	import { useGltf } from "@threlte/extras";
 	import Model from "./GPUModel.svelte";
 	import { Shape, Path, ExtrudeGeometry, BoxGeometry } from "three";
 	import { onMount } from "svelte";
-	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
-	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 
 	// Props interface
 	interface Props {
@@ -114,25 +110,9 @@
 	{rotation}
 	{scale}
 >
-	<!-- TV Frame -->
-	<!-- <T.Mesh geometry={frameGeometry}>
-		<T.MeshStandardMaterial
-			color={"#374151"}
-			metalness={0.05}
-			roughness={0.4}
-			envMapIntensity={0.3}
-		/>
-	</T.Mesh> -->
 	<T.Group
 		scale={[1, 1, 1]}
 	>
 		<Model fan_rotation={fan_rotation} />
 	</T.Group>
-	<!-- <GLTF castShadow receiveShadow gltf={$gltf} position={{ y: 1 }} scale={3} /> -->
-
-	<!-- <T.Group scale={[1,1,1]}>
-		{#if $gltf}
-			<T is={$gltf.nodes['Sketchfab_model']} />
-		{/if}
-	</T.Group> -->
 </T.Group>

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

@@ -21,9 +21,9 @@
 	let { open = $bindable(), compute, workspaceId }: Props = $props();
 
 	let isConnecting = $state(false);
-	let sessionId = $state('');
-	let policyPath = $state('./checkpoints/act_so101_beyond');
-	let cameraNames = $state('front');
+	let sessionId = $state("");
+	let policyPath = $state("./checkpoints/act_so101_beyond");
+	let cameraNames = $state("front");
 	let useProvidedWorkspace = $state(false);
 
 	// Auto-generate session ID when modal opens
@@ -37,15 +37,18 @@
 		if (!compute) return;
 
 		if (!sessionId.trim() || !policyPath.trim()) {
-			toast.error('Please fill in all required fields');
+			toast.error("Please fill in all required fields");
 			return;
 		}
 
 		isConnecting = true;
 		try {
-			const cameras = cameraNames.split(',').map(name => name.trim()).filter(name => name);
+			const cameras = cameraNames
+				.split(",")
+				.map((name) => name.trim())
+				.filter((name) => name);
 			if (cameras.length === 0) {
-				cameras.push('front');
+				cameras.push("front");
 			}
 
 			const config: AISessionConfig = {
@@ -64,8 +67,8 @@
 				toast.error(`Failed to create session: ${result.error}`);
 			}
 		} catch (error) {
-			console.error('Session creation error:', error);
-			toast.error('Failed to create session');
+			console.error("Session creation error:", error);
+			toast.error("Failed to create session");
 		} finally {
 			isConnecting = false;
 		}
@@ -78,13 +81,13 @@
 		try {
 			const result = await remoteComputeManager.startSession(compute.id);
 			if (result.success) {
-				toast.success('Inference Session started');
+				toast.success("Inference Session started");
 			} else {
 				toast.error(`Failed to start session: ${result.error}`);
 			}
 		} catch (error) {
-			console.error('Session start error:', error);
-			toast.error('Failed to start session');
+			console.error("Session start error:", error);
+			toast.error("Failed to start session");
 		} finally {
 			isConnecting = false;
 		}
@@ -97,13 +100,13 @@
 		try {
 			const result = await remoteComputeManager.stopSession(compute.id);
 			if (result.success) {
-				toast.success('Inference Session stopped');
+				toast.success("Inference Session stopped");
 			} else {
 				toast.error(`Failed to stop session: ${result.error}`);
 			}
 		} catch (error) {
-			console.error('Session stop error:', error);
-			toast.error('Failed to stop session');
+			console.error("Session stop error:", error);
+			toast.error("Failed to stop session");
 		} finally {
 			isConnecting = false;
 		}
@@ -116,13 +119,13 @@
 		try {
 			const result = await remoteComputeManager.deleteSession(compute.id);
 			if (result.success) {
-				toast.success('Inference Session deleted');
+				toast.success("Inference Session deleted");
 			} else {
 				toast.error(`Failed to delete session: ${result.error}`);
 			}
 		} catch (error) {
-			console.error('Session delete error:', error);
-			toast.error('Failed to delete session');
+			console.error("Session delete error:", error);
+			toast.error("Failed to delete session");
 		} finally {
 			isConnecting = false;
 		}
@@ -134,9 +137,11 @@
 		class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
 				<span class="icon-[mdi--robot-outline] size-5 text-purple-500 dark:text-purple-400"></span>
-				AI Compute Session - {compute.name || 'No Compute Selected'}
+				AI Compute Session - {compute.name || "No Compute Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure and manage ACT model inference sessions for robot control
@@ -150,70 +155,100 @@
 			>
 				<div class="flex items-center gap-2">
 					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Session Status</span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
+						>Session Status</span
+					>
 				</div>
 				{#if compute.hasSession}
 					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+						>No Session</Badge
+					>
 				{/if}
 			</div>
 
 			<!-- Current Session Details -->
 			{#if compute.hasSession && compute.sessionData}
-				<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
+				<Card.Root
+					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+						>
 							<span class="icon-[mdi--cog] size-4"></span>
 							Current Session
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-3">
-							<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
+							<div
+								class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
+							>
 								<div class="grid grid-cols-2 gap-2 text-xs">
 									<div>
-										<span class="text-purple-700 font-medium dark:text-purple-300">Session ID:</span>
-										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionId}</span>
+										<span class="font-medium text-purple-700 dark:text-purple-300">Session ID:</span
+										>
+										<span class="block text-purple-800 dark:text-purple-100"
+											>{compute.sessionId}</span
+										>
 									</div>
 									<div>
-										<span class="text-purple-700 font-medium dark:text-purple-300">Status:</span>
-										<span class="text-purple-800 block dark:text-purple-100">{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span>
+										<span class="font-medium text-purple-700 dark:text-purple-300">Status:</span>
+										<span class="block text-purple-800 dark:text-purple-100"
+											>{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span
+										>
 									</div>
 									<div>
-										<span class="text-purple-700 font-medium dark:text-purple-300">Policy:</span>
-										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionConfig?.policyPath}</span>
+										<span class="font-medium text-purple-700 dark:text-purple-300">Policy:</span>
+										<span class="block text-purple-800 dark:text-purple-100"
+											>{compute.sessionConfig?.policyPath}</span
+										>
 									</div>
 									<div>
-										<span class="text-purple-700 font-medium dark:text-purple-300">Cameras:</span>
-										<span class="text-purple-800 block dark:text-purple-100">{compute.sessionConfig?.cameraNames.join(', ')}</span>
+										<span class="font-medium text-purple-700 dark:text-purple-300">Cameras:</span>
+										<span class="block text-purple-800 dark:text-purple-100"
+											>{compute.sessionConfig?.cameraNames.join(", ")}</span
+										>
 									</div>
 								</div>
 							</div>
 
 							<!-- Connection Details -->
-							<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="text-sm font-medium text-green-700 mb-2 dark:text-green-300">📡 Inference Server Connections</div>
+							<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="mb-2 text-sm font-medium text-green-700 dark:text-green-300">
+									📡 Inference Server Connections
+								</div>
 								<div class="space-y-1 text-xs">
 									<div>
 										<span class="text-green-600 dark:text-green-400">Workspace:</span>
-										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.workspace_id}</span>
+										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
+											>{compute.sessionData.workspace_id}</span
+										>
 									</div>
 									{#each Object.entries(compute.sessionData.camera_room_ids) as [camera, roomId]}
 										<div>
 											<span class="text-green-600 dark:text-green-400">📹 {camera}:</span>
-											<span class="text-green-700 font-mono ml-2 dark:text-green-200">{roomId}</span>
+											<span class="ml-2 font-mono text-green-700 dark:text-green-200">{roomId}</span
+											>
 										</div>
 									{/each}
 									<div>
 										<span class="text-green-600 dark:text-green-400">📥 Joint Input:</span>
-										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.joint_input_room_id}</span>
+										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
+											>{compute.sessionData.joint_input_room_id}</span
+										>
 									</div>
 									<div>
 										<span class="text-green-600 dark:text-green-400">📤 Joint Output:</span>
-										<span class="text-green-700 font-mono ml-2 dark:text-green-200">{compute.sessionData.joint_output_room_id}</span>
+										<span class="ml-2 font-mono text-green-700 dark:text-green-200"
+											>{compute.sessionData.joint_output_room_id}</span
+										>
 									</div>
 								</div>
 							</div>
@@ -226,10 +261,10 @@
 										size="sm"
 										onclick={handleStartSession}
 										disabled={isConnecting}
-										class="bg-green-500 hover:bg-green-600 text-xs disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										class="bg-green-500 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
 									>
 										{#if isConnecting}
-											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 											Starting...
 										{:else}
 											<span class="icon-[mdi--play] mr-1 size-3"></span>
@@ -246,7 +281,7 @@
 										class="text-xs disabled:opacity-50"
 									>
 										{#if isConnecting}
-											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 											Stopping...
 										{:else}
 											<span class="icon-[mdi--stop] mr-1 size-3"></span>
@@ -262,7 +297,7 @@
 									class="text-xs disabled:opacity-50"
 								>
 									{#if isConnecting}
-										<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+										<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 										Deleting...
 									{:else}
 										<span class="icon-[mdi--delete] mr-1 size-3"></span>
@@ -277,9 +312,13 @@
 
 			<!-- Create New Session -->
 			{#if !compute.hasSession}
-				<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
+				<Card.Root
+					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+						>
 							<span class="icon-[mdi--plus-circle] size-4"></span>
 							Create Inference Session
 						</Card.Title>
@@ -288,47 +327,59 @@
 						<div class="space-y-4">
 							<div class="grid grid-cols-2 gap-4">
 								<div class="space-y-2">
-									<Label for="sessionId" class="text-purple-700 dark:text-purple-300">Session ID</Label>
+									<Label for="sessionId" class="text-purple-700 dark:text-purple-300"
+										>Session ID</Label
+									>
 									<Input
 										id="sessionId"
 										bind:value={sessionId}
 										placeholder="my-session-01"
-										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
+										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
 									/>
 								</div>
 								<div class="space-y-2">
-									<Label for="policyPath" class="text-purple-700 dark:text-purple-300">Policy Path</Label>
+									<Label for="policyPath" class="text-purple-700 dark:text-purple-300"
+										>Policy Path</Label
+									>
 									<Input
 										id="policyPath"
 										bind:value={policyPath}
 										placeholder="./checkpoints/act_so101_beyond"
-										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
+										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
 									/>
 								</div>
 							</div>
 
 							<div class="grid grid-cols-2 gap-4">
 								<div class="space-y-2">
-									<Label for="cameraNames" class="text-purple-700 dark:text-purple-300">Camera Names</Label>
+									<Label for="cameraNames" class="text-purple-700 dark:text-purple-300"
+										>Camera Names</Label
+									>
 									<Input
 										id="cameraNames"
 										bind:value={cameraNames}
 										placeholder="front, wrist, overhead"
-										class="bg-slate-50 border-slate-300 text-slate-900 dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
+										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>
 								<div class="space-y-2">
-									<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300">Transport Server URL</Label>
+									<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300"
+										>Transport Server URL</Label
+									>
 									<Input
 										id="transportServerUrl"
 										value={settings.transportServerUrl}
 										disabled
 										placeholder="http://localhost:8000"
-										class="bg-slate-50 border-slate-300 text-slate-900 opacity-60 cursor-not-allowed dark:bg-slate-800 dark:border-slate-600 dark:text-slate-100"
+										class="cursor-not-allowed border-slate-300 bg-slate-50 text-slate-900 opacity-60 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
 										title="Change this value in the settings panel"
 									/>
-									<p class="text-xs text-slate-600 dark:text-slate-400">Configure in settings panel</p>
+									<p class="text-xs text-slate-600 dark:text-slate-400">
+										Configure in settings panel
+									</p>
 								</div>
 							</div>
 
@@ -339,7 +390,7 @@
 									bind:checked={useProvidedWorkspace}
 									class="rounded border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800"
 								/>
-								<Label for="useWorkspace" class="text-purple-700 text-sm dark:text-purple-300">
+								<Label for="useWorkspace" class="text-sm text-purple-700 dark:text-purple-300">
 									Use current workspace ({workspaceId})
 								</Label>
 							</div>
@@ -347,8 +398,9 @@
 							<Alert.Root>
 								<span class="icon-[mdi--information] size-4"></span>
 								<Alert.Description>
-									This will create a new ACT inference session with dedicated rooms for camera inputs,
-									joint inputs, and joint outputs in the inference server communication system.
+									This will create a new ACT inference session with dedicated rooms for camera
+									inputs, joint inputs, and joint outputs in the inference server communication
+									system.
 								</Alert.Description>
 							</Alert.Root>
 
@@ -359,7 +411,7 @@
 								class="w-full bg-purple-500 hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 							>
 								{#if isConnecting}
-									<span class="icon-[mdi--loading] animate-spin mr-2 size-4"></span>
+									<span class="icon-[mdi--loading] mr-2 size-4 animate-spin"></span>
 									Creating Session...
 								{:else}
 									<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
@@ -372,11 +424,13 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div 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">
+			<div
+				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 ACT model and create dedicated communication rooms for video inputs,
-				robot joint states, and control outputs in the inference server system.
+				Inference Sessions require a trained ACT model and create dedicated communication rooms for video
+				inputs, robot joint states, and control outputs in the inference server system.
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -16,7 +16,7 @@
 	let { open = $bindable(), compute, workspaceId }: Props = $props();
 
 	let isConnecting = $state(false);
-	let selectedRobotId = $state('');
+	let selectedRobotId = $state("");
 	let robotProducer: any = null;
 	let connectedRobotId = $state<string | null>(null);
 
@@ -25,12 +25,12 @@
 
 	async function handleConnectRobotInput() {
 		if (!compute.hasSession) {
-			toast.error('No Inference Session available. Create a session first.');
+			toast.error("No Inference Session available. Create a session first.");
 			return;
 		}
 
 		if (!selectedRobotId) {
-			toast.error('Please select a robot to connect.');
+			toast.error("Please select a robot to connect.");
 			return;
 		}
 
@@ -39,11 +39,11 @@
 			// Get the joint input room ID from the Inference Session
 			const jointInputRoomId = compute.sessionData?.joint_input_room_id;
 			if (!jointInputRoomId) {
-				throw new Error('No joint input room found in Inference Session');
+				throw new Error("No joint input room found in Inference Session");
 			}
 
 			// Find the selected robot
-			const robot = robotManager.robots.find(r => r.id === selectedRobotId);
+			const robot = robotManager.robots.find((r) => r.id === selectedRobotId);
 			if (!robot) {
 				throw new Error(`Robot ${selectedRobotId} not found`);
 			}
@@ -53,14 +53,13 @@
 
 			connectedRobotId = selectedRobotId;
 
-			toast.success('Robot input connected to Inference Session', {
+			toast.success("Robot input connected to Inference Session", {
 				description: `Robot ${selectedRobotId} now sends joint data to AI`
 			});
-
 		} catch (error) {
-			console.error('Robot input connection error:', error);
-			toast.error('Failed to connect robot input', {
-				description: error instanceof Error ? error.message : 'Unknown error'
+			console.error("Robot input connection error:", error);
+			toast.error("Failed to connect robot input", {
+				description: error instanceof Error ? error.message : "Unknown error"
 			});
 		} finally {
 			isConnecting = false;
@@ -72,7 +71,7 @@
 
 		try {
 			// Find the connected robot
-			const robot = robotManager.robots.find(r => r.id === connectedRobotId);
+			const robot = robotManager.robots.find((r) => r.id === connectedRobotId);
 			if (robot) {
 				// Disconnect producer from the joint input room
 				for (const producer of robot.producers) {
@@ -81,10 +80,10 @@
 			}
 
 			connectedRobotId = null;
-			toast.success('Robot input disconnected');
+			toast.success("Robot input disconnected");
 		} catch (error) {
-			console.error('Disconnect error:', error);
-			toast.error('Error disconnecting robot input');
+			console.error("Disconnect error:", error);
+			toast.error("Error disconnecting robot input");
 		}
 	}
 
@@ -101,9 +100,11 @@
 		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
 				<span class="icon-[mdi--robot-industrial] size-5 text-amber-500 dark:text-amber-400"></span>
-				Robot Input - {compute.name || 'No Compute Selected'}
+				Robot Input - {compute.name || "No Compute Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Connect robot joint data as input for AI inference
@@ -117,35 +118,47 @@
 			>
 				<div class="flex items-center gap-2">
 					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Inference Session</span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
+						>Inference Session</span
+					>
 				</div>
 				{#if compute.hasSession}
 					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+						>No Session</Badge
+					>
 				{/if}
 			</div>
 
 			{#if !compute.hasSession}
-				<Card.Root class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5">
+				<Card.Root
+					class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200"
+						>
 							<span class="icon-[mdi--alert] size-4"></span>
 							Inference Session Required
 						</Card.Title>
 					</Card.Header>
 					<Card.Content class="text-sm text-yellow-700 dark:text-yellow-300">
-						You need to create an Inference Session before connecting robot inputs.
-						The session provides a joint input room for receiving robot data.
+						You need to create an Inference Session before connecting robot inputs. The session
+						provides a joint input room for receiving robot data.
 					</Card.Content>
 				</Card.Root>
 			{:else}
 				<!-- Robot Selection and Connection -->
-				<Card.Root class="border-amber-300/30 bg-amber-100/5 dark:border-amber-500/30 dark:bg-amber-500/5">
+				<Card.Root
+					class="border-amber-300/30 bg-amber-100/5 dark:border-amber-500/30 dark:bg-amber-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-amber-700 dark:text-amber-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-amber-700 dark:text-amber-200"
+						>
 							<span class="icon-[mdi--robot-industrial] size-4"></span>
 							Robot Input Connection
 						</Card.Title>
@@ -153,18 +166,20 @@
 					<Card.Content class="space-y-4">
 						<!-- Available Robots -->
 						<div class="space-y-2">
-							<div class="text-sm font-medium text-amber-700 dark:text-amber-300">Available Robots:</div>
-							<div class="max-h-40 overflow-y-auto space-y-2">
+							<div class="text-sm font-medium text-amber-700 dark:text-amber-300">
+								Available Robots:
+							</div>
+							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if robots.length === 0}
-									<div class="text-center py-4 text-sm text-slate-600 dark:text-slate-400">
+									<div class="py-4 text-center text-sm text-slate-600 dark:text-slate-400">
 										No robots available. Add robots first.
 									</div>
 								{:else}
 									{#each robots as robot}
 										<button
-											onclick={() => selectedRobotId = robot.id}
-											class="w-full p-3 rounded border text-left {selectedRobotId === robot.id 
-												? 'border-amber-400 bg-amber-100/20 dark:border-amber-500 dark:bg-amber-500/20' 
+											onclick={() => (selectedRobotId = robot.id)}
+											class="w-full rounded border p-3 text-left {selectedRobotId === robot.id
+												? 'border-amber-400 bg-amber-100/20 dark:border-amber-500 dark:bg-amber-500/20'
 												: 'border-slate-300 bg-slate-50/50 hover:bg-slate-100/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50'}"
 										>
 											<div class="flex items-center justify-between">
@@ -182,9 +197,7 @@
 															Active
 														</Badge>
 													{:else}
-														<Badge variant="secondary" class="text-xs">
-															Available
-														</Badge>
+														<Badge variant="secondary" class="text-xs">Available</Badge>
 													{/if}
 												</div>
 											</div>
@@ -196,14 +209,16 @@
 
 						<!-- Connection Status -->
 						{#if selectedRobotId}
-							<div class="rounded-lg border border-amber-300/30 bg-amber-100/20 p-3 dark:border-amber-500/30 dark:bg-amber-900/20">
+							<div
+								class="rounded-lg border border-amber-300/30 bg-amber-100/20 p-3 dark:border-amber-500/30 dark:bg-amber-900/20"
+							>
 								<div class="flex items-center justify-between">
 									<div>
 										<p class="text-sm font-medium text-amber-700 dark:text-amber-300">
 											Selected Robot: {selectedRobotId}
 										</p>
 										<p class="text-xs text-amber-600/70 dark:text-amber-400/70">
-											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
+											{connectedRobotId === selectedRobotId ? "Connected to AI" : "Not Connected"}
 										</p>
 									</div>
 									{#if connectedRobotId !== selectedRobotId}
@@ -212,10 +227,10 @@
 											size="sm"
 											onclick={handleConnectRobotInput}
 											disabled={isConnecting}
-											class="bg-amber-500 hover:bg-amber-600 text-xs disabled:opacity-50 dark:bg-amber-600 dark:hover:bg-amber-700"
+											class="bg-amber-500 text-xs hover:bg-amber-600 disabled:opacity-50 dark:bg-amber-600 dark:hover:bg-amber-700"
 										>
 											{#if isConnecting}
-												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+												<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 												Connecting...
 											{:else}
 												<span class="icon-[mdi--link] mr-1 size-3"></span>
@@ -240,7 +255,9 @@
 				</Card.Root>
 
 				<!-- Session Joint Input Details -->
-				<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
+				<Card.Root
+					class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+				>
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 							<span class="icon-[mdi--information] size-4"></span>
@@ -249,13 +266,17 @@
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-2 text-xs">
-							<div class="flex justify-between items-center p-2 rounded bg-slate-100/50 dark:bg-slate-800/50">
-								<span class="text-blue-700 font-medium dark:text-blue-300">Joint Input Room:</span>
-								<span class="text-blue-800 font-mono dark:text-blue-200">{compute.sessionData?.joint_input_room_id}</span>
+							<div
+								class="flex items-center justify-between rounded bg-slate-100/50 p-2 dark:bg-slate-800/50"
+							>
+								<span class="font-medium text-blue-700 dark:text-blue-300">Joint Input Room:</span>
+								<span class="font-mono text-blue-800 dark:text-blue-200"
+									>{compute.sessionData?.joint_input_room_id}</span
+								>
 							</div>
-							<div class="text-slate-600 text-xs dark:text-slate-400">
-								The robot will act as a <strong>PRODUCER</strong> and send its current joint positions to this room for AI processing.
-								The inference server receives this data as a CONSUMER.
+							<div class="text-xs text-slate-600 dark:text-slate-400">
+								The robot will act as a <strong>PRODUCER</strong> and send its current joint positions
+								to this room for AI processing. The inference server receives this data as a CONSUMER.
 								All joint values should be normalized (-100 to +100 for most joints, 0 to 100 for gripper).
 							</div>
 						</div>
@@ -264,17 +285,22 @@
 
 				<!-- Connection Status -->
 				{#if connectedRobotId}
-					<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
+					<Card.Root
+						class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5"
+					>
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
+							<Card.Title
+								class="flex items-center gap-2 text-base text-green-700 dark:text-green-200"
+							>
 								<span class="icon-[mdi--check-circle] size-4"></span>
 								Active Connection
 							</Card.Title>
 						</Card.Header>
 						<Card.Content>
 							<div class="text-sm text-green-700 dark:text-green-300">
-								Robot <span class="font-mono">{connectedRobotId}</span> is now sending joint data to the Inference Session as a producer.
-								The AI model will use this data along with camera inputs for inference.
+								Robot <span class="font-mono">{connectedRobotId}</span> is now sending joint data to
+								the Inference Session as a producer. The AI model will use this data along with camera
+								inputs for inference.
 							</div>
 						</Card.Content>
 					</Card.Root>
@@ -282,10 +308,13 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div 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">
+			<div
+				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>
-				Robot input: Robot acts as PRODUCER sending joint positions → Inference server acts as CONSUMER receiving data for processing.
+				Robot input: Robot acts as PRODUCER sending joint positions → Inference server acts as CONSUMER
+				receiving data for processing.
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -16,7 +16,7 @@
 	let { open = $bindable(), compute, workspaceId }: Props = $props();
 
 	let isConnecting = $state(false);
-	let selectedRobotId = $state('');
+	let selectedRobotId = $state("");
 	let robotConsumer: any = null;
 	let connectedRobotId = $state<string | null>(null);
 
@@ -25,12 +25,12 @@
 
 	async function handleConnectRobotOutput() {
 		if (!compute.hasSession) {
-			toast.error('No Inference Session available. Create a session first.');
+			toast.error("No Inference Session available. Create a session first.");
 			return;
 		}
 
 		if (!selectedRobotId) {
-			toast.error('Please select a robot to connect.');
+			toast.error("Please select a robot to connect.");
 			return;
 		}
 
@@ -39,11 +39,11 @@
 			// Get the joint output room ID from the Inference Session
 			const jointOutputRoomId = compute.sessionData?.joint_output_room_id;
 			if (!jointOutputRoomId) {
-				throw new Error('No joint output room found in Inference Session');
+				throw new Error("No joint output room found in Inference Session");
 			}
 
 			// Find the selected robot
-			const robot = robotManager.robots.find(r => r.id === selectedRobotId);
+			const robot = robotManager.robots.find((r) => r.id === selectedRobotId);
 			if (!robot) {
 				throw new Error(`Robot ${selectedRobotId} not found`);
 			}
@@ -53,14 +53,13 @@
 
 			connectedRobotId = selectedRobotId;
 
-			toast.success('Robot output connected to Inference Session', {
+			toast.success("Robot output connected to Inference Session", {
 				description: `Robot ${selectedRobotId} now receives AI commands`
 			});
-
 		} catch (error) {
-			console.error('Robot output connection error:', error);
-			toast.error('Failed to connect robot output', {
-				description: error instanceof Error ? error.message : 'Unknown error'
+			console.error("Robot output connection error:", error);
+			toast.error("Failed to connect robot output", {
+				description: error instanceof Error ? error.message : "Unknown error"
 			});
 		} finally {
 			isConnecting = false;
@@ -72,16 +71,16 @@
 
 		try {
 			// Find the connected robot
-			const robot = robotManager.robots.find(r => r.id === connectedRobotId);
+			const robot = robotManager.robots.find((r) => r.id === connectedRobotId);
 			if (robot) {
 				await robot.removeConsumer();
 			}
 
 			connectedRobotId = null;
-			toast.success('Robot output disconnected');
+			toast.success("Robot output disconnected");
 		} catch (error) {
-			console.error('Disconnect error:', error);
-			toast.error('Error disconnecting robot output');
+			console.error("Disconnect error:", error);
+			toast.error("Error disconnecting robot output");
 		}
 	}
 
@@ -98,9 +97,11 @@
 		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
 				<span class="icon-[mdi--robot-outline] size-5 text-blue-500 dark:text-blue-400"></span>
-				Robot Output - {compute.name || 'No Compute Selected'}
+				Robot Output - {compute.name || "No Compute Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Connect AI command output to control robot actuators
@@ -114,33 +115,43 @@
 			>
 				<div class="flex items-center gap-2">
 					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
-					<span class="text-sm font-medium text-purple-700 dark:text-purple-300">Inference Session</span>
+					<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
+						>Inference Session</span
+					>
 				</div>
 				{#if compute.hasSession}
 					<Badge variant="default" class="bg-purple-500 text-xs dark:bg-purple-600">
 						{compute.statusInfo.statusText}
 					</Badge>
 				{:else}
-					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Session</Badge>
+					<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+						>No Session</Badge
+					>
 				{/if}
 			</div>
 
 			{#if !compute.hasSession}
-				<Card.Root class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5">
+				<Card.Root
+					class="border-yellow-300/30 bg-yellow-100/5 dark:border-yellow-500/30 dark:bg-yellow-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-yellow-700 dark:text-yellow-200"
+						>
 							<span class="icon-[mdi--alert] size-4"></span>
 							Inference Session Required
 						</Card.Title>
 					</Card.Header>
 					<Card.Content class="text-sm text-yellow-700 dark:text-yellow-300">
-						You need to create an Inference Session before connecting robot outputs.
-						The session provides a joint output room for sending AI commands.
+						You need to create an Inference Session before connecting robot outputs. The session
+						provides a joint output room for sending AI commands.
 					</Card.Content>
 				</Card.Root>
 			{:else}
 				<!-- Robot Selection and Connection -->
-				<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
+				<Card.Root
+					class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+				>
 					<Card.Header>
 						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
 							<span class="icon-[mdi--robot-outline] size-4"></span>
@@ -150,18 +161,20 @@
 					<Card.Content class="space-y-4">
 						<!-- Available Robots -->
 						<div class="space-y-2">
-							<div class="text-sm font-medium text-blue-700 dark:text-blue-300">Available Robots:</div>
-							<div class="max-h-40 overflow-y-auto space-y-2">
+							<div class="text-sm font-medium text-blue-700 dark:text-blue-300">
+								Available Robots:
+							</div>
+							<div class="max-h-40 space-y-2 overflow-y-auto">
 								{#if robots.length === 0}
-									<div class="text-center py-4 text-sm text-slate-600 dark:text-slate-400">
+									<div class="py-4 text-center text-sm text-slate-600 dark:text-slate-400">
 										No robots available. Add robots first.
 									</div>
 								{:else}
 									{#each robots as robot}
 										<button
-											onclick={() => selectedRobotId = robot.id}
-											class="w-full p-3 rounded border text-left {selectedRobotId === robot.id 
-												? 'border-blue-400 bg-blue-100/20 dark:border-blue-500 dark:bg-blue-500/20' 
+											onclick={() => (selectedRobotId = robot.id)}
+											class="w-full rounded border p-3 text-left {selectedRobotId === robot.id
+												? 'border-blue-400 bg-blue-100/20 dark:border-blue-500 dark:bg-blue-500/20'
 												: 'border-slate-300 bg-slate-50/50 hover:bg-slate-100/50 dark:border-slate-600 dark:bg-slate-800/50 dark:hover:bg-slate-700/50'}"
 										>
 											<div class="flex items-center justify-between">
@@ -170,7 +183,7 @@
 														ID: {robot.id}
 													</div>
 													<div class="text-xs text-slate-600 dark:text-slate-400">
-														Consumer: {robot.hasConsumer ? 'Connected' : 'None'}
+														Consumer: {robot.hasConsumer ? "Connected" : "None"}
 													</div>
 												</div>
 												<div class="flex items-center gap-2">
@@ -179,9 +192,7 @@
 															Active
 														</Badge>
 													{:else}
-														<Badge variant="secondary" class="text-xs">
-															Available
-														</Badge>
+														<Badge variant="secondary" class="text-xs">Available</Badge>
 													{/if}
 												</div>
 											</div>
@@ -193,14 +204,16 @@
 
 						<!-- Connection Status -->
 						{#if selectedRobotId}
-							<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
+							<div
+								class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20"
+							>
 								<div class="flex items-center justify-between">
 									<div>
 										<p class="text-sm font-medium text-blue-700 dark:text-blue-300">
 											Selected Robot: {selectedRobotId}
 										</p>
 										<p class="text-xs text-blue-600/70 dark:text-blue-400/70">
-											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
+											{connectedRobotId === selectedRobotId ? "Connected to AI" : "Not Connected"}
 										</p>
 									</div>
 									{#if connectedRobotId !== selectedRobotId}
@@ -209,10 +222,10 @@
 											size="sm"
 											onclick={handleConnectRobotOutput}
 											disabled={isConnecting}
-											class="bg-blue-500 hover:bg-blue-600 text-xs disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
+											class="bg-blue-500 text-xs hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
 										>
 											{#if isConnecting}
-												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+												<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 												Connecting...
 											{:else}
 												<span class="icon-[mdi--link] mr-1 size-3"></span>
@@ -237,22 +250,32 @@
 				</Card.Root>
 
 				<!-- Session Joint Output Details -->
-				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
+				<Card.Root
+					class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200">
+						<Card.Title
+							class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200"
+						>
 							<span class="icon-[mdi--information] size-4"></span>
 							Data Flow: Inference Session → Robot
 						</Card.Title>
 					</Card.Header>
 					<Card.Content>
 						<div class="space-y-2 text-xs">
-							<div class="flex justify-between items-center p-2 rounded bg-slate-100/50 dark:bg-slate-800/50">
-								<span class="text-orange-700 font-medium dark:text-orange-300">Joint Output Room:</span>
-								<span class="text-orange-800 font-mono dark:text-orange-200">{compute.sessionData?.joint_output_room_id}</span>
+							<div
+								class="flex items-center justify-between rounded bg-slate-100/50 p-2 dark:bg-slate-800/50"
+							>
+								<span class="font-medium text-orange-700 dark:text-orange-300"
+									>Joint Output Room:</span
+								>
+								<span class="font-mono text-orange-800 dark:text-orange-200"
+									>{compute.sessionData?.joint_output_room_id}</span
+								>
 							</div>
-							<div class="text-slate-600 text-xs dark:text-slate-400">
-								The inference server will act as a <strong>PRODUCER</strong> and send predicted joint commands to this room for robot execution.
-								The robot receives this data as a CONSUMER.
+							<div class="text-xs text-slate-600 dark:text-slate-400">
+								The inference server will act as a <strong>PRODUCER</strong> and send predicted joint
+								commands to this room for robot execution. The robot receives this data as a CONSUMER.
 								All joint values will be normalized (-100 to +100 for most joints, 0 to 100 for gripper).
 							</div>
 						</div>
@@ -261,17 +284,21 @@
 
 				<!-- Connection Status -->
 				{#if connectedRobotId}
-					<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
+					<Card.Root
+						class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5"
+					>
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
+							<Card.Title
+								class="flex items-center gap-2 text-base text-green-700 dark:text-green-200"
+							>
 								<span class="icon-[mdi--check-circle] size-4"></span>
 								Active Connection
 							</Card.Title>
 						</Card.Header>
 						<Card.Content>
 							<div class="text-sm text-green-700 dark:text-green-300">
-								Robot <span class="font-mono">{connectedRobotId}</span> is now receiving AI commands as a consumer.
-								The robot will execute joint movements based on AI inference results.
+								Robot <span class="font-mono">{connectedRobotId}</span> is now receiving AI commands
+								as a consumer. The robot will execute joint movements based on AI inference results.
 							</div>
 						</Card.Content>
 					</Card.Root>
@@ -279,10 +306,13 @@
 			{/if}
 
 			<!-- Quick Info -->
-			<div 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">
+			<div
+				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>
-				Robot output: Inference server acts as PRODUCER sending commands → Robot acts as CONSUMER receiving and executing movements.
+				Robot output: Inference server acts as PRODUCER sending commands → Robot acts as CONSUMER receiving
+				and executing movements.
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import * as Dialog from "@/components/ui/dialog";
-	import { video } from '@robothub/transport-server-client';
-	import type { video as videoTypes } from '@robothub/transport-server-client';
+	import { video } from "@robothub/transport-server-client";
+	import type { video as videoTypes } from "@robothub/transport-server-client";
 	import { Button } from "@/components/ui/button";
 	import * as Card from "@/components/ui/card";
 	import { Badge } from "@/components/ui/badge";
@@ -19,7 +19,7 @@
 	let { open = $bindable(), compute, workspaceId }: Props = $props();
 
 	let isConnecting = $state(false);
-	let selectedCameraName = $state('front');
+	let selectedCameraName = $state("front");
 	let localStream: MediaStream | null = $state(null);
 	let videoProducer: any = null;
 
@@ -32,7 +32,7 @@
 
 	async function handleConnectLocalCamera() {
 		if (!compute.hasSession) {
-			toast.error('No Inference Session available. Create a session first.');
+			toast.error("No Inference Session available. Create a session first.");
 			return;
 		}
 
@@ -53,13 +53,13 @@
 
 			// Create video producer and connect to the camera room
 			videoProducer = new video.VideoProducer(settings.transportServerUrl);
-			
+
 			// Connect to the EXISTING camera room (don't create new one)
 			const participantId = `frontend-camera-${selectedCameraName}-${Date.now()}`;
 			const success = await videoProducer.connect(workspaceId, cameraRoomId, participantId);
-			
+
 			if (!success) {
-				throw new Error('Failed to connect to camera room');
+				throw new Error("Failed to connect to camera room");
 			}
 
 			// Start streaming
@@ -68,11 +68,10 @@
 			toast.success(`Camera connected to Inference Session`, {
 				description: `Local camera streaming to ${selectedCameraName} input`
 			});
-
 		} catch (error) {
-			console.error('Camera connection error:', error);
-			toast.error('Failed to connect camera', {
-				description: error instanceof Error ? error.message : 'Unknown error'
+			console.error("Camera connection error:", error);
+			toast.error("Failed to connect camera", {
+				description: error instanceof Error ? error.message : "Unknown error"
 			});
 		} finally {
 			isConnecting = false;
@@ -88,25 +87,25 @@
 			}
 
 			if (localStream) {
-				localStream.getTracks().forEach(track => track.stop());
+				localStream.getTracks().forEach((track) => track.stop());
 				localStream = null;
 			}
 
-			toast.success('Camera disconnected');
+			toast.success("Camera disconnected");
 		} catch (error) {
-			console.error('Disconnect error:', error);
-			toast.error('Error disconnecting camera');
+			console.error("Disconnect error:", error);
+			toast.error("Error disconnecting camera");
 		}
 	}
 
 	// Cleanup on modal close
 	$effect(() => {
 		return () => {
-            if (!open) {
-                handleDisconnectCamera();
-            }
-        };
-    });
+			if (!open) {
+				handleDisconnectCamera();
+			}
+		};
+	});
 </script>
 
 <Dialog.Root bind:open>
@@ -116,7 +115,7 @@
 		<Dialog.Header class="pb-3">
 			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
 				<span class="icon-[mdi--video-input-component] size-5 text-green-400"></span>
-				Video Input - {compute.name || 'No Compute Selected'}
+				Video Input - {compute.name || "No Compute Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-400">
 				Connect camera streams to provide visual input for AI inference
@@ -150,8 +149,8 @@
 						</Card.Title>
 					</Card.Header>
 					<Card.Content class="text-sm text-yellow-300">
-						You need to create an Inference Session before connecting video inputs.
-						The session defines which camera names are available for connection.
+						You need to create an Inference Session before connecting video inputs. The session
+						defines which camera names are available for connection.
 					</Card.Content>
 				</Card.Root>
 			{:else}
@@ -170,9 +169,9 @@
 							<div class="grid grid-cols-2 gap-2">
 								{#each compute.sessionConfig?.cameraNames || [] as cameraName}
 									<button
-										onclick={() => selectedCameraName = cameraName}
-										class="p-2 rounded border text-left {selectedCameraName === cameraName 
-											? 'border-green-500 bg-green-500/20' 
+										onclick={() => (selectedCameraName = cameraName)}
+										class="rounded border p-2 text-left {selectedCameraName === cameraName
+											? 'border-green-500 bg-green-500/20'
 											: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
 									>
 										<div class="text-sm font-medium">{cameraName}</div>
@@ -192,7 +191,7 @@
 										Selected Camera: {selectedCameraName}
 									</p>
 									<p class="text-xs text-green-400/70">
-										{localStream ? 'Connected' : 'Not Connected'}
+										{localStream ? "Connected" : "Not Connected"}
 									</p>
 								</div>
 								{#if !localStream}
@@ -201,10 +200,10 @@
 										size="sm"
 										onclick={handleConnectLocalCamera}
 										disabled={isConnecting}
-										class="bg-green-600 hover:bg-green-700 text-xs disabled:opacity-50"
+										class="bg-green-600 text-xs hover:bg-green-700 disabled:opacity-50"
 									>
 										{#if isConnecting}
-											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
 											Connecting...
 										{:else}
 											<span class="icon-[mdi--camera] mr-1 size-3"></span>
@@ -229,12 +228,14 @@
 						{#if localStream}
 							<div class="space-y-2">
 								<div class="text-sm font-medium text-green-300">Live Preview:</div>
-								<div class="rounded border border-green-500/30 bg-black/50 aspect-video overflow-hidden">
+								<div
+									class="aspect-video overflow-hidden rounded border border-green-500/30 bg-black/50"
+								>
 									<video
 										autoplay
 										muted
 										playsinline
-										class="w-full h-full object-cover"
+										class="h-full w-full object-cover"
 										onloadedmetadata={(e) => {
 											const video = e.target as HTMLVideoElement;
 											video.srcObject = localStream;
@@ -257,9 +258,9 @@
 					<Card.Content>
 						<div class="space-y-2 text-xs">
 							{#each Object.entries(compute.sessionData?.camera_room_ids || {}) as [camera, roomId]}
-								<div class="flex justify-between items-center p-2 rounded bg-slate-800/50">
-									<span class="text-blue-300 font-medium">{camera}</span>
-									<span class="text-blue-200 font-mono">{roomId}</span>
+								<div class="flex items-center justify-between rounded bg-slate-800/50 p-2">
+									<span class="font-medium text-blue-300">{camera}</span>
+									<span class="font-mono text-blue-200">{roomId}</span>
 								</div>
 							{/each}
 						</div>
@@ -270,8 +271,9 @@
 			<!-- Quick Info -->
 			<div class="rounded border border-slate-700 bg-slate-800/30 p-2 text-xs text-slate-500">
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
-				Video inputs stream camera data to the AI model for visual processing. Each camera connects to a dedicated room in the session.
+				Video inputs stream camera data to the AI model for visual processing. Each camera connects to
+				a dedicated room in the session.
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -1,13 +1,11 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent, 
-		StatusIndicator
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent
 	} from "$lib/components/3d/ui";
-	import { Text } from "threlte-uikit";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -19,7 +17,6 @@
 	const computeColor = "rgb(139, 69, 219)";
 </script>
 
-
 <BaseStatusBox
 	minWidth={110}
 	minHeight={135}
@@ -28,21 +25,20 @@
 	backgroundOpacity={0.2}
 	clickable={false}
 >
-		<!-- Header -->
-		<StatusHeader
-			icon={ICON["icon-[mdi--brain]"].svg}
-			text="AI COMPUTE"
-			color={computeColor}
-			opacity={0.9}
-			fontSize={12}
-		/>
+	<!-- Header -->
+	<StatusHeader
+		icon={ICON["icon-[mdi--brain]"].svg}
+		text="AI COMPUTE"
+		color={computeColor}
+		opacity={0.9}
+		fontSize={12}
+	/>
 
-		<!-- Compute Info -->
-		<StatusContent
-			title={compute.name}
-			subtitle={compute.statusInfo.statusText}
-			color="rgb(221, 214, 254)"
-			variant="primary"
-		/>
+	<!-- Compute Info -->
+	<StatusContent
+		title={compute.name}
+		subtitle={compute.statusInfo.statusText}
+		color="rgb(221, 214, 254)"
+		variant="primary"
+	/>
 </BaseStatusBox>
- 

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

@@ -14,19 +14,14 @@
 		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
 	}
 
-	let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props = $props();
+	let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props =
+		$props();
 
 	// Colors
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
 </script>
 
-<!--
-@component
-Elegant 2->1->1 connection flow layout for AI compute processing.
-Clean vertical stacking of inputs that merge into compute, then flow to output.
--->
-
 <Container flexDirection="row" alignItems="center" gap={12}>
 	<!-- Left: Stacked Inputs -->
 	<Container flexDirection="column" alignItems="center" gap={6}>
@@ -35,11 +30,7 @@ Clean vertical stacking of inputs that merge into compute, then flow to output.
 	</Container>
 
 	<!-- Arrow: Inputs to Compute -->
-	<StatusArrow
-		direction="right"
-		color={inputColor}
-		opacity={compute.hasSession ? 1 : 0.5}
-	/>
+	<StatusArrow direction="right" color={inputColor} opacity={compute.hasSession ? 1 : 0.5} />
 
 	<!-- Center: Compute -->
 	<ComputeBoxUIKit {compute} />
@@ -53,4 +44,4 @@ Clean vertical stacking of inputs that merge into compute, then flow to output.
 
 	<!-- Right: Output -->
 	<ComputeOutputBoxUIKit {compute} handleClick={() => onRobotOutputBoxClick(compute)} />
-</Container> 
+</Container>

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

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent, 
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
 		StatusIndicator,
 		StatusButton
 	} from "$lib/components/3d/ui";
-	import { Container, SVG, Text } from "threlte-uikit";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -21,12 +20,6 @@
 	const inputColor = "rgb(34, 197, 94)";
 </script>
 
-<!--
-@component
-Compact input box showing the status of video and robot inputs for Inference Sessions.
-Displays input connection information when session exists or connection prompt when disconnected.
--->
-
 <BaseStatusBox
 	minWidth={120}
 	minHeight={80}
@@ -67,11 +60,7 @@ Displays input connection information when session exists or connection prompt w
 			fontSize={12}
 		/>
 
-		<StatusContent
-			title="Setup Required"
-			color="rgb(134, 239, 172)"
-			variant="secondary"
-		/>
+		<StatusContent title="Setup Required" color="rgb(134, 239, 172)" variant="secondary" />
 
 		<StatusButton
 			text="Add Session"
@@ -81,4 +70,4 @@ Displays input connection information when session exists or connection prompt w
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { ICON } from "$lib/utils/icon";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent, 
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
 		StatusIndicator,
 		StatusButton
 	} from "$lib/components/3d/ui";
-	import { Container, SVG, Text } from "threlte-uikit";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -19,19 +18,8 @@
 
 	// Output theme color (blue)
 	const outputColor = "rgb(59, 130, 246)";
-	
-	// Icons
-	// const exportIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTkgMTJsLTcgN3YtNEg1di02aDd2LTR6Ii8+PC9zdmc+";
-	// const robotIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTIgMTJjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6TTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThDNy4zIDIwIDMuOCAxNi42IDMuOCAxMlM3LjMgNCA5IDRzNS4yIDMuNCA1LjIgOC02IDgtNSA4eiIvPjwvc3ZnPg==";
-	// const plusIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnoiLz48L3N2Zz4=";
 </script>
 
-<!--
-@component
-Compact output box showing the status of robot outputs for Inference Sessions.
-Displays output connection information when session exists or connection prompt when disconnected.
--->
-
 <BaseStatusBox
 	minWidth={110}
 	minHeight={135}
@@ -59,8 +47,8 @@ Displays output connection information when session exists or connection prompt
 		/>
 
 		<!-- Status indicator based on running state -->
-		<StatusIndicator 
-			color={compute.isRunning ? outputColor : "rgb(245, 158, 11)"} 
+		<StatusIndicator
+			color={compute.isRunning ? outputColor : "rgb(245, 158, 11)"}
 			type={compute.isRunning ? "pulse" : "dot"}
 		/>
 	{:else}
@@ -75,7 +63,7 @@ Displays output connection information when session exists or connection prompt
 		/>
 
 		<StatusContent
-			title={!compute.hasSession ? 'Need Session' : 'Configure'}
+			title={!compute.hasSession ? "Need Session" : "Configure"}
 			color="rgb(147, 197, 253)"
 			variant="secondary"
 		/>
@@ -88,4 +76,4 @@ Displays output connection information when session exists or connection prompt
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -7,7 +7,6 @@
 
 	interface Props {
 		compute: RemoteCompute;
-		offset?: number;
 		visible?: boolean;
 		onVideoInputBoxClick: (compute: RemoteCompute) => void;
 		onRobotInputBoxClick: (compute: RemoteCompute) => void;
@@ -16,7 +15,6 @@
 
 	let {
 		compute,
-		offset = 10,
 		visible = true,
 		onVideoInputBoxClick,
 		onRobotInputBoxClick,
@@ -44,13 +42,13 @@
 				justifyContent="center"
 				padding={20}
 			>
-				<ComputeConnectionFlowBoxUIKit 
-					{compute} 
-					{onVideoInputBoxClick} 
-					{onRobotInputBoxClick} 
-					{onRobotOutputBoxClick} 
+				<ComputeConnectionFlowBoxUIKit
+					{compute}
+					{onVideoInputBoxClick}
+					{onRobotInputBoxClick}
+					{onRobotOutputBoxClick}
 				/>
 			</Container>
 		</Root>
 	</Billboard>
-</T.Group> 
+</T.Group>

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

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
 	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";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -10,23 +16,10 @@
 
 	let { compute, handleClick }: Props = $props();
 
-	// Robot theme color (orange - consistent with robot system)
 	const robotColor = "rgb(245, 158, 11)";
-	
-	// Icons
-	// const robotIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTIgMTJjMC0yLjIxIDEuNzktNCA0LTRzNCAxLjc5IDQgNC0xLjc5IDQtNCA0LTQtMS43OS00LTR6TTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTAgMThDNy4zIDIwIDMuOCAxNi42IDMuOCAxMlM3LjMgNCA5IDRzNS4yIDMuNCA1LjIgOC02IDgtNSA4eiIvPjwvc3ZnPg==";
-	// const robotOffIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMjAuNzMgMTgsNjYgMy4yN0wyIDQuNzNsMTQuMTQgMTQuMTRDMTcuOSAxNS42MiAxNiAxNy40OSAxNiAxOS44VjIxaDJWMTMuNWgzdjIuNWgydjE1LjJDMjIgMTkuNCAyMi44IDE5IDE0LjE4IDEwLjE4TDEwIDZIMTJWNEgxMlY1aDNjMC0yLjc2IDEuMjQtNSA0LTVzNCAxLjI0IDQgNS0yLjI0IDUtNSA1SDEzdjFIOFY3SDZ2Mm0xIDIuNzNMMjAgMjAuNzNsLS4wMSAwIi8+PC9zdmc+";
-	// const robotOutlineIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTIgMmMtNS41NyAwLTEwIDQuNDMtMTAgMTBzNC40MyAxMCAxMCAxMCAxMC00LjQzIDEwLTEwUzE3LjU3IDIgMTIgMnptMCAxOGMtNC40MSAwLTgtMy41OS04LThzMy41OS04IDgtOCA4IDMuNTkgOCA4LTMuNTkgOC04IDh6bTAgLTEyYy0yLjIxIDAtNCAuNzktNCA0czEuNzkgNCA0IDQgNC0xLjc5IDQtNC0xLjc5LTQtNC00em0wIDZjLTEuMTEgMC0yLS44OS0yLTJzLjg5LTIgMi0yIDIgLjg5IDIgMi0uODkgMi0yIDJ6Ii8+PC9zdmc+";
-	// const formatListNumberedIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMiAxN2gybC0xLTFjLjU1IDAgMS0uNDUgMS0xcy0uNDUtMS0xLTEtMSAuNDUtMSAxaC0yYzAtMS4xLjktMiAyLTJzMiAuOSAyIDItLjkgMi0yIDJ6bS0yIDJoNHYySDJabTUtMTJoMTVoMlY5SDdabTAgNGgxNXYySHdtNS0xMEgyTDZ2MmgxdjJIN3ptMC00aDJsLTEtMXYtMmgxVjFINHYyaDJabTAtMUgxWiIvPjwvc3ZnPg==";
 </script>
 
-<!--
-@component
-Compact robot input box showing the status of robot joint states input for Inference Sessions.
-Displays robot connection information when session exists or connection prompt when disconnected.
--->
-
-<BaseStatusBox 
+<BaseStatusBox
 	minWidth={100}
 	minHeight={65}
 	color={robotColor}
@@ -37,16 +30,16 @@ Displays robot connection information when session exists or connection prompt w
 >
 	{#if compute.hasSession && compute.inputConnections}
 		<!-- Active Robot Input State -->
-		<StatusHeader 
-			icon={ICON["icon-[ix--robotic-arm]"].svg} 
-			text="ROBOT" 
+		<StatusHeader
+			icon={ICON["icon-[ix--robotic-arm]"].svg}
+			text="ROBOT"
 			color={robotColor}
 			opacity={0.9}
 			fontSize={11}
 		/>
 
-		<StatusContent 
-			title="Joint States" 
+		<StatusContent
+			title="Joint States"
 			subtitle="6 DOF Robot"
 			color="rgb(254, 215, 170)"
 			variant="primary"
@@ -56,26 +49,22 @@ Displays robot connection information when session exists or connection prompt w
 		<StatusIndicator color={robotColor} />
 	{:else}
 		<!-- No Session State -->
-		<StatusHeader 
-			icon={ICON["icon-[ix--robotic-arm]"].svg} 
-			text="NO ROBOT" 
+		<StatusHeader
+			icon={ICON["icon-[ix--robotic-arm]"].svg}
+			text="NO ROBOT"
 			color={robotColor}
 			opacity={0.7}
 			fontSize={11}
 		/>
 
-		<StatusContent 
-			title="Setup Robot" 
-			color="rgb(254, 215, 170)" 
-			variant="secondary"
-		/>
+		<StatusContent title="Setup Robot" color="rgb(254, 215, 170)" variant="secondary" />
 
-		<StatusButton 
-			icon={ICON["icon-[mdi--plus]"].svg} 
+		<StatusButton
+			icon={ICON["icon-[mdi--plus]"].svg}
 			text="Add"
 			color={robotColor}
 			backgroundOpacity={0.1}
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -10,16 +10,9 @@
 
 	let { compute, handleClick }: Props = $props();
 
-	// Output theme color (blue)
 	const outputColor = "rgb(59, 130, 246)";
 </script>
 
-<!--
-@component
-Robot output box showing the status of robot joint commands output from Inference Sessions.
-Displays robot command output information when session exists or connection prompt when disconnected.
--->
-
 <BaseStatusBox 
 	color={outputColor}
 	borderOpacity={0.6}

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

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import { Text } from "threlte-uikit";
-	import { ICON } from "$lib/utils/icon";
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
 	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+	import { ICON } from "@/utils/icon";
 
 	interface Props {
 		compute: RemoteCompute;
@@ -11,22 +10,9 @@
 
 	let { compute, handleClick }: Props = $props();
 
-	// Input theme color (green)
 	const inputColor = "rgb(34, 197, 94)";
-	
-	// Icons
-	// const videoIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTcgMTAuNVY3YTEgMSAwIDAgMC0xLTFINGExIDEgMCAwIDAtMSAxdjEwYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMXYtMy41bDQgNHYtMTF6Ii8+PC9zdmc+";
-	// const videoOffIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMy4yNyAyTDIgMy4yN2wxLjY4IDEuNjhDMy4yNiA1LjMgMyA1LjY0IDMgNnYxMmMwIC41NS40NSAxIDEgMWg4Yy4zNiAwIC42OC0uMTUuOTItLjM5bDEuNzMgMS43M0wxNiAyMC43M0wxOC43MyAxOGwtLjg5LS44OUwyMCAxNXYtMWwtNC05VjVjMC0uNTUtLjQ1LTEtMS0xSDlsLTEuMTYtMS4xNkMxMS41NSAyIDEwIDQuMjcgMTAgNHYxTDMuMjcgMnoiLz48L3N2Zz4=";
-	// const videoPlusIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTMgMTRoMXYzaDN2MWgtM3YzaC0xdi0zaC0zdi0xaDN2LTN6bTUgMGwtNS0zdjZsNS0zek0xMSAzSDNDMS45IDMgMSAzLjkgMSA1djEwYzAgMS4xLjkgMiAyIDJoOGMxLjEgMCAyLS45IDItMlY1YzAtMS4xLS45LTItMi0yeiIvPjwvc3ZnPg==";
-	// const cameraMultipleIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNNCAyaDZsMS41IDEuNUg2djJoOGwtLjUtLjVIMThsMS41IDEuNWgzYzEuMSAwIDIgLjkgMiAydjEwYzAgMS4xLS45IDItMiAySDZjLTEuMSAwLTItLjktMi0yVjRjMC0xLjEuOS0yIDItMnptNSA2Yy0xLjExIDAtMi4wOC45LTIuMDggMnMuOTcgMiAyLjA4IDIgMi4wOC0uOSAyLjA4LTItLjk3LTItMi4wOC0yeiIvPjwvc3ZnPg==";
 </script>
 
-<!--
-@component
-Compact video input box showing the status of camera video streams for Inference Sessions.
-Displays video connection information when session exists or connection prompt when disconnected.
--->
-
 <BaseStatusBox 
 	minWidth={100}
 	minHeight={65}

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

@@ -8,11 +8,11 @@
 	import { createUrdfRobot } from "$lib/elements/robot/createRobot.svelte";
 	import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
 	import type { RobotUrdfConfig } from "$lib/types/urdf";
-	import { onMount } from 'svelte';
-	import type IUrdfRobot from '@/components/3d/elements/robot/URDF/interfaces/IUrdfRobot.js';
-	import { ROBOT_CONFIG } from '$lib/elements/robot/config.js';
+	import { onMount } from "svelte";
+	import type IUrdfRobot from "@/components/3d/elements/robot/URDF/interfaces/IUrdfRobot.js";
+	import { ROBOT_CONFIG } from "$lib/elements/robot/config.js";
 
-	interface Props {	
+	interface Props {
 		robot: Robot;
 		onCameraMove: (ref: any) => void;
 		onInputBoxClick: (robot: Robot) => void;
@@ -22,7 +22,13 @@
 
 	let ref = $state<Group | undefined>(undefined);
 
-	let { robot = $bindable(), onCameraMove, onInputBoxClick, onRobotBoxClick, onOutputBoxClick }: Props = $props();
+	let {
+		robot = $bindable(),
+		onCameraMove,
+		onInputBoxClick,
+		onRobotBoxClick,
+		onOutputBoxClick
+	}: Props = $props();
 
 	let urdfRobotState = $state<IUrdfRobot | null>(null);
 	let lastJointValues = $state<Record<string, number>>({});
@@ -31,12 +37,12 @@
 		const urdfConfig: RobotUrdfConfig = {
 			urdfUrl: "/robots/so-100/so_arm100.urdf"
 		};
-		
+
 		try {
 			const UrdfRobotState = await createUrdfRobot(urdfConfig);
 			urdfRobotState = UrdfRobotState.urdfRobot;
 		} catch (error) {
-			console.error('Failed to load URDF robot:', error);
+			console.error("Failed to load URDF robot:", error);
 		}
 	});
 
@@ -47,17 +53,19 @@
 
 		// 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 || robot.jointArray.some(joint => 
-			Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold
-		);
+		const hasSignificantChanges =
+			isInitialSync ||
+			robot.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;
-		robot.jointArray.forEach(joint => {
+		robot.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);
@@ -66,11 +74,11 @@
 					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++) {
@@ -105,7 +113,6 @@
 		event.stopPropagation();
 		isToggled = !isToggled;
 	}
-
 </script>
 
 <T.Group
@@ -116,11 +123,7 @@
 	scale={[10, 10, 10]}
 	rotation={[-Math.PI / 2, 0, 0]}
 >
-	<T.Group
-		onpointerenter={onPointerEnter}
-		onpointerleave={onPointerLeave}
-		onclick={handleClick}
-	>
+	<T.Group onpointerenter={onPointerEnter} onpointerleave={onPointerLeave} onclick={handleClick}>
 		{#if urdfRobotState}
 			{#each getRootLinks(urdfRobotState) as link}
 				<UrdfLink
@@ -148,7 +151,7 @@
 			<!-- Fallback simple representation while URDF loads -->
 			<T.Mesh>
 				<T.BoxGeometry args={[0.1, 0.1, 0.1]} />
-				<T.MeshStandardMaterial 
+				<T.MeshStandardMaterial
 					color={robot.connectionStatus.isConnected ? "#10b981" : "#6b7280"}
 					opacity={$hovering ? 0.8 : 1.0}
 					transparent
@@ -157,13 +160,11 @@
 		{/if}
 	</T.Group>
 
-
-	<RobotStatusBillboard 
-		{robot} 
-		onInputBoxClick={onInputBoxClick} 
-		onRobotBoxClick={onRobotBoxClick} 
-		onOutputBoxClick={onOutputBoxClick} 
-		visible={isToggled} 
+	<RobotStatusBillboard
+		{robot}
+		{onInputBoxClick}
+		{onRobotBoxClick}
+		{onOutputBoxClick}
+		visible={isToggled}
 	/>
-
 </T.Group>

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

@@ -11,7 +11,7 @@
 	interface Props {
 		workspaceId: string;
 	}
-	let {workspaceId}: Props = $props();
+	let { workspaceId }: Props = $props();
 
 	let isInputModalOpen = $state(false);
 	let isOutputModalOpen = $state(false);
@@ -22,12 +22,12 @@
 		selectedRobot = robot;
 		isInputModalOpen = true;
 	}
-	
+
 	function onRobotBoxClick(robot: Robot) {
 		selectedRobot = robot;
 		isManualControlSheetOpen = true;
 	}
-	
+
 	function onOutputBoxClick(robot: Robot) {
 		selectedRobot = robot;
 		isOutputModalOpen = true;
@@ -43,7 +43,7 @@
 					z: 0
 				});
 			} catch (error) {
-				console.error('Failed to create robot:', error);
+				console.error("Failed to create robot:", error);
 			}
 		}
 
@@ -54,12 +54,15 @@
 
 	onDestroy(() => {
 		// Clean up robots and unlock servos for safety
-		console.log('🧹 Cleaning up robots and unlocking servos...');
-		robotManager.destroy().then(() => {
-			console.log('✅ Cleanup completed successfully');
-		}).catch((error) => {
-			console.error('❌ Error during cleanup:', error);
-		});
+		console.log("🧹 Cleaning up robots and unlocking servos...");
+		robotManager
+			.destroy()
+			.then(() => {
+				console.log("✅ Cleanup completed successfully");
+			})
+			.catch((error) => {
+				console.error("❌ Error during cleanup:", error);
+			});
 	});
 </script>
 
@@ -67,9 +70,9 @@
 	<RobotGridItem
 		{robot}
 		onCameraMove={() => {}}
-		onInputBoxClick={onInputBoxClick}
-		onRobotBoxClick={onRobotBoxClick}
-		onOutputBoxClick={onOutputBoxClick}	
+		{onInputBoxClick}
+		{onRobotBoxClick}
+		{onOutputBoxClick}
 	/>
 {/each}
 

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

@@ -6,8 +6,6 @@
 	import UrdfLink from "./UrdfLink.svelte";
 	import { Vector3 } from "three";
 	import { Billboard, MeshLineGeometry, Text } from "@threlte/extras";
-
-	import type IUrdfLink from "../interfaces/IUrdfLink";
 	import type IUrdfRobot from "../interfaces/IUrdfRobot";
 	import { radiansToDegrees } from "@/utils";
 

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

@@ -7,9 +7,7 @@
 	import { getChildJoints } from "../utils/UrdfParser";
 	import UrdfJoint from "./UrdfJoint.svelte";
 	import type IUrdfRobot from "../interfaces/IUrdfRobot";
-	import type IUrdfJoint from "../interfaces/IUrdfJoint";
 	import { T } from "@threlte/core";
-	import { Billboard, HTML, Portal } from "@threlte/extras";
 	// import Pointcloud from "@/components/test/Pointcloud.svelte";
 
 	interface Props {
@@ -55,10 +53,6 @@
 	}: Props = $props();
 
 	let showPointCloud = false;
-
-	$effect(() => {
-		console.log("render");
-	});
 </script>
 
 {@html `<!-- Link ${link.name} -->`}

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

@@ -5,9 +5,6 @@
 	import { T } from "@threlte/core";
 	import { getRootLinks } from "../utils/UrdfParser";
 	import UrdfLink from "./UrdfLink.svelte";
-	import { scale } from "svelte/transition";
-	import type IUrdfLink from "../interfaces/IUrdfLink";
-	import type IUrdfJoint from "../interfaces/IUrdfJoint";
 	import type IUrdfRobot from "../interfaces/IUrdfRobot";
 
 	interface Props {
@@ -42,15 +39,8 @@
 		jointColor = "#000000",
 		jointIndicatorColor = "#000000",
 		nameHeight = 0.1,
-		textScale = 1,
+		textScale = 1
 	}: Props = $props();
-
-	// Three.js object management
-	$effect(() => {
-		if (ref) {
-			// Handle three.js object updates
-		}
-	});
 </script>
 
 <T.Group {position} {quaternion} scale={[10, 10, 10]} rotation={[-Math.PI / 2, 0, 0]}>

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

@@ -36,10 +36,6 @@
 	const baseColor = visual?.color_rgba
 		? numberArrayToColor(visual.color_rgba.slice(0, 3) as [number, number, number])
 		: defaultColor;
-
-	$effect(() => {
-		console.log("render");
-	});
 </script>
 
 {#if visual.type === "mesh"}

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

@@ -20,7 +20,7 @@ export function getRootLinks(robot: IUrdfRobot): IUrdfLink[] {
 	// Compute the links
 	const links: IUrdfLink[] = [];
 	const joints = robot.joints;
-	
+
 	for (const link of Object.values(robot.links)) {
 		let isRoot = true;
 		for (const joint of joints) {
@@ -35,7 +35,7 @@ export function getRootLinks(robot: IUrdfRobot): IUrdfLink[] {
 		}
 	}
 
-	
+
 
 	return links;
 }

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

@@ -4,14 +4,12 @@
 	import * as Card from "@/components/ui/card";
 	import * as Alert from "@/components/ui/alert";
 	import { Badge } from "@/components/ui/badge";
-	import { Separator } from "@/components/ui/separator";
 	import { toast } from "svelte-sonner";
 
 	import type { Robot } from "$lib/elements/robot/Robot.svelte.js";
 	import { robotManager } from "$lib/elements/robot/RobotManager.svelte.js";
-	import { settings } from "$lib/runes/settings.svelte";
 	import USBCalibrationPanel from "$lib/elements/robot/calibration/USBCalibrationPanel.svelte";
-	
+
 	interface Props {
 		workspaceId: string;
 		open: boolean;
@@ -23,9 +21,9 @@
 	let isConnecting = $state(false);
 	let error = $state<string | null>(null);
 	let showUSBCalibration = $state(false);
-	let pendingUSBConnection: 'input' | null = $state(null);
-	let selectedRoomId = $state('');
-	let customRoomId = $state('');
+	let pendingUSBConnection: "input" | null = $state(null);
+	let selectedRoomId = $state("");
+	let customRoomId = $state("");
 	let showRoomManagement = $state(true);
 	let hasLoadedRooms = $state(false);
 
@@ -35,7 +33,7 @@
 			refreshRooms();
 			hasLoadedRooms = true;
 		}
-		
+
 		// Reset when modal closes
 		if (!open) {
 			hasLoadedRooms = false;
@@ -55,7 +53,7 @@
 			error = null;
 			await robotManager.refreshRooms(workspaceId);
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to refresh rooms';
+			error = err instanceof Error ? err.message : "Failed to refresh rooms";
 		}
 	}
 
@@ -65,18 +63,18 @@
 			error = null;
 			const roomId = customRoomId.trim() || robot.id;
 			const result = await robotManager.createRoboticsRoom(workspaceId, roomId);
-			
+
 			if (result.success) {
-				customRoomId = '';
+				customRoomId = "";
 				await refreshRooms();
 				toast.success("Room Created", {
 					description: `Successfully created room ${result.roomId}`
 				});
 			} else {
-				error = result.error || 'Failed to create room';
+				error = result.error || "Failed to create room";
 			}
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to create room';
+			error = err instanceof Error ? err.message : "Failed to create room";
 		} finally {
 			isConnecting = false;
 		}
@@ -84,10 +82,10 @@
 
 	async function joinRoomAsInput() {
 		if (!selectedRoomId) {
-			error = 'Please select a room';
+			error = "Please select a room";
 			return;
 		}
-		
+
 		try {
 			isConnecting = true;
 			error = null;
@@ -96,7 +94,7 @@
 				description: `Successfully joined room ${selectedRoomId} - now receiving commands`
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to join room as input';
+			error = err instanceof Error ? err.message : "Failed to join room as input";
 		} finally {
 			isConnecting = false;
 		}
@@ -108,19 +106,19 @@
 			error = null;
 			const roomId = customRoomId.trim() || robot.id;
 			const result = await robotManager.createRoboticsRoom(workspaceId, roomId);
-			
+
 			if (result.success) {
 				await robotManager.connectConsumerToRoom(workspaceId, robot.id, result.roomId!);
-				customRoomId = '';
+				customRoomId = "";
 				await refreshRooms();
 				toast.success("Room Created & Joined", {
 					description: `Successfully created and joined room ${result.roomId} - ready to receive commands`
 				});
 			} else {
-				error = result.error || 'Failed to create room and join as input';
+				error = result.error || "Failed to create room and join as input";
 			}
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to create room and join as input';
+			error = err instanceof Error ? err.message : "Failed to create room and join as input";
 		} finally {
 			isConnecting = false;
 		}
@@ -132,21 +130,21 @@
 			error = null;
 
 			if (robot.calibrationManager.needsCalibration) {
-				pendingUSBConnection = 'input';
+				pendingUSBConnection = "input";
 				showUSBCalibration = true;
 				return;
 			}
 
 			await robot.setConsumer({
-				type: 'usb',
+				type: "usb",
 				baudRate: 1000000
 			});
-			
+
 			toast.success("USB Input Connected", {
 				description: "Successfully connected to physical robot hardware"
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Unknown error';
+			error = err instanceof Error ? err.message : "Unknown error";
 			toast.error("Failed to Connect USB Input", {
 				description: `Could not connect to robot hardware: ${error}`
 			});
@@ -160,12 +158,12 @@
 			isConnecting = true;
 			error = null;
 			await robot.removeConsumer();
-			
+
 			toast.success("Input Disconnected", {
 				description: "Successfully disconnected input source"
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Unknown error';
+			error = err instanceof Error ? err.message : "Unknown error";
 			toast.error("Failed to Disconnect Input", {
 				description: `Could not disconnect input: ${error}`
 			});
@@ -176,11 +174,11 @@
 
 	async function onCalibrationComplete() {
 		showUSBCalibration = false;
-		
-		if (pendingUSBConnection === 'input') {
+
+		if (pendingUSBConnection === "input") {
 			await connectUSBInput();
 		}
-		
+
 		pendingUSBConnection = null;
 	}
 
@@ -196,12 +194,16 @@
 		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
-				<span class="icon-[mdi--account-supervisor] size-5 text-green-500 dark:text-green-400"></span>
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
+				<span class="icon-[mdi--account-supervisor] size-5 text-green-500 dark:text-green-400"
+				></span>
 				Input Connection - Robot {robot.id}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
-				Configure how this robot receives commands. Choose between direct hardware control or remote collaboration.
+				Configure how this robot receives commands. Choose between direct hardware control or remote
+				collaboration.
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -209,283 +211,334 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+					<Alert.Root
+						class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20"
+					>
 						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
 						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
+						<Alert.Description class="text-sm text-red-600 dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
 				{/if}
 
-			<!-- USB Calibration Panel -->
-			{#if showUSBCalibration}
-				<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
-					<Card.Header>
-						<div class="flex justify-between items-center">
-							<Card.Title class="text-lg font-semibold text-orange-700 dark:text-orange-200">
-								Hardware Calibration Required
-							</Card.Title>
-							<button
-								onclick={onCalibrationCancel}
-								class="text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white"
+				<!-- USB Calibration Panel -->
+				{#if showUSBCalibration}
+					<Card.Root
+						class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20"
+					>
+						<Card.Header>
+							<div class="flex items-center justify-between">
+								<Card.Title class="text-lg font-semibold text-orange-700 dark:text-orange-200">
+									Hardware Calibration Required
+								</Card.Title>
+								<button
+									onclick={onCalibrationCancel}
+									class="text-slate-600 hover:text-slate-900 dark:text-gray-400 dark:hover:text-white"
+								>
+									✕
+								</button>
+							</div>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<Alert.Root
+								class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10"
 							>
-								✕
-							</button>
-						</div>
-					</Card.Header>
-					<Card.Content class="space-y-4">
-						<Alert.Root class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10">
-							<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"></span>
-							<Alert.Description class="text-orange-700 text-sm dark:text-orange-200">
-								Before connecting to the physical robot, calibration is required to map the servo positions to software values. This ensures accurate control.
-							</Alert.Description>
-						</Alert.Root>
-
-						<USBCalibrationPanel 
-							calibrationManager={robot.calibrationManager}
-							connectionType="consumer"
-							{onCalibrationComplete}
-							onCancel={onCalibrationCancel}
-						/>
-					</Card.Content>
-				</Card.Root>
-			{:else}
-
-			<!-- Current Status Overview -->
-			<Card.Root class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20">
-				<Card.Content class="p-4">
-					<div class="flex items-center justify-between">
-						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--connection] size-4 text-green-500 dark:text-green-400"></span>
-							<span class="text-sm font-medium text-green-700 dark:text-green-300">Current Input Source</span>
-						</div>
-						{#if robot.hasConsumer}
-							<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
-								{robot.consumer?.name || 'Connected'}
-							</Badge>
-						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Input Connected</Badge>
-						{/if}
-					</div>
-					{#if robot.hasConsumer}
-						<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
-							Status: {robot.consumer?.status.isConnected ? 'Connected' : 'Disconnected'}
-						</div>
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Local Hardware Connection -->
-			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
-				<Card.Header>
-					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
-						<span class="icon-[mdi--usb-port] size-4"></span>
-						Local Hardware (USB)
-					</Card.Title>
-					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
-						Read physical robot movements in real-time
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="space-y-3">
-					{#if robot.hasConsumer && robot.consumer?.name === 'USB Consumer'}
-						<!-- USB Connected State -->
-						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
+								<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"
+								></span>
+								<Alert.Description class="text-sm text-orange-700 dark:text-orange-200">
+									Before connecting to the physical robot, calibration is required to map the servo
+									positions to software values. This ensures accurate control.
+								</Alert.Description>
+							</Alert.Root>
+
+							<USBCalibrationPanel
+								calibrationManager={robot.calibrationManager}
+								connectionType="consumer"
+								{onCalibrationComplete}
+								onCancel={onCalibrationCancel}
+							/>
+						</Card.Content>
+					</Card.Root>
+				{:else}
+					<!-- Current Status Overview -->
+					<Card.Root
+						class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20"
+					>
+						<Card.Content class="p-4">
 							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Hardware Connected</p>
-									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Reading physical servo positions</p>
+								<div class="flex items-center gap-2">
+									<span class="icon-[mdi--connection] size-4 text-green-500 dark:text-green-400"
+									></span>
+									<span class="text-sm font-medium text-green-700 dark:text-green-300"
+										>Current Input Source</span
+									>
 								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={disconnectInput}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
-								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									{isConnecting ? 'Disconnecting...' : 'Disconnect'}
-								</Button>
+								{#if robot.hasConsumer}
+									<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
+										{robot.consumer?.name || "Connected"}
+									</Badge>
+								{:else}
+									<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+										>No Input Connected</Badge
+									>
+								{/if}
 							</div>
-						</div>
-					{:else}
-						<!-- USB Connection Button -->
-						<Button
-							variant="secondary"
-							onclick={connectUSBInput}
-							disabled={isConnecting || robot.hasConsumer}
-							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
-						>
-							<span class="icon-[mdi--usb] mr-2 size-4"></span>
-							{isConnecting ? 'Connecting...' : 'Connect to Hardware'}
-						</Button>
-						
-						{#if robot.hasConsumer}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Disconnect current input to connect USB hardware
-							</p>
-						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Remote Collaboration -->
-			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
-				<Card.Header>
-					<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">
-								<span class="icon-[mdi--cloud-sync] size-4"></span>
-								Remote Collaboration (Rooms)
+							{#if robot.hasConsumer}
+								<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
+									Status: {robot.consumer?.status.isConnected ? "Connected" : "Disconnected"}
+								</div>
+							{/if}
+						</Card.Content>
+					</Card.Root>
+
+					<!-- Local Hardware Connection -->
+					<Card.Root
+						class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+					>
+						<Card.Header>
+							<Card.Title
+								class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200"
+							>
+								<span class="icon-[mdi--usb-port] size-4"></span>
+								Local Hardware (USB)
 							</Card.Title>
-							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
-								Receive commands from AI systems, remote users, or other software
+							<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
+								Read physical robot movements in real-time
 							</Card.Description>
-						</div>
-						<Button
-							variant="ghost"
-							size="sm"
-							onclick={refreshRooms}
-							disabled={robotManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
-						>
-							{#if robotManager.roomsLoading}
-								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
-								Refreshing
+						</Card.Header>
+						<Card.Content class="space-y-3">
+							{#if robot.hasConsumer && robot.consumer?.name === "USB Consumer"}
+								<!-- USB Connected State -->
+								<div
+									class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20"
+								>
+									<div class="flex items-center justify-between">
+										<div>
+											<p class="text-sm font-medium text-blue-700 dark:text-blue-300">
+												Hardware Connected
+											</p>
+											<p class="text-xs text-blue-600/70 dark:text-blue-400/70">
+												Reading physical servo positions
+											</p>
+										</div>
+										<Button
+											variant="destructive"
+											size="sm"
+											onclick={disconnectInput}
+											disabled={isConnecting}
+											class="h-7 px-2 text-xs"
+										>
+											<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+											{isConnecting ? "Disconnecting..." : "Disconnect"}
+										</Button>
+									</div>
+								</div>
 							{:else}
-								<span class="icon-[mdi--refresh] size-3 mr-1"></span>
-								Refresh
+								<!-- USB Connection Button -->
+								<Button
+									variant="secondary"
+									onclick={connectUSBInput}
+									disabled={isConnecting || robot.hasConsumer}
+									class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
+								>
+									<span class="icon-[mdi--usb] mr-2 size-4"></span>
+									{isConnecting ? "Connecting..." : "Connect to Hardware"}
+								</Button>
+
+								{#if robot.hasConsumer}
+									<p class="text-xs text-slate-600 dark:text-slate-500">
+										Disconnect current input to connect USB hardware
+									</p>
+								{/if}
 							{/if}
-						</Button>
-					</div>
-				</Card.Header>
-				<Card.Content class="space-y-4">
-					{#if robot.hasConsumer && robot.consumer?.name?.includes('Remote Consumer')}
-						<!-- Remote Connected State -->
-						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
+						</Card.Content>
+					</Card.Root>
+
+					<!-- Remote Collaboration -->
+					<Card.Root
+						class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
+					>
+						<Card.Header>
 							<div class="flex items-center justify-between">
 								<div>
-									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Room Connected</p>
-									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Receiving remote commands</p>
+									<Card.Title
+										class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+									>
+										<span class="icon-[mdi--cloud-sync] size-4"></span>
+										Remote Collaboration (Rooms)
+									</Card.Title>
+									<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
+										Receive commands from AI systems, remote users, or other software
+									</Card.Description>
 								</div>
 								<Button
-									variant="destructive"
+									variant="ghost"
 									size="sm"
-									onclick={disconnectInput}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
+									onclick={refreshRooms}
+									disabled={robotManager.roomsLoading || isConnecting}
+									class="h-7 px-2 text-xs text-purple-700 hover:bg-purple-200/20 hover:text-purple-800 dark:text-purple-300 dark:hover:bg-purple-500/20 dark:hover:text-purple-200"
 								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									{isConnecting ? 'Leaving...' : 'Leave Room'}
+									{#if robotManager.roomsLoading}
+										<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
+										Refreshing
+									{:else}
+										<span class="icon-[mdi--refresh] mr-1 size-3"></span>
+										Refresh
+									{/if}
 								</Button>
 							</div>
-						</div>
-					{:else}
-						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
-							<div class="space-y-2">
-								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
-									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							{#if robot.hasConsumer && robot.consumer?.name?.includes("Remote Consumer")}
+								<!-- Remote Connected State -->
+								<div
+									class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
+								>
+									<div class="flex items-center justify-between">
+										<div>
+											<p class="text-sm font-medium text-purple-700 dark:text-purple-300">
+												Room Connected
+											</p>
+											<p class="text-xs text-purple-600/70 dark:text-purple-400/70">
+												Receiving remote commands
+											</p>
+										</div>
+										<Button
+											variant="destructive"
+											size="sm"
+											onclick={disconnectInput}
+											disabled={isConnecting}
+											class="h-7 px-2 text-xs"
+										>
+											<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+											{isConnecting ? "Leaving..." : "Leave Room"}
+										</Button>
+									</div>
 								</div>
-								<p class="text-xs text-green-600/70 dark:text-green-400/70">
-									Create a room where others can send commands to this robot
-								</p>
-								<input
-									bind:value={customRoomId}
-									placeholder={`Room ID (default: ${robot.id})`}
-									disabled={isConnecting || robot.hasConsumer}
-									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-								/>
-								<div class="flex gap-1">
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoom}
-										disabled={isConnecting || robot.hasConsumer}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
-									>
-										Create Only
-									</Button>
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoomAndJoinAsInput}
-										disabled={isConnecting || robot.hasConsumer}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
-									>
-										Create & Join as Input
-									</Button>
+							{:else}
+								<!-- Create New Room -->
+								<div
+									class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5"
+								>
+									<div class="space-y-2">
+										<div class="flex items-center gap-2">
+											<span
+												class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"
+											></span>
+											<p class="text-sm font-medium text-green-700 dark:text-green-300">
+												Create New Room
+											</p>
+										</div>
+										<p class="text-xs text-green-600/70 dark:text-green-400/70">
+											Create a room where others can send commands to this robot
+										</p>
+										<input
+											bind:value={customRoomId}
+											placeholder={`Room ID (default: ${robot.id})`}
+											disabled={isConnecting || robot.hasConsumer}
+											class="w-full rounded border border-slate-300 bg-slate-50 px-2 py-1 text-xs text-slate-900 disabled:opacity-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100"
+										/>
+										<div class="flex gap-1">
+											<Button
+												variant="secondary"
+												size="sm"
+												onclick={createRoom}
+												disabled={isConnecting || robot.hasConsumer}
+												class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+											>
+												Create Only
+											</Button>
+											<Button
+												variant="secondary"
+												size="sm"
+												onclick={createRoomAndJoinAsInput}
+												disabled={isConnecting || robot.hasConsumer}
+												class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+											>
+												Create & Join as Input
+											</Button>
+										</div>
+									</div>
 								</div>
-							</div>
-						</div>
 
-						<!-- Existing Rooms -->
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-600 dark:text-slate-400">
-									{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? 's' : ''} available
-								</span>
-							</div>
-							
-							<div class="max-h-40 space-y-2 overflow-y-auto">
-								{#if robotManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
-										{robotManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
+								<!-- Existing Rooms -->
+								<div class="space-y-2">
+									<div class="flex items-center justify-between">
+										<span class="text-xs font-medium text-purple-700 dark:text-purple-300"
+											>Join Existing Room:</span
+										>
+										<span class="text-xs text-slate-600 dark:text-slate-400">
+											{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? "s" : ""} available
+										</span>
 									</div>
-								{:else}
-									{#each robotManager.rooms as room}
-										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
-											<div class="flex items-start justify-between gap-3">
-												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
-														{room.id}
-													</p>
-													<div class="flex 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>
+
+									<div class="max-h-40 space-y-2 overflow-y-auto">
+										{#if robotManager.rooms.length === 0}
+											<div class="py-3 text-center text-xs text-slate-600 dark:text-slate-400">
+												{robotManager.roomsLoading
+													? "Loading rooms..."
+													: "No rooms available. Create one to get started."}
+											</div>
+										{:else}
+											{#each robotManager.rooms as room}
+												<div
+													class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50"
+												>
+													<div class="flex items-start justify-between gap-3">
+														<div class="min-w-0 flex-1">
+															<p
+																class="truncate text-xs font-medium text-slate-800 dark:text-slate-200"
+															>
+																{room.id}
+															</p>
+															<div class="flex 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>
+															</div>
+														</div>
+														<Button
+															variant="secondary"
+															size="sm"
+															onclick={() => {
+																selectedRoomId = room.id;
+																joinRoomAsInput();
+															}}
+															disabled={isConnecting || robot.hasConsumer}
+															class="h-6 shrink-0 bg-purple-500 px-2 text-xs hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
+														>
+															<span class="icon-[mdi--login] mr-1 size-3"></span>
+															Join as Input
+														</Button>
 													</div>
 												</div>
-												<Button
-													variant="secondary"
-													size="sm"
-													onclick={() => {
-														selectedRoomId = room.id;
-														joinRoomAsInput();
-													}}
-													disabled={isConnecting || robot.hasConsumer}
-													class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
-												>
-													<span class="icon-[mdi--login] mr-1 size-3"></span>
-													Join as Input
-												</Button>
-											</div>
-										</div>
-									{/each}
+											{/each}
+										{/if}
+									</div>
+								</div>
+
+								{#if robot.hasConsumer}
+									<p class="text-xs text-slate-600 dark:text-slate-500">
+										Disconnect current input to join a room
+									</p>
 								{/if}
-							</div>
-						</div>
-
-						{#if robot.hasConsumer}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Disconnect current input to join a room
-							</p>
-						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
-
-			<!-- Help Information -->
-			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-				<Alert.Title class="text-slate-700 dark:text-slate-300">Input Sources</Alert.Title>
-				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
-					<strong>USB:</strong> Read physical movements • <strong>Remote:</strong> Receive network commands • Only one active at a time
-				</Alert.Description>
-			</Alert.Root>
-			{/if}
+							{/if}
+						</Card.Content>
+					</Card.Root>
+
+					<!-- Help Information -->
+					<Alert.Root
+						class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
+					>
+						<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+						<Alert.Title class="text-slate-700 dark:text-slate-300">Input Sources</Alert.Title>
+						<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
+							<strong>USB:</strong> Read physical movements • <strong>Remote:</strong> Receive network
+							commands • Only one active at a time
+						</Alert.Description>
+					</Alert.Root>
+				{/if}
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -19,16 +19,22 @@
 	<Sheet.Content
 		trapFocus={false}
 		side="right"
-		class="w-80 gap-0 border-l border-slate-300 bg-gradient-to-b from-slate-100 to-slate-200 p-0 text-slate-900 dark:border-slate-600 dark:bg-gradient-to-b dark:from-slate-700 dark:to-slate-800 dark:text-white sm:w-96"
+		class="w-80 gap-0 border-l border-slate-300 bg-gradient-to-b from-slate-100 to-slate-200 p-0 text-slate-900 sm:w-96 dark:border-slate-600 dark:bg-gradient-to-b dark:from-slate-700 dark:to-slate-800 dark:text-white"
 	>
 		<!-- Header -->
-		<Sheet.Header class="border-b border-slate-300 bg-slate-200/80 p-6 backdrop-blur-sm dark:border-slate-600 dark:bg-slate-700/80">
+		<Sheet.Header
+			class="border-b border-slate-300 bg-slate-200/80 p-6 backdrop-blur-sm dark:border-slate-600 dark:bg-slate-700/80"
+		>
 			<div class="flex items-center justify-between">
 				<div class="flex items-center gap-3">
 					<span class="icon-[mdi--tune] size-6 text-purple-500 dark:text-purple-400"></span>
 					<div>
-						<Sheet.Title class="text-xl font-semibold text-slate-900 dark:text-slate-100">Manual Control</Sheet.Title>
-						<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Direct robot joint manipulation</p>
+						<Sheet.Title class="text-xl font-semibold text-slate-900 dark:text-slate-100"
+							>Manual Control</Sheet.Title
+						>
+						<p class="mt-1 text-sm text-slate-600 dark:text-slate-400">
+							Direct robot joint manipulation
+						</p>
 					</div>
 				</div>
 			</div>
@@ -36,41 +42,54 @@
 
 		{#if robot}
 			<!-- Content -->
-			<div class="scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500">
+			<div
+				class="scrollbar-thin scrollbar-track-slate-300 scrollbar-thumb-slate-500 dark:scrollbar-track-slate-700 dark:scrollbar-thumb-slate-500 flex-1 overflow-y-auto px-4"
+			>
 				<div class="space-y-6 py-4">
 					<!-- Manual Joint Controls -->
 					{#if robot.isManualControlEnabled}
 						<div class="space-y-4">
 							<div class="mb-3 flex items-center gap-3">
-								<span class="icon-[lucide--rotate-3d] size-5 text-purple-500 dark:text-purple-400"></span>
-								<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Joint Controls</h3>
+								<span class="icon-[lucide--rotate-3d] size-5 text-purple-500 dark:text-purple-400"
+								></span>
+								<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">
+									Joint Controls
+								</h3>
 								<Badge variant="default" class="ml-auto bg-purple-500 text-xs dark:bg-purple-600">
 									{robot.jointArray.length}
 								</Badge>
 							</div>
 
 							<p class="text-xs text-slate-600 dark:text-slate-400">
-								Each joint can be moved independently using sliders. Values are normalized percentages.
+								Each joint can be moved independently using sliders. Values are normalized
+								percentages.
 							</p>
 
 							{#if robot.jointArray.length === 0}
-								<p class="py-4 text-center text-xs text-slate-600 italic dark:text-slate-500">No joints available</p>
+								<p class="py-4 text-center text-xs text-slate-600 italic dark:text-slate-500">
+									No joints available
+								</p>
 							{:else}
 								<div class="space-y-3">
 									{#each robot.jointArray as joint (joint.name)}
-										{@const isGripper = joint.name.toLowerCase() === 'jaw' || joint.name.toLowerCase() === 'gripper'}
+										{@const isGripper =
+											joint.name.toLowerCase() === "jaw" || joint.name.toLowerCase() === "gripper"}
 										{@const minValue = isGripper ? 0 : -100}
 										{@const maxValue = isGripper ? 100 : 100}
-										
-										<div class="space-y-2 rounded-lg border border-slate-300 bg-slate-100/50 p-3 dark:border-slate-600 dark:bg-slate-800/50">
+
+										<div
+											class="space-y-2 rounded-lg border border-slate-300 bg-slate-100/50 p-3 dark:border-slate-600 dark:bg-slate-800/50"
+										>
 											<div class="flex items-center justify-between">
-												<span class="text-sm font-medium text-slate-800 dark:text-slate-200">{joint.name}</span>
+												<span class="text-sm font-medium text-slate-800 dark:text-slate-200"
+													>{joint.name}</span
+												>
 												<div class="flex items-center gap-2 text-xs">
 													<span class="font-mono text-purple-600 dark:text-purple-400">
-														{joint.value.toFixed(1)}{isGripper ? '%' : '%'}
+														{joint.value.toFixed(1)}{isGripper ? "%" : "%"}
 													</span>
 													{#if joint.limits}
-														<span class="font-mono text-slate-500 text-[10px] dark:text-slate-500">
+														<span class="font-mono text-[10px] text-slate-500 dark:text-slate-500">
 															({joint.limits.lower.toFixed(1)}° to {joint.limits.upper.toFixed(1)}°)
 														</span>
 													{/if}
@@ -89,9 +108,11 @@
 													}}
 													class="slider h-2 w-full cursor-pointer appearance-none rounded-lg bg-slate-300 dark:bg-slate-600"
 												/>
-												<div class="flex justify-between text-xs text-slate-600 dark:text-slate-500">
-													<span>{minValue}{isGripper ? '% (closed)' : '%'}</span>
-													<span>{maxValue}{isGripper ? '% (open)' : '%'}</span>
+												<div
+													class="flex justify-between text-xs text-slate-600 dark:text-slate-500"
+												>
+													<span>{minValue}{isGripper ? "% (closed)" : "%"}</span>
+													<span>{maxValue}{isGripper ? "% (open)" : "%"}</span>
 												</div>
 											</div>
 										</div>
@@ -101,17 +122,24 @@
 						</div>
 					{:else}
 						<div class="space-y-4">
-												<div class="mb-3 flex items-center gap-3">
-						<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Input Control Active</h3>
-					</div>
+							<div class="mb-3 flex items-center gap-3">
+								<h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">
+									Input Control Active
+								</h3>
+							</div>
 
-					<Alert.Root class="border-purple-300/30 bg-purple-100/10 dark:border-purple-500/30 dark:bg-purple-500/10">
-						<Alert.Title class="text-sm text-purple-700 dark:text-purple-200">Input Control Active</Alert.Title>
-													<Alert.Description class="text-xs text-purple-700 dark:text-purple-300">
-								Robot controlled by: <strong>{robot.consumer?.name || 'External Input'}</strong><br />
-								Disconnect input to enable manual control.
-						</Alert.Description>
-					</Alert.Root>
+							<Alert.Root
+								class="border-purple-300/30 bg-purple-100/10 dark:border-purple-500/30 dark:bg-purple-500/10"
+							>
+								<Alert.Title class="text-sm text-purple-700 dark:text-purple-200"
+									>Input Control Active</Alert.Title
+								>
+								<Alert.Description class="text-xs text-purple-700 dark:text-purple-300">
+									Robot controlled by: <strong>{robot.consumer?.name || "External Input"}</strong
+									><br />
+									Disconnect input to enable manual control.
+								</Alert.Description>
+							</Alert.Root>
 						</div>
 					{/if}
 				</div>

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

@@ -25,11 +25,11 @@
 
 	// USB connection flow state
 	let showUSBCalibration = $state(false);
-	let pendingUSBConnection: 'output' | null = $state(null);
+	let pendingUSBConnection: "output" | null = $state(null);
 
 	// Room management state
-	let selectedRoomId = $state('');
-	let customRoomId = $state('');
+	let selectedRoomId = $state("");
+	let customRoomId = $state("");
 	let hasLoadedRooms = $state(false);
 
 	// Reactive state from robot
@@ -42,7 +42,7 @@
 			refreshRooms();
 			hasLoadedRooms = true;
 		}
-		
+
 		// Reset when modal closes
 		if (!open) {
 			hasLoadedRooms = false;
@@ -63,7 +63,7 @@
 			error = null;
 			await robotManager.refreshRooms(workspaceId);
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to refresh rooms';
+			error = err instanceof Error ? err.message : "Failed to refresh rooms";
 		}
 	}
 
@@ -73,18 +73,18 @@
 			error = null;
 			const roomId = customRoomId.trim() || robot.id;
 			const result = await robotManager.createRoboticsRoom(workspaceId, roomId);
-			
+
 			if (result.success) {
-				customRoomId = '';
+				customRoomId = "";
 				await refreshRooms();
 				toast.success("Room Created", {
 					description: `Successfully created room ${result.roomId}`
 				});
 			} else {
-				error = result.error || 'Failed to create room';
+				error = result.error || "Failed to create room";
 			}
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to create room';
+			error = err instanceof Error ? err.message : "Failed to create room";
 		} finally {
 			isConnecting = false;
 		}
@@ -92,10 +92,10 @@
 
 	async function joinRoomAsOutput() {
 		if (!selectedRoomId) {
-			error = 'Please select a room';
+			error = "Please select a room";
 			return;
 		}
-		
+
 		try {
 			isConnecting = true;
 			error = null;
@@ -104,7 +104,7 @@
 				description: `Successfully joined room ${selectedRoomId} - now sending commands`
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to join room as output';
+			error = err instanceof Error ? err.message : "Failed to join room as output";
 		} finally {
 			isConnecting = false;
 		}
@@ -116,18 +116,18 @@
 			error = null;
 			const roomId = customRoomId.trim() || robot.id;
 			const result = await robotManager.connectProducerAsProducer(workspaceId, robot.id, roomId);
-			
+
 			if (result.success) {
-				customRoomId = '';
+				customRoomId = "";
 				await refreshRooms();
 				toast.success("Room Created & Joined", {
 					description: `Successfully created and joined room ${result.roomId} - ready to send commands`
 				});
 			} else {
-				error = result.error || 'Failed to create room and join as output';
+				error = result.error || "Failed to create room and join as output";
 			}
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Failed to create room and join as output';
+			error = err instanceof Error ? err.message : "Failed to create room and join as output";
 		} finally {
 			isConnecting = false;
 		}
@@ -140,21 +140,21 @@
 
 			// Check if calibration is needed
 			if (robot.calibrationManager.needsCalibration) {
-				pendingUSBConnection = 'output';
+				pendingUSBConnection = "output";
 				showUSBCalibration = true;
 				return;
 			}
 
 			await robot.addProducer({
-				type: 'usb',
+				type: "usb",
 				baudRate: 1000000
 			});
-			
+
 			toast.success("USB Output Connected", {
 				description: "Successfully connected to physical robot hardware"
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Unknown error';
+			error = err instanceof Error ? err.message : "Unknown error";
 			toast.error("Failed to Connect USB Output", {
 				description: `Could not connect to robot hardware: ${error}`
 			});
@@ -168,12 +168,12 @@
 			isConnecting = true;
 			error = null;
 			await robot.removeProducer(producerId);
-			
+
 			toast.success("Output Disconnected", {
 				description: "Successfully disconnected output"
 			});
 		} catch (err) {
-			error = err instanceof Error ? err.message : 'Unknown error';
+			error = err instanceof Error ? err.message : "Unknown error";
 			toast.error("Failed to Disconnect Output", {
 				description: `Could not disconnect output: ${error}`
 			});
@@ -185,11 +185,11 @@
 	// Handle calibration completion
 	async function onCalibrationComplete() {
 		showUSBCalibration = false;
-		
-		if (pendingUSBConnection === 'output') {
+
+		if (pendingUSBConnection === "output") {
 			await connectUSBOutput();
 		}
-		
+
 		pendingUSBConnection = null;
 	}
 
@@ -205,12 +205,15 @@
 		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
 				<span class="icon-[mdi--devices] size-5 text-blue-500 dark:text-blue-400"></span>
 				Output Connection - Robot {robot.id}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
-				Configure where this robot sends its movements. Multiple outputs can be active simultaneously.
+				Configure where this robot sends its movements. Multiple outputs can be active
+				simultaneously.
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -218,10 +221,12 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+					<Alert.Root
+						class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20"
+					>
 						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
 						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
+						<Alert.Description class="text-sm text-red-600 dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
@@ -229,9 +234,11 @@
 
 				<!-- USB Calibration Panel -->
 				{#if showUSBCalibration}
-					<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
+					<Card.Root
+						class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20"
+					>
 						<Card.Header>
-							<div class="flex justify-between items-center">
+							<div class="flex items-center justify-between">
 								<Card.Title class="text-lg font-semibold text-orange-700 dark:text-orange-200">
 									Hardware Calibration Required
 								</Card.Title>
@@ -244,14 +251,18 @@
 							</div>
 						</Card.Header>
 						<Card.Content class="space-y-4">
-							<Alert.Root class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10">
-								<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"></span>
-								<Alert.Description class="text-orange-700 text-sm dark:text-orange-200">
-									Before connecting to the physical robot, calibration is required to map the servo positions to software values. This ensures accurate control.
+							<Alert.Root
+								class="border-orange-300/30 bg-orange-100/10 dark:border-orange-500/30 dark:bg-orange-500/10"
+							>
+								<span class="icon-[mdi--information] size-4 text-orange-500 dark:text-orange-400"
+								></span>
+								<Alert.Description class="text-sm text-orange-700 dark:text-orange-200">
+									Before connecting to the physical robot, calibration is required to map the servo
+									positions to software values. This ensures accurate control.
 								</Alert.Description>
 							</Alert.Root>
 
-							<USBCalibrationPanel 
+							<USBCalibrationPanel
 								calibrationManager={robot.calibrationManager}
 								connectionType="producer"
 								{onCalibrationComplete}
@@ -260,222 +271,261 @@
 						</Card.Content>
 					</Card.Root>
 				{:else}
-
-				<!-- Current Status Overview -->
-				<Card.Root class="border-blue-300/30 bg-blue-100/20 dark:border-blue-500/30 dark:bg-blue-900/20">
-					<Card.Content class="p-4">
-						<div class="flex items-center justify-between">
-							<div class="flex items-center gap-2">
-								<span class="icon-[mdi--broadcast] size-4 text-blue-500 dark:text-blue-400"></span>
-								<span class="text-sm font-medium text-blue-700 dark:text-blue-300">Active Outputs</span>
-							</div>
-							<Badge variant="default" class="bg-blue-500 text-xs dark:bg-blue-600">
-								{outputDriverCount} Connected
-							</Badge>
-						</div>
-					</Card.Content>
-				</Card.Root>
-
-				<!-- Local Hardware Connection -->
-				<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
-					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
-							<span class="icon-[mdi--usb-port] size-4"></span>
-							Local Hardware (USB)
-						</Card.Title>
-						<Card.Description class="text-xs text-green-600/70 dark:text-green-300/70">
-							Send commands directly to physical robot hardware
-						</Card.Description>
-					</Card.Header>
-					<Card.Content class="space-y-3">
-						<Button
-							variant="secondary"
-							onclick={connectUSBOutput}
-							disabled={isConnecting}
-							class="w-full bg-green-500 text-sm text-white hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
-						>
-							<span class="icon-[mdi--usb] mr-2 size-4"></span>
-							{isConnecting ? 'Connecting...' : 'Add USB Output'}
-						</Button>
-					</Card.Content>
-				</Card.Root>
-
-				<!-- Remote Collaboration -->
-				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
-					<Card.Header>
-						<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">
-									<span class="icon-[mdi--cloud-sync] size-4"></span>
-									Remote Collaboration (Rooms)
-								</Card.Title>
-								<Card.Description class="text-xs text-orange-600/70 dark:text-orange-300/70">
-									Broadcast robot movements to remote systems and AI
-								</Card.Description>
-							</div>
-							<Button
-								variant="ghost"
-								size="sm"
-								onclick={refreshRooms}
-								disabled={robotManager.roomsLoading || isConnecting}
-								class="h-7 px-2 text-xs text-orange-700 hover:text-orange-800 hover:bg-orange-200/20 dark:text-orange-300 dark:hover:text-orange-200 dark:hover:bg-orange-500/20"
-							>
-								{#if robotManager.roomsLoading}
-									<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
-									Refreshing
-								{:else}
-									<span class="icon-[mdi--refresh] size-3 mr-1"></span>
-									Refresh
-								{/if}
-							</Button>
-						</div>
-					</Card.Header>
-					<Card.Content class="space-y-4">
-						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
-							<div class="space-y-2">
+					<!-- Current Status Overview -->
+					<Card.Root
+						class="border-blue-300/30 bg-blue-100/20 dark:border-blue-500/30 dark:bg-blue-900/20"
+					>
+						<Card.Content class="p-4">
+							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
-									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
-								</div>
-								<p class="text-xs text-green-600/70 dark:text-green-400/70">
-									Create a room to broadcast this robot's movements
-								</p>
-								<input
-									bind:value={customRoomId}
-									placeholder={`Room ID (default: ${robot.id})`}
-									disabled={isConnecting}
-									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-								/>
-								<div class="flex gap-1">
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoom}
-										disabled={isConnecting}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
-									>
-										Create Only
-									</Button>
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoomAndJoinAsOutput}
-										disabled={isConnecting}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
+									<span class="icon-[mdi--broadcast] size-4 text-blue-500 dark:text-blue-400"
+									></span>
+									<span class="text-sm font-medium text-blue-700 dark:text-blue-300"
+										>Active Outputs</span
 									>
-										Create & Join as Output
-									</Button>
 								</div>
+								<Badge variant="default" class="bg-blue-500 text-xs dark:bg-blue-600">
+									{outputDriverCount} Connected
+								</Badge>
 							</div>
-						</div>
-
-						<!-- Existing Rooms -->
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-orange-700 dark:text-orange-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-600 dark:text-slate-400">
-									{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? 's' : ''} available
-								</span>
-							</div>
-							
-							<div class="max-h-40 space-y-2 overflow-y-auto">
-								{#if robotManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
-										{robotManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
-									</div>
-								{:else}
-									{#each robotManager.rooms as room}
-										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
-											<div class="flex items-start justify-between gap-3">
-												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
-														{room.id}
-													</p>
-													<div class="flex 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>
-													</div>
-												</div>
-												{#if !room.has_producer}
-													<Button
-														variant="secondary"
-														size="sm"
-														onclick={() => {
-															selectedRoomId = room.id;
-															joinRoomAsOutput();
-														}}
-														disabled={isConnecting}
-														class="h-6 px-2 text-xs bg-orange-500 hover:bg-orange-600 shrink-0 dark:bg-orange-600 dark:hover:bg-orange-700"
-													>
-														<span class="icon-[mdi--login] mr-1 size-3"></span>
-														Join as Output
-													</Button>
-												{:else}
-													<Button
-														variant="ghost"
-														size="sm"
-														disabled
-														class="h-6 px-2 text-xs opacity-50 shrink-0"
-													>
-														Occupied
-													</Button>
-												{/if}
-											</div>
-										</div>
-									{/each}
-								{/if}
-							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
+						</Card.Content>
+					</Card.Root>
 
-				<!-- Connected Outputs -->
-				{#if producers.length > 0}
-					<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
+					<!-- Local Hardware Connection -->
+					<Card.Root
+						class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5"
+					>
 						<Card.Header>
-							<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
-								<span class="icon-[mdi--connection] size-4"></span>
-								Connected Outputs
+							<Card.Title
+								class="flex items-center gap-2 text-base text-green-700 dark:text-green-200"
+							>
+								<span class="icon-[mdi--usb-port] size-4"></span>
+								Local Hardware (USB)
 							</Card.Title>
+							<Card.Description class="text-xs text-green-600/70 dark:text-green-300/70">
+								Send commands directly to physical robot hardware
+							</Card.Description>
 						</Card.Header>
-						<Card.Content>
-							<div class="max-h-32 space-y-2 overflow-y-auto">
-								{#each producers as producer}
-									<div class="flex items-center justify-between rounded-md bg-slate-100/50 p-2 dark:bg-slate-700/50">
-										<div class="flex items-center gap-2">
-											<span 
-												class="size-2 rounded-full {producer.status.isConnected ? 'bg-green-500 dark:bg-green-400' : 'bg-red-500 dark:bg-red-400'}"
-											></span>
-											<span class="text-sm text-slate-700 dark:text-slate-300">{producer.name}</span>
-											<Badge variant="secondary" class="text-xs">{producer.id.slice(0, 12)}</Badge>
-										</div>
+						<Card.Content class="space-y-3">
+							<Button
+								variant="secondary"
+								onclick={connectUSBOutput}
+								disabled={isConnecting}
+								class="w-full bg-green-500 text-sm text-white hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
+							>
+								<span class="icon-[mdi--usb] mr-2 size-4"></span>
+								{isConnecting ? "Connecting..." : "Add USB Output"}
+							</Button>
+						</Card.Content>
+					</Card.Root>
+
+					<!-- Remote Collaboration -->
+					<Card.Root
+						class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5"
+					>
+						<Card.Header>
+							<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"
+									>
+										<span class="icon-[mdi--cloud-sync] size-4"></span>
+										Remote Collaboration (Rooms)
+									</Card.Title>
+									<Card.Description class="text-xs text-orange-600/70 dark:text-orange-300/70">
+										Broadcast robot movements to remote systems and AI
+									</Card.Description>
+								</div>
+								<Button
+									variant="ghost"
+									size="sm"
+									onclick={refreshRooms}
+									disabled={robotManager.roomsLoading || isConnecting}
+									class="h-7 px-2 text-xs text-orange-700 hover:bg-orange-200/20 hover:text-orange-800 dark:text-orange-300 dark:hover:bg-orange-500/20 dark:hover:text-orange-200"
+								>
+									{#if robotManager.roomsLoading}
+										<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
+										Refreshing
+									{:else}
+										<span class="icon-[mdi--refresh] mr-1 size-3"></span>
+										Refresh
+									{/if}
+								</Button>
+							</div>
+						</Card.Header>
+						<Card.Content class="space-y-4">
+							<!-- Create New Room -->
+							<div
+								class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5"
+							>
+								<div class="space-y-2">
+									<div class="flex items-center gap-2">
+										<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"
+										></span>
+										<p class="text-sm font-medium text-green-700 dark:text-green-300">
+											Create New Room
+										</p>
+									</div>
+									<p class="text-xs text-green-600/70 dark:text-green-400/70">
+										Create a room to broadcast this robot's movements
+									</p>
+									<input
+										bind:value={customRoomId}
+										placeholder={`Room ID (default: ${robot.id})`}
+										disabled={isConnecting}
+										class="w-full rounded border border-slate-300 bg-slate-50 px-2 py-1 text-xs text-slate-900 disabled:opacity-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100"
+									/>
+									<div class="flex gap-1">
+										<Button
+											variant="secondary"
+											size="sm"
+											onclick={createRoom}
+											disabled={isConnecting}
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
+										>
+											Create Only
+										</Button>
 										<Button
-											variant="destructive"
+											variant="secondary"
 											size="sm"
-											onclick={() => disconnectOutput(producer.id)}
+											onclick={createRoomAndJoinAsOutput}
 											disabled={isConnecting}
-											class="h-6 px-2 text-xs"
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700"
 										>
-											<span class="icon-[mdi--close] size-3"></span>
+											Create & Join as Output
 										</Button>
 									</div>
-								{/each}
+								</div>
+							</div>
+
+							<!-- Existing Rooms -->
+							<div class="space-y-2">
+								<div class="flex items-center justify-between">
+									<span class="text-xs font-medium text-orange-700 dark:text-orange-300"
+										>Join Existing Room:</span
+									>
+									<span class="text-xs text-slate-600 dark:text-slate-400">
+										{robotManager.rooms.length} room{robotManager.rooms.length !== 1 ? "s" : ""} available
+									</span>
+								</div>
+
+								<div class="max-h-40 space-y-2 overflow-y-auto">
+									{#if robotManager.rooms.length === 0}
+										<div class="py-3 text-center text-xs text-slate-600 dark:text-slate-400">
+											{robotManager.roomsLoading
+												? "Loading rooms..."
+												: "No rooms available. Create one to get started."}
+										</div>
+									{:else}
+										{#each robotManager.rooms as room}
+											<div
+												class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50"
+											>
+												<div class="flex items-start justify-between gap-3">
+													<div class="min-w-0 flex-1">
+														<p
+															class="truncate text-xs font-medium text-slate-800 dark:text-slate-200"
+														>
+															{room.id}
+														</p>
+														<div class="flex 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>
+														</div>
+													</div>
+													{#if !room.has_producer}
+														<Button
+															variant="secondary"
+															size="sm"
+															onclick={() => {
+																selectedRoomId = room.id;
+																joinRoomAsOutput();
+															}}
+															disabled={isConnecting}
+															class="h-6 shrink-0 bg-orange-500 px-2 text-xs hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700"
+														>
+															<span class="icon-[mdi--login] mr-1 size-3"></span>
+															Join as Output
+														</Button>
+													{:else}
+														<Button
+															variant="ghost"
+															size="sm"
+															disabled
+															class="h-6 shrink-0 px-2 text-xs opacity-50"
+														>
+															Occupied
+														</Button>
+													{/if}
+												</div>
+											</div>
+										{/each}
+									{/if}
+								</div>
 							</div>
 						</Card.Content>
 					</Card.Root>
-				{/if}
 
-				<!-- Help Information -->
-				<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
-					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-					<Alert.Title class="text-slate-700 dark:text-slate-300">Output Sources</Alert.Title>
-					<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
-						<strong>USB:</strong> Control physical hardware • <strong>Remote:</strong> Broadcast to network • Multiple outputs can be active
-					</Alert.Description>
-				</Alert.Root>
+					<!-- Connected Outputs -->
+					{#if producers.length > 0}
+						<Card.Root
+							class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+						>
+							<Card.Header>
+								<Card.Title
+									class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200"
+								>
+									<span class="icon-[mdi--connection] size-4"></span>
+									Connected Outputs
+								</Card.Title>
+							</Card.Header>
+							<Card.Content>
+								<div class="max-h-32 space-y-2 overflow-y-auto">
+									{#each producers as producer}
+										<div
+											class="flex items-center justify-between rounded-md bg-slate-100/50 p-2 dark:bg-slate-700/50"
+										>
+											<div class="flex items-center gap-2">
+												<span
+													class="size-2 rounded-full {producer.status.isConnected
+														? 'bg-green-500 dark:bg-green-400'
+														: 'bg-red-500 dark:bg-red-400'}"
+												></span>
+												<span class="text-sm text-slate-700 dark:text-slate-300"
+													>{producer.name}</span
+												>
+												<Badge variant="secondary" class="text-xs">{producer.id.slice(0, 12)}</Badge
+												>
+											</div>
+											<Button
+												variant="destructive"
+												size="sm"
+												onclick={() => disconnectOutput(producer.id)}
+												disabled={isConnecting}
+												class="h-6 px-2 text-xs"
+											>
+												<span class="icon-[mdi--close] size-3"></span>
+											</Button>
+										</div>
+									{/each}
+								</div>
+							</Card.Content>
+						</Card.Root>
+					{/if}
+
+					<!-- Help Information -->
+					<Alert.Root
+						class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
+					>
+						<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+						<Alert.Title class="text-slate-700 dark:text-slate-300">Output Sources</Alert.Title>
+						<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
+							<strong>USB:</strong> Control physical hardware • <strong>Remote:</strong> Broadcast to
+							network • Multiple outputs can be active
+						</Alert.Description>
+					</Alert.Root>
 				{/if}
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -15,27 +15,16 @@
 
 	let { robot, onInputBoxClick, onRobotBoxClick, onOutputBoxClick }: Props = $props();
 
-	// Colors
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
 </script>
 
-<!--
-@component
-Connection flow layout showing the robot control flow from input to robot to outputs.
-Uses consistent arrow theming and spacing.
--->
-
 <Container flexDirection="row" alignItems="center" gap={12}>
 	<!-- Input Box -->
 	<InputBoxUIKit {robot} {onInputBoxClick} />
 
 	<!-- Arrow 1: Input to Robot -->
-	<StatusArrow
-		direction="right"
-		color={inputColor}
-		opacity={robot.hasConsumer ? 1 : 0.5}
-	/>
+	<StatusArrow direction="right" color={inputColor} opacity={robot.hasConsumer ? 1 : 0.5} />
 
 	<!-- Robot Box -->
 	<RobotBoxUIKit {robot} {onRobotBoxClick} />

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import type { Robot } from "$lib/elements/robot/Robot.svelte.js";
 	import { ICON } from "$lib/utils/icon";
-	import { 
-		BaseStatusBox, 
-		StatusHeader, 
-		StatusContent, 
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
 		StatusIndicator,
 		StatusButton
 	} from "$lib/components/3d/ui";
@@ -21,16 +21,9 @@
 		onInputBoxClick(robot);
 	}
 
-	// Input theme color (green)
 	const inputColor = "rgb(34, 197, 94)";
 </script>
 
-<!--
-@component
-Input connection box showing the status of the input connection.
-Displays input information when connected or connection prompt when disconnected.
--->
-
 <BaseStatusBox
 	color={inputColor}
 	borderOpacity={robot.hasConsumer ? 0.8 : 0.4}
@@ -47,15 +40,12 @@ Displays input information when connected or connection prompt when disconnected
 			opacity={0.9}
 		/>
 
-				<StatusContent
-					title={robot.consumer?.name.slice(0, 30) ?? 'No Input'}
-					color={inputColor}
-				/>
+		<StatusContent title={robot.consumer?.name.slice(0, 30) ?? "No Input"} color={inputColor} />
 
-			{#if robot.consumer?.constructor.name}
-				<Text
-					text={robot.consumer.constructor.name.replace("Driver", "").slice(0, 30)}
-					fontSize={11}
+		{#if robot.consumer?.constructor.name}
+			<Text
+				text={robot.consumer.constructor.name.replace("Driver", "").slice(0, 30)}
+				fontSize={11}
 				fontWeight="normal"
 				color="rgb(134, 239, 172)"
 				opacity={0.9}
@@ -87,11 +77,7 @@ Displays input information when connected or connection prompt when disconnected
 			fontSize={13}
 		/>
 
-		<StatusContent 
-			title="Click to Connect"
-			color={inputColor}
-			variant="secondary"
-		/>
+		<StatusContent title="Click to Connect" color={inputColor} variant="secondary" />
 
 		<StatusButton
 			text="Add Input"
@@ -101,4 +87,4 @@ Displays input information when connected or connection prompt when disconnected
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -18,11 +18,10 @@
 		}
 	}
 
-	// Manual control theme color (purple)
 	const manualColor = "rgb(147, 51, 234)";
 </script>
 
-<BaseStatusBox 
+<BaseStatusBox
 	color={manualColor}
 	borderOpacity={isDisabled ? 0.3 : robot.isManualControlEnabled ? 0.8 : 0.5}
 	backgroundOpacity={isDisabled ? 0.1 : robot.isManualControlEnabled ? 0.3 : 0.2}
@@ -31,29 +30,29 @@
 >
 	{#if isDisabled}
 		<!-- Disabled State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--lock]"].svg} 
-			text="DISABLED" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--lock]"].svg}
+			text="DISABLED"
 			color={manualColor}
 			opacity={0.7}
 		/>
 
-		<StatusContent 
-							title="Control managed by"
-				subtitle={robot.consumer?.name.slice(0, 20) ?? 'No Input'}
-				color="rgb(196, 181, 253)"
+		<StatusContent
+			title="Control managed by"
+			subtitle={robot.consumer?.name.slice(0, 20) ?? "No Input"}
+			color="rgb(196, 181, 253)"
 			variant="secondary"
 		/>
 	{:else if robot.isManualControlEnabled}
 		<!-- Enabled State -->
-		<StatusHeader 
-			icon={ICON["icon-[solar--volume-knob-bold]"].svg} 
-			text="ACTIVE" 
+		<StatusHeader
+			icon={ICON["icon-[solar--volume-knob-bold]"].svg}
+			text="ACTIVE"
 			color={manualColor}
 			opacity={0.9}
 		/>
 
-		<StatusContent 
+		<StatusContent
 			title={`${robot.jointArray.length} Joints Active`}
 			subtitle="Manual Control Enabled"
 			color="rgb(233, 213, 255)"
@@ -61,20 +60,16 @@
 		/>
 	{:else}
 		<!-- Default State (Manual Off) -->
-		<StatusHeader 
-			icon={ICON["icon-[solar--volume-knob-bold]"].svg} 
-			text="MANUAL" 
+		<StatusHeader
+			icon={ICON["icon-[solar--volume-knob-bold]"].svg}
+			text="MANUAL"
 			color={manualColor}
 			opacity={0.8}
 		/>
 
-		<StatusContent 
-			title="Click to Enable"
-			color={manualColor}
-			variant="secondary"
-		/>
+		<StatusContent title="Click to Enable" color={manualColor} variant="secondary" />
 
-		<StatusButton 
+		<StatusButton
 			icon={ICON["icon-[mingcute--settings-2-fill]"].svg}
 			text="Configure"
 			color={manualColor}

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

@@ -16,15 +16,13 @@
 
 	// Output theme color (blue)
 	const outputColor = "rgb(59, 130, 246)";
-	
-
 </script>
 
 <!-- 
 	Event info here
 	https://github.com/threlte/threlte-uikit/blob/13b34172656cd49b9e2f38d7a9c41305e435daa1/src/lib/Events.ts#L30 
 -->
-<BaseStatusBox 
+<BaseStatusBox
 	color={outputColor}
 	borderOpacity={robot.outputDriverCount > 0 ? 0.8 : 0.4}
 	backgroundOpacity={robot.outputDriverCount > 0 ? 0.3 : 0.15}
@@ -33,15 +31,15 @@
 >
 	{#if robot.outputDriverCount > 0}
 		<!-- Connected Outputs State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--upload]"].svg} 
-			text="OUTPUT" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="OUTPUT"
 			color={outputColor}
 			opacity={0.9}
 		/>
 
 		<!-- Outputs Count -->
-		<StatusContent 
+		<StatusContent
 			title={`${robot.outputDriverCount} Outputs Active`}
 			color="rgb(191, 219, 254)"
 			variant="primary"
@@ -49,13 +47,10 @@
 
 		{#if robot.producers.length > 0}
 			<!-- Outputs List -->
-			<StatusContent
-				color={outputColor}
-				variant="secondary"
-			>
+			<StatusContent color={outputColor} variant="secondary">
 				{#snippet children()}
 					{#each robot.producers.slice(0, 2) as producer}
-						<StatusContent 
+						<StatusContent
 							title={producer.name.slice(0, 20)}
 							subtitle={producer.constructor.name.replace("Producer", "").slice(0, 15)}
 							color={outputColor}
@@ -65,7 +60,7 @@
 					{/each}
 
 					{#if robot.producers.length > 2}
-						<StatusContent 
+						<StatusContent
 							title={`+${robot.producers.length - 2} more`}
 							color={outputColor}
 							variant="tertiary"
@@ -77,24 +72,20 @@
 		{/if}
 	{:else}
 		<!-- No Outputs State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--upload]"].svg} 
-			text="NO OUTPUT" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="NO OUTPUT"
 			color={outputColor}
 			opacity={0.7}
 		/>
 
-		<StatusContent 
-			title="Click to Connect"
-			color={outputColor}
-			variant="secondary"
-		/>
+		<StatusContent title="Click to Connect" color={outputColor} variant="secondary" />
 
-		<StatusButton 
+		<StatusButton
 			icon={ICON["icon-[mdi--plus]"].svg}
 			text="Add Outputs"
 			color={outputColor}
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -15,7 +15,6 @@
 
 	let { robot, onRobotBoxClick }: Props = $props();
 
-	// Robot theme color (orange)
 	const robotColor = "rgb(245, 158, 11)";
 </script>
 

src/lib/components/3d/elements/video/Video.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
 	import { T } from "@threlte/core";
 	import { interactivity } from "@threlte/extras";
-	import { VideoTexture, CanvasTexture, LinearFilter, RGBAFormat, Shape, Path, ExtrudeGeometry, BoxGeometry } from "three";
+	import {
+		VideoTexture,
+		CanvasTexture,
+		LinearFilter,
+		RGBAFormat,
+		Shape,
+		Path,
+		ExtrudeGeometry,
+		BoxGeometry
+	} from "three";
 	import { onMount } from "svelte";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
@@ -10,7 +19,7 @@
 	interface Props {
 		// Video instance (required)
 		videoInstance: VideoInstance;
-		
+
 		// Workspace ID (required for API calls)
 		workspaceId: string;
 
@@ -82,45 +91,45 @@
 
 	// Function to create loading texture with text
 	const createLoadingTexture = (text: string, backgroundColor: string = fallbackColor) => {
-		const canvas = document.createElement('canvas');
-		const ctx = canvas.getContext('2d')!;
-		
+		const canvas = document.createElement("canvas");
+		const ctx = canvas.getContext("2d")!;
+
 		// Set canvas size (should match video aspect ratio)
 		canvas.width = 512;
 		canvas.height = 288; // 16:9 aspect ratio
-		
+
 		// Fill background
 		ctx.fillStyle = backgroundColor;
 		ctx.fillRect(0, 0, canvas.width, canvas.height);
-		
+
 		// Setup text styling
-		ctx.fillStyle = '#FFFFFF';
-		ctx.textAlign = 'center';
-		ctx.textBaseline = 'middle';
-		ctx.font = 'bold 32px Arial, sans-serif';
-		
+		ctx.fillStyle = "#FFFFFF";
+		ctx.textAlign = "center";
+		ctx.textBaseline = "middle";
+		ctx.font = "bold 32px Arial, sans-serif";
+
 		// Add text shadow for better readability
-		ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
+		ctx.shadowColor = "rgba(0, 0, 0, 0.7)";
 		ctx.shadowBlur = 4;
 		ctx.shadowOffsetX = 2;
 		ctx.shadowOffsetY = 2;
-		
+
 		// Draw the loading text
 		ctx.fillText(text, canvas.width / 2, canvas.height / 2);
-		
+
 		// Draw emoji if provided
 		if (loadingEmoji) {
-			ctx.font = 'bold 48px Arial, sans-serif';
-			ctx.shadowColor = 'transparent';
+			ctx.font = "bold 48px Arial, sans-serif";
+			ctx.shadowColor = "transparent";
 			ctx.fillText(loadingEmoji, canvas.width / 2, canvas.height / 2 - 60);
 		}
-		
+
 		// Create and return Three.js texture
 		const texture = new CanvasTexture(canvas);
 		texture.minFilter = LinearFilter;
 		texture.magFilter = LinearFilter;
 		texture.needsUpdate = true;
-		
+
 		return texture;
 	};
 
@@ -224,7 +233,10 @@
 			}
 
 			// Cache status values to prevent reactive loops
-			const canActivate = lazyLoad && (videoInstance.input.connectionState === 'prepared' || videoInstance.input.connectionState === 'paused');
+			const canActivate =
+				lazyLoad &&
+				(videoInstance.input.connectionState === "prepared" ||
+					videoInstance.input.connectionState === "paused");
 			const hasPreparedRoom = videoInstance.input.preparedRoomId !== null;
 
 			// Add a small delay to avoid loading on quick hovers
@@ -261,7 +273,10 @@
 			cleanupVideo();
 
 			// Cache status values to prevent reactive loops
-			const canPause = lazyLoad && videoInstance.input.connectionState === 'connected' && videoInstance.input.connectionPolicy === 'lazy';
+			const canPause =
+				lazyLoad &&
+				videoInstance.input.connectionState === "connected" &&
+				videoInstance.input.connectionPolicy === "lazy";
 
 			// Only pause remote streams with lazy policy (not persistent connections)
 			if (canPause) {
@@ -283,11 +298,11 @@
 		}
 
 		const currentStream = videoInstance.currentStream;
-		
+
 		// Only update if the stream reference has actually changed
 		if (currentStream !== lastStreamRef) {
 			lastStreamRef = currentStream;
-			
+
 			// Gracefully stop current video
 			try {
 				videoElement.pause();

src/lib/components/3d/elements/video/VideoGridItem.svelte

@@ -13,13 +13,7 @@
 		onOutputBoxClick: (video: VideoInstance) => void;
 	}
 
-	let {
-		video,
-		workspaceId,
-		onCameraMove,
-		onInputBoxClick,
-		onOutputBoxClick
-	}: Props = $props();
+	let { video, workspaceId, onCameraMove, onInputBoxClick, onOutputBoxClick }: Props = $props();
 
 	const { onPointerEnter, onPointerLeave } = useCursor();
 	interactivity();
@@ -35,7 +29,7 @@
 
 <T.Group
 	position.x={video.position.x}
-	position.y={video.position.y+1}
+	position.y={video.position.y + 1}
 	position.z={video.position.z}
 	scale={[1, 1, 1]}
 >

src/lib/components/3d/elements/video/Videos.svelte

@@ -11,7 +11,7 @@
 	interface Props {
 		workspaceId: string;
 	}
-	let {workspaceId}: Props = $props();
+	let { workspaceId }: Props = $props();
 
 	// Modal state
 	let isInputModalOpen = $state(false);
@@ -34,8 +34,8 @@
 		{video}
 		{workspaceId}
 		onCameraMove={() => {}}
-		onInputBoxClick={onInputBoxClick}
-		onOutputBoxClick={onOutputBoxClick}
+		{onInputBoxClick}
+		{onOutputBoxClick}
 	/>
 {/each}
 

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

@@ -16,152 +16,156 @@
 
 	let { open = $bindable(), video, workspaceId }: Props = $props();
 
-    let isConnecting = $state(false);
-    let error = $state<string | null>(null);
-    let customRoomId = $state('');
-    let hasLoadedRooms = $state(false);
+	let isConnecting = $state(false);
+	let error = $state<string | null>(null);
+	let customRoomId = $state("");
+	let hasLoadedRooms = $state(false);
 
-    // Auto-load rooms when modal opens (only once per modal session)
-    $effect(() => {
-        if (open && !hasLoadedRooms && !videoManager.roomsLoading) {
-            refreshRooms();
-            hasLoadedRooms = true;
-        }
-        
-        // Reset when modal closes
-        if (!open) {
-            hasLoadedRooms = false;
-            error = null;
-        }
-    });
+	// Auto-load rooms when modal opens (only once per modal session)
+	$effect(() => {
+		if (open && !hasLoadedRooms && !videoManager.roomsLoading) {
+			refreshRooms();
+			hasLoadedRooms = true;
+		}
 
-    async function refreshRooms() {
-        try {
-            error = null;
-            await videoManager.refreshRooms(workspaceId);
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to refresh rooms';
-        }
-    }
+		// Reset when modal closes
+		if (!open) {
+			hasLoadedRooms = false;
+			error = null;
+		}
+	});
 
-    async function handleConnectCamera() {
-        try {
-            isConnecting = true;
-            error = null;
-            
-            const result = await videoManager.connectLocalCamera(video.id);
-            if (result.success) {
-                toast.success("Camera Connected", {
-                    description: "Successfully connected to local camera"
-                });
-            } else {
-                error = result.error || 'Failed to connect camera';
-                toast.error("Camera Connection Failed", {
-                    description: error
-                });
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to connect camera';
-            toast.error("Camera Connection Error", {
-                description: error
-            });
-        } finally {
-            isConnecting = false;
-        }
-    }
+	async function refreshRooms() {
+		try {
+			error = null;
+			await videoManager.refreshRooms(workspaceId);
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to refresh rooms";
+		}
+	}
+
+	async function handleConnectCamera() {
+		try {
+			isConnecting = true;
+			error = null;
+
+			const result = await videoManager.connectLocalCamera(video.id);
+			if (result.success) {
+				toast.success("Camera Connected", {
+					description: "Successfully connected to local camera"
+				});
+			} else {
+				error = result.error || "Failed to connect camera";
+				toast.error("Camera Connection Failed", {
+					description: error
+				});
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to connect camera";
+			toast.error("Camera Connection Error", {
+				description: error
+			});
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleConnectToRoom(roomId: string) {
+		try {
+			isConnecting = true;
+			error = null;
+			const result = await videoManager.connectRemoteStream(workspaceId, video.id, roomId);
+			if (result.success) {
+				toast.success("Connected to Room", {
+					description: `Successfully connected to room ${roomId} - receiving video stream`
+				});
+			} else {
+				error = result.error || "Failed to connect to room";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to connect to room";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function createRoom() {
+		try {
+			isConnecting = true;
+			error = null;
+			const roomId = customRoomId.trim() || video.id;
+			const result = await videoManager.createVideoRoom(workspaceId, roomId);
 
-    async function handleConnectToRoom(roomId: string) {
-        try {
-            isConnecting = true;
-            error = null;
-            const result = await videoManager.connectRemoteStream(workspaceId, video.id, roomId);
-            if (result.success) {
-                toast.success("Connected to Room", {
-                    description: `Successfully connected to room ${roomId} - receiving video stream`
-                });
-            } else {
-                error = result.error || 'Failed to connect to room';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to connect to room';
-        } finally {
-            isConnecting = false;
-        }
-    }
+			if (result.success) {
+				customRoomId = "";
+				await refreshRooms();
+				toast.success("Room Created", {
+					description: `Successfully created room ${result.roomId}`
+				});
+			} else {
+				error = result.error || "Failed to create room";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to create room";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function createRoomAndConnect() {
+		try {
+			isConnecting = true;
+			error = null;
+			const roomId = customRoomId.trim() || video.id;
+			const createResult = await videoManager.createVideoRoom(workspaceId, roomId);
 
-    async function createRoom() {
-        try {
-            isConnecting = true;
-            error = null;
-            const roomId = customRoomId.trim() || video.id;
-            const result = await videoManager.createVideoRoom(workspaceId, roomId);
-            
-            if (result.success) {
-                customRoomId = '';
-                await refreshRooms();
-                toast.success("Room Created", {
-                    description: `Successfully created room ${result.roomId}`
-                });
-            } else {
-                error = result.error || 'Failed to create room';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to create room';
-        } finally {
-            isConnecting = false;
-        }
-    }
+			if (!createResult.success) {
+				error = createResult.error || "Failed to create room";
+				return;
+			}
+
+			const connectResult = await videoManager.connectRemoteStream(
+				workspaceId,
+				video.id,
+				createResult.roomId!
+			);
+			if (connectResult.success) {
+				customRoomId = "";
+				await refreshRooms();
+				toast.success("Room Created & Connected", {
+					description: `Successfully created and connected to room ${createResult.roomId} - receiving video stream`
+				});
+			} else {
+				error = connectResult.error || "Failed to connect to room";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to create room and connect";
+		} finally {
+			isConnecting = false;
+		}
+	}
 
-    async function createRoomAndConnect() {
-        try {
-            isConnecting = true;
-            error = null;
-            const roomId = customRoomId.trim() || video.id;
-            const createResult = await videoManager.createVideoRoom(workspaceId, roomId);
-            
-            if (!createResult.success) {
-                error = createResult.error || 'Failed to create room';
-                return;
-            }
-            
-            const connectResult = await videoManager.connectRemoteStream(workspaceId, video.id, createResult.roomId!);
-            if (connectResult.success) {
-                customRoomId = '';
-                await refreshRooms();
-                toast.success("Room Created & Connected", {
-                    description: `Successfully created and connected to room ${createResult.roomId} - receiving video stream`
-                });
-            } else {
-                error = connectResult.error || 'Failed to connect to room';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to create room and connect';
-        } finally {
-            isConnecting = false;
-        }
-    }
+	async function handleDisconnect() {
+		try {
+			isConnecting = true;
+			error = null;
+			await videoManager.disconnectVideoInput(video.id);
 
-    async function handleDisconnect() {
-        try {
-            isConnecting = true;
-            error = null;
-            await videoManager.disconnectVideoInput(video.id);
-            
-            // Small delay to ensure reactive state updates
-            await new Promise(resolve => setTimeout(resolve, 100));
-            
-            toast.success("Video Input Disconnected", {
-                description: "Successfully disconnected video input"
-            });
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to disconnect video input';
-            toast.error("Disconnect Failed", {
-                description: error
-            });
-        } finally {
-            isConnecting = false;
-        }
-    }
+			// Small delay to ensure reactive state updates
+			await new Promise((resolve) => setTimeout(resolve, 100));
+
+			toast.success("Video Input Disconnected", {
+				description: "Successfully disconnected video input"
+			});
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to disconnect video input";
+			toast.error("Disconnect Failed", {
+				description: error
+			});
+		} finally {
+			isConnecting = false;
+		}
+	}
 </script>
 
 <Dialog.Root bind:open>
@@ -169,9 +173,12 @@
 		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
-				<span class="icon-[mdi--video-input-component] size-5 text-green-500 dark:text-green-400"></span>
-				Video Input - {video?.name || 'No Video Selected'}
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
+				<span class="icon-[mdi--video-input-component] size-5 text-green-500 dark:text-green-400"
+				></span>
+				Video Input - {video?.name || "No Video Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure video input source: local camera for recording or remote streams from rooms
@@ -182,304 +189,358 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+					<Alert.Root
+						class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20"
+					>
 						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
 						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
+						<Alert.Description class="text-sm text-red-600 dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
 				{/if}
-			<!-- Current Status Overview -->
-			<Card.Root class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20">
-				<Card.Content class="p-4">
-					<div class="flex items-center justify-between">
-						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--video-input-component] size-4 text-green-500 dark:text-green-400"></span>
-							<span class="text-sm font-medium text-green-700 dark:text-green-300">Current Video Input</span>
-						</div>
-						{#if video?.hasInput}
-							<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
-								{video.input.type === 'local-camera' ? 'Local Camera' : 'Remote Stream'}
-							</Badge>
-						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Input Connected</Badge>
-						{/if}
-					</div>
-					{#if video?.hasInput}
-						<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
-							{#if video.input.roomId}
-								Room: {video.input.roomId}
+				<!-- Current Status Overview -->
+				<Card.Root
+					class="border-green-300/30 bg-green-100/20 dark:border-green-500/30 dark:bg-green-900/20"
+				>
+					<Card.Content class="p-4">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<span
+									class="icon-[mdi--video-input-component] size-4 text-green-500 dark:text-green-400"
+								></span>
+								<span class="text-sm font-medium text-green-700 dark:text-green-300"
+									>Current Video Input</span
+								>
+							</div>
+							{#if video?.hasInput}
+								<Badge variant="default" class="bg-green-500 text-xs dark:bg-green-600">
+									{video.input.type === "local-camera" ? "Local Camera" : "Remote Stream"}
+								</Badge>
 							{:else}
-								Source: Local Device Camera
+								<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+									>No Input Connected</Badge
+								>
 							{/if}
 						</div>
-					{/if}
-				</Card.Content>
-			</Card.Root>
+						{#if video?.hasInput}
+							<div class="mt-2 text-xs text-green-600/70 dark:text-green-400/70">
+								{#if video.input.roomId}
+									Room: {video.input.roomId}
+								{:else}
+									Source: Local Device Camera
+								{/if}
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Current Input Details -->
-			{#if video?.hasInput}
-				<Card.Root class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5">
+				<!-- Current Input Details -->
+				{#if video?.hasInput}
+					<Card.Root
+						class="border-green-300/30 bg-green-100/5 dark:border-green-500/30 dark:bg-green-500/5"
+					>
+						<Card.Header>
+							<Card.Title
+								class="flex items-center gap-2 text-base text-green-700 dark:text-green-200"
+							>
+								<span class="icon-[mdi--video] size-4"></span>
+								Current Input
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<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 justify-between">
+									<div>
+										<p class="text-sm font-medium text-green-700 dark:text-green-300">
+											{video.input.type === "local-camera" ? "Local Camera" : "Remote Stream"}
+										</p>
+										{#if video.input.roomId}
+											<p class="text-xs text-green-600/70 dark:text-green-400/70">
+												Room: {video.input.roomId}
+											</p>
+										{/if}
+										{#if video.input.stream}
+											<p class="text-xs text-green-600/70 dark:text-green-400/70">
+												Video: {video.input.stream.getVideoTracks().length} tracks
+											</p>
+											<p class="text-xs text-green-600/70 dark:text-green-400/70">
+												Audio: {video.input.stream.getAudioTracks().length} tracks
+											</p>
+										{/if}
+									</div>
+									<Button
+										variant="destructive"
+										size="sm"
+										onclick={handleDisconnect}
+										class="h-7 px-2 text-xs"
+									>
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										Disconnect
+									</Button>
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				{/if}
+
+				<!-- Local Camera -->
+				<Card.Root
+					class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-green-700 dark:text-green-200">
-							<span class="icon-[mdi--video] size-4"></span>
-							Current Input
+						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
+							<span class="icon-[mdi--camera] size-4"></span>
+							Local Camera
 						</Card.Title>
+						<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
+							Use your device camera for direct video capture and recording
+						</Card.Description>
 					</Card.Header>
-					<Card.Content>
-						<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 justify-between">
-								<div>
-									<p class="text-sm font-medium text-green-700 dark:text-green-300">
-										{video.input.type === 'local-camera' ? 'Local Camera' : 'Remote Stream'}
-									</p>
-									{#if video.input.roomId}
-										<p class="text-xs text-green-600/70 dark:text-green-400/70">
-											Room: {video.input.roomId}
-										</p>
-									{/if}
-									{#if video.input.stream}
-										<p class="text-xs text-green-600/70 dark:text-green-400/70">
-											Video: {video.input.stream.getVideoTracks().length} tracks
+					<Card.Content class="space-y-3">
+						{#if video?.hasInput && video.input.type === "local-camera"}
+							<!-- Camera Connected State -->
+							<div
+								class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20"
+							>
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-blue-700 dark:text-blue-300">
+											Camera Connected
 										</p>
-										<p class="text-xs text-green-600/70 dark:text-green-400/70">
-											Audio: {video.input.stream.getAudioTracks().length} tracks
+										<p class="text-xs text-blue-600/70 dark:text-blue-400/70">
+											Local device camera active
 										</p>
-									{/if}
+									</div>
+									<Button
+										variant="destructive"
+										size="sm"
+										onclick={handleDisconnect}
+										disabled={isConnecting}
+										class="h-7 px-2 text-xs"
+									>
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										{isConnecting ? "Disconnecting..." : "Disconnect"}
+									</Button>
 								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleDisconnect}
-									class="h-7 px-2 text-xs"
-								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									Disconnect
-								</Button>
 							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/if}
+						{:else}
+							<!-- Camera Connection Button -->
+							<Button
+								variant="secondary"
+								onclick={handleConnectCamera}
+								disabled={isConnecting || video?.hasInput}
+								class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
+							>
+								<span class="icon-[mdi--camera] mr-2 size-4"></span>
+								{isConnecting ? "Connecting..." : "Connect to Camera"}
+							</Button>
 
-			<!-- Local Camera -->
-			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
-				<Card.Header>
-					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
-						<span class="icon-[mdi--camera] size-4"></span>
-						Local Camera
-					</Card.Title>
-					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
-						Use your device camera for direct video capture and recording
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="space-y-3">
-					{#if video?.hasInput && video.input.type === 'local-camera'}
-						<!-- Camera Connected State -->
-						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Camera Connected</p>
-									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Local device camera active</p>
-								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleDisconnect}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
-								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									{isConnecting ? 'Disconnecting...' : 'Disconnect'}
-								</Button>
-							</div>
-						</div>
-					{:else}
-						<!-- Camera Connection Button -->
-						<Button
-							variant="secondary"
-							onclick={handleConnectCamera}
-							disabled={isConnecting || video?.hasInput}
-							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
-						>
-							<span class="icon-[mdi--camera] mr-2 size-4"></span>
-							{isConnecting ? 'Connecting...' : 'Connect to Camera'}
-						</Button>
-						
-						{#if video?.hasInput}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Disconnect current input to connect camera
-							</p>
+							{#if video?.hasInput}
+								<p class="text-xs text-slate-600 dark:text-slate-500">
+									Disconnect current input to connect camera
+								</p>
+							{/if}
 						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Remote Collaboration -->
-			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
-				<Card.Header>
-					<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">
-								<span class="icon-[mdi--cloud-download] size-4"></span>
-								Remote Collaboration (Rooms)
-							</Card.Title>
-							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
-								Receive video streams from remote cameras or AI systems
-							</Card.Description>
-						</div>
-						<Button
-							variant="ghost"
-							size="sm"
-							onclick={refreshRooms}
-							disabled={videoManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
-						>
-							{#if videoManager.roomsLoading}
-								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
-								Refreshing
-							{:else}
-								<span class="icon-[mdi--refresh] size-3 mr-1"></span>
-								Refresh
-							{/if}
-						</Button>
-					</div>
-				</Card.Header>
-				<Card.Content class="space-y-4">
-					{#if video?.hasInput && video.input.type !== 'local-camera'}
-						<!-- Remote Connected State -->
-						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Room Connected</p>
-									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Receiving remote video stream</p>
-								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleDisconnect}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
+				<!-- Remote Collaboration -->
+				<Card.Root
+					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
+				>
+					<Card.Header>
+						<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"
 								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									{isConnecting ? 'Leaving...' : 'Leave Room'}
-								</Button>
+									<span class="icon-[mdi--cloud-download] size-4"></span>
+									Remote Collaboration (Rooms)
+								</Card.Title>
+								<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
+									Receive video streams from remote cameras or AI systems
+								</Card.Description>
 							</div>
+							<Button
+								variant="ghost"
+								size="sm"
+								onclick={refreshRooms}
+								disabled={videoManager.roomsLoading || isConnecting}
+								class="h-7 px-2 text-xs text-purple-700 hover:bg-purple-200/20 hover:text-purple-800 dark:text-purple-300 dark:hover:bg-purple-500/20 dark:hover:text-purple-200"
+							>
+								{#if videoManager.roomsLoading}
+									<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
+									Refreshing
+								{:else}
+									<span class="icon-[mdi--refresh] mr-1 size-3"></span>
+									Refresh
+								{/if}
+							</Button>
 						</div>
-					{:else}
-						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
-							<div class="space-y-2">
-								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
-									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
-								</div>
-								<p class="text-xs text-green-600/70 dark:text-green-400/70">
-									Create a room to receive video from others
-								</p>
-								<input
-									bind:value={customRoomId}
-									placeholder={`Room ID (default: ${video.id})`}
-									disabled={isConnecting || video?.hasInput}
-									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-								/>
-								<div class="flex gap-1">
+					</Card.Header>
+					<Card.Content class="space-y-4">
+						{#if video?.hasInput && video.input.type !== "local-camera"}
+							<!-- Remote Connected State -->
+							<div
+								class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
+							>
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-purple-700 dark:text-purple-300">
+											Room Connected
+										</p>
+										<p class="text-xs text-purple-600/70 dark:text-purple-400/70">
+											Receiving remote video stream
+										</p>
+									</div>
 									<Button
-										variant="secondary"
+										variant="destructive"
 										size="sm"
-										onclick={createRoom}
-										disabled={isConnecting || video?.hasInput}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										onclick={handleDisconnect}
+										disabled={isConnecting}
+										class="h-7 px-2 text-xs"
 									>
-										Create Only
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										{isConnecting ? "Leaving..." : "Leave Room"}
 									</Button>
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoomAndConnect}
+								</div>
+							</div>
+						{:else}
+							<!-- Create New Room -->
+							<div
+								class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5"
+							>
+								<div class="space-y-2">
+									<div class="flex items-center gap-2">
+										<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"
+										></span>
+										<p class="text-sm font-medium text-green-700 dark:text-green-300">
+											Create New Room
+										</p>
+									</div>
+									<p class="text-xs text-green-600/70 dark:text-green-400/70">
+										Create a room to receive video from others
+									</p>
+									<input
+										bind:value={customRoomId}
+										placeholder={`Room ID (default: ${video.id})`}
 										disabled={isConnecting || video?.hasInput}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
-									>
-										Create & Connect
-									</Button>
+										class="w-full rounded border border-slate-300 bg-slate-50 px-2 py-1 text-xs text-slate-900 disabled:opacity-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100"
+									/>
+									<div class="flex gap-1">
+										<Button
+											variant="secondary"
+											size="sm"
+											onclick={createRoom}
+											disabled={isConnecting || video?.hasInput}
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										>
+											Create Only
+										</Button>
+										<Button
+											variant="secondary"
+											size="sm"
+											onclick={createRoomAndConnect}
+											disabled={isConnecting || video?.hasInput}
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										>
+											Create & Connect
+										</Button>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<!-- Existing Rooms -->
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-600 dark:text-slate-400">
-									{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? 's' : ''} available
-								</span>
-							</div>
-							
-							<div class="max-h-40 space-y-2 overflow-y-auto">
-								{#if videoManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
-										{videoManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
-									</div>
-								{:else}
-									{#each videoManager.rooms as room}
-										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
-											<div class="flex items-start justify-between gap-3">
-												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
-														{room.id}
-													</p>
-													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
-														<span>{room.participants?.producer ? '📹 Has Output' : '📭 No Output'}</span>
-														<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+							<!-- Existing Rooms -->
+							<div class="space-y-2">
+								<div class="flex items-center justify-between">
+									<span class="text-xs font-medium text-purple-700 dark:text-purple-300"
+										>Join Existing Room:</span
+									>
+									<span class="text-xs text-slate-600 dark:text-slate-400">
+										{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? "s" : ""} available
+									</span>
+								</div>
+
+								<div class="max-h-40 space-y-2 overflow-y-auto">
+									{#if videoManager.rooms.length === 0}
+										<div class="py-3 text-center text-xs text-slate-600 dark:text-slate-400">
+											{videoManager.roomsLoading
+												? "Loading rooms..."
+												: "No rooms available. Create one to get started."}
+										</div>
+									{:else}
+										{#each videoManager.rooms as room}
+											<div
+												class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50"
+											>
+												<div class="flex items-start justify-between gap-3">
+													<div class="min-w-0 flex-1">
+														<p
+															class="truncate text-xs font-medium text-slate-800 dark:text-slate-200"
+														>
+															{room.id}
+														</p>
+														<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+															<span
+																>{room.participants?.producer
+																	? "📹 Has Output"
+																	: "📭 No Output"}</span
+															>
+															<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+														</div>
 													</div>
+													{#if room.participants?.producer}
+														<Button
+															variant="secondary"
+															size="sm"
+															onclick={() => handleConnectToRoom(room.id)}
+															disabled={isConnecting || video?.hasInput}
+															class="h-6 shrink-0 bg-purple-500 px-2 text-xs hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
+														>
+															<span class="icon-[mdi--download] mr-1 size-3"></span>
+															Join as Input
+														</Button>
+													{:else}
+														<Button
+															variant="ghost"
+															size="sm"
+															disabled
+															class="shrink-0 text-xs opacity-50"
+														>
+															No Output
+														</Button>
+													{/if}
 												</div>
-												{#if room.participants?.producer}
-													<Button
-														variant="secondary"
-														size="sm"
-														onclick={() => handleConnectToRoom(room.id)}
-														disabled={isConnecting || video?.hasInput}
-														class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
-													>
-														<span class="icon-[mdi--download] mr-1 size-3"></span>
-														Join as Input
-													</Button>
-												{:else}
-													<Button
-														variant="ghost"
-														size="sm"
-														disabled
-														class="text-xs opacity-50 shrink-0"
-													>
-														No Output
-													</Button>
-												{/if}
 											</div>
-										</div>
-									{/each}
-								{/if}
+										{/each}
+									{/if}
+								</div>
 							</div>
-						</div>
 
-						{#if video?.hasInput}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Disconnect current input to join a room
-							</p>
+							{#if video?.hasInput}
+								<p class="text-xs text-slate-600 dark:text-slate-500">
+									Disconnect current input to join a room
+								</p>
+							{/if}
 						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Help Information -->
-			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-				<Alert.Title class="text-slate-700 dark:text-slate-300">Video Input Sources</Alert.Title>
-				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
-					<strong>Camera:</strong> Local device camera • <strong>Remote:</strong> Video streams from rooms • Only one active at a time
-				</Alert.Description>
-			</Alert.Root>
+				<!-- Help Information -->
+				<Alert.Root
+					class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
+				>
+					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+					<Alert.Title class="text-slate-700 dark:text-slate-300">Video Input Sources</Alert.Title>
+					<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
+						<strong>Camera:</strong> Local device camera • <strong>Remote:</strong> Video streams from
+						rooms • Only one active at a time
+					</Alert.Description>
+				</Alert.Root>
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -16,112 +16,169 @@
 
 	let { open = $bindable(), video, workspaceId }: Props = $props();
 
-    let isConnecting = $state(false);
-    let error = $state<string | null>(null);
-    let customRoomId = $state('');
-    let hasLoadedRooms = $state(false);
+	let isConnecting = $state(false);
+	let error = $state<string | null>(null);
+	let customRoomId = $state("");
+	let hasLoadedRooms = $state(false);
+	let mediaRecorder: MediaRecorder | null = null;
+	let recordedChunks: Blob[] = [];
 
-    // Auto-load rooms when modal opens (only once per modal session)
-    $effect(() => {
-        if (open && !hasLoadedRooms && !videoManager.roomsLoading) {
-            refreshRooms();
-            hasLoadedRooms = true;
-        }
-        
-        // Reset when modal closes
-        if (!open) {
-            hasLoadedRooms = false;
-            error = null;
-        }
-    });
+	// Auto-load rooms when modal opens (only once per modal session)
+	$effect(() => {
+		if (open && !hasLoadedRooms && !videoManager.roomsLoading) {
+			refreshRooms();
+			hasLoadedRooms = true;
+		}
 
-    async function refreshRooms() {
-        try {
-            error = null;
-            await videoManager.refreshRooms(workspaceId);
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to refresh rooms';
-        }
-    }
+		// Reset when modal closes
+		if (!open) {
+			hasLoadedRooms = false;
+			error = null;
+		}
+	});
 
-    async function handleStartOutputToRoom(roomId: string) {
-        try {
-            isConnecting = true;
-            error = null;
-            const result = await videoManager.startVideoOutputToRoom(workspaceId, video.id, roomId);
-            if (result.success) {
-                toast.success("Broadcasting Started", {
-                    description: `Successfully started broadcasting to room ${roomId}`
-                });
-            } else {
-                error = result.error || 'Failed to start output to room';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to start output to room';
-        } finally {
-            isConnecting = false;
-        }
-    }
+	async function refreshRooms() {
+		try {
+			error = null;
+			await videoManager.refreshRooms(workspaceId);
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to refresh rooms";
+		}
+	}
+
+	async function handleStartOutputToRoom(roomId: string) {
+		try {
+			isConnecting = true;
+			error = null;
+			const result = await videoManager.startVideoOutputToRoom(workspaceId, video.id, roomId);
+			if (result.success) {
+				toast.success("Broadcasting Started", {
+					description: `Successfully started broadcasting to room ${roomId}`
+				});
+			} else {
+				error = result.error || "Failed to start output to room";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to start output to room";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function createRoom() {
+		try {
+			isConnecting = true;
+			error = null;
+			const roomId = customRoomId.trim() || video.id;
+			const result = await videoManager.createVideoRoom(workspaceId, roomId);
+
+			if (result.success) {
+				customRoomId = "";
+				await refreshRooms();
+				toast.success("Room Created", {
+					description: `Successfully created room ${result.roomId}`
+				});
+			} else {
+				error = result.error || "Failed to create room";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to create room";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function createRoomAndStartOutput() {
+		try {
+			isConnecting = true;
+			error = null;
+			const roomId = customRoomId.trim() || video.id;
+			const result = await videoManager.startVideoOutputAsProducer(workspaceId, video.id);
+			if (result.success) {
+				customRoomId = "";
+				await refreshRooms();
+				toast.success("Room Created & Broadcasting", {
+					description: `Successfully created room and started broadcasting`
+				});
+			} else {
+				error = result.error || "Failed to create room and start output";
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to create room and start output";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleStartRecording() {
+		try {
+			if (!video.canOutput || !video.input.stream) {
+				error = "No local camera input available for recording";
+				return;
+			}
+
+			isConnecting = true;
+			error = null;
+
+			recordedChunks = [];
+			mediaRecorder = new MediaRecorder(video.input.stream, { mimeType: "video/webm; codecs=vp9" });
+
+			mediaRecorder.ondataavailable = (event) => {
+				if (event.data.size > 0) recordedChunks.push(event.data);
+			};
+
+			mediaRecorder.onstop = () => {
+				const blob = new Blob(recordedChunks, { type: "video/webm" });
+				const url = URL.createObjectURL(blob);
+				const a = document.createElement("a");
+				a.href = url;
+				a.download = `${video.name || video.id}.webm`;
+				a.click();
+				URL.revokeObjectURL(url);
+			};
+
+			mediaRecorder.start();
 
-    async function createRoom() {
-        try {
-            isConnecting = true;
-            error = null;
-            const roomId = customRoomId.trim() || video.id;
-            const result = await videoManager.createVideoRoom(workspaceId, roomId);
-            
-            if (result.success) {
-                customRoomId = '';
-                await refreshRooms();
-                toast.success("Room Created", {
-                    description: `Successfully created room ${result.roomId}`
-                });
-            } else {
-                error = result.error || 'Failed to create room';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to create room';
-        } finally {
-            isConnecting = false;
-        }
-    }
+			// Update video output state locally
+			video.output.active = true;
+			video.output.type = "recording";
+			video.output.stream = video.input.stream;
+			video.output.roomId = null;
+			video.output.client = null;
 
-    async function createRoomAndStartOutput() {
-        try {
-            isConnecting = true;
-            error = null;
-            const roomId = customRoomId.trim() || video.id;
-            const result = await videoManager.startVideoOutputAsProducer(workspaceId, video.id);
-            if (result.success) {
-                customRoomId = '';
-                await refreshRooms();
-                toast.success("Room Created & Broadcasting", {
-                    description: `Successfully created room and started broadcasting`
-                });
-            } else {
-                error = result.error || 'Failed to create room and start output';
-            }
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to create room and start output';
-        } finally {
-            isConnecting = false;
-        }
-    }
+			toast.success("Recording Started", { description: "Local recording has started" });
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to start recording";
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleStopOutput() {
+		try {
+			isConnecting = true;
+			error = null;
 
-    async function handleStopOutput() {
-        try {
-            isConnecting = true;
-            error = null;
-            await videoManager.stopVideoOutput(video.id);
-            toast.success("Broadcasting Stopped", {
-                description: "Successfully stopped video broadcasting"
-            });
-        } catch (err) {
-            error = err instanceof Error ? err.message : 'Failed to stop broadcasting';
-        } finally {
-            isConnecting = false;
-        }
-    }
+			if (video.output.type === "recording") {
+				if (mediaRecorder && mediaRecorder.state !== "inactive") {
+					mediaRecorder.stop();
+				}
+				video.output.active = false;
+				video.output.type = null;
+				video.output.stream = null;
+				toast.success("Recording Stopped", { description: "Recording saved to file" });
+			} else {
+				await videoManager.stopVideoOutput(video.id);
+				toast.success("Broadcasting Stopped", {
+					description: "Successfully stopped video broadcasting"
+				});
+			}
+		} catch (err) {
+			error = err instanceof Error ? err.message : "Failed to stop output";
+		} finally {
+			isConnecting = false;
+		}
+	}
 </script>
 
 <Dialog.Root bind:open>
@@ -129,9 +186,12 @@
 		class="max-h-[85vh] max-w-4xl overflow-hidden border-slate-300 bg-slate-100 text-slate-900 dark:border-slate-600 dark:bg-slate-900 dark:text-slate-100"
 	>
 		<Dialog.Header class="pb-3">
-			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100">
-				<span class="icon-[mdi--video-wireless-outline] size-5 text-orange-500 dark:text-orange-400"></span>
-				Video Output - {video?.name || 'No Video Selected'}
+			<Dialog.Title
+				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
+			>
+				<span class="icon-[mdi--video-wireless-outline] size-5 text-orange-500 dark:text-orange-400"
+				></span>
+				Video Output - {video?.name || "No Video Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
 				Configure video output: local recording or remote broadcast to rooms
@@ -142,302 +202,356 @@
 			<div class="space-y-4 pb-4">
 				<!-- Error display -->
 				{#if error}
-					<Alert.Root class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20">
+					<Alert.Root
+						class="border-red-300/30 bg-red-100/20 dark:border-red-500/30 dark:bg-red-900/20"
+					>
 						<span class="icon-[mdi--alert-circle] size-4 text-red-500 dark:text-red-400"></span>
 						<Alert.Title class="text-red-700 dark:text-red-300">Connection Error</Alert.Title>
-						<Alert.Description class="text-red-600 text-sm dark:text-red-400">
+						<Alert.Description class="text-sm text-red-600 dark:text-red-400">
 							{error}
 						</Alert.Description>
 					</Alert.Root>
 				{/if}
 
-			<!-- Current Status Overview -->
-			<Card.Root class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20">
-				<Card.Content class="p-4">
-					<div class="flex items-center justify-between">
-						<div class="flex items-center gap-2">
-							<span class="icon-[mdi--video-wireless-outline] size-4 text-orange-500 dark:text-orange-400"></span>
-							<span class="text-sm font-medium text-orange-700 dark:text-orange-300">Current Video Output</span>
-						</div>
-						{#if video?.hasOutput}
-							<Badge variant="default" class="bg-orange-500 text-xs dark:bg-orange-600">
-								{video.output.type === 'recording' ? 'Recording' : 'Remote Broadcast'}
-							</Badge>
-						{:else}
-							<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400">No Output Active</Badge>
-						{/if}
-					</div>
-					{#if video?.hasOutput}
-						<div class="mt-2 text-xs text-orange-600/70 dark:text-orange-400/70">
-							{#if video.output.roomId}
-								Broadcasting to Room: {video.output.roomId}
+				<!-- Current Status Overview -->
+				<Card.Root
+					class="border-orange-300/30 bg-orange-100/20 dark:border-orange-500/30 dark:bg-orange-900/20"
+				>
+					<Card.Content class="p-4">
+						<div class="flex items-center justify-between">
+							<div class="flex items-center gap-2">
+								<span
+									class="icon-[mdi--video-wireless-outline] size-4 text-orange-500 dark:text-orange-400"
+								></span>
+								<span class="text-sm font-medium text-orange-700 dark:text-orange-300"
+									>Current Video Output</span
+								>
+							</div>
+							{#if video?.hasOutput}
+								<Badge variant="default" class="bg-orange-500 text-xs dark:bg-orange-600">
+									{video.output.type === "recording" ? "Recording" : "Remote Broadcast"}
+								</Badge>
 							{:else}
-								Recording to local storage
+								<Badge variant="secondary" class="text-xs text-slate-600 dark:text-slate-400"
+									>No Output Active</Badge
+								>
 							{/if}
 						</div>
-					{/if}
-				</Card.Content>
-			</Card.Root>
+						{#if video?.hasOutput}
+							<div class="mt-2 text-xs text-orange-600/70 dark:text-orange-400/70">
+								{#if video.output.roomId}
+									Broadcasting to Room: {video.output.roomId}
+								{:else}
+									Recording to local storage
+								{/if}
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Current Output Details -->
+				{#if video?.hasOutput}
+					<Card.Root
+						class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5"
+					>
+						<Card.Header>
+							<Card.Title
+								class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200"
+							>
+								<span class="icon-[mdi--video-wireless] size-4"></span>
+								Current Output
+							</Card.Title>
+						</Card.Header>
+						<Card.Content>
+							<div
+								class="rounded-lg border border-orange-300/30 bg-orange-100/20 p-3 dark:border-orange-500/30 dark:bg-orange-900/20"
+							>
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-orange-700 dark:text-orange-300">
+											{video.output.type === "recording" ? "Local Recording" : "Remote Broadcast"}
+										</p>
+										{#if video.output.roomId}
+											<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
+												Room: {video.output.roomId}
+											</p>
+										{/if}
+										{#if video.output.stream}
+											<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
+												Status: Active • {video.output.stream.getVideoTracks().length} video tracks
+											</p>
+										{/if}
+									</div>
+									<Button
+										variant="destructive"
+										size="sm"
+										onclick={handleStopOutput}
+										class="h-7 px-2 text-xs"
+									>
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										Stop
+									</Button>
+								</div>
+							</div>
+						</Card.Content>
+					</Card.Root>
+				{/if}
 
-			<!-- Current Output Details -->
-			{#if video?.hasOutput}
-				<Card.Root class="border-orange-300/30 bg-orange-100/5 dark:border-orange-500/30 dark:bg-orange-500/5">
+				<!-- Local Recording -->
+				<Card.Root
+					class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5"
+				>
 					<Card.Header>
-						<Card.Title class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200">
-							<span class="icon-[mdi--video-wireless] size-4"></span>
-							Current Output
+						<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
+							<span class="icon-[mdi--record-rec] size-4"></span>
+							Local Recording
 						</Card.Title>
+						<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
+							Record video directly to your device for later use
+						</Card.Description>
 					</Card.Header>
-					<Card.Content>
-						<div class="rounded-lg border border-orange-300/30 bg-orange-100/20 p-3 dark:border-orange-500/30 dark:bg-orange-900/20">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-orange-700 dark:text-orange-300">
-										{video.output.type === 'recording' ? 'Local Recording' : 'Remote Broadcast'}
-									</p>
-									{#if video.output.roomId}
-										<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
-											Room: {video.output.roomId}
+					<Card.Content class="space-y-3">
+						{#if video?.hasOutput && video.output.type === "recording"}
+							<!-- Recording Active State -->
+							<div
+								class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20"
+							>
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-blue-700 dark:text-blue-300">
+											Recording Active
 										</p>
-									{/if}
-									{#if video.output.stream}
-										<p class="text-xs text-orange-600/70 dark:text-orange-400/70">
-											Status: Active • {video.output.stream.getVideoTracks().length} video tracks
+										<p class="text-xs text-blue-600/70 dark:text-blue-400/70">
+											Saving to local device
 										</p>
-									{/if}
+									</div>
+									<Button
+										variant="destructive"
+										size="sm"
+										onclick={handleStopOutput}
+										disabled={isConnecting}
+										class="h-7 px-2 text-xs"
+									>
+										<span class="icon-[mdi--stop] mr-1 size-3"></span>
+										{isConnecting ? "Stopping..." : "Stop Recording"}
+									</Button>
 								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleStopOutput}
-									class="h-7 px-2 text-xs"
-								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									Stop
-								</Button>
 							</div>
-						</div>
-					</Card.Content>
-				</Card.Root>
-			{/if}
+						{:else}
+							<!-- Recording Start Button -->
+							<Button
+								variant="secondary"
+								onclick={handleStartRecording}
+								disabled={isConnecting || video?.hasOutput}
+								class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
+							>
+								<span class="icon-[mdi--record] mr-2 size-4"></span>
+								{isConnecting ? "Starting..." : "Start Recording"}
+							</Button>
 
-			<!-- Local Recording -->
-			<Card.Root class="border-blue-300/30 bg-blue-100/5 dark:border-blue-500/30 dark:bg-blue-500/5">
-				<Card.Header>
-					<Card.Title class="flex items-center gap-2 text-base text-blue-700 dark:text-blue-200">
-						<span class="icon-[mdi--record-rec] size-4"></span>
-						Local Recording
-					</Card.Title>
-					<Card.Description class="text-xs text-blue-600/70 dark:text-blue-300/70">
-						Record video directly to your device for later use
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="space-y-3">
-					{#if video?.hasOutput && video.output.type === 'recording'}
-						<!-- Recording Active State -->
-						<div class="rounded-lg border border-blue-300/30 bg-blue-100/20 p-3 dark:border-blue-500/30 dark:bg-blue-900/20">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-blue-700 dark:text-blue-300">Recording Active</p>
-									<p class="text-xs text-blue-600/70 dark:text-blue-400/70">Saving to local device</p>
-								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleStopOutput}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
-								>
-									<span class="icon-[mdi--stop] mr-1 size-3"></span>
-									{isConnecting ? 'Stopping...' : 'Stop Recording'}
-								</Button>
-							</div>
-						</div>
-					{:else}
-						<!-- Recording Start Button -->
-						<Button
-							variant="secondary"
-							onclick={handleStartRecording}
-							disabled={isConnecting || video?.hasOutput}
-							class="w-full bg-blue-500 text-sm text-white hover:bg-blue-600 disabled:opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700"
-						>
-							<span class="icon-[mdi--record] mr-2 size-4"></span>
-							{isConnecting ? 'Starting...' : 'Start Recording'}
-						</Button>
-						
-						{#if video?.hasOutput}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Stop current output to start recording
-							</p>
+							{#if video?.hasOutput}
+								<p class="text-xs text-slate-600 dark:text-slate-500">
+									Stop current output to start recording
+								</p>
+							{/if}
 						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Remote Collaboration -->
-			<Card.Root class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5">
-				<Card.Header>
-					<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">
-								<span class="icon-[mdi--cloud-upload] size-4"></span>
-								Remote Collaboration (Rooms)
-							</Card.Title>
-							<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
-								Broadcast video stream to remote systems and users
-							</Card.Description>
-						</div>
-						<Button
-							variant="ghost"
-							size="sm"
-							onclick={refreshRooms}
-							disabled={videoManager.roomsLoading || isConnecting}
-							class="h-7 px-2 text-xs text-purple-700 hover:text-purple-800 hover:bg-purple-200/20 dark:text-purple-300 dark:hover:text-purple-200 dark:hover:bg-purple-500/20"
-						>
-							{#if videoManager.roomsLoading}
-								<span class="icon-[mdi--loading] animate-spin size-3 mr-1"></span>
-								Refreshing
-							{:else}
-								<span class="icon-[mdi--refresh] size-3 mr-1"></span>
-								Refresh
-							{/if}
-						</Button>
-					</div>
-				</Card.Header>
-				<Card.Content class="space-y-4">
-					{#if video?.hasOutput && video.output.type !== 'recording'}
-						<!-- Remote Connected State -->
-						<div class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20">
-							<div class="flex items-center justify-between">
-								<div>
-									<p class="text-sm font-medium text-purple-700 dark:text-purple-300">Broadcasting to Room</p>
-									<p class="text-xs text-purple-600/70 dark:text-purple-400/70">Video stream active</p>
-								</div>
-								<Button
-									variant="destructive"
-									size="sm"
-									onclick={handleStopOutput}
-									disabled={isConnecting}
-									class="h-7 px-2 text-xs"
+				<!-- Remote Collaboration -->
+				<Card.Root
+					class="border-purple-300/30 bg-purple-100/5 dark:border-purple-500/30 dark:bg-purple-500/5"
+				>
+					<Card.Header>
+						<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"
 								>
-									<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
-									{isConnecting ? 'Stopping...' : 'Stop Broadcast'}
-								</Button>
+									<span class="icon-[mdi--cloud-upload] size-4"></span>
+									Remote Collaboration (Rooms)
+								</Card.Title>
+								<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
+									Broadcast video stream to remote systems and users
+								</Card.Description>
 							</div>
+							<Button
+								variant="ghost"
+								size="sm"
+								onclick={refreshRooms}
+								disabled={videoManager.roomsLoading || isConnecting}
+								class="h-7 px-2 text-xs text-purple-700 hover:bg-purple-200/20 hover:text-purple-800 dark:text-purple-300 dark:hover:bg-purple-500/20 dark:hover:text-purple-200"
+							>
+								{#if videoManager.roomsLoading}
+									<span class="icon-[mdi--loading] mr-1 size-3 animate-spin"></span>
+									Refreshing
+								{:else}
+									<span class="icon-[mdi--refresh] mr-1 size-3"></span>
+									Refresh
+								{/if}
+							</Button>
 						</div>
-					{:else}
-						<!-- Create New Room -->
-						<div class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5">
-							<div class="space-y-2">
-								<div class="flex items-center gap-2">
-									<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"></span>
-									<p class="text-sm font-medium text-green-700 dark:text-green-300">Create New Room</p>
-								</div>
-								<p class="text-xs text-green-600/70 dark:text-green-400/70">
-									Create a room to broadcast your video
-								</p>
-								<input
-									bind:value={customRoomId}
-									placeholder={`Room ID (default: ${video.id})`}
-									disabled={isConnecting || video?.hasOutput}
-									class="w-full px-2 py-1 bg-slate-50 border border-slate-300 rounded text-xs text-slate-900 disabled:opacity-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-100"
-								/>
-								<div class="flex gap-1">
+					</Card.Header>
+					<Card.Content class="space-y-4">
+						{#if video?.hasOutput && video.output.type !== "recording"}
+							<!-- Remote Connected State -->
+							<div
+								class="rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
+							>
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-purple-700 dark:text-purple-300">
+											Broadcasting to Room
+										</p>
+										<p class="text-xs text-purple-600/70 dark:text-purple-400/70">
+											Video stream active
+										</p>
+									</div>
 									<Button
-										variant="secondary"
+										variant="destructive"
 										size="sm"
-										onclick={createRoom}
-										disabled={isConnecting || video?.hasOutput}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										onclick={handleStopOutput}
+										disabled={isConnecting}
+										class="h-7 px-2 text-xs"
 									>
-										Create Only
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										{isConnecting ? "Stopping..." : "Stop Broadcast"}
 									</Button>
-									<Button
-										variant="secondary"
-										size="sm"
-										onclick={createRoomAndStartOutput}
+								</div>
+							</div>
+						{:else}
+							<!-- Create New Room -->
+							<div
+								class="rounded border-2 border-dashed border-green-400/50 bg-green-100/5 p-3 dark:border-green-500/50 dark:bg-green-500/5"
+							>
+								<div class="space-y-2">
+									<div class="flex items-center gap-2">
+										<span class="icon-[mdi--plus-circle] size-4 text-green-500 dark:text-green-400"
+										></span>
+										<p class="text-sm font-medium text-green-700 dark:text-green-300">
+											Create New Room
+										</p>
+									</div>
+									<p class="text-xs text-green-600/70 dark:text-green-400/70">
+										Create a room to broadcast your video
+									</p>
+									<input
+										bind:value={customRoomId}
+										placeholder={`Room ID (default: ${video.id})`}
 										disabled={isConnecting || video?.hasOutput}
-										class="h-6 px-2 text-xs bg-green-500 hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
-									>
-										Create & Broadcast
-									</Button>
+										class="w-full rounded border border-slate-300 bg-slate-50 px-2 py-1 text-xs text-slate-900 disabled:opacity-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-100"
+									/>
+									<div class="flex gap-1">
+										<Button
+											variant="secondary"
+											size="sm"
+											onclick={createRoom}
+											disabled={isConnecting || video?.hasOutput}
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										>
+											Create Only
+										</Button>
+										<Button
+											variant="secondary"
+											size="sm"
+											onclick={createRoomAndStartOutput}
+											disabled={isConnecting || video?.hasOutput}
+											class="h-6 bg-green-500 px-2 text-xs hover:bg-green-600 disabled:opacity-50 dark:bg-green-600 dark:hover:bg-green-700"
+										>
+											Create & Broadcast
+										</Button>
+									</div>
 								</div>
 							</div>
-						</div>
 
-						<!-- Existing Rooms -->
-						<div class="space-y-2">
-							<div class="flex items-center justify-between">
-								<span class="text-xs font-medium text-purple-700 dark:text-purple-300">Join Existing Room:</span>
-								<span class="text-xs text-slate-600 dark:text-slate-400">
-									{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? 's' : ''} available
-								</span>
-							</div>
-							
-							<div class="max-h-40 space-y-2 overflow-y-auto">
-								{#if videoManager.rooms.length === 0}
-									<div class="text-center py-3 text-xs text-slate-600 dark:text-slate-400">
-										{videoManager.roomsLoading ? 'Loading rooms...' : 'No rooms available. Create one to get started.'}
-									</div>
-								{:else}
-									{#each videoManager.rooms as room}
-										<div class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50">
-											<div class="flex items-start justify-between gap-3">
-												<div class="flex-1 min-w-0">
-													<p class="text-xs font-medium text-slate-800 truncate dark:text-slate-200">
-														{room.id}
-													</p>
-													<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
-														<span>{room.participants?.producer ? '🔴 Has Output' : '🟢 Available'}</span>
-														<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+							<!-- Existing Rooms -->
+							<div class="space-y-2">
+								<div class="flex items-center justify-between">
+									<span class="text-xs font-medium text-purple-700 dark:text-purple-300"
+										>Join Existing Room:</span
+									>
+									<span class="text-xs text-slate-600 dark:text-slate-400">
+										{videoManager.rooms.length} room{videoManager.rooms.length !== 1 ? "s" : ""} available
+									</span>
+								</div>
+
+								<div class="max-h-40 space-y-2 overflow-y-auto">
+									{#if videoManager.rooms.length === 0}
+										<div class="py-3 text-center text-xs text-slate-600 dark:text-slate-400">
+											{videoManager.roomsLoading
+												? "Loading rooms..."
+												: "No rooms available. Create one to get started."}
+										</div>
+									{:else}
+										{#each videoManager.rooms as room}
+											<div
+												class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50"
+											>
+												<div class="flex items-start justify-between gap-3">
+													<div class="min-w-0 flex-1">
+														<p
+															class="truncate text-xs font-medium text-slate-800 dark:text-slate-200"
+														>
+															{room.id}
+														</p>
+														<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+															<span
+																>{room.participants?.producer
+																	? "🔴 Has Output"
+																	: "🟢 Available"}</span
+															>
+															<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+														</div>
 													</div>
+													{#if !room.participants?.producer}
+														<Button
+															variant="secondary"
+															size="sm"
+															onclick={() => handleStartOutputToRoom(room.id)}
+															disabled={isConnecting || video?.hasOutput}
+															class="h-6 shrink-0 bg-purple-500 px-2 text-xs hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
+														>
+															<span class="icon-[mdi--upload] mr-1 size-3"></span>
+															Join as Output
+														</Button>
+													{:else}
+														<Button
+															variant="ghost"
+															size="sm"
+															disabled
+															class="shrink-0 text-xs opacity-50"
+														>
+															Has Output
+														</Button>
+													{/if}
 												</div>
-												{#if !room.participants?.producer}
-													<Button
-														variant="secondary"
-														size="sm"
-														onclick={() => handleStartOutputToRoom(room.id)}
-														disabled={isConnecting || video?.hasOutput}
-														class="h-6 px-2 text-xs bg-purple-500 hover:bg-purple-600 shrink-0 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
-													>
-														<span class="icon-[mdi--upload] mr-1 size-3"></span>
-														Join as Output
-													</Button>
-												{:else}
-													<Button
-														variant="ghost"
-														size="sm"
-														disabled
-														class="text-xs opacity-50 shrink-0"
-													>
-														Has Output
-													</Button>
-												{/if}
 											</div>
-										</div>
-									{/each}
-								{/if}
+										{/each}
+									{/if}
+								</div>
 							</div>
-						</div>
 
-						{#if video?.hasOutput}
-							<p class="text-xs text-slate-600 dark:text-slate-500">
-								Stop current output to join a room
-							</p>
+							{#if video?.hasOutput}
+								<p class="text-xs text-slate-600 dark:text-slate-500">
+									Stop current output to join a room
+								</p>
+							{/if}
 						{/if}
-					{/if}
-				</Card.Content>
-			</Card.Root>
+					</Card.Content>
+				</Card.Root>
 
-			<!-- Help Information -->
-			<Alert.Root class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30">
-				<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-				<Alert.Title class="text-slate-700 dark:text-slate-300">Video Output Options</Alert.Title>
-				<Alert.Description class="text-slate-600 text-xs dark:text-slate-400">
-					<strong>Recording:</strong> Save locally • <strong>Remote:</strong> Broadcast to rooms • Only one active at a time
-				</Alert.Description>
-			</Alert.Root>
+				<!-- Help Information -->
+				<Alert.Root
+					class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
+				>
+					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
+					<Alert.Title class="text-slate-700 dark:text-slate-300">Video Output Options</Alert.Title>
+					<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
+						<strong>Recording:</strong> Save locally • <strong>Remote:</strong> Broadcast to rooms •
+						Only one active at a time
+					</Alert.Description>
+				</Alert.Root>
 			</div>
 		</div>
 	</Dialog.Content>
-</Dialog.Root> 
+</Dialog.Root>

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

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
-	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
 
 	interface Props {
 		video: VideoInstance;
@@ -10,18 +16,10 @@
 
 	let { video, handleClick }: Props = $props();
 
-	// Input theme color (green)
 	const inputColor = "rgb(34, 197, 94)";
-
 </script>
 
-<!--
-@component
-Input connection box showing the status of the input connection.
-Displays input information when connected or connection prompt when disconnected.
--->
-
-<BaseStatusBox 
+<BaseStatusBox
 	color={inputColor}
 	borderOpacity={0.6}
 	backgroundOpacity={0.2}
@@ -30,24 +28,24 @@ Displays input information when connected or connection prompt when disconnected
 >
 	{#if video.hasInput}
 		<!-- Active Input State -->
-		{#if video.input.type === 'local-camera'}
-			<StatusHeader 
-				icon={ICON["icon-[material-symbols--download]"].svg} 
-				text="CAMERA" 
+		{#if video.input.type === "local-camera"}
+			<StatusHeader
+				icon={ICON["icon-[material-symbols--download]"].svg}
+				text="CAMERA"
 				color={inputColor}
 				opacity={0.9}
 			/>
 		{:else}
-			<StatusHeader 
-				icon={ICON["icon-[material-symbols--download]"].svg} 
-				text="REMOTE" 
+			<StatusHeader
+				icon={ICON["icon-[material-symbols--download]"].svg}
+				text="REMOTE"
 				color="rgb(96, 165, 250)"
 				opacity={0.9}
 			/>
 		{/if}
 
-		<StatusContent 
-			title={video.input.type === 'local-camera' ? 'Local Camera' : `Room: ${video.input.roomId}`}
+		<StatusContent
+			title={video.input.type === "local-camera" ? "Local Camera" : `Room: ${video.input.roomId}`}
 			subtitle="Connected"
 			color={inputColor}
 			variant="primary"
@@ -57,20 +55,16 @@ Displays input information when connected or connection prompt when disconnected
 		<StatusIndicator color={inputColor} />
 	{:else}
 		<!-- No Input State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--download]"].svg} 
-			text="NO INPUT" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--download]"].svg}
+			text="NO INPUT"
 			color={inputColor}
 			opacity={0.7}
 		/>
 
-		<StatusContent 
-			title="Click to Start" 
-			color={inputColor} 
-			variant="secondary"
-		/>
+		<StatusContent title="Click to Start" color={inputColor} variant="secondary" />
 
-		<StatusButton 
+		<StatusButton
 			icon={ICON["icon-[mdi--plus]"].svg}
 			text="Add Input"
 			color={inputColor}
@@ -78,4 +72,4 @@ Displays input information when connected or connection prompt when disconnected
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -1,7 +1,13 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
-	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+	import {
+		BaseStatusBox,
+		StatusHeader,
+		StatusContent,
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
 
 	interface Props {
 		video: VideoInstance;
@@ -10,22 +16,10 @@
 
 	let { video, handleClick }: Props = $props();
 
-	// Output theme color (blue)
 	const outputColor = "rgb(59, 130, 246)";
-	
-	// Icons
-	// const broadcastIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTIgMTBjLTEuMSAwLTIgLjktMiAycy45IDIgMiAyczItLjkgMi0ycy0uOS0yLTItMm02IDJjMC0zLjMtMi43LTYtNi02cy02IDIuNy02IDZjMCAyLjIgMS4yIDQuMSAzIDUuMmwxLTEuN2MtMS4yLS43LTItMi0yLTMuNGMwLTIuMiAxLjgtNCA0LTRzNCAxLjggNCA0YzAgMS41LS44IDIuOC0yIDMuNGwxIDEuN2MxLjgtMSAzLTMgMy01LjJNMTIgMkM2LjUgMiAyIDYuNSAyIDEyYzAgMy43IDIgNi45IDUgOC42bDEtMS43Yy0yLjQtMS40LTQtNC00LTYuOWMwLTQuNCAzLjYtOCA4LThzOCAzLjYgOCA4YzAgMy0xLjYgNS41LTQgNi45bDEgMS43YzMtMS43IDUtNC45IDUtOC42YzAtNS41LTQuNS0xMC0xMC0xMCIvPjwvc3ZnPg==";
-	// const hdmiPortIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMjEgN0gzYy0xLjEgMC0yIC45LTIgMnY1YzAgMS4xLjkgMiAyIDJoMWwxLjQgMS40Yy40LjQuOS42IDEuNC42aDEwLjNjLjUgMCAxLS4yIDEuNC0uNkwyMCAxNmgxYzEuMSAwIDItLjkgMi0yVjljMC0xLjEtLjktMi0yLTJNMyAxNFY5aDE4djVoLTEuOGwtMiAySDYuOGwtMi0yem0xNi0zSDV2MmgxNHoiLz48L3N2Zz4=";
-	// const plusIcon = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBmaWxsPSIjMDAwIiBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnoiLz48L3N2Zz4=";
 </script>
 
-<!--
-@component
-Output connection box showing the status of output connections.
-Displays output information when connected or connection prompt when disconnected.
--->
-
-<BaseStatusBox 
+<BaseStatusBox
 	color={outputColor}
 	borderOpacity={0.6}
 	backgroundOpacity={0.2}
@@ -34,14 +28,14 @@ Displays output information when connected or connection prompt when disconnecte
 >
 	{#if video.hasOutput}
 		<!-- Active Output State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--upload]"].svg} 
-			text="OUTPUT" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="OUTPUT"
 			color={outputColor}
 			opacity={0.9}
 		/>
 
-		<StatusContent 
+		<StatusContent
 			title="Broadcasting"
 			subtitle={`Room: ${video.output.roomId}`}
 			color={outputColor}
@@ -52,24 +46,24 @@ Displays output information when connected or connection prompt when disconnecte
 		<StatusIndicator color={outputColor} />
 	{:else}
 		<!-- No Output State -->
-		<StatusHeader 
-			icon={ICON["icon-[material-symbols--upload]"].svg} 
-			text="NO OUTPUT" 
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="NO OUTPUT"
 			color={outputColor}
 			opacity={0.7}
 		/>
 
-		<StatusContent 
-			title={video.canOutput ? 'Click to Start' : 'Need Camera'}
+		<StatusContent
+			title={video.canOutput ? "Click to Start" : "Need Camera"}
 			color={outputColor}
 			variant="secondary"
 		/>
 
-		<StatusButton 
+		<StatusButton
 			icon={ICON["icon-[mdi--plus]"].svg}
 			text="Add Output"
 			color={outputColor}
 			textOpacity={0.7}
 		/>
 	{/if}
-</BaseStatusBox> 
+</BaseStatusBox>

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

@@ -6,7 +6,6 @@
 		StatusHeader, 
 		StatusContent
 	} from "$lib/components/3d/ui";
-	import { Text } from "threlte-uikit";
 
 	interface Props {
 		video: VideoInstance;
@@ -14,16 +13,9 @@
 
 	let { video }: Props = $props();
 
-	// Video theme color (orange)
 	const videoColor = "rgb(217, 119, 6)";
-
 </script>
 
-<!--
-@component
-Video box showing basic video instance information and status.
-Displays video name and ID with consistent theming.
--->
 
 <BaseStatusBox
 	color={videoColor}

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

@@ -14,7 +14,6 @@
 
 	let { video, onInputBoxClick, onOutputBoxClick }: Props = $props();
 
-	// Colors
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
 </script>

src/lib/components/3d/misc/Pointcloud.svelte

@@ -284,10 +284,6 @@
 
 		rgbdData = createRGBDData();
 	});
-
-	$effect(() => {
-		console.log("render");
-	});
 </script>
 
 {#if pointCloudGeometry}

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

@@ -10,7 +10,7 @@
 		backgroundOpacity?: number;
 		disabled?: boolean;
 		clickable?: boolean;
-		children: import('svelte').Snippet;
+		children: import("svelte").Snippet;
 		onclick?: () => void;
 	}
 
@@ -51,15 +51,11 @@
 	}
 
 	let currentBorderOpacity = $derived(isHovered ? Math.min(borderOpacity * 1.5, 1) : borderOpacity);
-	let currentBackgroundOpacity = $derived(isHovered ? Math.min(backgroundOpacity * 2, 0.5) : backgroundOpacity);
+	let currentBackgroundOpacity = $derived(
+		isHovered ? Math.min(backgroundOpacity * 2, 0.5) : backgroundOpacity
+	);
 </script>
 
-<!--
-@component
-Base status box component with hover effects and common styling.
-Uses a single color with opacity variations for simplicity.
--->
-
 <Container
 	{minWidth}
 	{minHeight}
@@ -88,4 +84,4 @@ Uses a single color with opacity variations for simplicity.
 	>
 		{@render children()}
 	</Container>
-</Container> 
+</Container>

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

@@ -21,12 +21,6 @@
 	}: Props = $props();
 </script>
 
-<!--
-@component
-Reusable arrow component for showing connection flows.
-Supports different directions and styling.
--->
-
 <Container
 	flexDirection="row"
 	alignItems="center"

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

@@ -32,12 +32,6 @@
 	}: Props = $props();
 </script>
 
-<!--
-@component
-Status button component for action buttons with optional icons.
-Uses single color with opacity variations for consistent styling.
--->
-
 <Container
 	backgroundColor={color}
 	{backgroundOpacity}

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

@@ -40,17 +40,9 @@
 	const config = sizeConfigs[size];
 	const opacities = opacityLevels[variant];
 
-	// Convert align to flexbox properties
 	const flexAlign = align === 'left' ? 'flex-start' : align === 'right' ? 'flex-end' : 'center';
 </script>
 
-<!--
-@component
-Simplified status content component with predefined styling levels.
-Uses consistent opacity and sizing patterns across all components.
-Fixed text centering by properly handling flexbox alignment.
--->
-
 <Container
 	padding={config.padding}
 	marginBottom={4}

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

@@ -24,20 +24,8 @@
 	}: Props = $props();
 </script>
 
-<!--
-@component
-Status header component with icon and text.
-Used for consistent headers across all status boxes.
--->
-
 <Container flexDirection="row" alignItems="center" gap={6} {marginBottom}>
-	<SVG
-		width={iconSize}
-		height={iconSize}
-		{color}
-		{opacity}
-		src={icon}
-	/>
+	<SVG width={iconSize} height={iconSize} {color} {opacity} src={icon} />
 	<Text
 		{text}
 		{fontSize}
@@ -47,4 +35,4 @@ Used for consistent headers across all status boxes.
 		textTransform="uppercase"
 		{letterSpacing}
 	/>
-</Container> 
+</Container>

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

@@ -4,23 +4,13 @@
 	interface Props {
 		color?: string;
 		size?: number;
-		type?: 'dot' | 'pulse';
+		type?: "dot" | "pulse";
 		visible?: boolean;
 	}
 
-	let {
-		color = "rgb(139, 69, 219)",
-		size = 8,
-		type = 'dot',
-		visible = true
-	}: Props = $props();
+	let { color = "rgb(139, 69, 219)", size = 8, type = "dot", visible = true }: Props = $props();
 </script>
 
 {#if visible}
-	<Container 
-		width={size} 
-		height={size} 
-		borderRadius="50%" 
-		backgroundColor={color}
-	/>
-{/if}
+	<Container width={size} height={size} borderRadius="50%" backgroundColor={color} />
+{/if}

src/lib/components/3d/utils/Hoverable.old.svelte

@@ -1,148 +0,0 @@
-<script lang="ts">
-	import { T } from "@threlte/core";
-	import type { IntersectionEvent } from "@threlte/extras";
-	import { interactivity } from "@threlte/extras";
-	import type { Snippet } from "svelte";
-	import { Spring, Tween } from "svelte/motion";
-	import { useCursor } from "@threlte/extras";
-	import { onMount, onDestroy } from "svelte";
-	import { Group, Box3, Vector3 } from "three";
-	import type { Robot } from "$lib/elements/robot/Robot.svelte";
-
-	interface Props {
-		content: Snippet<[{ isHovered: boolean; isSelected: boolean; offset: number }]>; // renderable
-		onClickObject?: () => void;
-		robot?: Robot; // Optional robot for height calculation
-		rescale?: boolean;
-	}
-
-	let { content, onClickObject, robot, rescale = true }: Props = $props();
-
-	const scale = new Spring(1);
-
-	// Height calculation state
-	let groupRef = $state<Group | undefined>(undefined);
-	let updateInterval: number;
-	let lastJointSnapshot: string = "";
-	let lastCalculatedHeight: number = 0;
-	const CONSTANT_OFFSET = 0.03;
-	const HEIGHT_THRESHOLD = 0.015; // Only update if height changes by more than 1.5cm
-	const HEIGHT_QUANTIZATION = 0.01; // Quantize to 1cm steps
-
-	// Hover state
-	let isHovered = $state(false);
-	let isSelected = $state(false);
-	let isHighlighted = $derived(isHovered || isSelected);
-	let offsetTween = new Tween(0.26, {
-		duration: 500,
-		easing: (t) => t * (2 - t)
-	});
-
-	$effect(() => {
-		if (isHighlighted) {
-			if (rescale) {
-				scale.target = 1.05;
-			}
-		} else {
-			if (rescale) {
-				scale.target = 1;
-			}
-		}
-	});
-
-	function getJointSnapshot(): string {
-		if (!robot?.urdfRobotState.urdfRobot.joints) return "";
-		return robot.urdfRobotState.urdfRobot.robot.joints
-			.filter((joint) => joint.type === "revolute" || joint.type === "continuous")
-			.map((joint) => {
-				const rotation = joint.rotation || [0, 0, 0];
-				return `${joint.name}:${rotation.map((r) => Math.round(r * 100) / 100).join(",")}`;
-			})
-			.join("|");
-	}
-
-	function quantizeHeight(height: number): number {
-		return Math.round(height / HEIGHT_QUANTIZATION) * HEIGHT_QUANTIZATION;
-	}
-
-	function calculateRobotHeight() {
-		if (!groupRef || !robot) return;
-
-		const currentJointSnapshot = getJointSnapshot();
-		if (currentJointSnapshot === lastJointSnapshot) {
-			return; // No significant joint changes
-		}
-
-		try {
-			groupRef.updateMatrixWorld(true);
-			const box = new Box3().setFromObject(groupRef);
-			const size = new Vector3();
-			box.getSize(size);
-			const height = size.y;
-			const actualHeight = height / (10 * scale.current);
-			const quantizedHeight = quantizeHeight(actualHeight);
-			const heightDiff = Math.abs(quantizedHeight - lastCalculatedHeight);
-			if (heightDiff < HEIGHT_THRESHOLD) {
-				return; // Change too small, ignore
-			}
-
-			const newTarget = Math.max(quantizedHeight + CONSTANT_OFFSET, 0.08);
-			offsetTween.target = newTarget;
-			lastCalculatedHeight = quantizedHeight;
-			lastJointSnapshot = currentJointSnapshot;
-		} catch (error) {
-			console.warn("Error calculating robot height:", error);
-			offsetTween.target = 0.28;
-		}
-	}
-
-	const handleKeyDown = (event: KeyboardEvent) => {
-		if (event.key === "Escape" && isSelected) {
-			isSelected = false;
-		}
-	};
-
-	onMount(() => {
-		if (!robot) return;
-		// Only run the height‐update check every 200 ms
-		// updateInterval = setInterval(calculateRobotHeight, 500);
-		// setTimeout(calculateRobotHeight, 100);
-
-		document.addEventListener("keydown", handleKeyDown);
-	});
-
-	onDestroy(() => {
-		// if (updateInterval) {
-		// 	clearInterval(updateInterval);
-		// }
-
-		document.removeEventListener("keydown", handleKeyDown);
-	});
-
-	const { onPointerEnter, onPointerLeave } = useCursor();
-	interactivity();
-</script>
-
-<T.Group
-	bind:ref={groupRef}
-	onpointerdown={(event: IntersectionEvent<MouseEvent>) => {
-		event.stopPropagation();
-		isSelected = true;
-		onClickObject?.();
-	}}
-	onpointerenter={(event: IntersectionEvent<PointerEvent>) => {
-		event.stopPropagation();
-		onPointerEnter();
-		isHovered = true;
-	}}
-	onpointerleave={(event: IntersectionEvent<PointerEvent>) => {
-		event.stopPropagation();
-		onPointerLeave();
-		isHovered = false;
-	}}
-	scale={scale.current}
->
-	{#snippet children({ ref })}
-		{@render content({ isHovered, isSelected, offset: offsetTween.current })}
-	{/snippet}
-</T.Group>