@oxyhq/services 22.5.0 → 22.6.1

package/lib/module/ui/hooks/useResolvedFileUrls.js

@@ -0,0 +1,157 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+/**
+ * The variant-aware batch resolver contract (`@oxyhq/core`).
+ *
+ * `getFileDownloadUrls` takes a per-file `{ fileId, variant }` list and returns
+ * a map keyed by `fileId`; ids that are denied or missing are OMITTED (never an
+ * empty string), and PRIVATE assets resolve to a working scoped-media-token
+ * stream URL. Typed here rather than `Pick<OxyServices, …>` so this file states
+ * the exact contract it depends on.
+ */
+
+/**
+ * Private-safe grid/thumbnail URL resolution.
+ *
+ * The synchronous `oxyServices.getFileDownloadUrl(id, variant)` always yields
+ * the public CDN origin (`cloud.oxy.so/<id>`), which 404s for PRIVATE assets —
+ * and uploads default to private. Thumbnails and previews therefore have to be
+ * resolved through the authenticated batch endpoint, which returns a working
+ * `/assets/:id/stream?…&mt=<scoped media token>` URL for private files.
+ *
+ * This hook resolves an ENTIRE page of files in ONE (chunked) batch request
+ * rather than N per-tile calls, and caches the result in React Query keyed by
+ * the (fileId, variant) set. `staleTime` is deliberately shorter than the
+ * server media-token TTL so a tile never renders a URL whose token has already
+ * expired.
+ *
+ * Optimistic (`temp-…` / `uploading`) entries are NEVER resolved here — an
+ * asset URL must never be built from an id the server does not yet know. Their
+ * preview comes from the locally-picked uri (see {@link fileThumbSource}).
+ */
+
+/** Server media-token lifetime we request for each resolved URL (seconds). */
+const ASSET_URL_TTL_SECONDS = 600; // 10 minutes
+/**
+ * Refresh window. Kept below {@link ASSET_URL_TTL_SECONDS} so React Query
+ * re-resolves in the background before a rendered URL's token can die.
+ */
+const ASSET_URL_STALE_MS = 5 * 60 * 1000; // 5 minutes
+const ASSET_URL_GC_MS = 30 * 60 * 1000;
+/** Server-side batch cap for `POST /assets/batch-access` — chunk beyond this. */
+const BATCH_CAP = 100;
+
+/** React Query prefix — scoped media URLs must never leak across accounts. */
+export const ASSET_DOWNLOAD_URLS_QUERY_KEY = 'assetDownloadUrls';
+
+/**
+ * True when a file is an optimistic placeholder that has not been persisted by
+ * the server yet — either its id is still the client-minted `temp-…` id, or it
+ * carries the `uploading` flag. Mirrors the `temp-` id guard precedent in
+ * `@oxyhq/core`'s `avatarUtils.updateAvatarVisibility`.
+ */
+export function isOptimisticFile(file) {
+  if (typeof file.id === 'string' && file.id.startsWith('temp-')) return true;
+  return file.metadata?.uploading === true;
+}
+
+/** Grid thumbnail variant for a file, or `undefined` when it needs no URL. */
+function thumbVariantFor(file) {
+  if (file.contentType.startsWith('video/')) return 'poster';
+  if (file.contentType.startsWith('image/')) return 'thumb';
+  return undefined;
+}
+
+/**
+ * Locally-picked preview uri stashed on an optimistic entry's metadata by the
+ * upload flow, if present.
+ */
+function localPreviewUri(file) {
+  const uri = file.metadata?.localPreviewUri;
+  return typeof uri === 'string' && uri.length > 0 ? uri : undefined;
+}
+
+/**
+ * Resolve the image source for a grid tile.
+ *
+ * - Optimistic entry → its locally-picked preview uri (never an asset URL).
+ * - Persisted entry → the private-safe URL from {@link useResolvedFileUrls},
+ *   or `undefined` while it is still resolving / was denied (tile shows a
+ *   placeholder instead of a guaranteed-404 CDN URL).
+ */
+export function fileThumbSource(file, resolved) {
+  if (isOptimisticFile(file)) {
+    return localPreviewUri(file);
+  }
+  return resolved.get(file.id);
+}
+
+/**
+ * Batch-resolve private-safe thumbnail URLs for the given files.
+ *
+ * Only image/video, non-optimistic files are resolved (documents render an
+ * icon, optimistic entries render their local preview). Returns a stable
+ * `Map<fileId, url>`; missing entries mean "not resolved yet or access denied".
+ */
+export function useResolvedFileUrls(oxyServices, files, /** Active viewer account id — media tokens are minted per user; must be in the query key. */
+viewerId) {
+  const viewerKey = viewerId ?? '';
+  const requests = useMemo(() => {
+    const list = [];
+    for (const file of files) {
+      if (isOptimisticFile(file)) continue;
+      const variant = thumbVariantFor(file);
+      if (!variant) continue;
+      list.push({
+        fileId: file.id,
+        variant
+      });
+    }
+    return list;
+  }, [files]);
+
+  // A content signature so the query key is stable across renders while the
+  // resolvable set is unchanged (the `files` array is a fresh reference every
+  // render). Sorted so ordering churn does not force a refetch.
+  const signature = useMemo(() => requests.map(r => `${r.fileId}:${r.variant ?? ''}`).sort().join('|'), [requests]);
+  const query = useQuery({
+    queryKey: [ASSET_DOWNLOAD_URLS_QUERY_KEY, viewerKey, signature],
+    enabled: requests.length > 0 && viewerKey.length > 0,
+    staleTime: ASSET_URL_STALE_MS,
+    gcTime: ASSET_URL_GC_MS,
+    // Keep previously-resolved URLs on screen while the SAME viewer's file set
+    // grows (pagination), but never carry another account's scoped media tokens
+    // across a switch — `keepPreviousData` alone would do that.
+    placeholderData: (previousData, previousQuery) => {
+      if (!previousData || !previousQuery) return undefined;
+      const prevViewer = previousQuery.queryKey[1];
+      if (prevViewer !== viewerKey) return undefined;
+      return previousData;
+    },
+    queryFn: async () => {
+      const merged = {};
+      for (let i = 0; i < requests.length; i += BATCH_CAP) {
+        const chunk = requests.slice(i, i + BATCH_CAP);
+        const urls = await oxyServices.getFileDownloadUrls(chunk, {
+          expiresIn: ASSET_URL_TTL_SECONDS
+        });
+        Object.assign(merged, urls);
+      }
+      return merged;
+    }
+  });
+  return useMemo(() => {
+    const map = new Map();
+    const data = query.data;
+    if (data) {
+      for (const [id, url] of Object.entries(data)) {
+        if (typeof url === 'string' && url.length > 0) map.set(id, url);
+      }
+    }
+    return map;
+  }, [query.data]);
+}
+//# sourceMappingURL=useResolvedFileUrls.js.map

