@manta-eu/react 0.8.0 → 0.9.0

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/input/input-field.tsx

@@ -170,7 +170,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputArgs>(function Inpu
       inputRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

package/src/components/input/textarea.tsx

@@ -178,7 +178,7 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaArgs>(func
       textareaRef.current.value = next;
       setInternalCount(next.length);
       onChange?.({ target: textareaRef.current } as ChangeEvent<HTMLTextAreaElement>);
-      // eslint-disable-next-line no-useless-catch
+      // oxlint-disable-next-line no-useless-catch
     } catch (error) {
       throw error;
     } finally {

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/table/index.tsx

@@ -120,7 +120,6 @@ export enum SortingHandlerPlacement {
 }
 
 declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   interface ColumnMeta<TData, TValue> {
     /**
      * Placement of the sorting handler relative to the cell header

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/resolved-terms.ts

@@ -4,6 +4,7 @@ import { createTermBatcher, type TermBatcher } from "../lib/term-batcher";
 export type ResolvedTerms<T> = {
   values: Map<string, T>;
   request: (iris: string[]) => void;
+  refresh?: (iris: string[]) => void;
   // IRIs whose lookup has completed, found or not. Absent in static contexts
   // (tests), which are treated as already settled.
   settledIris?: ReadonlySet<string>;
@@ -137,6 +138,10 @@ export function useResolvedTermsState<T>(
   }, [batcher]);
 
   const request = useCallback((iris: string[]) => batcher.request(iris), [batcher]);
+  const refresh = useCallback((iris: string[]) => batcher.request(iris, { force: true }), [batcher]);
 
-  return useMemo(() => ({ values, request, settledIris, failedIris }), [values, request, settledIris, failedIris]);
+  return useMemo(
+    () => ({ values, request, refresh, settledIris, failedIris }),
+    [values, request, refresh, settledIris, failedIris],
+  );
 }

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/hooks/useAuth.ts

@@ -1,4 +1,5 @@
 import { SessionContextDocument } from "@manta-eu/client";
+import { loginStatusPollMs } from "@manta-eu/client/shared/constants";
 import { datastoreHeader } from "@manta-eu/client/shared/datastore-path";
 import { createHttpError, isHttpError } from "@manta-eu/client/shared/error-utils";
 import { isValidModelId, type MantaModelId } from "@manta-eu/client/shared/model";
@@ -189,7 +190,8 @@ export function useAuth(): UseAuthResult {
     // Keycloak's SSO session idle timeout (default 30 min) only resets when a request
     // actually reaches processMiddleware. A long WS-only chat session with no other HTTP
     // traffic would otherwise let the underlying session go idle and die silently.
-    refetchInterval: 5 * 60 * 1000,
+    // The poll also renews the access token before it expires, so it must run more often than the token lives.
+    refetchInterval: loginStatusPollMs,
     refetchIntervalInBackground: true,
   });
 

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/chat-types.ts

@@ -1,4 +1,4 @@
-/* eslint-disable import/order -- each type is imported beside the re-export it exists for, which is
+/* oxlint-disable import-js/order -- each type is imported beside the re-export it exists for, which is
    how this file is organized; they are type-only, so the positions have no runtime meaning. */
 import type { ConversationMode } from "@manta-eu/client/shared/chat-manager";
 import type { MantaModelId } from "@manta-eu/client/shared/model";

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/lib/tanstack-query.ts

@@ -1,7 +1,7 @@
 import type { QueryClient, QueryKey } from "@tanstack/react-query";
 
 export type QueryWithGetKey = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   getKey: (variables?: any) => QueryKey;
 };
 
@@ -12,7 +12,7 @@ function isQueryWithGetKey(keyLike: KeyLike): keyLike is QueryWithGetKey {
 }
 
 function getTopQueryKey(query: QueryWithGetKey): QueryKey {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   const keys = query.getKey({} as any);
   return keys.slice(0, 1);
 }

package/src/lib/term-batcher.ts

@@ -14,7 +14,7 @@ export type TermBatcherConfig<T> = {
 };
 
 export type TermBatcher = {
-  request: (iris: IRI[]) => void;
+  request: (iris: IRI[], options?: { force: boolean }) => void;
   cancel: () => void;
 };
 
@@ -98,13 +98,13 @@ export function createTermBatcher<T>(config: TermBatcherConfig<T>): TermBatcher
   }
 
   return {
-    request(iris) {
+    request(iris, options) {
       cancelled = false;
 
       const unresolvable: IRI[] = [];
 
       for (const iri of iris) {
-        if (requested.has(iri)) continue;
+        if (requested.has(iri) && !options?.force) continue;
 
         requested.add(iri);
 

package/src/lib/utils.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @manta-eu/no-direct-clsx */
+/* oxlint-disable @manta-eu/no-direct-clsx */
 import { clsx, type ClassValue } from "clsx";
 import { extendTailwindMerge } from "tailwind-merge";
 

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/DetailHeader.tsx

@@ -42,14 +42,14 @@ export function DetailHeader(props: DetailHeaderProps) {
     <div>
       {badges && <div className="mb-3 flex items-center gap-2">{badges}</div>}
 
-      <div className="flex items-start justify-between gap-4">
-        <div className="flex items-center gap-3">
-          <h2 className="typography-header wrap-break-words text-default-foreground">{title}</h2>
+      <div className="flex flex-col items-start justify-between gap-4 sm:flex-row">
+        <div className="flex min-w-0 items-center gap-3">
+          <h2 className="typography-header wrap-anywhere text-default-foreground">{title}</h2>
 
           {titleBadges}
         </div>
 
-        {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
+        {actions && <div className="flex flex-wrap items-center gap-2 sm:shrink-0">{actions}</div>}
       </div>
 
       {iri &&

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">