Update

.dockerignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules/
+
+# Build outputs (will be built in container)
+build/
+.svelte-kit/
+dist/
+
+# Development files
+.env*
+!.env.example
+
+# IDE files
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# Git
+.git/
+.gitignore
+
+# Logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+bun-debug.log*
+lerna-debug.log*
+
+# Cache directories
+.cache/
+.temp/
+.tmp/
+
+# Test files
+coverage/
+.nyc_output/
+
+# Other build artifacts
+*.tgz
+*.tar.gz
+
+# Docker files
+Dockerfile*
+docker-compose*
+.dockerignore
+
+# Documentation that's not needed in container
+README.md
+CHANGELOG.md
+*.md
+!LICENSE 

.gitattributes

@@ -0,0 +1,4 @@
+*.stl filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+static/gpu/scene.bin filter=lfs diff=lfs merge=lfs -text
+static/video.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,23 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "external/RobotHub-TransportServer"]
+	path = external/RobotHub-TransportServer
+	url = https://github.com/julien-blanchon/RobotHub-TransportServer
+[submodule "external/RobotHub-InferenceServer"]
+	path = external/RobotHub-InferenceServer
+	url = https://github.com/julien-blanchon/RobotHub-InferenceServer

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,12 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Src python
+src-python/
+node_modules/
+build/
+.svelte-kit/

.prettierrc

@@ -0,0 +1,16 @@
+{
+	"useTabs": true,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte",
+				"svelteSortOrder": "options-scripts-markup-styles"
+			}
+		}
+	]
+}

Dockerfile

@@ -0,0 +1,48 @@
+# Multi-stage Dockerfile for LeRobot Arena Frontend
+# Stage 1: Build the Svelte application with Bun
+FROM oven/bun:1-alpine AS builder
+
+WORKDIR /app
+
+# Install git for dependencies that might need it
+RUN apk add --no-cache git
+
+# Copy package files for dependency resolution (better caching)
+COPY package.json bun.lock* ./
+
+# Copy local packages that are linked in package.json
+COPY packages/ ./packages/
+
+# Install dependencies
+RUN bun install --frozen-lockfile
+
+# Copy source code
+COPY . .
+
+# Build the static application
+RUN bun run build
+
+# Stage 2: Serve with Bun's simple static server
+FROM oven/bun:1-alpine AS production
+
+# Set up a new user named "user" with user ID 1000 (required for HF Spaces)
+RUN adduser -D -u 1000 user
+
+# Switch to the "user" user
+USER user
+
+# Set home to the user's home directory
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy built application from previous stage with proper ownership
+COPY --chown=user --from=builder /app/build ./
+
+# Expose port 7860 (HF Spaces default)
+EXPOSE 7860
+
+# Start simple static server using Bun
+CMD ["bun", "--bun", "serve", ".", "--port", "7860"] 

README.md

@@ -0,0 +1,297 @@
+---
+title: LeRobot Arena Frontend
+emoji: 🤖
+colorFrom: blue
+colorTo: purple
+sdk: static
+app_build_command: bun install && bun run build
+app_file: build/index.html
+pinned: false
+license: mit
+short_description: A web-based robotics control and simulation platform
+tags:
+  - robotics
+  - control
+  - simulation
+  - svelte
+  - static
+  - frontend
+---
+
+# 🤖 LeRobot Arena
+
+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.
+
+## 🚀 Simple Deployment Options
+
+Here are the easiest ways to deploy this Svelte frontend:
+
+### 🏆 Option 1: Hugging Face Spaces (Static) - RECOMMENDED ✨
+
+**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
+```
+
+**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
+```
+
+### 🐳 Option 5: Docker (Optional)
+
+For local development or custom hosting:
+```bash
+docker build -t lerobot-arena-frontend .
+docker run -p 7860:7860 lerobot-arena-frontend
+```
+
+The Docker setup uses Bun's simple static server - much simpler than the complex server.js approach!
+
+## 🛠️ Development Setup
+
+For local development with hot-reload capabilities:
+
+### Frontend Development
+
+```bash
+# Install dependencies
+bun install
+
+# Start the development server
+bun run dev
+
+# Or open in browser automatically
+bun run dev -- --open
+```
+
+### Backend Development
+
+```bash
+# Navigate to Python backend
+cd src-python
+
+# Install Python dependencies (using uv)
+uv sync
+
+# Or using pip
+pip install -e .
+
+# Start the backend server
+python start_server.py
+```
+
+### Building Standalone Executable
+
+The backend can be packaged as a standalone executable using box-packager:
+
+```bash
+# Navigate to Python backend
+cd src-python
+
+# Install box-packager (if not already installed)
+uv pip install box-packager
+
+# Package the application
+box package
+
+# 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.
+
+## 📋 Project Structure
+
+```
+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
+```
+
+## 🐳 Docker Information
+
+The Docker setup includes:
+
+- **Multi-stage build**: Optimized for production using Bun and uv
+- **Automatic startup**: Both services start together
+- **Port mapping**: Backend on 8080, Frontend on 7860 (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
+
+For detailed Docker documentation, see [DOCKER_README.md](./DOCKER_README.md).
+
+## 🔧 Building for Production
+
+### Frontend Only
+
+```bash
+bun run build
+```
+
+### Backend Standalone Executable
+
+```bash
+cd src-python
+box package
+```
+
+### Complete Docker Build
+
+```bash
+docker-compose up --build
+```
+
+## 🌐 What's Included
+
+- **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
+
+## 🚨 Troubleshooting
+
+### Port Conflicts
+
+If ports 8080 or 7860 are already in use:
+
+```bash
+# Check what's using the ports
+lsof -i :8080
+lsof -i :7860
+
+# Use different ports
+docker run -p 8081:8080 -p 7861:7860 lerobot-arena
+```
+
+### Container Issues
+
+```bash
+# View logs
+docker-compose logs lerobot-arena
+
+# Rebuild without cache
+docker-compose build --no-cache
+docker-compose up
+```
+
+### Development Issues
+
+```bash
+# Clear node modules and reinstall
+rm -rf node_modules
+bun install
+
+# Clear Svelte kit cache
+rm -rf .svelte-kit
+bun run dev
+```
+
+### Box-packager Issues
+
+```bash
+# Clean build artifacts
+cd src-python
+box clean
+
+# Rebuild executable
+box package
+
+# Install cargo if missing
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+## 🚀 Hugging Face Spaces Deployment
+
+This project is configured for **Static HTML** deployment on Hugging Face Spaces (much simpler than Docker!):
+
+**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!
+
+**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
+
+No Docker, no complex setup - just static files! 🎉
+
+## 📚 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
+
+## 🤝 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
+
+## 📄 License
+
+This project is licensed under the MIT License.
+
+---
+
+**Built with ❤️ for the robotics community** 🤖

components.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "https://next.shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/app.css",
+		"baseColor": "stone"
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "$lib/utils",
+		"ui": "@/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"registry": "https://next.shadcn-svelte.com/registry"
+}

eslint.config.js

@@ -0,0 +1,36 @@
+import prettier from "eslint-config-prettier";
+import js from "@eslint/js";
+import { includeIgnoreFile } from "@eslint/compat";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import { fileURLToPath } from "node:url";
+import ts from "typescript-eslint";
+import svelteConfig from "./svelte.config.js";
+
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: { "no-undef": "off" }
+	},
+	{
+		files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: [".svelte"],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

external/RobotHub-InferenceServer

@@ -0,0 +1 @@
+Subproject commit 1d17b329ca89abd535b88b07e5404aaead3a9c25

external/RobotHub-TransportServer

@@ -0,0 +1 @@
+Subproject commit 8aedc84a7635fc0cbbd3a0671a5e1cf50616dad0

log.txt

@@ -0,0 +1 @@
+.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

package.json

@@ -0,0 +1,63 @@
+{
+	"name": "my-app",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.28.0",
+		"@iconify/json": "^2.2.346",
+		"@iconify/svelte": "^5.0.0",
+		"@iconify/tailwind4": "^1.0.6",
+		"@internationalized/date": "^3.8.2",
+		"@lucide/svelte": "^0.511.0",
+		"@sveltejs/adapter-auto": "^6.0.1",
+		"@sveltejs/adapter-static": "^3.0.8",
+		"@sveltejs/kit": "^2.21.2",
+		"@sveltejs/vite-plugin-svelte": "^5.1.0",
+		"@tailwindcss/vite": "^4.0.0",
+		"bits-ui": "^2.4.1",
+		"eslint": "^9.28.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.1",
+		"globals": "^16.2.0",
+		"layerchart": "1.0.11",
+		"mode-watcher": "^1.0.7",
+		"prettier": "^3.5.3",
+		"prettier-plugin-svelte": "^3.4.0",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.33.17",
+		"svelte-check": "^4.2.1",
+		"svelte-sonner": "^1.0.4",
+		"tailwind-variants": "^1.0.0",
+		"tailwindcss": "^4.0.0",
+		"tw-animate-css": "^1.3.4",
+		"typescript": "^5.8.3",
+		"typescript-eslint": "^8.33.1",
+		"vaul-svelte": "^1.0.0-next.7",
+		"vite": "^6.3.5"
+	},
+	"dependencies": {
+		"@threlte/core": "^8.0.4",
+		"@threlte/extras": "^9.2.1",
+		"@types/three": "0.177.0",
+		"clsx": "^2.1.1",
+		"feetech.js": "file:./packages/feetech.js",
+		"@robohub/transport-server-client": "file:../backend/transport-server/client/js",
+		"@robohub/inference-server-client": "file:../backend/inference-server/client",
+		"tailwind-merge": "^3.3.0",
+		"three": "^0.177.0",
+		"threlte-uikit": "^1.1.0",
+		"zod": "^3.25.56"
+	}
+}

packages/feetech.js/README.md

