@cytario/web 2.1.8 → 2.2.0

package/app/routes/objects/objects.clientLoader.ts

@@ -0,0 +1,73 @@
+import { type ClientLoaderFunctionArgs } from "react-router";
+
+import type { BucketRouteLoaderResponse, loader } from "./objects.loader";
+import { formatTruncationMessage } from "~/utils/listingLimits";
+import { loadConnectionLevel } from "~/utils/loadConnectionLevel";
+import { CorsLikelyError } from "~/utils/signedFetch";
+
+/**
+ * Browser-side `ListObjectsV2` issued directly to S3 via SigV4-signed fetch.
+ * Server loader supplies auth + connection metadata only.
+ */
+export const clientLoader = async ({
+  request,
+  serverLoader,
+}: ClientLoaderFunctionArgs): Promise<BucketRouteLoaderResponse> => {
+  const serverData = await serverLoader<typeof loader>();
+
+  const resolved = { ...serverData, pendingClientLoad: false };
+
+  if (resolved.serverDeterminedSingleFile) {
+    return { ...resolved, nodes: [], isSingleFile: true };
+  }
+
+  try {
+    const { nodes, isCapped } = await loadConnectionLevel({
+      connectionConfig: resolved.connectionConfig,
+      credentials: resolved.credentials,
+      connectionName: resolved.connectionName,
+      urlPath: resolved.urlPath,
+      signal: request.signal,
+    });
+
+    if (nodes.length === 0) {
+      return { ...resolved, nodes: [], isSingleFile: true };
+    }
+
+    return {
+      ...resolved,
+      nodes,
+      ...(isCapped
+        ? {
+            notification: {
+              message: formatTruncationMessage(resolved.name),
+              status: "warning" as const,
+            },
+          }
+        : {}),
+    };
+  } catch (error) {
+    console.error("Error in objects clientLoader:", error);
+    if (error instanceof CorsLikelyError) {
+      return {
+        ...resolved,
+        nodes: [],
+        notification: {
+          message: `Browser was blocked from reading "${resolved.name}" — likely a CORS misconfiguration on the bucket. Re-check the bucket's CORS policy or contact your administrator.`,
+          status: "error",
+        },
+      };
+    }
+    return {
+      ...resolved,
+      nodes: [],
+      notification: {
+        message:
+          "We couldn't load the objects for this bucket. Please check your connection or try again later.",
+        status: "error",
+      },
+    };
+  }
+};
+
+clientLoader.hydrate = true;

package/app/routes/objects/objects.loader.ts

@@ -1,39 +1,49 @@
-import { _Object } from "@aws-sdk/client-s3";
 import { Credentials } from "@aws-sdk/client-sts";
 import { type LoaderFunctionArgs } from "react-router";
 
 import { ConnectionConfig } from "~/.generated/client";
 import { authContext } from "~/.server/auth/authMiddleware";
