@manta-eu/react 0.8.1 → 0.9.0

package/dist/shared/graph-derived-queries.js

@@ -1,4 +1,4 @@
-import { useActionPlanByIriQuery, useActionPlanDiffQuery, useActionPlanRulesQuery, useActionPlanRunHistoryQuery, useActionPlanSamplesQuery, useActionPlansQuery, useConversationStartersQuery, useCoverageRulesQuery, useCurrentFactValueQuery, useExplainFactQuery, useGetActionPlansSummaryQuery, useMemoriesQuery, useMemorySchemasQuery, useNodePropertiesQuery, useNodeRelationshipsQuery, useRulesQuery, useShaclShapesQuery, useSparqlQueryQuery, useUserPreferencesQuery, useValidateActionPlanQuery, } from "@manta-eu/client";
+import { useActionPlanByIriQuery, useActionPlanDiffQuery, useActionPlanRulesQuery, useActionPlanRunHistoryQuery, useActionPlanSamplesQuery, useActionPlansQuery, useConversationStartersQuery, useCoverageRulesQuery, useCurrentFactValueQuery, useExplainFactQuery, useGetActionPlansSummaryQuery, useManualActionProgressQuery, useMemoriesQuery, useMemorySchemasQuery, useNodePropertiesQuery, useNodeRelationshipsQuery, useRulesQuery, useShaclShapesQuery, useSparqlQueryQuery, useUserPreferencesQuery, useValidateActionPlanQuery, } from "@manta-eu/client";
 import { invalidateQueries } from "#lib/tanstack-query";
 // Queries whose resolver reads the active datastore's knowledge graph, so any graph write can change them.
 export const graphDerivedQueries = [
@@ -13,6 +13,7 @@ export const graphDerivedQueries = [
     useCurrentFactValueQuery,
     useExplainFactQuery,
     useGetActionPlansSummaryQuery,
+    useManualActionProgressQuery,
     useMemoriesQuery,
     useMemorySchemasQuery,
     useNodePropertiesQuery,

package/dist/shared/graph-derived-queries.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-derived-queries.js","sourceRoot":"","sources":["../../src/shared/graph-derived-queries.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,mBAAmB,EACnB,6BAA6B,EAC7B,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAwB,MAAM,qBAAqB,CAAC;AAE9E,2GAA2G;AAC3G,MAAM,CAAC,MAAM,mBAAmB,GAAsB;IACpD,uBAAuB;IACvB,sBAAsB;IACtB,uBAAuB;IACvB,4BAA4B;IAC5B,yBAAyB;IACzB,mBAAmB;IACnB,4BAA4B;IAC5B,qBAAqB;IACrB,wBAAwB;IACxB,mBAAmB;IACnB,6BAA6B;IAC7B,gBAAgB;IAChB,qBAAqB;IACrB,sBAAsB;IACtB,yBAAyB;IACzB,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,uBAAuB;IACvB,0BAA0B;CAC3B,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,6BAA6B,CAAC,WAAwB;IAC1E,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC,GAAG,mBAAmB,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;AACpG,CAAC"}
+{"version":3,"file":"graph-derived-queries.js","sourceRoot":"","sources":["../../src/shared/graph-derived-queries.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,sBAAsB,EACtB,uBAAuB,EACvB,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,4BAA4B,EAC5B,qBAAqB,EACrB,wBAAwB,EACxB,mBAAmB,EACnB,6BAA6B,EAC7B,4BAA4B,EAC5B,gBAAgB,EAChB,qBAAqB,EACrB,sBAAsB,EACtB,yBAAyB,EACzB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACnB,uBAAuB,EACvB,0BAA0B,GAC3B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAwB,MAAM,qBAAqB,CAAC;AAE9E,2GAA2G;AAC3G,MAAM,CAAC,MAAM,mBAAmB,GAAsB;IACpD,uBAAuB;IACvB,sBAAsB;IACtB,uBAAuB;IACvB,4BAA4B;IAC5B,yBAAyB;IACzB,mBAAmB;IACnB,4BAA4B;IAC5B,qBAAqB;IACrB,wBAAwB;IACxB,mBAAmB;IACnB,6BAA6B;IAC7B,4BAA4B;IAC5B,gBAAgB;IAChB,qBAAqB;IACrB,sBAAsB;IACtB,yBAAyB;IACzB,aAAa;IACb,mBAAmB;IACnB,mBAAmB;IACnB,uBAAuB;IACvB,0BAA0B;CAC3B,CAAC;AAEF,MAAM,CAAC,KAAK,UAAU,6BAA6B,CAAC,WAAwB;IAC1E,MAAM,iBAAiB,CAAC,WAAW,EAAE,CAAC,GAAG,mBAAmB,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;AACpG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manta-eu/react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "The Manta design system, knowledge-graph UI and agent components",
   "homepage": "https://developers.manta.eu",
   "keywords": [
@@ -310,6 +310,11 @@
       "types": "./dist/engine.d.ts",
       "import": "./dist/engine.js"
     },
+    "./file-dropzone": {
+      "manta-source": "./src/components/file-dropzone/index.tsx",
+      "types": "./dist/components/file-dropzone/index.d.ts",
+      "import": "./dist/components/file-dropzone/index.js"
+    },
     "./filter-sheet": {
       "manta-source": "./src/components/filter-sheet/index.tsx",
       "types": "./dist/components/filter-sheet/index.d.ts",
@@ -721,6 +726,11 @@
       "types": "./dist/routes/activity/format.d.ts",
       "import": "./dist/routes/activity/format.js"
     },
+    "./routes/data-collection": {
+      "manta-source": "./src/routes/data-collection/index.tsx",
+      "types": "./dist/routes/data-collection/index.d.ts",
+      "import": "./dist/routes/data-collection/index.js"
+    },
     "./routes/data-explorer": {
       "manta-source": "./src/routes/data-explorer/index.tsx",
       "types": "./dist/routes/data-explorer/index.d.ts",
@@ -1137,14 +1147,14 @@
     "tailwindcss-animate": "^1.0.7",
     "ts-pattern": "^5.9.0",
     "usehooks-ts": "^3.1.1",
-    "zod": "^4.5.0",
+    "zod": "^4.6.7",
     "zustand": "^5.0.2",
-    "@manta-eu/auth": "0.8.1",
-    "@manta-eu/client": "0.8.1",
-    "@manta-eu/lib": "0.8.1",
-    "@manta-eu/rdf-lib": "0.8.1",
-    "@manta-eu/datalog-parser": "0.8.1",
-    "@manta-eu/ldo": "0.8.1"
+    "@manta-eu/auth": "0.9.0",
+    "@manta-eu/client": "0.9.0",
+    "@manta-eu/datalog-parser": "0.9.0",
+    "@manta-eu/ldo": "0.9.0",
+    "@manta-eu/lib": "0.9.0",
+    "@manta-eu/rdf-lib": "0.9.0"
   },
   "peerDependencies": {
     "@ulb-darmstadt/shacl-form": "^2.1.1-rc1",
@@ -1177,10 +1187,11 @@
     "storybook": "^10.6.4",
     "tailwindcss": "^4.3.3",
     "tsc-alias": "^1.9.5",
+    "tsx": "^4.21.0",
     "typescript": "^7.0.2",
     "uuid": "^13.0.0",
     "vite": "^8.3.5",
-    "vitest": "^4.1.8",
+    "vitest": "~5.0.5",
     "@manta-eu/oxlint-config": "0.1.0"
   },
   "imports": {
@@ -1202,6 +1213,7 @@
   "scripts": {
     "build": "rimraf dist && postcss src/globals.css -o dist/globals.css && tsc --project tsconfig.build.json && tsc-alias --project tsconfig.build.json --resolve-full-paths",
     "build-storybook": "NODE_OPTIONS=\"$NODE_OPTIONS --max-old-space-size=6144\" storybook build",
+    "build-storybook:public": "NODE_OPTIONS=\"$NODE_OPTIONS --max-old-space-size=6144\" storybook build -c .storybook-public -o storybook-public",
     "lint": "oxlint --type-aware --report-unused-disable-directives-severity=warn .",
     "storybook": "storybook dev -p 6007",
     "test": "vitest --run",

package/src/app-subpaths.json

@@ -109,6 +109,7 @@
   "./routes/activity/detail/LazyMount",
   "./routes/activity/detail/timeline",
   "./routes/activity/format",
+  "./routes/data-collection",
   "./routes/data-explorer",
   "./routes/data-explorer/namespaces",
   "./routes/datastores",

package/src/components/chart/ForecastLegend.tsx

@@ -32,20 +32,22 @@ export function forecastLegendItems(source: LegendSource): ForecastLegendItem[]
     hasProjection,
     legendLabels,
   } = source;
-  const withoutItems = [...new Set(withoutLabels)].map(
-    (label): ForecastLegendItem => ({ label, color: withoutColor, kind: "thin-line" }),
-  );
+  const withoutItems = [...new Set(withoutLabels)].map((label): ForecastLegendItem => ({
+    label,
+    color: withoutColor,
+    kind: "thin-line",
+  }));
   const oneGainColor = new Set(gains.map((gain) => gain.color)).size === 1;
-  const gainItems = (oneGainColor ? gains.slice(0, 1) : gains).map(
-    (gain): ForecastLegendItem => ({
-      label: oneGainColor ? gainLabel : `${gainLabel} · ${gain.metric}`,
-      color: gain.color,
-      kind: "fill",
-    }),
-  );
-  const betweenItems = betweenLabels.map(
-    (label): ForecastLegendItem => ({ label, color: firstColor, kind: "faint-fill" }),
-  );
+  const gainItems = (oneGainColor ? gains.slice(0, 1) : gains).map((gain): ForecastLegendItem => ({
+    label: oneGainColor ? gainLabel : `${gainLabel} · ${gain.metric}`,
+    color: gain.color,
+    kind: "fill",
+  }));
+  const betweenItems = betweenLabels.map((label): ForecastLegendItem => ({
+    label,
+    color: firstColor,
+    kind: "faint-fill",
+  }));
   if (metrics.length > 1) {
     return [
       ...metrics.map((metric): ForecastLegendItem => ({ label: metric.label, color: metric.color, kind: "line" })),

package/src/components/chart/forecast-model.ts

@@ -104,14 +104,12 @@ export function buildForecastModel(input: ModelInput) {
     config: Object.fromEntries(
       [...metrics, ...withPlans.map((entry) => entry.without)].map((line) => [line.key, { label: line.label }]),
     ) satisfies ChartConfig,
-    hoverMetrics: metrics.map(
-      (metric): ForecastHoverMetric => ({
-        key: metric.key,
-        label: metric.label,
-        lowerIsBetter: metric.lowerIsBetter === true,
-        ...(isPresent(metric.withoutPlans) ? { withoutKey: metric.withoutPlans.key } : {}),
-      }),
-    ),
+    hoverMetrics: metrics.map((metric): ForecastHoverMetric => ({
+      key: metric.key,
+      label: metric.label,
+      lowerIsBetter: metric.lowerIsBetter === true,
+      ...(isPresent(metric.withoutPlans) ? { withoutKey: metric.withoutPlans.key } : {}),
+    })),
     legendItems: forecastLegendItems({
       metrics: metrics.map((metric, index) => ({ label: metric.label, color: metricColor(metric, index) })),
       withoutLabels: withPlans.map((entry) => entry.without.label),

package/src/components/chat-view/Chat.tsx

@@ -50,7 +50,7 @@ import { useSelectedModel } from "#hooks/useSelectedModel";
 import { isDevBuild } from "#lib/build-config";
 import type { ChatDraft, CopilotMenuDefaults, Datastore, PageContext, User } from "#lib/chat-types";
 import { findLatestShowcase } from "#lib/find-latest-showcase";
-import { useChatUpload } from "#lib/hooks/useChatUpload";
+import { useFileUpload } from "#lib/hooks/useFileUpload";
 import { planStatusLabel } from "#lib/plan-status-label";
 import { cn } from "#lib/utils";
 import { ActiveChatProvider, useActiveChatConnection } from "#providers/ActiveChatProvider";
@@ -360,7 +360,7 @@ function ChatContent(props: ChatContentProps) {
 
   const toolsUsedInSession = useRef(new Set<string>());
 
-  const { uploadFiles, isUploading, progress: uploadProgress } = useChatUpload();
+  const { uploadFiles, isUploading, progress: uploadProgress } = useFileUpload();
 
   const beginAssistantTurn = useCallback(() => {
     turnKeyRef.current += 1;

package/src/components/file-dropzone/index.tsx

@@ -0,0 +1,165 @@
+import { maxUploadBytes } from "@manta-eu/client/shared/upload";
+import { fileIdentityKey } from "@manta-eu/lib/file";
+import { humanBytes } from "@manta-eu/lib/humanize";
+import { isPresent } from "@manta-eu/lib/present";
+import { FileText, UploadCloud } from "lucide-react";
+import { useRef, useState, type ChangeEvent, type DragEvent } from "react";
+import { Progress } from "#components/progress/index";
+import { cn } from "#style";
+
+export type RejectedDrop = {
+  file: File;
+  reason: string;
+};
+
+export function partitionDroppedFiles(files: readonly File[], maxFileSize: number) {
+  const accepted: File[] = [];
+  const rejected: RejectedDrop[] = [];
+
+  for (const file of files) {
+    if (file.size === 0) rejected.push({ file, reason: "File is empty" });
+    else if (file.size > maxFileSize) rejected.push({ file, reason: `File exceeds ${humanBytes(maxFileSize)}` });
+    else accepted.push(file);
+  }
+
+  return { accepted, rejected };
+}
+
+function hasFiles(dataTransfer: DataTransfer | null) {
+  return dataTransfer?.types.includes("Files") ?? false;
+}
+
+export type FileDropzoneProps = {
+  onFiles: (files: File[]) => void;
+  onRejected?: (rejected: RejectedDrop[]) => void;
+  disabled?: boolean;
+  maxFileSize?: number;
+  title?: string;
+  description?: string;
+  className?: string;
+};
+
+export function FileDropzone(props: FileDropzoneProps) {
+  const {
+    onFiles,
+    onRejected,
+    disabled = false,
+    maxFileSize = maxUploadBytes,
+    title = "Drop files here",
+    description,
+    className,
+  } = props;
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  function handleFiles(files: File[]) {
+    const { accepted, rejected } = partitionDroppedFiles(files, maxFileSize);
+
+    if (isPresent(rejected)) onRejected?.(rejected);
+    if (isPresent(accepted)) onFiles(accepted);
+  }
+
+  function handleDragOver(event: DragEvent<HTMLButtonElement>) {
+    if (disabled || !hasFiles(event.dataTransfer)) return;
+
+    event.preventDefault();
+    setIsDragging(true);
+  }
+
+  function handleDragLeave(event: DragEvent<HTMLButtonElement>) {
+    if (event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget)) return;
+
+    setIsDragging(false);
+  }
+
+  function handleDrop(event: DragEvent<HTMLButtonElement>) {
+    event.preventDefault();
+    setIsDragging(false);
+
+    if (disabled) return;
+
+    handleFiles(Array.from(event.dataTransfer.files));
+  }
+
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    handleFiles(Array.from(event.target.files ?? []));
+    event.target.value = "";
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={() => inputRef.current?.click()}
+        onDragEnter={handleDragOver}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        data-dragging={isDragging}
+        className={cn(
+          "flex min-h-56 w-full flex-col items-center justify-center gap-3 rounded-3xl border-2 border-dashed px-6 py-10",
+          "border-muted-border bg-faint text-center outline-none transition-colors",
+          "hover:border-accent-foreground/60 focus-visible:ring-2 focus-visible:ring-active-border/50",
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          isDragging && "border-accent-foreground/80 bg-accent-foreground/[0.04]",
+          className,
+        )}
+      >
+        <UploadCloud className="size-8 text-accent-foreground" />
+        <span className="typography-body-medium text-default-foreground">{title}</span>
+        <span className="typography-small text-muted-foreground">
+          or <span className="text-primary underline underline-offset-2">browse your computer</span>
+        </span>
+        <span className="typography-caption text-muted-foreground">
+          {description ?? `Any file type, up to ${humanBytes(maxFileSize)} each`}
+        </span>
+      </button>
+
+      <input
+        ref={inputRef}
+        type="file"
+        multiple
+        hidden
+        disabled={disabled}
+        onChange={handleChange}
+        data-testid="file-dropzone-input"
+      />
+    </>
+  );
+}
+
+export type UploadProgressListProps = {
+  files: readonly File[];
+  progress: Record<string, number>;
+  className?: string;
+};
+
+export function UploadProgressList(props: UploadProgressListProps) {
+  const { files, progress, className } = props;
+
+  if (!isPresent(files)) return null;
+
+  return (
+    <ul className={cn("flex flex-col gap-2", className)} aria-label="Uploads in progress">
+      {files.map((file) => {
+        const percent = progress[fileIdentityKey(file)] ?? 0;
+
+        return (
+          <li
+            key={fileIdentityKey(file)}
+            className="flex items-center gap-3 rounded-lg border border-muted-border px-3 py-2"
+          >
+            <FileText className="size-4 shrink-0 text-muted-foreground" />
+            <span className="typography-small min-w-0 flex-1 truncate text-default-foreground">{file.name}</span>
+            <Progress value={percent} size="sm" className="w-24 shrink-0 sm:w-40" aria-label={`${file.name} upload`} />
+            <span className="typography-caption w-10 shrink-0 text-right tabular-nums text-muted-foreground">
+              {percent}%
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/planning/plan-detail-utils.tsx

@@ -109,6 +109,7 @@ export function formatIntegration(integration: GQLIntegration | null): string {
     .with(GQLIntegration.Meta, () => "Meta")
     .with(GQLIntegration.Google, () => "Google")
     .with(GQLIntegration.GoogleAnalytics, () => "Google Analytics")
+    .with(GQLIntegration.GoogleMerchantCenter, () => "Merchant Center")
     .with(GQLIntegration.Linkedin, () => "LinkedIn")
     .with(GQLIntegration.MicrosoftAds, () => "Microsoft Ads")
     .with(GQLIntegration.Shopify, () => "Shopify")
@@ -126,6 +127,7 @@ export function integrationToChannel(integration: GQLIntegration): Channel | nul
     [GQLIntegration.Meta]: "META",
     [GQLIntegration.Google]: "GOOGLE_ADS",
     [GQLIntegration.GoogleAnalytics]: null,
+    [GQLIntegration.GoogleMerchantCenter]: null,
     [GQLIntegration.Linkedin]: null,
     [GQLIntegration.MicrosoftAds]: null,
     [GQLIntegration.Shopify]: "SHOPIFY",

package/src/components/toast/index.tsx

@@ -71,3 +71,4 @@ const Toaster = ({ className, ...props }: ToasterProps) => {
 };
 
 export { Toaster };
+export { toast } from "sonner";

package/src/graph/NodeDetailPanel/TypeSummaryPanel.tsx

@@ -107,20 +107,18 @@ function buildInstanceColumns(args: BuildInstanceColumnsArgs): ColumnDef<SampleI
   }
 
   columns.push(
-    ...previewKeys.map(
-      (key): ColumnDef<SampleInstance> => ({
-        id: `preview:${key}`,
-        header: titleCase(key),
-        meta: denseCellMeta,
-        cell: ({ row }) => {
-          const value = propertyValue(row.original, key);
-          if (!isPresent(value)) return null;
-          return (
-            <span className="typography-tiny block truncate text-muted-foreground">{formatDisplayValue(value)}</span>
-          );
-        },
-      }),
-    ),
+    ...previewKeys.map((key): ColumnDef<SampleInstance> => ({
+      id: `preview:${key}`,
+      header: titleCase(key),
+      meta: denseCellMeta,
+      cell: ({ row }) => {
+        const value = propertyValue(row.original, key);
+        if (!isPresent(value)) return null;
+        return (
+          <span className="typography-tiny block truncate text-muted-foreground">{formatDisplayValue(value)}</span>
+        );
+      },
+    })),
   );
 
   return columns;

package/src/hooks/use-sparql-construct.ts

@@ -1,4 +1,4 @@
-import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, type Query } from "@tanstack/react-query";
 import type { QueryContext } from "ldkit";
 import type { RDF } from "ldkit/rdf";
 import { withAbortSignal } from "../engine";
@@ -39,10 +39,11 @@ export type UseSparqlSelectOptions = {
   queryKey: readonly unknown[];
   enabled?: boolean;
   staleTime?: number;
+  refetchInterval?: number | false | ((query: Query<RDF.Bindings[]>) => number | false | undefined);
 };
 
 export function useSparqlSelect(config: UseSparqlSelectOptions) {
-  const { query, queryKey, enabled = true, staleTime } = config;
+  const { query, queryKey, enabled = true, staleTime, refetchInterval } = config;
   const engine = useSparqlEngine();
   const options = useSparqlOptions();
 
@@ -54,5 +55,6 @@ export function useSparqlSelect(config: UseSparqlSelectOptions) {
     },
     enabled: enabled && !!query,
     staleTime,
+    refetchInterval,
   });
 }

package/src/index.ts

@@ -23,6 +23,7 @@ export * from "./components/disabled-action-tooltip";
 export * from "./components/dropdown";
 export * from "./components/editable-text";
 export * from "./components/empty-state";
+export * from "./components/file-dropzone";
 export * from "./components/filter-sheet";
 export * from "./components/hover-media";
 export * from "./components/input";

package/src/lib/datastore-route-table.ts

@@ -24,6 +24,9 @@ export type RouteElements = {
   DataExplorerIndex?: ReactNode;
   DataExplorerRecent?: ReactNode;
   DataExplorerCoverage?: ReactNode;
+  DataExplorerFiles?: ReactNode;
+  DataExplorerIngest?: ReactNode;
+  DataCollection?: ReactNode;
   DataExplorerPrefix?: ReactNode;
   DataExplorerType?: ReactNode;
   DataEntity?: ReactNode;
@@ -72,12 +75,15 @@ export const datastoreRoutes: RouteDefinition[] = [
       { path: "/data", render: (e) => e.DataExplorerIndex || notFoundElement(e) },
       { path: "/data/recent", render: (e) => e.DataExplorerRecent || notFoundElement(e) },
       { path: "/data/coverage", render: (e) => e.DataExplorerCoverage || notFoundElement(e) },
+      { path: "/data/files", render: (e) => e.DataExplorerFiles || notFoundElement(e) },
+      { path: "/data/ingest-runs", render: (e) => e.DataExplorerIngest || notFoundElement(e) },
       { path: "/data/entity/:iri", render: (e) => e.DataEntity || notFoundElement(e) },
       { path: "/data/:prefix", render: (e) => e.DataExplorerPrefix || notFoundElement(e) },
       { path: "/data/:prefix/:type", render: (e) => e.DataExplorerType || notFoundElement(e) },
       { path: "/data/:prefix/:type/:id", render: (e) => e.DataDetail || notFoundElement(e) },
     ],
   },
+  { path: "/data-collection", render: (e) => e.DataCollection || notFoundElement(e) },
   { path: newChatPath, render: (e) => e.Chat },
   { path: "/chat/:chatId", render: (e) => e.Chat },
   { path: notFoundRoutePath, render: notFoundElement },

package/src/lib/hooks/{useChatUpload.ts → useFileUpload.ts}

@@ -21,13 +21,13 @@ export type UploadProgress = Record<string, number>;
 
 const uploadConcurrency = 6;
 
-export type UseChatUploadResult = {
+export type UseFileUploadResult = {
   uploadFiles: (files: File[]) => Promise<UploadFilesResult>;
   isUploading: boolean;
   progress: UploadProgress;
 };
 
-export function useChatUpload(): UseChatUploadResult {
+export function useFileUpload(): UseFileUploadResult {
   const { mantaClient, uploadRelay } = useMantaClient();
 
   const { mutateAsync: initiateUpload } = useInitiateUploadMutation(mantaClient);

package/src/routes/data-collection/index.tsx

@@ -0,0 +1,82 @@
+import { fileIdentityKey } from "@manta-eu/lib/file";
+import { isPresent } from "@manta-eu/lib/present";
+import { FolderUp } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { FileDropzone, UploadProgressList, type RejectedDrop } from "#components/file-dropzone/index";
+import { PageBody, PageHeader } from "#components/layouts/page/index";
+import { RouteLayout } from "#components/layouts/RouteLayout";
+import { useFileUpload } from "#lib/hooks/useFileUpload";
+import { useAuthContext } from "#providers/AuthContext";
+import { UploadedFilesSection } from "#routes/data-explorer/components/uploads/UploadsPages";
+import { useInvalidateUploads } from "#routes/data-explorer/uploads";
+
+function showRejected(rejected: RejectedDrop[]) {
+  for (const { file, reason } of rejected) toast.error(`${file.name}: ${reason}`);
+}
+
+export function DataCollectionUploader() {
+  const { uploadFiles, progress } = useFileUpload();
+  const invalidateUploads = useInvalidateUploads();
+  const [inFlight, setInFlight] = useState<File[]>([]);
+
+  async function handleFiles(files: File[]) {
+    setInFlight((current) => [...current, ...files]);
+
+    try {
+      const { uploaded, failed } = await uploadFiles(files);
+
+      for (const { file } of failed) toast.error(`${file.name} could not be uploaded. Try again.`);
+      if (isPresent(uploaded)) toast.success(`Uploaded ${uploaded.length} of ${files.length} files`);
+    } finally {
+      const done = new Set(files.map(fileIdentityKey));
+
+      setInFlight((current) => current.filter((file) => !done.has(fileIdentityKey(file))));
+      await invalidateUploads();
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <FileDropzone onFiles={(files) => void handleFiles(files)} onRejected={showRejected} />
+      <UploadProgressList files={inFlight} progress={progress} />
+    </div>
+  );
+}
+
+export function DataCollectionRoute() {
+  const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
+
+  return (
+    <RouteLayout
+      user={user}
+      datastore={datastore}
+      datastores={datastores}
+      isOperator={isOperator}
+      canSwitchDatastore={canSwitchDatastore}
+      logout={logout}
+    >
+      <PageHeader title="Data collection" icon={FolderUp} />
+      <PageBody className="px-4 py-6 sm:px-6">
+        <div className="mx-auto flex max-w-4xl flex-col gap-8">
+          <div className="flex flex-col gap-2">
+            <h2 className="typography-header text-default-foreground">Upload your sample data</h2>
+            <p className="typography-small max-w-prose text-muted-foreground">
+              Add the sample files you want to share with us. They are stored in this datastore only. Remove personal
+              data before you upload.
+            </p>
+          </div>
+
+          <DataCollectionUploader />
+
+          <section className="flex flex-col gap-3" aria-labelledby="data-collection-files">
+            <h3 id="data-collection-files" className="typography-body-medium text-default-foreground">
+              Uploaded files
+            </h3>
+            <UploadedFilesSection emptyText="Nothing uploaded yet. Files you add appear here with their status." />
+          </section>
+        </div>
+      </PageBody>
+    </RouteLayout>
+  );
+}

package/src/routes/data-explorer/components/DataExplorerLayout.tsx

@@ -4,7 +4,7 @@ import { useEffect } from "react";
 import { Outlet, useMatch } from "react-router";
 import { useDeclaredNamespaces } from "../declared-namespaces";
 import { useRailState } from "../hooks/useRailState";
-import { coveragePath, explorerPath } from "../namespaces";
+import { coveragePath, explorerPath, filesPath, ingestRunsPath } from "../namespaces";
 import { Rail } from "./Rail";
 import { RailSheet } from "./RailSheet";
 import { LoadingRows } from "./RawTriples";
@@ -31,7 +31,10 @@ export function DataExplorerLayout() {
   const { datastore, datastores, user, logout, isOperator, canSwitchDatastore } = useAuthContext();
 
   const isIndex = Boolean(useMatch(explorerPath));
-  const isFullPage = Boolean(useMatch(coveragePath));
+  const isCoverage = Boolean(useMatch(coveragePath));
+  const isFiles = Boolean(useMatch(filesPath));
+  const isIngest = Boolean(useMatch(ingestRunsPath));
+  const isFullPage = isCoverage || isFiles || isIngest;
   const railState = useRailState();
   const { isLoading: isLoadingNamespaces } = useDeclaredNamespaces();
 

package/src/routes/data-explorer/components/Rail.tsx

@@ -1,10 +1,19 @@
 import { isPresent } from "@manta-eu/lib/present";
-import { Clock, Gauge } from "lucide-react";
+import { Clock, FileUp, Gauge, Workflow } from "lucide-react";
 import { useEffect, useMemo, useRef } from "react";
 import { useMatch } from "react-router";
 import { buildClassGroups, useExplorerClasses, useInstanceCounts, useSubclassEdges } from "../classes";
 import { type RailState } from "../hooks/useRailState";
-import { coveragePath, explorerPath, isNamespaceSegment, prefixForIri, recentPath, groupKeyFor } from "../namespaces";
+import {
+  coveragePath,
+  explorerPath,
+  filesPath,
+  groupKeyFor,
+  ingestRunsPath,
+  isNamespaceSegment,
+  prefixForIri,
+  recentPath,
+} from "../namespaces";
 import { ClassTreeNodes } from "./ClassTreeNodes";
 import { NamespaceGroupRow } from "./NamespaceGroupRow";
 import { RailLink } from "./RailLink";
@@ -63,6 +72,8 @@ export function Rail(props: RailProps) {
         <SearchInput placeholder="Filter types…" value={filter} onChange={(e) => setFilter(e.target.value)} />
         <RailLink to={recentPath} icon={Clock} label="Recently modified" />
         <RailLink to={coveragePath} icon={Gauge} label="Ontology coverage" />
+        <RailLink to={filesPath} icon={FileUp} label="Files" />
+        <RailLink to={ingestRunsPath} icon={Workflow} label="Ingest runs" />
       </div>
 
       <div ref={listRef} className="min-h-0 flex-1 overflow-y-auto px-2 pb-4">