+ 
+ {!iconOnly && LeLab}
+
;
+};
+
+export default Logo;
diff --git a/src/components/SingleTabGuard.tsx b/src/components/SingleTabGuard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..02b7fb1595199194ed3296b96d291d47febde1b9
--- /dev/null
+++ b/src/components/SingleTabGuard.tsx
@@ -0,0 +1,141 @@
+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/TeleopStopNotice.tsx b/src/components/TeleopStopNotice.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d8a12bd6c53f10d360f77c02d929c8625f32866e
--- /dev/null
+++ b/src/components/TeleopStopNotice.tsx
@@ -0,0 +1,36 @@
+import { useEffect } from "react";
+import { useToast } from "@/hooks/use-toast";
+
+const FLAG = "lelab:teleop-stopped";
+
+/**
+ * One-time confirmation that teleoperation was stopped during the previous
+ * page's unload (a browser navigation, reload, or tab close from the
+ * teleoperation page set a sessionStorage flag, since React cleanup can't run
+ * in those cases). On the next fresh load we surface a toast wherever the user
+ * landed, then clear the flag. In-app navigation away from teleop toasts
+ * directly and never sets the flag, so this never double-fires.
+ */
+const TeleopStopNotice = () => {
+ const { toast } = useToast();
+
+ useEffect(() => {
+ let stopped = false;
+ try {
+ stopped = sessionStorage.getItem(FLAG) === "1";
+ if (stopped) sessionStorage.removeItem(FLAG);
+ } catch {
+ /* sessionStorage unavailable — nothing to show */
+ }
+ if (stopped) {
+ toast({
+ title: "Teleoperation stopped",
+ description: "The arm was disconnected cleanly when you left the page.",
+ });
+ }
+ }, [toast]);
+
+ return null;
+};
+
+export default TeleopStopNotice;
diff --git a/src/components/UpdateNotice.tsx b/src/components/UpdateNotice.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a9c026f32b102fb3957d01a2d8696278dc79f136
--- /dev/null
+++ b/src/components/UpdateNotice.tsx
@@ -0,0 +1,194 @@
+import { useState } from "react";
+import { Loader2, Copy, Sparkles, ChevronRight } from "lucide-react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { useApi } from "@/contexts/ApiContext";
+import { useToast } from "@/hooks/use-toast";
+import { useUpdateCheck } from "@/hooks/useUpdateCheck";
+
+/**
+ * App-level popup that notifies the user when a newer LeLab is available on
+ * GitHub. Offers a copy-able upgrade command, a best-effort "Update now" button
+ * (runs the pip upgrade on the backend), and a "don't ask again" opt-out.
+ */
+const UpdateNotice = () => {
+ const { status, open, dismiss } = useUpdateCheck();
+ const { baseUrl, fetchWithHeaders } = useApi();
+ const { toast } = useToast();
+ const [dontAsk, setDontAsk] = useState(false);
+ const [updating, setUpdating] = useState(false);
+ const [output, setOutput] = useState
+
+ + 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/BrowserCameraPreview.test.tsx b/src/components/control/BrowserCameraPreview.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c6bca6f70948d48ad4759e1eb4bad48682a3df24
--- /dev/null
+++ b/src/components/control/BrowserCameraPreview.test.tsx
@@ -0,0 +1,51 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot, Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import CameraRotationSelect from "./CameraRotationSelect";
+vi.mock("@/hooks/useCameraStream", () => ({ useCameraStream: () => ({ videoRef: React.createRef
+ Joint: {highlightedJoint}
+
+ )}
+
+ {/* WebSocket connection status */}
+ {isDefaultModel && (
+
+
+ )}
+
+
+ {isWebSocketConnected ? "Live Robot Data" : "Disconnected"}
+
+
+ {showVideo ? (
+ <>
+
+ {ghostSrc && (
+ 
+ )}
+
+ ) : (
+
+ );
+}
diff --git a/src/components/control/CameraFeed.tsx b/src/components/control/CameraFeed.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ccf3a333a4335ad5317e76cef07f443a9e8ccecc
--- /dev/null
+++ b/src/components/control/CameraFeed.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import BrowserCameraPreview from "./BrowserCameraPreview";
+import { CameraRotation } from "@/lib/cameraConfig";
+
+interface CameraFeedProps {
+ deviceId: string;
+ label?: string;
+ rotation?: CameraRotation;
+ width?: number;
+ height?: number;
+}
+
+const CameraFeed: React.FC
+
+ )}
+
+
+);
+
+export default CameraFeed;
diff --git a/src/components/control/CameraRotationSelect.tsx b/src/components/control/CameraRotationSelect.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a664eb8623f5d4f8aec6cca6633aac0dc9e36eec
--- /dev/null
+++ b/src/components/control/CameraRotationSelect.tsx
@@ -0,0 +1,30 @@
+import React, { useId } from "react";
+import { Label } from "@/components/ui/label";
+import { CAMERA_ROTATIONS, CameraRotation, cameraRotation } from "@/lib/cameraConfig";
+
+interface Props {
+ rotation: CameraRotation | null;
+ onChange: (rotation: CameraRotation) => void;
+ disabled?: boolean;
+}
+
+export default function CameraRotationSelect({ rotation, onChange, disabled }: Props) {
+ const id = useId();
+ return (
+ {label}
+ )}
+
+
+
+
+ );
+}
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
+
+ );
+};
+
+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/RecordingCameraFeed.test.tsx b/src/components/control/RecordingCameraFeed.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a000493341cd931a2c32f02361a31aabccb45b20
--- /dev/null
+++ b/src/components/control/RecordingCameraFeed.test.tsx
@@ -0,0 +1,27 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test } from "vitest";
+import RecordingCameraFeed from "./RecordingCameraFeed";
+import { recordingCameraWindows } from "@/lib/cameraConfig";
+
+test("recording feeds use each camera's output ratio without rotating corrected backend frames", () => {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+ const windows = recordingCameraWindows(["front", "wrist"], {
+ front: { type: "opencv", width: 640, height: 480, rotation: 0 },
+ wrist: { type: "opencv", width: 640, height: 480, rotation: 90 },
+ }, { w: 1000, h: 600 });
+ const container = document.createElement("div"), root = createRoot(container);
+ act(() => root.render(<>{Object.entries(windows).map(([name, dimensions]) => (
+
+ {/* 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}
+
+ {!live ? (
+ Getting ready…
+ ) : hasError ? (
+ Connecting feed…
+ ) : (
+ 
+ )}
+
+ {name}
+
+
+ );
+};
+
+export default RecordingCameraFeed;
diff --git a/src/components/control/TeleopCameraPanel.tsx b/src/components/control/TeleopCameraPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e61377dcd1c23d95fd70b852f85ab93030acbfa
--- /dev/null
+++ b/src/components/control/TeleopCameraPanel.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { useRobots } from "@/hooks/useRobots";
+import { useAvailableCameras } from "@/hooks/useAvailableCameras";
+import { previewDeviceId } from "@/lib/cameraConfig";
+import CameraFeed from "./CameraFeed";
+
+/**
+ * Optional live camera panel for the teleoperation page. Off by default so we
+ * never call getUserMedia just by landing on the page (same consent pattern as
+ * the calibration camera toggle). Teleoperation opens no cv2 cameras, so the
+ * browser can stream them directly while the arm runs.
+ *
+ * A strict mirror of the selected robot's configured cameras: one live feed per
+ * camera on the robot record (e.g. "wrist_cam", "webcam"), stacked vertically.
+ * If the robot has none configured it shows nothing — teleop never surfaces a
+ * device that wasn't deliberately added to the robot.
+ */
+const TeleopCameraPanel: React.FC = () => {
+ const [enabled, setEnabled] = useState(false);
+ // Bumped by the retry button to remount the feeds (a fresh getUserMedia
+ // attempt) — useful if a camera was unplugged and reconnected.
+ const [reloadKey, setReloadKey] = useState(0);
+ const { selectedRecord, isLoading: robotsLoading } = useRobots();
+ const { cameras: availableCameras } = useAvailableCameras({ enabled });
+
+ // Feeds come solely from the robot's configured cameras, streamed by their
+ // stored browser device_id or, in a browser that doesn't know that ID, by
+ // their cv2 index. A configured camera whose device is currently absent still
+ // shows (name + failed-preview placeholder), so the user can tell it's
+ // expected but not detected.
+ const configured = selectedRecord?.cameras ?? [];
+ const feeds = configured.map((c) => ({
+ key: c.id,
+ name: c.name,
+ deviceId: previewDeviceId(c, availableCameras),
+ rotation: c.rotation,
+ width: c.width,
+ height: c.height,
+ }));
+
+ return (
+
+
+ );
+};
+
+export default TeleopCameraPanel;
diff --git a/src/components/control/VisualizerPanel.tsx b/src/components/control/VisualizerPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9dca7861db3cc1e0cf8def14d85bdcc0083859d1
--- /dev/null
+++ b/src/components/control/VisualizerPanel.tsx
@@ -0,0 +1,52 @@
+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;
+ /** Optional content rendered as a column beside the 3D viewer (e.g. a camera panel). */
+ rightSlot?: React.ReactNode;
+}
+
+const VisualizerPanel: React.FC
+
+
+ {enabled ? (
+ feeds.length > 0 ? (
+ Cameras
+
+ {enabled && feeds.length > 0 && (
+
+ )}
+
+
+
+ {feeds.map((feed) => (
+
+ ) : (
+ + {robotsLoading + ? "Loading robot..." + : "No cameras configured for this robot. Add them during calibration to see live feeds here."} +
+ ) + ) : ( ++ Turn on to watch your cameras while you teleoperate. +
+ )} +
+
+ );
+};
+
+export default VisualizerPanel;
diff --git a/src/components/dataset/DeleteDatasetDialog.test.tsx b/src/components/dataset/DeleteDatasetDialog.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fe87aca510f9e6be6444cabf78547e37dd6a03b0
--- /dev/null
+++ b/src/components/dataset/DeleteDatasetDialog.test.tsx
@@ -0,0 +1,66 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test, vi } from "vitest";
+
+import DeleteDatasetDialog from "./DeleteDatasetDialog";
+
+const fetchWithHeaders = vi.fn(async (_url: string, _init: { body: string }) => ({ ok: true, json: async () => ({ success: true }) }));
+
+vi.mock("@/contexts/ApiContext", () => ({
+ useApi: () => ({ baseUrl: "http://api", fetchWithHeaders }),
+}));
+vi.mock("@/hooks/use-toast", () => ({ useToast: () => ({ toast: () => {} }) }));
+
+const render = async (onHub: boolean, onDeleted = () => {}) => {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ await act(async () => {
+ root.render(
+
+
+ {rightSlot && (
+
+
+
+ Teleoperation
+
+
+ {rightSlot}
+ )}
+
+
+ )}
+
+ setDeleteFromHub(checked === true)}
+ />
+
+
+ {deleteFromHub && (
+
+
+ setConfirmText(e.target.value)}
+ className="bg-gray-800 border-gray-700 text-white"
+ />
+
+ )}
+
+ No episodes in this dataset.
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default EpisodeList;
diff --git a/src/components/dataset/EpisodeTaskDialog.test.tsx b/src/components/dataset/EpisodeTaskDialog.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9b1e34f47fc869e354a750f6bfc882791ae02218
--- /dev/null
+++ b/src/components/dataset/EpisodeTaskDialog.test.tsx
@@ -0,0 +1,61 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test } from "vitest";
+
+import EpisodeTaskDialog from "./EpisodeTaskDialog";
+
+test("saves the task for the browsed episode or for every episode", async () => {
+ Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ const saved: [string, number | null][] = [];
+
+ try {
+ await act(async () => {
+ root.render(
+
+
+ Episodes
+
+ {episodes.length}
+
+ {/* Tailwind arbitrary values take underscores where the CSS needs spaces:
+ `calc(100vh-280px)` is not valid CSS and the rule is dropped. */}
+
+ {episodes.map((ep) => {
+ const active = ep.episode_index === selected;
+ return (
+
+
+
+ {active && onEditTask && (
+
+ )}
+
+ );
+ })}
+
+ This episode has no camera videos on disk.
+
+ );
+ }
+
+ const secondaries = cams.filter((c) => c.name !== activeCam);
+
+ return (
+
+ {/* Camera + view controls */}
+
+ );
+};
+
+export default EpisodeViewer;
diff --git a/src/components/dataset/FilmStrip.tsx b/src/components/dataset/FilmStrip.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9475aa24eb3196b9a74627fd95117c9fdb25e956
--- /dev/null
+++ b/src/components/dataset/FilmStrip.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { Loader2 } from "lucide-react";
+import { useApi } from "@/contexts/ApiContext";
+import { Thumbnail, getThumbnails } from "@/lib/datasetApi";
+
+interface FilmStripProps {
+ repoId: string;
+ episodeIndex: number;
+ camera: string;
+ /** Episode-relative frame currently on screen; the nearest thumb highlights. */
+ currentFrame: number;
+ onSeekFrame: (frameIndex: number) => void;
+ count?: number;
+}
+
+/**
+ * Thumbnails across the episode. One request for the whole strip — the backend
+ * decodes them in a single pass over the mp4 rather than reopening it per frame.
+ */
+const FilmStrip: React.FC
+
+
+ {/* Viewport */}
+
+ {cams.map((c) => (
+
+ ))}
+
+
+ {cams.length > 1 && (
+
+ )}
+
+
+
+
+ {RATES.map((r) => (
+
+ ))}
+
+ 1
+ ? "grid grid-cols-1 gap-2 sm:grid-cols-2"
+ : "grid grid-cols-1"
+ }
+ >
+
+
+ {/* Transport */}
+
+
+
+ {showAll &&
+ secondaries.map((c) => (
+
+
+ ))}
+
+
+
+
+
+ seekToFrame(Number(e.target.value))}
+ className="mx-2 h-1 flex-1 cursor-pointer appearance-none rounded bg-gray-800 accent-orange-500"
+ aria-label="Scrub episode"
+ />
+
+
+ {currentFrame} / {Math.max(detail.length - 1, 0)}
+
+
+
+
+
+
+ Episode {detail.episode_index} of {detail.total_episodes}
+
+
+
+
+
+ );
+ }
+
+ if (thumbs.length === 0) {
+ return (
+
+ No thumbnails
+
+ );
+ }
+
+ return (
+
+ {thumbs.map((t, i) => (
+
+ ))}
+
+ );
+};
+
+export default FilmStrip;
diff --git a/src/components/dataset/MergeDatasetsDialog.test.tsx b/src/components/dataset/MergeDatasetsDialog.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a94ffb30f195657440958f82d39c0cbb4a4e520b
--- /dev/null
+++ b/src/components/dataset/MergeDatasetsDialog.test.tsx
@@ -0,0 +1,60 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test } from "vitest";
+
+import MergeDatasetsDialog from "./MergeDatasetsDialog";
+
+test("opens with the browsed local dataset retained as the first merge source", async () => {
+ Object.assign(globalThis, {
+ IS_REACT_ACT_ENVIRONMENT: true,
+ ResizeObserver: class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ },
+ });
+ Element.prototype.scrollIntoView = () => {};
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+
+ try {
+ await act(async () => {
+ root.render(
+
+ Joint motion unavailable — {error}
+
+ );
+ }
+
+ if (!motion) {
+ return ;
+ }
+
+ return (
+
+
+ );
+};
+
+export default MotionTrace;
diff --git a/src/components/dataset/MoveEpisodesDialog.test.tsx b/src/components/dataset/MoveEpisodesDialog.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..cbe095dec968b83800c93d61d8182bbe7c17a1d1
--- /dev/null
+++ b/src/components/dataset/MoveEpisodesDialog.test.tsx
@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, test } from "vitest";
+
+import type { DatasetItem, MoveDestination } from "@/lib/replayApi";
+
+import { parseEpisodeList } from "@/lib/datasetApi";
+
+import MoveEpisodesDialog from "./MoveEpisodesDialog";
+
+test("parses episode lists and ranges", () => {
+ expect(parseEpisodeList("3, 1, 5-7, 3", 10)).toEqual([1, 3, 5, 6, 7]);
+ expect(parseEpisodeList(" 2 - 4 ,", 10)).toEqual([2, 3, 4]);
+ expect(parseEpisodeList("", 10)).toBeNull();
+ expect(parseEpisodeList("10", 10)).toBeNull();
+ expect(parseEpisodeList("4-2", 10)).toBeNull();
+ expect(parseEpisodeList("1, x", 10)).toBeNull();
+});
+
+const DATASETS: DatasetItem[] = [
+ { repo_id: "local/demo", source: "local", last_modified: "", private: false },
+ { repo_id: "local/target", source: "local", last_modified: "", private: false },
+];
+
+test("opens on the browsed episode and refuses to move every episode", async () => {
+ Object.assign(globalThis, {
+ IS_REACT_ACT_ENVIRONMENT: true,
+ ResizeObserver: class {
+ observe() {}
+ unobserve() {}
+ disconnect() {}
+ },
+ });
+ Element.prototype.scrollIntoView = () => {};
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ const moved: [number[], MoveDestination][] = [];
+
+ try {
+ await act(async () => {
+ root.render(
+
+
+ Joint motion
+
+
+ frame {currentFrame}
+
+
+
+
+ {
+ // activeLabel is the `frame` value under the cursor.
+ const f = e?.activeLabel;
+ if (f !== undefined && f !== null) onSeekFrame(Number(f));
+ }}
+ >
+
+
+
+
+ [v.toFixed(2), "motion"]}
+ labelFormatter={(l) => `Frame ${l}`}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {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}
+
+ {/* Imported subtitles are file paths — truncate the *start* (rtl
+ flips the ellipsis to the left) so the more useful tail stays
+ visible. The leading LRM keeps the path's first "/" from being
+ bidi-reordered to the wrong end. */}
+
+ {isImported ? "\u200e" + subtitle : subtitle}
+
+
+
+
+ ) : null}
+ {showInferenceRow ? (
+
+ {isStarting ? "Training starting…" : `${progressPct.toFixed(1)}%`}
+
+
+
+ ) : null}
+
+
+
+ {error ? Jobs
+
+
+
+
+
+
+ Couldn't load jobs: {error}
: null} + ++ {query + ? "No local jobs match your search." + : "No active local jobs. Start one from the Training page."} +
+ ) : ( +
+ {localActive.map((job) => (
+
+ )}
+
+ {importedJobs.map((job) => (
+
+ + 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) => (
+
+
+ onRotate(name, angle)}
+ />
+
+ );
+ })}
+
+);
+
+export default CameraBindings;
diff --git a/src/components/landing/DatasetPicker.tsx b/src/components/landing/DatasetPicker.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..14822e830b5f6f69afcf53cb9cc93c5524e6741b
--- /dev/null
+++ b/src/components/landing/DatasetPicker.tsx
@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { Plus, ExternalLink } from "lucide-react";
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command";
+import { DatasetItem } from "@/lib/replayApi";
+
+interface DatasetPickerProps {
+ datasets: DatasetItem[];
+ loading: boolean;
+ onPickExisting: (item: DatasetItem) => void;
+ onCreateNew?: (name: string) => void;
+ onOpenCustom?: (repoId: string) => void;
+ children: React.ReactNode;
+}
+
+const REPO_ID_RE = /^[\w.\-]+\/[\w.\-]+$/;
+const NAME_RE = /^[A-Za-z0-9._-]+$/;
+
+const DatasetPicker: React.FC
+
+
+
+ + {dims.width}×{dims.height} +
+
+
+ );
+};
+
+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 (
+ <>
+
+ {children}
: null,
+ DialogContent: ({ children }: { children: React.ReactNode }) => {children}
,
+ DialogHeader: ({ children }: { children: React.ReactNode }) => {children}
,
+ DialogTitle: ({ children }: { children: React.ReactNode }) => {children}
, + DialogDescription: ({ children }: { children: React.ReactNode }) =>{children}
, +})); +const robot: RobotRecord = { + name: "so101", leader_port: "leader", follower_port: "follower", leader_config: "leader.json", follower_config: "follower.json", is_clean: true, + cameras: [ + { id: "wrist", name: "wrist", type: "opencv", device_id: "usb-wrist", camera_index: 1, width: 640, height: 480, rotation: 90 }, + { id: "top", name: "top", type: "opencv", device_id: "usb-top", camera_index: 2, width: 640, height: 480, rotation: 180 }, + ], +}; +let root: Root; +let container: HTMLDivElement; +beforeEach(() => { + Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true }); + container = document.createElement("div"); root = createRoot(container); + mocks.fetcher.mockReset(); mocks.navigate.mockReset(); mocks.toast.mockReset(); + mocks.fetcher.mockImplementation(async (url: string) => new Response(JSON.stringify( + url.endsWith("/checkpoints") ? { checkpoints: [{ step: 10, source: "local", ref: "checkpoint" }] } + : url.endsWith("/policy-config") ? { policy_type: "act", requires_task: false, image_features: { wrist: { width: 480, height: 640 }, top: { width: 640, height: 480 } } } + : { message: "Started", log_path: "rollout.log" }, + ))); +}); +afterEach(() => { act(() => root.unmount()); vi.useRealTimers(); }); +const rotations = () => Array.from(container.querySelectorAll("select")).filter((select) => Array.from(select.options).some((option) => option.text.includes("clockwise"))); +const bindings = () => Array.from(container.querySelectorAll("select")).filter((select) => Array.from(select.options).some((option) => option.text.includes("#"))); +function change(select: HTMLSelectElement, value: string) { + act(() => { select.value = value; select.dispatchEvent(new Event("change", { bubbles: true })); }); +} +async function render(record = robot) { + await act(async () => root.render(
+
+
+
+
+ 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..362aa60f34ffb644b680be63a67b1d9feca88bb9
--- /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 --with-executables-from huggingface_hub 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
+
+
+ )}
+
+
+
+
+ {hasRect ? (
+
+ ) : (
+
+ )}
+
,
+ document.body
+ );
+};
+
+export default SpotlightOverlay;
diff --git a/src/components/onboarding/TourCard.tsx b/src/components/onboarding/TourCard.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f2df23094b66d281c8e8215ca03c0d34bf669905
--- /dev/null
+++ b/src/components/onboarding/TourCard.tsx
@@ -0,0 +1,185 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Check, Lock, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useOnboarding } from "@/contexts/OnboardingContext";
+
+const MARGIN = 8;
+const GAP = 12;
+const CARD_W = 340;
+
+const clamp = (v: number, lo: number, hi: number) =>
+ Math.max(lo, Math.min(hi, v));
+
+interface TourCardProps {
+ /** Bounding rect of the highlighted element, or null for a centered card. */
+ rect: DOMRect | null;
+}
+
+const TourCard: React.FC
+
+
+
+ );
+};
+
+export default TourCard;
diff --git a/src/components/onboarding/TourLauncher.tsx b/src/components/onboarding/TourLauncher.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..041d059eb459bfea0be5a4f3e864baf7c8b3151d
--- /dev/null
+++ b/src/components/onboarding/TourLauncher.tsx
@@ -0,0 +1,58 @@
+import React from "react";
+import { HelpCircle } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useOnboarding } from "@/contexts/OnboardingContext";
+
+interface TourLauncherProps {
+ /** "floating" pins a round button to the corner on every page; "inline" is
+ * a compact button for the landing top bar. */
+ variant?: "floating" | "inline";
+ className?: string;
+}
+
+const TourLauncher: React.FC
+
+
+
+ + Step {stepIndex + 1} of {totalSteps} +
+ {currentComplete && ( + ++ {currentStep.title} +
++ {currentStep.body} +
+ + {currentGated && !currentComplete && ( +
+
+
+
+
+ {currentStep.optional && !isLast && (
+
+ )}
+
+
+
+
+ );
+};
+
+interface CameraPreviewProps {
+ camera: CameraConfig;
+ deviceId: string;
+ paused: boolean;
+ readOnly: boolean;
+ robotName?: string;
+ onRemove: () => void;
+ onUpdate: (updates: Partial+ {readOnly ? "Cameras" : "Camera Configuration"} +
+ + {/* Add Camera Section — hidden in read-only mode (cameras are managed on + the Calibration page, not added here). */} + {!readOnly && ( +
+
+ )}
+
+ {/* 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"
+ />
+
+
+
+
+
+
+ {!readOnly && (
+
+ )}
+
+ {cameras.length === 0 && (
+ + Configured Cameras ({cameras.length}) +
+ )} + +
+ {cameras.map((camera) => (
+ removeCamera(camera.id)}
+ onUpdate={(updates) => updateCamera(camera.id, updates)}
+ />
+ ))}
+
+
+
+ )}
+ + {readOnly + ? "No cameras are configured for this robot." + : "No cameras configured. Add a camera to get started."} +
+
+
+ );
+};
+
+export default CameraConfiguration;
diff --git a/src/components/recording/CameraReferenceControls.tsx b/src/components/recording/CameraReferenceControls.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..c23e97acca744ef947cdf88decfb1e6996a09631
--- /dev/null
+++ b/src/components/recording/CameraReferenceControls.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+
+interface Props {
+ hasReference: boolean;
+ opacity: number;
+ onOpacityChange: (opacity: number) => void;
+ onSave: () => void;
+ onClear: () => void;
+ disabled: boolean;
+ error: string | null;
+}
+
+/** Save the current frame as the reference, then slide the ghost overlay over the live preview. */
+const CameraReferenceControls: React.FC
+
+
+ {/* Camera Info */}
+
+ {
+ const video = previewRef.current?.querySelector("video");
+ if (video) void reference.save(video);
+ }}
+ onClear={() => void reference.clear()}
+ disabled={paused || !!rotationError}
+ error={reference.error}
+ />
+ )}
+ {rotationError && onUpdate({ rotation: value })} />
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ {readOnly && robotName && (
+ {camera.name}
+ {!readOnly && ( + + )} +{rotationError} Select a valid rotation.
} + {readOnly ? ( ++ {output ? `${output.width}×${output.height} · ${rotation}° clockwise` : "Invalid rotation"} + {camera.fps ? ` · ${camera.fps} fps` : ""} +
+ ) : ( + <> +
+
+
+ Capture:
+
+
+ {
+ 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"
+ />
+
+
+ FOURCC:
+
+
+
+ Backend:
+
+
+ + Overriding the backend can reorder camera indices on macOS. +
+
+ Type: {camera.type} | Device:{" "}
+ {camera.device_id?.substring(0, 10)}...
+
+
+
+);
+
+export default CameraReferenceControls;
diff --git a/src/components/replay/DatasetCombobox.tsx b/src/components/replay/DatasetCombobox.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e5fdb06f68197c1fffb26824eff60a5591eb3c2
--- /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
+
+ {hasReference && (
+
+ )}
+
+ {hasReference && (
+
+ )}
+ {error && {error}
} +
+ 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
+ {/* An HF Jobs pod picks its own device, so this only applies locally. */}
+ {config.target.runner === 'local' && (
+
+
+
+
+
+ )}
+
+ 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"
+ />
+
+ )}
+
+
+
+ updateConfig('policy_base_model_path', e.target.value || undefined)
+ }
+ placeholder="nvidia/GR00T-N1.7-3B"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+ + HuggingFace repo of the pretrained GR00T backbone to fine-tune. +
+
+
+
+
+
+
+ updateConfig('policy_embodiment_tag', e.target.value || undefined)
+ }
+ placeholder="new_embodiment"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+ updateConfig(
+ 'policy_relative_exclude_joints',
+ e.target.value
+ .split(',')
+ .map((s) => s.trim())
+ .filter(Boolean),
+ )
+ }
+ placeholder="gripper"
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+ + Comma-separated joints kept absolute when relative actions are on. +
+
+
+ updateConfig('policy_chunk_size', v)}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+ updateConfig('policy_n_action_steps', v)}
+ className="bg-slate-900 border-slate-600 text-white rounded-lg"
+ />
+
+
+
+
+
+ updateConfig('policy_use_relative_actions', checked)
+ }
+ className="data-[state=checked]:bg-green-500"
+ />
+
+
+
+
+ updateConfig('policy_use_bf16', checked)}
+ className="data-[state=checked]:bg-green-500"
+ />
+
+
+
+
+
+ updateConfig('dataset_image_transforms_enable', checked)
+ }
+ className="data-[state=checked]:bg-green-500"
+ />
+
+
+
+
+
+
+ + 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}
+
+
+