-import { getS3Client } from "~/.server/auth/getS3Client";
-import { buildDirectoryTree, TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
+import { TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
 import { type NotificationInput } from "~/components/Notification/Notification.store";
 import { getConnection } from "~/routes/connections/connections.server";
-import { getObjects } from "~/utils/getObjects";
-import { getName, getPrefix } from "~/utils/pathUtils";
+import {
+  ConnectionPrefixError,
+  getName,
+  prefixSchema,
+  resolveConnectionPrefix,
+} from "~/utils/pathUtils";
 import { checkIsPinnedPath } from "~/utils/pinnedPaths.server";
 import { isZarrPath } from "~/utils/zarrUtils";
 
-export interface BucketRouteLoaderResponse {
+/**
+ * Server-side metadata for an object-browser route. The directory listing
+ * itself runs in the browser — see `objects.clientLoader.ts`.
+ */
+export interface BucketRouteServerLoaderResponse {
   connectionName: string;
-  nodes: TreeNode[];
   bucketName: string;
-  /** URL path segment after /connections/:name/ (relative to connection root) */
+  /** URL path segment after /connections/:name/ (relative to connection root). */
   urlPath: string;
-  /** Full S3 key (connection prefix + urlPath) */
+  /** Full S3 key (connection prefix + urlPath). */
   pathName: string;
   name: string;
-  /** True when navigating to a single viewable file (not a directory listing) */
-  isSingleFile?: boolean;
-  notification?: NotificationInput;
   credentials: Credentials;
   connectionConfig: ConnectionConfig;
   isPinned: boolean;
+  /** Set when the URL points at a Zarr directory; the chunk listing is skipped. */
+  serverDeterminedSingleFile: boolean;
+  /** `true` during SSR; `clientLoader` flips it once the listing resolves. */
+  pendingClientLoad: boolean;
+}
+
+export interface BucketRouteLoaderResponse extends BucketRouteServerLoaderResponse {
+  nodes: TreeNode[];
+  /** True when the route should render the viewer rather than a directory listing. */
+  isSingleFile?: boolean;
+  notification?: NotificationInput;
 }
 
-export const loader = async ({
-  params,
-  context,
-}: LoaderFunctionArgs): Promise<BucketRouteLoaderResponse> => {
+export const loader = async ({ params, context }: LoaderFunctionArgs) => {
   const { user, credentials: connectionsCredentials } = context.get(authContext);
   const { name: connectionName } = params;
 
@@ -49,87 +59,43 @@ export const loader = async ({
   const credentials = connectionsCredentials[connectionName];
   if (!credentials) throw new Error(`No credentials for connection: ${connectionName}`);
 
-  const urlPath = params["*"] ?? "";
-  const connPrefix = connectionConfig.prefix?.replace(/\/$/, "") ?? "";
-  const pathName = connPrefix ? (urlPath ? `${connPrefix}/${urlPath}` : connPrefix) : urlPath;
-  const prefix = getPrefix(pathName);
-  const name = getName(pathName, bucketName);
+  const rawUrlPath = params["*"] ?? "";
 
-  const isPinned = await checkIsPinnedPath(user.sub, connectionName, urlPath);
+  const parsed = prefixSchema.safeParse(rawUrlPath);
+  if (!parsed.success) {
+    throw new Response(parsed.error.issues[0]?.message ?? "Invalid path", { status: 400 });
+  }
 
+  let urlPath: string;
+  let pathName: string;
   try {
-    const s3Client = await getS3Client(connectionConfig, credentials, user.sub);
-
-    // Check for zarr before listing objects — zarr directories can contain
-    // thousands of chunk files, so we skip the expensive ListObjects call.
-    if (isZarrPath(pathName)) {
-      return {
-        credentials,
-        connectionConfig,
-        isPinned,
-        name,
-        nodes: [],
-        bucketName,
-        connectionName,
-        pathName,
-        urlPath,
-        isSingleFile: true,
-      };
+    ({ urlPath, pathName } = resolveConnectionPrefix(connectionConfig.prefix, parsed.data));
+  } catch (error) {
+    if (error instanceof ConnectionPrefixError) {
+      throw new Response(error.message, { status: 400 });
     }
+    throw error;
+  }
+  const name = getName(pathName, bucketName);
 
-    const objects: Readonly<_Object>[] = await getObjects(
-      connectionConfig,
-      s3Client,
-      undefined,
-      prefix,
-    );
-
-    if (objects.length > 0) {
-      const nodes = buildDirectoryTree(objects, connectionName, prefix, urlPath);
+  const isPinned = await checkIsPinnedPath(user.sub, connectionName, urlPath);
+  const serverDeterminedSingleFile = isZarrPath(pathName);
 
-      return {
-        connectionName,
-        credentials,
-        connectionConfig,
-        name,
-        nodes,
-        bucketName,
-        urlPath,
-        pathName,
-        isPinned,
-      };
-    }
+  // SSR-safe defaults; `clientLoader` overwrites the listing fields after hydration.
+  const payload: BucketRouteLoaderResponse = {
+    connectionName,
+    bucketName,
+    urlPath,
+    pathName,
+    name,
+    credentials,
+    connectionConfig,
+    isPinned,
+    serverDeterminedSingleFile,
+    pendingClientLoad: true,
+    nodes: [],
+    isSingleFile: serverDeterminedSingleFile,
+  };
 
-    // Single file — viewer or unsupported format
-    return {
-      connectionName,
-      credentials,
-      connectionConfig,
-      name,
-      nodes: [],
-      bucketName,
-      urlPath,
-      pathName,
-      isSingleFile: true,
-      isPinned,
-    };
-  } catch (error) {
-    console.error("Error in objects loader:", error);
-    return {
-      connectionName,
-      credentials,
-      connectionConfig,
-      name,
-      nodes: [],
-      bucketName,
-      urlPath,
-      pathName,
-      isPinned,
-      notification: {
-        message:
-          "We couldn't load the objects for this bucket. Please check your connection or try again later.",
-        status: "error",
-      },
-    };
-  }
+  return payload;
 };

package/app/routes/objects/objects.route.tsx

@@ -1,14 +1,16 @@
 import { Button, EmptyState } from "@cytario/design";
 import { Ban, Bookmark, BookmarkCheck, Download } from "lucide-react";
-import { lazy, Suspense, useCallback, useEffect } from "react";
+import { lazy, Suspense, useCallback, useEffect, useRef } from "react";
 import {
   type MetaFunction,
   type ShouldRevalidateFunction,
   useFetcher,
   useLoaderData,
   useNavigate,
+  useNavigation,
 } from "react-router";
 
+import { clientLoader } from "./objects.clientLoader";
 import { type BucketRouteLoaderResponse, loader } from "./objects.loader";
 import { requestDurationMiddleware } from "~/.server/requestDurationMiddleware";
 import { getCrumbs } from "~/components/Breadcrumbs/getCrumbs";
@@ -30,19 +32,22 @@ import { getName } from "~/utils/pathUtils";
 import { constructS3Url } from "~/utils/resourceId";
 import { createSignedFetch } from "~/utils/signedFetch";
 
-// Lazy load Viewer to prevent SSR issues with client-only code
 const Viewer = lazy(() =>
   import("~/components/.client/ImageViewer/components/ImageViewer").then((module) => ({
     default: module.Viewer,
   })),
 );
 
-export { loader };
+export { clientLoader, loader };
 export type { BucketRouteLoaderResponse };
 
 export const middleware = [requestDurationMiddleware];
 
-export const meta: MetaFunction<typeof loader> = ({ loaderData }) => [
+// Response carries STS credentials — keep it out of every cache between origin
+// and browser.
+export const headers = () => ({ "Cache-Control": "no-store, private" });
+
+export const meta: MetaFunction<typeof clientLoader> = ({ loaderData }) => [
   { title: loaderData?.name ?? "Cytario" },
 ];
 
@@ -65,20 +70,9 @@ export const handle = {
   },
 };
 
-/**
- * Revalidate only when the URL actually changes. React Router's default
- * is to revalidate every active loader after any action, which on this
- * route fires the loader 1.5-3x per client-side navigation — auxiliary
- * fetchers (POST /api/recently-viewed, POST /api/pinned) fire on every
- * file view and would each trigger a full S3 listing re-run.
- *
- * Keying on URL change only also avoids a subtle trap: `formAction` is
- * populated for fetcher submissions too, not just Form submissions on
- * this route, so the obvious `if (formAction) return defaultShouldRevalidate`
- * check would re-trigger revalidation for every aux-fetcher completion.
- * This route has no mutating forms of its own, so skipping the
- * `formAction` branch is safe.
- */
+// Revalidate only on URL change. Without this, aux fetcher submissions
+// (recently-viewed, pinned) would each retrigger the S3 listing — `formAction`
+// fires for fetcher submissions too, so the usual `if (formAction)` check is unsafe.
 export const shouldRevalidate: ShouldRevalidateFunction = ({ currentUrl, nextUrl }) => {
   if (currentUrl.pathname !== nextUrl.pathname) return true;
   if (currentUrl.search !== nextUrl.search) return true;
@@ -96,13 +90,13 @@ export default function ObjectsRoute() {
     isPinned: loaderIsPinned,
     isSingleFile,
     notification,
-  } = useLoaderData<typeof loader>();
+    pendingClientLoad,
+  } = useLoaderData<typeof clientLoader>();
 
   const viewMode = useLayoutStore((state) => state.viewMode);
   const navigate = useNavigate();
   const { openModal } = useModal();
 
-  // Handle notifications from loader
   useEffect(() => {
     if (notification) {
       toastBridge.emit({
@@ -115,12 +109,16 @@ export default function ObjectsRoute() {
   const resourceId = `${connectionName}/${urlPath}`;
   const fileType = getFileType(resourceId);
 
-  // Track recently viewed files and directories (DB-backed via server action).
-  // Only track when urlPath is non-empty — the connection root itself isn't a viewable item.
-  // Server-side loader split for read path is covered by C-81.
+  // Defer the submit until navigation goes idle — submitting during hydration
+  // races RR's bulk-fetch single-fetch and trips RR issue #13873.
   const recentFetcher = useFetcher();
+  const navigation = useNavigation();
+  const lastRecentSubmit = useRef<string | null>(null);
   useEffect(() => {
     if (!urlPath) return;
+    if (navigation.state !== "idle") return;
+    if (lastRecentSubmit.current === resourceId) return;
+    lastRecentSubmit.current = resourceId;
     recentFetcher.submit(
       {
         connectionName,
@@ -130,15 +128,12 @@ export default function ObjectsRoute() {
       },
       { method: "post", action: "/api/recently-viewed" },
     );
-    // Intentionally depends only on resourceId — it is derived from connectionName + pathName,
-    // so a resourceId change guarantees the captured values are fresh. Other deps (recentFetcher,
-    // connectionName, urlPath, name, isSingleFile) are stable within the same resourceId.
+    // Other deps are stable within the same resourceId.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resourceId]);
+  }, [resourceId, navigation.state]);
 
-  // Pinning (DB-backed via server action)
   const pinFetcher = useFetcher();
-  // Optimistic isPinned: flip while the pin request is in-flight
+  // Optimistic toggle while the request is in flight.
   let isPinned = loaderIsPinned;
   if (pinFetcher.state !== "idle") {
     isPinned = pinFetcher.formMethod?.toLowerCase() === "post";
@@ -169,7 +164,6 @@ export default function ObjectsRoute() {
     }
   }, [connectionName, urlPath, isPinned, nodes, pinFetcher]);
 
-  // Show directory view when there are multiple objects
   if (nodes.length > 0) {
     return (
       <DirectoryView
@@ -200,7 +194,6 @@ export default function ObjectsRoute() {
     );
   }
 
-  // Open file viewer when a single file is selected
   if (isSingleFile) {
     const isCsv = fileType === "CSV";
     const isTabularFile = ["CSV", "Parquet", "JSON"].includes(fileType);
@@ -223,15 +216,10 @@ export default function ObjectsRoute() {
       );
     }
 
-    // SDS-CY-010401 (no format-specific branching): gate on the
-    // plugin-aware `isImageFile` predicate so any plugin-contributed
-    // format reaches `<Viewer>` once registered. Built-in OME-TIFF /
-    // OME-Zarr / TIFF entries flow through the same predicate via
-    // `STATIC_FILE_TYPES` in `app/utils/fileType.ts`.
+    // Gate on `isImageFile` so plugin-contributed formats reach `<Viewer>`
+    // without per-format branching here.
     if (isImageFile(resourceId)) {
-      // `pathName` from objects.loader is ALREADY the full S3 key (connection
-      // prefix joined with the URL splat server-side — see objects.loader.ts).
-      // Feed it directly to `constructS3Url`, which expects a full key.
+      // `pathName` already includes the connection prefix.
       const s3Url = constructS3Url(connectionConfig, pathName);
       const signedFetch = createSignedFetch(
         () => useConnectionsStore.getState().connections[connectionName]?.credentials,
@@ -264,7 +252,20 @@ export default function ObjectsRoute() {
     );
   }
 
-  // Render placeholder when no objects found
+  // Distinguish "still loading" from "loaded but empty" to avoid flashing the
+  // empty state during the SSR → hydration handoff.
+  if (pendingClientLoad) {
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        className="flex h-full items-center justify-center p-8 text-slate-500"
+      >
+        Loading…
+      </div>
+    );
+  }
+
   return (
     <EmptyState
       title="No objects found in this bucket."

package/app/routes/search.route.tsx

@@ -1,15 +1,21 @@
 import { _Object } from "@aws-sdk/client-s3";
 import { H1 } from "@cytario/design";
-import { type LoaderFunctionArgs, useLoaderData } from "react-router";
+import { useEffect } from "react";
+import { type ClientLoaderFunctionArgs, useLoaderData } from "react-router";
 
 import type { ConnectionConfig } from "~/.generated/client";
-import { authContext } from "~/.server/auth/authMiddleware";
-import { getS3Client } from "~/.server/auth/getS3Client";
 import { Section } from "~/components/Container";
 import { buildDirectoryTree, TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
 import { DirectoryTree } from "~/components/DirectoryView/DirectoryViewTree";
-import { getObjects } from "~/utils/getObjects";
+import { type NotificationInput } from "~/components/Notification/Notification.store";
+import { toastBridge, toToastVariant } from "~/toast-bridge";
+import { useConnectionsStore } from "~/utils/connectionsStore/useConnectionsStore";
+import { mapWithConcurrency } from "~/utils/limitConcurrency";
+import { listObjectsClient } from "~/utils/listObjectsClient";
 import { getPrefix } from "~/utils/pathUtils";
+import { CorsLikelyError } from "~/utils/signedFetch";
+
+const SEARCH_CONCURRENCY = 6;
 
 interface ConfigFiles {
   config: ConnectionConfig;
@@ -20,38 +26,68 @@ interface ConfigFiles {
 export interface SearchRouteLoaderResponse {
   searchQuery: string;
   nodes: TreeNode[];
+  notification?: NotificationInput;
 }
 
 export const handle = {
   breadcrumb: () => ({ label: "Search", to: "/search" }),
 };
 
-export const loader = async ({
+// Client-only loader — credentials already live in `ConnectionsStore`, so a
+// server loader would only re-ship STS material. Auth still runs via the
+// parent `protected.layout`.
+export const clientLoader = async ({
   request,
-  context,
-}: LoaderFunctionArgs): Promise<SearchRouteLoaderResponse> => {
-  const url = new URL(request.url);
-  const searchQuery = url.searchParams.get("query") ?? "";
-
-  const { user, credentials: connectionsCredentials, connectionConfigs } = context.get(authContext);
+}: ClientLoaderFunctionArgs): Promise<SearchRouteLoaderResponse> => {
+  const searchQuery = new URL(request.url).searchParams.get("query") ?? "";
+  const connections = useConnectionsStore.getState().connections;
+  const signal = request.signal;
 
-  const results: ConfigFiles[] = [];
-
-  for (const connectionConfig of connectionConfigs) {
-    const credentials = connectionsCredentials[connectionConfig.name];
-    if (!credentials) {
-      console.warn(`No credentials for connection: ${connectionConfig.name}`);
-      continue;
-    }
+  const perConnection = await mapWithConcurrency(
+    Object.values(connections),
+    SEARCH_CONCURRENCY,
+    async ({ connectionConfig: config, credentials }) => {
+      const prefix = getPrefix(config.prefix);
+      try {
+        const { contents, isCapped } = await listObjectsClient(config, credentials, {
+          query: searchQuery,
+          prefix,
+          recursive: true,
+          signal,
+        });
+        return {
+          config,
+          files: contents,
+          prefix,
+          isCapped,
+          error: false,
+          corsBlocked: false,
+        };
+      } catch (error) {
+        console.error(`Search failed for connection "${config.name}":`, error);
+        return {
+          config,
+          files: [] as _Object[],
+          prefix,
+          isCapped: false,
+          error: true,
+          corsBlocked: error instanceof CorsLikelyError,
+        };
+      }
+    },
+  );
 
-    const s3Client = await getS3Client(connectionConfig, credentials, user.sub);
-    const prefix = getPrefix(connectionConfig.prefix);
-    const files = (await getObjects(connectionConfig, s3Client, searchQuery, prefix)) ?? [];
+  const results: ConfigFiles[] = perConnection
+    .filter((r) => r.files.length > 0)
+    .map(({ config, files, prefix }) => ({ config, files, prefix }));
 
-    if (files.length > 0) {
-      results.push({ config: connectionConfig, files, prefix });
-    }
-  }
+  const cappedConnections = perConnection.filter((r) => r.isCapped).map((r) => r.config.name);
+  const failedConnections = perConnection
+    .filter((r) => r.error && !r.corsBlocked)
+    .map((r) => r.config.name);
+  const corsBlockedConnections = perConnection
+    .filter((r) => r.corsBlocked)
+    .map((r) => r.config.name);
 
   const nodes: TreeNode[] = results.map(({ config, files, prefix }) => ({
     id: `${config.name}/`,
@@ -62,11 +98,80 @@ export const loader = async ({
     children: buildDirectoryTree(files as _Object[], config.name, prefix ?? ""),
   }));
 
-  return { searchQuery, nodes };
+  const notification = buildSearchNotification(
+    cappedConnections,
+    failedConnections,
+    corsBlockedConnections,
+  );
+
+  return { searchQuery, nodes, notification };
 };
 
+function quoteJoin(names: readonly string[]): string {
+  return names.map((n) => `"${n}"`).join(", ");
+}
+
+function buildSearchNotification(
+  cappedConnections: readonly string[],
+  failedConnections: readonly string[],
+  corsBlockedConnections: readonly string[],
+): NotificationInput | undefined {
+  const hasCapped = cappedConnections.length > 0;
+  const hasFailed = failedConnections.length > 0;
+  const hasCors = corsBlockedConnections.length > 0;
+
+  if (!hasCapped && !hasFailed && !hasCors) return undefined;
+
+  if (hasCors) {
+    const parts: string[] = [
+      `Browser was blocked from reading ${quoteJoin(corsBlockedConnections)} — likely a CORS misconfiguration on the bucket. Re-check the bucket's CORS policy or contact your administrator.`,
+    ];
+    if (hasFailed) {
+      parts.push(`Search also failed for ${quoteJoin(failedConnections)}.`);
+    }
+    if (hasCapped) {
+      parts.push(
+        `Results were truncated for ${quoteJoin(cappedConnections)} — refine your query to see more matches.`,
+      );
+    }
+    return { status: "error", message: parts.join(" ") };
+  }
+
+  if (hasCapped && hasFailed) {
+    return {
+      status: "error",
+      message:
+        `Search failed for ${quoteJoin(failedConnections)}. ` +
+        `Results were also truncated for ${quoteJoin(cappedConnections)} — refine your query to see more matches.`,
+    };
+  }
+
+  if (hasFailed) {
+    return {
+      status: "error",
+      message: `Search failed for ${quoteJoin(failedConnections)} — check your connection or try again.`,
+    };
+  }
+
+  return {
+    status: "warning",
+    message: `Search results were truncated for ${quoteJoin(cappedConnections)} — refine your query to see more matches.`,
+  };
+}
+
+clientLoader.hydrate = true;
+
 export default function SearchRoute() {
-  const { searchQuery, nodes } = useLoaderData<typeof loader>();
+  const { searchQuery, nodes, notification } = useLoaderData<typeof clientLoader>();
+
+  useEffect(() => {
+    if (notification) {
+      toastBridge.emit({
+        variant: toToastVariant(notification.status ?? "info"),
+        message: notification.message,
+      });
+    }
+  }, [notification]);
 
   return (
     <Section>

package/app/routes.ts

@@ -84,10 +84,6 @@ const apiRoutes = [
     path: "/api/pinned",
     file: "routes/api/pinned.ts",
   },
-  {
-    path: "/presign/:name/*",
-    file: "routes/presign.route.tsx",
-  },
 ];
 
 export default [