updates to frontend

src/App.tsx

@@ -1,3 +1,4 @@
+
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
@@ -11,6 +12,7 @@ import Recording from "./pages/Recording";
 import Calibration from "./pages/Calibration";
 import Training from "./pages/Training";
 import { UrdfProvider } from "./contexts/UrdfContext";
+import EditDataset from "./pages/EditDataset";
 
 const queryClient = new QueryClient();
 
@@ -28,6 +30,7 @@ const App = () => (
             <Route path="/recording" element={<Recording />} />
             <Route path="/calibration" element={<Calibration />} />
             <Route path="/training" element={<Training />} />
+            <Route path="/edit-dataset" element={<EditDataset />} />
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />
           </Routes>

src/components/Logo.tsx

@@ -6,19 +6,14 @@ 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>
-  );
+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="LeLab Logo" className="h-8 w-8" />
+      {!iconOnly && <span className="font-bold text-white text-2xl">LeLab</span>}
+    </div>;
 };
 
 export default Logo;

src/components/control/RobotArm.tsx

@@ -1,39 +1,46 @@
 
 import React from 'react';
+import { Canvas } from '@react-three/fiber';
+import { OrbitControls } from '@react-three/drei';
 
 const RobotArm = () => {
   return (
-    <group>
-      {/* Base */}
-      <mesh position={[0, -0.25, 0]}>
-        <cylinderGeometry args={[1, 1, 0.5]} />
-        <meshPhongMaterial color="#333333" />
-      </mesh>
-      
-      {/* First joint */}
-      <mesh position={[0, 0.5, 0]}>
-        <boxGeometry args={[0.3, 1.5, 0.3]} />
-        <meshPhongMaterial color="#ff6b35" />
-      </mesh>
-      
-      {/* Second segment */}
-      <mesh position={[0.9, 1.2, 0]} rotation={[0, 0, 0.3]}>
-        <boxGeometry args={[1.8, 0.25, 0.25]} />
-        <meshPhongMaterial color="#ffdd44" />
-      </mesh>
-      
-      {/* Third segment */}
-      <mesh position={[1.8, 1.7, 0]} rotation={[0, 0, -0.5]}>
-        <boxGeometry args={[1.2, 0.2, 0.2]} />
-        <meshPhongMaterial color="#ff6b35" />
-      </mesh>
-      
-      {/* End effector */}
-      <mesh position={[2.3, 1.3, 0]}>
-        <boxGeometry args={[0.3, 0.3, 0.15]} />
-        <meshPhongMaterial color="#ffdd44" />
-      </mesh>
-    </group>
+    <Canvas>
+      <ambientLight intensity={0.5} />
+      <directionalLight position={[10, 10, 5]} intensity={1} />
+      <group>
+        {/* Base */}
+        <mesh position={[0, -0.25, 0]}>
+          <cylinderGeometry args={[1, 1, 0.5]} />
+          <meshPhongMaterial color="#333333" />
+        </mesh>
+        
+        {/* First joint */}
+        <mesh position={[0, 0.5, 0]}>
+          <boxGeometry args={[0.3, 1.5, 0.3]} />
+          <meshPhongMaterial color="#ff6b35" />
+        </mesh>
+        
+        {/* Second segment */}
+        <mesh position={[0.9, 1.2, 0]} rotation={[0, 0, 0.3]}>
+          <boxGeometry args={[1.8, 0.25, 0.25]} />
+          <meshPhongMaterial color="#ffdd44" />
+        </mesh>
+        
+        {/* Third segment */}
+        <mesh position={[1.8, 1.7, 0]} rotation={[0, 0, -0.5]}>
+          <boxGeometry args={[1.2, 0.2, 0.2]} />
+          <meshPhongMaterial color="#ff6b35" />
+        </mesh>
+        
+        {/* End effector */}
+        <mesh position={[2.3, 1.3, 0]}>
+          <boxGeometry args={[0.3, 0.3, 0.15]} />
+          <meshPhongMaterial color="#ffdd44" />
+        </mesh>
+      </group>
+      <OrbitControls />
+    </Canvas>
   );
 };
 

src/components/control/VisualizerPanel.tsx

@@ -1,9 +1,11 @@
+
 import React from "react";
 import { Button } from "@/components/ui/button";
-import { ArrowLeft } from "lucide-react";
+import { ArrowLeft, VideoOff } from "lucide-react";
 import { cn } from "@/lib/utils";
 import UrdfViewer from "../UrdfViewer";
 import UrdfProcessorInitializer from "../UrdfProcessorInitializer";
