fix(web): stabilize image preview loading (#150)

## Summary
- Keep the current auth-token reader behind a ref so preview loading
does not restart on render.
- Bound both capability exchange and object download to a 30-second
preview timeout.

## Production finding
The initial deployment correctly opened the generated JPEG in Files, but
its inline card remained on Preparing preview because the loading render
changed the auth callback dependency and aborted the request before
network dispatch.

## Checks
- [x] Targeted Biome check
- [x] Web TypeScript check
- [ ] Production inline preview, modal, and download validation after
deployment

Author: iamjr15

apps/web/src/components/chat/message-deliverables.tsx

@@ -354,18 +354,27 @@ function useLazyImagePreview(
   getToken: () => Promise<null | string>,
 ): ImagePreview {
   const hostRef = useRef<HTMLDivElement | null>(null);
+  const getTokenRef = useRef(getToken);
   const isNearViewport = useNearViewport(hostRef);
   const [preview, setPreview] = useState<Omit<ImagePreview, "hostRef">>({
     message: null,
     status: "idle",
     url: null,
   });
+  useEffect(() => {
+    getTokenRef.current = getToken;
+  }, [getToken]);
   useEffect(() => {
     if (!isNearViewport) return;
     const controller = new AbortController();
     let objectUrl: string | null = null;
     setPreview({ message: null, status: "loading", url: null });
-    void loadOutputImagePreview(getToken, data.outputId, data.sizeBytes, controller.signal)
+    void loadOutputImagePreview(
+      () => getTokenRef.current(),
+      data.outputId,
+      data.sizeBytes,
+      controller.signal,
+    )
       .then((blob) => {
         objectUrl = URL.createObjectURL(blob);
         setPreview({ message: null, status: "ready", url: objectUrl });
@@ -382,7 +391,7 @@ function useLazyImagePreview(
       controller.abort();
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [data.outputId, data.sizeBytes, getToken, isNearViewport]);
+  }, [data.outputId, data.sizeBytes, isNearViewport]);
   return { ...preview, hostRef };
 }
 

apps/web/src/lib/api/outputs.ts

@@ -13,6 +13,7 @@ import {
 } from "@/lib/api/authorized-fetch";
 
 const OUTPUT_IMAGE_PREVIEW_MAX_BYTES = 20 * 1024 * 1024;
+const OUTPUT_IMAGE_PREVIEW_TIMEOUT_MS = 30_000;
 
 export async function createOutputDownloadUrl(
   getToken: () => Promise<null | string>,
@@ -39,10 +40,14 @@ export async function loadOutputImagePreview(
   if (sizeBytes <= 0 || sizeBytes > OUTPUT_IMAGE_PREVIEW_MAX_BYTES) {
     throw new Error("This image is too large to preview here. Download it to view the original.");
   }
-  const capability = await createOutputDownloadUrl(getToken, outputId, signal);
+  const requestSignal = AbortSignal.any([
+    signal,
+    AbortSignal.timeout(OUTPUT_IMAGE_PREVIEW_TIMEOUT_MS),
+  ]);
+  const capability = await createOutputDownloadUrl(getToken, outputId, requestSignal);
   const response = await fetch(capability.downloadUrl, {
     referrerPolicy: "no-referrer",
-    signal,
+    signal: requestSignal,
   });
   if (!response.ok) {
     throw new Error(`Image preview returned HTTP ${response.status}`);