fix(media): retry an image once when it raced the service worker

On a first visit (or right after an update) the service worker only takes
control when it activates. An image requested before then goes out without
the access token, fails, and showed "Retry". Now a failed image waits for the
worker to take control (or a moment) and retries once by itself; "Retry"
appears only if that fails too. Encrypted media is unchanged.

Also the cause of the flaky "#219 gallery lightbox" e2e test (1 in 4 locally,
10/10 after).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/message/content/ImageContent.tsx

@@ -33,6 +33,7 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
 import { useNearViewport } from '../../../hooks/useNearViewport';
+import { whenMediaAuthReady } from '../../../../sw-session';
 
 type RenderViewerProps = {
   src: string;
@@ -115,13 +116,24 @@ export const ImageContent = as<'div', ImageContentProps>(
     const handleLoad = () => {
       setLoad(true);
     };
+    // An image requested before the service worker controls the page goes out
+    // without the access token and fails (first visit, just after an update).
+    // Retry once by itself when that's ready; only then offer "Retry".
+    const [attempt, setAttempt] = useState(0);
+    const autoRetried = useRef(false);
     const handleError = () => {
       setLoad(false);
+      if (!autoRetried.current && !encInfo) {
+        autoRetried.current = true;
+        whenMediaAuthReady().then(() => setAttempt((n) => n + 1));
+        return;
+      }
       setError(true);
     };
 
     const handleRetry = () => {
       setError(false);
+      setAttempt((n) => n + 1);
       loadSrc();
     };
 
@@ -182,7 +194,7 @@ export const ImageContent = as<'div', ImageContentProps>(
           </Box>
         )}
         {srcState.status === AsyncStatus.Success && (
-          <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
+          <Box key={attempt} className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
             {renderImage({
               alt: body,
               title: body,

src/sw-session.ts

@@ -9,3 +9,25 @@ export function pushSessionToSW(baseUrl?: string, accessToken?: string, userId?:
     userId,
   });
 }
+
+/**
+ * Resolves once media requests can carry the session: immediately-ish when a
+ * service worker already controls the page, otherwise when one takes control
+ * (first visit / just updated) or after `timeoutMs`. Used to retry a media
+ * load that raced the worker's activation and went out without a token.
+ */
+export function whenMediaAuthReady(timeoutMs = 3000): Promise<void> {
+  return new Promise((resolve) => {
+    const sw = 'serviceWorker' in navigator ? navigator.serviceWorker : undefined;
+    if (!sw || sw.controller) {
+      window.setTimeout(resolve, 500);
+      return;
+    }
+    const done = () => {
+      sw.removeEventListener('controllerchange', done);
+      resolve();
+    };
+    sw.addEventListener('controllerchange', done);
+    window.setTimeout(done, timeoutMs);
+  });
+}