Disable Inference

.env.example

@@ -1,2 +1,2 @@
 PUBLIC_TRANSPORT_SERVER_URL=https://blanchon-robothub-transportserver.hf.space/api
-PUBLIC_INFERENCE_SERVER_URL=https://blanchon-robothub-inference-server.hf.space/api
+PUBLIC_INFERENCE_SERVER_URL=https://blanchon-robothub-inferenceserver.hf.space/api

README.md

@@ -106,7 +106,7 @@ The **workspace-id** in the URL hash ties all three services together.  Share `h
 2. Click *Add Robot* → spawns an SO-100 6-DoF arm (URDF).  
 3. Click *Add Sensor → Camera* → creates a virtual camera element.  
 4. Click *Add Model → ACT* → spawns a *Compute* block.
-5. On the Compute block choose *Create Session* – select model path (`./checkpoints/act_so101_beyond`) and cameras (`front`).
+5. On the Compute block choose *Create Session* – select model path (`LaetusH/act_so101_beyond`) and cameras (`front`).
 6. Connect:  
    • *Video Input* – local webcam → `front` room.  
    • *Robot Input* – robot → *joint-input* room (producer).  
@@ -244,7 +244,7 @@ Typical lifecycle:
    ```jsonc
    {
      "session_id": "pick_place_demo",
-     "policy_path": "./checkpoints/act_so101_beyond",
+     "policy_path": "LaetusH/act_so101_beyond",
      "camera_names": ["front", "wrist"],
      "transport_server_url": "http://localhost:8000",
      "workspace_id": "<existing-or-new>"  // optional

SPEC.md

@@ -1,99 +0,0 @@
-# Robot USB Connection System - Summary
-
-## Core Components
-
-### USBProducer (Output)
-**Purpose**: Sends software commands to control physical robot hardware
-- Receives normalized joint commands from software
-- Converts normalized values to raw servo positions
-- Sends position commands to physical servos
-- Locks servos for precise software control
-
-### USBConsumer (Input) 
-**Purpose**: Reads physical robot movements and translates to software commands
-- Continuously monitors physical servo positions
-- Converts raw servo values to normalized percentages
-- Detects movement changes and broadcasts updates
-- Keeps servos unlocked for manual manipulation
-
-## Key Features
-
-### Calibration System (`USBCalibrationPanel.svelte`)
-- **Requirement**: All USB connections must be calibrated before use
-- **Process**: Records min/max physical range for each servo by manual movement
-- **Result**: Establishes mapping between raw servo values (0-4095) and normalized values
-
-### Normalized Communication Protocol
-- **Standard Joints**: -100% to +100% range (bipolar)
-- **Gripper/Jaw**: 0% to +100% range (unipolar) 
-- **Benefits**: Consistent software interface across different robots
-- **Conversion**: Automatic normalization/denormalization based on calibration data
-
-### Multi-Port Support
-- **Capability**: Multiple independent USB connections simultaneously
-- **Independence**: Each connection has its own calibration and configuration
-- **Use Case**: Control multiple robots or multiple connections to same robot
-
-### Batch Operations
-- **Sync Read**: Read multiple servo positions simultaneously
-- **Sync Write**: Send commands to multiple servos in batched operations
-- **Performance**: Reduces USB communication overhead and latency
-
-## Key Constraints
-
-### Connection Exclusivity
-- **Input**: Only one consumer (input source) active per robot at a time
-- **Output**: Multiple producers (output destinations) can be active simultaneously
-- **Rationale**: Prevents conflicting input commands while allowing broadcast to multiple destinations
-
-### Servo Locking Strategy
-- **Consumer Mode**: Servos unlocked → manual movement possible + position reading
-- **Producer Mode**: Servos locked → software control only, no manual movement
-- **Safety**: Prevents mechanical conflicts between manual and software control
-
-### Calibration Dependency
-- **Mandatory**: USB connections cannot establish without valid calibration
-- **Per-Connection**: Each USB port requires independent calibration
-- **Safety**: Prevents commanding impossible positions or damaging hardware
-
-## Additional System Requirements (from SPEC.md analysis)
-
-### Connection Management
-- **Auto-Detection**: System should detect available USB ports automatically
-- **Status Monitoring**: Real-time connection health and error reporting
-- **Graceful Disconnection**: Safe servo unlocking on disconnect/error
-
-### Error Handling & Recovery
-- **Port Conflicts**: Queue management to prevent "Port is busy" errors
-- **Retry Logic**: Automatic retry with backoff for failed servo commands
-- **Connection Recovery**: Automatic reconnection attempts after USB disconnect
-
-### User Interface Integration
-- **Modal Management**: Unified connection setup through calibration panels
-- **Status Display**: Visual indicators for connection state and calibration status
-- **Manual Control**: Direct joint manipulation when no input consumer active
-
-### Performance Optimizations
-- **Polling Rates**: Configurable update frequencies for different use cases
-- **Change Detection**: Only broadcast updates when values actually change
-- **Queueing**: Serial command processing to prevent USB port conflicts
-
-## System Architecture Concepts
-
-### Bidirectional Data Flow
-```
-Physical Robot ←→ USB Hardware ←→ Calibration Layer ←→ Normalized Interface ←→ Software
-```
-
-### Connection Patterns
-- **Teaching Mode**: USB Consumer only (read robot movements)
-- **Control Mode**: USB Producer only (software controls robot)  
-- **Bidirectional**: Both consumer and producer (full interaction)
-- **Broadcasting**: Multiple producers (send to hardware + remote systems)
-
-### Value Transformation Pipeline
-```
-Raw Servo (0-4095) ←→ Calibrated Range ←→ Normalized (-100/+100) ←→ Software Commands
-```
-
-This system provides a robust, safe, and flexible interface for robot hardware control while maintaining consistency across different robot configurations and use cases.

external/RobotHub-InferenceServer

@@ -1 +1 @@
-Subproject commit e3c6edfc01cbf01b6ca1ac19637a282017ef6c07
+Subproject commit be2822ebd8b95c11d982e7f93594016c2285954f

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

@@ -16,7 +16,6 @@
 		$props();
 
 	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
-	interactivity();
 
 	let isToggled = $state(false);
 
@@ -24,6 +23,7 @@
 		event.stopPropagation();
 		isToggled = !isToggled;
 	}
+
 </script>
 
 <T.Group

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

@@ -2,11 +2,13 @@
 	import { onMount } from "svelte";
 	import { remoteComputeManager } from "$lib/elements/compute/RemoteComputeManager.svelte";
 	import AISessionConnectionModal from "@/components/3d/elements/compute/modal/AISessionConnectionModal.svelte";
+	import AIModelConfigurationModal from "@/components/3d/elements/compute/modal/AIModelConfigurationModal.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";
+	import { interactivity } from "@threlte/extras";
 
 	interface Props {
 		workspaceId: string;
@@ -14,6 +16,7 @@
 	let { workspaceId }: Props = $props();
 
 	let isAISessionModalOpen = $state(false);
+	let isAIConfigModalOpen = $state(false);
 	let isVideoInputModalOpen = $state(false);
 	let isRobotInputModalOpen = $state(false);
 	let isRobotOutputModalOpen = $state(false);
@@ -64,6 +67,11 @@
 
 		return () => clearInterval(interval);
 	});
