@proofhound/web-ui 0.1.13 → 0.1.15

package/dist/screens/datasets/dataset-upload-page.js

@@ -4,15 +4,15 @@ import { Link } from '../../components/navigation/link';
 import { useRouter } from '../../hooks/use-router';
 import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { datasetImportClient } from '@proofhound/api-client';
-import { AlertTriangle, Check, ChevronLeft, ChevronRight, FileText, Loader2, Upload } from 'lucide-react';
-import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Progress, formatProgressLabel, cn, } from '@proofhound/ui';
+import { AlertTriangle, Check, ChevronLeft, ChevronRight, Download, FileText, Info, Loader2, Upload, } from 'lucide-react';
+import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, Progress, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, formatProgressLabel, cn, } from '@proofhound/ui';
 import { Main } from '@proofhound/ui/layout';
 import { useCreateDataset } from '../../hooks';
 import { useI18n } from '../../i18n';
-import { runDatasetImport } from './dataset-import-runner';
+import { projectSampleRowsToBatches, runDatasetImport, runRawDatasetImport } from './dataset-import-runner';
 import { DatasetTransferProgressPanel, useDatasetTransferProgress } from './dataset-transfer-progress';
 import { RoleArrowLabel, RolePill } from './dataset-ui';
-import { FORMAT_CHIPS, PREVIEW_LIMIT, getDatasetNameFromFile, getDisplayValue, getUploadFilePath, inferRole, isJsonlFile, parseDatasetFile, parseJsonlPrefix, projectSamplesToColumns, selectDatasetFile, streamJsonlBatches, } from './dataset-upload-parser';
+import { FORMAT_CHIPS, PREVIEW_LIMIT, getDatasetNameFromFile, getDisplayValue, getUploadFilePath, inferRole, isStreamingImportFile, parseDatasetFile, parseStreamingPrefix, projectSamplesToColumns, selectDatasetFile, streamDatasetRows, } from './dataset-upload-parser';
 const ROLE_OPTIONS = [
     { role: 'id', labelKey: 'datasets.role.id' },
     { role: 'text', labelKey: 'datasets.role.text' },
@@ -21,6 +21,28 @@ const ROLE_OPTIONS = [
     { role: 'metadata', labelKey: 'datasets.role.metadata' },
 ];
 const directoryInputProps = { webkitdirectory: '', directory: '' };
+export const DATASET_IMAGE_SAMPLE_DOWNLOADS = [
+    {
+        labelKey: 'datasets.upload.imageSamples.urlFields',
+        href: '/examples/datasets/images/image-url-fields.csv',
+        fileName: 'proofhound-image-url-fields.csv',
+    },
+    {
+        labelKey: 'datasets.upload.imageSamples.urlArray',
+        href: '/examples/datasets/images/image-url-array.csv',
+        fileName: 'proofhound-image-url-array.csv',
+    },
+    {
+        labelKey: 'datasets.upload.imageSamples.base64',
+        href: '/examples/datasets/images/image-base64.jsonl',
+        fileName: 'proofhound-image-base64.jsonl',
+    },
+    {
+        labelKey: 'datasets.upload.imageSamples.zip',
+        href: '/examples/datasets/images/image-zip-relative-paths.zip',
+        fileName: 'proofhound-image-zip-relative-paths.zip',
+    },
+];
 function normalizeExpectedRoles(roles, preferredColumn) {
     let expectedColumn = preferredColumn && roles[preferredColumn] === 'expected' ? preferredColumn : null;
     if (!expectedColumn) {
@@ -37,12 +59,22 @@ function SectionNumber({ value }) {
 function Section({ number, title, hint, children, className, }) {
     return (_jsxs("section", { className: cn('rounded-lg border bg-card', className), children: [_jsxs("div", { className: "flex items-center gap-2 border-b px-4 py-3", children: [_jsx(SectionNumber, { value: number }), _jsx("h2", { className: "text-[14.5px] font-semibold", children: title }), _jsx("span", { className: "ml-auto text-[11.5px] text-muted-foreground", children: hint })] }), _jsx("div", { className: "p-4", children: children })] }));
 }
-function formatFileSize(bytes) {
+export function formatFileSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
     if (bytes < 1024 * 1024)
         return `${(bytes / 1024).toFixed(1)} KB`;
-    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    if (bytes < 1024 * 1024 * 1024)
+        return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+function formatByteLimit(bytes) {
+    if (bytes < 1024 * 1024 * 1024)
+        return formatFileSize(bytes);
+    return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+function formatTemplate(template, values) {
+    return Object.entries(values).reduce((output, [key, value]) => output.replaceAll(`{${key}}`, String(value)), template);
 }
 function withRelativePath(file, relativePath) {
     Object.defineProperty(file, 'proofhoundRelativePath', {
@@ -96,38 +128,111 @@ async function getDroppedFiles(dataTransfer) {
 function getParseErrorKey(parseError) {
     if (parseError === 'unsupported_file_type')
         return 'datasets.upload.unsupportedFile';
-    if (parseError === 'large_requires_jsonl')
-        return 'datasets.upload.largeRequiresJsonl';
+    if (parseError === 'large_requires_streaming_format')
+        return 'datasets.upload.largeRequiresStreamingFormat';
     return 'datasets.upload.parseFailed';
 }
-function estimatePayloadBytes(body) {
-    return new TextEncoder().encode(JSON.stringify(body)).length;
+export function estimateUploadProgressBytes(sourceFile) {
+    return Math.max(1, sourceFile.fileSizeBytes);
 }
-// Files larger than this are not parsed whole on drop: only a head prefix is read for preview,
-// and on import they stream off disk through the dataset-import session.
-const SYNC_MAX_FILE_BYTES = 10 * 1024 * 1024;
+// Files larger than this are not parsed whole on drop: only a head prefix is read for preview.
+// They prefer raw upload + server-side import when object storage supports browser upload sessions.
+const SYNC_MAX_FILE_BYTES = 1024 * 1024;
 // Below the file-size threshold a parsed dataset still routes through the import session once it exceeds
 // this many samples, because the synchronous POST /datasets path is capped server-side.
 const SYNC_MAX_SAMPLES = 5000;
 const IMPORT_BATCH_SIZE = 1000;
+const DEFAULT_RAW_UPLOAD_MAX_BYTES = 2 * 1024 * 1024 * 1024;
+const RAW_BUFFERED_FORMAT_MAX_BYTES = 64 * 1024 * 1024;
 function toImportSourceFormat(fileName) {
     const lower = fileName.toLowerCase();
     if (lower.endsWith('.csv'))
         return 'csv';
     if (lower.endsWith('.tsv'))
         return 'tsv';
+    if (lower.endsWith('.json'))
+        return 'json';
+    if (lower.endsWith('.zip'))
+        return 'zip';
     return 'jsonl';
 }
-async function* chunkSamples(samples, size) {
-    for (let index = 0; index < samples.length; index += size) {
-        yield samples.slice(index, index + size);
+function isStreamingImportFileName(fileName) {
+    const lower = fileName.toLowerCase();
+    return lower.endsWith('.jsonl') || lower.endsWith('.csv') || lower.endsWith('.tsv');
+}
+function isRawImportFileName(fileName) {
+    const lower = fileName.toLowerCase();
+    return (lower.endsWith('.jsonl') ||
+        lower.endsWith('.csv') ||
+        lower.endsWith('.tsv') ||
+        lower.endsWith('.json') ||
+        lower.endsWith('.zip'));
+}
+function canUseRawImportForFile(file, capabilities) {
+    if (capabilities?.supported !== true)
+        return false;
+    if (!isRawImportFileName(file.name) || file.size > capabilities.maxBytes)
+        return false;
+    return isStreamingImportFileName(file.name) || file.size <= RAW_BUFFERED_FORMAT_MAX_BYTES;
+}
+export function selectDatasetUploadImportPath({ file, isLargeFile, parsedSampleCount, rawImportCapabilities, }) {
+    if (file.size <= SYNC_MAX_FILE_BYTES && parsedSampleCount <= SYNC_MAX_SAMPLES) {
+        return 'sync';
     }
+    if (canUseRawImportForFile(file, rawImportCapabilities)) {
+        return 'raw';
+    }
+    if (isLargeFile) {
+        return 'streaming';
+    }
+    return 'buffered';
+}
+function yieldToBrowser() {
+    return new Promise((resolve) => {
+        if (typeof window === 'undefined' || typeof window.requestAnimationFrame !== 'function') {
+            setTimeout(resolve, 0);
+            return;
+        }
+        window.requestAnimationFrame(() => window.requestAnimationFrame(() => resolve()));
+    });
 }
-// Streams a large JSONL file off disk, projecting each batch to the selected columns before upload.
-async function* projectedJsonlBatches(file, columns, size, onBytes, signal) {
-    for await (const batch of streamJsonlBatches(file, size, onBytes, signal)) {
-        yield projectSamplesToColumns(batch, columns);
+function throwIfAborted(signal) {
+    if (!signal?.aborted)
+        return;
+    throw new DOMException('aborted', 'AbortError');
+}
+export async function* projectBufferedSampleBatches(samples, columns, size, signal) {
+    async function* rows() {
+        for (let index = 0; index < samples.length; index += 1) {
+            throwIfAborted(signal);
+            if (index > 0 && index % size === 0)
+                await yieldToBrowser();
+            throwIfAborted(signal);
+            yield samples[index] ?? {};
+        }
     }
+    yield* projectSampleRowsToBatches(rows(), columns, { maxRows: size, signal });
+}
+// Streams a large JSONL/CSV/TSV file off disk, projecting each batch to the selected columns before upload.
+async function* projectedStreamingFileBatches(file, columns, size, onBytes, signal) {
+    yield* projectSampleRowsToBatches(streamDatasetRows(file, onBytes, signal), columns, { maxRows: size, signal });
+}
+function UploadLimitInfoIcon({ rawMaxBytes }) {
+    const { t } = useI18n();
+    const rawLimit = formatByteLimit(rawMaxBytes);
+    const syncLimit = formatByteLimit(SYNC_MAX_FILE_BYTES);
+    return (_jsx(TooltipProvider, { delayDuration: 140, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": t('datasets.upload.limitInfoLabel'), "data-testid": "dataset-upload-limit-info", children: _jsx(Info, { className: "size-3.5" }) }) }), _jsxs(TooltipContent, { side: "top", className: "max-w-[340px] text-left", children: [_jsx("div", { className: "text-[11.5px] font-semibold", children: t('datasets.upload.limitInfoTitle') }), _jsxs("div", { className: "mt-1.5 space-y-1 text-[11px] leading-relaxed", children: [_jsx("p", { children: formatTemplate(t('datasets.upload.limitInfoSmall'), {
+                                        syncLimit,
+                                    }) }), _jsx("p", { children: t('datasets.upload.limitInfoStreaming') }), _jsx("p", { children: formatTemplate(t('datasets.upload.limitInfoRaw'), {
+                                        rawLimit,
+                                    }) }), _jsx("p", { children: t('datasets.upload.limitInfoJsonZip') })] })] })] }) }));
+}
+function ImageSampleDownloads() {
+    const { t } = useI18n();
+    return (_jsxs("div", { className: "border-t pt-3", "data-testid": "dataset-upload-image-samples", children: [_jsxs("div", { className: "flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "text-[12px] font-semibold", children: t('datasets.upload.imageSamples.title') }), _jsx("div", { className: "text-[11.5px] text-muted-foreground", children: t('datasets.upload.imageSamples.hint') })] }), _jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: DATASET_IMAGE_SAMPLE_DOWNLOADS.map((sample) => {
+                    const label = t(sample.labelKey);
+                    return (_jsxs("a", { className: "inline-flex h-8 items-center gap-1.5 rounded-md border bg-background px-2.5 text-[11.5px] font-medium text-foreground transition-colors hover:bg-muted", href: sample.href, download: sample.fileName, "aria-label": formatTemplate(t('datasets.upload.imageSamples.downloadAria'), { name: label }), "data-testid": `dataset-image-sample-${sample.fileName}`, children: [_jsx(Download, { className: "size-3.5" }), label] }, sample.href));
+                }) })] }));
 }
 export function DatasetUploadPage({ projectId }) {
     const { t } = useI18n();
@@ -146,15 +251,37 @@ export function DatasetUploadPage({ projectId }) {
     const [isDragOver, setIsDragOver] = useState(false);
     const [isImporting, setIsImporting] = useState(false);
     const [isLargeFile, setIsLargeFile] = useState(false);
+    const [rawImportCapabilities, setRawImportCapabilities] = useState(null);
     const importAbortRef = useRef(null);
     const importIdRef = useRef(null);
+    const abortOnLeaveRef = useRef(false);
     const leaveActionRef = useRef(null);
     const [leaveDialogOpen, setLeaveDialogOpen] = useState(false);
-    // Leaving the page mid-import aborts the session so the server clears its staging rows (中断即删干净).
-    useEffect(() => () => importAbortRef.current?.abort(), []);
+    const [serverImportContinues, setServerImportContinues] = useState(false);
+    // Before raw upload is finalized, leaving can cancel the transfer. After server-side import starts, it continues.
+    useEffect(() => () => {
+        if (abortOnLeaveRef.current)
+            importAbortRef.current?.abort();
+    }, []);
+    useEffect(() => {
+        let cancelled = false;
+        datasetImportClient
+            .getRawImportCapabilities(projectId)
+            .then((capabilities) => {
+            if (!cancelled)
+                setRawImportCapabilities(capabilities);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setRawImportCapabilities({ supported: false, maxBytes: 1 });
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [projectId]);
     // While an import is in flight, guard every way to leave so the user is warned before losing it.
     useEffect(() => {
-        if (!isImporting)
+        if (!isImporting || serverImportContinues)
             return undefined;
         // Tab close / refresh / hard URL change: only the browser's native prompt is possible here.
         const onBeforeUnload = (event) => {
@@ -208,10 +335,11 @@ export function DatasetUploadPage({ projectId }) {
             document.removeEventListener('click', onClickCapture, true);
             window.removeEventListener('popstate', onPopState);
         };
-    }, [isImporting, router, projectId]);
+    }, [isImporting, serverImportContinues, router, projectId]);
     const confirmLeaveImport = () => {
         setLeaveDialogOpen(false);
-        importAbortRef.current?.abort();
+        if (abortOnLeaveRef.current)
+            importAbortRef.current?.abort();
         setIsImporting(false);
         const action = leaveActionRef.current;
         leaveActionRef.current = null;
@@ -248,12 +376,13 @@ export function DatasetUploadPage({ projectId }) {
         try {
             const file = await selectDatasetFile(files);
             const large = file.size > SYNC_MAX_FILE_BYTES;
-            if (large && !isJsonlFile(file)) {
-                // Streaming import currently supports JSONL only; large non-JSONL files are not parsed whole on drop.
-                throw new Error('large_requires_jsonl');
+            const canRawImportWholeFile = canUseRawImportForFile(file, rawImportCapabilities);
+            if (large && !isStreamingImportFile(file) && !canRawImportWholeFile) {
+                // Large JSON arrays / ZIPs are only previewed with a bounded parser before raw import.
+                throw new Error('large_requires_streaming_format');
             }
-            // Large files: read only a head prefix for preview/mapping, never the whole file.
-            const parsed = large ? await parseJsonlPrefix(file) : await parseDatasetFile(file);
+            // Streaming formats read only a head prefix; bounded JSON/ZIP raw imports may parse the small whole file for preview.
+            const parsed = large && isStreamingImportFile(file) ? await parseStreamingPrefix(file) : await parseDatasetFile(file);
             setSelectedFile(file);
             setParsedFile(parsed);
             setIsLargeFile(large);
@@ -283,21 +412,70 @@ export function DatasetUploadPage({ projectId }) {
             description: description.trim() || null,
             fieldMappings,
             sourceFile,
-            sourceFormat: 'jsonl',
+            sourceFormat: toImportSourceFormat(sourceFile.fileName),
         };
         const controller = new AbortController();
         importAbortRef.current = controller;
+        abortOnLeaveRef.current = true;
+        setServerImportContinues(false);
         setIsImporting(true);
         uploadProgress.start(t('datasets.transfer.uploadTitle'), totalBytes);
+        await yieldToBrowser();
         try {
             await runDatasetImport({
                 projectId,
                 createBody,
-                batches: projectedJsonlBatches(file, selectedColumns, IMPORT_BATCH_SIZE, (readBytes) => uploadProgress.update({ loadedBytes: readBytes, totalBytes }), controller.signal),
+                batches: projectedStreamingFileBatches(file, selectedColumns, IMPORT_BATCH_SIZE, (readBytes) => uploadProgress.update({ loadedBytes: readBytes, totalBytes }), controller.signal),
+                signal: controller.signal,
+                onCreated: (id) => {
+                    importIdRef.current = id;
+                },
+            });
+            uploadProgress.complete(totalBytes);
+            router.push(`/datasets`);
+        }
+        catch {
+            uploadProgress.fail();
+        }
+        finally {
+            setIsImporting(false);
+            importAbortRef.current = null;
+            importIdRef.current = null;
+            abortOnLeaveRef.current = false;
+        }
+    };
+    const importRawDataset = async (fieldMappings, sourceFile, file) => {
+        const totalBytes = file.size;
+        const createBody = {
+            name: datasetName.trim(),
+            description: description.trim() || null,
+            fieldMappings,
+            sourceFile,
+            sourceFormat: toImportSourceFormat(sourceFile.fileName),
+        };
+        const controller = new AbortController();
+        importAbortRef.current = controller;
+        abortOnLeaveRef.current = true;
+        setServerImportContinues(false);
+        setIsImporting(true);
+        uploadProgress.start(t('datasets.transfer.uploadTitle'), totalBytes);
+        await yieldToBrowser();
+        try {
+            await runRawDatasetImport({
+                projectId,
+                createBody,
+                file,
                 signal: controller.signal,
                 onCreated: (id) => {
                     importIdRef.current = id;
                 },
+                onUploaded: () => uploadProgress.update({ loadedBytes: totalBytes, totalBytes }),
+                onProgress: ({ phase }) => {
+                    if (phase === 'queued' || phase === 'parsing' || phase === 'importing') {
+                        abortOnLeaveRef.current = false;
+                        setServerImportContinues(true);
+                    }
+                },
             });
             uploadProgress.complete(totalBytes);
             router.push(`/datasets`);
@@ -309,11 +487,13 @@ export function DatasetUploadPage({ projectId }) {
             setIsImporting(false);
             importAbortRef.current = null;
             importIdRef.current = null;
+            abortOnLeaveRef.current = false;
+            setServerImportContinues(false);
         }
     };
-    const importBufferedDataset = async (fieldMappings, sourceFile, samples) => {
+    const importBufferedDataset = async (fieldMappings, sourceFile, samples, columns) => {
         const totalRows = samples.length;
-        const estimatedBytes = new TextEncoder().encode(JSON.stringify(samples)).length;
+        const estimatedBytes = estimateUploadProgressBytes(sourceFile);
         const createBody = {
             name: datasetName.trim(),
             description: description.trim() || null,
@@ -324,13 +504,16 @@ export function DatasetUploadPage({ projectId }) {
         };
         const controller = new AbortController();
         importAbortRef.current = controller;
+        abortOnLeaveRef.current = true;
+        setServerImportContinues(false);
         setIsImporting(true);
         uploadProgress.start(t('datasets.transfer.uploadTitle'), estimatedBytes);
+        await yieldToBrowser();
         try {
             await runDatasetImport({
                 projectId,
                 createBody,
-                batches: chunkSamples(samples, IMPORT_BATCH_SIZE),
+                batches: projectBufferedSampleBatches(samples, columns, IMPORT_BATCH_SIZE, controller.signal),
                 signal: controller.signal,
                 onCreated: (id) => {
                     importIdRef.current = id;
@@ -350,6 +533,7 @@ export function DatasetUploadPage({ projectId }) {
             setIsImporting(false);
             importAbortRef.current = null;
             importIdRef.current = null;
+            abortOnLeaveRef.current = false;
         }
     };
     const importDataset = async () => {
@@ -364,15 +548,25 @@ export function DatasetUploadPage({ projectId }) {
             fileSizeBytes: selectedFile.size,
             contentType: selectedFile.type || undefined,
         };
-        if (isLargeFile) {
+        const importPath = selectDatasetUploadImportPath({
+            file: selectedFile,
+            isLargeFile,
+            parsedSampleCount: parsedFile.samples.length,
+            rawImportCapabilities,
+        });
+        if (importPath === 'raw') {
+            await importRawDataset(fieldMappings, sourceFile, selectedFile);
+            return;
+        }
+        if (importPath === 'streaming') {
             await importStreamingDataset(fieldMappings, sourceFile, selectedFile);
             return;
         }
-        const samples = projectSamplesToColumns(parsedFile.samples, selectedColumns);
-        if (samples.length > SYNC_MAX_SAMPLES) {
-            await importBufferedDataset(fieldMappings, sourceFile, samples);
+        if (importPath === 'buffered') {
+            await importBufferedDataset(fieldMappings, sourceFile, parsedFile.samples, selectedColumns);
             return;
         }
+        const samples = projectSamplesToColumns(parsedFile.samples, selectedColumns);
         const body = {
             name: datasetName.trim(),
             description: description.trim() || null,
@@ -380,7 +574,7 @@ export function DatasetUploadPage({ projectId }) {
             fieldMappings,
             samples,
         };
-        const estimatedBytes = estimatePayloadBytes(body);
+        const estimatedBytes = estimateUploadProgressBytes(sourceFile);
         uploadProgress.start(t('datasets.transfer.uploadTitle'), estimatedBytes);
         try {
             await createDataset.mutateAsync({
@@ -394,7 +588,11 @@ export function DatasetUploadPage({ projectId }) {
             uploadProgress.fail();
         }
     };
-    return (_jsxs(Main, { className: "gap-0 bg-muted/35 p-0", children: [_jsxs("div", { className: "mx-auto w-full max-w-[1440px] px-4 py-6 pb-36 sm:px-6 sm:pb-28 lg:px-8", "data-testid": "dataset-upload-page", children: [_jsxs("div", { className: "mb-1 font-mono text-[11.5px] text-muted-foreground", children: [_jsx(Link, { className: "hover:text-foreground", href: `/datasets`, children: t('datasets.title') }), _jsx("span", { className: "px-1.5", children: "/" }), _jsx("span", { className: "text-foreground", children: t('datasets.upload.title') })] }), _jsx("div", { className: "mb-5", children: _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-[26px] font-semibold", children: t('datasets.upload.title') }), _jsx("div", { className: "mt-1 text-[12.5px] text-muted-foreground", children: t('datasets.upload.subtitle') })] }) }), createDataset.isError && (_jsxs("div", { className: "mb-4 flex gap-2 rounded-md border border-destructive/35 bg-destructive/10 p-3 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), t('datasets.upload.importFailed')] })), isImporting && (_jsxs("div", { className: "mb-4 flex gap-2 rounded-md border border-[var(--status-pending-bd)] bg-[var(--status-pending-bg)] p-3 text-sm text-[var(--status-pending-fg)]", role: "alert", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: t('datasets.upload.importingNoticeTitle') }), _jsx("div", { className: "mt-0.5 text-[12.5px]", children: t('datasets.upload.importingNoticeBody') })] })] })), _jsx(DatasetTransferProgressPanel, { progress: uploadProgress.progress, className: "mb-4" }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-[1.2fr_1fr]", children: [_jsx(Section, { number: 1, title: t('datasets.upload.file'), hint: t('datasets.upload.fileHint'), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('block rounded-lg border border-dashed border-[var(--status-running-bd)] bg-[var(--status-running-bg)]/45 p-4 transition-colors hover:bg-[var(--status-running-bg)]/65', isDragOver && 'border-primary bg-primary/10'), onDragEnter: (event) => {
+    return (_jsxs(Main, { className: "gap-0 bg-muted/35 p-0", children: [_jsxs("div", { className: "mx-auto w-full max-w-[1440px] px-4 py-6 pb-36 sm:px-6 sm:pb-28 lg:px-8", "data-testid": "dataset-upload-page", children: [_jsxs("div", { className: "mb-1 font-mono text-[11.5px] text-muted-foreground", children: [_jsx(Link, { className: "hover:text-foreground", href: `/datasets`, children: t('datasets.title') }), _jsx("span", { className: "px-1.5", children: "/" }), _jsx("span", { className: "text-foreground", children: t('datasets.upload.title') })] }), _jsx("div", { className: "mb-5", children: _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "text-[26px] font-semibold", children: t('datasets.upload.title') }), _jsx("div", { className: "mt-1 text-[12.5px] text-muted-foreground", children: t('datasets.upload.subtitle') })] }) }), createDataset.isError && (_jsxs("div", { className: "mb-4 flex gap-2 rounded-md border border-destructive/35 bg-destructive/10 p-3 text-sm text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), t('datasets.upload.importFailed')] })), isImporting && (_jsxs("div", { className: "mb-4 flex gap-2 rounded-md border border-[var(--status-pending-bd)] bg-[var(--status-pending-bg)] p-3 text-sm text-[var(--status-pending-fg)]", role: "alert", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: t(serverImportContinues
+                                            ? 'datasets.upload.backgroundImportNoticeTitle'
+                                            : 'datasets.upload.importingNoticeTitle') }), _jsx("div", { className: "mt-0.5 text-[12.5px]", children: t(serverImportContinues
+                                            ? 'datasets.upload.backgroundImportNoticeBody'
+                                            : 'datasets.upload.importingNoticeBody') })] })] })), _jsx(DatasetTransferProgressPanel, { progress: uploadProgress.progress, className: "mb-4" }), _jsxs("div", { className: "grid gap-4 xl:grid-cols-[1.2fr_1fr]", children: [_jsx(Section, { number: 1, title: t('datasets.upload.file'), hint: t('datasets.upload.fileHint'), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('block rounded-lg border border-dashed border-[var(--status-running-bd)] bg-[var(--status-running-bg)]/45 p-4 transition-colors hover:bg-[var(--status-running-bg)]/65', isDragOver && 'border-primary bg-primary/10'), onDragEnter: (event) => {
                                                 event.preventDefault();
                                                 setIsDragOver(true);
                                             }, onDragOver: (event) => event.preventDefault(), onDragLeave: () => setIsDragOver(false), onDrop: handleDrop, children: [_jsx("input", { id: fileInputId, type: "file", accept: FORMAT_CHIPS.join(','), className: "sr-only", onChange: updateFileInput }), _jsx("input", { id: folderInputId, type: "file", multiple: true, className: "sr-only", onChange: updateFileInput, ...directoryInputProps }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md bg-[var(--status-running-bg)] text-[var(--status-running-fg)]", children: selectedFile ? _jsx(FileText, { className: "size-5" }) : _jsx(Upload, { className: "size-5" }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-[13.5px] font-semibold", children: selectedFile ? getUploadFilePath(selectedFile) : t('datasets.upload.chooseFile') }), selectedFile && (_jsxs("span", { className: "font-mono text-[11px] text-muted-foreground", children: [formatFileSize(selectedFile.size), " \u00B7 ", selectedFile.type || t('datasets.upload.unknownType')] })), parsedFile && (_jsxs("span", { className: "status-running ml-auto inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium", children: [_jsx("span", { className: "dot-running size-1.5 rounded-full" }), t('datasets.upload.parsed')] }))] }), _jsx("div", { className: "mt-0.5 font-mono text-[11.5px] text-muted-foreground", children: parsedFile
@@ -403,11 +601,9 @@ export function DatasetUploadPage({ projectId }) {
                                                                                 ? t('datasets.upload.uploadReady')
                                                                                 : isDragOver
                                                                                     ? t('datasets.upload.dropHere')
-                                                                                    : t('datasets.upload.waitingForFile') }), _jsxs("div", { className: "flex items-center gap-2 text-[11.5px]", children: [_jsx("label", { className: "cursor-pointer text-muted-foreground hover:text-foreground", htmlFor: fileInputId, children: selectedFile ? t('datasets.action.replaceFile') : t('datasets.upload.browse') }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("label", { className: "cursor-pointer text-muted-foreground hover:text-foreground", htmlFor: folderInputId, children: t('datasets.upload.browseFolder') })] })] })] })] })] }), parseError && (_jsxs("div", { className: "flex gap-2 rounded-md border border-destructive/35 bg-destructive/10 p-3 text-[12px] text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), _jsx("div", { children: t(parseErrorKey) })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: t('datasets.upload.supportedFormats') }), FORMAT_CHIPS.map((format) => (_jsx("span", { className: "inline-flex rounded-[5px] border bg-muted px-2 py-0.5 font-mono text-[11px]", children: format }, format)))] })] }) }), _jsx(Section, { number: 2, title: t('datasets.upload.basicInfo'), hint: t('datasets.upload.basicInfoHint'), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "mb-1.5 block text-xs font-medium", children: [t('datasets.upload.name'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", value: datasetName, onChange: (event) => setDatasetName(event.target.value), placeholder: "risk-eval-v4" }), _jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: t('datasets.upload.nameHelp') })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-xs font-medium", children: t('datasets.upload.description') }), _jsx("textarea", { className: "min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", value: description, onChange: (event) => setDescription(event.target.value), placeholder: t('datasets.upload.descriptionPlaceholder') })] })] }) }), _jsx(Section, { number: 3, title: t('datasets.upload.previewAndMapping'), hint: parsedFile
+                                                                                    : t('datasets.upload.waitingForFile') }), _jsxs("div", { className: "flex items-center gap-2 text-[11.5px]", children: [_jsx("label", { className: "cursor-pointer text-muted-foreground hover:text-foreground", htmlFor: fileInputId, children: selectedFile ? t('datasets.action.replaceFile') : t('datasets.upload.browse') }), _jsx("span", { className: "text-muted-foreground", children: "\u00B7" }), _jsx("label", { className: "cursor-pointer text-muted-foreground hover:text-foreground", htmlFor: folderInputId, children: t('datasets.upload.browseFolder') })] })] })] })] })] }), parseError && (_jsxs("div", { className: "flex gap-2 rounded-md border border-destructive/35 bg-destructive/10 p-3 text-[12px] text-destructive", children: [_jsx(AlertTriangle, { className: "mt-0.5 size-4 shrink-0" }), _jsx("div", { children: t(parseErrorKey) })] })), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: t('datasets.upload.supportedFormats') }), _jsx(UploadLimitInfoIcon, { rawMaxBytes: rawImportCapabilities?.maxBytes ?? DEFAULT_RAW_UPLOAD_MAX_BYTES }), FORMAT_CHIPS.map((format) => (_jsx("span", { className: "inline-flex rounded-[5px] border bg-muted px-2 py-0.5 font-mono text-[11px]", children: format }, format)))] }), _jsx(ImageSampleDownloads, {})] }) }), _jsx(Section, { number: 2, title: t('datasets.upload.basicInfo'), hint: t('datasets.upload.basicInfoHint'), children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsxs("label", { className: "mb-1.5 block text-xs font-medium", children: [t('datasets.upload.name'), " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx("input", { className: "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", value: datasetName, onChange: (event) => setDatasetName(event.target.value), placeholder: "risk-eval-v4" }), _jsx("div", { className: "mt-1 text-[11px] text-muted-foreground", children: t('datasets.upload.nameHelp') })] }), _jsxs("div", { children: [_jsx("label", { className: "mb-1.5 block text-xs font-medium", children: t('datasets.upload.description') }), _jsx("textarea", { className: "min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", value: description, onChange: (event) => setDescription(event.target.value), placeholder: t('datasets.upload.descriptionPlaceholder') })] })] }) }), _jsx(Section, { number: 3, title: t('datasets.upload.previewAndMapping'), hint: parsedFile
                                     ? `${parsedFile.columns.length} ${t('datasets.detail.fields')} · ${sampleCountLabel}`
-                                    : t('datasets.upload.previewAndMappingHint'), className: "xl:col-span-2", children: !parsedFile ? (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 p-8 text-center text-sm text-muted-foreground", children: t('datasets.upload.noPreview') })) : (_jsxs("div", { className: "-m-4", children: [_jsxs("div", { className: "border-b", children: [_jsxs("div", { className: "flex flex-col gap-2 bg-muted/30 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold", children: t('datasets.upload.samplePreview') }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: t('datasets.upload.samplePreviewHint') })] }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: t('datasets.upload.fieldRoleHint') })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[880px] text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b bg-muted/60 text-left text-xs font-medium text-muted-foreground", children: parsedFile.columns.map((column) => (_jsx("th", { className: cn('px-3 py-3', !selectedFields[column] && 'opacity-45'), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: column }), selectedFields[column] ? (_jsx(RoleArrowLabel, { role: fieldRoles[column] ?? 'metadata' })) : (_jsxs("span", { className: "font-mono text-[10px] font-normal text-muted-foreground", children: ['->', " ", t('datasets.upload.notImported')] }))] }) }, column))) }) }), _jsx("tbody", { children: previewRows.map((row, index) => (_jsx("tr", { className: "border-b last:border-b-0 hover:bg-muted/35", children: parsedFile.columns.map((column) => (_jsx("td", { className: "max-w-[280px] truncate px-3 py-3 font-mono text-[12px]", children: getDisplayValue(row[column]) }, column))) }, index))) })] }) }), _jsxs("div", { className: "flex items-center justify-between border-t px-4 py-2.5 text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", "aria-label": t('common.previousPage'), disabled: true, children: _jsx(ChevronLeft, { className: "size-3.5" }) }), _jsxs("span", { className: "font-mono", children: ["1-", previewRows.length, ' ', isLargeFile
-                                                                            ? `· ${t('datasets.upload.previewPrefixOnly')}`
-                                                                            : `/ ${parsedFile.samples.length}`] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", "aria-label": t('common.nextPage'), disabled: true, children: _jsx(ChevronRight, { className: "size-3.5" }) })] }), _jsxs("span", { className: "font-mono text-[11.5px]", children: [sampleCountLabel, " \u00B7 ", selectedColumns.length, ' ', t('datasets.detail.fields'), ' ', selectedColumns.length > 0
+                                    : t('datasets.upload.previewAndMappingHint'), className: "xl:col-span-2", children: !parsedFile ? (_jsx("div", { className: "rounded-md border border-dashed bg-muted/30 p-8 text-center text-sm text-muted-foreground", children: t('datasets.upload.noPreview') })) : (_jsxs("div", { className: "-m-4", children: [_jsxs("div", { className: "border-b", children: [_jsxs("div", { className: "flex flex-col gap-2 bg-muted/30 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold", children: t('datasets.upload.samplePreview') }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: t('datasets.upload.samplePreviewHint') })] }), _jsx("span", { className: "font-mono text-[11px] text-muted-foreground", children: t('datasets.upload.fieldRoleHint') })] }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[880px] text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b bg-muted/60 text-left text-xs font-medium text-muted-foreground", children: parsedFile.columns.map((column) => (_jsx("th", { className: cn('px-3 py-3', !selectedFields[column] && 'opacity-45'), children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { children: column }), selectedFields[column] ? (_jsx(RoleArrowLabel, { role: fieldRoles[column] ?? 'metadata' })) : (_jsxs("span", { className: "font-mono text-[10px] font-normal text-muted-foreground", children: ['->', " ", t('datasets.upload.notImported')] }))] }) }, column))) }) }), _jsx("tbody", { children: previewRows.map((row, index) => (_jsx("tr", { className: "border-b last:border-b-0 hover:bg-muted/35", children: parsedFile.columns.map((column) => (_jsx("td", { className: "max-w-[280px] truncate px-3 py-3 font-mono text-[12px]", children: getDisplayValue(row[column]) }, column))) }, index))) })] }) }), _jsxs("div", { className: "flex items-center justify-between border-t px-4 py-2.5 text-xs text-muted-foreground", children: [_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", "aria-label": t('common.previousPage'), disabled: true, children: _jsx(ChevronLeft, { className: "size-3.5" }) }), _jsxs("span", { className: "font-mono", children: ["1-", previewRows.length, ' ', isLargeFile ? `· ${t('datasets.upload.previewPrefixOnly')}` : `/ ${parsedFile.samples.length}`] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7", "aria-label": t('common.nextPage'), disabled: true, children: _jsx(ChevronRight, { className: "size-3.5" }) })] }), _jsxs("span", { className: "font-mono text-[11.5px]", children: [sampleCountLabel, " \u00B7 ", selectedColumns.length, " ", t('datasets.detail.fields'), ' ', selectedColumns.length > 0
                                                                     ? t('datasets.upload.readyToImport')
                                                                     : t('datasets.upload.noSelectedFields')] })] })] }), _jsxs("div", { children: [_jsxs("div", { className: "flex flex-col gap-2 bg-muted/30 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold", children: t('datasets.upload.fieldMapping') }), _jsx("span", { className: "text-[11px] text-muted-foreground", children: t('datasets.upload.fieldMappingHint') })] }), _jsxs("span", { className: "font-mono text-[11px] text-muted-foreground", children: [t('datasets.upload.selectedFields'), ": ", selectedColumns.length, " / ", parsedFile.columns.length] }), _jsx("div", { className: "flex flex-wrap items-center gap-1.5", children: ROLE_OPTIONS.map((option) => (_jsx(RolePill, { role: option.role }, option.role))) })] }), _jsxs("div", { className: "grid grid-cols-[44px_96px_minmax(0,1fr)_minmax(0,1.2fr)_200px] border-t bg-muted/60 px-4 py-2.5 text-xs font-medium text-muted-foreground", children: [_jsx("div", { children: "#" }), _jsx("div", { children: t('datasets.upload.importField') }), _jsx("div", { children: t('datasets.upload.originalColumn') }), _jsx("div", { children: t('datasets.upload.firstRow') }), _jsx("div", { children: t('datasets.upload.role') })] }), parsedFile.columns.map((column, index) => (_jsxs("div", { className: cn('grid grid-cols-[44px_96px_minmax(0,1fr)_minmax(0,1.2fr)_200px] items-center border-t px-4 py-3 text-sm', !selectedFields[column] && 'bg-muted/25 text-muted-foreground'), children: [_jsx("span", { className: "flex size-6 items-center justify-center rounded bg-muted font-mono text-[11px] text-muted-foreground", children: index + 1 }), _jsxs("label", { className: "inline-flex items-center gap-2 text-xs font-medium", children: [_jsx("input", { type: "checkbox", checked: selectedFields[column] ?? false, onChange: (event) => setSelectedFields((current) => ({
                                                                         ...current,
@@ -415,7 +611,7 @@ export function DatasetUploadPage({ projectId }) {
                                                                     })), className: "size-4 accent-primary", "aria-label": `${t('datasets.upload.importField')}: ${column}` }), selectedFields[column] ? t('datasets.upload.importField') : t('datasets.upload.notImported')] }), _jsx("div", { className: "min-w-0", children: _jsx("div", { className: "truncate font-mono text-[12.5px] font-semibold", children: column }) }), _jsx("div", { className: "truncate rounded-md bg-muted/45 px-2 py-1 font-mono text-[11.5px] text-muted-foreground", children: getDisplayValue(parsedFile.samples[0]?.[column]) }), _jsx("select", { value: fieldRoles[column] ?? 'metadata', onChange: (event) => setFieldRoles((current) => normalizeExpectedRoles({
                                                                 ...current,
                                                                 [column]: event.target.value,
-                                                            }, column)), disabled: !selectedFields[column], className: "h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `${t('datasets.upload.role')}: ${column}`, children: ROLE_OPTIONS.map((option) => (_jsx("option", { value: option.role, children: t(option.labelKey) }, option.role))) })] }, column)))] })] })) })] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 z-20 border-t bg-background/95 px-4 py-3 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/75 md:left-[var(--sidebar-width)]", children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1440px] flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "min-w-0 truncate font-mono text-[11.5px] text-muted-foreground", children: parsedFile ? (_jsxs("span", { children: [sampleCountLabel, " \u00B7 ", selectedColumns.length, ' ', t('datasets.detail.fields'), " \u00B7", ' ', selectedColumns.length > 0
+                                                            }, column)), disabled: !selectedFields[column], className: "h-8 rounded-md border bg-background px-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", "aria-label": `${t('datasets.upload.role')}: ${column}`, children: ROLE_OPTIONS.map((option) => (_jsx("option", { value: option.role, children: t(option.labelKey) }, option.role))) })] }, column)))] })] })) })] })] }), _jsx("div", { className: "fixed bottom-0 left-0 right-0 z-20 border-t bg-background/95 px-4 py-3 shadow-lg backdrop-blur supports-[backdrop-filter]:bg-background/75 md:left-[var(--sidebar-width)]", children: _jsxs("div", { className: "mx-auto flex w-full max-w-[1440px] flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "min-w-0 truncate font-mono text-[11.5px] text-muted-foreground", children: parsedFile ? (_jsxs("span", { children: [sampleCountLabel, " \u00B7 ", selectedColumns.length, " ", t('datasets.detail.fields'), " \u00B7", ' ', selectedColumns.length > 0
                                         ? t('datasets.upload.readyToImport')
                                         : t('datasets.upload.noSelectedFields')] })) : (_jsx("span", { children: t('datasets.upload.waitingForFile') })) }), _jsxs("div", { className: "flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row sm:items-center", children: [_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "h-9 w-full sm:w-auto", children: _jsx(Link, { href: `/datasets`, children: t('common.cancel') }) }), _jsxs(Button, { type: "button", size: "sm", className: "h-9 w-full sm:w-auto", disabled: !canImport, "aria-busy": isSubmitting, onClick: () => void importDataset(), children: [isSubmitting ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(Check, { className: "size-4" }), importButtonLabel] })] })] }) }), _jsx(Dialog, { open: leaveDialogOpen, onOpenChange: (open) => {
                     if (!open)