package/lib/module/ui/hooks/useResolvedFileUrls.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","useQuery","ASSET_URL_TTL_SECONDS","ASSET_URL_STALE_MS","ASSET_URL_GC_MS","BATCH_CAP","ASSET_DOWNLOAD_URLS_QUERY_KEY","isOptimisticFile","file","id","startsWith","metadata","uploading","thumbVariantFor","contentType","undefined","localPreviewUri","uri","length","fileThumbSource","resolved","get","useResolvedFileUrls","oxyServices","files","viewerId","viewerKey","requests","list","variant","push","fileId","signature","map","r","sort","join","query","queryKey","enabled","staleTime","gcTime","placeholderData","previousData","previousQuery","prevViewer","queryFn","merged","i","chunk","slice","urls","getFileDownloadUrls","expiresIn","Object","assign","Map","data","url","entries","set"],"sourceRoot":"../../../../src","sources":["ui/hooks/useResolvedFileUrls.ts"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,QAAQ,QAAQ,uBAAuB;;AAGhD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA,MAAMC,qBAAqB,GAAG,GAAG,CAAC,CAAC;AACnC;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,CAAC;AAC1C,MAAMC,eAAe,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI;AACtC;AACA,MAAMC,SAAS,GAAG,GAAG;;AAErB;AACA,OAAO,MAAMC,6BAA6B,GAAG,mBAA4B;;AAEzE;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAACC,IAA2C,EAAW;EACrF,IAAI,OAAOA,IAAI,CAACC,EAAE,KAAK,QAAQ,IAAID,IAAI,CAACC,EAAE,CAACC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,IAAI;EAC3E,OAAOF,IAAI,CAACG,QAAQ,EAAEC,SAAS,KAAK,IAAI;AAC1C;;AAEA;AACA,SAASC,eAAeA,CAACL,IAAkB,EAAsB;EAC/D,IAAIA,IAAI,CAACM,WAAW,CAACJ,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,QAAQ;EAC1D,IAAIF,IAAI,CAACM,WAAW,CAACJ,UAAU,CAAC,QAAQ,CAAC,EAAE,OAAO,OAAO;EACzD,OAAOK,SAAS;AAClB;;AAEA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAACR,IAAkB,EAAsB;EAC/D,MAAMS,GAAG,GAAIT,IAAI,CAACG,QAAQ,EAA0CK,eAAe;EACnF,OAAO,OAAOC,GAAG,KAAK,QAAQ,IAAIA,GAAG,CAACC,MAAM,GAAG,CAAC,GAAGD,GAAG,GAAGF,SAAS;AACpE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASI,eAAeA,CAC7BX,IAAkB,EAClBY,QAAqC,EACjB;EACpB,IAAIb,gBAAgB,CAACC,IAAI,CAAC,EAAE;IAC1B,OAAOQ,eAAe,CAACR,IAAI,CAAC;EAC9B;EACA,OAAOY,QAAQ,CAACC,GAAG,CAACb,IAAI,CAACC,EAAE,CAAC;AAC9B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASa,mBAAmBA,CACjCC,WAAkC,EAClCC,KAAqB,EACrB;AACAC,QAAwB,EACK;EAC7B,MAAMC,SAAS,GAAGD,QAAQ,IAAI,EAAE;EAChC,MAAME,QAAQ,GAAG3B,OAAO,CAAC,MAAM;IAC7B,MAAM4B,IAAiD,GAAG,EAAE;IAC5D,KAAK,MAAMpB,IAAI,IAAIgB,KAAK,EAAE;MACxB,IAAIjB,gBAAgB,CAACC,IAAI,CAAC,EAAE;MAC5B,MAAMqB,OAAO,GAAGhB,eAAe,CAACL,IAAI,CAAC;MACrC,IAAI,CAACqB,OAAO,EAAE;MACdD,IAAI,CAACE,IAAI,CAAC;QAAEC,MAAM,EAAEvB,IAAI,CAACC,EAAE;QAAEoB;MAAQ,CAAC,CAAC;IACzC;IACA,OAAOD,IAAI;EACb,CAAC,EAAE,CAACJ,KAAK,CAAC,CAAC;;EAEX;EACA;EACA;EACA,MAAMQ,SAAS,GAAGhC,OAAO,CACvB,MAAM2B,QAAQ,CAACM,GAAG,CAAEC,CAAC,IAAK,GAAGA,CAAC,CAACH,MAAM,IAAIG,CAAC,CAACL,OAAO,IAAI,EAAE,EAAE,CAAC,CAACM,IAAI,CAAC,CAAC,CAACC,IAAI,CAAC,GAAG,CAAC,EAC5E,CAACT,QAAQ,CACX,CAAC;EAED,MAAMU,KAAK,GAAGpC,QAAQ,CAAC;IACrBqC,QAAQ,EAAE,CAAChC,6BAA6B,EAAEoB,SAAS,EAAEM,SAAS,CAAC;IAC/DO,OAAO,EAAEZ,QAAQ,CAACT,MAAM,GAAG,CAAC,IAAIQ,SAAS,CAACR,MAAM,GAAG,CAAC;IACpDsB,SAAS,EAAErC,kBAAkB;IAC7BsC,MAAM,EAAErC,eAAe;IACvB;IACA;IACA;IACAsC,eAAe,EAAEA,CAACC,YAAY,EAAEC,aAAa,KAAK;MAChD,IAAI,CAACD,YAAY,IAAI,CAACC,aAAa,EAAE,OAAO7B,SAAS;MACrD,MAAM8B,UAAU,GAAGD,aAAa,CAACN,QAAQ,CAAC,CAAC,CAAC;MAC5C,IAAIO,UAAU,KAAKnB,SAAS,EAAE,OAAOX,SAAS;MAC9C,OAAO4B,YAAY;IACrB,CAAC;IACDG,OAAO,EAAE,MAAAA,CAAA,KAA6C;MACpD,MAAMC,MAA8B,GAAG,CAAC,CAAC;MACzC,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGrB,QAAQ,CAACT,MAAM,EAAE8B,CAAC,IAAI3C,SAAS,EAAE;QACnD,MAAM4C,KAAK,GAAGtB,QAAQ,CAACuB,KAAK,CAACF,CAAC,EAAEA,CAAC,GAAG3C,SAAS,CAAC;QAC9C,MAAM8C,IAAI,GAAG,MAAM5B,WAAW,CAAC6B,mBAAmB,CAACH,KAAK,EAAE;UACxDI,SAAS,EAAEnD;QACb,CAAC,CAAC;QACFoD,MAAM,CAACC,MAAM,CAACR,MAAM,EAAEI,IAAI,CAAC;MAC7B;MACA,OAAOJ,MAAM;IACf;EACF,CAAC,CAAC;EAEF,OAAO/C,OAAO,CAAC,MAAM;IACnB,MAAMiC,GAAG,GAAG,IAAIuB,GAAG,CAAiB,CAAC;IACrC,MAAMC,IAAI,GAAGpB,KAAK,CAACoB,IAAI;IACvB,IAAIA,IAAI,EAAE;MACR,KAAK,MAAM,CAAChD,EAAE,EAAEiD,GAAG,CAAC,IAAIJ,MAAM,CAACK,OAAO,CAACF,IAAI,CAAC,EAAE;QAC5C,IAAI,OAAOC,GAAG,KAAK,QAAQ,IAAIA,GAAG,CAACxC,MAAM,GAAG,CAAC,EAAEe,GAAG,CAAC2B,GAAG,CAACnD,EAAE,EAAEiD,GAAG,CAAC;MACjE;IACF;IACA,OAAOzB,GAAG;EACZ,CAAC,EAAE,CAACI,KAAK,CAACoB,IAAI,CAAC,CAAC;AAClB","ignoreList":[]}