+	interactivity({
+		filter: (hits, state) => {
+			return hits.slice(0, 1);
+		}
+	});
 </script>
 
 {#each remoteComputeManager.computes as compute (compute.id)}
@@ -76,7 +84,7 @@
 {/each}
 
 {#if selectedCompute}
-	<!-- Inference Session Creation Modal -->
+	<!-- Inference Session Configuration Modal (for existing computes without sessions) -->
 	<AISessionConnectionModal bind:open={isAISessionModalOpen} compute={selectedCompute} {workspaceId} />
 	<!-- Video Input Connection Modal -->
 	<VideoInputConnectionModal bind:open={isVideoInputModalOpen} compute={selectedCompute} {workspaceId} />
@@ -84,4 +92,7 @@
 	<RobotInputConnectionModal bind:open={isRobotInputModalOpen} compute={selectedCompute} {workspaceId} />
 	<!-- Robot Output Connection Modal -->
 	<RobotOutputConnectionModal bind:open={isRobotOutputModalOpen} compute={selectedCompute} {workspaceId} /> 
-{/if}
+{/if}
+
+<!-- AI Model Configuration Modal (for creating new models) -->
+<AIModelConfigurationModal bind:open={isAIConfigModalOpen} {workspaceId} />

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

@@ -5,8 +5,8 @@
 	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 { Textarea } from "@/components/ui/textarea";
+	import { remoteComputeManager, MODEL_TYPES } from "$lib/elements/compute";
 	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";
@@ -22,9 +22,12 @@
 
 	let isConnecting = $state(false);
 	let sessionId = $state("");
-	let policyPath = $state("./checkpoints/act_so101_beyond");
-	let cameraNames = $state("front");
-	let useProvidedWorkspace = $state(false);
+	let policyPath = $state("");
+	let cameraNames = $state("");
+	let languageInstruction = $state("");
+
+	// Use the compute's model type (can't be changed here)
+	const modelConfig = $derived(MODEL_TYPES[compute.modelType]);
 
 	// Auto-generate session ID when modal opens
 	$effect(() => {
@@ -33,6 +36,18 @@
 		}
 	});
 
+	// Set defaults when modal opens
+	$effect(() => {
+		if (open && modelConfig) {
+			if (!policyPath) {
+				policyPath = modelConfig.defaultPolicyPath;
+			}
+			if (!cameraNames) {
+				cameraNames = modelConfig.defaultCameraNames.join(", ");
+			}
+		}
+	});
+
 	async function handleCreateSession() {
 		if (!compute) return;
 
@@ -41,6 +56,11 @@
 			return;
 		}
 
+		if (modelConfig.requiresLanguageInstruction && !languageInstruction.trim()) {
+			toast.error("Language instruction is required for this model type");
+			return;
+		}
+
 		isConnecting = true;
 		try {
 			const cameras = cameraNames
@@ -51,17 +71,19 @@
 				cameras.push("front");
 			}
 
-			const config: AISessionConfig = {
+			const sessionConfig: AISessionConfig = {
 				sessionId: sessionId.trim(),
+				modelType: compute.modelType,
 				policyPath: policyPath.trim(),
 				cameraNames: cameras,
 				transportServerUrl: settings.transportServerUrl,
-				workspaceId: useProvidedWorkspace ? workspaceId : undefined
+				workspaceId: workspaceId,
+				languageInstruction: languageInstruction.trim() || undefined
 			};
 
-			const result = await remoteComputeManager.createSession(compute.id, config);
+			const result = await remoteComputeManager.createSession(compute.id, sessionConfig);
 			if (result.success) {
-				toast.success(`Inference Session created: ${sessionId}`);
+				toast.success(`${modelConfig.label} session created: ${sessionId}`);
 				open = false;
 			} else {
 				toast.error(`Failed to create session: ${result.error}`);
@@ -140,11 +162,11 @@
 			<Dialog.Title
 				class="flex items-center gap-2 text-lg font-bold text-slate-900 dark:text-slate-100"
 			>
-				<span class="icon-[mdi--robot-outline] size-5 text-purple-500 dark:text-purple-400"></span>
-				AI Compute Session - {compute.name || "No Compute Selected"}
+				<span class="{modelConfig.icon} size-5 text-purple-500 dark:text-purple-400"></span>
+				{modelConfig.label} Session - {compute.name || "No Compute Selected"}
 			</Dialog.Title>
 			<Dialog.Description class="text-sm text-slate-600 dark:text-slate-400">
-				Configure and manage ACT model inference sessions for robot control
+				Configure and manage {modelConfig.label} inference sessions for robot control
 			</Dialog.Description>
 		</Dialog.Header>
 
@@ -154,7 +176,7 @@
 				class="flex items-center justify-between rounded-lg border border-purple-300/30 bg-purple-100/20 p-3 dark:border-purple-500/30 dark:bg-purple-900/20"
 			>
 				<div class="flex items-center gap-2">
-					<span class="icon-[mdi--brain] size-4 text-purple-500 dark:text-purple-400"></span>
+					<span class="{modelConfig.icon} size-4 text-purple-500 dark:text-purple-400"></span>
 					<span class="text-sm font-medium text-purple-700 dark:text-purple-300"
 						>Session Status</span
 					>
@@ -325,84 +347,84 @@
 					</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-700 dark:text-purple-300"
-										>Session ID</Label
-									>
-									<Input
-										id="sessionId"
-										bind:value={sessionId}
-										placeholder="my-session-01"
-										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
-									/>
-								</div>
-								<div class="space-y-2">
-									<Label for="policyPath" class="text-purple-700 dark:text-purple-300"
-										>Policy Path</Label
-									>
-									<Input
-										id="policyPath"
-										bind:value={policyPath}
-										placeholder="./checkpoints/act_so101_beyond"
-										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
-									/>
-								</div>
+							<div class="space-y-2">
+								<Label for="sessionId" class="text-purple-700 dark:text-purple-300"
+									>Session ID</Label
+								>
+								<Input
+									id="sessionId"
+									bind:value={sessionId}
+									placeholder="my-session-01"
+									class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+								/>
+							</div>
+							<div class="space-y-2">
+								<Label for="policyPath" class="text-purple-700 dark:text-purple-300"
+									>Policy Path</Label
+								>
+								<Input
+									id="policyPath"
+									bind:value={policyPath}
+									placeholder={modelConfig.defaultPolicyPath}
+									class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+								/>
 							</div>
 
-							<div class="grid grid-cols-2 gap-4">
+							<div class="space-y-2">
+								<Label for="cameraNames" class="text-purple-700 dark:text-purple-300"
+									>Camera Names</Label
+								>
+								<Input
+									id="cameraNames"
+									bind:value={cameraNames}
+									placeholder="front, wrist, overhead"
+									class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+								/>
+															<p class="text-xs text-slate-600 dark:text-slate-400">
+								Comma-separated camera names
+							</p>
+							</div>
+
+							{#if modelConfig.requiresLanguageInstruction}
 								<div class="space-y-2">
-									<Label for="cameraNames" class="text-purple-700 dark:text-purple-300"
-										>Camera Names</Label
-									>
-									<Input
-										id="cameraNames"
-										bind:value={cameraNames}
-										placeholder="front, wrist, overhead"
+									<Label for="languageInstruction" class="text-purple-700 dark:text-purple-300">
+										Language Instruction
+									</Label>
+									<Textarea
+										id="languageInstruction"
+										bind:value={languageInstruction}
+										placeholder="Pick up the red cup and place it on the table"
 										class="border-slate-300 bg-slate-50 text-slate-900 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
+										rows={3}
 									/>
 									<p class="text-xs text-slate-600 dark:text-slate-400">
-										Comma-separated camera names
+										Natural language instruction for the task (required for {modelConfig.label})
 									</p>
 								</div>
-								<div class="space-y-2">
-									<Label for="transportServerUrl" class="text-purple-700 dark:text-purple-300"
-										>Transport Server URL</Label
-									>
-									<Input
-										id="transportServerUrl"
-										value={settings.transportServerUrl}
-										disabled
-										placeholder="http://localhost:8000"
-										class="cursor-not-allowed border-slate-300 bg-slate-50 text-slate-900 opacity-60 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100"
-										title="Change this value in the settings panel"
-									/>
-									<p class="text-xs text-slate-600 dark:text-slate-400">
-										Configure in settings panel
-									</p>
-								</div>
-							</div>
+							{/if}
 
-							<div class="flex items-center space-x-2">
-								<input
-									type="checkbox"
-									id="useWorkspace"
-									bind:checked={useProvidedWorkspace}
-									class="rounded border-slate-300 bg-slate-50 dark:border-slate-600 dark:bg-slate-800"
-								/>
-								<Label for="useWorkspace" class="text-sm text-purple-700 dark:text-purple-300">
-									Use current workspace ({workspaceId})
-								</Label>
+							<div class="rounded-lg border border-green-300/30 bg-green-100/20 p-3 dark:border-green-500/30 dark:bg-green-900/20">
+								<div class="flex items-center gap-2">
+									<span class="icon-[mdi--folder] size-4 text-green-600 dark:text-green-400"></span>
+									<span class="text-sm font-medium text-green-700 dark:text-green-300">
+										Workspace: {workspaceId}
+									</span>
+								</div>
+								<p class="mt-1 text-xs text-green-600 dark:text-green-400">
+									Session will be created in the current workspace
+								</p>
 							</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
+							<div
+								class="rounded-lg border border-slate-300 bg-slate-50 p-3 dark:border-slate-600 dark:bg-slate-800"
+							>
+								<div class="text-xs text-slate-600 dark:text-slate-400">
+									<span class="icon-[mdi--lightbulb] size-3"></span>
+									<strong>Tip:</strong> This will create a new {modelConfig.label} inference session with dedicated rooms for camera
 									inputs, joint inputs, and joint outputs in the inference server communication
 									system.
-								</Alert.Description>
-							</Alert.Root>
+								</div>
+							</div>
 
 							<Button
 								variant="default"
@@ -428,7 +450,7 @@
 				class="rounded border border-slate-300 bg-slate-100/30 p-2 text-xs text-slate-600 dark:border-slate-700 dark:bg-slate-800/30 dark:text-slate-500"
 			>
 				<span class="icon-[mdi--information] mr-1 size-3"></span>
-				Inference Sessions require a trained ACT model and create dedicated communication rooms for video
+				Inference Sessions require a trained {modelConfig.label} and create dedicated communication rooms for video
 				inputs, robot joint states, and control outputs in the inference server system.
 			</div>
 		</div>

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

@@ -38,7 +38,7 @@
 	<StatusContent
 		title={compute.name}
 		subtitle={compute.statusInfo.statusText}
-		color="rgb(221, 214, 254)"
+		color="rgb(107, 33, 168)"
 		variant="primary"
 	/>
 </BaseStatusBox>

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

@@ -43,7 +43,7 @@
 		<StatusContent
 			title={`${Object.keys(compute.inputConnections.cameras).length} Cameras`}
 			subtitle="Joint States"
-			color="rgb(187, 247, 208)"
+			color="rgb(21, 128, 61)"
 			variant="primary"
 		/>
 
@@ -60,7 +60,7 @@
 			fontSize={12}
 		/>
 
-		<StatusContent title="Setup Required" color="rgb(134, 239, 172)" variant="secondary" />
+		<StatusContent title="Setup Required" color="rgb(34, 197, 94)" variant="secondary" />
 
 		<StatusButton
 			text="Add Session"

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

@@ -42,7 +42,7 @@
 		<StatusContent
 			title={compute.isRunning ? "Active" : "Ready"}
 			subtitle="Commands"
-			color="rgb(191, 219, 254)"
+			color="rgb(37, 99, 235)"
 			variant="primary"
 		/>
 
@@ -64,7 +64,7 @@
 
 		<StatusContent
 			title={!compute.hasSession ? "Need Session" : "Configure"}
-			color="rgb(147, 197, 253)"
+			color="rgb(59, 130, 246)"
 			variant="secondary"
 		/>
 

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

@@ -4,6 +4,8 @@
 	import { Root, Container } from "threlte-uikit";
 	import ComputeConnectionFlowBoxUIKit from "./ComputeConnectionFlowBoxUIKit.svelte";
 	import type { RemoteCompute } from "$lib/elements/compute//RemoteCompute.svelte";
+	import { Tween } from "svelte/motion";
+	import { cubicOut } from "svelte/easing";	
 
 	interface Props {
 		compute: RemoteCompute;
@@ -11,6 +13,8 @@
 		onVideoInputBoxClick: (compute: RemoteCompute) => void;
 		onRobotInputBoxClick: (compute: RemoteCompute) => void;
 		onRobotOutputBoxClick: (compute: RemoteCompute) => void;
+		duration?: number;
+		delay?: number;
 	}
 
 	let {
@@ -18,10 +22,19 @@
 		visible = true,
 		onVideoInputBoxClick,
 		onRobotInputBoxClick,
-		onRobotOutputBoxClick
+		onRobotOutputBoxClick,
+		duration = 100,
+		delay = 0
 	}: Props = $props();
 
 	interactivity();
+
+	const tweenedScale = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedOpacity = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
 </script>
 
 <T.Group
@@ -31,7 +44,6 @@
 	rotation={[-Math.PI / 2, 0, 0]}
 	scale={[0.1, 0.1, 0.1]}
 	pointerEvents="listener"
-	{visible}
 >
 	<Billboard>
 		<Root name={`compute-status-billboard-${compute.id}`}>
@@ -41,6 +53,10 @@
 				alignItems="center"
 				justifyContent="center"
 				padding={20}
+				transformScaleX={tweenedScale.current}
+				transformScaleY={tweenedScale.current}
+				transformScaleZ={tweenedScale.current}
+				opacity={tweenedOpacity.current}
 			>
 				<ComputeConnectionFlowBoxUIKit
 					{compute}

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

@@ -41,7 +41,7 @@
 		<StatusContent
 			title="Joint States"
 			subtitle="6 DOF Robot"
-			color="rgb(254, 215, 170)"
+			color="rgb(180, 83, 9)"
 			variant="primary"
 		/>
 
@@ -57,7 +57,7 @@
 			fontSize={11}
 		/>
 
-		<StatusContent title="Setup Robot" color="rgb(254, 215, 170)" variant="secondary" />
+		<StatusContent title="Setup Robot" color="rgb(245, 158, 11)" variant="secondary" />
 
 		<StatusButton
 			icon={ICON["icon-[mdi--plus]"].svg}

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

@@ -32,7 +32,7 @@
 		<StatusContent 
 			title={compute.isRunning ? "AI Commands Active" : "Session Ready"}
 			subtitle="Motor Control"
-			color="rgb(191, 219, 254)"
+			color="rgb(37, 99, 235)"
 			variant="primary"
 		/>
 
@@ -55,7 +55,7 @@
 
 		<StatusContent 
 			title={!compute.hasSession ? 'Need Session' : 'Click to Configure'}
-			color="rgb(147, 197, 253)"
+			color="rgb(59, 130, 246)"
 			variant="secondary"
 		/>
 

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

@@ -35,7 +35,7 @@
 		<!-- Camera Streams -->
 		<StatusContent 
 			title={`${Object.keys(compute.inputConnections.cameras).length} Cameras`}
-			color="rgb(187, 247, 208)"
+			color="rgb(21, 128, 61)"
 			variant="primary"
 		/>
 
@@ -53,7 +53,7 @@
 
 		<StatusContent 
 			title="Setup Video" 
-			color="rgb(134, 239, 172)" 
+			color="rgb(34, 197, 94)" 
 			variant="secondary"
 		/>
 

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

@@ -6,7 +6,7 @@
 	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 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";
@@ -66,6 +66,7 @@
 		// Batch update all joints that have changed (or all joints on initial sync)
 		let updatedCount = 0;
 		robot.jointArray.forEach((joint) => {
+			if (!urdfRobotState) return;
 			if (isInitialSync || Math.abs((lastJointValues[joint.name] || 0) - joint.value) > threshold) {
 				lastJointValues[joint.name] = joint.value;
 				const urdfJoint = findUrdfJoint(urdfRobotState, joint.name);
@@ -92,7 +93,7 @@
 		});
 	});
 
-	function findUrdfJoint(robot: Robot, jointName: string): any {
+	function findUrdfJoint(robot: IUrdfRobot, jointName: string): any {
 		// Search through the robot's joints array
 		if (robot.joints && Array.isArray(robot.joints)) {
 			for (const joint of robot.joints) {
@@ -105,7 +106,7 @@
 	}
 
 	const { onPointerEnter, onPointerLeave, hovering } = useCursor();
-	interactivity();
+	
 
 	let isToggled = $state(false);
 
@@ -123,7 +124,13 @@
 	scale={[10, 10, 10]}
 	rotation={[-Math.PI / 2, 0, 0]}
 >
-	<T.Group onpointerenter={onPointerEnter} onpointerleave={onPointerLeave} onclick={handleClick}>
+	<T.Group onpointerenter={(event) => {
+		event.stopPropagation();
+		onPointerEnter();
+	}} onpointerleave={(event) => {
+		event.stopPropagation();
+		onPointerLeave();
+	}} onclick={handleClick}>
 		{#if urdfRobotState}
 			{#each getRootLinks(urdfRobotState) as link}
 				<UrdfLink
@@ -144,7 +151,6 @@
 					nameHeight={0.1}
 					showLine={$hovering || isToggled}
 					opacity={1}
-					isInteractive={false}
 				/>
 			{/each}
 		{:else}

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

@@ -7,6 +7,7 @@
 	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";
+	import { interactivity } from "@threlte/extras";
 
 	interface Props {
 		workspaceId: string;
@@ -64,6 +65,11 @@
 				console.error("❌ Error during cleanup:", error);
 			});
 	});
+	interactivity({
+		filter: (hits, state) => {
+			return hits.slice(0, 1);
+		}
+	});
 </script>
 
 {#each robotManager.robots as robot (robot.id)}

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

@@ -145,7 +145,6 @@
 				{nameHeight}
 				{showLine}
 				opacity={1}
-				isInteractive={true}
 			/>
 		{/if}
 

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

@@ -28,7 +28,6 @@
 		nameHeight?: number;
 		showLine?: boolean;
 		opacity?: number;
-		isInteractive?: boolean;
 	}
 
 	let {
@@ -49,7 +48,6 @@
 		nameHeight = 0.1,
 		showLine = true,
 		opacity = 0.7,
-		isInteractive = false
 	}: Props = $props();
 
 	let showPointCloud = false;
@@ -85,7 +83,6 @@
 		{jointIndicatorColor}
 		{showLine}
 		{opacity}
-		{isInteractive}
 		{showVisual}
 		{showCollision}
 		{visualOpacity}

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

@@ -62,7 +62,6 @@
 			{nameHeight}
 			showLine={false}
 			opacity={1}
-			isInteractive={false}
 		/>
 	{/each}
 </T.Group>

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

@@ -9,6 +9,7 @@
 	import type { Robot } from "$lib/elements/robot/Robot.svelte.js";
 	import { robotManager } from "$lib/elements/robot/RobotManager.svelte.js";
 	import USBCalibrationPanel from "$lib/elements/robot/calibration/USBCalibrationPanel.svelte";
+	import { settings } from "@/runes/settings.svelte";
 
 	interface Props {
 		workspaceId: string;
@@ -181,9 +182,9 @@
 		showUSBCalibration = false;
 		pendingUSBConnection = null;
 		isConnecting = false;
-		
+
 		// Clean up the uncalibrated USB consumer
-		robot.removeConsumer().catch(err => {
+		robot.removeConsumer().catch((err) => {
 			console.error("Failed to clean up USB consumer after calibration cancel:", err);
 		});
 	}
@@ -261,9 +262,7 @@
 									onCancel={onCalibrationCancel}
 								/>
 							{:else}
-								<div class="text-center text-slate-400">
-									No USB drivers require calibration
-								</div>
+								<div class="text-center text-slate-400">No USB drivers require calibration</div>
 							{/each}
 						</Card.Content>
 					</Card.Root>
@@ -370,13 +369,14 @@
 							<div class="flex items-center justify-between">
 								<div>
 									<Card.Title
-										class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+										class="flex items-center gap-2 pb-1 text-base text-purple-700 dark:text-purple-200"
 									>
 										<span class="icon-[mdi--cloud-sync] size-4"></span>
-										Remote Collaboration (Rooms)
+										Remote Control
 									</Card.Title>
 									<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
-										Receive commands from AI systems, remote users, or other software
+										Receive commands from AI systems, remote users, or other software from anywhere
+										in the world
 									</Card.Description>
 								</div>
 								<Button
@@ -499,11 +499,36 @@
 															>
 																{room.id}
 															</p>
-															<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+															<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
 																<span>{room.has_producer ? "📤 Has Output" : "📥 No Output"}</span>
 																<span>👥 {room.participants?.total || 0} users</span>
+																<!-- Monitoring links -->
+																<div class="flex gap-1">
+																	<a
+																		href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/consumer?room=${room.id}`}
+																		target="_blank"
+																		rel="noopener noreferrer"
+																		class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
+																		title="Monitor Consumer"
+																	>
+																		<span class="icon-[mdi--monitor-eye] size-3"></span>
+																		Consumer
+																	</a>
+																	<a
+																		href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/producer?room=${room.id}`}
+																		target="_blank"
+																		rel="noopener noreferrer"
+																		class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
+																		title="Monitor Producer"
+																	>
+																		<span class="icon-[mdi--monitor-eye] size-3"></span>
+																		Producer
+																	</a>
+																</div>
 															</div>
+															
 														</div>
+														
 														<Button
 															variant="secondary"
 															size="sm"
@@ -514,7 +539,7 @@
 															disabled={isConnecting || robot.hasConsumer}
 															class="h-6 shrink-0 bg-purple-500 px-2 text-xs hover:bg-purple-600 disabled:opacity-50 dark:bg-purple-600 dark:hover:bg-purple-700"
 														>
-															<span class="icon-[mdi--login] mr-1 size-3"></span>
+															<span class="icon-[mdi--login] size-5 h-full w-full"></span>
 															Join as Input
 														</Button>
 													</div>
@@ -532,18 +557,6 @@
 							{/if}
 						</Card.Content>
 					</Card.Root>
-
-					<!-- Help Information -->
-					<Alert.Root
-						class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
-					>
-						<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-						<Alert.Title class="text-slate-700 dark:text-slate-300">Input Sources</Alert.Title>
-						<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
-							<strong>USB:</strong> Read physical movements • <strong>Remote:</strong> Receive network
-							commands • Only one active at a time
-						</Alert.Description>
-					</Alert.Root>
 				{/if}
 			</div>
 		</div>

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

@@ -340,13 +340,13 @@
 							<div class="flex items-center justify-between">
 								<div>
 									<Card.Title
-										class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200"
+										class="flex items-center gap-2 text-base text-orange-700 dark:text-orange-200 pb-1"
 									>
 										<span class="icon-[mdi--cloud-sync] size-4"></span>
-										Remote Collaboration (Rooms)
+										Remote Control
 									</Card.Title>
 									<Card.Description class="text-xs text-orange-600/70 dark:text-orange-300/70">
-										Broadcast robot movements to remote systems and AI
+										Broadcast robot movements to remote robots or AI systems from anywhere in the world
 									</Card.Description>
 								</div>
 								<Button
@@ -441,9 +441,32 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
 															<span>{room.has_producer ? "🔴 Occupied" : "🟢 Available"}</span>
 															<span>👥 {room.participants?.total || 0} users</span>
+															<!-- Monitoring links -->
+															<div class="flex gap-1">
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/consumer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
+																	title="Monitor Consumer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Consumer
+																</a>
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/robotics/producer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
+																	title="Monitor Producer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Producer
+																</a>
+															</div>
 														</div>
 													</div>
 													{#if !room.has_producer}
@@ -525,18 +548,6 @@
 							</Card.Content>
 						</Card.Root>
 					{/if}
-
-					<!-- Help Information -->
-					<Alert.Root
-						class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
-					>
-						<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-						<Alert.Title class="text-slate-700 dark:text-slate-300">Output Sources</Alert.Title>
-						<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
-							<strong>USB:</strong> Control physical hardware • <strong>Remote:</strong> Broadcast to
-							network • Multiple outputs can be active
-						</Alert.Description>
-					</Alert.Root>
 				{/if}
 			</div>
 		</div>

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

@@ -5,21 +5,41 @@
 	import InputBoxUIKit from "./InputBoxUIKit.svelte";
 	import RobotBoxUIKit from "./RobotBoxUIKit.svelte";
 	import OutputBoxUIKit from "./OutputBoxUIKit.svelte";
+	import { Tween } from "svelte/motion";
+	import { cubicOut } from "svelte/easing";
 
 	interface Props {
+		visible: boolean;
 		robot: Robot;
 		onInputBoxClick: (robot: Robot) => void;
 		onRobotBoxClick: (robot: Robot) => void;
 		onOutputBoxClick: (robot: Robot) => void;
+		duration?: number;
+		delay?: number;
 	}
 
-	let { robot, onInputBoxClick, onRobotBoxClick, onOutputBoxClick }: Props = $props();
+	let { visible, robot, onInputBoxClick, onRobotBoxClick, onOutputBoxClick, duration = 100, delay = 0 }: Props = $props();
 
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
+
+	const tweenedScale = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedOpacity = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
 </script>
 
-<Container flexDirection="row" alignItems="center" gap={12}>
+<Container
+	flexDirection="row"
+	alignItems="center"
+	gap={12}
+	transformScaleX={tweenedScale.current}
+	transformScaleY={tweenedScale.current}
+	transformScaleZ={tweenedScale.current}
+	opacity={tweenedOpacity.current}
+>
 	<!-- Input Box -->
 	<InputBoxUIKit {robot} {onInputBoxClick} />
 

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

@@ -41,7 +41,7 @@
 		<!-- Outputs Count -->
 		<StatusContent
 			title={`${robot.outputDriverCount} Outputs Active`}
-			color="rgb(191, 219, 254)"
+			color={outputColor}
 			variant="primary"
 		/>
 

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

@@ -26,7 +26,7 @@
 	interactivity();
 </script>
 
-{#if visible}
+<!-- {#if visible} -->
 	<T.Group
 		position.z={0.35}
 		rotation={[Math.PI / 2, 0, 0]}
@@ -43,7 +43,13 @@
 					justifyContent="center"
 					padding={20}
 				>
-					<ConnectionFlowBoxUIkit {robot} {onInputBoxClick} {onRobotBoxClick} {onOutputBoxClick} />
+					<ConnectionFlowBoxUIkit
+						{visible}
+						{robot}
+						{onInputBoxClick}
+						{onRobotBoxClick}
+						{onOutputBoxClick}
+					/>
 				</Container>
 			</Root>
 		</Billboard>
@@ -81,4 +87,4 @@
 		</HTML>
 	</Billboard> -->
 	</T.Group>
-{/if}
+<!-- {/if} -->

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

@@ -16,7 +16,6 @@
 	let { video, workspaceId, onCameraMove, onInputBoxClick, onOutputBoxClick }: Props = $props();
 
 	const { onPointerEnter, onPointerLeave } = useCursor();
-	interactivity();
 
 	let isToggled = $state(false);
 	let hovering = $state(false);

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

@@ -7,6 +7,7 @@
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { generateName } from "$lib/utils/generateName";
 	import VideoGridItem from "@/components/3d/elements/video/VideoGridItem.svelte";
+	import { interactivity } from "@threlte/extras";
 
 	interface Props {
 		workspaceId: string;
@@ -27,6 +28,12 @@
 		selectedVideo = video;
 		isOutputModalOpen = true;
 	}
+
+	interactivity({
+		filter: (hits, state) => {
+			return hits.slice(0, 1);
+		}
+	});
 </script>
 
 {#each videoManager.videos as video (video.id)}

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

@@ -7,6 +7,7 @@
 	import { toast } from "svelte-sonner";
 	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
+	import { settings } from "$lib/runes/settings.svelte";
 
 	interface Props {
 		workspaceId: string;
@@ -355,10 +356,10 @@
 						<div class="flex items-center justify-between">
 							<div>
 								<Card.Title
-									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200 pb-1"
 								>
 									<span class="icon-[mdi--cloud-download] size-4"></span>
-									Remote Collaboration (Rooms)
+									Remote Control
 								</Card.Title>
 								<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
 									Receive video streams from remote cameras or AI systems
@@ -483,13 +484,36 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
 															<span
 																>{room.participants?.producer
 																	? "📹 Has Output"
 																	: "📭 No Output"}</span
 															>
 															<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+															<!-- Monitoring links -->
+															<div class="flex gap-1">
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/consumer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
+																	title="Monitor Consumer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Consumer
+																</a>
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/producer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
+																	title="Monitor Producer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Producer
+																</a>
+															</div>
 														</div>
 													</div>
 													{#if room.participants?.producer}
@@ -529,17 +553,6 @@
 					</Card.Content>
 				</Card.Root>
 
-				<!-- Help Information -->
-				<Alert.Root
-					class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
-				>
-					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-					<Alert.Title class="text-slate-700 dark:text-slate-300">Video Input Sources</Alert.Title>
-					<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
-						<strong>Camera:</strong> Local device camera • <strong>Remote:</strong> Video streams from
-						rooms • Only one active at a time
-					</Alert.Description>
-				</Alert.Root>
 			</div>
 		</div>
 	</Dialog.Content>

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

@@ -7,6 +7,7 @@
 	import { toast } from "svelte-sonner";
 	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
+	import { settings } from "$lib/runes/settings.svelte";
 
 	interface Props {
 		workspaceId: string;
@@ -92,7 +93,6 @@
 		try {
 			isConnecting = true;
 			error = null;
-			const roomId = customRoomId.trim() || video.id;
 			const result = await videoManager.startVideoOutputAsProducer(workspaceId, video.id);
 			if (result.success) {
 				customRoomId = "";
@@ -366,10 +366,10 @@
 						<div class="flex items-center justify-between">
 							<div>
 								<Card.Title
-									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200"
+									class="flex items-center gap-2 text-base text-purple-700 dark:text-purple-200 pb-1"
 								>
 									<span class="icon-[mdi--cloud-upload] size-4"></span>
-									Remote Collaboration (Rooms)
+									Remote Control
 								</Card.Title>
 								<Card.Description class="text-xs text-purple-600/70 dark:text-purple-300/70">
 									Broadcast video stream to remote systems and users
@@ -483,7 +483,7 @@
 												: "No rooms available. Create one to get started."}
 										</div>
 									{:else}
-										{#each videoManager.rooms as room}
+										{#each videoManager.rooms as room (room.id)}
 											<div
 												class="rounded border border-slate-300 bg-slate-50/50 p-2 dark:border-slate-600 dark:bg-slate-800/50"
 											>
@@ -494,13 +494,36 @@
 														>
 															{room.id}
 														</p>
-														<div class="flex gap-3 text-xs text-slate-600 dark:text-slate-400">
+														<div class="flex items-center gap-3 text-xs text-slate-600 dark:text-slate-400">
 															<span
 																>{room.participants?.producer
 																	? "🔴 Has Output"
 																	: "🟢 Available"}</span
 															>
 															<span>👥 {room.participants?.consumers?.length || 0} inputs</span>
+															<!-- Monitoring links -->
+															<div class="flex gap-1">
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/consumer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-blue-500/10 px-1.5 py-0.5 text-xs text-blue-600 hover:bg-blue-500/20 dark:bg-blue-400/10 dark:text-blue-400 dark:hover:bg-blue-400/20"
+																	title="Monitor Consumer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Consumer
+																</a>
+																<a
+																	href={`${settings.transportServerUrl.replace('/api', '')}/${workspaceId}/video/producer?room=${room.id}`}
+																	target="_blank"
+																	rel="noopener noreferrer"
+																	class="inline-flex items-center gap-1 rounded bg-green-500/10 px-1.5 py-0.5 text-xs text-green-600 hover:bg-green-500/20 dark:bg-green-400/10 dark:text-green-400 dark:hover:bg-green-400/20"
+																	title="Monitor Producer"
+																>
+																	<span class="icon-[mdi--monitor-eye] size-3"></span>
+																	Producer
+																</a>
+															</div>
 														</div>
 													</div>
 													{#if !room.participants?.producer}
@@ -540,17 +563,7 @@
 					</Card.Content>
 				</Card.Root>
 
-				<!-- Help Information -->
-				<Alert.Root
-					class="border-slate-300 bg-slate-100/30 dark:border-slate-700 dark:bg-slate-800/30"
-				>
-					<span class="icon-[mdi--help-circle] size-4 text-slate-600 dark:text-slate-400"></span>
-					<Alert.Title class="text-slate-700 dark:text-slate-300">Video Output Options</Alert.Title>
-					<Alert.Description class="text-xs text-slate-600 dark:text-slate-400">
-						<strong>Recording:</strong> Save locally • <strong>Remote:</strong> Broadcast to rooms •
-						Only one active at a time
-					</Alert.Description>
-				</Alert.Root>
+
 			</div>
 		</div>
 	</Dialog.Content>

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

@@ -5,38 +5,55 @@
 	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { Container } from "threlte-uikit";
 	import { StatusArrow } from "$lib/components/3d/ui";
+	import { Tween } from "svelte/motion";
+	import { cubicOut } from "svelte/easing";
 
 	interface Props {
+		visible: boolean;
 		video: VideoInstance;
 		onInputBoxClick: (video: VideoInstance) => void;
 		onOutputBoxClick: (video: VideoInstance) => void;
+		duration?: number;
+		delay?: number;
 	}
 
-	let { video, onInputBoxClick, onOutputBoxClick }: Props = $props();
+	let { visible, video, onInputBoxClick, onOutputBoxClick, duration = 100, delay = 0 }: Props = $props();
 
 	const inputColor = "rgb(34, 197, 94)";
 	const outputColor = "rgb(59, 130, 246)";
+
+	const tweenedScale = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
+	const tweenedOpacity = Tween.of(() => {
+		return visible ? 1 : 0;
+	}, { duration: duration, easing: cubicOut, delay: delay });
 </script>
 
-<Container flexDirection="row" alignItems="center" gap={12}>
+<Container
+	flexDirection="row"
+	alignItems="center"
+	gap={12}
+	transformScaleX={tweenedScale.current}
+	transformScaleY={tweenedScale.current}
+	transformScaleZ={tweenedScale.current}
+	opacity={tweenedOpacity.current}
+>
 	<!-- Input Video Box -->
 	<InputVideoBoxUIKit {video} handleClick={() => onInputBoxClick(video)} />
 
 	<!-- Arrow 1: Input to Video -->
-	<StatusArrow 
-		color={inputColor}
-		opacity={video.hasInput ? 1 : 0.5}
-	/>
+	<StatusArrow color={inputColor} opacity={video.hasInput ? 1 : 0.5} />
 
 	<!-- Video Box -->
 	<VideoBoxUIKit {video} />
 
 	<!-- Arrow 2: Video to Output -->
-	<StatusArrow 
+	<StatusArrow
 		color={outputColor}
 		opacity={video.hasInput && video.hasOutput ? 1 : video.hasInput && video.canOutput ? 0.7 : 0.5}
 	/>
 
 	<!-- Output Box -->
 	<OutputVideoBoxUIKit {video} handleClick={() => onOutputBoxClick(video)} />
-</Container> 
+</Container>

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

@@ -18,7 +18,7 @@
 	interactivity();
 </script>
 
-{#if visible}
+<!-- {#if visible} -->
 	<T.Group
 		onpointerdown={(e) => e.stopPropagation()}
 		onpointerup={(e) => e.stopPropagation()}
@@ -39,7 +39,7 @@
 					justifyContent="center"
 					padding={20}
 				>
-					<VideoConnectionFlowBoxUIKit {video} {onInputBoxClick} {onOutputBoxClick} />
+					<VideoConnectionFlowBoxUIKit {visible} {video} {onInputBoxClick} {onOutputBoxClick} />
 				</Container>
 			</Root>
 		</Billboard>
@@ -73,4 +73,4 @@
 		</HTML>
 	</Billboard> -->
 	</T.Group>
-{/if}
+<!-- {/if} -->

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

@@ -1,81 +1,55 @@
 <script lang="ts">
 	import { Button } from "@/components/ui/button";
 	import * as DropdownMenu from "@/components/ui/dropdown-menu";
-	import { toast } from "svelte-sonner";
 	import { cn } from "$lib/utils";
-	import { generateName } from "@/utils/generateName";
-	import { remoteComputeManager } from "$lib/elements/compute//RemoteComputeManager.svelte";
+	import { MODEL_TYPES, type ModelType } from "$lib/elements/compute";
+	import AIModelConfigurationModal from "@/components/3d/elements/compute/modal/AIModelConfigurationModal.svelte";
 
 	interface Props {
+		workspaceId: string;
 		open?: boolean;
 	}
 
-	let { open = $bindable() }: Props = $props();
+	let { open = $bindable(), workspaceId }: Props = $props();
 
-	const aiOptions = [
-		{ id: "act", label: "ACT Model", icon: "icon-[mdi--brain]", enabled: true },
-		{ id: "pi0", label: "Pi0", icon: "icon-[mdi--brain]", enabled: false },
-		{ id: "nano-vla", label: "Nano VLA", icon: "icon-[mdi--brain]", enabled: false },
-		{ id: "nvidia-groot", label: "Nvidia Groot", icon: "icon-[mdi--robot-outline]", enabled: false }
-	];
+	let isConfigModalOpen = $state(false);
+	let selectedModelType = $state<ModelType>('act');
 
-	async function addAI(aiType: string) {
-		try {
-			// Basic validation
-			if (!aiType) return;
+	// Get available model types
+	const availableModels = Object.values(MODEL_TYPES).filter(model => model.enabled);
 
-			const computeId = generateName();
-			const computeName = `${formatAIType(aiType)} ${computeId}`;
-
-			// Create a new compute instance
-			const compute = remoteComputeManager.createCompute(computeId, computeName);
-
-			toast.success(`Created ${formatAIType(aiType)} compute: ${computeName}`);
+	function openConfigModal(modelType: ModelType) {
+		selectedModelType = modelType;
+		isConfigModalOpen = true;
+		open = false; // Close the dropdown
+	}
 
-			// Close the dropdown
-			open = false;
-		} catch (error) {
-			console.error("AI creation failed:", error);
-			toast.error("Failed to create AI compute");
-		}
+	function quickAddACT() {
+		openConfigModal('act');
 	}
 
-	async function quickAddAI() {
-		await addAI("act");
+	function formatModelType(modelType: string): string {
+		const config = MODEL_TYPES[modelType as ModelType];
+		return config ? config.label : modelType;
 	}
 
-	function formatAIType(aiType: string): string {
-		switch (aiType) {
-			case "pi0":
-				return "Pi0";
-			case "nano-vla":
-				return "Nano VLA";
-			case "nvidia-groot":
-				return "Nvidia Groot";
-			default:
-				return aiType;
-		}
+	function getModelDescription(modelType: string): string {
+		const config = MODEL_TYPES[modelType as ModelType];
+		return config ? config.description : "AI model";
 	}
 
-	function getAIDescription(aiType: string): string {
-		switch (aiType) {
-			case "pi0":
-				return "Lightweight AI model";
-			case "nano-vla":
-				return "Vision-language-action model";
-			case "nvidia-groot":
-				return "Humanoid robotics model";
-			default:
-				return "AI model";
-		}
+	function getModelIcon(modelType: string): string {
+		const config = MODEL_TYPES[modelType as ModelType];
+		return config ? config.icon : "icon-[mdi--brain]";
 	}
 </script>
 
-<!-- Main Add Button (Neural Network) -->
+<!-- Main Add Button (ACT Model - Quick Add) -->
 <Button
 	variant="default"
 	size="sm"
-	onclick={quickAddAI}
+	onclick={quickAddACT}
+	disabled={true}
 	class="group rounded-r-none border-0 bg-purple-500 text-white transition-all duration-200 hover:bg-purple-400 dark:bg-purple-600 dark:hover:bg-purple-500"
 >
 	<span
@@ -93,6 +67,7 @@
 		{#snippet child({ props })}
 			<Button
 				{...props}
+				disabled={true}
 				variant="default"
 				size="sm"
 				class={cn(
@@ -112,44 +87,29 @@
 		{/snippet}
 	</DropdownMenu.Trigger>
 
-	<DropdownMenu.Content
-		class="w-56 border-purple-400/30 bg-purple-500 backdrop-blur-sm dark:border-purple-500/30 dark:bg-purple-600"
-		align="center"
-	>
-		<DropdownMenu.Group>
-			<DropdownMenu.GroupHeading
-				class="text-xs font-semibold tracking-wider text-purple-100 uppercase dark:text-purple-200"
+	<DropdownMenu.Content class="w-64 bg-slate-100 border-slate-300 dark:bg-slate-900 dark:border-slate-600">
+		{#each availableModels as model}
+			<DropdownMenu.Item
+				class="flex items-center gap-3 p-3 cursor-pointer hover:bg-purple-100 dark:hover:bg-purple-900/30"
+				onclick={() => openConfigModal(model.id)}
 			>
-				AI Types
-			</DropdownMenu.GroupHeading>
-
-			{#each aiOptions as ai}
-				<DropdownMenu.Item
-					class={[
-						"group group cursor-pointer bg-purple-500 text-white transition-all duration-200",
-						"data-highlighted:bg-purple-600 dark:bg-purple-600 dark:data-highlighted:bg-purple-700"
-					]}
-					onclick={async () => await addAI(ai.id)}
-					disabled={!ai.enabled}
-				>
-					<span
-						class={[
-							ai.icon,
-							"mr-3 size-4 text-purple-100 transition-colors duration-200 dark:text-purple-200"
-						]}
-					></span>
-					<div class="flex flex-1 flex-col">
-						<span class="font-medium text-white transition-colors duration-200"
-							>{formatAIType(ai.id)}</span
-						>
-						<span
-							class="text-xs text-purple-100 transition-colors duration-200 dark:text-purple-200"
-						>
-							{getAIDescription(ai.id)}
-						</span>
+				<span class="{model.icon} size-5 text-purple-500 dark:text-purple-400"></span>
+				<div class="flex-1">
+					<div class="font-medium text-slate-900 dark:text-slate-100">
+						{model.label}
+					</div>
+					<div class="text-xs text-slate-600 dark:text-slate-400">
+						{model.description}
 					</div>
-				</DropdownMenu.Item>
-			{/each}
-		</DropdownMenu.Group>
+				</div>
+			</DropdownMenu.Item>
+		{/each}
 	</DropdownMenu.Content>
 </DropdownMenu.Root>
+
+<!-- Configuration Modal -->
+<AIModelConfigurationModal 
+	bind:open={isConfigModalOpen} 
+	{workspaceId}
+	initialModelType={selectedModelType}
+/>

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

@@ -44,17 +44,23 @@
 		}
 	}
 
-	async function quickAddSO100() {
-		await addRobot("so-arm100");
+	async function quickAddDefault() {
+		const defaultRobotType = robotTypes.find(type => robotUrdfConfigMap[type].isDefault);
+		if (defaultRobotType) {
+			await addRobot(defaultRobotType);
+		} else {
+			// Fallback to first robot type if no default is set
+			await addRobot(robotTypes[0]);
+		}
 	}
 
 </script>
 
-<!-- Main Add Button (SO-100) -->
+<!-- Main Add Button (Default Robot) -->
 <Button
 	variant="default"
 	size="sm"
-	onclick={quickAddSO100}
+	onclick={quickAddDefault}
 	class="group rounded-r-none border-0 bg-emerald-500 text-white transition-all duration-200 hover:bg-emerald-400 dark:bg-emerald-600 dark:hover:bg-emerald-500"
 >
 	<span
@@ -103,6 +109,7 @@
 			</DropdownMenu.GroupHeading>
 
 			{#each robotTypes as robotType}
+				{@const urdfConfig = robotUrdfConfigMap[robotType]}
 				<DropdownMenu.Item
 					class={[
 						"group group cursor-pointer bg-emerald-500 text-white transition-all duration-200",
@@ -112,19 +119,19 @@
 				>
 					<span
 						class={[
-							robotType === "so-arm100" ? "icon-[ix--robotic-arm]" : "icon-[mdi--robot-industrial]",
+							urdfConfig.icon || "icon-[mdi--robot-industrial]",
 							"mr-3 size-4 text-emerald-100 transition-colors duration-200 dark:text-emerald-200"
 						]}
 					></span>
 					<div class="flex flex-1 flex-col">
 						<span class="font-medium text-white transition-colors duration-200"
-							>{robotType.replace(/-/g, " ").toUpperCase()}</span
+							>{urdfConfig.displayName || robotType.replace(/-/g, " ").toUpperCase()}</span
 						>
 						<span class="text-xs text-emerald-100 transition-colors duration-200 dark:text-emerald-200">
-							{robotType === "so-arm100" ? "6-DOF Robotic Arm" : "Industrial Robot"}
+							{urdfConfig.description || "Robot"}
 						</span>
 					</div>
-					{#if robotType === "so-arm100"}
+					{#if urdfConfig.isDefault}
 						<Badge
 							variant="secondary"
 							class="ml-2 bg-emerald-600 text-xs text-emerald-100 group-data-highlighted:bg-emerald-300 group-data-highlighted:text-emerald-900 dark:bg-emerald-700 dark:text-emerald-100 dark:group-data-highlighted:bg-emerald-400 dark:group-data-highlighted:text-emerald-900"

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

@@ -29,6 +29,13 @@
 			enabled: true,
 			isDefault: true
 		},
+		{ 
+			id: 'depth-camera', 
+			label: 'Depth Camera', 
+			description: 'Depth Camera Sensor',
+			icon: 'icon-[mdi--camera]', 
+			enabled: false 
+		},
 		{ 
 			id: 'lidar', 
 			label: 'Lidar', 

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

@@ -26,49 +26,44 @@
 </script>
 
 <div class="select-none">
-	<!-- Button Bar Container -->
-	<div class="fixed top-4 left-4 z-50 flex gap-2 select-none">
-		<!-- Add Robot Button Group -->
-		<div class="flex items-center justify-center gap-2 overflow-hidden rounded-lg">
+	<!-- Responsive Button Bar Container -->
+	<div class="fixed top-2 left-2 right-2 z-50 flex flex-wrap items-center justify-between gap-1 select-none md:top-4 md:left-4 md:right-4 md:gap-2">
+		<!-- Left Group: Logo + Add Buttons -->
+		<div class="flex items-center gap-1 flex-wrap md:gap-2">
 			<!-- Logo/Favicon -->
 			<div class="flex items-center justify-center">
-				<!-- From /favicon_1024.png -->
 				<img
 					src="/favicon_1024.png"
 					alt="Logo"
 					draggable="false"
-					class="h-10 w-10 invert-0 filter dark:invert"
+					class="h-8 w-8 invert-0 filter dark:invert md:h-10 md:w-10"
 				/>
 			</div>
-			<!-- Add robot button and dropdown menu (Top Left) -->
-			<div class="flex items-center justify-center">
+			
+			<!-- Add Robot Button Group -->
+			<div class="flex items-center justify-center overflow-hidden rounded-lg">
 				<AddRobotButton bind:open={addRobotDropdownMenuOpen} />
 			</div>
-		</div>
 
-		<!-- Add Sensor Button Group -->
-		<div class="flex items-center justify-center overflow-hidden rounded-lg">
-			<!-- Add sensor button and dropdown menu -->
-			<div class="flex items-center justify-center">
+			<!-- Add Sensor Button Group - Hidden on very small screens -->
+			<div class="hidden min-[480px]:flex items-center justify-center overflow-hidden rounded-lg">
 				<AddSensorButton bind:open={addSensorDropdownMenuOpen} />
 			</div>
-		</div>
 
-		<!-- Add AI Button Group -->
-		<div class="flex items-center justify-center overflow-hidden rounded-lg">
-			<!-- Add AI button and dropdown menu -->
-			<div class="flex items-center justify-center">
-				<AddAIButton bind:open={addAIDropdownMenuOpen} />
+			<!-- Add AI Button Group - Hidden on small screens -->
+			<div class="hidden min-[560px]:flex items-center justify-center overflow-hidden rounded-lg">
+				<AddAIButton bind:open={addAIDropdownMenuOpen} workspaceId={workspaceId} />
 			</div>
 		</div>
-	</div>
 
-	<div class="fixed top-4 right-4 z-50 flex gap-2">
-		<!-- Workspace ID Button -->
-		<WorkspaceIdButton {workspaceId} bind:open={workspaceIdMenuOpen} />
+		<!-- Right Group: Workspace ID + Settings -->
+		<div class="flex items-center gap-1 md:gap-2">
+			<!-- Workspace ID Button -->
+			<WorkspaceIdButton {workspaceId} bind:open={workspaceIdMenuOpen} />
 
-		<!-- Settings Button and Sheet (Top Right, Left Side) -->
-		<SettingsButton bind:open={settingsOpen} />
+			<!-- Settings Button -->
+			<SettingsButton bind:open={settingsOpen} />
+		</div>
 	</div>
 </div>
 <SettingsSheet bind:open={settingsOpen} />

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

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

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

@@ -128,7 +128,7 @@
 							class="rounded-lg border border-slate-300 bg-slate-50 p-2 dark:border-slate-600 dark:bg-slate-800"
 						>
 							<div class="font-mono text-sm break-all text-slate-800 dark:text-slate-200">
-								https://blanchon-robothub-frontend.hf.space<span
+								https://blanchon-robothub-frontend.hf.space/<span
 									class="rounded bg-blue-100 px-1 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
 									>#{workspaceId}</span
 								>

src/lib/configs/robotUrdfConfig.ts

@@ -3,6 +3,10 @@ import type { RobotUrdfConfig } from "$lib/types/urdf";
 export const robotUrdfConfigMap: { [key: string]: RobotUrdfConfig } = {
 	"so-arm100": {
 		urdfUrl: "/robots/so-100/so_arm100.urdf",
+		displayName: "SO ARM 100",
+		description: "6-DOF Robotic Arm",
+		icon: "icon-[ix--robotic-arm]",
+		isDefault: true,
 		jointNameIdMap: {
 			Rotation: 1,
 			Pitch: 2,

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

@@ -1,5 +1,5 @@
 import type { Positionable, Position3D } from '$lib/types/positionable.js';
-import type { AISessionConfig, AISessionResponse } from './RemoteComputeManager.svelte';
+import type { AISessionConfig, AISessionResponse, ModelType } from './RemoteComputeManager.svelte';
 
 export type ComputeStatus = 'disconnected' | 'ready' | 'running' | 'stopped' | 'initializing';
 
@@ -10,6 +10,7 @@ export class RemoteCompute implements Positionable {
   position = $state<Position3D>({ x: 0, y: 0, z: 0 });
   name = $state<string>('');
   status = $state<ComputeStatus>('disconnected');
+  modelType = $state<ModelType>('act'); // Default to ACT model
   
   // Session data
   sessionId = $state<string | null>(null);

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

@@ -17,12 +17,86 @@ import type {
   CreateSessionResponse
 } from '@robothub/inference-server-client';
 
+export type ModelType = 'act' | 'diffusion' | 'smolvla' | 'pi0' | 'groot' | 'custom';
+
+export interface ModelTypeConfig {
+  id: ModelType;
+  label: string;
+  icon: string;
+  description: string;
+  defaultPolicyPath: string;
+  defaultCameraNames: string[];
+  requiresLanguageInstruction?: boolean;
+  enabled: boolean;
+}
+
+export const MODEL_TYPES: Record<ModelType, ModelTypeConfig> = {
+  act: {
+    id: 'act',
+    label: 'ACT Model',
+    icon: 'icon-[mdi--brain]',
+    description: 'Action Chunking with Transformers',
+    defaultPolicyPath: 'LaetusH/act_so101_beyond',
+    defaultCameraNames: ['front'],
+    enabled: true
+  },
+  diffusion: {
+    id: 'diffusion',
+    label: 'Diffusion Policy',
+    icon: 'icon-[mdi--creation]',
+    description: 'Diffusion-based robot control',
+    defaultPolicyPath: 'diffusion_policy/default',
+    defaultCameraNames: ['front', 'wrist'],
+    enabled: true
+  },
+  smolvla: {
+    id: 'smolvla',
+    label: 'SmolVLA',
+    icon: 'icon-[mdi--eye-outline]',
+    description: 'Small Vision-Language-Action model',
+    defaultPolicyPath: 'smolvla/latest',
+    defaultCameraNames: ['front'],
+    requiresLanguageInstruction: true,
+    enabled: true
+  },
+  pi0: {
+    id: 'pi0',
+    label: 'Pi0',
+    icon: 'icon-[mdi--pi]',
+    description: 'Lightweight robotics model',
+    defaultPolicyPath: 'pi0/base',
+    defaultCameraNames: ['front'],
+    enabled: true
+  },
+  groot: {
+    id: 'groot',
+    label: 'NVIDIA Groot',
+    icon: 'icon-[mdi--robot-outline]',
+    description: 'Humanoid robotics foundation model',
+    defaultPolicyPath: 'nvidia/groot',
+    defaultCameraNames: ['front', 'left', 'right'],
+    requiresLanguageInstruction: true,
+    enabled: false // Not yet implemented
+  },
+  custom: {
+    id: 'custom',
+    label: 'Custom Model',
+    icon: 'icon-[mdi--cog]',
+    description: 'Custom model configuration',
+    defaultPolicyPath: '',
+    defaultCameraNames: ['front'],
+    enabled: true
+  }
+};
+
 export interface AISessionConfig {
   sessionId: string;
+  modelType: ModelType;
   policyPath: string;
   cameraNames: string[];
   transportServerUrl: string;
   workspaceId?: string;
+  languageInstruction?: string;
 }
 
 export interface AISessionResponse {
@@ -84,7 +158,68 @@ export class RemoteComputeManager {
   }
 
   /**
-   * Create a new AI compute instance
+   * Get available model types
+   */
+  get availableModelTypes(): ModelTypeConfig[] {
+    return Object.values(MODEL_TYPES).filter(model => model.enabled);
+  }
+
+  /**
+   * Get model type configuration
+   */
+  getModelTypeConfig(modelType: ModelType): ModelTypeConfig | undefined {
+    return MODEL_TYPES[modelType];
+  }
+
+  /**
+   * Create a new AI compute instance with full configuration
+   */
+  async createComputeWithSession(
+    config: AISessionConfig,
+    computeId?: string,
+    computeName?: string,
+    position?: Position3D
+  ): Promise<{ success: boolean; error?: string; compute?: RemoteCompute }> {
+    const finalComputeId = computeId || generateName();
+    
+    // Check if compute already exists
+    if (this._computes.find(c => c.id === finalComputeId)) {
+      return { success: false, error: `Compute with ID ${finalComputeId} already exists` };
+    }
+
+    try {
+      // Create compute instance
+      const compute = new RemoteCompute(finalComputeId, computeName);
+      compute.modelType = config.modelType;
+
+      // Set position (from position manager if not provided)
+      compute.position = position || positionManager.getNextPosition();
+
+      // Add to reactive array
+      this._computes.push(compute);
+
+      // Create the session immediately
+      const sessionResult = await this.createSession(compute.id, config);
+      if (!sessionResult.success) {
+        // Remove compute if session creation failed
+        await this.removeCompute(compute.id);
+        return { success: false, error: sessionResult.error };
+      }
+
+      console.log(`Created compute ${finalComputeId} with ${config.modelType} model at position (${compute.position.x.toFixed(1)}, ${compute.position.y.toFixed(1)}, ${compute.position.z.toFixed(1)}). Total computes: ${this._computes.length}`);
+
+      return { success: true, compute };
+    } catch (error) {
+      console.error('Failed to create compute with session:', error);
+      return { 
+        success: false, 
+        error: error instanceof Error ? error.message : String(error) 
+      };
+    }
+  }
+
+  /**
+   * Create a new AI compute instance (legacy method)
    */
   createCompute(id?: string, name?: string, position?: Position3D): RemoteCompute {
     const computeId = id || generateName();
@@ -150,6 +285,8 @@ export class RemoteComputeManager {
         camera_names: config.cameraNames,
         transport_server_url: config.transportServerUrl,
         workspace_id: config.workspaceId || undefined,
+        policy_type: config.modelType, // Use model type as policy type
+        language_instruction: config.languageInstruction || undefined,
       };
 
       const response = await createSessionSessionsPost({

src/lib/elements/compute/index.ts

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

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

@@ -8,6 +8,7 @@ import { positionManager } from '$lib/utils/positionManager.js';
 import { settings } from '$lib/runes/settings.svelte';
 import { robotics } from '@robothub/transport-server-client';
 import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
+import { robotUrdfConfigMap } from "$lib/configs/robotUrdfConfig";
 
 export class RobotManager {
   private _robots = $state<Robot[]>([]);
@@ -135,9 +136,7 @@ export class RobotManager {
    */
   async createSO100Robot(id?: string, position?: Position3D): Promise<Robot> {
     const robotId = id || `so100-${Date.now()}`;
-    const urdfConfig: RobotUrdfConfig = {
-      urdfUrl: "/robots/so-100/so_arm100.urdf"
-    };
+    const urdfConfig = robotUrdfConfigMap["so-arm100"];
     
     return this.createRobotFromUrdf(robotId, urdfConfig, position);
   }

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

@@ -137,7 +137,6 @@
           nameHeight={0.1}
           showLine={isHovered || isSelected}
           opacity={1}
-          isInteractive={false}
         />
       {/each}
     </T.Group>

src/lib/elements/video/VideoManager.svelte.ts

@@ -34,6 +34,8 @@ export class VideoInstance implements Positionable {
 	// Output state (what this video is broadcasting)
 	output = $state({
 		active: false,
+		type: null as 'recording' | 'remote-broadcast' | null,
+		stream: null as MediaStream | null,
 		client: null as videoTypes.VideoProducer | null,
 		roomId: null as string | null,
 	});
@@ -270,6 +272,8 @@ export class VideoManager {
 
 			// Update output state
 			video.output.active = true;
+			video.output.type = 'remote-broadcast';
+			video.output.stream = video.input.stream;
 			video.output.client = producer;
 			video.output.roomId = roomId;
 
@@ -528,6 +532,8 @@ export class VideoManager {
 
 			// Update output state
 			video.output.active = true;
+			video.output.type = 'remote-broadcast';
+			video.output.stream = video.input.stream;
 			video.output.client = producer;
 			video.output.roomId = result.roomId;
 
@@ -552,6 +558,8 @@ export class VideoManager {
 		}
 
 		video.output.active = false;
+		video.output.type = null;
+		video.output.stream = null;
 		video.output.client = null;
 		video.output.roomId = null;
 

src/lib/types/urdf.ts

@@ -23,4 +23,9 @@ export type RobotUrdfConfig = {
 	restPosition?: {
 		[jointName: string]: number;
 	};
+	// Display metadata for UI
+	displayName?: string;
+	description?: string;
+	icon?: string;
+	isDefault?: boolean;
 };