Update

.dockerignore

@@ -1,56 +1,81 @@
-# Dependencies
+# Node.js
 node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.npm
+.yarn
 
-# Build outputs (will be built in container)
+# Build outputs
 build/
 .svelte-kit/
 dist/
+.output/
 
 # Development files
-.env*
-!.env.example
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
 
 # IDE files
 .vscode/
 .idea/
 *.swp
 *.swo
+*~
 
 # OS files
 .DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
 Thumbs.db
 
 # Git
 .git/
 .gitignore
+.gitattributes
+.gitmodules
+
+# Docker
+Dockerfile*
+docker-compose*
+.dockerignore
 
 # Logs
 *.log
-npm-debug.log*
-pnpm-debug.log*
-bun-debug.log*
-lerna-debug.log*
-
-# Cache directories
-.cache/
-.temp/
-.tmp/
+logs/
+log.txt
 
-# Test files
+# Testing
 coverage/
 .nyc_output/
+.pytest_cache/
+
+# Temporary files
+*.tmp
+*.temp
+.cache/
+.parcel-cache/
+
+# Documentation
+*.md
+docs/
+README*
+
+# Misc
+.eslintcache
+.prettierignore
 
 # 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 

.gitmodules

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

Dockerfile

@@ -1,48 +1,69 @@
-# Multi-stage Dockerfile for LeRobot Arena Frontend
-# Stage 1: Build the Svelte application with Bun
-FROM oven/bun:1-alpine AS builder
+# Multi-stage build for optimal image size and security
+FROM oven/bun:1.2.17-alpine AS base
 
+# Install curl for healthcheck
+RUN apk --no-cache add curl
+
+# Set working directory
 WORKDIR /app
 
-# Install git for dependencies that might need it
-RUN apk add --no-cache git
+# Create non-root user for security
+RUN addgroup -g 1001 -S svelte && \
+    adduser -S svelteuser -u 1001
+
+# ===============================
+# Dependencies stage
+# ===============================
+FROM base AS deps
 
-# Copy package files for dependency resolution (better caching)
+# Copy package files for dependency installation
 COPY package.json bun.lock* ./
 
-# Copy local packages that are linked in package.json
-COPY packages/ ./packages/
+# Copy local packages and external dependencies
+COPY packages/ packages/
+COPY external/ external/
 
-# Install dependencies
+# Install dependencies with frozen lockfile (including devDependencies)
 RUN bun install --frozen-lockfile
 
-# Copy source code
+# ===============================
+# Build stage
+# ===============================
+FROM base AS builder
+
+# Copy installed dependencies from deps stage
+COPY --from=deps /app/node_modules ./node_modules
+COPY --from=deps /app/packages ./packages
+COPY --from=deps /app/external ./external
+
+# Copy source code and configuration files
 COPY . .
 
-# Build the static application
+# Build the static site
 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
+# ===============================
+# Production stage
+# ===============================
+FROM base AS runner
 
-# Switch to the "user" user
-USER user
+# Set environment to production
+ENV NODE_ENV=production
+ENV PORT=3000
 
-# Set home to the user's home directory
-ENV HOME=/home/user \
-    PATH=/home/user/.local/bin:$PATH
+# Copy built application and static server
+COPY --from=builder --chown=svelteuser:svelte /app/build ./build
+COPY --chown=svelteuser:svelte static-server.js ./
 
-# Set the working directory to the user's home directory
-WORKDIR $HOME/app
+# Switch to non-root user
+USER svelteuser
 
-# Copy built application from previous stage with proper ownership
-COPY --chown=user --from=builder /app/build ./
+# Expose port
+EXPOSE 3000
 
-# Expose port 7860 (HF Spaces default)
-EXPOSE 7860
+# Health check
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD curl -f http://localhost:3000/ || exit 1
 
-# Start simple static server using Bun
-CMD ["bun", "--bun", "serve", ".", "--port", "7860"] 
+# Start custom static file server
+CMD ["bun", "static-server.js"] 

docker-build.sh

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

package.json

@@ -53,8 +53,8 @@
 		"@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",