+import Logo from "@/components/Logo";
 
 interface VisualizerPanelProps {
   onGoBack: () => void;
@@ -17,48 +19,40 @@ const VisualizerPanel: React.FC<VisualizerPanelProps> = ({
   return (
     <div
       className={cn(
-        "w-full lg:w-1/2 p-2 sm:p-4 space-y-4 flex flex-col",
+        "w-full p-2 sm:p-4 space-y-4 lg:space-y-0 lg:space-x-4 flex flex-col lg:flex-row",
         className
       )}
     >
       <div className="bg-gray-900 rounded-lg p-4 flex-1 flex flex-col">
-        <div className="flex items-center justify-between mb-4">
-          <div className="flex items-center gap-3">
-            <img
-              src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png"
-              alt="LiveLab Logo"
-              className="h-8 w-8"
-            />
-            <h2 className="text-xl font-bold text-white">LiveLab</h2>
-          </div>
+        <div className="flex items-center gap-4 mb-4">
           <Button
             variant="ghost"
             size="icon"
             onClick={onGoBack}
-            className="text-gray-400 hover:text-white hover:bg-gray-800"
+            className="text-gray-400 hover:text-white hover:bg-gray-800 flex-shrink-0"
           >
             <ArrowLeft className="h-5 w-5" />
           </Button>
+          <Logo iconOnly={true} />
+          <div className="w-px h-6 bg-gray-700" />
+          <h2 className="text-xl font-medium text-gray-200">Teleoperation</h2>
         </div>
         <div className="flex-1 bg-black rounded border border-gray-800 min-h-[50vh] lg:min-h-0">
-          {/* <Canvas camera={{ position: [5, 3, 5], fov: 50 }}>
-            <ambientLight intensity={0.4} />
-            <directionalLight position={[10, 10, 5]} intensity={1} />
-            <RobotArm />
-            <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
-          </Canvas> */}
           <UrdfProcessorInitializer />
           <UrdfViewer />
         </div>
       </div>
 
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-2">
+      <div className="grid grid-cols-2 lg:grid-cols-2 gap-2 lg:w-96 flex-shrink-0">
         {[1, 2, 3, 4].map((cam) => (
           <div
             key={cam}
-            className="aspect-video bg-gray-900 rounded border border-gray-700 flex items-center justify-center"
+            className="aspect-video bg-gray-900 rounded-lg border border-gray-800 flex flex-col items-center justify-center p-2"
           >
-            <span className="text-gray-400 text-sm">Camera {cam}</span>
+            <VideoOff className="h-8 w-8 text-gray-600 mb-2" />
+            <span className="text-gray-500 text-xs text-center">
+              No Camera Available
+            </span>
           </div>
         ))}
       </div>

src/components/landing/LandingHeader.tsx

@@ -2,7 +2,7 @@ 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>
+      <h1 className="text-5xl font-bold tracking-tight">LeLab</h1>
       <p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
     </div>;
 };

src/components/training/TrainingHeader.tsx

@@ -1,59 +1,41 @@
-
 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 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"
-        >
+  return <div className="flex items-center justify-between mb-8">
+      <div className="flex items-center gap-4 text-3xl">
+        <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">
+        <h1 className="font-bold text-white text-2xl">
           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>
+        <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>
-  );
+    </div>;
 };
-
-export default TrainingHeader;
+export default TrainingHeader;

src/pages/Calibration.tsx

@@ -17,7 +17,6 @@ import { Separator } from "@/components/ui/separator";
 import {
   ArrowLeft,
   Settings,
-  Wrench,
   Activity,
   CheckCircle,
   XCircle,
@@ -30,6 +29,7 @@ import {
   List,
 } from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
+import Logo from "@/components/Logo";
 
 interface CalibrationStatus {
   calibration_active: boolean;
@@ -361,7 +361,7 @@ const Calibration = () => {
     switch (calibrationStatus.status) {
       case "idle":
         return {
-          color: "bg-gray-500",
+          color: "bg-slate-500",
           icon: <Settings className="w-4 h-4" />,
           text: "Idle",
         };
@@ -397,7 +397,7 @@ const Calibration = () => {
         };
       default:
         return {
-          color: "bg-gray-500",
+          color: "bg-slate-500",
           icon: <Settings className="w-4 h-4" />,
           text: "Unknown",
         };
@@ -414,32 +414,31 @@ const Calibration = () => {
   }, [calibrationStatus.console_output]);
 
   return (
-    <div className="min-h-screen bg-gray-900 text-white p-4">
+    <div className="min-h-screen bg-slate-900 text-white p-4">
       <div className="max-w-4xl mx-auto">
         {/* Header */}
         <div className="flex items-center gap-4 mb-6">
           <Button
-            variant="outline"
-            size="sm"
-            onClick={() => navigate("/")}
-            className="border-gray-700 hover:bg-gray-800"
+            variant="ghost"
+            size="icon"
+            onClick={() => navigate(-1)}
+            className="text-slate-400 hover:text-white hover:bg-slate-800"
           >
-            <ArrowLeft className="w-4 h-4 mr-2" />
-            Back to Home
+            <ArrowLeft className="w-5 h-5" />
           </Button>
           <div className="flex items-center gap-3">
-            <Wrench className="w-8 h-8 text-orange-500" />
+            <Logo iconOnly />
             <h1 className="text-3xl font-bold">Device Calibration</h1>
           </div>
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* Configuration Panel */}
-          <Card className="bg-gray-800 border-gray-700">
+          <Card className="bg-slate-800/60 border-slate-700 backdrop-blur-sm">
             <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Settings className="w-5 h-5" />
-                Calibration Configuration
+              <CardTitle className="flex items-center gap-2 text-slate-200">
+                <Settings className="w-5 h-5 text-blue-400" />
+                Configuration
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-6">
@@ -447,24 +446,24 @@ const Calibration = () => {
               <div className="space-y-2">
                 <Label
                   htmlFor="deviceType"
-                  className="text-sm font-medium text-gray-300"
+                  className="text-sm font-medium text-slate-300"
                 >
                   Device Type *
                 </Label>
                 <Select value={deviceType} onValueChange={setDeviceType}>
-                  <SelectTrigger className="bg-gray-700 border-gray-600 text-white">
+                  <SelectTrigger className="bg-slate-700 border-slate-600 text-white rounded-md">
                     <SelectValue placeholder="Select device type" />
                   </SelectTrigger>
-                  <SelectContent className="bg-gray-800 border-gray-700">
+                  <SelectContent className="bg-slate-800 border-slate-700 text-white">
                     <SelectItem
                       value="robot"
-                      className="text-white hover:bg-gray-700"
+                      className="hover:bg-slate-700"
                     >
                       Robot (Follower)
                     </SelectItem>
                     <SelectItem
                       value="teleop"
-                      className="text-white hover:bg-gray-700"
+                      className="hover:bg-slate-700"
                     >
                       Teleoperator (Leader)
                     </SelectItem>
@@ -476,7 +475,7 @@ const Calibration = () => {
               <div className="space-y-2">
                 <Label
                   htmlFor="port"
-                  className="text-sm font-medium text-gray-300"
+                  className="text-sm font-medium text-slate-300"
                 >
                   Port *
                 </Label>
@@ -484,8 +483,8 @@ const Calibration = () => {
                   id="port"
                   value={port}
                   onChange={(e) => setPort(e.target.value)}
-                  placeholder="/dev/tty.usbmodem5A460816421"
-                  className="bg-gray-700 border-gray-600 text-white"
+                  placeholder="/dev/tty.usbmodem..."
+                  className="bg-slate-700 border-slate-600 text-white rounded-md"
                 />
               </div>
 
@@ -493,7 +492,7 @@ const Calibration = () => {
               <div className="space-y-2">
                 <Label
                   htmlFor="configFile"
-                  className="text-sm font-medium text-gray-300"
+                  className="text-sm font-medium text-slate-300"
                 >
                   Calibration Config *
                 </Label>
@@ -501,8 +500,8 @@ const Calibration = () => {
                   id="configFile"
                   value={configFile}
                   onChange={(e) => setConfigFile(e.target.value)}
-                  placeholder="config_name (without .json extension)"
-                  className="bg-gray-700 border-gray-600 text-white"
+                  placeholder="config_name (e.g., my_robot_v1)"
+                  className="bg-slate-700 border-slate-600 text-white rounded-md"
                 />
               </div>
 
@@ -510,18 +509,18 @@ const Calibration = () => {
               {deviceType && (
                 <div className="space-y-3">
                   <div className="flex items-center gap-2">
-                    <List className="w-4 h-4 text-gray-400" />
-                    <Label className="text-sm font-medium text-gray-300">
+                    <List className="w-4 h-4 text-slate-400" />
+                    <Label className="text-sm font-medium text-slate-300">
                       Available Configurations
                     </Label>
                     {isLoadingConfigs && (
-                      <Loader2 className="w-4 h-4 animate-spin text-gray-400" />
+                      <Loader2 className="w-4 h-4 animate-spin text-slate-400" />
                     )}
                   </div>
 
-                  <div className="max-h-40 overflow-y-auto bg-gray-700 rounded-lg border border-gray-600">
+                  <div className="max-h-40 overflow-y-auto bg-slate-900/50 rounded-lg border border-slate-700">
                     {availableConfigs.length === 0 ? (
-                      <div className="p-3 text-center text-gray-400 text-sm">
+                      <div className="p-3 text-center text-slate-400 text-sm">
                         {isLoadingConfigs
                           ? "Loading..."
                           : "No configurations found"}
@@ -531,7 +530,7 @@ const Calibration = () => {
                         {availableConfigs.map((config) => (
                           <div
                             key={config.name}
-                            className="flex items-center justify-between bg-gray-600 rounded px-3 py-2 hover:bg-gray-500 transition-colors"
+                            className="flex items-center justify-between bg-slate-700/50 rounded-md px-3 py-2 hover:bg-slate-700 transition-colors"
                           >
                             <div className="flex-1 min-w-0">
                               <button
@@ -541,7 +540,7 @@ const Calibration = () => {
                               >
                                 {config.name}
                               </button>
-                              <div className="text-xs text-gray-400">
+                              <div className="text-xs text-slate-400">
                                 {new Date(
                                   config.modified * 1000
                                 ).toLocaleDateString()}
@@ -554,7 +553,7 @@ const Calibration = () => {
                                 e.stopPropagation();
                                 handleDeleteConfig(config.name);
                               }}
-                              className="ml-3 p-1 text-red-400 hover:text-red-300 hover:bg-red-900/20 rounded transition-colors"
+                              className="ml-3 p-1 text-red-500/80 hover:text-red-500 hover:bg-red-500/10 rounded-full transition-colors"
                               title={`Delete ${config.name}`}
                             >
                               <Trash2 className="w-4 h-4" />
@@ -567,14 +566,14 @@ const Calibration = () => {
                 </div>
               )}
 
-              <Separator className="bg-gray-700" />
+              <Separator className="bg-slate-700" />
 
               {/* Action Buttons */}
               <div className="flex flex-col gap-3">
                 {!calibrationStatus.calibration_active ? (
                   <Button
                     onClick={handleStartCalibration}
-                    className="w-full bg-orange-500 hover:bg-orange-600 text-white py-6 text-lg"
+                    className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-full py-6 text-lg"
                     disabled={
                       isLoadingConfigs || !deviceType || !port || !configFile
                     }
@@ -586,7 +585,7 @@ const Calibration = () => {
                   <Button
                     onClick={handleStopCalibration}
                     variant="destructive"
-                    className="w-full py-6 text-lg"
+                    className="w-full rounded-full py-6 text-lg"
                   >
                     <Square className="w-5 h-5 mr-2" />
                     Stop Calibration
@@ -596,7 +595,7 @@ const Calibration = () => {
                 <Button
                   onClick={handleReset}
                   variant="outline"
-                  className="w-full border-gray-600 hover:bg-gray-700 py-6 text-lg"
+                  className="w-full border-slate-600 hover:bg-slate-700 rounded-full py-6 text-lg"
                   disabled={calibrationStatus.calibration_active}
                 >
                   <RefreshCw className="w-5 h-5 mr-2" />
@@ -607,44 +606,46 @@ const Calibration = () => {
           </Card>
 
           {/* Status Panel */}
-          <Card className="bg-gray-800 border-gray-700">
+          <Card className="bg-slate-800/60 border-slate-700 backdrop-blur-sm">
             <CardHeader>
-              <CardTitle className="flex items-center gap-2">
-                <Activity className="w-5 h-5" />
-                Calibration Status
+              <CardTitle className="flex items-center gap-2 text-slate-200">
+                <Activity className="w-5 h-5 text-teal-400" />
+                Status
               </CardTitle>
             </CardHeader>
             <CardContent className="space-y-4">
               {/* Current Status */}
-              <div className="flex items-center justify-between">
-                <span className="text-gray-300">Status:</span>
-                <Badge className={`${statusDisplay.color} text-white`}>
+              <div className="flex items-center justify-between p-3 bg-slate-900/50 rounded-md">
+                <span className="text-slate-300">Status:</span>
+                <Badge
+                  className={`${statusDisplay.color} text-white rounded-md`}
+                >
                   {statusDisplay.icon}
                   <span className="ml-2">{statusDisplay.text}</span>
                 </Badge>
               </div>
 
               {calibrationStatus.device_type && (
-                <div className="flex items-center justify-between">
-                  <span className="text-gray-300">Device:</span>
+                <div className="flex items-center justify-between p-3 bg-slate-900/50 rounded-md">
+                  <span className="text-slate-300">Device:</span>
                   <span className="text-white capitalize">
                     {calibrationStatus.device_type}
                   </span>
                 </div>
               )}
 
-              {/* Calibration Console - Show during calibration */}
+              {/* Calibration Console */}
               {calibrationStatus.calibration_active && (
                 <div className="space-y-3">
                   <div className="flex items-center gap-2">
-                    <Settings className="w-4 h-4 text-gray-400" />
-                    <span className="text-sm font-medium text-gray-300">
+                    <Settings className="w-4 h-4 text-slate-400" />
+                    <span className="text-sm font-medium text-slate-300">
                       Calibration Console
                     </span>
                   </div>
 
                   {/* Console Output */}
-                  <div className="bg-black rounded-lg p-4 font-mono text-sm">
+                  <div className="bg-black rounded-lg p-4 font-mono text-sm border border-slate-700">
                     <div
                       ref={consoleRef}
                       className="text-green-400 h-80 overflow-y-auto whitespace-pre-wrap"
@@ -658,13 +659,13 @@ const Calibration = () => {
                     <Button
                       onClick={handleSendEnter}
                       disabled={!calibrationStatus.calibration_active}
-                      className="bg-blue-500 hover:bg-blue-600 px-8 py-2"
+                      className="bg-blue-600 hover:bg-blue-700 px-8 py-2 rounded-full"
                     >
                       Press Enter
                     </Button>
                   </div>
 
-                  <div className="text-xs text-gray-400 text-center">
+                  <div className="text-xs text-slate-400 text-center">
                     Click the button above to send Enter to the calibration
                     process
                   </div>
@@ -673,38 +674,35 @@ const Calibration = () => {
 
               {/* Status Messages */}
               {calibrationStatus.status === "connecting" && (
-                <Alert className="bg-yellow-900/50 border-yellow-700">
+                <Alert className="bg-yellow-900/50 border-yellow-700 text-yellow-200">
                   <AlertCircle className="h-4 w-4" />
                   <AlertDescription>
-                    Connecting to the device. Please ensure the device is
-                    properly connected.
+                    Connecting to the device. Please ensure it's connected.
                   </AlertDescription>
                 </Alert>
               )}
 
               {calibrationStatus.status === "calibrating" && (
-                <Alert className="bg-blue-900/50 border-blue-700">
+                <Alert className="bg-blue-900/50 border-blue-700 text-blue-200">
                   <Activity className="h-4 w-4" />
                   <AlertDescription>
-                    Calibration in progress. Please follow the instructions on
-                    the device and do not disconnect.
+                    Calibration in progress. Follow device instructions.
                   </AlertDescription>
                 </Alert>
               )}
 
               {calibrationStatus.status === "completed" && (
-                <Alert className="bg-green-900/50 border-green-700">
+                <Alert className="bg-green-900/50 border-green-700 text-green-200">
                   <CheckCircle className="h-4 w-4" />
                   <AlertDescription>
-                    Calibration completed successfully! The device is now ready
-                    for use.
+                    Calibration completed successfully!
                   </AlertDescription>
                 </Alert>
               )}
 
               {calibrationStatus.status === "error" &&
                 calibrationStatus.error && (
-                  <Alert className="bg-red-900/50 border-red-700">
+                  <Alert className="bg-red-900/50 border-red-700 text-red-200">
                     <XCircle className="h-4 w-4" />
                     <AlertDescription>
                       <strong>Error:</strong> {calibrationStatus.error}
@@ -713,19 +711,17 @@ const Calibration = () => {
                 )}
 
               {/* Instructions */}
-              <div className="bg-gray-700 p-4 rounded-lg">
-                <h4 className="font-semibold mb-2">
-                  Calibration Instructions:
+              <div className="bg-slate-900/50 p-4 rounded-lg border border-slate-700">
+                <h4 className="font-semibold mb-2 text-slate-200">
+                  Instructions:
                 </h4>
-                <ol className="text-sm text-gray-300 space-y-1">
-                  <li>1. Select the device type you want to calibrate</li>
-                  <li>2. Enter the correct port for your device</li>
-                  <li>3. Choose the appropriate calibration configuration</li>
-                  <li>4. Move the robot in a middle position</li>
-                  <li>
-                    5. Click "Start Calibration" and follow device prompts
-                  </li>
-                  <li>6. Move each motor all the way on both sides</li>
+                <ol className="text-sm text-slate-300 space-y-1 list-decimal list-inside">
+                  <li>Select device type.</li>
+                  <li>Enter the correct port.</li>
+                  <li>Provide a name for the new calibration config.</li>
+                  <li>Move the robot to a middle position.</li>
+                  <li>Click "Start Calibration" & follow device prompts.</li>
+                  <li>Move each motor to its limits on both sides.</li>
                 </ol>
               </div>
             </CardContent>

src/pages/Landing.tsx

@@ -1,25 +1,15 @@
-import React, { useState, useEffect } from "react";
+
+import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-} from "@/components/ui/dialog";
 import { useToast } from "@/hooks/use-toast";
-import { Camera, Mic, Settings, Wrench, GraduationCap } from "lucide-react";
+import { ArrowRight } from "lucide-react";
+import LandingHeader from "@/components/landing/LandingHeader";
+import RobotModelSelector from "@/components/landing/RobotModelSelector";
+import ActionList from "@/components/landing/ActionList";
+import PermissionModal from "@/components/landing/PermissionModal";
+import TeleoperationModal from "@/components/landing/TeleoperationModal";
+import RecordingModal from "@/components/landing/RecordingModal";
+import { Action } from "@/components/landing/types";
 
 const Landing = () => {
   const [robotModel, setRobotModel] = useState("");
@@ -90,9 +80,9 @@ const Landing = () => {
     }
   };
 
-  const handleCalibrationClick = () => {
+  const handleEditDatasetClick = () => {
     if (robotModel) {
-      navigate("/calibration");
+      navigate("/edit-dataset");
     }
   };
 
@@ -102,6 +92,12 @@ const Landing = () => {
     }
   };
 
+  const handleReplayDatasetClick = () => {
+    if (robotModel) {
+      navigate("/edit-dataset");
+    }
+  };
+
   const handleStartTeleoperation = async () => {
     if (!leaderConfig || !followerConfig) {
       toast({
@@ -169,7 +165,6 @@ const Landing = () => {
       return;
     }
 
-    // Navigate to recording page with configuration
     const recordingConfig = {
       leader_port: recordLeaderPort,
       follower_port: recordFollowerPort,
@@ -178,8 +173,8 @@ const Landing = () => {
       dataset_repo_id: datasetRepoId,
       single_task: singleTask,
       num_episodes: numEpisodes,
-      episode_time_s: 60, // Default 60 seconds - use manual controls to end episodes early
-      reset_time_s: 15, // Default 15 seconds - use manual controls for faster resets
+      episode_time_s: 60,
+      reset_time_s: 15,
       fps: 30,
       video: true,
       push_to_hub: false,
@@ -223,477 +218,102 @@ const Landing = () => {
     }
   };
 
+  const actions: Action[] = [
+    {
+      title: "Begin Session",
+      description: "Start a new control session.",
+      handler: handleBeginSession,
+      color: "bg-orange-500 hover:bg-orange-600",
+    },
+    {
+      title: "Teleoperation",
+      description: "Control the robot arm in real-time.",
+      handler: handleTeleoperationClick,
+      color: "bg-yellow-500 hover:bg-yellow-600",
+    },
+    {
+      title: "Record Dataset",
+      description: "Record episodes for training data.",
+      handler: handleRecordingClick,
+      color: "bg-red-500 hover:bg-red-600",
+    },
+    {
+      title: "Edit Dataset",
+      description: "Review and modify recorded datasets.",
+      handler: handleEditDatasetClick,
+      color: "bg-blue-500 hover:bg-blue-600",
+    },
+    {
+      title: "Training",
+      description: "Train a model on your datasets.",
+      handler: handleTrainingClick,
+      color: "bg-green-500 hover:bg-green-600",
+    },
+    {
+      title: "Replay Dataset",
+      description: "Replay and analyze recorded datasets.",
+      handler: handleReplayDatasetClick,
+      color: "bg-purple-500 hover:bg-purple-600",
+    },
+  ];
+
   return (
-    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4">
-      <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">
-          Control a robotic arm through telepresence. Your browser becomes both
-          sensor and controller.
-        </p>
-      </div>
+    <div className="min-h-screen bg-black text-white flex flex-col items-center p-4 pt-12 sm:pt-20">
+      <LandingHeader />
 
       <div className="mt-12 p-8 bg-gray-900 rounded-lg shadow-xl w-full max-w-lg space-y-6 border border-gray-700">
-        <h2 className="text-2xl font-semibold text-center text-white">
-          Select Robot Model
-        </h2>
-        <RadioGroup
-          value={robotModel}
+        <RobotModelSelector
+          robotModel={robotModel}
           onValueChange={setRobotModel}
-          className="space-y-4"
-        >
-          <div>
-            <RadioGroupItem value="SO100" id="so100" className="sr-only" />
-            <Label
-              htmlFor="so100"
-              className="flex items-center space-x-4 p-4 rounded-md bg-gray-800 border border-gray-700 cursor-pointer transition-all has-[:checked]:border-orange-500 has-[:checked]:bg-gray-800/50"
-            >
-              <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center group-has-[:checked]:border-orange-500">
-                {robotModel === "SO100" && (
-                  <span className="w-3 h-3 rounded-full bg-orange-500" />
-                )}
-              </span>
-              <span className="text-lg flex-1">SO100</span>
-            </Label>
-          </div>
-          <div>
-            <RadioGroupItem value="SO101" id="so101" className="sr-only" />
-            <Label
-              htmlFor="so101"
-              className="flex items-center space-x-4 p-4 rounded-md bg-gray-800 border border-gray-700 cursor-pointer transition-all has-[:checked]:border-orange-500 has-[:checked]:bg-gray-800/50"
-            >
-              <span className="w-6 h-6 rounded-full border-2 border-gray-500 flex items-center justify-center group-has-[:checked]:border-orange-500">
-                {robotModel === "SO101" && (
-                  <span className="w-3 h-3 rounded-full bg-orange-500" />
-                )}
-              </span>
-              <span className="text-lg flex-1">SO101</span>
-            </Label>
-          </div>
-        </RadioGroup>
-        <div className="flex flex-col sm:flex-row gap-4">
-          <Button
-            onClick={handleBeginSession}
-            disabled={!robotModel}
-            className="flex-1 bg-orange-500 hover:bg-orange-600 text-white text-lg py-6 disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
-          >
-            Begin Session
-          </Button>
-          <Button
-            onClick={handleCalibrationClick}
-            disabled={!robotModel}
-            className="flex-1 bg-blue-500 hover:bg-blue-600 text-white text-lg py-6 disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
-          >
-            <Wrench className="w-5 h-5 mr-2" />
-            Calibration
-          </Button>
-          <Button
-            onClick={handleTeleoperationClick}
-            disabled={!robotModel}
-            className="flex-1 bg-yellow-500 hover:bg-yellow-600 text-white text-lg py-6 disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
-          >
-            Teleoperation
-          </Button>
-          <Button
-            onClick={handleRecordingClick}
-            disabled={!robotModel}
-            className="flex-1 bg-red-500 hover:bg-red-600 text-white text-lg py-6 disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
-          >
-            Recording
-          </Button>
-          <Button
-            onClick={handleTrainingClick}
-            disabled={!robotModel}
-            className="flex-1 bg-purple-500 hover:bg-purple-600 text-white text-lg py-6 disabled:bg-gray-700 disabled:text-gray-400 disabled:cursor-not-allowed"
-          >
-            <GraduationCap className="w-5 h-5 mr-2" />
-            Training
-          </Button>
-        </div>
+        />
+        <ActionList actions={actions} robotModel={robotModel} />
       </div>
 
-      {/* Permission Modal */}
-      <Dialog open={showPermissionModal} onOpenChange={setShowPermissionModal}>
-        <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={() => handlePermissions(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={() => handlePermissions(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>
+      <PermissionModal
+        open={showPermissionModal}
+        onOpenChange={setShowPermissionModal}
+        onPermissionsResult={handlePermissions}
+      />
 
-      {/* Teleoperation Configuration Modal */}
-      <Dialog
+      <TeleoperationModal
         open={showTeleoperationModal}
         onOpenChange={setShowTeleoperationModal}
-      >
-        <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={handleStartTeleoperation}
-                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={() => setShowTeleoperationModal(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>
-
-      {/* Recording Configuration Modal */}
-      <Dialog open={showRecordingModal} onOpenChange={setShowRecordingModal}>
-        <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">
-              {/* Robot Configuration */}
-              <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={recordLeaderPort}
-                      onChange={(e) => setRecordLeaderPort(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={recordLeaderConfig}
-                      onValueChange={setRecordLeaderConfig}
-                    >
-                      <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={recordFollowerPort}
-                      onChange={(e) => setRecordFollowerPort(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={recordFollowerConfig}
-                      onValueChange={setRecordFollowerConfig}
-                    >
-                      <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>
-
-              {/* Dataset Configuration */}
-              <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>
+        leaderPort={leaderPort}
+        setLeaderPort={setLeaderPort}
+        followerPort={followerPort}
+        setFollowerPort={setFollowerPort}
+        leaderConfig={leaderConfig}
+        setLeaderConfig={setLeaderConfig}
+        followerConfig={followerConfig}
+        setFollowerConfig={setFollowerConfig}
+        leaderConfigs={leaderConfigs}
+        followerConfigs={followerConfigs}
+        isLoadingConfigs={isLoadingConfigs}
+        onStart={handleStartTeleoperation}
+      />
 
-            <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
-              <Button
-                onClick={handleStartRecording}
-                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={() => setShowRecordingModal(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>
+      <RecordingModal
+        open={showRecordingModal}
+        onOpenChange={setShowRecordingModal}
+        leaderPort={recordLeaderPort}
+        setLeaderPort={setRecordLeaderPort}
+        followerPort={recordFollowerPort}
+        setFollowerPort={setRecordFollowerPort}
+        leaderConfig={recordLeaderConfig}
+        setLeaderConfig={setRecordLeaderConfig}
+        followerConfig={recordFollowerConfig}
+        setFollowerConfig={setRecordFollowerConfig}
+        leaderConfigs={leaderConfigs}
+        followerConfigs={followerConfigs}
+        datasetRepoId={datasetRepoId}
+        setDatasetRepoId={setDatasetRepoId}
+        singleTask={singleTask}
+        setSingleTask={setSingleTask}
+        numEpisodes={numEpisodes}
+        setNumEpisodes={setNumEpisodes}
+        isLoadingConfigs={isLoadingConfigs}
+        onStart={handleStartRecording}
+      />
     </div>
   );
 };

src/pages/Training.tsx

@@ -1,117 +1,14 @@
+
 import React, { useState, useEffect, useRef } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Switch } from "@/components/ui/switch";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Progress } from "@/components/ui/progress";
 import { useToast } from "@/components/ui/use-toast";
-import {
-  Play,
-  Square,
-  ArrowLeft,
-  Settings,
-  Activity,
-  FileText,
-  Cpu,
-  Database,
-  TrendingUp,
-  Clock,
-  AlertCircle,
-  CheckCircle,
-  Loader2,
-} from "lucide-react";
-
-interface TrainingConfig {
-  // Dataset configuration - exact matches from CLI
-  dataset_repo_id: string; // --dataset.repo_id
-  dataset_revision?: string; // --dataset.revision
-  dataset_root?: string; // --dataset.root
-  dataset_episodes?: number[]; // --dataset.episodes
-
-  // Policy configuration - only type is configurable at top level
-  policy_type: string; // --policy.type (act, diffusion, pi0, smolvla, tdmpc, vqbet, pi0fast, sac, reward_classifier)
-
-  // Core training parameters - exact matches from CLI
-  steps: number; // --steps
-  batch_size: number; // --batch_size
-  seed?: number; // --seed
-  num_workers: number; // --num_workers
-
-  // Logging and checkpointing - exact matches from CLI
-  log_freq: number; // --log_freq
-  save_freq: number; // --save_freq
-  eval_freq: number; // --eval_freq
-  save_checkpoint: boolean; // --save_checkpoint
-
-  // Output configuration - exact matches from CLI
-  output_dir: string; // --output_dir
-  resume: boolean; // --resume
-  job_name?: string; // --job_name
-
-  // Weights & Biases - exact matches from CLI
-  wandb_enable: boolean; // --wandb.enable
-  wandb_project?: string; // --wandb.project
-  wandb_entity?: string; // --wandb.entity
-  wandb_notes?: string; // --wandb.notes
-  wandb_run_id?: string; // --wandb.run_id
-  wandb_mode?: string; // --wandb.mode (online, offline, disabled)
-  wandb_disable_artifact: boolean; // --wandb.disable_artifact
-
-  // Environment and evaluation - exact matches from CLI
-  env_type?: string; // --env.type (aloha, pusht, xarm, gym_manipulator, hil)
-  env_task?: string; // --env.task
-  eval_n_episodes: number; // --eval.n_episodes
-  eval_batch_size: number; // --eval.batch_size
-  eval_use_async_envs: boolean; // --eval.use_async_envs
-
-  // Policy-specific parameters that are commonly used
-  policy_device?: string; // --policy.device
-  policy_use_amp: boolean; // --policy.use_amp
-
-  // Optimizer parameters - exact matches from CLI
-  optimizer_type?: string; // --optimizer.type (adam, adamw, sgd, multi_adam)
-  optimizer_lr?: number; // --optimizer.lr (will use policy default if not set)
-  optimizer_weight_decay?: number; // --optimizer.weight_decay
-  optimizer_grad_clip_norm?: number; // --optimizer.grad_clip_norm
-
-  // Advanced configuration
-  use_policy_training_preset: boolean; // --use_policy_training_preset
-  config_path?: string; // --config_path
-}
-
-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;
-  };
-}
-
-interface LogEntry {
-  timestamp: number;
-  message: string;
-}
+import { TrainingConfig, TrainingStatus, LogEntry } from "@/components/training/types";
+import TrainingHeader from "@/components/training/TrainingHeader";
+import TrainingTabs from "@/components/training/TrainingTabs";
+import ConfigurationTab from "@/components/training/ConfigurationTab";
+import MonitoringTab from "@/components/training/MonitoringTab";
+import TrainingControls from "@/components/training/TrainingControls";
 
 const Training = () => {
-  const navigate = useNavigate();
   const { toast } = useToast();
   const logContainerRef = useRef<HTMLDivElement>(null);
 
@@ -298,945 +195,33 @@ const Training = () => {
     return (trainingStatus.current_step / trainingStatus.total_steps) * 100;
   };
 
-  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="min-h-screen bg-gray-950 text-white p-4">
+    <div className="min-h-screen bg-slate-900 text-white p-4">
       <div className="max-w-7xl mx-auto">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => navigate("/")}
-              className="text-gray-400 hover:text-white"
-            >
-              <ArrowLeft className="w-4 h-4 mr-2" />
-              Back to Home
-            </Button>
-            <h1 className="text-4xl font-bold text-white">
-              Training Dashboard
-            </h1>
-          </div>
-
-          <div className="flex items-center gap-3">
-            <div
-              className={`w-2 h-2 rounded-full ${
-                trainingStatus.training_active ? "bg-green-400" : "bg-gray-400"
-              }`}
-            ></div>
-            <span className={`font-semibold ${getStatusColor()}`}>
-              {getStatusText()}
-            </span>
-          </div>
-        </div>
-
-        {/* Tab Navigation */}
-        <div className="flex gap-2 mb-6">
-          <Button
-            variant={activeTab === "config" ? "default" : "ghost"}
-            onClick={() => setActiveTab("config")}
-            className="flex items-center gap-2"
-          >
-            <Settings className="w-4 h-4" />
-            Configuration
-          </Button>
-          <Button
-            variant={activeTab === "monitoring" ? "default" : "ghost"}
-            onClick={() => setActiveTab("monitoring")}
-            className="flex items-center gap-2"
-          >
-            <Activity className="w-4 h-4" />
-            Monitoring
-          </Button>
-        </div>
-
-        {/* Configuration Tab */}
+        <TrainingHeader trainingStatus={trainingStatus} />
+        <TrainingTabs activeTab={activeTab} setActiveTab={setActiveTab} />
+        
         {activeTab === "config" && (
-          <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
-            {/* Dataset Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <Database className="w-5 h-5" />
-                  Dataset Configuration
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="dataset_repo_id" className="text-gray-300">
-                    Dataset Repository ID *
-                  </Label>
-                  <Input
-                    id="dataset_repo_id"
-                    value={trainingConfig.dataset_repo_id}
-                    onChange={(e) =>
-                      updateConfig("dataset_repo_id", e.target.value)
-                    }
-                    placeholder="e.g., your-username/your-dataset"
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">
-                    HuggingFace Hub dataset repository ID
-                  </p>
-                </div>
-
-                <div>
-                  <Label htmlFor="dataset_revision" className="text-gray-300">
-                    Dataset Revision (optional)
-                  </Label>
-                  <Input
-                    id="dataset_revision"
-                    value={trainingConfig.dataset_revision || ""}
-                    onChange={(e) =>
-                      updateConfig(
-                        "dataset_revision",
-                        e.target.value || undefined
-                      )
-                    }
-                    placeholder="main"
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                  <p className="text-xs text-gray-500 mt-1">
-                    Git revision (branch, tag, or commit hash)
-                  </p>
-                </div>
-
-                <div>
-                  <Label htmlFor="dataset_root" className="text-gray-300">
-                    Dataset Root Directory (optional)
-                  </Label>
-                  <Input
-                    id="dataset_root"
-                    value={trainingConfig.dataset_root || ""}
-                    onChange={(e) =>
-                      updateConfig("dataset_root", e.target.value || undefined)
-                    }
-                    placeholder="./data"
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Policy Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <Cpu className="w-5 h-5" />
-                  Policy Configuration
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="policy_type" className="text-gray-300">
-                    Policy Type
-                  </Label>
-                  <Select
-                    value={trainingConfig.policy_type}
-                    onValueChange={(value) =>
-                      updateConfig("policy_type", value)
-                    }
-                  >
-                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-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-gray-300">
-                    Device
-                  </Label>
-                  <Select
-                    value={trainingConfig.policy_device || "cuda"}
-                    onValueChange={(value) =>
-                      updateConfig("policy_device", value)
-                    }
-                  >
-                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-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">
-                  <Switch
-                    id="policy_use_amp"
-                    checked={trainingConfig.policy_use_amp}
-                    onCheckedChange={(checked) =>
-                      updateConfig("policy_use_amp", checked)
-                    }
-                  />
-                  <Label htmlFor="policy_use_amp" className="text-gray-300">
-                    Use Automatic Mixed Precision (AMP)
-                  </Label>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Training Parameters */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <TrendingUp className="w-5 h-5" />
-                  Training Parameters
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="steps" className="text-gray-300">
-                      Training Steps
-                    </Label>
-                    <Input
-                      id="steps"
-                      type="number"
-                      value={trainingConfig.steps}
-                      onChange={(e) =>
-                        updateConfig("steps", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="batch_size" className="text-gray-300">
-                      Batch Size
-                    </Label>
-                    <Input
-                      id="batch_size"
-                      type="number"
-                      value={trainingConfig.batch_size}
-                      onChange={(e) =>
-                        updateConfig("batch_size", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="seed" className="text-gray-300">
-                      Random Seed
-                    </Label>
-                    <Input
-                      id="seed"
-                      type="number"
-                      value={trainingConfig.seed || ""}
-                      onChange={(e) =>
-                        updateConfig(
-                          "seed",
-                          e.target.value ? parseInt(e.target.value) : undefined
-                        )
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="num_workers" className="text-gray-300">
-                      Number of Workers
-                    </Label>
-                    <Input
-                      id="num_workers"
-                      type="number"
-                      value={trainingConfig.num_workers}
-                      onChange={(e) =>
-                        updateConfig("num_workers", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Optimizer Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <Settings className="w-5 h-5" />
-                  Optimizer Configuration
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="optimizer_type" className="text-gray-300">
-                    Optimizer Type
-                  </Label>
-                  <Select
-                    value={trainingConfig.optimizer_type || "adam"}
-                    onValueChange={(value) =>
-                      updateConfig("optimizer_type", value)
-                    }
-                  >
-                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-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-gray-300">
-                      Learning Rate
-                    </Label>
-                    <Input
-                      id="optimizer_lr"
-                      type="number"
-                      step="0.0001"
-                      value={trainingConfig.optimizer_lr || ""}
-                      onChange={(e) =>
-                        updateConfig(
-                          "optimizer_lr",
-                          e.target.value
-                            ? parseFloat(e.target.value)
-                            : undefined
-                        )
-                      }
-                      placeholder="Use policy default"
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label
-                      htmlFor="optimizer_weight_decay"
-                      className="text-gray-300"
-                    >
-                      Weight Decay
-                    </Label>
-                    <Input
-                      id="optimizer_weight_decay"
-                      type="number"
-                      step="0.0001"
-                      value={trainingConfig.optimizer_weight_decay || ""}
-                      onChange={(e) =>
-                        updateConfig(
-                          "optimizer_weight_decay",
-                          e.target.value
-                            ? parseFloat(e.target.value)
-                            : undefined
-                        )
-                      }
-                      placeholder="Use policy default"
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label
-                      htmlFor="optimizer_grad_clip_norm"
-                      className="text-gray-300"
-                    >
-                      Gradient Clipping
-                    </Label>
-                    <Input
-                      id="optimizer_grad_clip_norm"
-                      type="number"
-                      value={trainingConfig.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-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Logging Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <FileText className="w-5 h-5" />
-                  Logging & Checkpointing
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="grid grid-cols-3 gap-4">
-                  <div>
-                    <Label htmlFor="log_freq" className="text-gray-300">
-                      Log Frequency
-                    </Label>
-                    <Input
-                      id="log_freq"
-                      type="number"
-                      value={trainingConfig.log_freq}
-                      onChange={(e) =>
-                        updateConfig("log_freq", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="save_freq" className="text-gray-300">
-                      Save Frequency
-                    </Label>
-                    <Input
-                      id="save_freq"
-                      type="number"
-                      value={trainingConfig.save_freq}
-                      onChange={(e) =>
-                        updateConfig("save_freq", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="eval_freq" className="text-gray-300">
-                      Eval Frequency
-                    </Label>
-                    <Input
-                      id="eval_freq"
-                      type="number"
-                      value={trainingConfig.eval_freq}
-                      onChange={(e) =>
-                        updateConfig("eval_freq", parseInt(e.target.value))
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-                </div>
-
-                <div>
-                  <Label htmlFor="output_dir" className="text-gray-300">
-                    Output Directory
-                  </Label>
-                  <Input
-                    id="output_dir"
-                    value={trainingConfig.output_dir}
-                    onChange={(e) => updateConfig("output_dir", e.target.value)}
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-
-                <div>
-                  <Label htmlFor="job_name" className="text-gray-300">
-                    Job Name (optional)
-                  </Label>
-                  <Input
-                    id="job_name"
-                    value={trainingConfig.job_name || ""}
-                    onChange={(e) =>
-                      updateConfig("job_name", e.target.value || undefined)
-                    }
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-
-                <div className="flex items-center space-x-3">
-                  <Switch
-                    id="save_checkpoint"
-                    checked={trainingConfig.save_checkpoint}
-                    onCheckedChange={(checked) =>
-                      updateConfig("save_checkpoint", checked)
-                    }
-                  />
-                  <Label htmlFor="save_checkpoint" className="text-gray-300">
-                    Save Checkpoints
-                  </Label>
-                </div>
-
-                <div className="flex items-center space-x-3">
-                  <Switch
-                    id="resume"
-                    checked={trainingConfig.resume}
-                    onCheckedChange={(checked) =>
-                      updateConfig("resume", checked)
-                    }
-                  />
-                  <Label htmlFor="resume" className="text-gray-300">
-                    Resume from Checkpoint
-                  </Label>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Weights & Biases Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <TrendingUp className="w-5 h-5" />
-                  Weights & Biases
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div className="flex items-center space-x-3">
-                  <Switch
-                    id="wandb_enable"
-                    checked={trainingConfig.wandb_enable}
-                    onCheckedChange={(checked) =>
-                      updateConfig("wandb_enable", checked)
-                    }
-                  />
-                  <Label htmlFor="wandb_enable" className="text-gray-300">
-                    Enable Weights & Biases Logging
-                  </Label>
-                </div>
-
-                {trainingConfig.wandb_enable && (
-                  <>
-                    <div>
-                      <Label htmlFor="wandb_project" className="text-gray-300">
-                        W&B Project Name
-                      </Label>
-                      <Input
-                        id="wandb_project"
-                        value={trainingConfig.wandb_project || ""}
-                        onChange={(e) =>
-                          updateConfig(
-                            "wandb_project",
-                            e.target.value || undefined
-                          )
-                        }
-                        placeholder="my-robotics-project"
-                        className="bg-gray-800 border-gray-600 text-white"
-                      />
-                    </div>
-
-                    <div>
-                      <Label htmlFor="wandb_entity" className="text-gray-300">
-                        W&B Entity (optional)
-                      </Label>
-                      <Input
-                        id="wandb_entity"
-                        value={trainingConfig.wandb_entity || ""}
-                        onChange={(e) =>
-                          updateConfig(
-                            "wandb_entity",
-                            e.target.value || undefined
-                          )
-                        }
-                        placeholder="your-username"
-                        className="bg-gray-800 border-gray-600 text-white"
-                      />
-                    </div>
-
-                    <div>
-                      <Label htmlFor="wandb_notes" className="text-gray-300">
-                        W&B Notes (optional)
-                      </Label>
-                      <Input
-                        id="wandb_notes"
-                        value={trainingConfig.wandb_notes || ""}
-                        onChange={(e) =>
-                          updateConfig(
-                            "wandb_notes",
-                            e.target.value || undefined
-                          )
-                        }
-                        placeholder="Training run notes..."
-                        className="bg-gray-800 border-gray-600 text-white"
-                      />
-                    </div>
-
-                    <div>
-                      <Label htmlFor="wandb_mode" className="text-gray-300">
-                        W&B Mode
-                      </Label>
-                      <Select
-                        value={trainingConfig.wandb_mode || "online"}
-                        onValueChange={(value) =>
-                          updateConfig("wandb_mode", value)
-                        }
-                      >
-                        <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent className="bg-gray-800 border-gray-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">
-                      <Switch
-                        id="wandb_disable_artifact"
-                        checked={trainingConfig.wandb_disable_artifact}
-                        onCheckedChange={(checked) =>
-                          updateConfig("wandb_disable_artifact", checked)
-                        }
-                      />
-                      <Label
-                        htmlFor="wandb_disable_artifact"
-                        className="text-gray-300"
-                      >
-                        Disable Artifacts
-                      </Label>
-                    </div>
-                  </>
-                )}
-              </CardContent>
-            </Card>
-
-            {/* Environment & Evaluation Configuration */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <Activity className="w-5 h-5" />
-                  Environment & Evaluation
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="env_type" className="text-gray-300">
-                    Environment Type (optional)
-                  </Label>
-                  <Select
-                    value={trainingConfig.env_type || "none"}
-                    onValueChange={(value) =>
-                      updateConfig(
-                        "env_type",
-                        value === "none" ? undefined : value
-                      )
-                    }
-                  >
-                    <SelectTrigger className="bg-gray-800 border-gray-600 text-white">
-                      <SelectValue placeholder="Select environment type" />
-                    </SelectTrigger>
-                    <SelectContent className="bg-gray-800 border-gray-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-gray-300">
-                    Environment Task (optional)
-                  </Label>
-                  <Input
-                    id="env_task"
-                    value={trainingConfig.env_task || ""}
-                    onChange={(e) =>
-                      updateConfig("env_task", e.target.value || undefined)
-                    }
-                    placeholder="e.g., insertion_human"
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <Label htmlFor="eval_n_episodes" className="text-gray-300">
-                      Eval Episodes
-                    </Label>
-                    <Input
-                      id="eval_n_episodes"
-                      type="number"
-                      value={trainingConfig.eval_n_episodes}
-                      onChange={(e) =>
-                        updateConfig(
-                          "eval_n_episodes",
-                          parseInt(e.target.value)
-                        )
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-
-                  <div>
-                    <Label htmlFor="eval_batch_size" className="text-gray-300">
-                      Eval Batch Size
-                    </Label>
-                    <Input
-                      id="eval_batch_size"
-                      type="number"
-                      value={trainingConfig.eval_batch_size}
-                      onChange={(e) =>
-                        updateConfig(
-                          "eval_batch_size",
-                          parseInt(e.target.value)
-                        )
-                      }
-                      className="bg-gray-800 border-gray-600 text-white"
-                    />
-                  </div>
-                </div>
-
-                <div className="flex items-center space-x-3">
-                  <Switch
-                    id="eval_use_async_envs"
-                    checked={trainingConfig.eval_use_async_envs}
-                    onCheckedChange={(checked) =>
-                      updateConfig("eval_use_async_envs", checked)
-                    }
-                  />
-                  <Label
-                    htmlFor="eval_use_async_envs"
-                    className="text-gray-300"
-                  >
-                    Use Asynchronous Environments
-                  </Label>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Advanced Options */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <Settings className="w-5 h-5" />
-                  Advanced Options
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="config_path" className="text-gray-300">
-                    Config Path (optional)
-                  </Label>
-                  <Input
-                    id="config_path"
-                    value={trainingConfig.config_path || ""}
-                    onChange={(e) =>
-                      updateConfig("config_path", e.target.value || undefined)
-                    }
-                    placeholder="path/to/config.yaml"
-                    className="bg-gray-800 border-gray-600 text-white"
-                  />
-                </div>
-
-                <div className="flex items-center space-x-3">
-                  <Switch
-                    id="use_policy_training_preset"
-                    checked={trainingConfig.use_policy_training_preset}
-                    onCheckedChange={(checked) =>
-                      updateConfig("use_policy_training_preset", checked)
-                    }
-                  />
-                  <Label
-                    htmlFor="use_policy_training_preset"
-                    className="text-gray-300"
-                  >
-                    Use Policy Training Preset
-                  </Label>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+          <ConfigurationTab config={trainingConfig} updateConfig={updateConfig} />
         )}
 
-        {/* Monitoring Tab */}
         {activeTab === "monitoring" && (
-          <div className="space-y-6">
-            {/* Training Progress */}
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">
-                    Training Progress
-                  </h3>
-                  <div className="text-3xl font-bold text-blue-400 mb-2">
-                    {trainingStatus.current_step} / {trainingStatus.total_steps}
-                  </div>
-                  <Progress value={getProgressPercentage()} className="mb-2" />
-                  <div className="text-sm text-gray-400">
-                    {getProgressPercentage().toFixed(1)}% Complete
-                  </div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">Current Loss</h3>
-                  <div className="text-3xl font-bold text-green-400 mb-2">
-                    {trainingStatus.current_loss?.toFixed(4) || "N/A"}
-                  </div>
-                  <div className="text-sm text-gray-400">Training Loss</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">Learning Rate</h3>
-                  <div className="text-3xl font-bold text-orange-400 mb-2">
-                    {trainingStatus.current_lr?.toExponential(2) || "N/A"}
-                  </div>
-                  <div className="text-sm text-gray-400">Current LR</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">ETA</h3>
-                  <div className="text-3xl font-bold text-purple-400 mb-2">
-                    {trainingStatus.eta_seconds
-                      ? formatTime(trainingStatus.eta_seconds)
-                      : "N/A"}
-                  </div>
-                  <div className="text-sm text-gray-400">Estimated Time</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">Gradient Norm</h3>
-                  <div className="text-3xl font-bold text-cyan-400 mb-2">
-                    {trainingStatus.grad_norm?.toFixed(3) || "N/A"}
-                  </div>
-                  <div className="text-sm text-gray-400">Gradient Clipping</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">
-                    Training Status
-                  </h3>
-                  <div className="text-2xl font-bold text-yellow-400 mb-2">
-                    {trainingStatus.training_active ? "Active" : "Stopped"}
-                  </div>
-                  <div className="text-sm text-gray-400">Current State</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">Dataset</h3>
-                  <div className="text-lg font-bold text-pink-400 mb-2 truncate">
-                    {trainingConfig.dataset_repo_id || "Not Set"}
-                  </div>
-                  <div className="text-sm text-gray-400">Repository ID</div>
-                </CardContent>
-              </Card>
-
-              <Card className="bg-gray-900 border-gray-700">
-                <CardContent className="p-6 text-center">
-                  <h3 className="text-sm text-gray-400 mb-2">Policy</h3>
-                  <div className="text-lg font-bold text-indigo-400 mb-2 uppercase">
-                    {trainingConfig.policy_type}
-                  </div>
-                  <div className="text-sm text-gray-400">Model Type</div>
-                </CardContent>
-              </Card>
-            </div>
-
-            {/* Training Logs */}
-            <Card className="bg-gray-900 border-gray-700">
-              <CardHeader>
-                <CardTitle className="flex items-center gap-2 text-white">
-                  <FileText className="w-5 h-5" />
-                  Training Logs
-                </CardTitle>
-              </CardHeader>
-              <CardContent>
-                <div
-                  ref={logContainerRef}
-                  className="bg-gray-950 rounded-lg p-4 h-96 overflow-y-auto font-mono text-sm"
-                >
-                  {logs.length === 0 ? (
-                    <div className="text-gray-500 text-center py-8">
-                      No training logs yet. Start training to see output.
-                    </div>
-                  ) : (
-                    logs.map((log, index) => (
-                      <div key={index} className="mb-1">
-                        <span className="text-gray-500">
-                          {new Date(log.timestamp * 1000).toLocaleTimeString()}
-                        </span>
-                        <span className="ml-2 text-gray-300">
-                          {log.message}
-                        </span>
-                      </div>
-                    ))
-                  )}
-                </div>
-              </CardContent>
-            </Card>
-          </div>
+          <MonitoringTab
+            trainingStatus={trainingStatus}
+            logs={logs}
+            logContainerRef={logContainerRef}
+            getProgressPercentage={getProgressPercentage}
+            formatTime={formatTime}
+          />
         )}
-
-        {/* Control Buttons */}
-        <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-8 py-4 text-lg shadow-lg"
-            >
-              {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-8 py-4 text-lg shadow-lg"
-            >
-              <Square className="w-5 h-5 mr-2" />
-              Stop Training
-            </Button>
-          )}
-        </div>
+        
+        <TrainingControls
+          trainingStatus={trainingStatus}
+          isStartingTraining={isStartingTraining}
+          trainingConfig={trainingConfig}
+          handleStartTraining={handleStartTraining}
+          handleStopTraining={handleStopTraining}
+        />
       </div>
     </div>
   );