+ 
+ {!iconOnly && LeLab}
+
;
+};
+
+export default Logo;
diff --git a/src/components/SingleTabGuard.tsx b/src/components/SingleTabGuard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ad4f5b7ae76e105ab33eb009cbad074a918f196e
--- /dev/null
+++ b/src/components/SingleTabGuard.tsx
@@ -0,0 +1,136 @@
+import { useCallback, useEffect, useRef, useState, ReactNode } from "react";
+import { Button } from "@/components/ui/button";
+
+type Peer = { id: string; openedAt: number; lastSeen: number };
+
+const CHANNEL = "lelab-tabs-v1";
+const HEARTBEAT_MS = 1000;
+const PEER_TIMEOUT_MS = 3000;
+
+const SingleTabGuard = ({ children }: { children: ReactNode }) => {
+ const [isPrimary, setIsPrimary] = useState(true);
+ const peersRef = useRef
+ {!iconOnly && LeLab}
+
+
+ )}
+
+ );
+};
+
+export default SingleTabGuard;
diff --git a/src/components/UrdfViewer.tsx b/src/components/UrdfViewer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..60e0b59f1a38fbf9d88c72735af36e0aba9dab3c
--- /dev/null
+++ b/src/components/UrdfViewer.tsx
@@ -0,0 +1,304 @@
+import React, {
+ useEffect,
+ useRef,
+ useState,
+ useMemo,
+ useCallback,
+ memo,
+} 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
+
+ + LeLab is already open in another tab +
++ Only one tab can control the robot at a time. Switch back to the + original tab, or take over here — the other tab will lock. +
+ +
+
+
+ {/* Joint highlight indicator */}
+ {highlightedJoint && (
+
+ );
+};
+
+export default memo(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..d66d6c63feacc604de91708e6c0f103cd103f21a
--- /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/VisualizerPanel.tsx b/src/components/control/VisualizerPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..93ef0d2a027ff7f579dbcec85632d5f71511f08f
--- /dev/null
+++ b/src/components/control/VisualizerPanel.tsx
@@ -0,0 +1,46 @@
+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 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) => (
+
+
+
+ );
+};
+
+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
+
+
+ {robot && (
+
+
+ {status && (
+ + {status} +
+ )} + {robot && ( +
+
+
+
+
+ Configure (calibrate)
+
+
+
+
+
+ Delete robot config
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+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:
+
+
+ {
+ if (v !== undefined) onUpdate({ width: v });
+ }}
+ className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+ min="320"
+ max="1920"
+ />
+ ×
+ {
+ if (v !== undefined) onUpdate({ height: v });
+ }}
+ className="bg-gray-800 border-gray-700 text-white text-xs h-6 px-2 w-16"
+ min="240"
+ max="1080"
+ />
+
+
+ FPS:
+ {
+ if (v !== undefined) onUpdate({ fps: v });
+ }}
+ 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 ConfigurationTab;
diff --git a/src/components/training/InstallProgress.tsx b/src/components/training/InstallProgress.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..25080ee20659e2f5700aaf74911fc10037ed52be
--- /dev/null
+++ b/src/components/training/InstallProgress.tsx
@@ -0,0 +1,176 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import {
+ AlertTriangle,
+ CheckCircle2,
+ Copy,
+ Loader2,
+ XCircle,
+} from "lucide-react";
+import type { InstallState, LogEntry } from "@/hooks/useInstallExtra";
+
+interface InstallProgressProps {
+ state: InstallState;
+ error: string | null;
+ logs: LogEntry[];
+ logBoxRef: React.RefObject{idleDescription}
+
+
+
+
+ )}
+
+ {state === "installing" && (
+
+ {installHint}
+
+
+
+ Installing{" "}
+
+ {packageName}
+
+ . This usually takes about 10 seconds.
+
{doneDescription}
+ )}
+
+ {state === "error" && (
+ <>
+ {error || "Install failed."}
+ + + )} + + {state === "error" && logs.length > 0 && ( +
+ {logs.map((log, idx) => (
+
+ )}
+
+ );
+};
+
+export const RestartInstructions: React.FC<{ purpose: string }> = ({
+ purpose,
+}) => (
+ <>
+ {log.message}
+ ))}
+
+ Install complete. Restart{" "}
+
+ lelab
+ {" "}
+ to enable {purpose}:
+
-
+
-
+ Press{" "}
+
+ Ctrl+C
+ {" "}
+ in the terminal running{" "}
+
+ lelab ++ . +
+ -
+ Run{" "}
+
+ lelab +{" "} + again. +
+
+
+
+
+
+
+
+
+ Training requires the{" "}
+
+
+
+ );
+};
+
+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 (
+
+ accelerate
+ {" "}
+ package, which isn't installed in this environment. Install it
+ to enable the Training page.
+
+ }
+ doneDescription={
+
+ );
+};
+
+export default TrainingHeader;
diff --git a/src/components/training/WandbInstallDialog.tsx b/src/components/training/WandbInstallDialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3ead2f07cd67d3b4ddc7f93324183a98a33e93b9
--- /dev/null
+++ b/src/components/training/WandbInstallDialog.tsx
@@ -0,0 +1,68 @@
+import React from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { useInstallExtra } from "@/hooks/useInstallExtra";
+import {
+ InstallProgress,
+ InstallTitleIcon,
+ RestartInstructions,
+ installTitle,
+} from "./InstallProgress";
+
+interface Props {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ installHint: string;
+}
+
+const WandbInstallDialog: React.FC
+
+
+ Training
++ {children} +
+); + +const AdvancedCard: React.FC
+
+
+
+
+
+
+ updateConfig('policy_use_amp', checked)}
+ />
+
+
+
+
+
+
+ updateConfig('seed', v)}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ {
+ if (v !== undefined) updateConfig('num_workers', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+
+
+
+
+ updateConfig('optimizer_lr', v)}
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ updateConfig('optimizer_weight_decay', v)}
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ updateConfig('optimizer_grad_clip_norm', v)}
+ placeholder="Use policy default"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+ {
+ if (v !== undefined) updateConfig('log_freq', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+ {
+ if (v !== undefined) 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 +
+
+
+
+
+
+
+
+
+
+
+ {
+ if (v !== undefined) updateConfig('steps', v);
+ }}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ {
+ if (v !== undefined) 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/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8722561cf6bda62d62f9a0c67730aefda971873a
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+ React.ElementRef
+
+ + Detection Failed +
+
+
+ {error}
+
+
+
+
+
+
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+ React.ElementRef
+ {title && {title} }
+ {description && (
+ {description}
+ )}
+
+ {action}
+
+
+ )}
+
+
+ Drop Urdf Files Here
+ + Release to upload your robot model +
+