hypha-debugger 0.2.6 → 0.2.7

package/dist/hypha-debugger.js

@@ -10405,12 +10405,16 @@
 	        // 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" &&
@@ -10423,21 +10427,37 @@
 	            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
@@ -10962,6 +10982,29 @@
 	        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)
@@ -11072,16 +11115,30 @@
 	    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)
@@ -11101,13 +11158,14 @@
 	}
 	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",