implement victors viewer which is wayy better

src/components/Logo.tsx

@@ -0,0 +1,24 @@
+
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+interface LogoProps extends React.HTMLAttributes<HTMLDivElement> {
+  iconOnly?: boolean;
+}
+
+const Logo: React.FC<LogoProps> = ({ className, iconOnly = false }) => {
+  return (
+    <div className={cn("flex items-center gap-2", className)}>
+      <img
+        src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png"
+        alt="LiveLab Logo"
+        className="h-8 w-8"
+      />
+      {!iconOnly && (
+        <span className="text-xl font-bold text-white">LiveLab</span>
+      )}
+    </div>
+  );
+};
+
+export default Logo;

src/components/landing/ActionList.tsx

@@ -0,0 +1,57 @@
+
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+import { Action } from './types';
+
+interface ActionListProps {
+  actions: Action[];
+  robotModel: string;
+}
+
+const ActionList: React.FC<ActionListProps> = ({ actions, robotModel }) => {
+  const isLeKiwi = robotModel === "LeKiwi";
+  const isDisabled = !robotModel || isLeKiwi;
+
+  return (
+    <div className="pt-6">
+      {!robotModel && (
+        <p className="text-center text-gray-400 mb-4">
+          Please select a robot model to continue.
+        </p>
+      )}
+      {isLeKiwi && (
+        <p className="text-center text-yellow-500 mb-4">
+          LeKiwi model is not yet supported. Please select another model to continue.
+        </p>
+      )}
+      <div className="space-y-4">
+        {actions.map((action, index) => (
+          <div
+            key={index}
+            className={`flex items-center justify-between p-4 bg-gray-800 rounded-lg border border-gray-700 transition-opacity ${
+              isDisabled ? "opacity-50" : ""
+            }`}
+          >
+            <div>
+              <h3 className="font-semibold text-lg">{action.title}</h3>
+              <p className="text-gray-400 text-sm">
+                {action.description}
+              </p>
+            </div>
+            <Button
+              onClick={action.handler}
+              size="icon"
+              className={`${action.color} text-white`}
+              disabled={isDisabled}
+            >
+              <ArrowRight className="w-5 h-5" />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ActionList;

src/components/landing/LandingHeader.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+const LandingHeader = () => {
+  return <div className="text-center space-y-4 max-w-lg w-full">
+      <img src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png" alt="LiveLab Logo" className="mx-auto h-20 w-20" />
+      <h1 className="text-5xl font-bold tracking-tight">LiveLab</h1>
+      <p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
+    </div>;
+};
+export default LandingHeader;

src/components/landing/PermissionModal.tsx

@@ -0,0 +1,59 @@
+
+import React from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Camera, Mic } from "lucide-react";
+
+interface PermissionModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onPermissionsResult: (allow: boolean) => void;
+}
+
+const PermissionModal: React.FC<PermissionModalProps> = ({ open, onOpenChange, onPermissionsResult }) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[480px] p-8">
+        <DialogHeader>
+          <div className="flex justify-center items-center gap-4 mb-4">
+            <Camera className="w-8 h-8 text-orange-500" />
+            <Mic className="w-8 h-8 text-orange-500" />
+          </div>
+          <DialogTitle className="text-white text-center text-2xl font-bold">
+            Enable Camera & Microphone
+          </DialogTitle>
+        </DialogHeader>
+        <div className="text-center space-y-6 py-4">
+          <DialogDescription className="text-gray-400 text-base leading-relaxed">
+            LiveLab requires access to your camera and microphone for a fully
+            immersive telepresence experience. This enables real-time video
+            feedback and voice command capabilities.
+          </DialogDescription>
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
+            <Button
+              onClick={() => onPermissionsResult(true)}
+              className="w-full sm:w-auto bg-orange-500 hover:bg-orange-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-orange-500/30 hover:shadow-lg hover:shadow-orange-500/40"
+            >
+              Allow Access
+            </Button>
+            <Button
+              onClick={() => onPermissionsResult(false)}
+              variant="outline"
+              className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
+            >
+              Continue without
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default PermissionModal;

src/components/landing/RecordingModal.tsx

@@ -0,0 +1,221 @@
+
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+
+interface RecordingModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  leaderPort: string;
+  setLeaderPort: (value: string) => void;
+  followerPort: string;
+  setFollowerPort: (value: string) => void;
+  leaderConfig: string;
+  setLeaderConfig: (value: string) => void;
+  followerConfig: string;
+  setFollowerConfig: (value: string) => void;
+  leaderConfigs: string[];
+  followerConfigs: string[];
+  datasetRepoId: string;
+  setDatasetRepoId: (value: string) => void;
+  singleTask: string;
+  setSingleTask: (value: string) => void;
+  numEpisodes: number;
+  setNumEpisodes: (value: number) => void;
+  isLoadingConfigs: boolean;
+  onStart: () => void;
+}
+
+const RecordingModal: React.FC<RecordingModalProps> = ({
+  open,
+  onOpenChange,
+  leaderPort,
+  setLeaderPort,
+  followerPort,
+  setFollowerPort,
+  leaderConfig,
+  setLeaderConfig,
+  followerConfig,
+  setFollowerConfig,
+  leaderConfigs,
+  followerConfigs,
+  datasetRepoId,
+  setDatasetRepoId,
+  singleTask,
+  setSingleTask,
+  numEpisodes,
+  setNumEpisodes,
+  isLoadingConfigs,
+  onStart,
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8 max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <div className="flex justify-center items-center gap-4 mb-4">
+            <div className="w-8 h-8 bg-red-500 rounded-full flex items-center justify-center">
+              <span className="text-white font-bold text-sm">REC</span>
+            </div>
+          </div>
+          <DialogTitle className="text-white text-center text-2xl font-bold">
+            Configure Recording
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6 py-4">
+          <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
+            Configure the robot arm settings and dataset parameters for
+            recording.
+          </DialogDescription>
+
+          <div className="grid grid-cols-1 gap-6">
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
+                Robot Configuration
+              </h3>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="recordLeaderPort" className="text-sm font-medium text-gray-300">
+                    Leader Port
+                  </Label>
+                  <Input
+                    id="recordLeaderPort"
+                    value={leaderPort}
+                    onChange={(e) => setLeaderPort(e.target.value)}
+                    placeholder="/dev/tty.usbmodem5A460816421"
+                    className="bg-gray-800 border-gray-700 text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="recordLeaderConfig" className="text-sm font-medium text-gray-300">
+                    Leader Calibration Config
+                  </Label>
+                  <Select value={leaderConfig} onValueChange={setLeaderConfig}>
+                    <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                      <SelectValue placeholder={isLoadingConfigs ? "Loading configs..." : "Select leader config"} />
+                    </SelectTrigger>
+                    <SelectContent className="bg-gray-800 border-gray-700">
+                      {leaderConfigs.map((config) => (
+                        <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                          {config}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="recordFollowerPort" className="text-sm font-medium text-gray-300">
+                    Follower Port
+                  </Label>
+                  <Input
+                    id="recordFollowerPort"
+                    value={followerPort}
+                    onChange={(e) => setFollowerPort(e.target.value)}
+                    placeholder="/dev/tty.usbmodem5A460816621"
+                    className="bg-gray-800 border-gray-700 text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="recordFollowerConfig" className="text-sm font-medium text-gray-300">
+                    Follower Calibration Config
+                  </Label>
+                  <Select value={followerConfig} onValueChange={setFollowerConfig}>
+                    <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                      <SelectValue placeholder={isLoadingConfigs ? "Loading configs..." : "Select follower config"} />
+                    </SelectTrigger>
+                    <SelectContent className="bg-gray-800 border-gray-700">
+                      {followerConfigs.map((config) => (
+                        <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                          {config}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <h3 className="text-lg font-semibold text-white border-b border-gray-700 pb-2">
+                Dataset Configuration
+              </h3>
+              <div className="grid grid-cols-1 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="datasetRepoId" className="text-sm font-medium text-gray-300">
+                    Dataset Repository ID *
+                  </Label>
+                  <Input
+                    id="datasetRepoId"
+                    value={datasetRepoId}
+                    onChange={(e) => setDatasetRepoId(e.target.value)}
+                    placeholder="username/dataset_name"
+                    className="bg-gray-800 border-gray-700 text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="singleTask" className="text-sm font-medium text-gray-300">
+                    Task Name *
+                  </Label>
+                  <Input
+                    id="singleTask"
+                    value={singleTask}
+                    onChange={(e) => setSingleTask(e.target.value)}
+                    placeholder="e.g., pick_and_place"
+                    className="bg-gray-800 border-gray-700 text-white"
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="numEpisodes" className="text-sm font-medium text-gray-300">
+                    Number of Episodes
+                  </Label>
+                  <Input
+                    id="numEpisodes"
+                    type="number"
+                    min="1"
+                    max="100"
+                    value={numEpisodes}
+                    onChange={(e) => setNumEpisodes(parseInt(e.target.value))}
+                    className="bg-gray-800 border-gray-700 text-white"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+            <Button
+              onClick={onStart}
+              className="w-full sm:w-auto bg-red-500 hover:bg-red-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-red-500/30 hover:shadow-lg hover:shadow-red-500/40"
+              disabled={isLoadingConfigs}
+            >
+              Start Recording
+            </Button>
+            <Button
+              onClick={() => onOpenChange(false)}
+              variant="outline"
+              className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default RecordingModal;

src/components/landing/RobotModelSelector.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+interface RobotModelSelectorProps {
+  robotModel: string;
+  onValueChange: (model: string) => void;
+}
+const RobotModelSelector: React.FC<RobotModelSelectorProps> = ({
+  robotModel,
+  onValueChange
+}) => {
+  return <>
+      <h2 className="text-2xl font-semibold text-center text-white">
+        Select Robot Model
+      </h2>
+      <RadioGroup value={robotModel} onValueChange={onValueChange} className="space-y-2">
+        <div>
+          <RadioGroupItem value="SO100" id="so100" className="sr-only" />
+          <Label htmlFor="so100" className="flex items-center space-x-4 p-4 rounded-lg bg-gray-800 border border-gray-700 cursor-pointer transition-all">
+            <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center">
+              {robotModel === "SO100" && <span className="w-3 h-3 rounded-full bg-orange-500" />}
+            </span>
+            <span className="text-lg flex-1">SO100/SO101
+          </span>
+          </Label>
+        </div>
+        <div>
+          <RadioGroupItem value="LeKiwi" id="lekiwi" className="sr-only" />
+          <Label htmlFor="lekiwi" className="flex items-center space-x-4 p-4 rounded-lg bg-gray-800 border border-gray-700 cursor-pointer transition-all">
+            <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center">
+              {robotModel === "LeKiwi" && <span className="w-3 h-3 rounded-full bg-orange-500" />}
+            </span>
+            <span className="text-lg flex-1">LeKiwi</span>
+          </Label>
+        </div>
+      </RadioGroup>
+    </>;
+};
+export default RobotModelSelector;

src/components/landing/TeleoperationModal.tsx

@@ -0,0 +1,166 @@
+
+import React from 'react';
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Settings } from "lucide-react";
+
+interface TeleoperationModalProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  leaderPort: string;
+  setLeaderPort: (value: string) => void;
+  followerPort: string;
+  setFollowerPort: (value: string) => void;
+  leaderConfig: string;
+  setLeaderConfig: (value: string) => void;
+  followerConfig: string;
+  setFollowerConfig: (value: string) => void;
+  leaderConfigs: string[];
+  followerConfigs: string[];
+  isLoadingConfigs: boolean;
+  onStart: () => void;
+}
+
+const TeleoperationModal: React.FC<TeleoperationModalProps> = ({
+  open,
+  onOpenChange,
+  leaderPort,
+  setLeaderPort,
+  followerPort,
+  setFollowerPort,
+  leaderConfig,
+  setLeaderConfig,
+  followerConfig,
+  setFollowerConfig,
+  leaderConfigs,
+  followerConfigs,
+  isLoadingConfigs,
+  onStart,
+}) => {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-gray-900 border-gray-800 text-white sm:max-w-[600px] p-8">
+        <DialogHeader>
+          <div className="flex justify-center items-center gap-4 mb-4">
+            <Settings className="w-8 h-8 text-yellow-500" />
+          </div>
+          <DialogTitle className="text-white text-center text-2xl font-bold">
+            Configure Teleoperation
+          </DialogTitle>
+        </DialogHeader>
+        <div className="space-y-6 py-4">
+          <DialogDescription className="text-gray-400 text-base leading-relaxed text-center">
+            Configure the robot arm ports and calibration settings for
+            teleoperation.
+          </DialogDescription>
+
+          <div className="grid grid-cols-1 gap-6">
+            <div className="space-y-2">
+              <Label htmlFor="leaderPort" className="text-sm font-medium text-gray-300">
+                Leader Port
+              </Label>
+              <Input
+                id="leaderPort"
+                value={leaderPort}
+                onChange={(e) => setLeaderPort(e.target.value)}
+                placeholder="/dev/tty.usbmodem5A460816421"
+                className="bg-gray-800 border-gray-700 text-white"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="leaderConfig" className="text-sm font-medium text-gray-300">
+                Leader Calibration Config
+              </Label>
+              <Select value={leaderConfig} onValueChange={setLeaderConfig}>
+                <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                  <SelectValue
+                    placeholder={
+                      isLoadingConfigs ? "Loading configs..." : "Select leader config"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-700">
+                  {leaderConfigs.map((config) => (
+                    <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                      {config}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="followerPort" className="text-sm font-medium text-gray-300">
+                Follower Port
+              </Label>
+              <Input
+                id="followerPort"
+                value={followerPort}
+                onChange={(e) => setFollowerPort(e.target.value)}
+                placeholder="/dev/tty.usbmodem5A460816621"
+                className="bg-gray-800 border-gray-700 text-white"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="followerConfig" className="text-sm font-medium text-gray-300">
+                Follower Calibration Config
+              </Label>
+              <Select value={followerConfig} onValueChange={setFollowerConfig}>
+                <SelectTrigger className="bg-gray-800 border-gray-700 text-white">
+                  <SelectValue
+                    placeholder={
+                      isLoadingConfigs ? "Loading configs..." : "Select follower config"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent className="bg-gray-800 border-gray-700">
+                  {followerConfigs.map((config) => (
+                    <SelectItem key={config} value={config} className="text-white hover:bg-gray-700">
+                      {config}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
+            <Button
+              onClick={onStart}
+              className="w-full sm:w-auto bg-yellow-500 hover:bg-yellow-600 text-white px-10 py-6 text-lg transition-all shadow-md shadow-yellow-500/30 hover:shadow-lg hover:shadow-yellow-500/40"
+              disabled={isLoadingConfigs}
+            >
+              Start Teleoperation
+            </Button>
+            <Button
+              onClick={() => onOpenChange(false)}
+              variant="outline"
+              className="w-full sm:w-auto border-gray-500 hover:border-gray-200 px-10 py-6 text-lg text-zinc-500 bg-zinc-900 hover:bg-zinc-800"
+            >
+              Cancel
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default TeleoperationModal;

src/components/landing/types.ts

@@ -0,0 +1,7 @@
+
+export interface Action {
+  title: string;
+  description: string;
+  handler: () => void;
+  color: string;
+}

src/components/training/ConfigurationTab.tsx

@@ -0,0 +1,28 @@
+
+import React from 'react';
+import DatasetConfig from './config/DatasetConfig';
+import PolicyConfig from './config/PolicyConfig';
+import TrainingParams from './config/TrainingParams';
+import OptimizerConfig from './config/OptimizerConfig';
+import LoggingConfig from './config/LoggingConfig';
+import WandbConfig from './config/WandbConfig';
+import EnvEvalConfig from './config/EnvEvalConfig';
+import AdvancedConfig from './config/AdvancedConfig';
+import { ConfigComponentProps } from './types';
+
+const ConfigurationTab: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
+      <DatasetConfig config={config} updateConfig={updateConfig} />
+      <PolicyConfig config={config} updateConfig={updateConfig} />
+      <TrainingParams config={config} updateConfig={updateConfig} />
+      <OptimizerConfig config={config} updateConfig={updateConfig} />
+      <LoggingConfig config={config} updateConfig={updateConfig} />
+      <WandbConfig config={config} updateConfig={updateConfig} />
+      <EnvEvalConfig config={config} updateConfig={updateConfig} />
+      <AdvancedConfig config={config} updateConfig={updateConfig} />
+    </div>
+  );
+};
+
+export default ConfigurationTab;

src/components/training/MonitoringTab.tsx

@@ -0,0 +1,34 @@
+
+import React from 'react';
+import MonitoringStats from './monitoring/MonitoringStats';
+import TrainingLogs from './monitoring/TrainingLogs';
+import { TrainingStatus, LogEntry } from './types';
+
+interface MonitoringTabProps {
+  trainingStatus: TrainingStatus;
+  logs: LogEntry[];
+  logContainerRef: React.RefObject<HTMLDivElement>;
+  getProgressPercentage: () => number;
+  formatTime: (seconds: number) => string;
+}
+
+const MonitoringTab: React.FC<MonitoringTabProps> = ({ 
+  trainingStatus, 
+  logs, 
+  logContainerRef, 
+  getProgressPercentage, 
+  formatTime 
+}) => {
+  return (
+    <div className="space-y-6">
+      <MonitoringStats 
+        trainingStatus={trainingStatus}
+        getProgressPercentage={getProgressPercentage}
+        formatTime={formatTime}
+      />
+      <TrainingLogs logs={logs} logContainerRef={logContainerRef} />
+    </div>
+  );
+};
+
+export default MonitoringTab;

src/components/training/TrainingControls.tsx

@@ -0,0 +1,60 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Loader2, Play, Square } from 'lucide-react';
+import { TrainingConfig, TrainingStatus } from './types';
+
+interface TrainingControlsProps {
+  trainingStatus: TrainingStatus;
+  isStartingTraining: boolean;
+  trainingConfig: TrainingConfig;
+  handleStartTraining: () => void;
+  handleStopTraining: () => void;
+}
+
+const TrainingControls: React.FC<TrainingControlsProps> = ({
+  trainingStatus,
+  isStartingTraining,
+  trainingConfig,
+  handleStartTraining,
+  handleStopTraining,
+}) => {
+  return (
+    <div className="fixed bottom-6 right-6 flex gap-3">
+      {!trainingStatus.training_active ? (
+        <Button
+          onClick={handleStartTraining}
+          disabled={
+            isStartingTraining || !trainingConfig.dataset_repo_id.trim()
+          }
+          size="lg"
+          className="bg-green-500 hover:bg-green-600 text-white font-semibold px-6 py-3 text-base rounded-full shadow-lg transition-all hover:scale-105"
+        >
+          {isStartingTraining ? (
+            <>
+              <Loader2 className="w-5 h-5 mr-2 animate-spin" />
+              Starting...
+            </>
+          ) : (
+            <>
+              <Play className="w-5 h-5 mr-2" />
+              Start Training
+            </>
+          )}
+        </Button>
+      ) : (
+        <Button
+          onClick={handleStopTraining}
+          disabled={!trainingStatus.available_controls.stop_training}
+          size="lg"
+          className="bg-red-500 hover:bg-red-600 text-white font-semibold px-6 py-3 text-base rounded-full shadow-lg transition-all hover:scale-105"
+        >
+          <Square className="w-5 h-5 mr-2" />
+          Stop Training
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default TrainingControls;

src/components/training/TrainingHeader.tsx

@@ -0,0 +1,59 @@
+
+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';
+import { TrainingStatus } from './types';
+
+interface TrainingHeaderProps {
+  trainingStatus: TrainingStatus;
+}
+
+const TrainingHeader: React.FC<TrainingHeaderProps> = ({ trainingStatus }) => {
+  const navigate = useNavigate();
+
+  const getStatusColor = () => {
+    if (trainingStatus.training_active) return "text-green-400";
+    return "text-gray-400";
+  };
+
+  const getStatusText = () => {
+    if (trainingStatus.training_active) return "Training Active";
+    return "Ready to Train";
+  };
+
+  return (
+    <div className="flex items-center justify-between mb-8">
+      <div className="flex items-center gap-4">
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => navigate("/")}
+          className="text-slate-400 hover:bg-slate-800 hover:text-white rounded-lg"
+        >
+          <ArrowLeft className="w-5 h-5" />
+        </Button>
+        <Logo />
+        <h1 className="text-3xl font-bold text-white">
+          Training Dashboard
+        </h1>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div
+          className={`w-3 h-3 rounded-full ${
+            trainingStatus.training_active
+              ? "bg-green-400 animate-pulse"
+              : "bg-slate-500"
+          }`}
+        ></div>
+        <span className={`font-semibold ${getStatusColor()}`}>
+          {getStatusText()}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default TrainingHeader;

src/components/training/TrainingTabs.tsx

@@ -0,0 +1,44 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Settings, Activity } from 'lucide-react';
+
+type Tab = 'config' | 'monitoring';
+
+interface TrainingTabsProps {
+  activeTab: Tab;
+  setActiveTab: (tab: Tab) => void;
+}
+
+const TrainingTabs: React.FC<TrainingTabsProps> = ({ activeTab, setActiveTab }) => {
+  return (
+    <div className="flex gap-2 mb-6 border-b border-slate-700">
+      <Button
+        variant="ghost"
+        onClick={() => setActiveTab("config")}
+        className={`flex items-center gap-2 rounded-none px-4 py-3 text-sm font-semibold transition-colors ${
+          activeTab === "config"
+            ? "text-white border-b-2 border-white"
+            : "text-slate-400 hover:bg-slate-800 hover:text-white"
+        }`}
+      >
+        <Settings className="w-4 h-4" />
+        Configuration
+      </Button>
+      <Button
+        variant="ghost"
+        onClick={() => setActiveTab("monitoring")}
+        className={`flex items-center gap-2 rounded-none px-4 py-3 text-sm font-semibold transition-colors ${
+          activeTab === "monitoring"
+            ? "text-white border-b-2 border-white"
+            : "text-slate-400 hover:bg-slate-800 hover:text-white"
+        }`}
+      >
+        <Activity className="w-4 h-4" />
+        Monitoring
+      </Button>
+    </div>
+  );
+};
+
+export default TrainingTabs;

src/components/training/config/AdvancedConfig.tsx

@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Settings } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const AdvancedConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <Settings className="w-5 h-5 text-sky-400" />
+          </div>
+          Advanced Options
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="config_path" className="text-slate-300">
+            Config Path (optional)
+          </Label>
+          <Input
+            id="config_path"
+            value={config.config_path || ""}
+            onChange={(e) =>
+              updateConfig("config_path", e.target.value || undefined)
+            }
+            placeholder="path/to/config.yaml"
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+        </div>
+        <div className="flex items-center space-x-3 pt-2">
+          <Switch
+            id="use_policy_training_preset"
+            checked={config.use_policy_training_preset}
+            onCheckedChange={(checked) =>
+              updateConfig("use_policy_training_preset", checked)
+            }
+          />
+          <Label
+            htmlFor="use_policy_training_preset"
+            className="text-slate-300"
+          >
+            Use Policy Training Preset
+          </Label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AdvancedConfig;

src/components/training/config/DatasetConfig.tsx

@@ -0,0 +1,79 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Database } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const DatasetConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <Database className="w-5 h-5 text-sky-400" />
+          </div>
+          Dataset Configuration
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="dataset_repo_id" className="text-slate-300">
+            Dataset Repository ID *
+          </Label>
+          <Input
+            id="dataset_repo_id"
+            value={config.dataset_repo_id}
+            onChange={(e) =>
+              updateConfig("dataset_repo_id", e.target.value)
+            }
+            placeholder="e.g., your-username/your-dataset"
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+          <p className="text-xs text-slate-500 mt-1">
+            HuggingFace Hub dataset repository ID
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="dataset_revision" className="text-slate-300">
+            Dataset Revision (optional)
+          </Label>
+          <Input
+            id="dataset_revision"
+            value={config.dataset_revision || ""}
+            onChange={(e) =>
+              updateConfig(
+                "dataset_revision",
+                e.target.value || undefined
+              )
+            }
+            placeholder="main"
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+          <p className="text-xs text-slate-500 mt-1">
+            Git revision (branch, tag, or commit hash)
+          </p>
+        </div>
+
+        <div>
+          <Label htmlFor="dataset_root" className="text-slate-300">
+            Dataset Root Directory (optional)
+          </Label>
+          <Input
+            id="dataset_root"
+            value={config.dataset_root || ""}
+            onChange={(e) =>
+              updateConfig("dataset_root", e.target.value || undefined)
+            }
+            placeholder="./data"
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default DatasetConfig;

src/components/training/config/EnvEvalConfig.tsx

@@ -0,0 +1,121 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Activity } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const EnvEvalConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <Activity className="w-5 h-5 text-sky-400" />
+          </div>
+          Environment & Evaluation
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="env_type" className="text-slate-300">
+            Environment Type (optional)
+          </Label>
+          <Select
+            value={config.env_type || "none"}
+            onValueChange={(value) =>
+              updateConfig(
+                "env_type",
+                value === "none" ? undefined : value
+              )
+            }
+          >
+            <SelectTrigger className="bg-slate-900 border-slate-600 text-white rounded-lg">
+              <SelectValue placeholder="Select environment type" />
+            </SelectTrigger>
+            <SelectContent className="bg-slate-800 border-slate-600">
+              <SelectItem value="none">None</SelectItem>
+              <SelectItem value="aloha">Aloha</SelectItem>
+              <SelectItem value="pusht">PushT</SelectItem>
+              <SelectItem value="xarm">XArm</SelectItem>
+              <SelectItem value="gym_manipulator">
+                Gym Manipulator
+              </SelectItem>
+              <SelectItem value="hil">HIL</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <Label htmlFor="env_task" className="text-slate-300">
+            Environment Task (optional)
+          </Label>
+          <Input
+            id="env_task"
+            value={config.env_task || ""}
+            onChange={(e) =>
+              updateConfig("env_task", e.target.value || undefined)
+            }
+            placeholder="e.g., insertion_human"
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="eval_n_episodes" className="text-slate-300">
+              Eval Episodes
+            </Label>
+            <Input
+              id="eval_n_episodes"
+              type="number"
+              value={config.eval_n_episodes}
+              onChange={(e) =>
+                updateConfig(
+                  "eval_n_episodes",
+                  parseInt(e.target.value)
+                )
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+          <div>
+            <Label htmlFor="eval_batch_size" className="text-slate-300">
+              Eval Batch Size
+            </Label>
+            <Input
+              id="eval_batch_size"
+              type="number"
+              value={config.eval_batch_size}
+              onChange={(e) =>
+                updateConfig(
+                  "eval_batch_size",
+                  parseInt(e.target.value)
+                )
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+        </div>
+        <div className="flex items-center space-x-3 pt-2">
+          <Switch
+            id="eval_use_async_envs"
+            checked={config.eval_use_async_envs}
+            onCheckedChange={(checked) =>
+              updateConfig("eval_use_async_envs", checked)
+            }
+          />
+          <Label
+            htmlFor="eval_use_async_envs"
+            className="text-slate-300"
+          >
+            Use Asynchronous Environments
+          </Label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default EnvEvalConfig;

src/components/training/config/LoggingConfig.tsx

@@ -0,0 +1,119 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { FileText } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const LoggingConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <FileText className="w-5 h-5 text-sky-400" />
+          </div>
+          Logging & Checkpointing
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <Label htmlFor="log_freq" className="text-slate-300">
+              Log Frequency
+            </Label>
+            <Input
+              id="log_freq"
+              type="number"
+              value={config.log_freq}
+              onChange={(e) =>
+                updateConfig("log_freq", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+          <div>
+            <Label htmlFor="save_freq" className="text-slate-300">
+              Save Frequency
+            </Label>
+            <Input
+              id="save_freq"
+              type="number"
+              value={config.save_freq}
+              onChange={(e) =>
+                updateConfig("save_freq", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+          <div>
+            <Label htmlFor="eval_freq" className="text-slate-300">
+              Eval Frequency
+            </Label>
+            <Input
+              id="eval_freq"
+              type="number"
+              value={config.eval_freq}
+              onChange={(e) =>
+                updateConfig("eval_freq", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+        </div>
+        <div>
+          <Label htmlFor="output_dir" className="text-slate-300">
+            Output Directory
+          </Label>
+          <Input
+            id="output_dir"
+            value={config.output_dir}
+            onChange={(e) => updateConfig("output_dir", e.target.value)}
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+        </div>
+        <div>
+          <Label htmlFor="job_name" className="text-slate-300">
+            Job Name (optional)
+          </Label>
+          <Input
+            id="job_name"
+            value={config.job_name || ""}
+            onChange={(e) =>
+              updateConfig("job_name", e.target.value || undefined)
+            }
+            className="bg-slate-900 border-slate-600 text-white rounded-lg"
+          />
+        </div>
+        <div className="flex items-center space-x-3 pt-2">
+          <Switch
+            id="save_checkpoint"
+            checked={config.save_checkpoint}
+            onCheckedChange={(checked) =>
+              updateConfig("save_checkpoint", checked)
+            }
+          />
+          <Label htmlFor="save_checkpoint" className="text-slate-300">
+            Save Checkpoints
+          </Label>
+        </div>
+        <div className="flex items-center space-x-3">
+          <Switch
+            id="resume"
+            checked={config.resume}
+            onCheckedChange={(checked) =>
+              updateConfig("resume", checked)
+            }
+          />
+          <Label htmlFor="resume" className="text-slate-300">
+            Resume from Checkpoint
+          </Label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default LoggingConfig;

src/components/training/config/OptimizerConfig.tsx

@@ -0,0 +1,118 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Settings } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const OptimizerConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <Settings className="w-5 h-5 text-sky-400" />
+          </div>
+          Optimizer Configuration
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="optimizer_type" className="text-slate-300">
+            Optimizer Type
+          </Label>
+          <Select
+            value={config.optimizer_type || "adam"}
+            onValueChange={(value) =>
+              updateConfig("optimizer_type", value)
+            }
+          >
+            <SelectTrigger className="bg-slate-900 border-slate-600 text-white rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-slate-800 border-slate-600">
+              <SelectItem value="adam">Adam</SelectItem>
+              <SelectItem value="adamw">AdamW</SelectItem>
+              <SelectItem value="sgd">SGD</SelectItem>
+              <SelectItem value="multi_adam">Multi Adam</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <Label htmlFor="optimizer_lr" className="text-slate-300">
+              Learning Rate
+            </Label>
+            <Input
+              id="optimizer_lr"
+              type="number"
+              step="0.0001"
+              value={config.optimizer_lr || ""}
+              onChange={(e) =>
+                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"
+            />
+          </div>
+          <div>
+            <Label
+              htmlFor="optimizer_weight_decay"
+              className="text-slate-300"
+            >
+              Weight Decay
+            </Label>
+            <Input
+              id="optimizer_weight_decay"
+              type="number"
+              step="0.0001"
+              value={config.optimizer_weight_decay || ""}
+              onChange={(e) =>
+                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"
+            />
+          </div>
+          <div>
+            <Label
+              htmlFor="optimizer_grad_clip_norm"
+              className="text-slate-300"
+            >
+              Gradient Clipping
+            </Label>
+            <Input
+              id="optimizer_grad_clip_norm"
+              type="number"
+              value={config.optimizer_grad_clip_norm || ""}
+              onChange={(e) =>
+                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"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default OptimizerConfig;

src/components/training/config/PolicyConfig.tsx

@@ -0,0 +1,85 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Cpu } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const PolicyConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <Cpu className="w-5 h-5 text-sky-400" />
+          </div>
+          Policy Configuration
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <Label htmlFor="policy_type" className="text-slate-300">
+            Policy Type
+          </Label>
+          <Select
+            value={config.policy_type}
+            onValueChange={(value) =>
+              updateConfig("policy_type", value)
+            }
+          >
+            <SelectTrigger className="bg-slate-900 border-slate-600 text-white rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-slate-800 border-slate-600">
+              <SelectItem value="act">ACT (Action Chunking Transformer)</SelectItem>
+              <SelectItem value="diffusion">Diffusion Policy</SelectItem>
+              <SelectItem value="pi0">PI0</SelectItem>
+              <SelectItem value="smolvla">SmolVLA</SelectItem>
+              <SelectItem value="tdmpc">TD-MPC</SelectItem>
+              <SelectItem value="vqbet">VQ-BeT</SelectItem>
+              <SelectItem value="pi0fast">PI0 Fast</SelectItem>
+              <SelectItem value="sac">SAC</SelectItem>
+              <SelectItem value="reward_classifier">Reward Classifier</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div>
+          <Label htmlFor="policy_device" className="text-slate-300">
+            Device
+          </Label>
+          <Select
+            value={config.policy_device || "cuda"}
+            onValueChange={(value) =>
+              updateConfig("policy_device", value)
+            }
+          >
+            <SelectTrigger className="bg-slate-900 border-slate-600 text-white rounded-lg">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className="bg-slate-800 border-slate-600">
+              <SelectItem value="cuda">CUDA (GPU)</SelectItem>
+              <SelectItem value="cpu">CPU</SelectItem>
+              <SelectItem value="mps">MPS (Apple Silicon)</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center space-x-3 pt-2">
+          <Switch
+            id="policy_use_amp"
+            checked={config.policy_use_amp}
+            onCheckedChange={(checked) =>
+              updateConfig("policy_use_amp", checked)
+            }
+          />
+          <Label htmlFor="policy_use_amp" className="text-slate-300">
+            Use Automatic Mixed Precision (AMP)
+          </Label>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default PolicyConfig;

src/components/training/config/TrainingParams.tsx

@@ -0,0 +1,89 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { TrendingUp } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const TrainingParams: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <TrendingUp className="w-5 h-5 text-sky-400" />
+          </div>
+          Training Parameters
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="steps" className="text-slate-300">
+              Training Steps
+            </Label>
+            <Input
+              id="steps"
+              type="number"
+              value={config.steps}
+              onChange={(e) =>
+                updateConfig("steps", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+          <div>
+            <Label htmlFor="batch_size" className="text-slate-300">
+              Batch Size
+            </Label>
+            <Input
+              id="batch_size"
+              type="number"
+              value={config.batch_size}
+              onChange={(e) =>
+                updateConfig("batch_size", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <Label htmlFor="seed" className="text-slate-300">
+              Random Seed
+            </Label>
+            <Input
+              id="seed"
+              type="number"
+              value={config.seed || ""}
+              onChange={(e) =>
+                updateConfig(
+                  "seed",
+                  e.target.value ? parseInt(e.target.value) : undefined
+                )
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+          <div>
+            <Label htmlFor="num_workers" className="text-slate-300">
+              Number of Workers
+            </Label>
+            <Input
+              id="num_workers"
+              type="number"
+              value={config.num_workers}
+              onChange={(e) =>
+                updateConfig("num_workers", parseInt(e.target.value))
+              }
+              className="bg-slate-900 border-slate-600 text-white rounded-lg"
+            />
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TrainingParams;

src/components/training/config/WandbConfig.tsx

@@ -0,0 +1,130 @@
+
+import React from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { TrendingUp } from 'lucide-react';
+import { ConfigComponentProps } from '../types';
+
+const WandbConfig: React.FC<ConfigComponentProps> = ({ config, updateConfig }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <TrendingUp className="w-5 h-5 text-sky-400" />
+          </div>
+          Weights & Biases
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center space-x-3 pt-2">
+          <Switch
+            id="wandb_enable"
+            checked={config.wandb_enable}
+            onCheckedChange={(checked) =>
+              updateConfig("wandb_enable", checked)
+            }
+          />
+          <Label htmlFor="wandb_enable" className="text-slate-300">
+            Enable Weights & Biases Logging
+          </Label>
+        </div>
+        {config.wandb_enable && (
+          <>
+            <div>
+              <Label htmlFor="wandb_project" className="text-slate-300">
+                W&B Project Name
+              </Label>
+              <Input
+                id="wandb_project"
+                value={config.wandb_project || ""}
+                onChange={(e) =>
+                  updateConfig(
+                    "wandb_project",
+                    e.target.value || undefined
+                  )
+                }
+                placeholder="my-robotics-project"
+                className="bg-slate-900 border-slate-600 text-white rounded-lg"
+              />
+            </div>
+            <div>
+              <Label htmlFor="wandb_entity" className="text-slate-300">
+                W&B Entity (optional)
+              </Label>
+              <Input
+                id="wandb_entity"
+                value={config.wandb_entity || ""}
+                onChange={(e) =>
+                  updateConfig(
+                    "wandb_entity",
+                    e.target.value || undefined
+                  )
+                }
+                placeholder="your-username"
+                className="bg-slate-900 border-slate-600 text-white rounded-lg"
+              />
+            </div>
+            <div>
+              <Label htmlFor="wandb_notes" className="text-slate-300">
+                W&B Notes (optional)
+              </Label>
+              <Input
+                id="wandb_notes"
+                value={config.wandb_notes || ""}
+                onChange={(e) =>
+                  updateConfig(
+                    "wandb_notes",
+                    e.target.value || undefined
+                  )
+                }
+                placeholder="Training run notes..."
+                className="bg-slate-900 border-slate-600 text-white rounded-lg"
+              />
+            </div>
+            <div>
+              <Label htmlFor="wandb_mode" className="text-slate-300">
+                W&B Mode
+              </Label>
+              <Select
+                value={config.wandb_mode || "online"}
+                onValueChange={(value) =>
+                  updateConfig("wandb_mode", value)
+                }
+              >
+                <SelectTrigger className="bg-slate-900 border-slate-600 text-white rounded-lg">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent className="bg-slate-800 border-slate-600">
+                  <SelectItem value="online">Online</SelectItem>
+                  <SelectItem value="offline">Offline</SelectItem>
+                  <SelectItem value="disabled">Disabled</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center space-x-3 pt-2">
+              <Switch
+                id="wandb_disable_artifact"
+                checked={config.wandb_disable_artifact}
+                onCheckedChange={(checked) =>
+                  updateConfig("wandb_disable_artifact", checked)
+                }
+              />
+              <Label
+                htmlFor="wandb_disable_artifact"
+                className="text-slate-300"
+              >
+                Disable Artifacts
+              </Label>
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default WandbConfig;

src/components/training/monitoring/MonitoringStats.tsx

@@ -0,0 +1,85 @@
+
+import React from 'react';
+import { Card, CardContent } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
+import { TrainingStatus } from '../types';
+import { TrendingUp, CheckCircle, Activity, Clock } from 'lucide-react';
+
+interface MonitoringStatsProps {
+  trainingStatus: TrainingStatus;
+  getProgressPercentage: () => number;
+  formatTime: (seconds: number) => string;
+}
+
+const MonitoringStats: React.FC<MonitoringStatsProps> = ({ trainingStatus, getProgressPercentage, formatTime }) => {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-500/20 text-blue-400">
+              <TrendingUp className="w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-sm text-slate-400 mb-1">Progress</h3>
+              <div className="text-2xl font-bold text-white">
+                {trainingStatus.current_step} / {trainingStatus.total_steps}
+              </div>
+            </div>
+          </div>
+          <Progress value={getProgressPercentage()} className="mt-4" />
+        </CardContent>
+      </Card>
+
+      <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-500/20 text-green-400">
+              <CheckCircle className="w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-sm text-slate-400 mb-1">Current Loss</h3>
+              <div className="text-2xl font-bold text-white">
+                {trainingStatus.current_loss?.toFixed(4) || "N/A"}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-orange-500/20 text-orange-400">
+              <Activity className="w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-sm text-slate-400 mb-1">Learning Rate</h3>
+              <div className="text-2xl font-bold text-white">
+                {trainingStatus.current_lr?.toExponential(2) || "N/A"}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+        <CardContent className="p-6">
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-500/20 text-purple-400">
+              <Clock className="w-6 h-6" />
+            </div>
+            <div>
+              <h3 className="text-sm text-slate-400 mb-1">ETA</h3>
+              <div className="text-2xl font-bold text-white">
+                {trainingStatus.eta_seconds ? formatTime(trainingStatus.eta_seconds) : "N/A"}
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default MonitoringStats;

src/components/training/monitoring/TrainingLogs.tsx

@@ -0,0 +1,50 @@
+
+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<HTMLDivElement>;
+}
+
+const TrainingLogs: React.FC<TrainingLogsProps> = ({ logs, logContainerRef }) => {
+  return (
+    <Card className="bg-slate-800/50 border-slate-700 rounded-xl">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-3 text-white">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-slate-700">
+            <FileText className="w-5 h-5 text-sky-400" />
+          </div>
+          Training Logs
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div
+          ref={logContainerRef}
+          className="bg-slate-900 rounded-lg p-4 h-96 overflow-y-auto font-mono text-sm border border-slate-700"
+        >
+          {logs.length === 0 ? (
+            <div className="text-slate-500 text-center py-8">
+              No training logs yet. Start training to see output.
+            </div>
+          ) : (
+            logs.map((log, index) => (
+              <div key={index} className="flex items-start mb-1">
+                <span className="text-slate-500 mr-4">
+                  {new Date(log.timestamp * 1000).toLocaleTimeString()}
+                </span>
+                <span className="flex-1 text-slate-300 break-words whitespace-pre-wrap">
+                  {log.message}
+                </span>
+              </div>
+            ))
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TrainingLogs;

src/components/training/types.ts

@@ -0,0 +1,87 @@
+
+export interface TrainingConfig {
+  // Dataset configuration
+  dataset_repo_id: string;
+  dataset_revision?: string;
+  dataset_root?: string;
+  dataset_episodes?: number[];
+
+  // Policy configuration
+  policy_type: string;
+
+  // Core training parameters
+  steps: number;
+  batch_size: number;
+  seed?: number;
+  num_workers: number;
+
+  // Logging and checkpointing
+  log_freq: number;
+  save_freq: number;
+  eval_freq: number;
+  save_checkpoint: boolean;
+
+  // Output configuration
+  output_dir: string;
+  resume: boolean;
+  job_name?: string;
+
+  // Weights & Biases
+  wandb_enable: boolean;
+  wandb_project?: string;
+  wandb_entity?: string;
+  wandb_notes?: string;
+  wandb_run_id?: string;
+  wandb_mode?: string;
+  wandb_disable_artifact: boolean;
+
+  // Environment and evaluation
+  env_type?: string;
+  env_task?: string;
+  eval_n_episodes: number;
+  eval_batch_size: number;
+  eval_use_async_envs: boolean;
+
+  // Policy-specific parameters
+  policy_device?: string;
+  policy_use_amp: boolean;
+
+  // Optimizer parameters
+  optimizer_type?: string;
+  optimizer_lr?: number;
+  optimizer_weight_decay?: number;
+  optimizer_grad_clip_norm?: number;
+
+  // Advanced configuration
+  use_policy_training_preset: boolean;
+  config_path?: string;
+}
+
+export interface TrainingStatus {
+  training_active: boolean;
+  current_step: number;
+  total_steps: number;
+  current_loss?: number;
+  current_lr?: number;
+  grad_norm?: number;
+  epoch_time?: number;
+  eta_seconds?: number;
+  available_controls: {
+    stop_training: boolean;
+    pause_training: boolean;
+    resume_training: boolean;
+  };
+}
+
+export interface LogEntry {
+  timestamp: number;
+  message: string;
+}
+
+export interface ConfigComponentProps {
+  config: TrainingConfig;
+  updateConfig: <T extends keyof TrainingConfig>(
+    key: T,
+    value: TrainingConfig[T]
+  ) => void;
+}

src/contexts/ThemeContext.tsx

@@ -0,0 +1,64 @@
+
+import { createContext, ReactNode, useState, useEffect } from "react";
+
+export type Theme = "dark" | "light" | "system";
+
+export interface ThemeProviderState {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+export const ThemeProviderContext =
+  createContext<ThemeProviderState>(initialState);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "vite-ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (newTheme: Theme) => {
+      localStorage.setItem(storageKey, newTheme);
+      setTheme(newTheme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}

src/pages/EditDataset.tsx

@@ -0,0 +1,15 @@
+
+import React from 'react';
+
+const EditDataset = () => {
+  return (
+    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4">
+      <h1 className="text-5xl font-bold tracking-tight">Edit Dataset</h1>
+      <p className="mt-4 text-xl text-gray-400">
+        This page is under construction.
+      </p>
+    </div>
+  );
+};
+
+export default EditDataset;