package/lib/module/ui/index.js

@@ -26,7 +26,7 @@ export { LogoText } from "./components/logo/LogoText.js";
 export { RequireOxyAuth } from "./components/RequireOxyAuth.js";
 export { default as FollowButton } from "./components/FollowButton.js";
 export { default as OxyPayButton } from "./components/OxyPayButton.js";
-export { FontLoader, setupFonts } from "./components/FontLoader.js";
+export { FontLoader, setupFonts } from './components/FontLoader';
 export { default as ProfileButton } from "./components/ProfileButton.js";
 
 // Context + hooks

package/lib/module/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["default","OxyProvider","OxySignInButton","OxyAuthPrompt","LogoIcon","LogoText","RequireOxyAuth","FollowButton","OxyPayButton","FontLoader","setupFonts","ProfileButton","useOxy","useAuth","useFollow","useSeedFollowStatuses","useStorage","ProfileScreen","ManageAccountScreen","CreateAccountScreen","AccountMembersScreen","AccountSettingsScreen","useAuthStore","useAccountStore","handleAuthError","isInvalidSessionError","isTimeoutOrNetworkError","extractErrorMessage"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,SAASA,OAAO,IAAIC,WAAW,QAAQ,6BAA0B;AACjE,SAASD,OAAO,IAAIE,eAAe,QAAQ,iCAA8B;AACzE,SAASF,OAAO,IAAIG,aAAa,QAAQ,+BAA4B;AAErE,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,cAAc,QAAQ,gCAA6B;AAE5D,SAASN,OAAO,IAAIO,YAAY,QAAQ,8BAA2B;AACnE,SAASP,OAAO,IAAIQ,YAAY,QAAQ,8BAA2B;AACnE,SAASC,UAAU,EAAEC,UAAU,QAAQ,4BAAyB;AAChE,SAASV,OAAO,IAAIW,aAAa,QAAQ,+BAA4B;;AAErE;AACA,SAASC,MAAM,QAAQ,yBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAiB;AACzC,SAASC,SAAS,EAAEC,qBAAqB,QAAQ,sBAAmB;AACpE,SAASC,UAAU,QAAQ,uBAAoB;AAG/C;AACA,SAAShB,OAAO,IAAIiB,aAAa,QAAQ,4BAAyB;AAClE,SAASjB,OAAO,IAAIkB,mBAAmB,QAAQ,kCAA+B;AAC9E,SAASlB,OAAO,IAAImB,mBAAmB,QAAQ,kCAA+B;AAC9E,SAASnB,OAAO,IAAIoB,oBAAoB,QAAQ,mCAAgC;AAChF,SAASpB,OAAO,IAAIqB,qBAAqB,QAAQ,oCAAiC;;AAElF;AACA,SAASC,YAAY,QAAQ,uBAAoB;AACjD,SAASC,eAAe,QAAQ,0BAAuB;;AAEvD;AACA,SACIC,eAAe,EACfC,qBAAqB,EACrBC,uBAAuB,EACvBC,mBAAmB,QAChB,0BAAuB","ignoreList":[]}
+{"version":3,"names":["default","OxyProvider","OxySignInButton","OxyAuthPrompt","LogoIcon","LogoText","RequireOxyAuth","FollowButton","OxyPayButton","FontLoader","setupFonts","ProfileButton","useOxy","useAuth","useFollow","useSeedFollowStatuses","useStorage","ProfileScreen","ManageAccountScreen","CreateAccountScreen","AccountMembersScreen","AccountSettingsScreen","useAuthStore","useAccountStore","handleAuthError","isInvalidSessionError","isTimeoutOrNetworkError","extractErrorMessage"],"sourceRoot":"../../../src","sources":["ui/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA,SAASA,OAAO,IAAIC,WAAW,QAAQ,6BAA0B;AACjE,SAASD,OAAO,IAAIE,eAAe,QAAQ,iCAA8B;AACzE,SAASF,OAAO,IAAIG,aAAa,QAAQ,+BAA4B;AAErE,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,QAAQ,QAAQ,+BAA4B;AACrD,SAASC,cAAc,QAAQ,gCAA6B;AAE5D,SAASN,OAAO,IAAIO,YAAY,QAAQ,8BAA2B;AACnE,SAASP,OAAO,IAAIQ,YAAY,QAAQ,8BAA2B;AACnE,SAASC,UAAU,EAAEC,UAAU,QAAQ,yBAAyB;AAChE,SAASV,OAAO,IAAIW,aAAa,QAAQ,+BAA4B;;AAErE;AACA,SAASC,MAAM,QAAQ,yBAAsB;AAC7C,SAASC,OAAO,QAAQ,oBAAiB;AACzC,SAASC,SAAS,EAAEC,qBAAqB,QAAQ,sBAAmB;AACpE,SAASC,UAAU,QAAQ,uBAAoB;AAG/C;AACA,SAAShB,OAAO,IAAIiB,aAAa,QAAQ,4BAAyB;AAClE,SAASjB,OAAO,IAAIkB,mBAAmB,QAAQ,kCAA+B;AAC9E,SAASlB,OAAO,IAAImB,mBAAmB,QAAQ,kCAA+B;AAC9E,SAASnB,OAAO,IAAIoB,oBAAoB,QAAQ,mCAAgC;AAChF,SAASpB,OAAO,IAAIqB,qBAAqB,QAAQ,oCAAiC;;AAElF;AACA,SAASC,YAAY,QAAQ,uBAAoB;AACjD,SAASC,eAAe,QAAQ,0BAAuB;;AAEvD;AACA,SACIC,eAAe,EACfC,qBAAqB,EACrBC,uBAAuB,EACvBC,mBAAmB,QAChB,0BAAuB","ignoreList":[]}

package/lib/module/ui/screens/FileManagementScreen.js

@@ -12,7 +12,8 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { useOxy } from "../context/OxyContext.js";
 import { useI18n } from "../hooks/useI18n.js";
 import { useUploadFile } from "../hooks/mutations/useAccountMutations.js";
-import { formatFileSize, getFileIcon, getSafeDownloadUrl } from "../utils/fileManagement.js";
+import { formatFileSize, getFileIcon } from "../utils/fileManagement.js";
+import { useResolvedFileUrls, fileThumbSource } from "../hooks/useResolvedFileUrls.js";
 import { FileViewer } from "../components/fileManagement/FileViewer.js";
 import { FileDetailsModal } from "../components/fileManagement/FileDetailsModal.js";
 import { UploadPreview } from "../components/fileManagement/UploadPreview.js";
@@ -305,10 +306,16 @@ const FileManagementScreen = ({
     onClose?.();
   }, [selectMode, multiSelect, selectedIds, files, onConfirmSelection, onClose, defaultVisibility, oxyServices, linkContext]);
 
-  // Helper to safely request a thumbnail variant only for image mime types.
-  const getSafeDownloadUrlCallback = useCallback((file, variant = 'thumb') => {
-    return getSafeDownloadUrl(file, variant, (fileId, variant) => oxyServices.getFileDownloadUrl(fileId, variant));
-  }, [oxyServices]);
+  // Private-safe thumbnail URLs for the currently-shown files, resolved in
+  // ONE batch per page (not N per-tile) and cached by React Query. Uploads
+  // default to private, so the synchronous public-CDN URL would 404 for
+  // every private thumbnail.
+  const resolvedThumbUrls = useResolvedFileUrls(oxyServices, filteredFiles, user?.id);
+
+  // Image source for a grid tile: the resolved private-safe URL for a
+  // persisted file, or the locally-picked preview for an in-flight optimistic
+  // entry. Never builds an asset URL from a `temp-…`/uploading id.
+  const thumbSourceFor = useCallback(file => fileThumbSource(file, resolvedThumbUrls), [resolvedThumbUrls]);
   const bloomTheme = useTheme();
   const {
     colors
@@ -437,7 +444,14 @@ const FileManagementScreen = ({
     try {
       await Promise.all(photosToLoad.map(async photo => {
         try {
-          const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+          const downloadUrl = thumbSourceFor(photo);
+          // URL not resolved yet — skip (do NOT record fallback
+          // dims) so this photo is re-measured once its private-safe
+          // URL resolves. Measuring the broken public URL is exactly
+          // the bug we are fixing.
+          if (!downloadUrl) {
+            return;
+          }
 
           // Unified approach using Image.getSize (works on all platforms)
           await new Promise(resolve => {
@@ -475,7 +489,19 @@ const FileManagementScreen = ({
     } finally {
       setLoadingDimensions(false);
     }
-  }, [getSafeDownloadUrlCallback, photoDimensions]);
+  }, [thumbSourceFor, photoDimensions]);
+
+  // Re-measure photo dimensions when their private-safe URLs resolve. The
+  // justified grid's own trigger fires on the photo SET, not on URL
+  // availability, so newly-resolved private tiles would otherwise keep their
+  // skipped (unmeasured) state and render with fallback geometry.
+  useEffect(() => {
+    if (viewMode !== 'photos') return;
+    const photos = filteredFiles.filter(file => file.contentType.startsWith('image/'));
+    if (photos.length > 0) {
+      loadPhotoDimensions(photos);
+    }
+  }, [resolvedThumbUrls, viewMode, filteredFiles, loadPhotoDimensions]);
 
   // Create justified rows from photos with responsive algorithm
   const createJustifiedRows = useCallback((photos, containerWidth) => {
@@ -619,9 +645,10 @@ const FileManagementScreen = ({
   // Unified download function - works on all platforms
   const handleFileDownload = async (fileId, filename) => {
     try {
-      // Try to use the download URL with a simple approach
-      // On web, this creates a download link. On mobile, it opens the URL.
-      const downloadUrl = oxyServices.getFileDownloadUrl(fileId);
+      // Resolve an authenticated, private-safe URL. The synchronous
+      // `getFileDownloadUrl` yields the public CDN origin, which 404s for
+      // private assets (the default visibility).
+      const downloadUrl = await oxyServices.getFileDownloadUrlAsync(fileId);
 
       // For web platforms, use link download
       if (typeof window !== 'undefined' && window.document) {
@@ -673,8 +700,10 @@ const FileManagementScreen = ({
       if (file.contentType.startsWith('text/') || file.contentType.includes('json') || file.contentType.includes('xml') || file.contentType.includes('javascript') || file.contentType.includes('typescript') || file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
         try {
           if (file.contentType.startsWith('image/') || file.contentType.includes('pdf') || file.contentType.startsWith('video/') || file.contentType.startsWith('audio/')) {
-            // For images, PDFs, videos, and audio, we'll use the URL directly
-            const downloadUrl = oxyServices.getFileDownloadUrl(file.id);
+            // For images, PDFs, videos, and audio, we render the URL
+            // directly. Resolve the authenticated, private-safe URL —
+            // the synchronous public-CDN URL 404s for private assets.
+            const downloadUrl = await oxyServices.getFileDownloadUrlAsync(file.id);
             setFileContent(downloadUrl);
           } else {
             // For text files, get the content using authenticated request
@@ -710,7 +739,7 @@ const FileManagementScreen = ({
     fileDetailsControl.open();
   };
   const renderSimplePhotoItem = useCallback((photo, index) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+    const downloadUrl = thumbSourceFor(photo);
 
     // Calculate photo item width based on actual container size from bottom sheet
     let itemsPerRow = 3; // Default for mobile
@@ -758,9 +787,9 @@ const FileManagementScreen = ({
         })]
       })
     }, photo.id);
-  }, [oxyServices, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
+  }, [thumbSourceFor, safeContainerWidth, selectMode, selectedIds, colors.primary, colors.text]);
   const renderJustifiedPhotoItem = useCallback((photo, width, height, isLast) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+    const downloadUrl = thumbSourceFor(photo);
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [fileManagementStyles.justifiedPhotoItem, {
         width,
@@ -799,7 +828,7 @@ const FileManagementScreen = ({
         })]
       })
     }, photo.id);
-  }, [oxyServices, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
+  }, [thumbSourceFor, selectMode, selectedIds, multiSelect, colors.primary, colors.text]);
 
   // Run initial load once per targetUserId change to avoid accidental loops
   const lastLoadedFor = useRef(undefined);
@@ -835,7 +864,7 @@ const FileManagementScreen = ({
             style: fileManagementStyles.filePreview,
             children: [isImage && /*#__PURE__*/_jsx(ExpoImage, {
               source: {
-                uri: getSafeDownloadUrlCallback(file, 'thumb')
+                uri: thumbSourceFor(file)
               },
               style: fileManagementStyles.previewImage,
               contentFit: "cover",
@@ -861,7 +890,7 @@ const FileManagementScreen = ({
               style: fileManagementStyles.videoPreviewWrapper,
               children: [/*#__PURE__*/_jsx(ExpoImage, {
                 source: {
-                  uri: getSafeDownloadUrlCallback(file, 'thumb')
+                  uri: thumbSourceFor(file)
                 },
                 style: fileManagementStyles.videoPosterImage,
                 contentFit: "cover",
@@ -990,7 +1019,7 @@ const FileManagementScreen = ({
             },
             children: /*#__PURE__*/_jsx(ExpoImage, {
               source: {
-                uri: getSafeDownloadUrlCallback(file, 'thumb')
+                uri: thumbSourceFor(file)
               },
               style: {
                 width: 36,
@@ -1017,7 +1046,7 @@ const FileManagementScreen = ({
             },
             children: [/*#__PURE__*/_jsx(ExpoImage, {
               source: {
-                uri: getSafeDownloadUrlCallback(file, 'thumb')
+                uri: thumbSourceFor(file)
               },
               style: {
                 width: 36,
@@ -1125,7 +1154,7 @@ const FileManagementScreen = ({
         }) : undefined
       };
     });
-  }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, getSafeDownloadUrlCallback, selectMode, selectedIds]);
+  }, [filteredFiles, theme, deleting, handleFileDownload, confirmFileDelete, handleFileOpen, thumbSourceFor, selectMode, selectedIds]);
 
   // Scroll to selected file after selection
   useEffect(() => {
@@ -1209,7 +1238,7 @@ const FileManagementScreen = ({
     }
   }, [lastSelectedFileId]);
   const renderPhotoItem = (photo, index) => {
-    const downloadUrl = getSafeDownloadUrlCallback(photo, 'thumb');
+    const downloadUrl = thumbSourceFor(photo);
 
     // Calculate photo item width based on actual container size from bottom sheet
     let itemsPerRow = 3; // Default for mobile
@@ -1612,7 +1641,7 @@ const FileManagementScreen = ({
         hasMore: paging.hasMore,
         loadingMore: paging.loadingMore,
         reduceMotion: reduceMotion,
-        getThumbUrl: getSafeDownloadUrlCallback,
+        getThumbUrl: thumbSourceFor,
         primaryColor: colors.primary,
         isOwner: isOwner,
         onTogglePhoto: toggleSelect,