+ 
+ {!iconOnly && LeLab}
+
;
+};
+
+export default Logo;
diff --git a/src/components/UrdfProcessorInitializer.tsx b/src/components/UrdfProcessorInitializer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..29fec7193ab0aa64fa934379cfc2c07c0f0c40e0
--- /dev/null
+++ b/src/components/UrdfProcessorInitializer.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useMemo } from "react";
+import { useUrdf } from "@/hooks/useUrdf";
+
+/**
+ * Component that only handles initializing the URDF processor
+ * This component doesn't render anything visible, just initializes the processor
+ */
+const UrdfProcessorInitializer: React.FC = () => {
+ const { registerUrdfProcessor } = useUrdf();
+
+ // Create the URDF processor
+ const urdfProcessor = useMemo(
+ () => ({
+ loadUrdf: (urdfPath: string) => {
+ console.log("📂 URDF path set:", urdfPath);
+ // This will be handled by the actual viewer component
+ return urdfPath;
+ },
+ setUrlModifierFunc: (func: (url: string) => string) => {
+ console.log("🔗 URL modifier function set");
+ return func;
+ },
+ getPackage: () => {
+ return "";
+ },
+ }),
+ []
+ );
+
+ // Register the URDF processor with the context
+ useEffect(() => {
+ console.log("🔧 Registering URDF processor");
+ registerUrdfProcessor(urdfProcessor);
+ }, [registerUrdfProcessor, urdfProcessor]);
+
+ // This component doesn't render anything
+ return null;
+};
+
+export default UrdfProcessorInitializer;
diff --git a/src/components/UrdfViewer.tsx b/src/components/UrdfViewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..adf1b9030227af852caf796e01478b276ada4c22
--- /dev/null
+++ b/src/components/UrdfViewer.tsx
@@ -0,0 +1,305 @@
+import React, {
+ useEffect,
+ useRef,
+ useState,
+ useMemo,
+ useCallback,
+} from "react";
+import { cn } from "@/lib/utils";
+
+import URDFManipulator from "urdf-loader/src/urdf-manipulator-element.js";
+import { useUrdf } from "@/hooks/useUrdf";
+import { useRealTimeJoints } from "@/hooks/useRealTimeJoints";
+import {
+ createUrdfViewer,
+ setupMeshLoader,
+ setupJointHighlighting,
+ setupModelLoading,
+ URDFViewerElement,
+} from "@/lib/urdfViewerHelpers";
+
+// Register the URDFManipulator as a custom element if it hasn't been already
+if (typeof window !== "undefined" && !customElements.get("urdf-viewer")) {
+ customElements.define("urdf-viewer", URDFManipulator);
+}
+import * as THREE from "three";
+
+// Extend the interface for the URDF viewer element to include background property
+interface UrdfViewerElement extends HTMLElement {
+ background?: string;
+ setJointValue?: (jointName: string, value: number) => void;
+}
+
+const UrdfViewer: React.FC = () => {
+ const containerRef = useRef
+ {!iconOnly && LeLab}
+
+
+
+ {/* Joint highlight indicator */}
+ {highlightedJoint && (
+
+ );
+};
+
+export default UrdfViewer;
diff --git a/src/components/control/CommandBar.tsx b/src/components/control/CommandBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ea5032d6d0330981e08f39b4ce460da6d1918024
--- /dev/null
+++ b/src/components/control/CommandBar.tsx
@@ -0,0 +1,81 @@
+
+import React from 'react';
+import { Mic, MicOff, Send, Camera } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+interface CommandBarProps {
+ command: string;
+ setCommand: (command: string) => void;
+ handleSendCommand: () => void;
+ isVoiceActive: boolean;
+ setIsVoiceActive: (isActive: boolean) => void;
+ showCamera: boolean;
+ setShowCamera: (show: boolean) => void;
+ handleEndSession: () => void;
+}
+
+const CommandBar: React.FC
+ Joint: {highlightedJoint}
+
+ )}
+
+ {/* WebSocket connection status */}
+ {isDefaultModel && (
+
+
+ )}
+
+
+ {isWebSocketConnected ? "Live Robot Data" : "Disconnected"}
+
+
+
+ );
+};
+
+export default CommandBar;
diff --git a/src/components/control/MetricsPanel.tsx b/src/components/control/MetricsPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..2485cfa9b79a0bb0d4d20129df4d82f26b4bac96
--- /dev/null
+++ b/src/components/control/MetricsPanel.tsx
@@ -0,0 +1,190 @@
+
+import React, { useEffect, useRef } from 'react';
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
+import { Camera, MicOff } from 'lucide-react';
+
+interface MetricsPanelProps {
+ activeTab: 'SENSORS' | 'MOTORS';
+ setActiveTab: (tab: 'SENSORS' | 'MOTORS') => void;
+ sensorData: any[];
+ motorData: any[];
+ hasPermissions: boolean;
+ streamRef: React.RefObject
+ setCommand(e.target.value)}
+ placeholder="Tell the robot what to do..."
+ className="flex-1 bg-gray-800 border-gray-600 text-white placeholder-gray-400 text-lg py-3"
+ onKeyPress={(e) => e.key === 'Enter' && handleSendCommand()}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MetricsPanel;
diff --git a/src/components/control/RobotArm.tsx b/src/components/control/RobotArm.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aad2d3ef9ecee19ee76f27195bdebee44018efb7
--- /dev/null
+++ b/src/components/control/RobotArm.tsx
@@ -0,0 +1,47 @@
+
+import React from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
+
+const RobotArm = () => {
+ return (
+
+ );
+};
+
+export default RobotArm;
diff --git a/src/components/control/VisualizerPanel.tsx b/src/components/control/VisualizerPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..10f6f0b8109f7b32ed6bbadccade2b9323e748e2
--- /dev/null
+++ b/src/components/control/VisualizerPanel.tsx
@@ -0,0 +1,49 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+import { cn } from "@/lib/utils";
+import UrdfViewer from "../UrdfViewer";
+import UrdfProcessorInitializer from "../UrdfProcessorInitializer";
+import Logo from "@/components/Logo";
+
+interface VisualizerPanelProps {
+ onGoBack: () => void;
+ className?: string;
+}
+
+const VisualizerPanel: React.FC
+ {/* Tab Headers */}
+
+
+
+
+
+
+ {/* Chart Content */}
+
+ {activeTab === 'SENSORS' && (
+
+
+ {/* Webcam Feed */}
+
+ )}
+
+ {activeTab === 'MOTORS' && (
+
+
+
+ {/* Mic Detection & Other Sensors */}
+ Live Camera Feed
+ {hasPermissions ? ( +
+
+
+ ) : (
+
+
+ )}
+
+
+ Camera permission not granted.
+
+
+
+
+
+ {/* Sensor Charts */}
+ {['sensor3', 'sensor4'].map((sensor, index) => (
+ Voice Activity
+ {hasPermissions ? ( +
+
+ ) : (
+
+ {[...Array(15)].map((_, i) => {
+ const barIsActive = isVoiceActive && i < (micLevel / 120 * 15);
+ return (
+
+ );
+ })}
+
+ + {isVoiceActive ? "Voice commands active" : "Voice commands muted"} +
+
+
+ )}
+
+
+ Microphone permission not granted.
+
+
+
+
+
+
+ ))}
+ Sensor {index + 3}
+
+ {['motor1', 'motor2', 'motor3', 'motor4', 'motor5', 'motor6'].map((motor, index) => (
+
+ )}
+
+
+
+
+
+
+ ))}
+ Motor {index + 1}
+
+
+ );
+};
+
+export default VisualizerPanel;
diff --git a/src/components/jobs/CheckpointDropdown.tsx b/src/components/jobs/CheckpointDropdown.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..35d4def8a0bd0cb8c7b1dd5dec1feb474706b4b4
--- /dev/null
+++ b/src/components/jobs/CheckpointDropdown.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { JobCheckpoint } from "@/lib/checkpointsApi";
+
+interface Props {
+ checkpoints: JobCheckpoint[];
+ selectedStep: number | null;
+ onChange: (step: number) => void;
+ disabled?: boolean;
+ placeholder?: string;
+}
+
+export const CheckpointDropdown: React.FC
+
+
+
+
+ Teleoperation
+
+
+
+
+
+
+
+
+
+ {job.status?.message ? (
+
+ {title}
+
+
+ {job.flavor ?? "—"} · {relativeTime(job.created_at)}
+ {job.owner ? ` · ${job.owner}` : ""}
+
+
+ {job.status.message}
+
+ ) : null}
+
+
+
+
+
+
+
+
+ {model.private ? (
+
+
+ {model.repo_id} · updated {relativeTime(model.last_modified)}
+
+
+
+
+
+ {job.runner === "hf_cloud" && job.hf_job_url ? (
+
+ ) : (
+
+ )}
+
+
+ {showProgressBar ? (
+
+ {job.name}
+
+ {subtitle}
+
+
+
+ ) : null}
+ {showInferenceRow ? (
+
+ {isStarting ? "Training starting…" : `${progressPct.toFixed(1)}%`}
+
+
+
+ ) : null}
+
+
+
+ {error ? Jobs
+
+
+
+
+
+ Couldn't load jobs: {error}
: null} + +
+
+
+
+
+ + Local jobs +
+ {localActive.length === 0 ? ( ++ {query + ? "No local jobs match your search." + : "No active local jobs. Start one from the Training page."} +
+ ) : ( +
+ {localActive.map((job) => (
+
+ )}
+
+
+
+ {untrackedCount > 0 ? (
+ + Online jobs +
+ {!hubAuthenticated && trackedCloudJobs.length === 0 ? ( ++ Sign in with Hugging Face to see your cloud jobs. +
+ ) : trackedCloudActive.length === 0 && + untrackedHubActive.length === 0 && + untrackedHubModels.length === 0 ? ( ++ {query ? "No online jobs match your search." : "No active cloud jobs."} +
+ ) : ( +
+ {trackedCloudActive.map((job) => (
+
+ )}
+
+ {localUntracked.map((job) => (
+
+
+ {actions.map((action, index) => (
+
+
+
+ ))}
+
+
+ {action.trigger ?? (
+
+ )}
+
+
+
+
+ + {action.title} +
+ {action.isWorkInProgress && ( +
+
+
+
+
+
+
+
+ Work in Progress
+
+
+ )}
+ Work in progress
++ {action.description} +
+
+
+ );
+};
+
+export default HfAuthBanner;
diff --git a/src/components/landing/HfAuthChip.tsx b/src/components/landing/HfAuthChip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c17b0ce6ac3a15fc929d602d5e1bdf8280d93410
--- /dev/null
+++ b/src/components/landing/HfAuthChip.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+import { Loader2 } from "lucide-react";
+import { useHfAuth } from "@/contexts/HfAuthContext";
+import HfAuthDialog from "./HfAuthDialog";
+
+const HfAuthChip: React.FC = () => {
+ const { auth } = useHfAuth();
+ const [dialogOpen, setDialogOpen] = useState(false);
+
+ if (auth.status === "loading") {
+ return (
+
+
+
+
+
+
+
+ {error && (
+ + Hugging Face access required for cloud training +
+
+ Create a token at{" "}
+
+ huggingface.co/settings/tokens
+
{error}
+ )} +
+
+ );
+ }
+
+ if (auth.status === "authenticated") {
+ return (
+
+
+ {auth.username}
+
+ );
+ }
+
+ // unauthenticated
+ return (
+ <>
+
+
+
+ );
+ }
+ return (
+
+ );
+};
+
+interface Props {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ robot: RobotRecord | null;
+ jobId: string;
+ initialStep: number | null;
+}
+
+const DEFAULT_FPS = 30;
+
+const InferenceModal: React.FC
+
+
+
+
+ LeLab
+
+
+
+
+ LeLab
+
+
+
+
+
+ {teleopDisabled && (
+ Configure the robot first.
+ )}
+
+ )}
+
+ {robot && (
+
+ )}
+
+ );
+};
+
+export default RobotTile;
diff --git a/src/components/landing/UsageInstructionsModal.tsx b/src/components/landing/UsageInstructionsModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..89355a0f6f75c03b2936c7f95b13215d4e0224d7
--- /dev/null
+++ b/src/components/landing/UsageInstructionsModal.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Terminal, ExternalLink, Copy, Check } from "lucide-react";
+
+const ONE_LINER =
+ "uv tool install git+https://github.com/huggingface/leLab.git && lelab";
+const LOCAL_URL = "http://localhost:8000/";
+
+interface UsageInstructionsModalProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ dismissible?: boolean;
+}
+
+const UsageInstructionsModal: React.FC
+
+
+ {status && (
+
+
+ {robot && (
+
+
+
+
+
+ Configure (calibrate)
+
+
+
+
+
+ Delete robot config
+
+
+ )}
+ + {status} +
+ )} + + {robot && ( +
+
+
+
+
+ );
+};
+
+interface CameraPreviewProps {
+ camera: CameraConfig;
+ paused: boolean;
+ onRemove: () => void;
+ onUpdate: (updates: Partial+ Camera Configuration +
+ + {/* Add Camera Section */} +
+
+
+ {/* Configured Cameras */}
+ {cameras.length > 0 && (
+ Add Camera
+ +
+
+
+
+
+
+
+
+
+ setCameraName(e.target.value)}
+ placeholder="e.g., workspace_cam"
+ className="bg-gray-800 border-gray-700 text-white"
+ />
+
+
+
+
+
+
+
+ )}
+
+ {cameras.length === 0 && (
+ + Configured Cameras ({cameras.length}) +
+ +
+ {cameras.map((camera) => (
+ removeCamera(camera.id)}
+ onUpdate={(updates) => updateCamera(camera.id, updates)}
+ />
+ ))}
+
+
+
+ )}
+ No cameras configured. Add a camera to get started.
+
+
+ );
+};
+
+export default CameraConfiguration;
diff --git a/src/components/replay/DatasetCombobox.tsx b/src/components/replay/DatasetCombobox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17bce81522891f708582e2aed59569d99aace81d
--- /dev/null
+++ b/src/components/replay/DatasetCombobox.tsx
@@ -0,0 +1,114 @@
+import React from "react";
+import { Check, ChevronsUpDown, Pencil } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { cn } from "@/lib/utils";
+import { DatasetItem } from "@/lib/replayApi";
+
+interface Props {
+ datasets: DatasetItem[];
+ loading: boolean;
+ value: string | null;
+ onChange: (repoId: string | null) => void;
+}
+
+const REPO_ID_RE = /^[\w.\-]+\/[\w.\-]+$/;
+
+const DatasetCombobox: React.FC
+ {showVideo ? (
+
+ ) : (
+
+
+ {/* Camera Info */}
+
+
+ )}
+
+
+
+
+
+ {camera.name}
+ +
+
+
+
+ Resolution:
+
+
+
+ onUpdate({ width: parseInt(e.target.value) || 640 })
+ }
+ className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+ min="320"
+ max="1920"
+ />
+ ×
+
+ onUpdate({ height: parseInt(e.target.value) || 480 })
+ }
+ className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+ min="240"
+ max="1080"
+ />
+
+
+ FPS:
+
+ onUpdate({ fps: parseInt(e.target.value) || 30 })
+ }
+ className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+ min="10"
+ max="60"
+ />
+
+
+ Type: {camera.type} | Device: {camera.device_id?.substring(0, 10)}...
+
+
+ setCustomValue(e.target.value)}
+ onKeyDown={(e) => { if (e.key === "Enter") submitCustom(); }}
+ placeholder="org/dataset-name"
+ className="bg-gray-800 border-gray-600 text-white"
+ />
+
+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default WebSocketTest;
diff --git a/src/components/training/ConfigurationTab.tsx b/src/components/training/ConfigurationTab.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8106bb798079fcfee84d931d11370f030413ea89
--- /dev/null
+++ b/src/components/training/ConfigurationTab.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import EssentialsCard from './config/EssentialsCard';
+import AdvancedCard from './config/AdvancedCard';
+import TargetCard from './config/TargetCard';
+import { ConfigComponentProps } from './types';
+import { DatasetItem } from '@/lib/replayApi';
+import { RunnerFlavor } from '@/lib/jobsApi';
+
+interface ConfigurationTabProps extends ConfigComponentProps {
+ datasets: DatasetItem[];
+ datasetsLoading: boolean;
+ authenticated: boolean;
+ flavors: RunnerFlavor[];
+ hardwareLoading: boolean;
+}
+
+const ConfigurationTab: React.FCWebSocket Connection Test
+ +
+
+
+
+ Status: {connectionStatus}
+
+
+
+
+
+
+
+ {lastMessage && (
+
+
+ )}
+
+ Last Joint Data:
+
+
+
+ Timestamp:{" "}
+ {new Date(lastMessage.timestamp * 1000).toLocaleTimeString()}
+
+ Joints:
+ {Object.entries(lastMessage.joints).map(([joint, value]) => (
+
+ {joint}: {value.toFixed(4)} rad (
+ {((value * 180) / Math.PI).toFixed(2)}°)
+
+ ))}
+
+
+ Expected URL: {wsBaseUrl}/ws/joint-data
+ Make sure your FastAPI server is running!
+
+
+ );
+};
+
+export default ConfigurationTab;
diff --git a/src/components/training/TrainingExtraGate.tsx b/src/components/training/TrainingExtraGate.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e98e6864c6ec7cd4dd306273c72644d60b42a79b
--- /dev/null
+++ b/src/components/training/TrainingExtraGate.tsx
@@ -0,0 +1,239 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { useApi } from "@/contexts/ApiContext";
+import {
+ AlertTriangle,
+ CheckCircle2,
+ Copy,
+ Loader2,
+ XCircle,
+} from "lucide-react";
+
+type InstallState = "idle" | "installing" | "done" | "error";
+
+interface LogEntry {
+ timestamp: number;
+ message: string;
+}
+
+interface InstallStatus {
+ state: InstallState;
+ error: string | null;
+ logs: LogEntry[];
+}
+
+interface Props {
+ installHint: string;
+}
+
+const POLL_INTERVAL_MS = 1500;
+
+const TrainingExtraGate: React.FC
+
+
+
+ {state === "done" ? (
+
+
+
+ {state === "idle" && (
+ <>
+
+
+
+ );
+};
+
+export default TrainingExtraGate;
diff --git a/src/components/training/TrainingHeader.tsx b/src/components/training/TrainingHeader.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..120eb43ef59bafae489bf82cb979ca0d884a172b
--- /dev/null
+++ b/src/components/training/TrainingHeader.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { ArrowLeft } from 'lucide-react';
+import Logo from '@/components/Logo';
+
+const TrainingHeader: React.FC = () => {
+ const navigate = useNavigate();
+ return (
+
+ Training requires the accelerate package, which isn't installed in this environment. Install it to enable the Training page.
+
+
+
+
+ )}
+
+ {state === "installing" && (
+
+ {installHint}
+
+
+
+ Installing accelerate. This usually takes about 10 seconds.
+
+
+ )}
+
+ {state === "error" && (
+ <>
+
+ Install complete. Restart lelab to enable training:
+
-
+
-
+ Press Ctrl+C in the terminal running
lelab. +
+ -
+ Run
lelabagain. +
+
{error || "Install failed."}
+ + + )} + + {state === "error" && logs.length > 0 && ( +
+ {logs.map((log, idx) => (
+
+ )}
+ {log.message}
+ ))}
+
+
+ );
+};
+
+export default TrainingHeader;
diff --git a/src/components/training/WandbInstallDialog.tsx b/src/components/training/WandbInstallDialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..604b6f4eaa307065d1e623473ddd163bcbf78925
--- /dev/null
+++ b/src/components/training/WandbInstallDialog.tsx
@@ -0,0 +1,245 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { useApi } from "@/contexts/ApiContext";
+import {
+ AlertTriangle,
+ CheckCircle2,
+ Copy,
+ Loader2,
+ XCircle,
+} from "lucide-react";
+
+type InstallState = "idle" | "installing" | "done" | "error";
+
+interface LogEntry {
+ timestamp: number;
+ message: string;
+}
+
+interface InstallStatus {
+ state: InstallState;
+ error: string | null;
+ logs: LogEntry[];
+}
+
+interface Props {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ installHint: string;
+}
+
+const POLL_INTERVAL_MS = 1500;
+
+const WandbInstallDialog: React.FC
+
+
+ Training
++ {children} +
+); + +const AdvancedCard: React.FC
+
+
+
+
+
+
+ updateConfig('policy_use_amp', checked)}
+ />
+
+
+
+
+
+
+
+ updateConfig(
+ 'seed',
+ e.target.value ? parseInt(e.target.value) : undefined
+ )
+ }
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ {
+ const v = parseInt(e.target.value);
+ if (!isNaN(v)) updateConfig('num_workers', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+
+
+
+
+
+ updateConfig(
+ 'optimizer_lr',
+ e.target.value ? parseFloat(e.target.value) : undefined
+ )
+ }
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ updateConfig(
+ 'optimizer_weight_decay',
+ e.target.value ? parseFloat(e.target.value) : undefined
+ )
+ }
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ updateConfig(
+ 'optimizer_grad_clip_norm',
+ e.target.value ? parseFloat(e.target.value) : undefined
+ )
+ }
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+ {
+ const v = parseInt(e.target.value);
+ if (!isNaN(v)) updateConfig('log_freq', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ {
+ const v = parseInt(e.target.value);
+ if (!isNaN(v)) updateConfig('save_freq', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+ updateConfig('save_checkpoint', checked)}
+ />
+
+
+
+ updateConfig('resume', checked)}
+ />
+
+
+
+
+
+ updateConfig('wandb_entity', e.target.value || undefined)
+ }
+ placeholder="your-username"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ updateConfig('wandb_notes', e.target.value || undefined)
+ }
+ placeholder="Training run notes..."
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+
+
+ updateConfig('wandb_disable_artifact', checked)
+ }
+ />
+
+
+
+
+ updateConfig('use_policy_training_preset', checked)
+ }
+ />
+
+
+
+
+
+
+
+ {
+ if (repoId) updateConfig('dataset_repo_id', repoId);
+ }}
+ />
+
+ + HuggingFace Hub dataset repository ID +
+
+
+
+
+
+
+
+
+
+
+ {
+ const v = parseInt(e.target.value);
+ if (!isNaN(v)) updateConfig('steps', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ {
+ const v = parseInt(e.target.value);
+ if (!isNaN(v)) updateConfig('batch_size', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+
+
+ updateConfig('wandb_project', e.target.value || undefined)
+ }
+ placeholder="my-robotics-project"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+ )}
+
+
+
+
+ + Cost shown is per running hour. Final policy uploads to your HF + account when training completes. +
+
+
+
+
+
+
+
+ );
+};
+
+export default MonitoringStats;
diff --git a/src/components/training/monitoring/TrainingLogs.tsx b/src/components/training/monitoring/TrainingLogs.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..39a24548102699afac868628e03d29aae9c4b906
--- /dev/null
+++ b/src/components/training/monitoring/TrainingLogs.tsx
@@ -0,0 +1,51 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { FileText } from 'lucide-react';
+import { LogEntry } from '../types';
+
+interface TrainingLogsProps {
+ logs: LogEntry[];
+ logContainerRef: React.RefObject
+
+
+
+
+
+
+
+ Progress
+{stepLabel}
+
+
+
+
+
+
+ {isStarting ? 'warming up…' : `${progress.toFixed(1)}%`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loss{' '}
+
+ ({trainingStatus.current_loss?.toFixed(4) ?? '—'})
+
+
+
+ {lossHistory.length === 0 ? (
+
+
+ v.toFixed(4)}
+ />
+
+
+ )}
+
+
+ Waiting for first metric tick…
+
+ ) : (
+
+
+
+ Learning Rate{' '}
+
+ ({trainingStatus.current_lr?.toExponential(2) ?? '—'})
+
+
+
+ {lrHistory.length === 0 ? (
+
+
+ v.toExponential(0)}
+ />
+ v.toExponential(2)}
+ />
+
+
+ )}
+
+
+ Waiting for first metric tick…
+
+ ) : (
+
+
+ Training Logs
+
+ {logs.length === 0 ? (
+
+
+ No training logs yet. Start training to see output.
+
+ ) : (
+ logs.map((log, index) => (
+
+
+ {new Date(log.timestamp * 1000).toLocaleTimeString()}
+
+ {log.message}
+
+ ))
+ )}
+
+
+ );
+
+ case "success":
+ return (
+
+
+ + Unplug the {robotType} arm +
++ Disconnect the {robotType} robot arm from USB. The port will be + detected automatically. +
+
+
+
+
+
+ );
+
+ case "error":
+ return (
+
+
+ + Port Detected +
++ {detectedPort} +
+
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ return (
+
+ );
+};
+
+export default PortDetectionModal;
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e6a723d06574ee5cec8b00759b98f3fbe1ac7cc9
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+ React.ElementRef
+
+ + Detection Failed +
+
+
+ {error}
+
+
+
+
+ {children}
+
+ {children}
+
+
+
+
+ )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+
+ {children}
+
+
+