add dataset UI (hopefully)

ui/src/app/jobs/new/SimplifiedJob.tsx

@@ -13,6 +13,7 @@ import { Button } from '@headlessui/react';
 import { ChevronDown, ChevronUp, Upload } from 'lucide-react';
 import { apiClient } from '@/utils/api';
 import { addUserDataset, updateUserDatasetPath } from '@/utils/storage/datasetStorage';
+import DatasetPreviewGrid from '@/components/DatasetPreviewGrid';
 
 type DatasetMode = 'upload' | 'existing';
 
@@ -152,6 +153,8 @@ export default function SimplifiedJob({
   const [controlUploading, setControlUploading] = useState(false);
   const [controlUploadInfo, setControlUploadInfo] = useState<string | null>(null);
   const [controlUploadError, setControlUploadError] = useState<string | null>(null);
+  const [trainPreviewRefresh, setTrainPreviewRefresh] = useState(0);
+  const [controlPreviewRefresh, setControlPreviewRefresh] = useState(0);
 
   const modelArch = useMemo(() => {
     return modelArchs.find(arch => arch.name === process.model.arch);
@@ -359,6 +362,7 @@ export default function SimplifiedJob({
         setTrainDatasetNameTouched(true);
         setTrainUploadInfo(`Uploaded ${files.length} file${files.length > 1 ? 's' : ''} to ${datasetPath}`);
         setTrainUploadError(null);
+        setTrainPreviewRefresh(prev => prev + 1);
       } else {
         setJobConfig(datasetPath, 'config.process[0].datasets[0].control_path');
         updateUserDatasetPath(resolvedName, datasetPath);
@@ -370,6 +374,7 @@ export default function SimplifiedJob({
         setControlDatasetNameTouched(true);
         setControlUploadInfo(`Uploaded ${files.length} file${files.length > 1 ? 's' : ''} to ${datasetPath}`);
         setControlUploadError(null);
+        setControlPreviewRefresh(prev => prev + 1);
       }
     },
     [
@@ -377,10 +382,12 @@ export default function SimplifiedJob({
       controlDatasetPath,
       controlDatasetResolvedName,
       ensureDataset,
+      setControlPreviewRefresh,
       setJobConfig,
       trainDatasetName,
       trainDatasetPath,
       trainDatasetResolvedName,
+      setTrainPreviewRefresh,
     ],
   );
 
@@ -486,6 +493,34 @@ export default function SimplifiedJob({
     return datasetOptions;
   }, [datasetOptions]);
 
+  useEffect(() => {
+    if (trainDatasetResolvedName) {
+      return;
+    }
+    const currentFolder = dataset.folder_path;
+    if (!currentFolder) {
+      return;
+    }
+    const match = existingOptions.find(option => option.value === currentFolder);
+    if (match) {
+      setTrainDatasetResolvedName(match.label);
+    }
+  }, [existingOptions, dataset.folder_path, trainDatasetResolvedName]);
+
+  useEffect(() => {
+    if (controlDatasetResolvedName) {
+      return;
+    }
+    const controlPathValue = typeof dataset.control_path === 'string' ? dataset.control_path : null;
+    if (!controlPathValue) {
+      return;
+    }
+    const match = existingOptions.find(option => option.value === controlPathValue);
+    if (match) {
+      setControlDatasetResolvedName(match.label);
+    }
+  }, [existingOptions, dataset.control_path, controlDatasetResolvedName]);
+
   return (
     <form onSubmit={handleSubmit} className="space-y-8">
       <Card title="Training Setup">
@@ -667,6 +702,9 @@ export default function SimplifiedJob({
                   setJobConfig(value, 'config.process[0].datasets[0].folder_path');
                   setTrainModeTouched(true);
                   setTrainDatasetPath(value);
+                  const selected = existingOptions.find(option => option.value === value);
+                  setTrainDatasetResolvedName(selected?.label || null);
+                  setTrainPreviewRefresh(prev => prev + 1);
                 }}
                 options={existingOptions}
               />
@@ -678,6 +716,10 @@ export default function SimplifiedJob({
                 setJobConfig(value, 'config.process[0].datasets[0].folder_path');
                 setTrainModeTouched(true);
                 setTrainDatasetPath(value);
+                const trimmed = value?.trim();
+                const matched = existingOptions.find(option => option.value === trimmed);
+                setTrainDatasetResolvedName(matched?.label || null);
+                setTrainPreviewRefresh(prev => prev + 1);
               }}
               placeholder="/path/to/your/dataset"
               required
@@ -685,6 +727,15 @@ export default function SimplifiedJob({
           </div>
         )}
 
+        <div className="mt-6">
+          <h3 className="text-sm text-gray-200 font-semibold mb-3">Dataset Preview</h3>
+          <DatasetPreviewGrid
+            datasetName={trainDatasetResolvedName}
+            refreshKey={trainPreviewRefresh}
+            compact
+          />
+        </div>
+
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6">
           <NumberInput
             label="Dataset Weight"
@@ -754,6 +805,9 @@ export default function SimplifiedJob({
                       setJobConfig(value, 'config.process[0].datasets[0].control_path');
                       setControlModeTouched(true);
                       setControlDatasetPath(value);
+                      const selected = existingOptions.find(option => option.value === value);
+                      setControlDatasetResolvedName(selected?.label || null);
+                      setControlPreviewRefresh(prev => prev + 1);
                     }}
                     options={existingOptions}
                   />
@@ -766,11 +820,25 @@ export default function SimplifiedJob({
                     setJobConfig(normalized, 'config.process[0].datasets[0].control_path');
                     setControlModeTouched(true);
                     setControlDatasetPath(normalized || null);
+                    const trimmed = value?.trim();
+                    const matched = existingOptions.find(option => option.value === trimmed);
+                    setControlDatasetResolvedName(matched?.label || null);
+                    setControlPreviewRefresh(prev => prev + 1);
                   }}
                   placeholder="/path/to/control/images"
                 />
               </div>
             )}
+
+            <div className="mt-6">
+              <h3 className="text-sm text-gray-200 font-semibold mb-3">Control Dataset Preview</h3>
+              <DatasetPreviewGrid
+                datasetName={controlDatasetResolvedName}
+                refreshKey={controlPreviewRefresh}
+                compact
+                emptyMessage="No control media uploaded yet. Add files to preview them here."
+              />
+            </div>
           </div>
         )}
       </Card>

ui/src/components/DatasetPreviewGrid.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LuImageOff, LuLoader, LuBan } from 'react-icons/lu';
+import DatasetImageCard from './DatasetImageCard';
+import classNames from 'classnames';
+import { apiClient } from '@/utils/api';
+
+type LoadState = 'idle' | 'loading' | 'success' | 'error' | 'empty';
+
+interface DatasetPreviewGridProps {
+  datasetName?: string | null;
+  refreshKey?: number;
+  className?: string;
+  emptyMessage?: string;
+  compact?: boolean;
+}
+
+export default function DatasetPreviewGrid({
+  datasetName,
+  refreshKey = 0,
+  className = '',
+  emptyMessage = 'No files uploaded yet. Add images or videos to see them here.',
+  compact = false,
+}: DatasetPreviewGridProps) {
+  const [status, setStatus] = useState<LoadState>('idle');
+  const [items, setItems] = useState<{ img_path: string }[]>([]);
+
+  const fetchMedia = useCallback(async () => {
+    const trimmedName = datasetName?.trim();
+    if (!trimmedName) {
+      setItems([]);
+      setStatus('idle');
+      return;
+    }
+
+    setStatus('loading');
+    try {
+      const response = await apiClient
+        .post('/api/datasets/listImages', { datasetName: trimmedName })
+        .then(res => res.data);
+
+      const sorted = Array.isArray(response?.images)
+        ? [...response.images].sort((a, b) => a.img_path.localeCompare(b.img_path))
+        : [];
+
+      setItems(sorted);
+      setStatus(sorted.length === 0 ? 'empty' : 'success');
+    } catch (error) {
+      console.error('Failed to fetch dataset preview:', error);
+      setItems([]);
+      setStatus('error');
+    }
+  }, [datasetName]);
+
+  useEffect(() => {
+    fetchMedia();
+  }, [fetchMedia, refreshKey]);
+
+  const content = useMemo(() => {
+    switch (status) {
+      case 'idle':
+        return (
+          <div className="text-sm text-gray-500 bg-gray-900/60 border border-gray-800 rounded-md px-4 py-6 text-center">
+            Select or upload a dataset to preview its contents.
+          </div>
+        );
+      case 'loading':
+        return (
+          <div className="flex flex-col items-center justify-center gap-3 py-8 text-sm text-gray-300">
+            <LuLoader className="animate-spin w-6 h-6" />
+            <span>Loading dataset contents…</span>
+          </div>
+        );
+      case 'error':
+        return (
+          <div className="flex flex-col items-center justify-center gap-3 py-8 text-sm text-red-300 bg-red-950/30 border border-red-800 rounded-md">
+            <LuBan className="w-6 h-6" />
+            <span>Unable to load dataset media. Verify the dataset exists and try again.</span>
+          </div>
+        );
+      case 'empty':
+        return (
+          <div className="flex flex-col items-center justify-center gap-3 py-8 text-sm text-gray-400 bg-gray-900/60 border border-dashed border-gray-700 rounded-md">
+            <LuImageOff className="w-6 h-6" />
+            <span>{emptyMessage}</span>
+          </div>
+        );
+      case 'success':
+        return (
+          <div
+            className={classNames(
+              'grid gap-4',
+              compact
+                ? 'grid-cols-1 sm:grid-cols-2'
+                : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+            )}
+          >
+            {items.map(item => (
+              <DatasetImageCard
+                key={item.img_path}
+                imageUrl={item.img_path}
+                alt="Dataset media"
+                onDelete={fetchMedia}
+              />
+            ))}
+          </div>
+        );
+      default:
+        return null;
+    }
+  }, [status, items, emptyMessage, compact, fetchMedia]);
+
+  return <div className={classNames('space-y-4', className)}>{content}</div>;
+}