+		"@robothub/transport-server-client": "file:./external/RobotHub-TransportServer/client/js",
+		"@robothub/inference-server-client": "file:./external/RobotHub-InferenceServer/client",
 		"tailwind-merge": "^3.3.0",
 		"three": "^0.177.0",
 		"threlte-uikit": "^1.1.0",

packages/feetech.js/package.json

@@ -16,7 +16,7 @@
 	},
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+		"url": "git+https://github.com/julien-blanchon/robothub.git#main:frontend/packages/feetech.js"
 	},
 	"keywords": [
 		"feetech",
@@ -32,7 +32,7 @@
 	"author": "timqian",
 	"license": "MIT",
 	"bugs": {
-		"url": "https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+		"url": "https://github.com/julien-blanchon/robothub.git#main:frontend/packages/feetech.js"
 	},
-	"homepage": "https://github.com/julien-blanchon/RoboHub.git#main:frontend/packages/feetech.js"
+	"homepage": "https://github.com/julien-blanchon/robothub.git#main:frontend/packages/feetech.js"
 }

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

@@ -6,8 +6,8 @@
 	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";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 
 	// Props interface
 	interface Props {

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

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import * as Dialog from "@/components/ui/dialog";
+	import { video } from '@robothub/transport-server-client';
+	import type { video as videoTypes } from '@robothub/transport-server-client';
 	import { 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";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
+	import type { RemoteCompute } from "$lib/elements/compute/RemoteCompute.svelte";
 
 	interface Props {
 		workspaceId: string;
@@ -50,8 +52,7 @@
 			}
 
 			// Create video producer and connect to the camera room
-			const { VideoProducer } = await import("@robohub/transport-server-client/video");
-			videoProducer = new VideoProducer(settings.transportServerUrl);
+			videoProducer = new video.VideoProducer(settings.transportServerUrl);
 			
 			// Connect to the EXISTING camera room (don't create new one)
 			const participantId = `frontend-camera-${selectedCameraName}-${Date.now()}`;

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

@@ -3,8 +3,8 @@
 	import { interactivity } from "@threlte/extras";
 	import { VideoTexture, CanvasTexture, LinearFilter, RGBAFormat, Shape, Path, ExtrudeGeometry, BoxGeometry } from "three";
 	import { onMount } from "svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
-	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 
 	// Props interface
 	interface Props {

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

@@ -2,7 +2,7 @@
 	import { T } from "@threlte/core";
 	import Video from "./Video.svelte";
 	import VideoStatusBillboard from "./status/VideoStatusBillboard.svelte";
-	import type { VideoInstance, VideoStatus } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance, VideoStatus } from "$lib/elements/video/VideoManager.svelte";
 	import { interactivity, type IntersectionEvent, useCursor } from "@threlte/extras";
 
 	interface Props {

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

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { useThrelte } from "@threlte/core";
-	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 	import { onMount } from "svelte";
 	import VideoInputConnectionModal from "@/components/3d/elements/video/modal/VideoInputConnectionModal.svelte";
 	import VideoOutputConnectionModal from "@/components/3d/elements/video/modal/VideoOutputConnectionModal.svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { generateName } from "$lib/utils/generateName";
 	import VideoGridItem from "@/components/3d/elements/video/VideoGridItem.svelte";
 

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

@@ -5,8 +5,8 @@
 	import * as Alert from "@/components/ui/alert";
 	import { Badge } from "@/components/ui/badge";
 	import { toast } from "svelte-sonner";
-	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 
 	interface Props {
 		workspaceId: string;

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

@@ -5,8 +5,8 @@
 	import * as Alert from "@/components/ui/alert";
 	import { Badge } from "@/components/ui/badge";
 	import { toast } from "svelte-sonner";
-	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 
 	interface Props {
 		workspaceId: string;

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
 
 	interface Props {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { BaseStatusBox, StatusHeader, StatusContent, StatusIndicator, StatusButton } from "$lib/components/3d/ui";
 
 	interface Props {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { ICON } from "$lib/utils/icon";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { 
 		BaseStatusBox, 
 		StatusHeader, 

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

@@ -2,7 +2,7 @@
 	import InputVideoBoxUIKit from "./InputVideoBoxUIKit.svelte";
 	import OutputVideoBoxUIKit from "./OutputVideoBoxUIKit.svelte";
 	import VideoBoxUIKit from "./VideoBoxUIKit.svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 	import { Container } from "threlte-uikit";
 	import { StatusArrow } from "$lib/components/3d/ui";
 

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

@@ -3,7 +3,7 @@
 	import { Billboard, interactivity } from "@threlte/extras";
 	import { Root, Container } from "threlte-uikit";
 	import VideoConnectionFlowBoxUIKit from "./VideoConnectionFlowBoxUIKit.svelte";
-	import type { VideoInstance } from "$lib/elements/video//VideoManager.svelte";
+	import type { VideoInstance } from "$lib/elements/video/VideoManager.svelte";
 
 	interface Props {
 		video: VideoInstance;

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

@@ -5,7 +5,7 @@
 	import { toast } from "svelte-sonner";
 	import { cn } from "$lib/utils";
 	import { generateName } from "@/utils/generateName";
-	import { videoManager } from "$lib/elements/video//VideoManager.svelte";
+	import { videoManager } from "$lib/elements/video/VideoManager.svelte";
 
 	interface Props {
 		open: boolean;

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

@@ -2,13 +2,13 @@ import { RemoteCompute } from './RemoteCompute.svelte';
 import type { Position3D } from '$lib/types/positionable.js';
 import { generateName } from '$lib/utils/generateName.js';
 import { positionManager } from '$lib/utils/positionManager.js';
-import { type LeRobotAIServerClient, createClient } from '@robohub/inference-server-client';
+import { type LeRobotAIServerClient, createClient } from '@robothub/inference-server-client';
 import { settings } from '$lib/runes/settings.svelte';
 import type { 
   CreateSessionRequest, 
   CreateSessionResponse, 
   SessionStatusResponse 
-} from '@robohub/inference-server-client';
+} from '@robothub/inference-server-client';
 
 export interface AISessionConfig {
   sessionId: string;

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

@@ -6,8 +6,8 @@ import type { RobotUrdfConfig } from '$lib/types/urdf.js';
 import { generateName } from '$lib/utils/generateName.js';
 import { positionManager } from '$lib/utils/positionManager.js';
 import { settings } from '$lib/runes/settings.svelte';
-import { robotics } from '@robohub/transport-server-client';
-import type { robotics as roboticsTypes } from '@robohub/transport-server-client';
+import { robotics } from '@robothub/transport-server-client';
+import type { robotics as roboticsTypes } from '@robothub/transport-server-client';
 
 export class RobotManager {
   private _robots = $state<Robot[]>([]);

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

@@ -54,7 +54,7 @@ export class CalibrationState {
     return Math.abs(calibration.maxServoValue - calibration.minServoValue);
   }
   
-  private updateInterval: number | null = null;
+  private updateInterval: Timer | null = null;
   private managerUnsubscribe: (() => void) | null = null;
 
   private setupManagerSubscription(): void {

src/lib/elements/robot/drivers/RemoteConsumer.ts

@@ -1,5 +1,5 @@
 import type { Consumer, ConnectionStatus, RobotCommand, RemoteDriverConfig } from '../models.js';
-import { robotics } from "@robohub/transport-server-client";
+import { robotics } from "@robothub/transport-server-client";
 
 export class RemoteConsumer implements Consumer {
   readonly id: string;

src/lib/elements/robot/drivers/RemoteProducer.ts

@@ -1,5 +1,5 @@
 import type { Producer, ConnectionStatus, RobotCommand, RemoteDriverConfig } from '../models.js';
-import { robotics } from "@robohub/transport-server-client";
+import { robotics } from "@robothub/transport-server-client";
 
 export class RemoteProducer implements Producer {
   readonly id: string;

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

@@ -4,8 +4,8 @@
  * Manages multiple video instances, each with their own streaming state
  */
 
-import { video as videoClient } from '@robohub/transport-server-client';
-import type { video as videoTypes } from '@robohub/transport-server-client';
+import { video as videoClient } from '@robothub/transport-server-client';
+import type { video as videoTypes } from '@robothub/transport-server-client';
 import { generateName } from "$lib/utils/generateName";
 import type { Positionable, Position3D } from '$lib/types/positionable';
 import { positionManager } from '$lib/utils/positionManager';

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

@@ -3,8 +3,8 @@
  * Clean and simple video producer/consumer management
  */
 
-import { video } from '@robohub/transport-server-client';
-import type { video as videoTypes } from '@robohub/transport-server-client';
+import { video } from '@robothub/transport-server-client';
+import type { video as videoTypes } from '@robothub/transport-server-client';
 import { settings } from '$lib/runes/settings.svelte';
 
 // Simple connection state using runes

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

@@ -3,8 +3,8 @@
  * Clean separation between input sources and output destinations
  */
 
-import { video } from '@robohub/transport-server-client';
-import type { video as videoTypes } from '@robohub/transport-server-client';
+import { video } from '@robothub/transport-server-client';
+import type { video as videoTypes } from '@robothub/transport-server-client';
 import { settings } from '$lib/runes/settings.svelte';
 
 // Input/Output state using runes

src/lib/sensors/consumers/RemoteServerConsumer.ts

@@ -27,7 +27,7 @@ export class RemoteServerConsumer implements ConsumerSensorDriver {
 	// Connection management
 	private websocket: WebSocket | null = null;
 	private reconnectAttempts = 0;
-	private reconnectTimer?: number;
+	private reconnectTimer?: Timer;
 
 	// Stream management
 	private activeOutputStreams = new Map<string, SensorStream>();

static-server.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env bun
+
+// Simple static file server for Svelte build output
+import { resolve, join } from "path";
+
+const PORT = process.env.PORT || 3000;
+const BUILD_DIR = "./build";
+
+// MIME types for common web assets
+const MIME_TYPES = {
+  '.html': 'text/html',
+  '.css': 'text/css',
+  '.js': 'application/javascript',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+  '.ttf': 'font/ttf',
+  '.eot': 'application/vnd.ms-fontobject',
+  '.webp': 'image/webp',
+  '.avif': 'image/avif',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm'
+};
+
+function getMimeType(filename) {
+  const ext = filename.substring(filename.lastIndexOf('.'));
+  return MIME_TYPES[ext] || 'application/octet-stream';
+}
+
+const server = Bun.serve({
+  port: PORT,
+  hostname: "0.0.0.0",
+  
+  async fetch(req) {
+    const url = new URL(req.url);
+    let pathname = url.pathname;
+    
+    // Remove leading slash and default to index.html for root
+    if (pathname === '/') {
+      pathname = 'index.html';
+    } else {
+      pathname = pathname.substring(1); // Remove leading slash
+    }
+    
+    try {
+      // Try to serve the requested file
+      const filePath = join(BUILD_DIR, pathname);
+      const file = Bun.file(filePath);
+      
+      if (await file.exists()) {
+        const mimeType = getMimeType(pathname);
+        const headers = {
+          'Content-Type': mimeType,
+        };
+        
+        // Set cache headers
+        if (pathname.includes('/_app/immutable/')) {
+          // Long-term cache for immutable assets
+          headers['Cache-Control'] = 'public, max-age=31536000, immutable';
+        } else if (pathname.endsWith('.html')) {
+          // No cache for HTML files
+          headers['Cache-Control'] = 'public, max-age=0, must-revalidate';
+        } else {
+          // Short cache for other assets
+          headers['Cache-Control'] = 'public, max-age=3600';
+        }
+        
+        return new Response(file, { headers });
+      }
+      
+      // If file not found and no extension, serve index.html for SPA routing
+      if (!pathname.includes('.')) {
+        const indexFile = Bun.file(join(BUILD_DIR, 'index.html'));
+        if (await indexFile.exists()) {
+          return new Response(indexFile, {
+            headers: {
+              'Content-Type': 'text/html',
+              'Cache-Control': 'public, max-age=0, must-revalidate'
+            }
+          });
+        }
+      }
+      
+      return new Response('Not Found', { 
+        status: 404,
+        headers: { 'Content-Type': 'text/plain' }
+      });
+      
+    } catch (error) {
+      console.error('Server error:', error);
+      return new Response('Internal Server Error', { 
+        status: 500,
+        headers: { 'Content-Type': 'text/plain' }
+      });
+    }
+  }
+});
+
+console.log(`🚀 Static server running on http://localhost:${server.port}`);
+console.log(`📁 Serving files from: ${BUILD_DIR}`);