@@ -0,0 +1,24 @@
+# feetech.js
+
+Control feetech servos through browser
+
+## Usage
+
+```bash
+# Install the package
+npm install feetech.js
+```
+
+```javascript
+import { scsServoSDK } from "feetech.js";
+
+await scsServoSDK.connect();
+
+const position = await scsServoSDK.readPosition(1);
+console.log(position); // 1122
+```
+
+## Example usage:
+
+- simple example: [test.html](./test.html)
+- the bambot website: [bambot.org](https://bambot.org)

packages/feetech.js/debug.mjs

@@ -0,0 +1,15 @@
+/**
+ * Debug configuration for feetech.js
+ * Set DEBUG_ENABLED to false to disable all console.log statements for performance
+ */
+export const DEBUG_ENABLED = true; // Set to true to enable debug logging
+
+/**
+ * Conditional logging function that respects the DEBUG_ENABLED flag
+ * @param {...any} args - Arguments to log
+ */
+export const debugLog = (...args) => {
+    if (DEBUG_ENABLED) {
+        console.log(...args);
+    }
+}; 

packages/feetech.js/index.d.ts

@@ -0,0 +1,50 @@
+export type ConnectionOptions = {
+	baudRate?: number;
+	protocolEnd?: number;
+};
+
+export type ServoPositions = Map<number, number> | Record<number, number>;
+export type ServoSpeeds = Map<number, number> | Record<number, number>;
+
+export interface ScsServoSDK {
+	// Connection management
+	connect(options?: ConnectionOptions): Promise<true>;
+	disconnect(): Promise<true>;
+	isConnected(): boolean;
+
+	// Servo locking operations
+	lockServo(servoId: number): Promise<"success">;
+	unlockServo(servoId: number): Promise<"success">;
+	lockServos(servoIds: number[]): Promise<"success">;
+	unlockServos(servoIds: number[]): Promise<"success">;
+	lockServosForProduction(servoIds: number[]): Promise<"success">;
+	unlockServosForManualMovement(servoIds: number[]): Promise<"success">;
+
+	// Read operations (no locking needed)
+	readPosition(servoId: number): Promise<number>;
+	syncReadPositions(servoIds: number[]): Promise<Map<number, number>>;
+
+	// Write operations - LOCKED MODE (respects servo locks)
+	writePosition(servoId: number, position: number): Promise<"success">;
+	writeTorqueEnable(servoId: number, enable: boolean): Promise<"success">;
+
+	// Write operations - UNLOCKED MODE (temporary unlock for operation)
+	writePositionUnlocked(servoId: number, position: number): Promise<"success">;
+	writePositionAndDisableTorque(servoId: number, position: number, waitTimeMs?: number): Promise<"success">;
+	writeTorqueEnableUnlocked(servoId: number, enable: boolean): Promise<"success">;
+
+	// Sync write operations
+	syncWritePositions(servoPositions: ServoPositions): Promise<"success">;
+
+	// Configuration functions
+	setBaudRate(servoId: number, baudRateIndex: number): Promise<"success">;
+	setServoId(currentServoId: number, newServoId: number): Promise<"success">;
+	setWheelMode(servoId: number): Promise<"success">;
+	setPositionMode(servoId: number): Promise<"success">;
+}
+
+export const scsServoSDK: ScsServoSDK;
+
+// Debug exports
+export const DEBUG_ENABLED: boolean;
+export function debugLog(message: string): void;

packages/feetech.js/index.mjs

@@ -0,0 +1,65 @@
+// Import all functions from the unified scsServoSDK module
+import {
+	connect,
+	disconnect,
+	isConnected,
+	lockServo,
+	unlockServo,
+	lockServos,
+	unlockServos,
+	lockServosForProduction,
+	unlockServosForManualMovement,
+	readPosition,
+	syncReadPositions,
+	writePosition,
+	writeTorqueEnable,
+	writePositionUnlocked,
+	writePositionAndDisableTorque,
+	writeTorqueEnableUnlocked,
+	syncWritePositions,
+	setBaudRate,
+	setServoId,
+	setWheelMode,
+	setPositionMode
+} from "./scsServoSDK.mjs";
+
+// Create the unified SCS servo SDK object
+export const scsServoSDK = {
+	// Connection management
+	connect,
+	disconnect,
+	isConnected,
+
+	// Servo locking operations
+	lockServo,
+	unlockServo,
+	lockServos,
+	unlockServos,
+	lockServosForProduction,
+	unlockServosForManualMovement,
+
+	// Read operations (no locking needed)
+	readPosition,
+	syncReadPositions,
+
+	// Write operations - LOCKED MODE (respects servo locks)
+	writePosition,
+	writeTorqueEnable,
+
+	// Write operations - UNLOCKED MODE (temporary unlock for operation)
+	writePositionUnlocked,
+	writePositionAndDisableTorque,
+	writeTorqueEnableUnlocked,
+
+	// Sync write operations
+	syncWritePositions,
+
+	// Configuration functions
+	setBaudRate,
+	setServoId,
+	setWheelMode,
+	setPositionMode
+};
+
+// Export debug configuration for easy access
+export { DEBUG_ENABLED, debugLog } from "./debug.mjs";

packages/feetech.js/lowLevelSDK.mjs

@@ -0,0 +1,1235 @@
+// Import debug logging function
+import { debugLog } from "./debug.mjs";
+
+// Constants
+export const BROADCAST_ID = 0xfe; // 254
+export const MAX_ID = 0xfc; // 252
+
+// Protocol instructions
+export const INST_PING = 1;
+export const INST_READ = 2;
+export const INST_WRITE = 3;
+export const INST_REG_WRITE = 4;
+export const INST_ACTION = 5;
+export const INST_SYNC_WRITE = 131; // 0x83
+export const INST_SYNC_READ = 130; // 0x82
+export const INST_STATUS = 85; // 0x55, status packet instruction (0x55)
+
+// Communication results
+export const COMM_SUCCESS = 0; // tx or rx packet communication success
+export const COMM_PORT_BUSY = -1; // Port is busy (in use)
+export const COMM_TX_FAIL = -2; // Failed transmit instruction packet
+export const COMM_RX_FAIL = -3; // Failed get status packet
+export const COMM_TX_ERROR = -4; // Incorrect instruction packet
+export const COMM_RX_WAITING = -5; // Now receiving status packet
+export const COMM_RX_TIMEOUT = -6; // There is no status packet
+export const COMM_RX_CORRUPT = -7; // Incorrect status packet
+export const COMM_NOT_AVAILABLE = -9;
+
+// Packet constants
+export const TXPACKET_MAX_LEN = 250;
+export const RXPACKET_MAX_LEN = 250;
+
+// Protocol Packet positions
+export const PKT_HEADER0 = 0;
+export const PKT_HEADER1 = 1;
+export const PKT_ID = 2;
+export const PKT_LENGTH = 3;
+export const PKT_INSTRUCTION = 4;
+export const PKT_ERROR = 4;
+export const PKT_PARAMETER0 = 5;
+
+// Protocol Error bits
+export const ERRBIT_VOLTAGE = 1;
+export const ERRBIT_ANGLE = 2;
+export const ERRBIT_OVERHEAT = 4;
+export const ERRBIT_OVERELE = 8;
+export const ERRBIT_OVERLOAD = 32;
+
+// Default settings
+const DEFAULT_BAUDRATE = 1000000;
+const LATENCY_TIMER = 16;
+
+// Global protocol end state
+let SCS_END = 0; // (STS/SMS=0, SCS=1)
+
+// Utility functions for handling word operations
+export function SCS_LOWORD(l) {
+	return l & 0xffff;
+}
+
+export function SCS_HIWORD(l) {
+	return (l >> 16) & 0xffff;
+}
+
+export function SCS_LOBYTE(w) {
+	if (SCS_END === 0) {
+		return w & 0xff;
+	} else {
+		return (w >> 8) & 0xff;
+	}
+}
+
+export function SCS_HIBYTE(w) {
+	if (SCS_END === 0) {
+		return (w >> 8) & 0xff;
+	} else {
+		return w & 0xff;
+	}
+}
+
+export function SCS_MAKEWORD(a, b) {
+	if (SCS_END === 0) {
+		return (a & 0xff) | ((b & 0xff) << 8);
+	} else {
+		return (b & 0xff) | ((a & 0xff) << 8);
+	}
+}
+
+export function SCS_MAKEDWORD(a, b) {
+	return (a & 0xffff) | ((b & 0xffff) << 16);
+}
+
+export function SCS_TOHOST(a, b) {
+	if (a & (1 << b)) {
+		return -(a & ~(1 << b));
+	} else {
+		return a;
+	}
+}
+
+export class PortHandler {
+	constructor() {
+		this.port = null;
+		this.reader = null;
+		this.writer = null;
+		this.isOpen = false;
+		this.isUsing = false;
+		this.baudrate = DEFAULT_BAUDRATE;
+		this.packetStartTime = 0;
+		this.packetTimeout = 0;
+		this.txTimePerByte = 0;
+	}
+
+	async requestPort() {
+		try {
+			this.port = await navigator.serial.requestPort();
+			return true;
+		} catch (err) {
+			console.error("Error requesting serial port:", err);
+			return false;
+		}
+	}
+
+	async openPort() {
+		if (!this.port) {
+			return false;
+		}
+
+		try {
+			await this.port.open({ baudRate: this.baudrate });
+			this.reader = this.port.readable.getReader();
+			this.writer = this.port.writable.getWriter();
+			this.isOpen = true;
+			this.txTimePerByte = (1000.0 / this.baudrate) * 10.0;
+			return true;
+		} catch (err) {
+			console.error("Error opening port:", err);
+			return false;
+		}
+	}
+
+	async closePort() {
+		if (this.reader) {
+			await this.reader.releaseLock();
+			this.reader = null;
+		}
+
+		if (this.writer) {
+			await this.writer.releaseLock();
+			this.writer = null;
+		}
+
+		if (this.port && this.isOpen) {
+			await this.port.close();
+			this.isOpen = false;
+		}
+	}
+
+	async clearPort() {
+		if (this.reader) {
+			await this.reader.releaseLock();
+			this.reader = this.port.readable.getReader();
+		}
+	}
+
+	setBaudRate(baudrate) {
+		this.baudrate = baudrate;
+		this.txTimePerByte = (1000.0 / this.baudrate) * 10.0;
+		return true;
+	}
+
+	getBaudRate() {
+		return this.baudrate;
+	}
+
+	async writePort(data) {
+		if (!this.isOpen || !this.writer) {
+			return 0;
+		}
+
+		try {
+			await this.writer.write(new Uint8Array(data));
+			return data.length;
+		} catch (err) {
+			console.error("Error writing to port:", err);
+			return 0;
+		}
+	}
+
+	async readPort(length) {
+		if (!this.isOpen || !this.reader) {
+			return [];
+		}
+
+		try {
+			// Increase timeout for more reliable data reception
+			const timeoutMs = 500;
+			let totalBytes = [];
+			const startTime = performance.now();
+
+			// Continue reading until we get enough bytes or timeout
+			while (totalBytes.length < length) {
+				// Create a timeout promise
+				const timeoutPromise = new Promise((resolve) => {
+					setTimeout(() => resolve({ value: new Uint8Array(), done: false, timeout: true }), 100); // Short internal timeout
+				});
+
+				// Race between reading and timeout
+				const result = await Promise.race([this.reader.read(), timeoutPromise]);
+
+				if (result.timeout) {
+					// Internal timeout - check if we've exceeded total timeout
+					if (performance.now() - startTime > timeoutMs) {
+						debugLog(`readPort total timeout after ${timeoutMs}ms`);
+						break;
+					}
+					continue; // Try reading again
+				}
+
+				if (result.done) {
+					debugLog("Reader done, stream closed");
+					break;
+				}
+
+				if (result.value.length === 0) {
+					// If there's no data but we haven't timed out yet, wait briefly and try again
+					await new Promise((resolve) => setTimeout(resolve, 10));
+
+					// Check if we've exceeded total timeout
+					if (performance.now() - startTime > timeoutMs) {
+						debugLog(`readPort total timeout after ${timeoutMs}ms`);
+						break;
+					}
+					continue;
+				}
+
+				// Add received bytes to our total
+				const newData = Array.from(result.value);
+				totalBytes.push(...newData);
+				debugLog(
+					`Read ${newData.length} bytes:`,
+					newData.map((b) => b.toString(16).padStart(2, "0")).join(" ")
+				);
+
+				// If we've got enough data, we can stop
+				if (totalBytes.length >= length) {
+					break;
+				}
+			}
+
+			return totalBytes;
+		} catch (err) {
+			console.error("Error reading from port:", err);
+			return [];
+		}
+	}
+
+	setPacketTimeout(packetLength) {
+		this.packetStartTime = this.getCurrentTime();
+		this.packetTimeout = this.txTimePerByte * packetLength + LATENCY_TIMER * 2.0 + 2.0;
+	}
+
+	setPacketTimeoutMillis(msec) {
+		this.packetStartTime = this.getCurrentTime();
+		this.packetTimeout = msec;
+	}
+
+	isPacketTimeout() {
+		if (this.getTimeSinceStart() > this.packetTimeout) {
+			this.packetTimeout = 0;
+			return true;
+		}
+		return false;
+	}
+
+	getCurrentTime() {
+		return performance.now();
+	}
+
+	getTimeSinceStart() {
+		const timeSince = this.getCurrentTime() - this.packetStartTime;
+		if (timeSince < 0.0) {
+			this.packetStartTime = this.getCurrentTime();
+		}
+		return timeSince;
+	}
+}
+
+export class PacketHandler {
+	constructor(protocolEnd = 0) {
+		SCS_END = protocolEnd;
+		debugLog(`PacketHandler initialized with protocol_end=${protocolEnd} (STS/SMS=0, SCS=1)`);
+	}
+
+	getProtocolVersion() {
+		return 1.0;
+	}
+
+	// 获取当前协议端设置的方法
+	getProtocolEnd() {
+		return SCS_END;
+	}
+
+	getTxRxResult(result) {
+		if (result === COMM_SUCCESS) {
+			return "[TxRxResult] Communication success!";
+		} else if (result === COMM_PORT_BUSY) {
+			return "[TxRxResult] Port is in use!";
+		} else if (result === COMM_TX_FAIL) {
+			return "[TxRxResult] Failed transmit instruction packet!";
+		} else if (result === COMM_RX_FAIL) {
+			return "[TxRxResult] Failed get status packet from device!";
+		} else if (result === COMM_TX_ERROR) {
+			return "[TxRxResult] Incorrect instruction packet!";
+		} else if (result === COMM_RX_WAITING) {
+			return "[TxRxResult] Now receiving status packet!";
+		} else if (result === COMM_RX_TIMEOUT) {
+			return "[TxRxResult] There is no status packet!";
+		} else if (result === COMM_RX_CORRUPT) {
+			return "[TxRxResult] Incorrect status packet!";
+		} else if (result === COMM_NOT_AVAILABLE) {
+			return "[TxRxResult] Protocol does not support this function!";
+		} else {
+			return "";
+		}
+	}
+
+	getRxPacketError(error) {
+		if (error & ERRBIT_VOLTAGE) {
+			return "[RxPacketError] Input voltage error!";
+		}
+		if (error & ERRBIT_ANGLE) {
+			return "[RxPacketError] Angle sen error!";
+		}
+		if (error & ERRBIT_OVERHEAT) {
+			return "[RxPacketError] Overheat error!";
+		}
+		if (error & ERRBIT_OVERELE) {
+			return "[RxPacketError] OverEle error!";
+		}
+		if (error & ERRBIT_OVERLOAD) {
+			return "[RxPacketError] Overload error!";
+		}
+		return "";
+	}
+
+	async txPacket(port, txpacket) {
+		let checksum = 0;
+		const totalPacketLength = txpacket[PKT_LENGTH] + 4; // 4: HEADER0 HEADER1 ID LENGTH
+
+		if (port.isUsing) {
+			return COMM_PORT_BUSY;
+		}
+		port.isUsing = true;
+
+		// Check max packet length
+		if (totalPacketLength > TXPACKET_MAX_LEN) {
+			port.isUsing = false;
+			return COMM_TX_ERROR;
+		}
+
+		// Make packet header
+		txpacket[PKT_HEADER0] = 0xff;
+		txpacket[PKT_HEADER1] = 0xff;
+
+		// Add checksum to packet
+		for (let idx = 2; idx < totalPacketLength - 1; idx++) {
+			checksum += txpacket[idx];
+		}
+
+		txpacket[totalPacketLength - 1] = ~checksum & 0xff;
+
+		// TX packet
+		await port.clearPort();
+		const writtenPacketLength = await port.writePort(txpacket);
+		if (totalPacketLength !== writtenPacketLength) {
+			port.isUsing = false;
+			return COMM_TX_FAIL;
+		}
+
+		return COMM_SUCCESS;
+	}
+
+	async rxPacket(port) {
+		let rxpacket = [];
+		let result = COMM_RX_FAIL;
+
+		let waitLength = 6; // minimum length (HEADER0 HEADER1 ID LENGTH)
+
+		while (true) {
+			const data = await port.readPort(waitLength - rxpacket.length);
+			rxpacket.push(...data);
+
+			if (rxpacket.length >= waitLength) {
+				// Find packet header
+				let headerIndex = -1;
+				for (let i = 0; i < rxpacket.length - 1; i++) {
+					if (rxpacket[i] === 0xff && rxpacket[i + 1] === 0xff) {
+						headerIndex = i;
+						break;
+					}
+				}
+
+				if (headerIndex === 0) {
+					// Found at the beginning of the packet
+					if (rxpacket[PKT_ID] > 0xfd || rxpacket[PKT_LENGTH] > RXPACKET_MAX_LEN) {
+						// Invalid ID or length
+						rxpacket.shift();
+						continue;
+					}
+
+					// Recalculate expected packet length
+					if (waitLength !== rxpacket[PKT_LENGTH] + PKT_LENGTH + 1) {
+						waitLength = rxpacket[PKT_LENGTH] + PKT_LENGTH + 1;
+						continue;
+					}
+
+					if (rxpacket.length < waitLength) {
+						// Check timeout
+						if (port.isPacketTimeout()) {
+							result = rxpacket.length === 0 ? COMM_RX_TIMEOUT : COMM_RX_CORRUPT;
+							break;
+						}
+						continue;
+					}
+
+					// Calculate checksum
+					let checksum = 0;
+					for (let i = 2; i < waitLength - 1; i++) {
+						checksum += rxpacket[i];
+					}
+					checksum = ~checksum & 0xff;
+
+					// Verify checksum
+					if (rxpacket[waitLength - 1] === checksum) {
+						result = COMM_SUCCESS;
+					} else {
+						result = COMM_RX_CORRUPT;
+					}
+					break;
+				} else if (headerIndex > 0) {
+					// Remove unnecessary bytes before header
+					rxpacket = rxpacket.slice(headerIndex);
+					continue;
+				}
+			}
+
+			// Check timeout
+			if (port.isPacketTimeout()) {
+				result = rxpacket.length === 0 ? COMM_RX_TIMEOUT : COMM_RX_CORRUPT;
+				break;
+			}
+		}
+
+		if (result !== COMM_SUCCESS) {
+			debugLog(
+				`rxPacket result: ${result}, packet: ${rxpacket.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+			);
+		} else {
+			console.debug(
+				`rxPacket successful: ${rxpacket.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+			);
+		}
+		return [rxpacket, result];
+	}
+
+	async txRxPacket(port, txpacket) {
+		let rxpacket = null;
+		let error = 0;
+		let result = COMM_TX_FAIL;
+
+		try {
+			// Check if port is already in use
+			if (port.isUsing) {
+				debugLog("Port is busy, cannot start new transaction");
+				return [rxpacket, COMM_PORT_BUSY, error];
+			}
+
+			// TX packet
+			debugLog(
+				"Sending packet:",
+				txpacket.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")
+			);
+
+			// Remove retry logic and just send once
+			result = await this.txPacket(port, txpacket);
+			debugLog(`TX result: ${result}`);
+
+			if (result !== COMM_SUCCESS) {
+				debugLog(`TX failed with result: ${result}`);
+				port.isUsing = false; // Important: Release the port on TX failure
+				return [rxpacket, result, error];
+			}
+
+			// If ID is broadcast, no need to wait for status packet
+			if (txpacket[PKT_ID] === BROADCAST_ID) {
+				port.isUsing = false;
+				return [rxpacket, result, error];
+			}
+
+			// Set packet timeout
+			if (txpacket[PKT_INSTRUCTION] === INST_READ) {
+				const length = txpacket[PKT_PARAMETER0 + 1];
+				// For READ instructions, we expect response to include the data
+				port.setPacketTimeout(length + 10); // Add extra buffer
+				debugLog(`Set READ packet timeout for ${length + 10} bytes`);
+			} else {
+				// For other instructions, we expect a status packet
+				port.setPacketTimeout(10); // HEADER0 HEADER1 ID LENGTH ERROR CHECKSUM + buffer
+				debugLog(`Set standard packet timeout for 10 bytes`);
+			}
+
+			// RX packet - no retries, just attempt once
+			debugLog(`Receiving packet`);
+
+			// Clear port before receiving to ensure clean state
+			await port.clearPort();
+
+			const [rxpacketResult, resultRx] = await this.rxPacket(port);
+			rxpacket = rxpacketResult;
+
+			// Check if received packet is valid
+			if (resultRx !== COMM_SUCCESS) {
+				debugLog(`Rx failed with result: ${resultRx}`);
+				port.isUsing = false;
+				return [rxpacket, resultRx, error];
+			}
+
+			// Verify packet structure
+			if (rxpacket.length < 6) {
+				debugLog(`Received packet too short (${rxpacket.length} bytes)`);
+				port.isUsing = false;
+				return [rxpacket, COMM_RX_CORRUPT, error];
+			}
+
+			// Verify packet ID matches the sent ID
+			if (rxpacket[PKT_ID] !== txpacket[PKT_ID]) {
+				debugLog(
+					`Received packet ID (${rxpacket[PKT_ID]}) doesn't match sent ID (${txpacket[PKT_ID]})`
+				);
+				port.isUsing = false;
+				return [rxpacket, COMM_RX_CORRUPT, error];
+			}
+
+			// Packet looks valid
+			error = rxpacket[PKT_ERROR];
+			port.isUsing = false; // Release port on success
+			return [rxpacket, resultRx, error];
+		} catch (err) {
+			console.error("Exception in txRxPacket:", err);
+			port.isUsing = false; // Release port on exception
+			return [rxpacket, COMM_RX_FAIL, error];
+		}
+	}
+
+	async ping(port, scsId) {
+		let modelNumber = 0;
+		let error = 0;
+
+		try {
+			if (scsId >= BROADCAST_ID) {
+				debugLog(`Cannot ping broadcast ID ${scsId}`);
+				return [modelNumber, COMM_NOT_AVAILABLE, error];
+			}
+
+			const txpacket = new Array(6).fill(0);
+			txpacket[PKT_ID] = scsId;
+			txpacket[PKT_LENGTH] = 2;
+			txpacket[PKT_INSTRUCTION] = INST_PING;
+
+			debugLog(`Pinging servo ID ${scsId}...`);
+
+			// 发送ping指令并获取响应
+			const [rxpacket, result, err] = await this.txRxPacket(port, txpacket);
+			error = err;
+
+			// 与Python SDK保持一致：如���ping成功，尝试读取地址3的型号信息
+			if (result === COMM_SUCCESS) {
+				debugLog(`Ping to servo ID ${scsId} succeeded, reading model number from address 3`);
+				// 读取地址3的型号信息（2字节）
+				const [data, dataResult, dataError] = await this.readTxRx(port, scsId, 3, 2);
+
+				if (dataResult === COMM_SUCCESS && data && data.length >= 2) {
+					modelNumber = SCS_MAKEWORD(data[0], data[1]);
+					debugLog(`Model number read: ${modelNumber}`);
+				} else {
+					debugLog(`Could not read model number: ${this.getTxRxResult(dataResult)}`);
+				}
+			} else {
+				debugLog(`Ping failed with result: ${result}, error: ${error}`);
+			}
+
+			return [modelNumber, result, error];
+		} catch (error) {
+			console.error(`Exception in ping():`, error);
+			return [0, COMM_RX_FAIL, 0];
+		}
+	}
+
+	// Read methods
+	async readTxRx(port, scsId, address, length) {
+		if (scsId >= BROADCAST_ID) {
+			debugLog("Cannot read from broadcast ID");
+			return [[], COMM_NOT_AVAILABLE, 0];
+		}
+
+		// Create read packet
+		const txpacket = new Array(8).fill(0);
+		txpacket[PKT_ID] = scsId;
+		txpacket[PKT_LENGTH] = 4;
+		txpacket[PKT_INSTRUCTION] = INST_READ;
+		txpacket[PKT_PARAMETER0] = address;
+		txpacket[PKT_PARAMETER0 + 1] = length;
+
+		debugLog(`Reading ${length} bytes from address ${address} for servo ID ${scsId}`);
+
+		// Send packet and get response
+		const [rxpacket, result, error] = await this.txRxPacket(port, txpacket);
+
+		// Process the result
+		if (result !== COMM_SUCCESS) {
+			debugLog(`Read failed with result: ${result}, error: ${error}`);
+			return [[], result, error];
+		}
+
+		if (!rxpacket || rxpacket.length < PKT_PARAMETER0 + length) {
+			debugLog(
+				`Invalid response packet: expected at least ${PKT_PARAMETER0 + length} bytes, got ${rxpacket ? rxpacket.length : 0}`
+			);
+			return [[], COMM_RX_CORRUPT, error];
+		}
+
+		// Extract data from response
+		const data = [];
+		debugLog(
+			`Response packet length: ${rxpacket.length}, extracting ${length} bytes from offset ${PKT_PARAMETER0}`
+		);
+		debugLog(
+			`Response data bytes: ${rxpacket
+				.slice(PKT_PARAMETER0, PKT_PARAMETER0 + length)
+				.map((b) => "0x" + b.toString(16).padStart(2, "0"))
+				.join(" ")}`
+		);
+
+		for (let i = 0; i < length; i++) {
+			data.push(rxpacket[PKT_PARAMETER0 + i]);
+		}
+
+		debugLog(
+			`Successfully read ${length} bytes: ${data.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+		);
+		return [data, result, error];
+	}
+
+	async read1ByteTxRx(port, scsId, address) {
+		const [data, result, error] = await this.readTxRx(port, scsId, address, 1);
+		const value = data.length > 0 ? data[0] : 0;
+		return [value, result, error];
+	}
+
+	async read2ByteTxRx(port, scsId, address) {
+		const [data, result, error] = await this.readTxRx(port, scsId, address, 2);
+
+		let value = 0;
+		if (data.length >= 2) {
+			value = SCS_MAKEWORD(data[0], data[1]);
+		}
+
+		return [value, result, error];
+	}
+
+	async read4ByteTxRx(port, scsId, address) {
+		const [data, result, error] = await this.readTxRx(port, scsId, address, 4);
+
+		let value = 0;
+		if (data.length >= 4) {
+			const loword = SCS_MAKEWORD(data[0], data[1]);
+			const hiword = SCS_MAKEWORD(data[2], data[3]);
+			value = SCS_MAKEDWORD(loword, hiword);
+
+			debugLog(
+				`read4ByteTxRx: data=${data.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+			);
+			debugLog(
+				`  loword=${loword} (0x${loword.toString(16)}), hiword=${hiword} (0x${hiword.toString(16)})`
+			);
+			debugLog(`  value=${value} (0x${value.toString(16)})`);
+		}
+
+		return [value, result, error];
+	}
+
+	// Write methods
+	async writeTxRx(port, scsId, address, length, data) {
+		if (scsId >= BROADCAST_ID) {
+			return [COMM_NOT_AVAILABLE, 0];
+		}
+
+		// Create write packet
+		const txpacket = new Array(length + 7).fill(0);
+		txpacket[PKT_ID] = scsId;
+		txpacket[PKT_LENGTH] = length + 3;
+		txpacket[PKT_INSTRUCTION] = INST_WRITE;
+		txpacket[PKT_PARAMETER0] = address;
+
+		// Add data
+		for (let i = 0; i < length; i++) {
+			txpacket[PKT_PARAMETER0 + 1 + i] = data[i] & 0xff;
+		}
+
+		// Send packet and get response
+		const [rxpacket, result, error] = await this.txRxPacket(port, txpacket);
+
+		return [result, error];
+	}
+
+	async write1ByteTxRx(port, scsId, address, data) {
+		const dataArray = [data & 0xff];
+		return await this.writeTxRx(port, scsId, address, 1, dataArray);
+	}
+
+	async write2ByteTxRx(port, scsId, address, data) {
+		const dataArray = [SCS_LOBYTE(data), SCS_HIBYTE(data)];
+		return await this.writeTxRx(port, scsId, address, 2, dataArray);
+	}
+
+	async write4ByteTxRx(port, scsId, address, data) {
+		const dataArray = [
+			SCS_LOBYTE(SCS_LOWORD(data)),
+			SCS_HIBYTE(SCS_LOWORD(data)),
+			SCS_LOBYTE(SCS_HIWORD(data)),
+			SCS_HIBYTE(SCS_HIWORD(data))
+		];
+		return await this.writeTxRx(port, scsId, address, 4, dataArray);
+	}
+
+	// Add syncReadTx for GroupSyncRead functionality
+	async syncReadTx(port, startAddress, dataLength, param, paramLength) {
+		// Create packet: HEADER0 HEADER1 ID LEN INST START_ADDR DATA_LEN PARAM... CHKSUM
+		const txpacket = new Array(paramLength + 8).fill(0);
+
+		txpacket[PKT_ID] = BROADCAST_ID;
+		txpacket[PKT_LENGTH] = paramLength + 4; // 4: INST START_ADDR DATA_LEN CHKSUM
+		txpacket[PKT_INSTRUCTION] = INST_SYNC_READ;
+		txpacket[PKT_PARAMETER0] = startAddress;
+		txpacket[PKT_PARAMETER0 + 1] = dataLength;
+
+		// Add parameters
+		for (let i = 0; i < paramLength; i++) {
+			txpacket[PKT_PARAMETER0 + 2 + i] = param[i];
+		}
+
+		// Calculate checksum
+		const totalLen = txpacket[PKT_LENGTH] + 4; // 4: HEADER0 HEADER1 ID LENGTH
+
+		// Add headers
+		txpacket[PKT_HEADER0] = 0xff;
+		txpacket[PKT_HEADER1] = 0xff;
+
+		// Calculate checksum
+		let checksum = 0;
+		for (let i = 2; i < totalLen - 1; i++) {
+			checksum += txpacket[i] & 0xff;
+		}
+		txpacket[totalLen - 1] = ~checksum & 0xff;
+
+		debugLog(
+			`SyncReadTx: ${txpacket.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+		);
+
+		// Send packet
+		await port.clearPort();
+		const bytesWritten = await port.writePort(txpacket);
+		if (bytesWritten !== totalLen) {
+			return COMM_TX_FAIL;
+		}
+
+		// Set timeout based on expected response size
+		port.setPacketTimeout((6 + dataLength) * paramLength);
+
+		return COMM_SUCCESS;
+	}
+
+	// Add syncWriteTxOnly for GroupSyncWrite functionality
+	async syncWriteTxOnly(port, startAddress, dataLength, param, paramLength) {
+		// Create packet: HEADER0 HEADER1 ID LEN INST START_ADDR DATA_LEN PARAM... CHKSUM
+		const txpacket = new Array(paramLength + 8).fill(0);
+
+		txpacket[PKT_ID] = BROADCAST_ID;
+		txpacket[PKT_LENGTH] = paramLength + 4; // 4: INST START_ADDR DATA_LEN CHKSUM
+		txpacket[PKT_INSTRUCTION] = INST_SYNC_WRITE;
+		txpacket[PKT_PARAMETER0] = startAddress;
+		txpacket[PKT_PARAMETER0 + 1] = dataLength;
+
+		// Add parameters
+		for (let i = 0; i < paramLength; i++) {
+			txpacket[PKT_PARAMETER0 + 2 + i] = param[i];
+		}
+
+		// Calculate checksum
+		const totalLen = txpacket[PKT_LENGTH] + 4; // 4: HEADER0 HEADER1 ID LENGTH
+
+		// Add headers
+		txpacket[PKT_HEADER0] = 0xff;
+		txpacket[PKT_HEADER1] = 0xff;
+
+		// Calculate checksum
+		let checksum = 0;
+		for (let i = 2; i < totalLen - 1; i++) {
+			checksum += txpacket[i] & 0xff;
+		}
+		txpacket[totalLen - 1] = ~checksum & 0xff;
+
+		debugLog(
+			`SyncWriteTxOnly: ${txpacket.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+		);
+
+		// Send packet - for sync write, we don't need a response
+		await port.clearPort();
+		const bytesWritten = await port.writePort(txpacket);
+		if (bytesWritten !== totalLen) {
+			return COMM_TX_FAIL;
+		}
+
+		return COMM_SUCCESS;
+	}
+
+	// 辅助方法：格式化数据包结构以方便调试
+	formatPacketStructure(packet) {
+		if (!packet || packet.length < 4) {
+			return "Invalid packet (too short)";
+		}
+
+		try {
+			let result = "";
+			result += `HEADER: ${packet[0].toString(16).padStart(2, "0")} ${packet[1].toString(16).padStart(2, "0")} | `;
+			result += `ID: ${packet[2]} | `;
+			result += `LENGTH: ${packet[3]} | `;
+
+			if (packet.length >= 5) {
+				result += `ERROR/INST: ${packet[4].toString(16).padStart(2, "0")} | `;
+			}
+
+			if (packet.length >= 6) {
+				result += "PARAMS: ";
+				for (let i = 5; i < packet.length - 1; i++) {
+					result += `${packet[i].toString(16).padStart(2, "0")} `;
+				}
+				result += `| CHECKSUM: ${packet[packet.length - 1].toString(16).padStart(2, "0")}`;
+			}
+
+			return result;
+		} catch (e) {
+			return "Error formatting packet: " + e.message;
+		}
+	}
+
+	/**
+	 * 从响应包中解析舵机型号
+	 * @param {Array} rxpacket - 响应数据包
+	 * @returns {number} 舵机型号
+	 */
+	parseModelNumber(rxpacket) {
+		if (!rxpacket || rxpacket.length < 7) {
+			return 0;
+		}
+
+		// 检查是否有参数字段
+		if (rxpacket.length <= PKT_PARAMETER0 + 1) {
+			return 0;
+		}
+
+		const param1 = rxpacket[PKT_PARAMETER0];
+		const param2 = rxpacket[PKT_PARAMETER0 + 1];
+
+		if (SCS_END === 0) {
+			// STS/SMS 协议的字节顺序
+			return SCS_MAKEWORD(param1, param2);
+		} else {
+			// SCS 协议的字节顺序
+			return SCS_MAKEWORD(param2, param1);
+		}
+	}
+
+	/**
+	 * Verify packet header
+	 * @param {Array} packet - The packet to verify
+	 * @returns {Number} COMM_SUCCESS if packet is valid, error code otherwise
+	 */
+	getPacketHeader(packet) {
+		if (!packet || packet.length < 4) {
+			return COMM_RX_CORRUPT;
+		}
+
+		// Check header
+		if (packet[PKT_HEADER0] !== 0xff || packet[PKT_HEADER1] !== 0xff) {
+			return COMM_RX_CORRUPT;
+		}
+
+		// Check ID validity
+		if (packet[PKT_ID] > 0xfd) {
+			return COMM_RX_CORRUPT;
+		}
+
+		// Check length
+		if (packet.length != packet[PKT_LENGTH] + 4) {
+			return COMM_RX_CORRUPT;
+		}
+
+		// Calculate checksum
+		let checksum = 0;
+		for (let i = 2; i < packet.length - 1; i++) {
+			checksum += packet[i] & 0xff;
+		}
+		checksum = ~checksum & 0xff;
+
+		// Verify checksum
+		if (packet[packet.length - 1] !== checksum) {
+			return COMM_RX_CORRUPT;
+		}
+
+		return COMM_SUCCESS;
+	}
+}
+
+/**
+ * GroupSyncRead class
+ * - This class is used to read multiple servos with the same control table address at once
+ */
+export class GroupSyncRead {
+	constructor(port, ph, startAddress, dataLength) {
+		this.port = port;
+		this.ph = ph;
+		this.startAddress = startAddress;
+		this.dataLength = dataLength;
+
+		this.isAvailableServiceID = new Set();
+		this.dataDict = new Map();
+		this.param = [];
+		this.clearParam();
+	}
+
+	makeParam() {
+		this.param = [];
+		for (const id of this.isAvailableServiceID) {
+			this.param.push(id);
+		}
+		return this.param.length;
+	}
+
+	addParam(scsId) {
+		if (this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		this.isAvailableServiceID.add(scsId);
+		this.dataDict.set(scsId, new Array(this.dataLength).fill(0));
+		return true;
+	}
+
+	removeParam(scsId) {
+		if (!this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		this.isAvailableServiceID.delete(scsId);
+		this.dataDict.delete(scsId);
+		return true;
+	}
+
+	clearParam() {
+		this.isAvailableServiceID.clear();
+		this.dataDict.clear();
+		return true;
+	}
+
+	async txPacket() {
+		if (this.isAvailableServiceID.size === 0) {
+			return COMM_NOT_AVAILABLE;
+		}
+
+		const paramLength = this.makeParam();
+		return await this.ph.syncReadTx(
+			this.port,
+			this.startAddress,
+			this.dataLength,
+			this.param,
+			paramLength
+		);
+	}
+
+	async rxPacket() {
+		let result = COMM_RX_FAIL;
+
+		if (this.isAvailableServiceID.size === 0) {
+			return COMM_NOT_AVAILABLE;
+		}
+
+		// Set all servos' data as invalid
+		for (const id of this.isAvailableServiceID) {
+			this.dataDict.set(id, new Array(this.dataLength).fill(0));
+		}
+
+		const [rxpacket, rxResult] = await this.ph.rxPacket(this.port);
+		if (rxResult !== COMM_SUCCESS || !rxpacket || rxpacket.length === 0) {
+			return rxResult;
+		}
+
+		// More tolerant of packets with unexpected values in the PKT_ERROR field
+		// Don't require INST_STATUS to be exactly 0x55
+		debugLog(
+			`GroupSyncRead rxPacket: ID=${rxpacket[PKT_ID]}, ERROR/INST field=0x${rxpacket[PKT_ERROR].toString(16)}`
+		);
+
+		// Check if the packet matches any of the available IDs
+		if (!this.isAvailableServiceID.has(rxpacket[PKT_ID])) {
+			debugLog(
+				`Received packet with ID ${rxpacket[PKT_ID]} which is not in the available IDs list`
+			);
+			return COMM_RX_CORRUPT;
+		}
+
+		// Extract data for the matching ID
+		const scsId = rxpacket[PKT_ID];
+		const data = new Array(this.dataLength).fill(0);
+
+		// Extract the parameter data, which should start at PKT_PARAMETER0
+		if (rxpacket.length < PKT_PARAMETER0 + this.dataLength) {
+			debugLog(
+				`Packet too short: expected ${PKT_PARAMETER0 + this.dataLength} bytes, got ${rxpacket.length}`
+			);
+			return COMM_RX_CORRUPT;
+		}
+
+		for (let i = 0; i < this.dataLength; i++) {
+			data[i] = rxpacket[PKT_PARAMETER0 + i];
+		}
+
+		// Update the data dict
+		this.dataDict.set(scsId, data);
+		debugLog(
+			`Updated data for servo ID ${scsId}: ${data.map((b) => "0x" + b.toString(16).padStart(2, "0")).join(" ")}`
+		);
+
+		// Continue receiving until timeout or all data is received
+		if (this.isAvailableServiceID.size > 1) {
+			result = await this.rxPacket();
+		} else {
+			result = COMM_SUCCESS;
+		}
+
+		return result;
+	}
+
+	async txRxPacket() {
+		try {
+			// First check if port is being used
+			if (this.port.isUsing) {
+				debugLog("Port is busy, cannot start sync read operation");
+				return COMM_PORT_BUSY;
+			}
+
+			// Start the transmission
+			debugLog("Starting sync read TX/RX operation...");
+			let result = await this.txPacket();
+			if (result !== COMM_SUCCESS) {
+				debugLog(`Sync read TX failed with result: ${result}`);
+				return result;
+			}
+
+			// Get a single response with a standard timeout
+			debugLog(`Attempting to receive a response...`);
+
+			// Receive a single response
+			result = await this.rxPacket();
+
+			// Release port
+			this.port.isUsing = false;
+
+			return result;
+		} catch (error) {
+			console.error("Exception in GroupSyncRead txRxPacket:", error);
+			// Make sure port is released
+			this.port.isUsing = false;
+			return COMM_RX_FAIL;
+		}
+	}
+
+	isAvailable(scsId, address, dataLength) {
+		if (!this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		const startAddr = this.startAddress;
+		const endAddr = startAddr + this.dataLength - 1;
+
+		const reqStartAddr = address;
+		const reqEndAddr = reqStartAddr + dataLength - 1;
+
+		if (reqStartAddr < startAddr || reqEndAddr > endAddr) {
+			return false;
+		}
+
+		const data = this.dataDict.get(scsId);
+		if (!data || data.length === 0) {
+			return false;
+		}
+
+		return true;
+	}
+
+	getData(scsId, address, dataLength) {
+		if (!this.isAvailable(scsId, address, dataLength)) {
+			return 0;
+		}
+
+		const startAddr = this.startAddress;
+		const data = this.dataDict.get(scsId);
+
+		// Calculate data offset
+		const dataOffset = address - startAddr;
+
+		// Combine bytes according to dataLength
+		switch (dataLength) {
+			case 1:
+				return data[dataOffset];
+			case 2:
+				return SCS_MAKEWORD(data[dataOffset], data[dataOffset + 1]);
+			case 4:
+				return SCS_MAKEDWORD(
+					SCS_MAKEWORD(data[dataOffset], data[dataOffset + 1]),
+					SCS_MAKEWORD(data[dataOffset + 2], data[dataOffset + 3])
+				);
+			default:
+				return 0;
+		}
+	}
+}
+
+/**
+ * GroupSyncWrite class
+ * - This class is used to write multiple servos with the same control table address at once
+ */
+export class GroupSyncWrite {
+	constructor(port, ph, startAddress, dataLength) {
+		this.port = port;
+		this.ph = ph;
+		this.startAddress = startAddress;
+		this.dataLength = dataLength;
+
+		this.isAvailableServiceID = new Set();
+		this.dataDict = new Map();
+		this.param = [];
+		this.clearParam();
+	}
+
+	makeParam() {
+		this.param = [];
+		for (const id of this.isAvailableServiceID) {
+			// Add ID to parameter
+			this.param.push(id);
+
+			// Add data to parameter
+			const data = this.dataDict.get(id);
+			for (let i = 0; i < this.dataLength; i++) {
+				this.param.push(data[i]);
+			}
+		}
+		return this.param.length;
+	}
+
+	addParam(scsId, data) {
+		if (this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		if (data.length !== this.dataLength) {
+			console.error(
+				`Data length (${data.length}) doesn't match required length (${this.dataLength})`
+			);
+			return false;
+		}
+
+		this.isAvailableServiceID.add(scsId);
+		this.dataDict.set(scsId, data);
+		return true;
+	}
+
+	removeParam(scsId) {
+		if (!this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		this.isAvailableServiceID.delete(scsId);
+		this.dataDict.delete(scsId);
+		return true;
+	}
+
+	changeParam(scsId, data) {
+		if (!this.isAvailableServiceID.has(scsId)) {
+			return false;
+		}
+
+		if (data.length !== this.dataLength) {
+			console.error(
+				`Data length (${data.length}) doesn't match required length (${this.dataLength})`
+			);
+			return false;
+		}
+
+		this.dataDict.set(scsId, data);
+		return true;
+	}
+
+	clearParam() {
+		this.isAvailableServiceID.clear();
+		this.dataDict.clear();
+		return true;
+	}
+
+	async txPacket() {
+		if (this.isAvailableServiceID.size === 0) {
+			return COMM_NOT_AVAILABLE;
+		}
+
+		const paramLength = this.makeParam();
+		return await this.ph.syncWriteTxOnly(
+			this.port,
+			this.startAddress,
+			this.dataLength,
+			this.param,
+			paramLength
+		);
+	}
+}

packages/feetech.js/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "feetech.js",
+	"version": "0.0.8",
+	"description": "javascript sdk for feetech servos",
+	"main": "index.mjs",
+	"files": [
+		"*.mjs",
+		"*.ts"
+	],
+	"type": "module",
+	"engines": {
+		"node": ">=12.17.0"
+	},
+	"scripts": {
+		"test": "echo \"Error: no test specified\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+	},
+	"keywords": [
+		"feetech",
+		"sdk",
+		"js",
+		"javascript",
+		"sts3215",
+		"3215",
+		"scs",
+		"scs3215",
+		"st3215"
+	],
+	"author": "timqian",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+	},
+	"homepage": "https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+}

packages/feetech.js/scsServoSDK.mjs

@@ -0,0 +1,1205 @@
+import {
+	PortHandler,
+	PacketHandler,
+	COMM_SUCCESS,
+	COMM_RX_TIMEOUT,
+	COMM_RX_CORRUPT,
+	COMM_TX_FAIL,
+	COMM_NOT_AVAILABLE,
+	SCS_LOBYTE,
+	SCS_HIBYTE,
+	SCS_MAKEWORD,
+	GroupSyncRead, // Import GroupSyncRead
+	GroupSyncWrite // Import GroupSyncWrite
+} from "./lowLevelSDK.mjs";
+
+// Import address constants from the correct file
+import {
+	ADDR_SCS_PRESENT_POSITION,
+	ADDR_SCS_GOAL_POSITION,
+	ADDR_SCS_TORQUE_ENABLE,
+	ADDR_SCS_GOAL_ACC,
+	ADDR_SCS_GOAL_SPEED
+} from "./scsservo_constants.mjs";
+
+// Import debug logging function
+import { debugLog } from "./debug.mjs";
+
+// Define constants not present in scsservo_constants.mjs
+const ADDR_SCS_MODE = 33;
+const ADDR_SCS_LOCK = 55;
+const ADDR_SCS_ID = 5; // Address for Servo ID
+const ADDR_SCS_BAUD_RATE = 6; // Address for Baud Rate
+
+// Module-level variables for handlers
+let portHandler = null;
+let packetHandler = null;
+
+/**
+ * Unified Servo SDK with flexible locking control
+ * Supports both locked (respects servo locks) and unlocked (temporary unlock) operations
+ */
+
+/**
+ * Connects to the serial port and initializes handlers.
+ * @param {object} [options] - Connection options.
+ * @param {number} [options.baudRate=1000000] - The baud rate for the serial connection.
+ * @param {number} [options.protocolEnd=0] - The protocol end setting (0 for STS/SMS, 1 for SCS).
+ * @returns {Promise<true>} Resolves with true on successful connection.
+ * @throws {Error} If connection fails or port cannot be opened/selected.
+ */
+export async function connect(options = {}) {
+	if (portHandler && portHandler.isOpen) {
+		debugLog("Already connected to servo system.");
+		return true;
+	}
+
+	const { baudRate = 1000000, protocolEnd = 0 } = options;
+
+	try {
+		portHandler = new PortHandler();
+		const portRequested = await portHandler.requestPort();
+		if (!portRequested) {
+			portHandler = null;
+			throw new Error("Failed to select a serial port.");
+		}
+
+		portHandler.setBaudRate(baudRate);
+		const portOpened = await portHandler.openPort();
+		if (!portOpened) {
+			await portHandler.closePort().catch(console.error);
+			portHandler = null;
+			throw new Error(`Failed to open port at baudrate ${baudRate}.`);
+		}
+
+		packetHandler = new PacketHandler(protocolEnd);
+		debugLog(`Connected to servo system at ${baudRate} baud, protocol end: ${protocolEnd}.`);
+		return true;
+	} catch (err) {
+		console.error("Error during servo connection:", err);
+		if (portHandler) {
+			try {
+				await portHandler.closePort();
+			} catch (closeErr) {
+				console.error("Error closing port after connection failure:", closeErr);
+			}
+		}
+		portHandler = null;
+		packetHandler = null;
+		throw new Error(`Servo connection failed: ${err.message}`);
+	}
+}
+
+/**
+ * Disconnects from the serial port.
+ * @returns {Promise<true>} Resolves with true on successful disconnection.
+ * @throws {Error} If disconnection fails.
+ */
+export async function disconnect() {
+	if (!portHandler || !portHandler.isOpen) {
+		debugLog("Already disconnected from servo system.");
+		return true;
+	}
+
+	try {
+		await portHandler.closePort();
+		portHandler = null;
+		packetHandler = null;
+		debugLog("Disconnected from servo system.");
+		return true;
+	} catch (err) {
+		console.error("Error during servo disconnection:", err);
+		portHandler = null;
+		packetHandler = null;
+		throw new Error(`Servo disconnection failed: ${err.message}`);
+	}
+}
+
+/**
+ * Checks if the SDK is currently connected.
+ * @returns {boolean} True if connected, false otherwise.
+ */
+export function isConnected() {
+	return !!(portHandler && portHandler.isOpen && packetHandler);
+}
+
+/**
+ * Checks if the SDK is connected. Throws an error if not.
+ * @throws {Error} If not connected.
+ */
+function checkConnection() {
+	if (!portHandler || !packetHandler) {
+		throw new Error("Not connected to servo system. Call connect() first.");
+	}
+}
+
+// =============================================================================
+// SERVO LOCKING OPERATIONS
+// =============================================================================
+
+/**
+ * Locks a servo to prevent configuration changes.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, write fails, or an exception occurs.
+ */
+export async function lockServo(servoId) {
+	checkConnection();
+	try {
+		debugLog(`🔒 Locking servo ${servoId}...`);
+		const [result, error] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_LOCK,
+			1
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(
+				`Error locking servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error: ${error}`
+			);
+		}
+		debugLog(`🔒 Servo ${servoId} locked successfully`);
+		return "success";
+	} catch (err) {
+		console.error(`Exception locking servo ${servoId}:`, err);
+		throw new Error(`Failed to lock servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Unlocks a servo to allow configuration changes.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, write fails, or an exception occurs.
+ */
+export async function unlockServo(servoId) {
+	checkConnection();
+	try {
+		debugLog(`🔓 Unlocking servo ${servoId}...`);
+		const [result, error] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_LOCK,
+			0
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(
+				`Error unlocking servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error: ${error}`
+			);
+		}
+		debugLog(`🔓 Servo ${servoId} unlocked successfully`);
+		return "success";
+	} catch (err) {
+		console.error(`Exception unlocking servo ${servoId}:`, err);
+		throw new Error(`Failed to unlock servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Locks multiple servos sequentially.
+ * @param {number[]} servoIds - Array of servo IDs to lock.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If any servo fails to lock.
+ */
+export async function lockServos(servoIds) {
+	checkConnection();
+	debugLog(`🔒 Locking ${servoIds.length} servos: [${servoIds.join(', ')}]`);
+	
+	// Lock servos sequentially to avoid port conflicts
+	for (const servoId of servoIds) {
+		await lockServo(servoId);
+	}
+	
+	debugLog(`🔒 All ${servoIds.length} servos locked successfully`);
+	return "success";
+}
+
+/**
+ * Locks servos for production use by both locking configuration and enabling torque.
+ * This ensures servos are truly locked and controlled by the system.
+ * @param {number[]} servoIds - Array of servo IDs to lock for production.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If any servo fails to lock or enable torque.
+ */
+export async function lockServosForProduction(servoIds) {
+	checkConnection();
+	debugLog(`🔒 Locking ${servoIds.length} servos for production use: [${servoIds.join(', ')}]`);
+	
+	// Lock servos sequentially and enable torque for each
+	for (const servoId of servoIds) {
+		try {
+			debugLog(`🔒 Locking servo ${servoId} for production...`);
+			
+			// 1. Lock the servo configuration
+			const [lockResult, lockError] = await packetHandler.write1ByteTxRx(
+				portHandler,
+				servoId,
+				ADDR_SCS_LOCK,
+				1
+			);
+			
+			if (lockResult !== COMM_SUCCESS) {
+				throw new Error(`Error locking servo ${servoId}: ${packetHandler.getTxRxResult(lockResult)}, Error: ${lockError}`);
+			}
+			
+			// 2. Enable torque to make servo controllable
+			const [torqueResult, torqueError] = await packetHandler.write1ByteTxRx(
+				portHandler,
+				servoId,
+				ADDR_SCS_TORQUE_ENABLE,
+				1
+			);
+			
+			if (torqueResult !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to enable torque for servo ${servoId}: ${packetHandler.getTxRxResult(torqueResult)}, Error: ${torqueError}`);
+				// Don't throw here, locking is more important than torque enable
+			}
+			
+			debugLog(`🔒 Servo ${servoId} locked and torque enabled for production`);
+		} catch (err) {
+			console.error(`Exception locking servo ${servoId} for production:`, err);
+			throw new Error(`Failed to lock servo ${servoId} for production: ${err.message}`);
+		}
+	}
+	
+	debugLog(`🔒 All ${servoIds.length} servos locked for production successfully`);
+	return "success";
+}
+
+/**
+ * Unlocks multiple servos sequentially.
+ * @param {number[]} servoIds - Array of servo IDs to unlock.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If any servo fails to unlock.
+ */
+export async function unlockServos(servoIds) {
+	checkConnection();
+	debugLog(`🔓 Unlocking ${servoIds.length} servos: [${servoIds.join(', ')}]`);
+	
+	// Unlock servos sequentially to avoid port conflicts
+	for (const servoId of servoIds) {
+		await unlockServo(servoId);
+	}
+	
+	debugLog(`🔓 All ${servoIds.length} servos unlocked successfully`);
+	return "success";
+}
+
+/**
+ * Safely unlocks servos for manual movement by unlocking configuration and disabling torque.
+ * This is the safest way to leave servos when disconnecting/cleaning up.
+ * @param {number[]} servoIds - Array of servo IDs to unlock safely.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If any servo fails to unlock or disable torque.
+ */
+export async function unlockServosForManualMovement(servoIds) {
+	checkConnection();
+	debugLog(`🔓 Safely unlocking ${servoIds.length} servos for manual movement: [${servoIds.join(', ')}]`);
+	
+	// Unlock servos sequentially and disable torque for each
+	for (const servoId of servoIds) {
+		try {
+			debugLog(`🔓 Safely unlocking servo ${servoId} for manual movement...`);
+			
+			// 1. Disable torque first (makes servo freely movable)
+			const [torqueResult, torqueError] = await packetHandler.write1ByteTxRx(
+				portHandler,
+				servoId,
+				ADDR_SCS_TORQUE_ENABLE,
+				0
+			);
+			
+			if (torqueResult !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to disable torque for servo ${servoId}: ${packetHandler.getTxRxResult(torqueResult)}, Error: ${torqueError}`);
+				// Continue anyway, unlocking is more important
+			}
+			
+			// 2. Unlock the servo configuration
+			const [unlockResult, unlockError] = await packetHandler.write1ByteTxRx(
+				portHandler,
+				servoId,
+				ADDR_SCS_LOCK,
+				0
+			);
+			
+			if (unlockResult !== COMM_SUCCESS) {
+				throw new Error(`Error unlocking servo ${servoId}: ${packetHandler.getTxRxResult(unlockResult)}, Error: ${unlockError}`);
+			}
+			
+			debugLog(`🔓 Servo ${servoId} safely unlocked - torque disabled and configuration unlocked`);
+		} catch (err) {
+			console.error(`Exception safely unlocking servo ${servoId}:`, err);
+			throw new Error(`Failed to safely unlock servo ${servoId}: ${err.message}`);
+		}
+	}
+	
+	debugLog(`🔓 All ${servoIds.length} servos safely unlocked for manual movement`);
+	return "success";
+}
+
+// =============================================================================
+// READ OPERATIONS (No locking needed)
+// =============================================================================
+
+/**
+ * Reads the current position of a servo.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<number>} Resolves with the position (0-4095).
+ * @throws {Error} If not connected, read fails, or an exception occurs.
+ */
+export async function readPosition(servoId) {
+	checkConnection();
+	try {
+		const [position, result, error] = await packetHandler.read2ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_PRESENT_POSITION
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(
+				`Error reading position from servo ${servoId}: ${packetHandler.getTxRxResult(
+					result
+				)}, Error code: ${error}`
+			);
+		}
+		return position & 0xffff;
+	} catch (err) {
+		console.error(`Exception reading position from servo ${servoId}:`, err);
+		throw new Error(`Exception reading position from servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Reads the current baud rate index of a servo.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<number>} Resolves with the baud rate index (0-7).
+ * @throws {Error} If not connected, read fails, or an exception occurs.
+ */
+export async function readBaudRate(servoId) {
+	checkConnection();
+	try {
+		const [baudIndex, result, error] = await packetHandler.read1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_BAUD_RATE
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(
+				`Error reading baud rate from servo ${servoId}: ${packetHandler.getTxRxResult(
+					result
+				)}, Error code: ${error}`
+			);
+		}
+		return baudIndex;
+	} catch (err) {
+		console.error(`Exception reading baud rate from servo ${servoId}:`, err);
+		throw new Error(`Exception reading baud rate from servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Reads the current operating mode of a servo.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<number>} Resolves with the mode (0 for position, 1 for wheel).
+ * @throws {Error} If not connected, read fails, or an exception occurs.
+ */
+export async function readMode(servoId) {
+	checkConnection();
+	try {
+		const [modeValue, result, error] = await packetHandler.read1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_MODE
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(
+				`Error reading mode from servo ${servoId}: ${packetHandler.getTxRxResult(
+					result
+				)}, Error code: ${error}`
+			);
+		}
+		return modeValue;
+	} catch (err) {
+		console.error(`Exception reading mode from servo ${servoId}:`, err);
+		throw new Error(`Exception reading mode from servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Reads the current position of multiple servos synchronously.
+ * @param {number[]} servoIds - An array of servo IDs (1-252) to read from.
+ * @returns {Promise<Map<number, number>>} Resolves with a Map where keys are servo IDs and values are positions (0-4095).
+ * @throws {Error} If not connected or transmission fails completely.
+ */
+export async function syncReadPositions(servoIds) {
+	checkConnection();
+	if (!Array.isArray(servoIds) || servoIds.length === 0) {
+		debugLog("Sync Read: No servo IDs provided.");
+		return new Map();
+	}
+
+	const startAddress = ADDR_SCS_PRESENT_POSITION;
+	const dataLength = 2;
+	const groupSyncRead = new GroupSyncRead(portHandler, packetHandler, startAddress, dataLength);
+	const positions = new Map();
+	const validIds = [];
+
+	// Add parameters for each valid servo ID
+	servoIds.forEach((id) => {
+		if (id >= 1 && id <= 252) {
+			if (groupSyncRead.addParam(id)) {
+				validIds.push(id);
+			} else {
+				console.warn(`Sync Read: Failed to add param for servo ID ${id} (maybe duplicate or invalid).`);
+			}
+		} else {
+			console.warn(`Sync Read: Invalid servo ID ${id} skipped.`);
+		}
+	});
+
+	if (validIds.length === 0) {
+		debugLog("Sync Read: No valid servo IDs to read.");
+		return new Map();
+	}
+
+	try {
+		let txResult = await groupSyncRead.txPacket();
+		if (txResult !== COMM_SUCCESS) {
+			throw new Error(`Sync Read txPacket failed: ${packetHandler.getTxRxResult(txResult)}`);
+		}
+
+		let rxResult = await groupSyncRead.rxPacket();
+		if (rxResult !== COMM_SUCCESS) {
+			console.warn(`Sync Read rxPacket overall result: ${packetHandler.getTxRxResult(rxResult)}. Checking individual servos.`);
+		}
+
+		const failedIds = [];
+		validIds.forEach((id) => {
+			const isAvailable = groupSyncRead.isAvailable(id, startAddress, dataLength);
+			if (isAvailable) {
+				const position = groupSyncRead.getData(id, startAddress, dataLength);
+				positions.set(id, position & 0xffff);
+			} else {
+				failedIds.push(id);
+			}
+		});
+
+		if (failedIds.length > 0) {
+			console.warn(`Sync Read: Data not available for servo IDs: ${failedIds.join(", ")}. Got ${positions.size}/${validIds.length} servos successfully.`);
+		}
+
+		return positions;
+	} catch (err) {
+		console.error("Exception during syncReadPositions:", err);
+		throw new Error(`Sync Read failed: ${err.message}`);
+	}
+}
+
+// =============================================================================
+// WRITE OPERATIONS - LOCKED MODE (Respects servo locks)
+// =============================================================================
+
+/**
+ * Writes a target position to a servo (respects locks).
+ * Will fail if the servo is locked.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @param {number} position - The target position value (0-4095).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, position is out of range, write fails, or an exception occurs.
+ */
+export async function writePosition(servoId, position) {
+	checkConnection();
+	try {
+		if (position < 0 || position > 4095) {
+			throw new Error(`Invalid position value ${position} for servo ${servoId}. Must be between 0 and 4095.`);
+		}
+		const targetPosition = Math.round(position);
+
+		const [result, error] = await packetHandler.write2ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_GOAL_POSITION,
+			targetPosition
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error writing position to servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error code: ${error}`);
+		}
+		return "success";
+	} catch (err) {
+		console.error(`Exception writing position to servo ${servoId}:`, err);
+		throw new Error(`Failed to write position to servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Enables or disables the torque of a servo (respects locks).
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @param {boolean} enable - True to enable torque, false to disable.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, write fails, or an exception occurs.
+ */
+export async function writeTorqueEnable(servoId, enable) {
+	checkConnection();
+	try {
+		const enableValue = enable ? 1 : 0;
+		const [result, error] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_TORQUE_ENABLE,
+			enableValue
+		);
+
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error setting torque for servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error code: ${error}`);
+		}
+		return "success";
+	} catch (err) {
+		console.error(`Exception setting torque for servo ${servoId}:`, err);
+		throw new Error(`Exception setting torque for servo ${servoId}: ${err.message}`);
+	}
+}
+
+// =============================================================================
+// WRITE OPERATIONS - UNLOCKED MODE (Temporary unlock for operation)
+// =============================================================================
+
+/**
+ * Helper to attempt locking a servo, logging errors without throwing.
+ * @param {number} servoId
+ */
+async function tryLockServo(servoId) {
+	try {
+		await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+	} catch (lockErr) {
+		console.error(`Failed to re-lock servo ${servoId}:`, lockErr);
+	}
+}
+
+/**
+ * Writes a target position to a servo with temporary unlocking.
+ * Temporarily unlocks the servo, writes the position, then locks it back.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @param {number} position - The target position value (0-4095).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, position is out of range, write fails, or an exception occurs.
+ */
+export async function writePositionUnlocked(servoId, position) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		if (position < 0 || position > 4095) {
+			throw new Error(`Invalid position value ${position} for servo ${servoId}. Must be between 0 and 4095.`);
+		}
+		const targetPosition = Math.round(position);
+
+		debugLog(`🔓 Temporarily unlocking servo ${servoId} for position write...`);
+
+		// 1. Unlock servo configuration first
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			debugLog(`Warning: Failed to unlock servo ${servoId}, trying direct write anyway...`);
+		} else {
+		unlocked = true;
+		}
+
+		// 2. Write the position
+		const [result, error] = await packetHandler.write2ByteTxRx(portHandler, servoId, ADDR_SCS_GOAL_POSITION, targetPosition);
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error writing position to servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error code: ${error}`);
+		}
+
+		// 3. Lock servo configuration back
+		if (unlocked) {
+			const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+		if (resLock !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to re-lock servo ${servoId} after position write: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+			} else {
+				unlocked = false;
+			}
+		}
+
+		return "success";
+	} catch (err) {
+		console.error(`Exception writing position to servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Failed to write position to servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Writes a target position and disables torque for manual movement.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @param {number} position - The target position value (0-4095).
+ * @param {number} waitTimeMs - Time to wait for servo to reach position (milliseconds).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, position is out of range, write fails, or an exception occurs.
+ */
+export async function writePositionAndDisableTorque(servoId, position, waitTimeMs = 1500) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		if (position < 0 || position > 4095) {
+			throw new Error(`Invalid position value ${position} for servo ${servoId}. Must be between 0 and 4095.`);
+		}
+		const targetPosition = Math.round(position);
+
+		debugLog(`🔓 Moving servo ${servoId} to position ${targetPosition}, waiting ${waitTimeMs}ms, then disabling torque...`);
+
+		// 1. Unlock servo configuration first
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			debugLog(`Warning: Failed to unlock servo ${servoId}, trying direct write anyway...`);
+		} else {
+		unlocked = true;
+		}
+
+		// 2. Enable torque first
+		const [torqueEnableResult, torqueEnableError] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_TORQUE_ENABLE, 1);
+		if (torqueEnableResult !== COMM_SUCCESS) {
+			console.warn(`Warning: Failed to enable torque for servo ${servoId}: ${packetHandler.getTxRxResult(torqueEnableResult)}, Error: ${torqueEnableError}`);
+		} else {
+			debugLog(`✅ Torque enabled for servo ${servoId}`);
+		}
+
+		// 3. Write the position
+		const [result, error] = await packetHandler.write2ByteTxRx(portHandler, servoId, ADDR_SCS_GOAL_POSITION, targetPosition);
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error writing position to servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error code: ${error}`);
+		}
+
+		// 4. Wait for servo to reach position
+		debugLog(`⏳ Waiting ${waitTimeMs}ms for servo ${servoId} to reach position ${targetPosition}...`);
+		await new Promise(resolve => setTimeout(resolve, waitTimeMs));
+
+		// 5. Disable torque
+		const [torqueResult, torqueError] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_TORQUE_ENABLE, 0);
+		if (torqueResult !== COMM_SUCCESS) {
+			console.warn(`Warning: Failed to disable torque for servo ${servoId}: ${packetHandler.getTxRxResult(torqueResult)}, Error: ${torqueError}`);
+		} else {
+			debugLog(`✅ Torque disabled for servo ${servoId} - now movable by hand`);
+		}
+
+		// 6. Lock servo configuration back
+		if (unlocked) {
+			const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+		if (resLock !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to re-lock servo ${servoId} after position write: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+			} else {
+				unlocked = false;
+			}
+		}
+
+		return "success";
+	} catch (err) {
+		console.error(`Exception writing position and disabling torque for servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Failed to write position and disable torque for servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Enables or disables the torque of a servo with temporary unlocking.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @param {boolean} enable - True to enable torque, false to disable.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, write fails, or an exception occurs.
+ */
+export async function writeTorqueEnableUnlocked(servoId, enable) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		const enableValue = enable ? 1 : 0;
+		
+		debugLog(`🔓 Temporarily unlocking servo ${servoId} for torque enable write...`);
+
+		// 1. Unlock servo configuration first
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			debugLog(`Warning: Failed to unlock servo ${servoId}, trying direct write anyway...`);
+		} else {
+			unlocked = true;
+		}
+
+		// 2. Write the torque enable
+		const [result, error] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_TORQUE_ENABLE, enableValue);
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error setting torque for servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error code: ${error}`);
+		}
+
+		// 3. Lock servo configuration back
+		if (unlocked) {
+			const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+			if (resLock !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to re-lock servo ${servoId} after torque enable write: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+			} else {
+				unlocked = false;
+			}
+		}
+
+		return "success";
+	} catch (err) {
+		console.error(`Exception setting torque for servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Exception setting torque for servo ${servoId}: ${err.message}`);
+	}
+}
+
+// =============================================================================
+// SYNC WRITE OPERATIONS
+// =============================================================================
+
+/**
+ * Writes target positions to multiple servos synchronously.
+ * @param {Map<number, number> | object} servoPositions - A Map or object where keys are servo IDs (1-252) and values are target positions (0-4095).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, any position is out of range, transmission fails, or an exception occurs.
+ */
+export async function syncWritePositions(servoPositions) {
+	checkConnection();
+
+	const groupSyncWrite = new GroupSyncWrite(portHandler, packetHandler, ADDR_SCS_GOAL_POSITION, 2);
+	let paramAdded = false;
+
+	const entries = servoPositions instanceof Map ? servoPositions.entries() : Object.entries(servoPositions);
+
+	for (const [idStr, position] of entries) {
+		const servoId = parseInt(idStr, 10);
+		if (isNaN(servoId) || servoId < 1 || servoId > 252) {
+			throw new Error(`Invalid servo ID "${idStr}" in syncWritePositions.`);
+		}
+		if (position < 0 || position > 4095) {
+			throw new Error(`Invalid position value ${position} for servo ${servoId} in syncWritePositions. Must be between 0 and 4095.`);
+		}
+		const targetPosition = Math.round(position);
+		const data = [SCS_LOBYTE(targetPosition), SCS_HIBYTE(targetPosition)];
+
+		if (groupSyncWrite.addParam(servoId, data)) {
+			paramAdded = true;
+		} else {
+			console.warn(`Failed to add servo ${servoId} to sync write group (possibly duplicate).`);
+		}
+	}
+
+	if (!paramAdded) {
+		debugLog("Sync Write: No valid servo positions provided or added.");
+		return "success";
+	}
+
+	try {
+		const result = await groupSyncWrite.txPacket();
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Sync Write txPacket failed: ${packetHandler.getTxRxResult(result)}`);
+		}
+		return "success";
+	} catch (err) {
+		console.error("Exception during syncWritePositions:", err);
+		throw new Error(`Sync Write failed: ${err.message}`);
+	}
+}
+
+/**
+ * Writes a target speed for a servo in wheel mode.
+ * @param {number} servoId - The ID of the servo
+ * @param {number} speed - The target speed value (-10000 to 10000). Negative values indicate reverse direction. 0 stops the wheel.
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, either write fails, or an exception occurs.
+ */
+export async function writeWheelSpeed(servoId, speed) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		const clampedSpeed = Math.max(-10000, Math.min(10000, Math.round(speed)));
+		let speedValue = Math.abs(clampedSpeed) & 0x7fff;
+
+		if (clampedSpeed < 0) {
+			speedValue |= 0x8000;
+		}
+
+		debugLog(`Temporarily unlocking servo ${servoId} for wheel speed write...`);
+
+		// 1. Unlock servo configuration first
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			debugLog(`Warning: Failed to unlock servo ${servoId}, trying direct write anyway...`);
+			} else {
+			unlocked = true;
+		}
+
+		// 2. Write the speed
+		const [result, error] = await packetHandler.write2ByteTxRx(portHandler, servoId, ADDR_SCS_GOAL_SPEED, speedValue);
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Error writing wheel speed to servo ${servoId}: ${packetHandler.getTxRxResult(result)}, Error: ${error}`);
+		}
+
+		// 3. Lock servo configuration back
+		if (unlocked) {
+			const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+			if (resLock !== COMM_SUCCESS) {
+				console.warn(`Warning: Failed to re-lock servo ${servoId} after wheel speed write: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+			} else {
+				unlocked = false;
+			}
+		}
+
+		return "success";
+	} catch (err) {
+		console.error(`Exception writing wheel speed to servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Exception writing wheel speed to servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Writes target speeds to multiple servos in wheel mode synchronously.
+ * @param {Map<number, number> | object} servoSpeeds - A Map or object where keys are servo IDs (1-252) and values are target speeds (-10000 to 10000).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, any speed is out of range, transmission fails, or an exception occurs.
+ */
+export async function syncWriteWheelSpeed(servoSpeeds) {
+	checkConnection();
+
+	const groupSyncWrite = new GroupSyncWrite(
+		portHandler,
+		packetHandler,
+		ADDR_SCS_GOAL_SPEED,
+		2 // Data length for speed (2 bytes)
+	);
+	let paramAdded = false;
+
+	const entries = servoSpeeds instanceof Map ? servoSpeeds.entries() : Object.entries(servoSpeeds);
+
+	// Second pass: Add valid parameters
+	for (const [idStr, speed] of entries) {
+		const servoId = parseInt(idStr, 10); // Already validated
+
+		if (isNaN(servoId) || servoId < 1 || servoId > 252) {
+			throw new Error(`Invalid servo ID "${idStr}" in syncWriteWheelSpeed.`);
+		}
+		if (speed < -10000 || speed > 10000) {
+			throw new Error(
+				`Invalid speed value ${speed} for servo ${servoId} in syncWriteWheelSpeed. Must be between -10000 and 10000.`
+			);
+		}
+
+		const clampedSpeed = Math.max(-10000, Math.min(10000, Math.round(speed))); // Ensure integer, already validated range
+		let speedValue = Math.abs(clampedSpeed) & 0x7fff; // Get absolute value, ensure within 15 bits
+
+		// Set the direction bit (MSB of the 16-bit value) if speed is negative
+		if (clampedSpeed < 0) {
+			speedValue |= 0x8000; // Set the 16th bit for reverse direction
+		}
+
+		const data = [SCS_LOBYTE(speedValue), SCS_HIBYTE(speedValue)];
+
+		if (groupSyncWrite.addParam(servoId, data)) {
+			paramAdded = true;
+		} else {
+			// This should ideally not happen if IDs are unique, but handle defensively
+			console.warn(
+				`Failed to add servo ${servoId} to sync write speed group (possibly duplicate).`
+			);
+		}
+	}
+
+	if (!paramAdded) {
+		debugLog("Sync Write Speed: No valid servo speeds provided or added.");
+		return "success"; // Nothing to write is considered success
+	}
+
+	try {
+		// Send the Sync Write instruction
+		const result = await groupSyncWrite.txPacket();
+		if (result !== COMM_SUCCESS) {
+			throw new Error(`Sync Write Speed txPacket failed: ${packetHandler.getTxRxResult(result)}`);
+		}
+		return "success";
+	} catch (err) {
+		console.error("Exception during syncWriteWheelSpeed:", err);
+		// Re-throw the original error or a new one wrapping it
+		throw new Error(`Sync Write Speed failed: ${err.message}`);
+	}
+}
+
+/**
+ * Sets the Baud Rate of a servo.
+ * NOTE: After changing the baud rate, you might need to disconnect and reconnect
+ *       at the new baud rate to communicate with the servo further.
+ * @param {number} servoId - The current ID of the servo to configure (1-252).
+ * @param {number} baudRateIndex - The index representing the new baud rate (0-7).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, input is invalid, any step fails, or an exception occurs.
+ */
+export async function setBaudRate(servoId, baudRateIndex) {
+	checkConnection();
+
+	// Validate inputs
+	if (servoId < 1 || servoId > 252) {
+		throw new Error(`Invalid servo ID provided: ${servoId}. Must be between 1 and 252.`);
+	}
+	if (baudRateIndex < 0 || baudRateIndex > 7) {
+		throw new Error(`Invalid baudRateIndex: ${baudRateIndex}. Must be between 0 and 7.`);
+	}
+
+	let unlocked = false;
+	try {
+		debugLog(`Setting baud rate for servo ${servoId}: Index=${baudRateIndex}`);
+
+		// 1. Unlock servo configuration
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_LOCK,
+			0 // 0 to unlock
+		);
+		if (resUnlock !== COMM_SUCCESS) {
+			throw new Error(
+				`Failed to unlock servo ${servoId}: ${packetHandler.getTxRxResult(
+					resUnlock
+				)}, Error: ${errUnlock}`
+			);
+		}
+		unlocked = true;
+
+		// 2. Write new Baud Rate index
+		const [resBaud, errBaud] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_BAUD_RATE,
+			baudRateIndex
+		);
+		if (resBaud !== COMM_SUCCESS) {
+			throw new Error(
+				`Failed to write baud rate index ${baudRateIndex} to servo ${servoId}: ${packetHandler.getTxRxResult(
+					resBaud
+				)}, Error: ${errBaud}`
+			);
+		}
+
+		// 3. Lock servo configuration
+		const [resLock, errLock] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			servoId,
+			ADDR_SCS_LOCK,
+			1
+		);
+		if (resLock !== COMM_SUCCESS) {
+			throw new Error(
+				`Failed to lock servo ${servoId} after setting baud rate: ${packetHandler.getTxRxResult(
+					resLock
+				)}, Error: ${errLock}.`
+			);
+		}
+		unlocked = false; // Successfully locked
+
+		debugLog(
+			`Successfully set baud rate for servo ${servoId}. Index: ${baudRateIndex}. Remember to potentially reconnect with the new baud rate.`
+		);
+		return "success";
+	} catch (err) {
+		console.error(`Exception during setBaudRate for servo ID ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Failed to set baud rate for servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Sets the ID of a servo.
+ * NOTE: Changing the ID requires using the new ID for subsequent commands.
+ * @param {number} currentServoId - The current ID of the servo to configure (1-252).
+ * @param {number} newServoId - The new ID to set for the servo (1-252).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, input is invalid, any step fails, or an exception occurs.
+ */
+export async function setServoId(currentServoId, newServoId) {
+	checkConnection();
+
+	// Validate inputs
+	if (currentServoId < 1 || currentServoId > 252 || newServoId < 1 || newServoId > 252) {
+		throw new Error(
+			`Invalid servo ID provided. Current: ${currentServoId}, New: ${newServoId}. Must be between 1 and 252.`
+		);
+	}
+
+	if (currentServoId === newServoId) {
+		debugLog(`Servo ID is already ${newServoId}. No change needed.`);
+		return "success";
+	}
+
+	let unlocked = false;
+	let idWritten = false;
+	try {
+		debugLog(`Setting servo ID: From ${currentServoId} to ${newServoId}`);
+
+		// 1. Unlock servo configuration (using current ID)
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			currentServoId,
+			ADDR_SCS_LOCK,
+			0 // 0 to unlock
+		);
+		if (resUnlock !== COMM_SUCCESS) {
+			throw new Error(
+				`Failed to unlock servo ${currentServoId}: ${packetHandler.getTxRxResult(
+					resUnlock
+				)}, Error: ${errUnlock}`
+			);
+		}
+		unlocked = true;
+
+		// 2. Write new Servo ID (using current ID)
+		const [resId, errId] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			currentServoId,
+			ADDR_SCS_ID,
+			newServoId
+		);
+		if (resId !== COMM_SUCCESS) {
+			throw new Error(
+				`Failed to write new ID ${newServoId} to servo ${currentServoId}: ${packetHandler.getTxRxResult(
+					resId
+				)}, Error: ${errId}`
+			);
+		}
+		idWritten = true;
+
+		// 3. Lock servo configuration (using NEW ID)
+		const [resLock, errLock] = await packetHandler.write1ByteTxRx(
+			portHandler,
+			newServoId, // Use NEW ID here
+			ADDR_SCS_LOCK,
+			1 // 1 to lock
+		);
+		if (resLock !== COMM_SUCCESS) {
+			// ID was likely changed, but lock failed. Critical state.
+			throw new Error(
+				`Failed to lock servo with new ID ${newServoId}: ${packetHandler.getTxRxResult(
+					resLock
+				)}, Error: ${errLock}. Configuration might be incomplete.`
+			);
+		}
+		unlocked = false; // Successfully locked with new ID
+
+		debugLog(
+			`Successfully set servo ID from ${currentServoId} to ${newServoId}. Remember to use the new ID for future commands.`
+		);
+		return "success";
+	} catch (err) {
+		console.error(`Exception during setServoId for current ID ${currentServoId}:`, err);
+		if (unlocked) {
+			// If unlock succeeded but subsequent steps failed, attempt to re-lock.
+			// If ID write failed, use current ID. If ID write succeeded but lock failed, use new ID.
+			const idToLock = idWritten ? newServoId : currentServoId;
+			console.warn(`Attempting to re-lock servo using ID ${idToLock}...`);
+			await tryLockServo(idToLock);
+		}
+		throw new Error(
+			`Failed to set servo ID from ${currentServoId} to ${newServoId}: ${err.message}`
+		);
+	}
+}
+
+// =============================================================================
+// LEGACY COMPATIBILITY FUNCTIONS (for backward compatibility)
+// =============================================================================
+
+/**
+ * Sets a servo to wheel mode (continuous rotation) with unlocking.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, any step fails, or an exception occurs.
+ */
+export async function setWheelMode(servoId) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		debugLog(`Setting servo ${servoId} to wheel mode...`);
+
+		// 1. Unlock servo configuration
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			throw new Error(`Failed to unlock servo ${servoId}: ${packetHandler.getTxRxResult(resUnlock)}, Error: ${errUnlock}`);
+		}
+		unlocked = true;
+
+		// 2. Set mode to 1 (Wheel/Speed mode)
+		const [resMode, errMode] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_MODE, 1);
+		if (resMode !== COMM_SUCCESS) {
+			throw new Error(`Failed to set wheel mode for servo ${servoId}: ${packetHandler.getTxRxResult(resMode)}, Error: ${errMode}`);
+		}
+
+		// 3. Lock servo configuration
+		const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+		if (resLock !== COMM_SUCCESS) {
+			throw new Error(`Failed to lock servo ${servoId} after setting mode: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+		}
+		unlocked = false;
+
+		debugLog(`Successfully set servo ${servoId} to wheel mode.`);
+		return "success";
+	} catch (err) {
+		console.error(`Exception setting wheel mode for servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Failed to set wheel mode for servo ${servoId}: ${err.message}`);
+	}
+}
+
+/**
+ * Sets a servo back to position control mode from wheel mode.
+ * @param {number} servoId - The ID of the servo (1-252).
+ * @returns {Promise<"success">} Resolves with "success".
+ * @throws {Error} If not connected, any step fails, or an exception occurs.
+ */
+export async function setPositionMode(servoId) {
+	checkConnection();
+	let unlocked = false;
+	try {
+		debugLog(`Setting servo ${servoId} back to position mode...`);
+
+		// 1. Unlock servo configuration
+		const [resUnlock, errUnlock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 0);
+		if (resUnlock !== COMM_SUCCESS) {
+			throw new Error(`Failed to unlock servo ${servoId}: ${packetHandler.getTxRxResult(resUnlock)}, Error: ${errUnlock}`);
+		}
+		unlocked = true;
+
+		// 2. Set mode to 0 (Position/Servo mode)
+		const [resMode, errMode] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_MODE, 0);
+		if (resMode !== COMM_SUCCESS) {
+			throw new Error(`Failed to set position mode for servo ${servoId}: ${packetHandler.getTxRxResult(resMode)}, Error: ${errMode}`);
+		}
+
+		// 3. Lock servo configuration
+		const [resLock, errLock] = await packetHandler.write1ByteTxRx(portHandler, servoId, ADDR_SCS_LOCK, 1);
+		if (resLock !== COMM_SUCCESS) {
+			throw new Error(`Failed to lock servo ${servoId} after setting mode: ${packetHandler.getTxRxResult(resLock)}, Error: ${errLock}`);
+		}
+		unlocked = false;
+
+		debugLog(`Successfully set servo ${servoId} back to position mode.`);
+		return "success";
+	} catch (err) {
+		console.error(`Exception setting position mode for servo ${servoId}:`, err);
+		if (unlocked) {
+			await tryLockServo(servoId);
+		}
+		throw new Error(`Failed to set position mode for servo ${servoId}: ${err.message}`);
+	}
+}

packages/feetech.js/scsservo_constants.mjs

@@ -0,0 +1,53 @@
+// Constants for FeetTech SCS servos
+
+// Constants
+export const BROADCAST_ID = 0xfe; // 254
+export const MAX_ID = 0xfc; // 252
+
+// Protocol instructions
+export const INST_PING = 1;
+export const INST_READ = 2;
+export const INST_WRITE = 3;
+export const INST_REG_WRITE = 4;
+export const INST_ACTION = 5;
+export const INST_SYNC_WRITE = 131; // 0x83
+export const INST_SYNC_READ = 130; // 0x82
+export const INST_STATUS = 85; // 0x55, status packet instruction (0x55)
+
+// Communication results
+export const COMM_SUCCESS = 0; // tx or rx packet communication success
+export const COMM_PORT_BUSY = -1; // Port is busy (in use)
+export const COMM_TX_FAIL = -2; // Failed transmit instruction packet
+export const COMM_RX_FAIL = -3; // Failed get status packet
+export const COMM_TX_ERROR = -4; // Incorrect instruction packet
+export const COMM_RX_WAITING = -5; // Now receiving status packet
+export const COMM_RX_TIMEOUT = -6; // There is no status packet
+export const COMM_RX_CORRUPT = -7; // Incorrect status packet
+export const COMM_NOT_AVAILABLE = -9;
+
+// Packet constants
+export const TXPACKET_MAX_LEN = 250;
+export const RXPACKET_MAX_LEN = 250;
+
+// Protocol Packet positions
+export const PKT_HEADER0 = 0;
+export const PKT_HEADER1 = 1;
+export const PKT_ID = 2;
+export const PKT_LENGTH = 3;
+export const PKT_INSTRUCTION = 4;
+export const PKT_ERROR = 4;
+export const PKT_PARAMETER0 = 5;
+
+// Protocol Error bits
+export const ERRBIT_VOLTAGE = 1;
+export const ERRBIT_ANGLE = 2;
+export const ERRBIT_OVERHEAT = 4;
+export const ERRBIT_OVERELE = 8;
+export const ERRBIT_OVERLOAD = 32;
+
+// Control table addresses (SCS servos)
+export const ADDR_SCS_TORQUE_ENABLE = 40;
+export const ADDR_SCS_GOAL_ACC = 41;
+export const ADDR_SCS_GOAL_POSITION = 42;
+export const ADDR_SCS_GOAL_SPEED = 46;
+export const ADDR_SCS_PRESENT_POSITION = 56;

packages/feetech.js/test.html

@@ -0,0 +1,770 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Feetech Servo Test</title>
+		<style>
+			body {
+				font-family: sans-serif;
+				line-height: 1.6;
+				padding: 20px;
+			}
+			.container {
+				max-width: 800px;
+				margin: auto;
+			}
+			.section {
+				border: 1px solid #ccc;
+				padding: 15px;
+				margin-bottom: 20px;
+				border-radius: 5px;
+			}
+			h2 {
+				margin-top: 0;
+			}
+			label {
+				display: inline-block;
+				min-width: 100px;
+				margin-bottom: 5px;
+			}
+			input[type="number"],
+			input[type="text"] {
+				width: 100px;
+				padding: 5px;
+				margin-right: 10px;
+				margin-bottom: 10px;
+			}
+			button {
+				padding: 8px 15px;
+				margin-right: 10px;
+				cursor: pointer;
+			}
+			pre {
+				background-color: #f4f4f4;
+				padding: 10px;
+				border: 1px solid #ddd;
+				border-radius: 3px;
+				white-space: pre-wrap;
+				word-wrap: break-word;
+			}
+			.status {
+				font-weight: bold;
+			}
+			.success {
+				color: green;
+			}
+			.error {
+				color: red;
+			}
+			.log-area {
+				margin-top: 10px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="container">
+			<h1>Feetech Servo Test Page</h1>
+
+			<details class="section">
+				<summary>Key Concepts</summary>
+				<p>Understanding these parameters is crucial for controlling Feetech servos:</p>
+				<ul>
+					<li>
+						<strong>Mode:</strong> Determines the servo's primary function.
+						<ul>
+							<li>
+								<code>Mode 0</code>: Position/Servo Mode. The servo moves to and holds a specific
+								angular position.
+							</li>
+							<li>
+								<code>Mode 1</code>: Wheel/Speed Mode. The servo rotates continuously at a specified
+								speed and direction, like a motor.
+							</li>
+						</ul>
+						Changing the mode requires unlocking, writing the mode value (0 or 1), and locking the
+						configuration.
+					</li>
+					<li>
+						<strong>Position:</strong> In Position Mode (Mode 0), this value represents the target
+						or current angular position of the servo's output shaft.
+						<ul>
+							<li>
+								Range: Typically <code>0</code> to <code>4095</code> (representing a 12-bit
+								resolution).
+							</li>
+							<li>
+								Meaning: Corresponds to the servo's rotational range (e.g., 0-360 degrees or 0-270
+								degrees, depending on the specific servo model). <code>0</code> is one end of the
+								range, <code>4095</code> is the other.
+							</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Speed (Wheel Mode):</strong> In Wheel Mode (Mode 1), this value controls the
+						rotational speed and direction.
+						<ul>
+							<li>
+								Range: Typically <code>-2500</code> to <code>+2500</code>. (Note: Some documentation
+								might mention -1023 to +1023, but the SDK example uses a wider range).
+							</li>
+							<li>
+								Meaning: <code>0</code> stops the wheel. Positive values rotate in one direction
+								(e.g., clockwise), negative values rotate in the opposite direction (e.g.,
+								counter-clockwise). The magnitude determines the speed (larger absolute value means
+								faster rotation).
+							</li>
+							<li>Control Address: <code>ADDR_SCS_GOAL_SPEED</code> (Register 46/47).</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Acceleration:</strong> Controls how quickly the servo changes speed to reach its
+						target position (in Position Mode) or target speed (in Wheel Mode).
+						<ul>
+							<li>Range: Typically <code>0</code> to <code>254</code>.</li>
+							<li>
+								Meaning: Defines the rate of change of speed. The unit is 100 steps/s².
+								<code>0</code> usually means instantaneous acceleration (or minimal delay). Higher
+								values result in slower, smoother acceleration and deceleration. For example, a
+								value of <code>10</code> means the speed changes by 10 * 100 = 1000 steps per
+								second, per second. This helps reduce jerky movements and mechanical stress.
+							</li>
+							<li>Control Address: <code>ADDR_SCS_GOAL_ACC</code> (Register 41).</li>
+						</ul>
+					</li>
+					<li>
+						<strong>Baud Rate:</strong> The speed of communication between the controller and the
+						servo. It must match on both ends. Servos often support multiple baud rates, selectable
+						via an index:
+						<ul>
+							<li>Index 0: 1,000,000 bps</li>
+							<li>Index 1: 500,000 bps</li>
+							<li>Index 2: 250,000 bps</li>
+							<li>Index 3: 128,000 bps</li>
+							<li>Index 4: 115,200 bps</li>
+							<li>Index 5: 76,800 bps</li>
+							<li>Index 6: 57,600 bps</li>
+							<li>Index 7: 38,400 bps</li>
+						</ul>
+					</li>
+				</ul>
+			</details>
+
+			<div class="section">
+				<h2>Connection</h2>
+				<button id="connectBtn">Connect</button>
+				<button id="disconnectBtn">Disconnect</button>
+				<p>Status: <span id="connectionStatus" class="status error">Disconnected</span></p>
+				<label for="baudRate">Baud Rate:</label>
+				<input type="number" id="baudRate" value="1000000" />
+				<label for="protocolEnd">Protocol End (0=STS/SMS, 1=SCS):</label>
+				<input type="number" id="protocolEnd" value="0" min="0" max="1" />
+			</div>
+
+			<div class="section">
+				<h2>Scan Servos</h2>
+				<label for="scanStartId">Start ID:</label>
+				<input type="number" id="scanStartId" value="1" min="1" max="252" />
+				<label for="scanEndId">End ID:</label>
+				<input type="number" id="scanEndId" value="15" min="1" max="252" />
+				<button id="scanServosBtn">Scan</button>
+				<p>Scan Results:</p>
+				<pre id="scanResultsOutput" style="max-height: 200px; overflow-y: auto"></pre>
+				<!-- Added element for results -->
+			</div>
+
+			<div class="section">
+				<h2>Single Servo Control</h2>
+				<label for="servoId">Servo ID:</label>
+				<input type="number" id="servoId" value="1" min="1" max="252" /><br />
+
+				<label for="idWrite">Change servo ID:</label>
+				<input type="number" id="idWrite" value="1" min="1" max="252" />
+				<button id="writeIdBtn">Write</button><br />
+
+				<label for="baudRead">Read Baud Rate:</label>
+				<button id="readBaudBtn">Read</button>
+				<span id="readBaudResult"></span><br />
+
+				<label for="baudWrite">Write Baud Rate Index:</label>
+				<input type="number" id="baudWrite" value="6" min="0" max="7" />
+				<!-- Assuming index 0-7 -->
+				<button id="writeBaudBtn">Write</button><br />
+
+				<label for="positionRead">Read Position:</label>
+				<button id="readPosBtn">Read</button>
+				<span id="readPosResult"></span><br />
+
+				<label for="positionWrite">Write Position:</label>
+				<input type="number" id="positionWrite" value="1000" min="0" max="4095" />
+				<button id="writePosBtn">Write</button><br />
+
+				<label for="torqueEnable">Torque:</label>
+				<button id="torqueEnableBtn">Enable</button>
+				<button id="torqueDisableBtn">Disable</button><br />
+
+				<label for="accelerationWrite">Write Acceleration:</label>
+				<input type="number" id="accelerationWrite" value="50" min="0" max="254" />
+				<button id="writeAccBtn">Write</button><br />
+
+				<label for="wheelMode">Wheel Mode:</label>
+				<button id="setWheelModeBtn">Set Wheel Mode</button>
+				<button id="removeWheelModeBtn">Set Position Mode</button><br />
+
+				<label for="wheelSpeedWrite">Write Wheel Speed:</label>
+				<input type="number" id="wheelSpeedWrite" value="0" min="-2500" max="2500" />
+				<button id="writeWheelSpeedBtn">Write Speed</button>
+			</div>
+
+			<div class="section">
+				<h2>Sync Operations</h2>
+				<label for="syncReadIds">Sync Read IDs (csv):</label>
+				<input type="text" id="syncReadIds" value="1,2,3" style="width: 150px" />
+				<button id="syncReadBtn">Sync Read Positions</button><br />
+
+				<label for="syncWriteData">Sync Write (id:pos,...):</label>
+				<input type="text" id="syncWriteData" value="1:1500,2:2500" style="width: 200px" />
+				<button id="syncWriteBtn">Sync Write Positions</button><br />
+
+				<label for="syncWriteSpeedData">Sync Write Speed (id:speed,...):</label>
+				<input type="text" id="syncWriteSpeedData" value="1:500,2:-1000" style="width: 200px" />
+				<button id="syncWriteSpeedBtn">Sync Write Speeds</button>
+				<!-- New Button -->
+			</div>
+
+			<div class="section">
+				<h2>Log Output</h2>
+				<pre id="logOutput"></pre>
+			</div>
+		</div>
+
+		<script type="module">
+			// Import the scsServoSDK object from index.mjs
+			import { scsServoSDK } from "./index.mjs";
+			// No longer need COMM_SUCCESS etc. here as errors are thrown
+
+			const connectBtn = document.getElementById("connectBtn");
+			const disconnectBtn = document.getElementById("disconnectBtn");
+			const connectionStatus = document.getElementById("connectionStatus");
+			const baudRateInput = document.getElementById("baudRate");
+			const protocolEndInput = document.getElementById("protocolEnd");
+
+			const servoIdInput = document.getElementById("servoId");
+			const readIdBtn = document.getElementById("readIdBtn"); // New
+			const readIdResult = document.getElementById("readIdResult"); // New
+			const idWriteInput = document.getElementById("idWrite"); // New
+			const writeIdBtn = document.getElementById("writeIdBtn"); // New
+			const readBaudBtn = document.getElementById("readBaudBtn"); // New
+			const readBaudResult = document.getElementById("readBaudResult"); // New
+			const baudWriteInput = document.getElementById("baudWrite"); // New
+			const writeBaudBtn = document.getElementById("writeBaudBtn"); // New
+			const readPosBtn = document.getElementById("readPosBtn");
+			const readPosResult = document.getElementById("readPosResult");
+			const positionWriteInput = document.getElementById("positionWrite");
+			const writePosBtn = document.getElementById("writePosBtn");
+			const torqueEnableBtn = document.getElementById("torqueEnableBtn");
+			const torqueDisableBtn = document.getElementById("torqueDisableBtn");
+			const accelerationWriteInput = document.getElementById("accelerationWrite");
+			const writeAccBtn = document.getElementById("writeAccBtn");
+			const setWheelModeBtn = document.getElementById("setWheelModeBtn");
+			const removeWheelModeBtn = document.getElementById("removeWheelModeBtn"); // Get reference to the new button
+			const wheelSpeedWriteInput = document.getElementById("wheelSpeedWrite");
+			const writeWheelSpeedBtn = document.getElementById("writeWheelSpeedBtn");
+
+			const syncReadIdsInput = document.getElementById("syncReadIds");
+			const syncReadBtn = document.getElementById("syncReadBtn");
+			const syncWriteDataInput = document.getElementById("syncWriteData");
+			const syncWriteBtn = document.getElementById("syncWriteBtn");
+			const syncWriteSpeedDataInput = document.getElementById("syncWriteSpeedData"); // New Input
+			const syncWriteSpeedBtn = document.getElementById("syncWriteSpeedBtn"); // New Button
+			const scanServosBtn = document.getElementById("scanServosBtn"); // Get reference to the scan button
+			const scanStartIdInput = document.getElementById("scanStartId"); // Get reference to start ID input
+			const scanEndIdInput = document.getElementById("scanEndId"); // Get reference to end ID input
+			const scanResultsOutput = document.getElementById("scanResultsOutput"); // Get reference to the new results area
+
+			const logOutput = document.getElementById("logOutput");
+
+			let isConnected = false;
+
+			function log(message) {
+				console.log(message);
+				const timestamp = new Date().toLocaleTimeString();
+				logOutput.textContent = `[${timestamp}] ${message}\n` + logOutput.textContent;
+				// Limit log size
+				const lines = logOutput.textContent.split("\n"); // Use '\n' instead of literal newline
+				if (lines.length > 50) {
+					logOutput.textContent = lines.slice(0, 50).join("\n"); // Use '\n' instead of literal newline
+				}
+			}
+
+			function updateConnectionStatus(connected, message) {
+				isConnected = connected;
+				connectionStatus.textContent = message || (connected ? "Connected" : "Disconnected");
+				connectionStatus.className = `status ${connected ? "success" : "error"}`;
+				log(`Connection status: ${connectionStatus.textContent}`);
+			}
+
+			connectBtn.onclick = async () => {
+				log("Attempting to connect...");
+				try {
+					const baudRate = parseInt(baudRateInput.value, 10);
+					const protocolEnd = parseInt(protocolEndInput.value, 10);
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.connect({ baudRate, protocolEnd });
+					updateConnectionStatus(true, "Connected");
+				} catch (err) {
+					updateConnectionStatus(false, `Connection error: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			disconnectBtn.onclick = async () => {
+				log("Attempting to disconnect...");
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.disconnect();
+					updateConnectionStatus(false, "Disconnected"); // Success means disconnected
+				} catch (err) {
+					// Assuming disconnect might fail if already disconnected or other issues
+					updateConnectionStatus(false, `Disconnection error: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			writeIdBtn.onclick = async () => {
+				// New handler
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const currentId = parseInt(servoIdInput.value, 10);
+				const newId = parseInt(idWriteInput.value, 10);
+				if (isNaN(newId) || newId < 1 || newId > 252) {
+					log(`Error: Invalid new ID ${newId}. Must be between 1 and 252.`);
+					return;
+				}
+				log(`Writing new ID ${newId} to servo ${currentId}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.setServoId(currentId, newId);
+					log(`Successfully wrote new ID ${newId} to servo (was ${currentId}).`);
+					// IMPORTANT: Update the main ID input to reflect the change
+					servoIdInput.value = newId;
+					log(`Servo ID input field updated to ${newId}.`);
+				} catch (err) {
+					log(`Error writing ID for servo ${currentId}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			readBaudBtn.onclick = async () => {
+				// New handler
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Reading Baud Rate Index for servo ${id}...`);
+				readBaudResult.textContent = "Reading...";
+				try {
+					// Use scsServoSDK - returns value directly or throws
+					const baudRateIndex = await scsServoSDK.readBaudRate(id);
+					readBaudResult.textContent = `Baud Index: ${baudRateIndex}`;
+					log(`Servo ${id} Baud Rate Index: ${baudRateIndex}`);
+				} catch (err) {
+					readBaudResult.textContent = `Error: ${err.message}`;
+					log(`Error reading Baud Rate Index for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			writeBaudBtn.onclick = async () => {
+				// New handler
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				const newBaudIndex = parseInt(baudWriteInput.value, 10);
+				if (isNaN(newBaudIndex) || newBaudIndex < 0 || newBaudIndex > 7) {
+					// Adjust max index if needed
+					log(`Error: Invalid new Baud Rate Index ${newBaudIndex}. Check valid range.`);
+					return;
+				}
+				log(`Writing new Baud Rate Index ${newBaudIndex} to servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.setBaudRate(id, newBaudIndex);
+					log(`Successfully wrote new Baud Rate Index ${newBaudIndex} to servo ${id}.`);
+					log(
+						`IMPORTANT: You may need to disconnect and reconnect with the new baud rate if it differs from the current connection baud rate.`
+					);
+				} catch (err) {
+					log(`Error writing Baud Rate Index for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			readPosBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Reading position for servo ${id}...`);
+				readPosResult.textContent = "Reading...";
+				try {
+					// Use scsServoSDK - returns value directly or throws
+					const position = await scsServoSDK.readPosition(id);
+					readPosResult.textContent = `Position: ${position}`;
+					log(`Servo ${id} position: ${position}`);
+				} catch (err) {
+					readPosResult.textContent = `Error: ${err.message}`;
+					log(`Error reading position for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			writePosBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				const pos = parseInt(positionWriteInput.value, 10);
+				log(`Writing position ${pos} to servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.writePosition(id, pos);
+					log(`Successfully wrote position ${pos} to servo ${id}.`);
+				} catch (err) {
+					log(`Error writing position for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			torqueEnableBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Enabling torque for servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.writeTorqueEnable(id, true);
+					log(`Successfully enabled torque for servo ${id}.`);
+				} catch (err) {
+					log(`Error enabling torque for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			torqueDisableBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Disabling torque for servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.writeTorqueEnable(id, false);
+					log(`Successfully disabled torque for servo ${id}.`);
+				} catch (err) {
+					log(`Error disabling torque for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			writeAccBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				const acc = parseInt(accelerationWriteInput.value, 10);
+				log(`Writing acceleration ${acc} to servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.writeAcceleration(id, acc);
+					log(`Successfully wrote acceleration ${acc} to servo ${id}.`);
+				} catch (err) {
+					log(`Error writing acceleration for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			setWheelModeBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Setting servo ${id} to wheel mode...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.setWheelMode(id);
+					log(`Successfully set servo ${id} to wheel mode.`);
+				} catch (err) {
+					log(`Error setting wheel mode for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			// Add event listener for the new button
+			removeWheelModeBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				log(`Setting servo ${id} back to position mode...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.setPositionMode(id);
+					log(`Successfully set servo ${id} back to position mode.`);
+				} catch (err) {
+					log(`Error setting position mode for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			writeWheelSpeedBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const id = parseInt(servoIdInput.value, 10);
+				const speed = parseInt(wheelSpeedWriteInput.value, 10);
+				log(`Writing wheel speed ${speed} to servo ${id}...`);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.writeWheelSpeed(id, speed);
+					log(`Successfully wrote wheel speed ${speed} to servo ${id}.`);
+				} catch (err) {
+					log(`Error writing wheel speed for servo ${id}: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			syncReadBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const idsString = syncReadIdsInput.value;
+				const ids = idsString
+					.split(",")
+					.map((s) => parseInt(s.trim(), 10))
+					.filter((id) => !isNaN(id) && id > 0 && id < 253);
+				if (ids.length === 0) {
+					log("Sync Read: No valid servo IDs provided.");
+					return;
+				}
+				log(`Sync reading positions for servos: ${ids.join(", ")}...`);
+				try {
+					// Use scsServoSDK - returns Map or throws
+					const positions = await scsServoSDK.syncReadPositions(ids);
+					let logMsg = "Sync Read Successful:\n";
+					positions.forEach((pos, id) => {
+						logMsg += `  Servo ${id}: Position=${pos}\n`;
+					});
+					log(logMsg.trim());
+				} catch (err) {
+					log(`Sync Read Failed: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			syncWriteBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const dataString = syncWriteDataInput.value;
+				const positionMap = new Map();
+				const pairs = dataString.split(",");
+				let validData = false;
+
+				pairs.forEach((pair) => {
+					const parts = pair.split(":");
+					if (parts.length === 2) {
+						const id = parseInt(parts[0].trim(), 10);
+						const pos = parseInt(parts[1].trim(), 10);
+						// Position validation (0-4095)
+						if (!isNaN(id) && id > 0 && id < 253 && !isNaN(pos) && pos >= 0 && pos <= 4095) {
+							positionMap.set(id, pos);
+							validData = true;
+						} else {
+							log(
+								`Sync Write Position: Invalid data pair "${pair}". ID (1-252), Pos (0-4095). Skipping.`
+							);
+						}
+					} else {
+						log(`Sync Write Position: Invalid format "${pair}". Skipping.`);
+					}
+				});
+
+				if (!validData) {
+					log("Sync Write Position: No valid servo position data provided.");
+					return;
+				}
+
+				log(
+					`Sync writing positions: ${Array.from(positionMap.entries())
+						.map(([id, pos]) => `${id}:${pos}`)
+						.join(", ")}...`
+				);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.syncWritePositions(positionMap);
+					log(`Sync write position command sent successfully.`);
+				} catch (err) {
+					log(`Sync Write Position Failed: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			// New handler for Sync Write Speed
+			syncWriteSpeedBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+				const dataString = syncWriteSpeedDataInput.value;
+				const speedMap = new Map();
+				const pairs = dataString.split(",");
+				let validData = false;
+
+				pairs.forEach((pair) => {
+					const parts = pair.split(":");
+					if (parts.length === 2) {
+						const id = parseInt(parts[0].trim(), 10);
+						const speed = parseInt(parts[1].trim(), 10);
+						// Speed validation (-10000 to 10000)
+						if (
+							!isNaN(id) &&
+							id > 0 &&
+							id < 253 &&
+							!isNaN(speed) &&
+							speed >= -10000 &&
+							speed <= 10000
+						) {
+							speedMap.set(id, speed);
+							validData = true;
+						} else {
+							log(
+								`Sync Write Speed: Invalid data pair "${pair}". ID (1-252), Speed (-10000 to 10000). Skipping.`
+							);
+						}
+					} else {
+						log(`Sync Write Speed: Invalid format "${pair}". Skipping.`);
+					}
+				});
+
+				if (!validData) {
+					log("Sync Write Speed: No valid servo speed data provided.");
+					return;
+				}
+
+				log(
+					`Sync writing speeds: ${Array.from(speedMap.entries())
+						.map(([id, speed]) => `${id}:${speed}`)
+						.join(", ")}...`
+				);
+				try {
+					// Use scsServoSDK - throws on error
+					await scsServoSDK.syncWriteWheelSpeed(speedMap);
+					log(`Sync write speed command sent successfully.`);
+				} catch (err) {
+					log(`Sync Write Speed Failed: ${err.message}`);
+					console.error(err);
+				}
+			};
+
+			scanServosBtn.onclick = async () => {
+				if (!isConnected) {
+					log("Error: Not connected");
+					return;
+				}
+
+				const startId = parseInt(scanStartIdInput.value, 10);
+				const endId = parseInt(scanEndIdInput.value, 10);
+
+				if (isNaN(startId) || isNaN(endId) || startId < 1 || endId > 252 || startId > endId) {
+					const errorMsg =
+						"Error: Invalid scan ID range. Please enter values between 1 and 252, with Start ID <= End ID.";
+					log(errorMsg);
+					scanResultsOutput.textContent = errorMsg; // Show error in results area too
+					return;
+				}
+
+				const startMsg = `Starting servo scan (IDs ${startId}-${endId})...`;
+				log(startMsg);
+				scanResultsOutput.textContent = startMsg + "\n"; // Clear and start results area
+				scanServosBtn.disabled = true; // Disable button during scan
+
+				let foundCount = 0;
+
+				for (let id = startId; id <= endId; id++) {
+					let resultMsg = `Scanning ID ${id}... `;
+					try {
+						// Attempt to read position. If it succeeds, the servo exists.
+						// If it throws, the servo likely doesn't exist or there's another issue.
+						const position = await scsServoSDK.readPosition(id);
+						foundCount++;
+
+						// Servo found, now try to read mode and baud rate
+						let mode = "ReadError";
+						let baudRateIndex = "ReadError";
+						try {
+							mode = await scsServoSDK.readMode(id);
+						} catch (modeErr) {
+							log(`  Servo ${id}: Error reading mode: ${modeErr.message}`);
+						}
+						try {
+							baudRateIndex = await scsServoSDK.readBaudRate(id);
+						} catch (baudErr) {
+							log(`  Servo ${id}: Error reading baud rate: ${baudErr.message}`);
+						}
+
+						resultMsg += `FOUND: Pos=${position}, Mode=${mode}, BaudIdx=${baudRateIndex}`;
+						log(
+							`  Servo ${id} FOUND: Position=${position}, Mode=${mode}, BaudIndex=${baudRateIndex}`
+						);
+					} catch (err) {
+						// Check if the error message indicates a timeout or non-response, which is expected for non-existent IDs
+						// This check might need refinement based on the exact error messages thrown by readPosition
+						if (
+							err.message.includes("timeout") ||
+							err.message.includes("No response") ||
+							err.message.includes("failed: RX")
+						) {
+							resultMsg += `No response`;
+							// log(`  Servo ${id}: No response`); // Optional: reduce log noise
+						} else {
+							// Log other unexpected errors
+							resultMsg += `Error: ${err.message}`;
+							log(`  Servo ${id}: Error during scan: ${err.message}`);
+							console.error(`Error scanning servo ${id}:`, err);
+						}
+					}
+					scanResultsOutput.textContent += resultMsg + "\n"; // Append result to the results area
+					scanResultsOutput.scrollTop = scanResultsOutput.scrollHeight; // Auto-scroll
+					// Optional small delay between scans if needed
+					// await new Promise(resolve => setTimeout(resolve, 10));
+				}
+
+				const finishMsg = `Servo scan finished. Found ${foundCount} servo(s).`;
+				log(finishMsg);
+				scanResultsOutput.textContent += finishMsg + "\n"; // Add finish message to results area
+				scanResultsOutput.scrollTop = scanResultsOutput.scrollHeight; // Auto-scroll
+				scanServosBtn.disabled = false; // Re-enable button
+			};
+
+			// Initial log
+			log("Test page loaded. Please connect to a servo controller.");
+</script>
+	</body>
+</html>

src/app.css

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

src/app.d.ts

@@ -0,0 +1,20 @@
+import type { InteractivityProps } from '@threlte/extras'
+
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+	namespace Threlte {
+		interface UserProps extends InteractivityProps {
+			interactivity?: boolean;
+		}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { T } from "@threlte/core";
+	import { PlaneGeometry } from 'three';
+	import { Grid } from '@threlte/extras'
+	const floorGeometry = new PlaneGeometry(20, 20);
+</script>
+
+<T.Mesh 
+	receiveShadow 
+	position.y={0} 
+	rotation.x={-Math.PI / 2}
+	frustumCulled={false}
+>
+	<T is={floorGeometry} />
+	<T.ShadowMaterial 
+		opacity={0.3} 
+		transparent={true}
+		polygonOffset={true}
+		polygonOffsetFactor={1}
+		polygonOffsetUnits={1}
+	/>
+</T.Mesh>
+<Grid/>
+

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { T } from "@threlte/core";
+	import GPU from "./GPU.svelte";
+	import ComputeStatusBillboard from "./status/ComputeStatusBillboard.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
+
+	interface Props {
+		compute: RemoteCompute;
+		onVideoInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
+	}
+
+	let { compute, onVideoInputBoxClick, onRobotInputBoxClick, onRobotOutputBoxClick }: Props = $props();
+
+	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
+	interactivity();
+
+	let isToggled = $state(false);
+
+	function handleClick(event: IntersectionEvent<MouseEvent>) {
+		event.stopPropagation();
+		isToggled = !isToggled;
+	}
+</script>
+
+<T.Group
+	position.x={compute.position.x}
+	position.y={compute.position.y}
+	position.z={compute.position.z}
+	scale={[1, 1, 1]}
+>
+	<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> 

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { remoteComputeManager } from "$lib/elements/compute/RemoteComputeManager.svelte";
+	import AISessionConnectionModal from "@/components/3d/elements/compute/modal/AISessionConnectionModal.svelte";
+	import VideoInputConnectionModal from "@/components/3d/elements/compute/modal/VideoInputConnectionModal.svelte";
+	import RobotInputConnectionModal from "@/components/3d/elements/compute/modal/RobotInputConnectionModal.svelte";
+	import RobotOutputConnectionModal from "@/components/3d/elements/compute/modal/RobotOutputConnectionModal.svelte";
+	import ComputeGridItem from "@/components/3d/elements/compute/ComputeGridItem.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute/RemoteCompute.svelte";
+
+	interface Props {
+		workspaceId: string;
+	}
+	let { workspaceId }: Props = $props();
+
+	let isAISessionModalOpen = $state(false);
+	let isVideoInputModalOpen = $state(false);
+	let isRobotInputModalOpen = $state(false);
+	let isRobotOutputModalOpen = $state(false);
+	let selectedCompute = $state<RemoteCompute | null>(null);
+
+	function handleVideoInputBoxClick(compute: RemoteCompute) {
+		selectedCompute = compute;
+		if (!compute.hasSession) {
+			// If no session exists, open the session creation modal
+			isAISessionModalOpen = true;
+		} else {
+			// If session exists, open video connection modal
+			isVideoInputModalOpen = true;
+		}
+	}
+
+	function handleRobotInputBoxClick(compute: RemoteCompute) {
+		selectedCompute = compute;
+		if (!compute.hasSession) {
+			// If no session exists, open the session creation modal
+			isAISessionModalOpen = true;
+		} else {
+			// If session exists, open robot input connection modal
+			isRobotInputModalOpen = true;
+		}
+	}
+
+	function handleRobotOutputBoxClick(compute: RemoteCompute) {
+		selectedCompute = compute;
+		if (!compute.hasSession) {
+			// If no session exists, open the session creation modal
+			isAISessionModalOpen = true;
+		} else {
+			// If session exists, open robot output connection modal
+			isRobotOutputModalOpen = true;
+		}
+	}
+
+	// Auto-refresh compute statuses periodically
+	onMount(() => {
+		const interval = setInterval(async () => {
+			for (const compute of remoteComputeManager.computes) {
+				if (compute.hasSession) {
+					await remoteComputeManager.getSessionStatus(compute.id);
+				}
+			}
+		}, 5000); // Refresh every 5 seconds
+
+		return () => clearInterval(interval);
+	});
+</script>
+
+{#each remoteComputeManager.computes as compute (compute.id)}
+	<ComputeGridItem
+		{compute}
+		onVideoInputBoxClick={handleVideoInputBoxClick}
+		onRobotInputBoxClick={handleRobotInputBoxClick}
+		onRobotOutputBoxClick={handleRobotOutputBoxClick}
+	/>
+{/each}
+
+{#if selectedCompute}
+	<!-- AI Session Creation Modal -->
+	<AISessionConnectionModal bind:open={isAISessionModalOpen} compute={selectedCompute} {workspaceId} />
+	<!-- Video Input Connection Modal -->
+	<VideoInputConnectionModal bind:open={isVideoInputModalOpen} compute={selectedCompute} {workspaceId} />
+	<!-- Robot Input Connection Modal -->
+	<RobotInputConnectionModal bind:open={isRobotInputModalOpen} compute={selectedCompute} {workspaceId} />
+	<!-- Robot Output Connection Modal -->
+	<RobotOutputConnectionModal bind:open={isRobotOutputModalOpen} compute={selectedCompute} {workspaceId} /> 
+{/if}

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

@@ -0,0 +1,138 @@
+<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 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 {
+		// Transform props
+		position?: [number, number, number];
+		rotation?: [number, number, number];
+		scale?: [number, number, number];
+		rotating?: boolean;
+	}
+
+	// Props with defaults
+	let { position = [0, 0, 0], rotation = [0, 0, 0], scale = [1, 1, 1], rotating = false }: Props = $props();
+
+	// Create the TV frame geometry (outer rounded rectangle)
+	function createTVFrame(
+		tvWidth: number,
+		tvHeight: number,
+		tvDepth: number,
+		tvFrameThickness: number,
+		tvCornerRadius: number
+	) {
+		const shape = new Shape();
+		const x = -tvWidth / 2;
+		const y = -tvHeight / 2;
+		const w = tvWidth;
+		const h = tvHeight;
+		const radius = tvCornerRadius;
+
+		shape.moveTo(x, y + radius);
+		shape.lineTo(x, y + h - radius);
+		shape.quadraticCurveTo(x, y + h, x + radius, y + h);
+		shape.lineTo(x + w - radius, y + h);
+		shape.quadraticCurveTo(x + w, y + h, x + w, y + h - radius);
+		shape.lineTo(x + w, y + radius);
+		shape.quadraticCurveTo(x + w, y, x + w - radius, y);
+		shape.lineTo(x + radius, y);
+		shape.quadraticCurveTo(x, y, x, y + radius);
+
+		// Create hole for screen (inner rectangle)
+		const hole = new Path();
+		const hx = x + tvFrameThickness;
+		const hy = y + tvFrameThickness;
+		const hwidth = w - tvFrameThickness * 2;
+		const hheight = h - tvFrameThickness * 2;
+		const hradius = tvCornerRadius * 0.5;
+
+		hole.moveTo(hx, hy + hradius);
+		hole.lineTo(hx, hy + hheight - hradius);
+		hole.quadraticCurveTo(hx, hy + hheight, hx + hradius, hy + hheight);
+		hole.lineTo(hx + hwidth - hradius, hy + hheight);
+		hole.quadraticCurveTo(hx + hwidth, hy + hheight, hx + hwidth, hy + hheight - hradius);
+		hole.lineTo(hx + hwidth, hy + hradius);
+		hole.quadraticCurveTo(hx + hwidth, hy, hx + hwidth - hradius, hy);
+		hole.lineTo(hx + hradius, hy);
+		hole.quadraticCurveTo(hx, hy, hx, hy + hradius);
+
+		shape.holes.push(hole);
+
+		return new ExtrudeGeometry(shape, {
+			depth: tvDepth,
+			bevelEnabled: true,
+			bevelThickness: 0.02,
+			bevelSize: 0.02,
+			bevelSegments: 8
+		});
+	}
+
+	// Create the screen (video display area)
+	function createScreen(tvWidth: number, tvHeight: number, tvFrameThickness: number) {
+		const w = tvWidth - tvFrameThickness * 2;
+		const h = tvHeight - tvFrameThickness * 2;
+
+		// Create a very thin box for the screen area (only visible from front)
+		return new BoxGeometry(w, h, 0.02);
+	}
+
+	const frameGeometry = createTVFrame(1, 1, 1, 0.2, 0.15);
+	const screenGeometry = createScreen(1, 1, 0.2);
+
+	const gltf = useGltf("/gpu/scene.gltf");
+
+	let fan_rotation = $state(0);
+	let rotationPerSeconds = $state(1); // 1 rotation per second by default
+	
+	onMount(() => {
+		const interval = setInterval(() => {
+			// Calculate angle increment per frame for desired rotations per second
+			if (rotating) {
+				const angleIncrement = (Math.PI * 2 * rotationPerSeconds) / 60;
+				fan_rotation = fan_rotation + angleIncrement;
+			}
+		}, 1000/60); // Run at ~60fps
+
+		return () => {
+			clearInterval(interval);
+		};
+	});
+
+
+</script>
+
+<T.Group
+	{position}
+	{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/GPUModel.svelte

@@ -0,0 +1,200 @@
+<!--
+Auto-generated by: https://github.com/threlte/threlte/tree/main/packages/gltf
+Command: npx @threlte/gltf@3.0.1 /Users/julienblanchon/Downloads/gpu/scene.gltf --output ./src/lib/components/3d/elements/gpu/ --types
+Author: Cem Gürbüz (https://sketchfab.com/cemgurbuzz)
+License: CC-BY-NC-4.0 (http://creativecommons.org/licenses/by-nc/4.0/)
+Source: https://sketchfab.com/3d-models/nvidia-geforce-rtx-3090-9b7cd73fefd5435f99f891567f5a9c2e
+Title: Nvidia GeForce RTX 3090
+-->
+
+<script lang="ts">
+  import type * as THREE from 'three'
+
+  import type { Snippet } from 'svelte'
+  import { T, type Props } from '@threlte/core'
+  import { useGltf } from '@threlte/extras'
+
+  let {
+    fan_rotation = 0,
+    fallback,
+    error,
+    children,
+    ref = $bindable(),
+    ...props
+  }: Props<THREE.Group<THREE.Object3DEventMap>> & {
+    fan_rotation?: number
+    ref?: THREE.Group<THREE.Object3DEventMap> | undefined
+    children?: Snippet<[{ ref: THREE.Group<THREE.Object3DEventMap> | undefined }]>
+    fallback?: Snippet
+    error?: Snippet<[{ error: Error }]>
+  } = $props()
+
+  type GLTFResult = {
+    nodes: {
+      Metal_Frame_Metal_0: THREE.Mesh
+      Front_Cover_Black_0: THREE.Mesh
+      Fan_Circle_Black_Fan_0: THREE.Mesh
+      Fan_F_Black_Fan_0: THREE.Mesh
+      Fan_F_Slot1_0: THREE.Mesh
+      Front_Cover_U_Black_0: THREE.Mesh
+      Front_Cover_T_Black_0: THREE.Mesh
+      Fan_Circle_B_Black_Fan_0: THREE.Mesh
+      Grills_U_Metal_Black_0: THREE.Mesh
+      Grills_T_Metal_Black_0: THREE.Mesh
+      Plane010_Black001_0: THREE.Mesh
+      Socket_Slot_0: THREE.Mesh
+      Side_Metal_Part_Metal_S_0: THREE.Mesh
+      Grills_F003_Metal_Black_0: THREE.Mesh
+      Grills_F002_Metal_Black_0: THREE.Mesh
+      Fan_B_Black_Fan_0: THREE.Mesh
+      Fan_B_Slot1_0: THREE.Mesh
+    }
+    materials: {
+      Metal: THREE.MeshStandardMaterial
+      Black: THREE.MeshStandardMaterial
+      Black_Fan: THREE.MeshStandardMaterial
+      ['Slot.1']: THREE.MeshStandardMaterial
+      Metal_Black: THREE.MeshStandardMaterial
+      ['Black.001']: THREE.MeshStandardMaterial
+      Slot: THREE.MeshStandardMaterial
+      Metal_S: THREE.MeshStandardMaterial
+    }
+  }
+
+  const gltf = useGltf<GLTFResult>('/gpu/scene.gltf')
+</script>
+
+<T.Group
+  bind:ref
+  dispose={false}
+  {...props as any}
+>
+  {#await gltf}
+    {@render fallback?.()}
+  {:then gltf}
+    <T.Group scale={0.01}>
+      <T.Group
+        position={[127.5, 88.51, 10.29]}
+        rotation={[Math.PI / 2, 0.05, 0]}
+        scale={0.3}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Fan_F_Black_Fan_0.geometry}
+          material={gltf.materials.Black_Fan}
+          rotation={[0, fan_rotation, 0]}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Fan_F_Slot1_0.geometry}
+          material={gltf.materials['Slot.1']}
+        />
+      </T.Group>
+      <T.Group
+        position={[-123.9, 88.51, -37.82]}
+        rotation={[Math.PI / 2, -0.05, Math.PI]}
+        scale={0.3}
+      >
+        <T.Mesh
+          geometry={gltf.nodes.Fan_B_Black_Fan_0.geometry}
+          material={gltf.materials.Black_Fan}
+          rotation={[0, fan_rotation, 0]}
+        />
+        <T.Mesh
+          geometry={gltf.nodes.Fan_B_Slot1_0.geometry}
+          material={gltf.materials['Slot.1']}
+          
+        />
+      </T.Group>
+      <T.Mesh
+        geometry={gltf.nodes.Metal_Frame_Metal_0.geometry}
+        material={gltf.materials.Metal}
+        position={[0, 88.3, -8.47]}
+        rotation={[Math.PI / 2, 0, 0]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Front_Cover_Black_0.geometry}
+        material={gltf.materials.Black}
+        position={[-122.3, 89.69, 12.11]}
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={[1, 1, 0.84]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Fan_Circle_Black_Fan_0.geometry}
+        material={gltf.materials.Black_Fan}
+        position={[127.5, 88.51, 10.29]}
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={0.79}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Front_Cover_U_Black_0.geometry}
+        material={gltf.materials.Black}
+        position={[0.02, 26.08, 14.09]}
+        rotation={[Math.PI / 2, 0, 0]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Front_Cover_T_Black_0.geometry}
+        material={gltf.materials.Black}
+        position={[-4.75, 163.4, 14.09]}
+        rotation={[-Math.PI / 2 , 0, -Math.PI]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Fan_Circle_B_Black_Fan_0.geometry}
+        material={gltf.materials.Black_Fan}
+        position={[-124.15, 88.51, -40.18]}
+        rotation={[Math.PI / 2, 0, Math.PI]}
+        scale={0.79}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Grills_U_Metal_Black_0.geometry}
+        material={gltf.materials.Metal_Black}
+        position={[-0.12, 3.16, 3.09]}
+        rotation={[Math.PI / 2, -Math.PI / 4, 0]}
+        scale={[0.55, 11.75, 0.55]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Grills_T_Metal_Black_0.geometry}
+        material={gltf.materials.Metal_Black}
+        position={[0.8, 174.49, 3.09]}
+        rotation={[-Math.PI / 2, Math.PI / 4, -Math.PI]}
+        scale={[0.55, 11.75, 0.55]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Plane010_Black001_0.geometry}
+        material={gltf.materials['Black.001']}
+        position={[121.84, 88.42, -34.24]}
+        rotation={[-Math.PI / 2, 0, -Math.PI]}
+        scale={[1, 1, 0.84]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Socket_Slot_0.geometry}
+        material={gltf.materials.Slot}
+        position={[-149.71, 187.47, -39.01]}
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={[1, 1.93, 1]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Side_Metal_Part_Metal_S_0.geometry}
+        material={gltf.materials.Metal_S}
+        position={[-225.87, 118.09, -12.54]}
+        rotation={[Math.PI / 2, 0, 0]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Grills_F003_Metal_Black_0.geometry}
+        material={gltf.materials.Metal_Black}
+        position={[131.49, 88.84, -23.02]}
+        rotation={[Math.PI / 2, 0, 0]}
+        scale={[1, 1, 1.02]}
+      />
+      <T.Mesh
+        geometry={gltf.nodes.Grills_F002_Metal_Black_0.geometry}
+        material={gltf.materials.Metal_Black}
+        position={[-128.18, 88.84, -4.17]}
+        rotation={[Math.PI / 2, 0, Math.PI]}
+        scale={[1, 0.97, 1.02]}
+      />
+    </T.Group>
+  {:catch err}
+    {@render error?.({ error: err })}
+  {/await}
+
+  {@render children?.({ ref })}
+</T.Group>

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

@@ -0,0 +1,382 @@
+<script lang="ts">
+	import * as Dialog from "@/components/ui/dialog";
+	import { Button } from "@/components/ui/button";
+	import * as Card from "@/components/ui/card";
+	import { Badge } from "@/components/ui/badge";
+	import { Input } from "@/components/ui/input";
+	import { Label } from "@/components/ui/label";
+	import * as Alert from "@/components/ui/alert";
+	import { remoteComputeManager } from "$lib/elements/compute//RemoteComputeManager.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import type { AISessionConfig } from "$lib/elements/compute//RemoteComputeManager.svelte";
+	import { settings } from "$lib/runes/settings.svelte";
+	import { toast } from "svelte-sonner";
+
+	interface Props {
+		workspaceId: string;
+		open: boolean;
+		compute: RemoteCompute;
+	}
+
+	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 useProvidedWorkspace = $state(false);
+
+	// Auto-generate session ID when modal opens
+	$effect(() => {
+		if (open && compute && !sessionId) {
+			sessionId = `${compute.id}-session-${Date.now()}`;
+		}
+	});
+
+	async function handleCreateSession() {
+		if (!compute) return;
+
+		if (!sessionId.trim() || !policyPath.trim()) {
+			toast.error('Please fill in all required fields');
+			return;
+		}
+
+		isConnecting = true;
+		try {
+			const cameras = cameraNames.split(',').map(name => name.trim()).filter(name => name);
+			if (cameras.length === 0) {
+				cameras.push('front');
+			}
+
+			const config: AISessionConfig = {
+				sessionId: sessionId.trim(),
+				policyPath: policyPath.trim(),
+				cameraNames: cameras,
+				transportServerUrl: settings.transportServerUrl,
+				workspaceId: useProvidedWorkspace ? workspaceId : undefined
+			};
+
+			const result = await remoteComputeManager.createSession(compute.id, config);
+			if (result.success) {
+				toast.success(`AI session created: ${sessionId}`);
+				open = false;
+			} else {
+				toast.error(`Failed to create session: ${result.error}`);
+			}
+		} catch (error) {
+			console.error('Session creation error:', error);
+			toast.error('Failed to create session');
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleStartSession() {
+		if (!compute) return;
+
+		isConnecting = true;
+		try {
+			const result = await remoteComputeManager.startSession(compute.id);
+			if (result.success) {
+				toast.success('AI 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');
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleStopSession() {
+		if (!compute) return;
+
+		isConnecting = true;
+		try {
+			const result = await remoteComputeManager.stopSession(compute.id);
+			if (result.success) {
+				toast.success('AI 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');
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleDeleteSession() {
+		if (!compute) return;
+
+		isConnecting = true;
+		try {
+			const result = await remoteComputeManager.deleteSession(compute.id);
+			if (result.success) {
+				toast.success('AI 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');
+		} finally {
+			isConnecting = false;
+		}
+	}
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content
+		class="max-h-[80vh] max-w-2xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+	>
+		<Dialog.Header class="pb-3">
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
+				<span class="icon-[mdi--robot-outline] size-5 text-purple-400"></span>
+				AI Compute Session - {compute.name || 'No Compute Selected'}
+			</Dialog.Title>
+			<Dialog.Description class="text-sm text-slate-400">
+				Configure and manage ACT model inference sessions for robot control
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4">
+			<!-- Current Session Status -->
+			<div
+				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+			>
+				<div class="flex items-center gap-2">
+					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-300">Session Status</span>
+				</div>
+				{#if compute.hasSession}
+					<Badge variant="default" class="bg-purple-600 text-xs">
+						{compute.statusInfo.statusText}
+					</Badge>
+				{:else}
+					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+				{/if}
+			</div>
+
+			<!-- Current Session Details -->
+			{#if compute.hasSession && compute.sessionData}
+				<Card.Root class="border-purple-500/30 bg-purple-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base 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-500/30 bg-purple-900/20 p-3">
+								<div class="grid grid-cols-2 gap-2 text-xs">
+									<div>
+										<span class="text-purple-300 font-medium">Session ID:</span>
+										<span class="text-purple-100 block">{compute.sessionId}</span>
+									</div>
+									<div>
+										<span class="text-purple-300 font-medium">Status:</span>
+										<span class="text-purple-100 block">{compute.statusInfo.emoji} {compute.statusInfo.statusText}</span>
+									</div>
+									<div>
+										<span class="text-purple-300 font-medium">Policy:</span>
+										<span class="text-purple-100 block">{compute.sessionConfig?.policyPath}</span>
+									</div>
+									<div>
+										<span class="text-purple-300 font-medium">Cameras:</span>
+										<span class="text-purple-100 block">{compute.sessionConfig?.cameraNames.join(', ')}</span>
+									</div>
+								</div>
+							</div>
+
+							<!-- Connection Details -->
+							<div class="rounded-lg border border-green-500/30 bg-green-900/20 p-3">
+								<div class="text-sm font-medium text-green-300 mb-2">📡 Inference Server Connections</div>
+								<div class="space-y-1 text-xs">
+									<div>
+										<span class="text-green-400">Workspace:</span>
+										<span class="text-green-200 font-mono ml-2">{compute.sessionData.workspace_id}</span>
+									</div>
+									{#each Object.entries(compute.sessionData.camera_room_ids) as [camera, roomId]}
+										<div>
+											<span class="text-green-400">📹 {camera}:</span>
+											<span class="text-green-200 font-mono ml-2">{roomId}</span>
+										</div>
+									{/each}
+									<div>
+										<span class="text-green-400">📥 Joint Input:</span>
+										<span class="text-green-200 font-mono ml-2">{compute.sessionData.joint_input_room_id}</span>
+									</div>
+									<div>
+										<span class="text-green-400">📤 Joint Output:</span>
+										<span class="text-green-200 font-mono ml-2">{compute.sessionData.joint_output_room_id}</span>
+									</div>
+								</div>
+							</div>
+
+							<!-- Session Controls -->
+							<div class="flex gap-2">
+								{#if compute.canStart}
+									<Button
+										variant="default"
+										size="sm"
+										onclick={handleStartSession}
+										disabled={isConnecting}
+										class="bg-green-600 hover:bg-green-700 text-xs disabled:opacity-50"
+									>
+										{#if isConnecting}
+											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											Starting...
+										{:else}
+											<span class="icon-[mdi--play] mr-1 size-3"></span>
+											Start Inference
+										{/if}
+									</Button>
+								{/if}
+								{#if compute.canStop}
+									<Button
+										variant="secondary"
+										size="sm"
+										onclick={handleStopSession}
+										disabled={isConnecting}
+										class="text-xs disabled:opacity-50"
+									>
+										{#if isConnecting}
+											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											Stopping...
+										{:else}
+											<span class="icon-[mdi--stop] mr-1 size-3"></span>
+											Stop Inference
+										{/if}
+									</Button>
+								{/if}
+								<Button
+									variant="destructive"
+									size="sm"
+									onclick={handleDeleteSession}
+									disabled={isConnecting}
+									class="text-xs disabled:opacity-50"
+								>
+									{#if isConnecting}
+										<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+										Deleting...
+									{:else}
+										<span class="icon-[mdi--delete] mr-1 size-3"></span>
+										Delete Session
+									{/if}
+								</Button>
+							</div>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- Create New Session -->
+			{#if !compute.hasSession}
+				<Card.Root class="border-purple-500/30 bg-purple-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-purple-200">
+							<span class="icon-[mdi--plus-circle] size-4"></span>
+							Create AI Session
+						</Card.Title>
+					</Card.Header>
+					<Card.Content>
+						<div class="space-y-4">
+							<div class="grid grid-cols-2 gap-4">
+								<div class="space-y-2">
+									<Label for="sessionId" class="text-purple-300">Session ID</Label>
+									<Input
+										id="sessionId"
+										bind:value={sessionId}
+										placeholder="my-session-01"
+										class="bg-slate-800 border-slate-600 text-slate-100"
+									/>
+								</div>
+								<div class="space-y-2">
+									<Label for="policyPath" class="text-purple-300">Policy Path</Label>
+									<Input
+										id="policyPath"
+										bind:value={policyPath}
+										placeholder="./checkpoints/act_so101_beyond"
+										class="bg-slate-800 border-slate-600 text-slate-100"
+									/>
+								</div>
+							</div>
+
+							<div class="grid grid-cols-2 gap-4">
+								<div class="space-y-2">
+									<Label for="cameraNames" class="text-purple-300">Camera Names</Label>
+									<Input
+										id="cameraNames"
+										bind:value={cameraNames}
+										placeholder="front, wrist, overhead"
+										class="bg-slate-800 border-slate-600 text-slate-100"
+									/>
+									<p class="text-xs text-slate-400">Comma-separated camera names</p>
+								</div>
+								<div class="space-y-2">
+									<Label for="transportServerUrl" class="text-purple-300">Transport Server URL</Label>
+									<Input
+										id="transportServerUrl"
+										value={settings.transportServerUrl}
+										disabled
+										placeholder="http://localhost:8000"
+										class="bg-slate-800 border-slate-600 text-slate-100 opacity-60 cursor-not-allowed"
+										title="Change this value in the settings panel"
+									/>
+									<p class="text-xs text-slate-400">Configure in settings panel</p>
+								</div>
+							</div>
+
+							<div class="flex items-center space-x-2">
+								<input
+									type="checkbox"
+									id="useWorkspace"
+									bind:checked={useProvidedWorkspace}
+									class="rounded border-slate-600 bg-slate-800"
+								/>
+								<Label for="useWorkspace" class="text-purple-300 text-sm">
+									Use current workspace ({workspaceId})
+								</Label>
+							</div>
+
+							<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.
+								</Alert.Description>
+							</Alert.Root>
+
+							<Button
+								variant="default"
+								onclick={handleCreateSession}
+								disabled={isConnecting || !sessionId.trim() || !policyPath.trim()}
+								class="w-full bg-purple-600 hover:bg-purple-700 disabled:opacity-50"
+							>
+								{#if isConnecting}
+									<span class="icon-[mdi--loading] animate-spin mr-2 size-4"></span>
+									Creating Session...
+								{:else}
+									<span class="icon-[mdi--rocket-launch] mr-2 size-4"></span>
+									Create AI Session
+								{/if}
+							</Button>
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- 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>
+				AI 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> 

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

@@ -0,0 +1,291 @@
+<script lang="ts">
+	import * as Dialog from "@/components/ui/dialog";
+	import { Button } from "@/components/ui/button";
+	import * as Card from "@/components/ui/card";
+	import { Badge } from "@/components/ui/badge";
+	import { toast } from "svelte-sonner";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { robotManager } from "$lib/elements/robot/RobotManager.svelte";
+
+	interface Props {
+		workspaceId: string;
+		open: boolean;
+		compute: RemoteCompute;
+	}
+
+	let { open = $bindable(), compute, workspaceId }: Props = $props();
+
+	let isConnecting = $state(false);
+	let selectedRobotId = $state('');
+	let robotProducer: any = null;
+	let connectedRobotId = $state<string | null>(null);
+
+	// Get available robots from robot manager
+	const robots = $derived(robotManager.robots);
+
+	async function handleConnectRobotInput() {
+		if (!compute.hasSession) {
+			toast.error('No AI session available. Create a session first.');
+			return;
+		}
+
+		if (!selectedRobotId) {
+			toast.error('Please select a robot to connect.');
+			return;
+		}
+
+		isConnecting = true;
+		try {
+			// Get the joint input room ID from the AI session
+			const jointInputRoomId = compute.sessionData?.joint_input_room_id;
+			if (!jointInputRoomId) {
+				throw new Error('No joint input room found in AI session');
+			}
+
+			// Find the selected robot
+			const robot = robotManager.robots.find(r => r.id === selectedRobotId);
+			if (!robot) {
+				throw new Error(`Robot ${selectedRobotId} not found`);
+			}
+
+			// Connect robot as PRODUCER to the joint input room (robot sends joint states TO AI)
+			await robotManager.connectProducerToRoom(workspaceId, selectedRobotId, jointInputRoomId);
+
+			connectedRobotId = selectedRobotId;
+
+			toast.success('Robot input connected to AI 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'
+			});
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleDisconnectRobotInput() {
+		if (!connectedRobotId) return;
+
+		try {
+			// Find the connected robot
+			const robot = robotManager.robots.find(r => r.id === connectedRobotId);
+			if (robot) {
+				// Disconnect producer from the joint input room
+				for (const producer of robot.producers) {
+					await robot.removeProducer(producer.id);
+				}
+			}
+
+			connectedRobotId = null;
+			toast.success('Robot input disconnected');
+		} catch (error) {
+			console.error('Disconnect error:', error);
+			toast.error('Error disconnecting robot input');
+		}
+	}
+
+	// Cleanup on modal close
+	$effect(() => {
+		if (!open) {
+			// Don't auto-disconnect when modal closes, user might want to keep connection
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content
+		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+	>
+		<Dialog.Header class="pb-3">
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
+				<span class="icon-[mdi--robot-industrial] size-5 text-amber-400"></span>
+				Robot Input - {compute.name || 'No Compute Selected'}
+			</Dialog.Title>
+			<Dialog.Description class="text-sm text-slate-400">
+				Connect robot joint data as input for AI inference
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4">
+			<!-- AI Session Status -->
+			<div
+				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+			>
+				<div class="flex items-center gap-2">
+					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-300">AI Session</span>
+				</div>
+				{#if compute.hasSession}
+					<Badge variant="default" class="bg-purple-600 text-xs">
+						{compute.statusInfo.statusText}
+					</Badge>
+				{:else}
+					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+				{/if}
+			</div>
+
+			{#if !compute.hasSession}
+				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
+							<span class="icon-[mdi--alert] size-4"></span>
+							AI Session Required
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="text-sm text-yellow-300">
+						You need to create an AI 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-500/30 bg-amber-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-amber-200">
+							<span class="icon-[mdi--robot-industrial] size-4"></span>
+							Robot Input Connection
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-4">
+						<!-- Available Robots -->
+						<div class="space-y-2">
+							<div class="text-sm font-medium text-amber-300">Available Robots:</div>
+							<div class="max-h-40 overflow-y-auto space-y-2">
+								{#if robots.length === 0}
+									<div class="text-center py-4 text-sm 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-500 bg-amber-500/20' 
+												: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
+										>
+											<div class="flex items-center justify-between">
+												<div>
+													<div class="text-xs text-slate-400">
+														ID: {robot.id}
+													</div>
+													<div class="text-xs text-slate-400">
+														Producers: {robot.producers.length}
+													</div>
+												</div>
+												<div class="flex items-center gap-2">
+													{#if robot.producers.length > 0}
+														<Badge variant="default" class="bg-green-600 text-xs">
+															Active
+														</Badge>
+													{:else}
+														<Badge variant="secondary" class="text-xs">
+															Available
+														</Badge>
+													{/if}
+												</div>
+											</div>
+										</button>
+									{/each}
+								{/if}
+							</div>
+						</div>
+
+						<!-- Connection Status -->
+						{#if selectedRobotId}
+							<div class="rounded-lg border border-amber-500/30 bg-amber-900/20 p-3">
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-amber-300">
+											Selected Robot: {selectedRobotId}
+										</p>
+										<p class="text-xs text-amber-400/70">
+											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
+										</p>
+									</div>
+									{#if connectedRobotId !== selectedRobotId}
+										<Button
+											variant="default"
+											size="sm"
+											onclick={handleConnectRobotInput}
+											disabled={isConnecting}
+											class="bg-amber-600 hover:bg-amber-700 text-xs disabled:opacity-50"
+										>
+											{#if isConnecting}
+												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+												Connecting...
+											{:else}
+												<span class="icon-[mdi--link] mr-1 size-3"></span>
+												Connect Input
+											{/if}
+										</Button>
+									{:else}
+										<Button
+											variant="destructive"
+											size="sm"
+											onclick={handleDisconnectRobotInput}
+											class="text-xs"
+										>
+											<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+											Disconnect
+										</Button>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Session Joint Input Details -->
+				<Card.Root class="border-blue-500/30 bg-blue-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+							<span class="icon-[mdi--information] size-4"></span>
+							Data Flow: Robot → AI Session
+						</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-800/50">
+								<span class="text-blue-300 font-medium">Joint Input Room:</span>
+								<span class="text-blue-200 font-mono">{compute.sessionData?.joint_input_room_id}</span>
+							</div>
+							<div class="text-slate-400 text-xs">
+								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>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Connection Status -->
+				{#if connectedRobotId}
+					<Card.Root class="border-green-500/30 bg-green-500/5">
+						<Card.Header>
+							<Card.Title class="flex items-center gap-2 text-base 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-300">
+								Robot <span class="font-mono">{connectedRobotId}</span> is now sending joint data to the AI session as a producer.
+								The AI model will use this data along with camera inputs for inference.
+							</div>
+						</Card.Content>
+					</Card.Root>
+				{/if}
+			{/if}
+
+			<!-- 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>
+				Robot input: Robot acts as PRODUCER sending joint positions → Inference server acts as CONSUMER receiving data for processing.
+			</div>
+		</div>
+	</Dialog.Content>
+</Dialog.Root> 

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

@@ -0,0 +1,288 @@
+<script lang="ts">
+	import * as Dialog from "@/components/ui/dialog";
+	import { Button } from "@/components/ui/button";
+	import * as Card from "@/components/ui/card";
+	import { Badge } from "@/components/ui/badge";
+	import { toast } from "svelte-sonner";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { robotManager } from "$lib/elements/robot/RobotManager.svelte";
+
+	interface Props {
+		workspaceId: string;
+		open: boolean;
+		compute: RemoteCompute;
+	}
+
+	let { open = $bindable(), compute, workspaceId }: Props = $props();
+
+	let isConnecting = $state(false);
+	let selectedRobotId = $state('');
+	let robotConsumer: any = null;
+	let connectedRobotId = $state<string | null>(null);
+
+	// Get available robots from robot manager
+	const robots = $derived(robotManager.robots);
+
+	async function handleConnectRobotOutput() {
+		if (!compute.hasSession) {
+			toast.error('No AI session available. Create a session first.');
+			return;
+		}
+
+		if (!selectedRobotId) {
+			toast.error('Please select a robot to connect.');
+			return;
+		}
+
+		isConnecting = true;
+		try {
+			// Get the joint output room ID from the AI session
+			const jointOutputRoomId = compute.sessionData?.joint_output_room_id;
+			if (!jointOutputRoomId) {
+				throw new Error('No joint output room found in AI session');
+			}
+
+			// Find the selected robot
+			const robot = robotManager.robots.find(r => r.id === selectedRobotId);
+			if (!robot) {
+				throw new Error(`Robot ${selectedRobotId} not found`);
+			}
+
+			// Connect robot as CONSUMER to the joint output room (robot receives commands FROM AI)
+			await robotManager.connectConsumerToRoom(workspaceId, selectedRobotId, jointOutputRoomId);
+
+			connectedRobotId = selectedRobotId;
+
+			toast.success('Robot output connected to AI 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'
+			});
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleDisconnectRobotOutput() {
+		if (!connectedRobotId) return;
+
+		try {
+			// Find the connected robot
+			const robot = robotManager.robots.find(r => r.id === connectedRobotId);
+			if (robot) {
+				await robot.removeConsumer();
+			}
+
+			connectedRobotId = null;
+			toast.success('Robot output disconnected');
+		} catch (error) {
+			console.error('Disconnect error:', error);
+			toast.error('Error disconnecting robot output');
+		}
+	}
+
+	// Cleanup on modal close
+	$effect(() => {
+		if (!open) {
+			// Don't auto-disconnect when modal closes, user might want to keep connection
+		}
+	});
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content
+		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+	>
+		<Dialog.Header class="pb-3">
+			<Dialog.Title class="flex items-center gap-2 text-lg font-bold text-slate-100">
+				<span class="icon-[mdi--robot-outline] size-5 text-blue-400"></span>
+				Robot Output - {compute.name || 'No Compute Selected'}
+			</Dialog.Title>
+			<Dialog.Description class="text-sm text-slate-400">
+				Connect AI command output to control robot actuators
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4">
+			<!-- AI Session Status -->
+			<div
+				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+			>
+				<div class="flex items-center gap-2">
+					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-300">AI Session</span>
+				</div>
+				{#if compute.hasSession}
+					<Badge variant="default" class="bg-purple-600 text-xs">
+						{compute.statusInfo.statusText}
+					</Badge>
+				{:else}
+					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+				{/if}
+			</div>
+
+			{#if !compute.hasSession}
+				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
+							<span class="icon-[mdi--alert] size-4"></span>
+							AI Session Required
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="text-sm text-yellow-300">
+						You need to create an AI 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-500/30 bg-blue-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+							<span class="icon-[mdi--robot-outline] size-4"></span>
+							Robot Output Connection
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-4">
+						<!-- Available Robots -->
+						<div class="space-y-2">
+							<div class="text-sm font-medium text-blue-300">Available Robots:</div>
+							<div class="max-h-40 overflow-y-auto space-y-2">
+								{#if robots.length === 0}
+									<div class="text-center py-4 text-sm 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-500 bg-blue-500/20' 
+												: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
+										>
+											<div class="flex items-center justify-between">
+												<div>
+													<div class="text-xs text-slate-400">
+														ID: {robot.id}
+													</div>
+													<div class="text-xs text-slate-400">
+														Consumer: {robot.hasConsumer ? 'Connected' : 'None'}
+													</div>
+												</div>
+												<div class="flex items-center gap-2">
+													{#if robot.hasConsumer}
+														<Badge variant="default" class="bg-green-600 text-xs">
+															Active
+														</Badge>
+													{:else}
+														<Badge variant="secondary" class="text-xs">
+															Available
+														</Badge>
+													{/if}
+												</div>
+											</div>
+										</button>
+									{/each}
+								{/if}
+							</div>
+						</div>
+
+						<!-- Connection Status -->
+						{#if selectedRobotId}
+							<div class="rounded-lg border border-blue-500/30 bg-blue-900/20 p-3">
+								<div class="flex items-center justify-between">
+									<div>
+										<p class="text-sm font-medium text-blue-300">
+											Selected Robot: {selectedRobotId}
+										</p>
+										<p class="text-xs text-blue-400/70">
+											{connectedRobotId === selectedRobotId ? 'Connected to AI' : 'Not Connected'}
+										</p>
+									</div>
+									{#if connectedRobotId !== selectedRobotId}
+										<Button
+											variant="default"
+											size="sm"
+											onclick={handleConnectRobotOutput}
+											disabled={isConnecting}
+											class="bg-blue-600 hover:bg-blue-700 text-xs disabled:opacity-50"
+										>
+											{#if isConnecting}
+												<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+												Connecting...
+											{:else}
+												<span class="icon-[mdi--link] mr-1 size-3"></span>
+												Connect Output
+											{/if}
+										</Button>
+									{:else}
+										<Button
+											variant="destructive"
+											size="sm"
+											onclick={handleDisconnectRobotOutput}
+											class="text-xs"
+										>
+											<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+											Disconnect
+										</Button>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Session Joint Output Details -->
+				<Card.Root class="border-orange-500/30 bg-orange-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-orange-200">
+							<span class="icon-[mdi--information] size-4"></span>
+							Data Flow: AI 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-800/50">
+								<span class="text-orange-300 font-medium">Joint Output Room:</span>
+								<span class="text-orange-200 font-mono">{compute.sessionData?.joint_output_room_id}</span>
+							</div>
+							<div class="text-slate-400 text-xs">
+								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>
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Connection Status -->
+				{#if connectedRobotId}
+					<Card.Root class="border-green-500/30 bg-green-500/5">
+						<Card.Header>
+							<Card.Title class="flex items-center gap-2 text-base 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-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.
+							</div>
+						</Card.Content>
+					</Card.Root>
+				{/if}
+			{/if}
+
+			<!-- 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>
+				Robot output: Inference server acts as PRODUCER sending commands → Robot acts as CONSUMER receiving and executing movements.
+			</div>
+		</div>
+	</Dialog.Content>
+</Dialog.Root> 

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

@@ -0,0 +1,276 @@
+<script lang="ts">
+	import * as Dialog from "@/components/ui/dialog";
+	import { Button } from "@/components/ui/button";
+	import * as Card from "@/components/ui/card";
+	import { Badge } from "@/components/ui/badge";
+	import { toast } from "svelte-sonner";
+	import { settings } from "$lib/runes/settings.svelte";
+	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+
+	interface Props {
+		workspaceId: string;
+		open: boolean;
+		compute: RemoteCompute;
+	}
+
+	let { open = $bindable(), compute, workspaceId }: Props = $props();
+
+	let isConnecting = $state(false);
+	let selectedCameraName = $state('front');
+	let localStream: MediaStream | null = $state(null);
+	let videoProducer: any = null;
+
+	// Auto-refresh rooms when modal opens
+	$effect(() => {
+		if (open) {
+			videoManager.refreshRooms(workspaceId);
+		}
+	});
+
+	async function handleConnectLocalCamera() {
+		if (!compute.hasSession) {
+			toast.error('No AI session available. Create a session first.');
+			return;
+		}
+
+		isConnecting = true;
+		try {
+			// Get user media
+			const stream = await navigator.mediaDevices.getUserMedia({
+				video: true,
+				audio: false
+			});
+			localStream = stream;
+
+			// Get the camera room ID for the selected camera
+			const cameraRoomId = compute.sessionData?.camera_room_ids[selectedCameraName];
+			if (!cameraRoomId) {
+				throw new Error(`No room found for camera: ${selectedCameraName}`);
+			}
+
+			// Create video producer and connect to the camera room
+			const { VideoProducer } = await import("@robohub/transport-server-client/video");
+			videoProducer = new 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');
+			}
+
+			// Start streaming
+			await videoProducer.startCamera();
+
+			toast.success(`Camera connected to AI 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'
+			});
+		} finally {
+			isConnecting = false;
+		}
+	}
+
+	async function handleDisconnectCamera() {
+		try {
+			if (videoProducer) {
+				await videoProducer.stopStreaming();
+				await videoProducer.disconnect();
+				videoProducer = null;
+			}
+
+			if (localStream) {
+				localStream.getTracks().forEach(track => track.stop());
+				localStream = null;
+			}
+
+			toast.success('Camera disconnected');
+		} catch (error) {
+			console.error('Disconnect error:', error);
+			toast.error('Error disconnecting camera');
+		}
+	}
+
+	// Cleanup on modal close
+	$effect(() => {
+		return () => {
+            if (!open) {
+                handleDisconnectCamera();
+            }
+        };
+    });
+</script>
+
+<Dialog.Root bind:open>
+	<Dialog.Content
+		class="max-h-[80vh] max-w-xl overflow-y-auto border-slate-600 bg-slate-900 text-slate-100"
+	>
+		<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'}
+			</Dialog.Title>
+			<Dialog.Description class="text-sm text-slate-400">
+				Connect camera streams to provide visual input for AI inference
+			</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4">
+			<!-- AI Session Status -->
+			<div
+				class="flex items-center justify-between rounded-lg border border-purple-500/30 bg-purple-900/20 p-3"
+			>
+				<div class="flex items-center gap-2">
+					<span class="icon-[mdi--brain] size-4 text-purple-400"></span>
+					<span class="text-sm font-medium text-purple-300">AI Session</span>
+				</div>
+				{#if compute.hasSession}
+					<Badge variant="default" class="bg-purple-600 text-xs">
+						{compute.statusInfo.statusText}
+					</Badge>
+				{:else}
+					<Badge variant="secondary" class="text-xs text-slate-400">No Session</Badge>
+				{/if}
+			</div>
+
+			{#if !compute.hasSession}
+				<Card.Root class="border-yellow-500/30 bg-yellow-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-yellow-200">
+							<span class="icon-[mdi--alert] size-4"></span>
+							AI Session Required
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="text-sm text-yellow-300">
+						You need to create an AI session before connecting video inputs.
+						The session defines which camera names are available for connection.
+					</Card.Content>
+				</Card.Root>
+			{:else}
+				<!-- Camera Selection and Connection -->
+				<Card.Root class="border-green-500/30 bg-green-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-green-200">
+							<span class="icon-[mdi--camera] size-4"></span>
+							Camera Connection
+						</Card.Title>
+					</Card.Header>
+					<Card.Content class="space-y-4">
+						<!-- Available Cameras -->
+						<div class="space-y-2">
+							<div class="text-sm font-medium text-green-300">Available Camera Inputs:</div>
+							<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' 
+											: 'border-slate-600 bg-slate-800/50 hover:bg-slate-700/50'}"
+									>
+										<div class="text-sm font-medium">{cameraName}</div>
+										<div class="text-xs text-slate-400">
+											Room: {compute.sessionData?.camera_room_ids[cameraName]?.slice(-8)}
+										</div>
+									</button>
+								{/each}
+							</div>
+						</div>
+
+						<!-- Connection Status -->
+						<div class="rounded-lg border border-green-500/30 bg-green-900/20 p-3">
+							<div class="flex items-center justify-between">
+								<div>
+									<p class="text-sm font-medium text-green-300">
+										Selected Camera: {selectedCameraName}
+									</p>
+									<p class="text-xs text-green-400/70">
+										{localStream ? 'Connected' : 'Not Connected'}
+									</p>
+								</div>
+								{#if !localStream}
+									<Button
+										variant="default"
+										size="sm"
+										onclick={handleConnectLocalCamera}
+										disabled={isConnecting}
+										class="bg-green-600 hover:bg-green-700 text-xs disabled:opacity-50"
+									>
+										{#if isConnecting}
+											<span class="icon-[mdi--loading] animate-spin mr-1 size-3"></span>
+											Connecting...
+										{:else}
+											<span class="icon-[mdi--camera] mr-1 size-3"></span>
+											Connect Camera
+										{/if}
+									</Button>
+								{:else}
+									<Button
+										variant="destructive"
+										size="sm"
+										onclick={handleDisconnectCamera}
+										class="text-xs"
+									>
+										<span class="icon-[mdi--close-circle] mr-1 size-3"></span>
+										Disconnect
+									</Button>
+								{/if}
+							</div>
+						</div>
+
+						<!-- Live Preview -->
+						{#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">
+									<video
+										autoplay
+										muted
+										playsinline
+										class="w-full h-full object-cover"
+										onloadedmetadata={(e) => {
+											const video = e.target as HTMLVideoElement;
+											video.srcObject = localStream;
+										}}
+									></video>
+								</div>
+							</div>
+						{/if}
+					</Card.Content>
+				</Card.Root>
+
+				<!-- Session Camera Details -->
+				<Card.Root class="border-blue-500/30 bg-blue-500/5">
+					<Card.Header>
+						<Card.Title class="flex items-center gap-2 text-base text-blue-200">
+							<span class="icon-[mdi--information] size-4"></span>
+							Session Camera Details
+						</Card.Title>
+					</Card.Header>
+					<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>
+							{/each}
+						</div>
+					</Card.Content>
+				</Card.Root>
+			{/if}
+
+			<!-- 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.
+			</div>
+		</div>
+	</Dialog.Content>
+</Dialog.Root> 

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { ICON } from "$lib/utils/icon";
+	import { 
+		BaseStatusBox, 
+		StatusHeader, 
+		StatusContent, 
+		StatusIndicator
+	} from "$lib/components/3d/ui";
+	import { Text } from "threlte-uikit";
+
+	interface Props {
+		compute: RemoteCompute;
+	}
+
+	let { compute }: Props = $props();
+
+	// Compute theme color
+	const computeColor = "rgb(139, 69, 219)";
+</script>
+
+
+<BaseStatusBox
+	minWidth={110}
+	minHeight={135}
+	color={computeColor}
+	borderOpacity={0.6}
+	backgroundOpacity={0.2}
+	clickable={false}
+>
+		<!-- 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"
+		/>
+</BaseStatusBox>
+ 

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import VideoInputBoxUIKit from "./VideoInputBoxUIKit.svelte";
+	import RobotInputBoxUIKit from "./RobotInputBoxUIKit.svelte";
+	import ComputeOutputBoxUIKit from "./ComputeOutputBoxUIKit.svelte";
+	import ComputeBoxUIKit from "./ComputeBoxUIKit.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { Container } from "threlte-uikit";
+	import { StatusArrow } from "$lib/components/3d/ui";
+
+	interface Props {
+		compute: RemoteCompute;
+		onVideoInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
+	}
+
+	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}>
+		<VideoInputBoxUIKit {compute} handleClick={() => onVideoInputBoxClick(compute)} />
+		<RobotInputBoxUIKit {compute} handleClick={() => onRobotInputBoxClick(compute)} />
+	</Container>
+
+	<!-- Arrow: Inputs to Compute -->
+	<StatusArrow
+		direction="right"
+		color={inputColor}
+		opacity={compute.hasSession ? 1 : 0.5}
+	/>
+
+	<!-- Center: Compute -->
+	<ComputeBoxUIKit {compute} />
+
+	<!-- Arrow: Compute to Output -->
+	<StatusArrow
+		direction="right"
+		color={outputColor}
+		opacity={compute.hasSession && compute.isRunning ? 1 : compute.hasSession ? 0.7 : 0.5}
+	/>
+
+	<!-- Right: Output -->
+	<ComputeOutputBoxUIKit {compute} handleClick={() => onRobotOutputBoxClick(compute)} />
+</Container> 

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

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { ICON } from "$lib/utils/icon";
+	import { 
+		BaseStatusBox, 
+		StatusHeader, 
+		StatusContent, 
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
+	import { Container, SVG, Text } from "threlte-uikit";
+
+	interface Props {
+		compute: RemoteCompute;
+		handleClick?: () => void;
+	}
+
+	let { compute, handleClick }: Props = $props();
+
+	// Input theme color (green)
+	const inputColor = "rgb(34, 197, 94)";
+</script>
+
+<!--
+@component
+Compact input box showing the status of video and robot inputs for AI sessions.
+Displays input connection information when session exists or connection prompt when disconnected.
+-->
+
+<BaseStatusBox
+	minWidth={120}
+	minHeight={80}
+	color={inputColor}
+	borderOpacity={compute.hasSession ? 0.8 : 0.4}
+	backgroundOpacity={0.2}
+	opacity={compute.hasSession ? 1 : 0.6}
+	onclick={handleClick}
+>
+	{#if compute.hasSession && compute.inputConnections}
+		<!-- Active Input State -->
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--download]"].svg}
+			text="INPUTS"
+			color={inputColor}
+			opacity={0.9}
+			fontSize={12}
+		/>
+
+		<!-- Camera Inputs -->
+		<StatusContent
+			title={`${Object.keys(compute.inputConnections.cameras).length} Cameras`}
+			subtitle="Joint States"
+			color="rgb(187, 247, 208)"
+			variant="primary"
+		/>
+
+		<!-- Active indicator -->
+		<StatusIndicator color={inputColor} />
+	{:else}
+		<!-- No Session State -->
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--download]"].svg}
+			text="NO INPUTS"
+			color={inputColor}
+			opacity={0.7}
+			iconSize={12}
+			fontSize={12}
+		/>
+
+		<StatusContent
+			title="Setup Required"
+			color="rgb(134, 239, 172)"
+			variant="secondary"
+		/>
+
+		<StatusButton
+			text="Add Session"
+			icon={ICON["icon-[mdi--plus]"].svg}
+			color={inputColor}
+			backgroundOpacity={0.1}
+			textOpacity={0.7}
+		/>
+	{/if}
+</BaseStatusBox> 

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { ICON } from "$lib/utils/icon";
+	import { 
+		BaseStatusBox, 
+		StatusHeader, 
+		StatusContent, 
+		StatusIndicator,
+		StatusButton
+	} from "$lib/components/3d/ui";
+	import { Container, SVG, Text } from "threlte-uikit";
+
+	interface Props {
+		compute: RemoteCompute;
+		handleClick?: () => void;
+	}
+
+	let { compute, handleClick }: Props = $props();
+
+	// 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 AI sessions.
+Displays output connection information when session exists or connection prompt when disconnected.
+-->
+
+<BaseStatusBox
+	minWidth={110}
+	minHeight={135}
+	color={outputColor}
+	borderOpacity={compute.hasSession && compute.isRunning ? 0.8 : 0.4}
+	backgroundOpacity={0.2}
+	opacity={compute.hasSession && compute.isRunning ? 1 : !compute.hasSession ? 0.4 : 0.6}
+	onclick={handleClick}
+>
+	{#if compute.hasSession && compute.outputConnections}
+		<!-- Active Output State -->
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="OUTPUT"
+			color={outputColor}
+			opacity={0.9}
+			fontSize={12}
+		/>
+
+		<StatusContent
+			title={compute.isRunning ? "Active" : "Ready"}
+			subtitle="Commands"
+			color="rgb(191, 219, 254)"
+			variant="primary"
+		/>
+
+		<!-- Status indicator based on running state -->
+		<StatusIndicator 
+			color={compute.isRunning ? outputColor : "rgb(245, 158, 11)"} 
+			type={compute.isRunning ? "pulse" : "dot"}
+		/>
+	{:else}
+		<!-- No Session State -->
+		<StatusHeader
+			icon={ICON["icon-[material-symbols--upload]"].svg}
+			text="NO OUTPUT"
+			color={outputColor}
+			opacity={0.7}
+			iconSize={12}
+			fontSize={12}
+		/>
+
+		<StatusContent
+			title={!compute.hasSession ? 'Need Session' : 'Configure'}
+			color="rgb(147, 197, 253)"
+			variant="secondary"
+		/>
+
+		<StatusButton
+			text="Setup"
+			icon={ICON["icon-[mdi--plus]"].svg}
+			color={outputColor}
+			backgroundOpacity={0.1}
+			textOpacity={0.7}
+		/>
+	{/if}
+</BaseStatusBox> 

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { T } from "@threlte/core";
+	import { Billboard, interactivity } from "@threlte/extras";
+	import { Root, Container } from "threlte-uikit";
+	import ComputeConnectionFlowBoxUIKit from "./ComputeConnectionFlowBoxUIKit.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+
+	interface Props {
+		compute: RemoteCompute;
+		offset?: number;
+		visible?: boolean;
+		onVideoInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotInputBoxClick: (compute: RemoteCompute) => void;
+		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
+	}
+
+	let {
+		compute,
+		offset = 10,
+		visible = true,
+		onVideoInputBoxClick,
+		onRobotInputBoxClick,
+		onRobotOutputBoxClick
+	}: Props = $props();
+
+	interactivity();
+</script>
+
+<T.Group
+	onclick={(e) => e.stopPropagation()}
+	position.z={0.4}
+	padding={10}
+	rotation={[-Math.PI / 2, 0, 0]}
+	scale={[0.1, 0.1, 0.1]}
+	pointerEvents="listener"
+	{visible}
+>
+	<Billboard>
+		<Root name={`compute-status-billboard-${compute.id}`}>
+			<Container
+				width="100%"
+				height="100%"
+				alignItems="center"
+				justifyContent="center"
+				padding={20}
+			>
+				<ComputeConnectionFlowBoxUIKit 
+					{compute} 
+					{onVideoInputBoxClick} 
+					{onRobotInputBoxClick} 
+					{onRobotOutputBoxClick} 
+				/>
+			</Container>
+		</Root>
+	</Billboard>
+</T.Group> 

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

@@ -0,0 +1,81 @@
+<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";
+
+	interface Props {
+		compute: RemoteCompute;
+		handleClick?: () => void;
+	}
+
+	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 AI sessions.
+Displays robot connection information when session exists or connection prompt when disconnected.
+-->
+
+<BaseStatusBox 
+	minWidth={100}
+	minHeight={65}
+	color={robotColor}
+	borderOpacity={0.6}
+	backgroundOpacity={0.2}
+	opacity={compute.hasSession ? 1 : 0.6}
+	onclick={handleClick}
+>
+	{#if compute.hasSession && compute.inputConnections}
+		<!-- Active Robot Input State -->
+		<StatusHeader 
+			icon={ICON["icon-[ix--robotic-arm]"].svg} 
+			text="ROBOT" 
+			color={robotColor}
+			opacity={0.9}
+			fontSize={11}
+		/>
+
+		<StatusContent 
+			title="Joint States" 
+			subtitle="6 DOF Robot"
+			color="rgb(254, 215, 170)"
+			variant="primary"
+		/>
+
+		<!-- Connected status -->
+		<StatusIndicator color={robotColor} />
+	{:else}
+		<!-- No Session State -->
+		<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"
+		/>
+
+		<StatusButton 
+			icon={ICON["icon-[mdi--plus]"].svg} 
+			text="Add"
+			color={robotColor}
+			backgroundOpacity={0.1}
+			textOpacity={0.7}
+		/>
+	{/if}
+</BaseStatusBox> 

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { ICON } from "$lib/utils/icon";
+	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
+
+	interface Props {
+		compute: RemoteCompute;
+		handleClick?: () => void;
+	}
+
+	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 AI sessions.
+Displays robot command output information when session exists or connection prompt when disconnected.
+-->
+
+<BaseStatusBox 
+	color={outputColor}
+	borderOpacity={0.6}
+	backgroundOpacity={0.2}
+	opacity={compute.hasSession && compute.isRunning ? 1 : !compute.hasSession ? 0.4 : 0.6}
+	onclick={handleClick}
+>
+	{#if compute.hasSession && compute.outputConnections}
+		<!-- Active Robot Output State -->
+		<StatusHeader 
+			icon={ICON["icon-[ix--robotic-arm]"].svg} 
+			text="COMMANDS" 
+			color={outputColor}
+			opacity={0.9}
+		/>
+
+		<StatusContent 
+			title={compute.isRunning ? "AI Commands Active" : "Session Ready"}
+			subtitle="Motor Control"
+			color="rgb(191, 219, 254)"
+			variant="primary"
+		/>
+
+		<!-- Status indicator based on running state -->
+		{#if compute.isRunning}
+			<!-- Active pulse indicator -->
+			<StatusIndicator color={outputColor} type="pulse" />
+		{:else}
+			<!-- Ready but not running indicator -->
+			<StatusIndicator color="rgb(245, 158, 11)" />
+		{/if}
+	{:else}
+		<!-- No Session State -->
+		<StatusHeader 
+			icon={ICON["icon-[ix--robotic-arm]"].svg} 
+			text="NO OUTPUT" 
+			color={outputColor}
+			opacity={0.7}
+		/>
+
+		<StatusContent 
+			title={!compute.hasSession ? 'Need Session' : 'Click to Configure'}
+			color="rgb(147, 197, 253)"
+			variant="secondary"
+		/>
+
+		<StatusButton 
+			icon={ICON["icon-[ix--robotic-arm]"].svg} 
+			text="Setup Output"
+			color={outputColor}
+			backgroundOpacity={0.1}
+			textOpacity={0.7}
+		/>
+	{/if}
+</BaseStatusBox> 

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

@@ -0,0 +1,82 @@
+<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";
+
+	interface Props {
+		compute: RemoteCompute;
+		handleClick?: () => void;
+	}
+
+	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 AI sessions.
+Displays video connection information when session exists or connection prompt when disconnected.
+-->
+
+<BaseStatusBox 
+	minWidth={100}
+	minHeight={65}
+	color={inputColor}
+	borderOpacity={0.6}
+	backgroundOpacity={0.2}
+	opacity={compute.hasSession ? 1 : 0.6}
+	onclick={handleClick}
+>
+	{#if compute.hasSession && compute.inputConnections}
+		<!-- Active Video Input State -->
+		<StatusHeader 
+			icon={ICON["icon-[mdi--video]"].svg} 
+			text="VIDEO" 
+			color={inputColor}
+			opacity={0.9}
+			fontSize={11}
+		/>
+
+		<!-- Camera Streams -->
+		<StatusContent 
+			title={`${Object.keys(compute.inputConnections.cameras).length} Cameras`}
+			color="rgb(187, 247, 208)"
+			variant="primary"
+		/>
+
+		<!-- Connected status -->
+		<StatusIndicator color={inputColor} />
+	{:else}
+		<!-- No Session State -->
+		<StatusHeader 
+			icon={ICON["icon-[mdi--video-off]"].svg} 
+			text="NO VIDEO" 
+			color={inputColor}
+			opacity={0.7}
+			fontSize={11}
+		/>
+
+		<StatusContent 
+			title="Setup Video" 
+			color="rgb(134, 239, 172)" 
+			variant="secondary"
+		/>
+
+		<StatusButton 
+			icon={ICON["icon-[mdi--plus]"].svg}
+			text="Add"
+			color={inputColor}
+			backgroundOpacity={0.1}
+			textOpacity={0.7}
+		/>
+	{/if}
+</BaseStatusBox> 

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

@@ -0,0 +1,169 @@
+<script lang="ts">
+	import { T } from "@threlte/core";
+	import { Group } from "three";
+	import { getRootLinks } from "@/components/3d/elements/robot/URDF/utils/UrdfParser";
+	import UrdfLink from "@/components/3d/elements/robot/URDF/primitives/UrdfLink.svelte";
+	import RobotStatusBillboard from "@/components/3d/elements/robot/status/RobotStatusBillboard.svelte";
+	import type { Robot } from "$lib/elements/robot/Robot.svelte.js";
+	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';
+
+	interface Props {	
+		robot: Robot;
+		onCameraMove: (ref: any) => void;
+		onInputBoxClick: (robot: Robot) => void;
+		onRobotBoxClick: (robot: Robot) => void;
+		onOutputBoxClick: (robot: Robot) => void;
+	}
+
+	let ref = $state<Group | undefined>(undefined);
+
+	let { robot = $bindable(), onCameraMove, onInputBoxClick, onRobotBoxClick, onOutputBoxClick }: Props = $props();
+
+	let urdfRobotState = $state<IUrdfRobot | null>(null);
+	let lastJointValues = $state<Record<string, number>>({});
+
+	onMount(async () => {
+		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);
+		}
+	});
+
+	// Sync joint values from Robot to URDF joints with optimized updates
+	$effect(() => {
+		if (!urdfRobotState) return;
+		if (robot.jointArray.length === 0) return;
+
+		// Check if this is the initial sync (no previous values recorded)
+		const isInitialSync = Object.keys(lastJointValues).length === 0;
+		
+		// Check if any joint values have actually changed (using config threshold)
+		const threshold = isInitialSync ? 0 : ROBOT_CONFIG.performance.uiUpdateThreshold;
+		const hasSignificantChanges = isInitialSync || 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 => {
+			if (isInitialSync || Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold) {
+				lastJointValues[joint.name] = joint.value;
+				const urdfJoint = findUrdfJoint(urdfRobotState, joint.name);
+				if (urdfJoint) {
+					// Initialize rotation array if it doesn't exist
+					if (!urdfJoint.rotation) {
+						urdfJoint.rotation = [0, 0, 0];
+					}
+					
+					// Use the Robot's conversion method for proper coordinate mapping
+					const radians = robot.convertNormalizedToUrdfRadians(joint.name, joint.value);
+					const axis = urdfJoint.axis_xyz || [0, 0, 1];
+					
+					// Reset rotation and apply to the appropriate axis
+					urdfJoint.rotation = [0, 0, 0];
+					for (let i = 0; i < 3; i++) {
+						if (Math.abs(axis[i]) > 0.001) {
+							urdfJoint.rotation[i] = radians * axis[i];
+						}
+					}
+					updatedCount++;
+				}
+			}
+		});
+	});
+
+	function findUrdfJoint(robot: Robot, jointName: string): any {
+		// Search through the robot's joints array
+		if (robot.joints && Array.isArray(robot.joints)) {
+			for (const joint of robot.joints) {
+				if (joint.name === jointName) {
+					return joint;
+				}
+			}
+		}
+		return null;
+	}
+
+	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
+	interactivity();
+
+	let isToggled = $state(false);
+
+	function handleClick(event: IntersectionEvent<MouseEvent>) {
+		event.stopPropagation();
+		isToggled = !isToggled;
+	}
+
+</script>
+
+<T.Group
+	bind:ref
+	position.x={robot.position.x}
+	position.y={robot.position.y}
+	position.z={robot.position.z}
+	scale={[10, 10, 10]}
+	rotation={[-Math.PI / 2, 0, 0]}
+>
+	<T.Group
+		onpointerenter={onPointerEnter}
+		onpointerleave={onPointerLeave}
+		onclick={handleClick}
+	>
+		{#if urdfRobotState}
+			{#each getRootLinks(urdfRobotState) as link}
+				<UrdfLink
+					robot={urdfRobotState}
+					{link}
+					textScale={0.2}
+					showName={$hovering || isToggled}
+					showVisual={true}
+					showCollision={false}
+					visualColor={robot.connectionStatus.isConnected ? "#10b981" : "#6b7280"}
+					visualOpacity={$hovering || isToggled ? 0.4 : 1.0}
+					collisionOpacity={1.0}
+					collisionColor="#813d9c"
+					jointNames={$hovering}
+					joints={$hovering}
+					jointColor="#62a0ea"
+					jointIndicatorColor="#f66151"
+					nameHeight={0.1}
+					showLine={$hovering || isToggled}
+					opacity={1}
+					isInteractive={false}
+				/>
+			{/each}
+		{:else}
+			<!-- Fallback simple representation while URDF loads -->
+			<T.Mesh>
+				<T.BoxGeometry args={[0.1, 0.1, 0.1]} />
+				<T.MeshStandardMaterial 
+					color={robot.connectionStatus.isConnected ? "#10b981" : "#6b7280"}
+					opacity={$hovering ? 0.8 : 1.0}
+					transparent
+				/>
+			</T.Mesh>
+		{/if}
+	</T.Group>
+
+
+	<RobotStatusBillboard 
+		{robot} 
+		onInputBoxClick={onInputBoxClick} 
+		onRobotBoxClick={onRobotBoxClick} 
+		onOutputBoxClick={onOutputBoxClick} 
+		visible={isToggled} 
+	/>
+
+</T.Group>

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { robotManager } from "$lib/elements/robot/RobotManager.svelte.js";
+	import { onMount, onDestroy } from "svelte";
+	import InputConnectionModal from "@/components/3d/elements/robot/modal/InputConnectionModal.svelte";
+	import OutputConnectionModal from "@/components/3d/elements/robot/modal/OutputConnectionModal.svelte";
+	import ManualControlSheet from "@/components/3d/elements/robot/modal/ManualControlSheet.svelte";
+	import type { Robot } from "$lib/elements/robot/Robot.svelte.js";
+	import { generateName } from "$lib/utils/generateName";
+	import RobotGridItem from "@/components/3d/elements/robot/RobotGridItem.svelte";
+
+	interface Props {
+		workspaceId: string;
+	}
+	let {workspaceId}: Props = $props();
+
+	let isInputModalOpen = $state(false);
+	let isOutputModalOpen = $state(false);
+	let isManualControlSheetOpen = $state(false);
+	let selectedRobot = $state<Robot | null>(null);
+
+	function onInputBoxClick(robot: Robot) {
+		selectedRobot = robot;
+		isInputModalOpen = true;
+	}
+	
+	function onRobotBoxClick(robot: Robot) {
+		selectedRobot = robot;
+		isManualControlSheetOpen = true;
+	}
+	
+	function onOutputBoxClick(robot: Robot) {
+		selectedRobot = robot;
+		isOutputModalOpen = true;
+	}
+
+	onMount(async () => {
+		async function createRobot() {
+			try {
+				const robotId = generateName();
+				await robotManager.createSO100Robot(robotId, {
+					x: 0,
+					y: 0,
+					z: 0
+				});
+			} catch (error) {
+				console.error('Failed to create robot:', error);
+			}
+		}
+
+		if (robotManager.robots.length === 0) {
+			await createRobot();
+		}
+	});
+
+	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);
+		});
+	});
+</script>
+
+{#each robotManager.robots as robot (robot.id)}
+	<RobotGridItem
+		{robot}
+		onCameraMove={() => {}}
+		onInputBoxClick={onInputBoxClick}
+		onRobotBoxClick={onRobotBoxClick}
+		onOutputBoxClick={onOutputBoxClick}	
+	/>
+{/each}
+
+<!-- Connection Modals -->
+{#if selectedRobot}
+	<InputConnectionModal bind:open={isInputModalOpen} robot={selectedRobot} {workspaceId} />
+	<OutputConnectionModal bind:open={isOutputModalOpen} robot={selectedRobot} {workspaceId} />
+	<ManualControlSheet bind:open={isManualControlSheetOpen} robot={selectedRobot} {workspaceId} />
+{/if}

src/lib/components/3d/elements/robot/URDF/interfaces/IUrdfBox.ts

@@ -0,0 +1,3 @@
+export default interface IUrdfBox {
+	size: [x: number, y: number, z: number];
+}

src/lib/components/3d/elements/robot/URDF/interfaces/IUrdfCylinder.ts

@@ -0,0 +1,4 @@
+export default interface IUrdfCylinder {
+	radius: number;
+	length: number;
+}