fix: markdown thumbnail capture race condition — use MutationObserver instead of setTimeout (#236)

DomCapture used setTimeout(500ms) to wait for ReactMarkdown to render
before capturing. This was a race condition — rendering could take longer,
producing blank thumbnails.

Replace with a MutationObserver that waits for actual rendered elements
(p, h1-h3, li, pre, blockquote, table) to appear in the DOM, then
captures after one requestAnimationFrame for layout to settle. SVG
content (set synchronously via dangerouslySetInnerHTML) is caught by
an initial check before the observer is attached.

Also add mock PUT /assets/:id/thumbnail handlers so thumbnail capture
can be tested end-to-end in dev mode with MSW.

Author: cjimti

ui/src/components/ThumbnailGenerator.tsx

@@ -194,9 +194,26 @@ function DomCapture({
   }, [assetId, onCaptured, onFailed]);
 
   useEffect(() => {
-    // Wait for render to complete
-    const timer = setTimeout(doCapture, 500);
-    return () => clearTimeout(timer);
+    const el = containerRef.current;
+    if (!el) return;
+
+    // If content is already rendered (SVG via dangerouslySetInnerHTML), capture
+    // after one animation frame so layout settles.
+    if (el.querySelector("svg, p, h1, h2, h3, li, pre, blockquote, table")) {
+      const raf = requestAnimationFrame(() => void doCapture());
+      return () => cancelAnimationFrame(raf);
+    }
+
+    // Otherwise wait for ReactMarkdown to render child nodes.
+    const observer = new MutationObserver(() => {
+      if (el.querySelector("p, h1, h2, h3, li, pre, blockquote, table")) {
+        observer.disconnect();
+        // One more frame to let layout settle after the DOM mutation.
+        requestAnimationFrame(() => void doCapture());
+      }
+    });
+    observer.observe(el, { childList: true, subtree: true });
+    return () => observer.disconnect();
   }, [doCapture]);
 
   // Timeout: if capture hasn't completed, give up

ui/src/mocks/handlers.ts

@@ -679,6 +679,15 @@ export const handlers = [
     return HttpResponse.json(portalAssets[idx]);
   }),
 
+  http.put(`${ADMIN_BASE}/assets/:id/thumbnail`, ({ params }) => {
+    const asset = portalAssets.find((a) => a.id === params.id && !a.deleted_at);
+    if (!asset) {
+      return HttpResponse.json({ detail: "Not found" }, { status: 404 });
+    }
+    asset.thumbnail_s3_key = `thumbnails/${asset.id}.png`;
+    return new HttpResponse(null, { status: 204 });
+  }),
+
   http.delete(`${ADMIN_BASE}/assets/:id`, ({ params }) => {
     const idx = portalAssets.findIndex(
       (a) => a.id === params.id && !a.deleted_at,
@@ -807,6 +816,15 @@ export const handlers = [
     return HttpResponse.json(portalAssets[idx]);
   }),
 
+  http.put(`${PORTAL_BASE}/assets/:id/thumbnail`, ({ params }) => {
+    const asset = portalAssets.find((a) => a.id === params.id && !a.deleted_at);
+    if (!asset) {
+      return HttpResponse.json({ detail: "Not found" }, { status: 404 });
+    }
+    asset.thumbnail_s3_key = `thumbnails/${asset.id}.png`;
+    return new HttpResponse(null, { status: 204 });
+  }),
+
   http.delete(`${PORTAL_BASE}/assets/:id`, ({ params }) => {
     const idx = portalAssets.findIndex(
       (a) => a.id === params.id && !a.deleted_at,