hypha-debugger 0.2.6 → 0.2.8

package/dist/hypha-debugger.mjs

@@ -2060,12 +2060,16 @@ async function takeScreenshot(selector, format, quality, max_width, max_height,
         // to the viewport dimensions.
         const viewportW = window.innerWidth;
         const viewportH = window.innerHeight;
+        // 1x1 transparent PNG — used as placeholder for images that fail
+        // to load (CORS-blocked, 404, etc.) so html-to-image doesn't reject.
+        const TRANSPARENT_PIXEL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=";
         const captureOptions = {
             quality: qual,
             pixelRatio: 1, // always capture at 1x — we'll resize after
             cacheBust: true,
             skipAutoScale: true,
             skipFonts: true, // CORS-blocked stylesheets can hang font inlining
+            imagePlaceholder: TRANSPARENT_PIXEL, // fallback for broken images
             filter: (el) => {
                 // Exclude the debugger overlay and cursor from screenshots
                 return (el.id !== "hypha-debugger-host" &&
@@ -2078,21 +2082,37 @@ async function takeScreenshot(selector, format, quality, max_width, max_height,
             captureOptions.width = viewportW;
             captureOptions.height = viewportH;
         }
-        let dataUrl;
-        try {
-            const capturePromise = fmt === "jpeg" ? toJpeg(node, captureOptions) : toPng(node, captureOptions);
-            // Hard timeout: pages with cross-origin resources can make
-            // html-to-image wait indefinitely on blocked fetches.
-            const timeoutMs = 15000;
-            dataUrl = await Promise.race([
+        const runCapture = async (opts, timeoutMs = 15000) => {
+            const capturePromise = fmt === "jpeg" ? toJpeg(node, opts) : toPng(node, opts);
+            return Promise.race([
                 capturePromise,
-                new Promise((_, reject) => setTimeout(() => reject(new Error(`Screenshot capture timed out after ${timeoutMs}ms (likely CORS-blocked resources)`)), timeoutMs)),
+                new Promise((_, reject) => setTimeout(() => reject(new Error(`Screenshot capture timed out after ${timeoutMs}ms`)), timeoutMs)),
             ]);
+        };
+        let dataUrl;
+        try {
+            dataUrl = await runCapture(captureOptions);
         }
         catch (captureErr) {
-            return {
-                error: `Capture failed (html-to-image): ${errorMessage(captureErr)}`,
-            };
+            // Fallback: retry without images (filter them out). Some pages have
+            // images that html-to-image can't inline even with imagePlaceholder.
+            try {
+                const noImagesOpts = {
+                    ...captureOptions,
+                    filter: (el) => {
+                        if (!captureOptions.filter(el))
+                            return false;
+                        const tag = el.tagName?.toLowerCase();
+                        return tag !== "img" && tag !== "picture" && tag !== "video";
+                    },
+                };
+                dataUrl = await runCapture(noImagesOpts, 10000);
+            }
+            catch (retryErr) {
+                return {
+                    error: `Capture failed: ${errorMessage(captureErr)} (retry without images also failed: ${errorMessage(retryErr)})`,
+                };
+            }
         }
         // Resize down to fit within (maxW × maxH) and re-encode. If resize
         // fails (e.g. data URL too large to load back into an Image), fall
@@ -2617,6 +2637,29 @@ function getFiberFromDOM(node) {
         k.startsWith("__reactInternalInstance$"));
     return fiberKey ? node[fiberKey] : null;
 }
+/**
+ * Find the topmost DOM element that has a React fiber attached.
+ * React mounts on various nodes — #root is common but not universal
+ * (#app, #__next, body, etc.). We scan until we find one.
+ */
+function findReactRoot() {
+    // Try common selectors first (fast path)
+    const common = ["#root", "#app", "#__next", "[data-reactroot]", "main", "body"];
+    for (const sel of common) {
+        const el = document.querySelector(sel);
+        if (el && getFiberFromDOM(el))
+            return el;
+    }
+    // Slow path: walk the tree, find first element with a fiber
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, null);
+    let node = walker.currentNode;
+    while (node) {
+        if (node instanceof Element && getFiberFromDOM(node))
+            return node;
+        node = walker.nextNode();
+    }
+    return null;
+}
 function getComponentName(fiber) {
     const { type } = fiber;
     if (!type)
@@ -2727,16 +2770,30 @@ function fiberToInfo(fiber, depth, maxDepth) {
     return info;
 }
 function getReactTree(selector, max_depth) {
-    selector = selector ?? "#root";
     const maxDepth = max_depth ?? 5;
-    const rootEl = document.querySelector(selector);
-    if (!rootEl) {
-        return { error: `No element found for selector: ${selector}` };
+    let rootEl;
+    let usedSelector;
+    if (selector) {
+        rootEl = document.querySelector(selector);
+        usedSelector = selector;
+        if (!rootEl) {
+            return { error: `No element found for selector: ${selector}` };
+        }
+    }
+    else {
+        // Auto-detect: scan for any element with a React fiber attached
+        rootEl = findReactRoot();
+        usedSelector = rootEl?.tagName.toLowerCase() + (rootEl?.id ? "#" + rootEl.id : "") || "(auto)";
+        if (!rootEl) {
+            return {
+                error: "No React root found on this page. Tried #root, #app, #__next, [data-reactroot], main, body — none had React fibers. This page may not be a React app, or React may not have rendered yet. Pass an explicit `selector` if you know the mount point.",
+            };
+        }
     }
     const fiber = getFiberFromDOM(rootEl);
     if (!fiber) {
         return {
-            error: `No React fiber found on element "${selector}". Is this a React app?`,
+            error: `No React fiber found on element "${usedSelector}". Is this a React app?`,
         };
     }
     // Walk up to find the root component fiber (skip HostRoot)
@@ -2756,13 +2813,14 @@ function getReactTree(selector, max_depth) {
 }
 getReactTree.__schema__ = {
     name: "getReactTree",
-    description: "Inspect the React component tree starting from a DOM element. Returns component names, props, state (including hooks), and children hierarchy.",
+    description: "Inspect the React component tree. Returns component names, props, state (including hooks), and children hierarchy. " +
+        "When no selector is provided, auto-detects the React root by scanning common mount points (#root, #app, #__next, [data-reactroot], main, body) and then walking the DOM for any element with a React fiber attached.",
     parameters: {
         type: "object",
         properties: {
             selector: {
                 type: "string",
-                description: 'CSS selector of the React root element. Default: "#root".',
+                description: "CSS selector of the React root element. Omit for auto-detection.",
             },
             max_depth: {
                 type: "number",