fix: thumbnail capture quality — JSX rendering, viewport scaling, Markdown, and save regeneration (#234)

- JSX assets: transpile via sucrase + scaffold with import map (same as JsxRenderer) instead of sending raw source to iframe
- HTML dashboards: render iframe at 1280x960 desktop viewport, scale down to 400x300 thumbnail via html2canvas
- Markdown: fix blank captures by using visibility:hidden (keeps layout flow) and inline prose styles instead of Tailwind classes
- Save regeneration: content saves now mark thumbnail as stale, triggering re-capture with the updated content

Author: cjimti

ui/src/components/AssetViewer.tsx

@@ -69,6 +69,7 @@ export function AssetViewer({
   const [editedContent, setEditedContent] = useState<string>("");
   const [dirty, setDirty] = useState(false);
   const [saveStatus, setSaveStatus] = useState<"idle" | "saved" | "error">("idle");
+  const [thumbnailStale, setThumbnailStale] = useState(false);
 
   const canEditSource = !!contentUpdateMutation && !!asset && isTextContent(asset.content_type);
   const contentStr = typeof content === "string" ? content : "";
@@ -90,7 +91,12 @@ export function AssetViewer({
     contentUpdateMutation.mutate(
       { id: asset.id, content: editedContent },
       {
-        onSuccess: () => setSaveStatus("saved"),
+        onSuccess: () => {
+          setSaveStatus("saved");
+          if (isThumbnailSupported(asset.content_type)) {
+            setThumbnailStale(true);
+          }
+        },
         onError: () => setSaveStatus("error"),
       },
     );
@@ -395,8 +401,14 @@ export function AssetViewer({
         </div>
       )}
 
-      {content && typeof content === "string" && !asset.thumbnail_s3_key && isThumbnailSupported(asset.content_type) && (
-        <ThumbnailGeneratorWithInvalidation assetId={asset.id} content={content} contentType={asset.content_type} />
+      {content && typeof content === "string" && isThumbnailSupported(asset.content_type) && (!asset.thumbnail_s3_key || thumbnailStale) && (
+        <ThumbnailGeneratorWithInvalidation
+          key={thumbnailStale ? "regen" : "initial"}
+          assetId={asset.id}
+          content={thumbnailStale ? editedContent : content}
+          contentType={asset.content_type}
+          onDone={() => setThumbnailStale(false)}
+        />
       )}
 
       <ShareDialog assetId={asset.id} open={shareOpen} onOpenChange={setShareOpen} />
@@ -449,19 +461,35 @@ export function AssetViewer({
   );
 }
 
-function ThumbnailGeneratorWithInvalidation({ assetId, content, contentType }: { assetId: string; content: string; contentType: string }) {
+function ThumbnailGeneratorWithInvalidation({
+  assetId,
+  content,
+  contentType,
+  onDone,
+}: {
+  assetId: string;
+  content: string;
+  contentType: string;
+  onDone?: () => void;
+}) {
   const qc = useQueryClient();
   const handleCaptured = useCallback(() => {
     void qc.invalidateQueries({ queryKey: ["asset", assetId] });
     void qc.invalidateQueries({ queryKey: ["assets"] });
-  }, [qc, assetId]);
+    onDone?.();
+  }, [qc, assetId, onDone]);
+
+  const handleFailed = useCallback(() => {
+    onDone?.();
+  }, [onDone]);
 
   return (
     <ThumbnailGenerator
       assetId={assetId}
       content={content}
       contentType={contentType}
       onCaptured={handleCaptured}
+      onFailed={handleFailed}
     />
   );
 }

ui/src/components/ThumbnailGenerator.tsx

@@ -5,8 +5,11 @@ import DOMPurify from "dompurify";
 import {
   THUMB_WIDTH,
   THUMB_HEIGHT,
+  RENDER_WIDTH,
+  RENDER_HEIGHT,
   CAPTURE_TIMEOUT_MS,
   injectCaptureScript,
+  buildJsxThumbnailHtml,
   captureIframe,
   captureElement,
   uploadThumbnail,
@@ -38,6 +41,7 @@ export function ThumbnailGenerator({ assetId, content, contentType, onCaptured,
       <IframeCapture
         assetId={assetId}
         content={content}
+        contentType={contentType}
         onCaptured={onCaptured}
         onFailed={onFailed}
       />
@@ -67,22 +71,25 @@ export function ThumbnailGenerator({ assetId, content, contentType, onCaptured,
 function IframeCapture({
   assetId,
   content,
+  contentType,
   onCaptured,
   onFailed,
 }: {
   assetId: string;
   content: string;
+  contentType: string;
   onCaptured?: () => void;
   onFailed?: () => void;
 }) {
   const capturedRef = useRef(false);
   const iframeRef = useRef<HTMLIFrameElement>(null);
+  const isJsx = contentType.toLowerCase().includes("jsx");
 
   const blobUrl = useMemo(() => {
-    const injected = injectCaptureScript(content);
-    const blob = new Blob([injected], { type: "text/html;charset=utf-8" });
+    const html = isJsx ? buildJsxThumbnailHtml(content) : injectCaptureScript(content);
+    const blob = new Blob([html], { type: "text/html;charset=utf-8" });
     return URL.createObjectURL(blob);
-  }, [content]);
+  }, [content, isJsx]);
 
   const doCapture = useCallback(async () => {
     if (capturedRef.current || !iframeRef.current) return;
@@ -129,8 +136,8 @@ function IframeCapture({
         position: "fixed",
         left: -9999,
         top: -9999,
-        width: THUMB_WIDTH,
-        height: THUMB_HEIGHT,
+        width: RENDER_WIDTH,
+        height: RENDER_HEIGHT,
         overflow: "hidden",
         pointerEvents: "none",
       }}
@@ -140,8 +147,8 @@ function IframeCapture({
         ref={iframeRef}
         sandbox="allow-scripts allow-same-origin"
         src={blobUrl}
-        width={THUMB_WIDTH}
-        height={THUMB_HEIGHT}
+        width={RENDER_WIDTH}
+        height={RENDER_HEIGHT}
         style={{ border: "none" }}
         title="Thumbnail capture"
       />
@@ -208,24 +215,47 @@ function DomCapture({
       ref={containerRef}
       style={{
         position: "fixed",
-        left: -9999,
-        top: -9999,
+        left: 0,
+        top: 0,
         width: THUMB_WIDTH,
         height: THUMB_HEIGHT,
         overflow: "hidden",
         pointerEvents: "none",
+        visibility: "hidden",
+        zIndex: -1,
         background: "white",
         color: "black",
         fontSize: 12,
         padding: 16,
+        lineHeight: 1.6,
+        fontFamily: "system-ui, -apple-system, sans-serif",
       }}
       aria-hidden="true"
     >
       {isSvg ? (
         <div dangerouslySetInnerHTML={{ __html: sanitizedSvg }} />
       ) : (
-        <div className="prose prose-sm max-w-none">
-          <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+        <div
+          style={{
+            maxWidth: "none",
+          }}
+        >
+          <style>{`
+            .thumb-prose h1 { font-size: 1.5em; font-weight: 700; margin: 0.5em 0 0.25em; }
+            .thumb-prose h2 { font-size: 1.25em; font-weight: 600; margin: 0.5em 0 0.25em; }
+            .thumb-prose h3 { font-size: 1.1em; font-weight: 600; margin: 0.4em 0 0.2em; }
+            .thumb-prose p { margin: 0.4em 0; }
+            .thumb-prose ul, .thumb-prose ol { padding-left: 1.5em; margin: 0.4em 0; }
+            .thumb-prose code { background: #f3f4f6; padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
+            .thumb-prose pre { background: #f3f4f6; padding: 0.5em; border-radius: 4px; overflow: auto; margin: 0.4em 0; }
+            .thumb-prose blockquote { border-left: 3px solid #d1d5db; padding-left: 0.75em; margin: 0.4em 0; color: #6b7280; }
+            .thumb-prose a { color: #2563eb; text-decoration: underline; }
+            .thumb-prose table { border-collapse: collapse; margin: 0.4em 0; }
+            .thumb-prose th, .thumb-prose td { border: 1px solid #d1d5db; padding: 0.25em 0.5em; font-size: 0.9em; }
+          `}</style>
+          <div className="thumb-prose">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
+          </div>
         </div>
       )}
     </div>

ui/src/lib/thumbnail.ts

@@ -1,10 +1,15 @@
 import { toPng } from "html-to-image";
 import html2canvas from "html2canvas";
 import { apiFetchRaw } from "@/api/portal/client";
+import { transformJsx, escapeScriptClose, findComponentName } from "@/components/renderers/JsxRenderer";
 
 export const THUMB_WIDTH = 400;
 export const THUMB_HEIGHT = 300;
 
+/** Desktop viewport dimensions used for rendering before scaling down. */
+export const RENDER_WIDTH = 1280;
+export const RENDER_HEIGHT = 960;
+
 /** Capture timeout in milliseconds. */
 export const CAPTURE_TIMEOUT_MS = 15_000;
 
@@ -55,9 +60,11 @@ export async function captureIframe(iframe: HTMLIFrameElement): Promise<Blob> {
   if (!doc?.body) throw new Error("Cannot access iframe content");
 
   const canvas = await html2canvas(doc.body, {
-    width: THUMB_WIDTH,
-    height: THUMB_HEIGHT,
-    scale: 1,
+    width: RENDER_WIDTH,
+    height: RENDER_HEIGHT,
+    windowWidth: RENDER_WIDTH,
+    windowHeight: RENDER_HEIGHT,
+    scale: THUMB_WIDTH / RENDER_WIDTH,
     logging: false,
     useCORS: true,
   });
@@ -98,6 +105,100 @@ export async function uploadThumbnail(assetId: string, blob: Blob): Promise<void
   }
 }
 
+/**
+ * Build a complete HTML document that transpiles and renders JSX content,
+ * then notifies the parent when ready for capture. Reuses the same pipeline
+ * as JsxRenderer (sucrase transform, import map, auto-mount) but adds a
+ * postMessage notifier with a longer delay for async esm.sh loads.
+ */
+export function buildJsxThumbnailHtml(content: string): string {
+  const CSP = [
+    "default-src 'none'",
+    "script-src 'unsafe-eval' 'unsafe-inline' https://esm.sh https://fonts.googleapis.com https://fonts.gstatic.com",
+    "style-src 'unsafe-inline' https://fonts.googleapis.com",
+    "img-src data: blob:",
+    "font-src data: https://fonts.gstatic.com",
+    "connect-src https://esm.sh https://fonts.googleapis.com https://fonts.gstatic.com",
+  ].join("; ");
+
+  const BARE_IMPORT_MAP: Record<string, string> = {
+    react: "https://esm.sh/react@19",
+    "react/": "https://esm.sh/react@19/",
+    "react-dom": "https://esm.sh/react-dom@19",
+    "react-dom/": "https://esm.sh/react-dom@19/",
+    "react-dom/client": "https://esm.sh/react-dom@19/client",
+    recharts: "https://esm.sh/recharts@2?bundle&external=react,react-dom",
+    "lucide-react": "https://esm.sh/lucide-react@0.469?bundle&external=react",
+  };
+
+  const importMap = JSON.stringify({ imports: BARE_IMPORT_MAP });
+
+  let transformed: string;
+  try {
+    transformed = escapeScriptClose(transformJsx(content));
+  } catch {
+    // If transform fails, return a simple error page that still notifies ready
+    return `<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body>
+<pre style="color:#ef4444;padding:16px;font-family:monospace">JSX transform failed</pre>
+<script>setTimeout(function(){parent.postMessage({type:'thumbnail-ready'},'*');},500);</script>
+</body></html>`;
+  }
+
+  const hasMountCode =
+    /\bcreateRoot\s*\(/.test(content) ||
+    /\bReactDOM\s*\.\s*render\s*\(/.test(content);
+
+  const componentName = findComponentName(content);
+  const mountSection = hasMountCode
+    ? transformed
+    : `import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+${transformed}
+
+try {
+  ${componentName ? `createRoot(document.getElementById('root')).render(React.createElement(${componentName}));` : ""}
+} catch(e) {
+  document.getElementById('root').textContent = e.message;
+}`;
+
+  const notifierScript = `
+setTimeout(function() {
+  parent.postMessage({ type: 'thumbnail-ready' }, '*');
+}, 2000);`;
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="Content-Security-Policy" content="${CSP}">
+  <script type="importmap">${importMap}</script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: system-ui, sans-serif; padding: 16px; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module">
+window.onerror = function(msg, src, line, col, err) {
+  var el = document.createElement('pre');
+  el.textContent = err && err.stack ? err.stack : msg;
+  document.getElementById('root').appendChild(el);
+};
+window.addEventListener('unhandledrejection', function(e) {
+  var el = document.createElement('pre');
+  el.textContent = 'Module load error: ' + (e.reason && e.reason.stack ? e.reason.stack : e.reason);
+  document.getElementById('root').appendChild(el);
+});
+
+${mountSection}
+  </script>
+  <script>${notifierScript}</script>
+</body>
+</html>`;
+}
+
 /**
  * Returns true if the content type supports thumbnail generation.
  */