react-native-ai-debugger 1.1.6 → 1.4.21

package/build/core/executor.js

@@ -1,6 +1,6 @@
 import WebSocket from "ws";
 import { pendingExecutions, getNextMessageId, connectedApps } from "./state.js";
-import { getFirstConnectedApp, connectToDevice } from "./connection.js";
+import { getFirstConnectedApp, getConnectedAppByDevice, connectToDevice } from "./connection.js";
 import { fetchDevices, selectMainDevice, scanMetroPorts } from "./metro.js";
 import { DEFAULT_RECONNECTION_CONFIG, cancelReconnectionTimer } from "./connectionState.js";
 // Hermes runtime compatibility: polyfill for 'global' which doesn't exist in Hermes
@@ -80,6 +80,16 @@ export function validateAndPreprocessExpression(expression) {
                 "`global.__result = null; myAsyncFn().then(r => global.__result = r)`"
         };
     }
+    // Check for require() calls that don't work in Hermes Runtime.evaluate
+    if (/\brequire\s*\(/.test(trimmed)) {
+        return {
+            valid: false,
+            expression: cleaned,
+            error: "require() is not available in Hermes Runtime.evaluate. " +
+                "Modules cannot be imported at runtime. Only pre-existing global variables are accessible. " +
+                "Use list_debug_globals to discover available globals, or add `globalThis.__MY_VAR__ = myModule;` in your app code."
+        };
+    }
     return {
         valid: true,
         expression: cleaned
@@ -157,7 +167,31 @@ async function executeExpressionCore(expression, awaitPromise, timeoutMs = 10000
     return new Promise((resolve) => {
         const timeoutId = setTimeout(() => {
             pendingExecutions.delete(currentMessageId);
-            resolve({ success: false, error: "Timeout: Expression took too long to evaluate" });
+            const wsState = app.ws.readyState === WebSocket.OPEN ? "OPEN"
+                : app.ws.readyState === WebSocket.CLOSED ? "CLOSED"
+                    : app.ws.readyState === WebSocket.CLOSING ? "CLOSING"
+                        : "CONNECTING";
+            const deviceName = app.deviceInfo.deviceName || app.deviceInfo.title || "unknown";
+            const pageId = app.deviceInfo.id || "unknown";
+            const truncatedExpr = cleanedExpression.length > 100
+                ? cleanedExpression.substring(0, 100) + "..."
+                : cleanedExpression;
+            const errorMessage = [
+                "Timeout: Expression took too long to evaluate.",
+                "",
+                `Connection state: ws=${wsState}, device="${deviceName}", platform=${app.platform}, pageId=${pageId}`,
+                `Expression (truncated): ${truncatedExpr}`,
+                "",
+                "This usually means the JavaScript execution context became unresponsive or the CDP page is stale.",
+                "",
+                "Recovery steps (try in order):",
+                "1. Call scan_metro to re-establish a fresh CDP connection",
+                "2. If scan_metro doesn't help, force-restart the app:",
+                "   - iOS: ios_terminate_app then ios_launch_app",
+                "   - Android: android_launch_app (restarts automatically)",
+                "3. After restarting, call scan_metro again to reconnect",
+            ].join("\n");
+            resolve({ success: false, error: errorMessage });
         }, TIMEOUT_MS);
         pendingExecutions.set(currentMessageId, { resolve, timeoutId });
         try {
@@ -184,17 +218,17 @@ async function executeExpressionCore(expression, awaitPromise, timeoutMs = 10000
     });
 }
 // Execute JavaScript in the connected React Native app with retry logic
-export async function executeInApp(expression, awaitPromise = true, options = {}) {
+export async function executeInApp(expression, awaitPromise = true, options = {}, device) {
     const { maxRetries = 2, retryDelayMs = 1000, autoReconnect = true, timeoutMs = 10000 } = options;
     let lastError;
     let preferredPort;
     // Get preferred port from current connection if available
-    const currentApp = getFirstConnectedApp();
+    const currentApp = getConnectedAppByDevice(device);
     if (currentApp) {
         preferredPort = currentApp.port;
     }
     for (let attempt = 0; attempt <= maxRetries; attempt++) {
-        const app = getFirstConnectedApp();
+        const app = getConnectedAppByDevice(device);
         // No connection - try to reconnect if enabled
         if (!app) {
             if (autoReconnect && attempt < maxRetries) {
@@ -262,11 +296,20 @@ export async function executeInApp(expression, awaitPromise = true, options = {}
     }
     return {
         success: false,
-        error: lastError ?? "Execution failed after all retries. Connection may be stale."
+        error: lastError ?? [
+            "Execution failed after all retries. Connection may be stale.",
+            "",
+            "Recovery steps (try in order):",
+            "1. Call scan_metro to re-establish a fresh CDP connection",
+            "2. If scan_metro doesn't help, force-restart the app:",
+            "   - iOS: ios_terminate_app then ios_launch_app",
+            "   - Android: android_launch_app (restarts automatically)",
+            "3. After restarting, call scan_metro again to reconnect",
+        ].join("\n")
     };
 }
 // List globally available debugging objects in the app
-export async function listDebugGlobals() {
+export async function listDebugGlobals(device) {
     const expression = `
         (function() {
             const globals = Object.keys(globalThis);
@@ -282,10 +325,10 @@ export async function listDebugGlobals() {
             return categories;
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, device);
 }
 // Inspect a global object to see its properties and types
-export async function inspectGlobal(objectName) {
+export async function inspectGlobal(objectName, device) {
     const expression = `
         (function() {
             const obj = ${objectName};
@@ -305,14 +348,15 @@ export async function inspectGlobal(objectName) {
             return result;
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, device);
 }
-// Reload the React Native app using __ReactRefresh (Page.reload is not supported by Hermes)
+// Reload the React Native app using __ReactRefresh
+// Note: Page.reload CDP method may work on Bridgeless targets (via HostAgent) — not yet tested
 // Uses fire-and-forget: sends the reload command without waiting for a response,
 // since the JS context is destroyed during reload and would always timeout.
-export async function reloadApp() {
+export async function reloadApp(device) {
     // Get current connection info before reload
-    let app = getFirstConnectedApp();
+    let app = getConnectedAppByDevice(device);
     // Auto-connect if no connection exists
     if (!app) {
         console.error("[rn-ai-debugger] No connection for reload, attempting auto-connect...");
@@ -332,7 +376,7 @@ export async function reloadApp() {
                 try {
                     await connectToDevice(mainDevice, port);
                     console.error(`[rn-ai-debugger] Auto-connected to ${mainDevice.title} on port ${port}`);
-                    app = getFirstConnectedApp();
+                    app = getConnectedAppByDevice(device);
                     break;
                 }
                 catch (error) {
@@ -366,7 +410,21 @@ export async function reloadApp() {
     })()`;
     try {
         if (app.ws.readyState !== WebSocket.OPEN) {
-            return { success: false, error: "WebSocket connection is not open." };
+            const deviceName = app.deviceInfo.deviceName || app.deviceInfo.title || "unknown";
+            return {
+                success: false,
+                error: [
+                    `WebSocket connection is not open (device="${deviceName}", platform=${app.platform}).`,
+                    "The CDP page may be stale or the app has crashed.",
+                    "",
+                    "Recovery steps (try in order):",
+                    "1. Call scan_metro to re-establish a fresh CDP connection",
+                    "2. If scan_metro doesn't help, force-restart the app:",
+                    "   - iOS: ios_terminate_app then ios_launch_app",
+                    "   - Android: android_launch_app (restarts automatically)",
+                    "3. After restarting, call scan_metro again to reconnect",
+                ].join("\n")
+            };
         }
         // Send without registering a pending execution — fire and forget
         const messageId = getNextMessageId();
@@ -391,11 +449,10 @@ export async function reloadApp() {
     try {
         // Wait for app to reload (give it time to restart JS context)
         await delay(2000);
-        // Close existing connections to this port and cancel any pending auto-reconnections
-        // This prevents the dual-reconnection bug where both auto-reconnect and manual reconnect compete
+        // Find and close only the targeted device's connection (not all devices on this port)
+        const targetDeviceId = app.deviceInfo.id;
         for (const [key, connectedApp] of connectedApps.entries()) {
-            if (connectedApp.port === port) {
-                // Cancel any pending reconnection timer BEFORE closing
+            if (connectedApp.deviceInfo.id === targetDeviceId) {
                 cancelReconnectionTimer(key);
                 try {
                     connectedApp.ws.close();
@@ -404,23 +461,23 @@ export async function reloadApp() {
                     // Ignore close errors
                 }
                 connectedApps.delete(key);
+                break;
             }
         }
         // Small delay to ensure cleanup
         await delay(500);
-        // Reconnect to Metro on the same port with auto-reconnection DISABLED
-        // We're doing a manual reconnection here, so we don't want the auto-reconnect
-        // system to also try reconnecting and compete with us
+        // Reconnect only the reloaded device (not all devices on the port)
         const devices = await fetchDevices(port);
-        const mainDevice = selectMainDevice(devices);
-        if (mainDevice) {
-            await connectToDevice(mainDevice, port, {
+        const targetDevice = devices.find(d => d.id === targetDeviceId)
+            || devices.find(d => d.deviceName === app.deviceInfo.deviceName);
+        if (targetDevice) {
+            await connectToDevice(targetDevice, port, {
                 isReconnection: false,
                 reconnectionConfig: { ...DEFAULT_RECONNECTION_CONFIG, enabled: false }
             });
             return {
                 success: true,
-                result: `App reloaded and reconnected to ${mainDevice.title}`
+                result: `App reloaded and reconnected to ${targetDevice.deviceName || targetDevice.title}`
             };
         }
         else {
@@ -474,19 +531,184 @@ function formatTreeStructureOnly(node, indent = 0) {
     }
     return result;
 }
-function formatScreenLayoutToTonl(elements) {
-    const lines = ["#elements{component,path,depth,layout,id}"];
-    for (const el of elements) {
-        const layout = el.layout
-            ? Object.entries(el.layout)
-                .map(([k, v]) => `${k}:${v}`)
-                .join(";")
-            : "";
-        const id = el.identifiers?.testID || el.identifiers?.accessibilityLabel || "";
-        lines.push(`${el.component}|${el.path}|${el.depth}|${layout}|${id}`);
+/**
+ * Classify each root as "screen" or "overlay".
+ *
+ * A root is a **screen** if its subtree contains a navigation screen marker
+ * (Route(...), *Screen, *Page). Falls back to the largest root by area
+ * if no navigation markers are found. Everything else is an overlay.
+ */
+function classifyRoots(roots, elements, childrenMap) {
+    const labels = [];
+    // Navigation screen markers: Route(...) wrapper or user-defined *Screen/*Page
+    const screenMarker = /^(Route\(|.*Screen\(|.*Page\(|.*Screen$|.*Page$)/;
+    function subtreeHasScreen(idx, depth) {
+        if (depth > 30)
+            return false;
+        if (screenMarker.test(elements[idx].component))
+            return true;
+        const kids = childrenMap.get(idx);
+        if (kids) {
+            for (const kid of kids) {
+                if (subtreeHasScreen(kid, depth + 1))
+                    return true;
+            }
+        }
+        return false;
+    }
+    // First pass: check which roots contain a navigation screen
+    const hasScreen = roots.map(ri => subtreeHasScreen(ri, 0));
+    const anyScreenFound = hasScreen.some(Boolean);
+    if (anyScreenFound) {
+        for (let i = 0; i < roots.length; i++) {
+            labels.push(hasScreen[i] ? "screen" : "overlay");
+        }
+    }
+    else {
+        // Fallback: largest root by area is the screen
+        let maxArea = 0;
+        let maxIdx = 0;
+        for (let i = 0; i < roots.length; i++) {
+            const f = elements[roots[i]].frame;
+            if (f && f.width * f.height > maxArea) {
+                maxArea = f.width * f.height;
+                maxIdx = i;
+            }
+        }
+        for (let i = 0; i < roots.length; i++) {
+            labels.push(i === maxIdx ? "screen" : "overlay");
+        }
+    }
+    return { labels, hasOverlays: labels.some(l => l === "overlay") };
+}
+/**
+ * Build, collapse, classify, and render a layout tree.
+ *
+ * Shared by both get_screen_layout (points, no tap coords) and
+ * the screenshot layout enrichment (pixels, with tap coords).
+ *
+ * @param elements - flat list of layout nodes with parentIndex linkage
+ * @param renderLine - callback that produces the output line for a node,
+ *   given (element, indent level, whether it's a leaf)
+ */
+function formatLayoutTree(elements, renderLine) {
+    // Build index: originalIndex -> element index in the filtered array
+    const indexMap = new Map();
+    for (let i = 0; i < elements.length; i++) {
+        if (elements[i].originalIndex !== undefined) {
+            indexMap.set(elements[i].originalIndex, i);
+        }
+    }
+    // Build children lists
+    const children = new Map();
+    const roots = [];
+    for (let i = 0; i < elements.length; i++) {
+        const el = elements[i];
+        const parentOrigIdx = el.parentIndex;
+        if (parentOrigIdx === undefined || parentOrigIdx === -1 || !indexMap.has(parentOrigIdx)) {
+            roots.push(i);
+        }
+        else {
+            const parentIdx = indexMap.get(parentOrigIdx);
+            if (!children.has(parentIdx))
+                children.set(parentIdx, []);
+            children.get(parentIdx).push(i);
+        }
+    }
+    // Collapse wrapper chains: if a child has the same frame as its parent,
+    // it's just a wrapper — promote its children and text to the parent
+    function sameFrame(a, b) {
+        if (!a.frame || !b.frame)
+            return false;
+        return Math.abs(a.frame.x - b.frame.x) < 1 &&
+            Math.abs(a.frame.y - b.frame.y) < 1 &&
+            Math.abs(a.frame.width - b.frame.width) < 1 &&
+            Math.abs(a.frame.height - b.frame.height) < 1;
+    }
+    function collapseNode(parentIdx) {
+        const kids = children.get(parentIdx);
+        if (!kids)
+            return;
+        const newKids = [];
+        for (const kidIdx of kids) {
+            if (sameFrame(elements[parentIdx], elements[kidIdx])) {
+                if (!elements[parentIdx].text && elements[kidIdx].text) {
+                    elements[parentIdx].text = elements[kidIdx].text;
+                }
+                const grandKids = children.get(kidIdx);
+                if (grandKids) {
+                    newKids.push(...grandKids);
+                }
+            }
+            else {
+                newKids.push(kidIdx);
+            }
+        }
+        if (newKids.length > 0) {
+            children.set(parentIdx, newKids);
+        }
+        else {
+            children.delete(parentIdx);
+        }
+        const updatedKids = children.get(parentIdx);
+        if (updatedKids) {
+            for (const kid of updatedKids) {
+                collapseNode(kid);
+            }
+        }
+    }
+    for (const root of roots) {
+        collapseNode(root);
+    }
+    // Render tree
+    const lines = [];
+    function printNode(idx, indent) {
+        const isLeaf = !children.has(idx);
+        lines.push(renderLine(elements[idx], indent, isLeaf));
+        const kids = children.get(idx);
+        if (kids) {
+            for (const kid of kids) {
+                printNode(kid, indent + 1);
+            }
+        }
+    }
+    // Classify roots and emit layer headers
+    const { labels, hasOverlays } = classifyRoots(roots, elements, children);
+    if (hasOverlays) {
+        let prevLabel = "";
+        for (let ri = 0; ri < roots.length; ri++) {
+            const label = labels[ri];
+            if (label === "overlay" || label !== prevLabel) {
+                if (lines.length > 0)
+                    lines.push("");
+                lines.push(`[${label}]`);
+            }
+            prevLabel = label;
+            printNode(roots[ri], 0);
+        }
+    }
+    else {
+        for (const root of roots) {
+            printNode(root, 0);
+        }
     }
     return lines.join("\n");
 }
+function formatScreenLayoutTree(elements, extended = false) {
+    return formatLayoutTree(elements, (el, indent, isLeaf) => {
+        const prefix = "  ".repeat(indent);
+        const frame = el.frame
+            ? ` (${Math.round(el.frame.x)},${Math.round(el.frame.y)} ${Math.round(el.frame.width)}x${Math.round(el.frame.height)})`
+            : "";
+        const id = el.identifiers?.testID || el.identifiers?.accessibilityLabel || "";
+        const idStr = id ? ` [${id}]` : "";
+        const textStr = el.text && isLeaf ? ` "${el.text}"` : "";
+        const layoutStr = extended && el.layout
+            ? ` {${Object.entries(el.layout).map(([k, v]) => `${k}:${v}`).join("; ")}}`
+            : "";
+        return `${prefix}${el.component}${frame}${idStr}${textStr}${layoutStr}`;
+    });
+}
 function formatFoundComponentsToTonl(components) {
     const lines = ["#found{component,path,depth,key,layout}"];
     for (const c of components) {
@@ -511,11 +733,11 @@ function formatSummaryToTonl(components, total) {
  * This traverses the fiber tree to extract component hierarchy with names.
  */
 export async function getComponentTree(options = {}) {
-    const { includeProps = false, includeStyles = false, hideInternals = true, format = "tonl", structureOnly = false, focusedOnly = false } = options;
+    const { includeProps = false, includeStyles = false, hideInternals = true, format = "tonl", structureOnly = false, focusedOnly = false, device } = options;
     // Use lower default depth for structureOnly to keep output compact (~2-5KB)
     // Full mode uses higher depth since TONL format handles it better
     // focusedOnly mode uses moderate depth since we're already filtering to active screen
-    const maxDepth = options.maxDepth ?? (structureOnly ? (focusedOnly ? 25 : 40) : 100);
+    const maxDepth = options.maxDepth ?? 5000;
     const expression = `
         (function() {
             const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -660,7 +882,7 @@ export async function getComponentTree(options = {}) {
 
             // Find focused screen if requested
             function findFocusedScreen(fiber, depth = 0) {
-                if (!fiber || depth > 200) return null;
+                if (!fiber || depth > 5000) return null;
 
                 const name = getComponentName(fiber);
 
@@ -710,7 +932,7 @@ export async function getComponentTree(options = {}) {
         })()
     `;
     // Use a longer timeout for component tree traversal — large apps can exceed 10s
-    const result = await executeInApp(expression, false, { timeoutMs: 30000 });
+    const result = await executeInApp(expression, false, { timeoutMs: 30000 }, device);
     // Apply formatting if requested
     if (result.success && result.result) {
         try {
@@ -736,33 +958,57 @@ export async function getComponentTree(options = {}) {
     return result;
 }
 /**
- * Get layout styles for all components on the current screen.
- * Useful for verifying layout without screenshots.
+ * Get layout data for visible components on the current screen.
+ * Uses measureInWindow to get actual screen positions and filters
+ * to only components within the viewport.
+ *
+ * Two-step approach (same as inspectAtPoint):
+ * Step 1: Walk fiber tree, dispatch measureInWindow on host components
+ * Step 2: After 300ms, read measurements, filter by viewport, build results
  */
 export async function getScreenLayout(options = {}) {
-    const { maxDepth = 65, componentsOnly = false, shortPath = true, summary = false, format = "tonl" } = options;
-    const expression = `
+    const { extended = false, summary = false, device, raw = false } = options;
+    const maxDepth = 5000;
+    const componentsOnly = true;
+    const shortPath = true;
+    // --- Step 1: walk fiber tree + dispatch measureInWindow calls ---
+    const dispatchExpression = `
         (function() {
-            const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+            var hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
             if (!hook) return { error: 'React DevTools hook not found.' };
 
-            let roots = [];
+            var roots = [];
             if (hook.getFiberRoots) {
-                roots = [...(hook.getFiberRoots(1) || [])];
+                roots = Array.from(hook.getFiberRoots(1) || []);
             }
             if (roots.length === 0 && hook.renderers) {
-                for (const [id] of hook.renderers) {
-                    const r = hook.getFiberRoots ? [...(hook.getFiberRoots(id) || [])] : [];
+                for (var entry of hook.renderers) {
+                    var r = Array.from(hook.getFiberRoots ? (hook.getFiberRoots(entry[0]) || []) : []);
                     if (r.length > 0) { roots = r; break; }
                 }
             }
             if (roots.length === 0) return { error: 'No fiber roots found.' };
 
-            const maxDepth = ${maxDepth};
-            const componentsOnly = ${componentsOnly};
-            const shortPath = ${shortPath};
-            const summaryMode = ${summary};
-            const pathSegments = 3; // Number of path segments to show in shortPath mode
+            function getMeasurable(fiber) {
+                var sn = fiber.stateNode;
+                if (!sn) return null;
+                if (typeof sn.measureInWindow === 'function') return sn;
+                if (sn.canonical && sn.canonical.publicInstance &&
+                    typeof sn.canonical.publicInstance.measureInWindow === 'function') {
+                    return sn.canonical.publicInstance;
+                }
+                return null;
+            }
+
+            // Collect host fibers with their metadata
+            var hostFibers = [];
+            var fiberMeta = [];
+            var componentsOnlyMode = ${componentsOnly};
+
+            // RN internals and primitives — skip these when looking for meaningful component names
+            // Only filter internal components that can't be written as JSX.
+            // Keep all user-facing components (View, Text, ScrollView, Modal, etc.)
+            var RN_PRIMITIVES = /^(Animated\\(.*|withAnimated.*|AnimatedComponent.*|ForwardRef.*|memo\\(.*|Context\\.Consumer|Context\\.Provider|RCT.*|RNS.*|RNC.*|ViewManagerAdapter_.*|VirtualizedList.*|CellRenderer.*|FrameSizeProvider.*|MaybeScreenContainer|MaybeScreen|Navigation.*|Screen$|ScreenStack|ScreenContainer|ScreenContentWrapper|SceneView|DelayedFreeze|Freeze|Suspender|DebugContainer|StaticContainer|SafeAreaProvider.*|SafeAreaFrameContext|SafeAreaInsetsContext|ExpoRoot|ExpoRootComponent|GestureHandler.*|NativeViewGestureHandler|GestureDetector|PanGestureHandler|Reanimated.*|BottomTabNavigator|TabLayout|RouteNode|Route$|KeyboardProvider|PortalProviderComponent|BottomSheetModalProviderWrapper|ThemeContext|ThemeProvider|TextAncestorContext|PressabilityDebugView|TouchableHighlightImpl|StatusBarOverlay|BottomSheetHostingContainerComponent|BottomSheetGestureHandlersProvider|BottomSheetBackdropContainerComponent|BottomSheetContainerComponent|BottomSheetDraggableViewComponent|BottomSheetHandleContainerComponent|BottomSheetBackgroundContainerComponent|DebuggingOverlay|InspectorDeferred|Inspector|InspectorOverlay|InspectorPanel|StyleInspector|BoxInspector|BoxContainer|ElementBox|BorderBox|InspectorPanelButton)$/;
 
             function getComponentName(fiber) {
                 if (!fiber || !fiber.type) return null;
@@ -770,8 +1016,212 @@ export async function getScreenLayout(options = {}) {
                 return fiber.type.displayName || fiber.type.name || null;
             }
 
-            function isHostComponent(fiber) {
-                return typeof fiber?.type === 'string';
+            // Find the first measurable host descendant of a fiber
+            function findFirstHost(fiber, depth) {
+                if (!fiber || depth > 20) return null;
+                if (typeof fiber.type === 'string' && getMeasurable(fiber)) return fiber;
+                var child = fiber.child;
+                while (child) {
+                    var found = findFirstHost(child, depth + 1);
+                    if (found) return found;
+                    child = child.sibling;
+                }
+                return null;
+            }
+
+            // Extract text content from a fiber subtree.
+            // When a fiber has a string child, return it without recursing
+            // (avoids duplication from Text > RCTText having the same string).
+            function collectText(fiber, d) {
+                if (!fiber || d > 30) return '';
+                var props = fiber.memoizedProps;
+                if (props) {
+                    var ch = props.children;
+                    // Leaf text — return without recursing into children fibers
+                    if (typeof ch === 'string') return ch;
+                    if (typeof ch === 'number') return String(ch);
+                    if (Array.isArray(ch)) {
+                        var inline = [];
+                        for (var ci = 0; ci < ch.length; ci++) {
+                            if (typeof ch[ci] === 'string') inline.push(ch[ci]);
+                            else if (typeof ch[ci] === 'number') inline.push(String(ch[ci]));
+                        }
+                        if (inline.length > 0) return inline.join('');
+                    }
+                }
+                // No direct text — collect from child fibers (siblings = adjacent elements)
+                var parts = [];
+                var child = fiber.child;
+                while (child) {
+                    var t = collectText(child, d + 1);
+                    if (t) parts.push(t);
+                    child = child.sibling;
+                }
+                return parts.join(' ').trim();
+            }
+
+            if (componentsOnlyMode) {
+                // componentsOnly: walk tree looking for meaningful custom components,
+                // measure their first host child, track parent for tree output
+                function walkComponents(fiber, depth, path, parentIdx) {
+                    if (!fiber || depth > ${maxDepth}) return;
+                    var name = getComponentName(fiber);
+                    var isHost = typeof fiber.type === 'string';
+
+                    // Skip inactive screens (react-native-screens MaybeScreen with active=0)
+                    // active: 0 = inactive/detached, 1 = transitioning, 2 = active
+                    if (name === 'MaybeScreen' && fiber.memoizedProps && fiber.memoizedProps.active === 0) return;
+
+                    // Skip unfocused screens in NativeStackNavigator (SceneView with focused=false)
+                    if (name === 'SceneView' && fiber.memoizedProps && fiber.memoizedProps.focused === false) return;
+
+                    var isMeaningful = name && !isHost && !RN_PRIMITIVES.test(name);
+
+                    var myIdx = parentIdx;
+                    if (isMeaningful) {
+                        var host = findFirstHost(fiber, 0);
+                        if (host) {
+                            myIdx = hostFibers.length;
+                            // Extract text from this component's subtree
+                            var text = collectText(fiber, 0);
+                            hostFibers.push(host);
+                            fiberMeta.push({
+                                hostName: typeof host.type === 'string' ? host.type : '',
+                                customName: name,
+                                depth: depth,
+                                path: path.concat([name]),
+                                parentIndex: parentIdx,
+                                text: text ? text.slice(0, 80) : null
+                            });
+                        }
+                    }
+
+                    var child = fiber.child;
+                    while (child) {
+                        var childName = getComponentName(child);
+                        walkComponents(child, depth + 1, childName ? path.concat([childName]) : path, myIdx);
+                        child = child.sibling;
+                    }
+                }
+                walkComponents(roots[0].current, 0, [], -1);
+            } else {
+                // Default mode: collect all host fibers with ancestor info
+                function walkFibers(fiber, depth, path) {
+                    if (!fiber || depth > ${maxDepth}) return;
+                    var name = getComponentName(fiber);
+                    var isHost = typeof fiber.type === 'string';
+
+                    // Skip inactive screens (react-native-screens MaybeScreen with active=0)
+                    if (name === 'MaybeScreen' && fiber.memoizedProps && fiber.memoizedProps.active === 0) return;
+
+                    // Skip unfocused screens in NativeStackNavigator (SceneView with focused=false)
+                    if (name === 'SceneView' && fiber.memoizedProps && fiber.memoizedProps.focused === false) return;
+
+                    if (name && isHost && getMeasurable(fiber)) {
+                        // Find nearest meaningful custom component ancestor for display
+                        var customName = null;
+                        var fallbackName = null;
+                        var cur = fiber.return;
+                        while (cur) {
+                            if (cur.type && typeof cur.type !== 'string') {
+                                var cName = cur.type.displayName || cur.type.name || null;
+                                if (cName) {
+                                    if (!fallbackName) fallbackName = cName;
+                                    if (!RN_PRIMITIVES.test(cName)) {
+                                        customName = cName;
+                                        break;
+                                    }
+                                }
+                            }
+                            cur = cur.return;
+                        }
+                        if (!customName) customName = fallbackName;
+
+                        hostFibers.push(fiber);
+                        fiberMeta.push({
+                            hostName: name,
+                            customName: customName,
+                            depth: depth,
+                            path: path.slice()
+                        });
+                    }
+
+                    var child = fiber.child;
+                    while (child) {
+                        var childName = getComponentName(child);
+                        walkFibers(child, depth + 1, childName ? path.concat([childName]) : path);
+                        child = child.sibling;
+                    }
+                }
+                walkFibers(roots[0].current, 0, []);
+            }
+
+            if (hostFibers.length === 0) return { error: 'No measurable host components found.' };
+
+            // Store fibers and metadata globally for step 2
+            globalThis.__layoutFibers = hostFibers;
+            globalThis.__layoutMeta = fiberMeta;
+            globalThis.__layoutMeasurements = new Array(hostFibers.length).fill(null);
+
+            // Dispatch measureInWindow on all host fibers
+            for (var i = 0; i < hostFibers.length; i++) {
+                try {
+                    (function(idx) {
+                        getMeasurable(hostFibers[idx]).measureInWindow(function(fx, fy, fw, fh) {
+                            globalThis.__layoutMeasurements[idx] = { x: fx, y: fy, width: fw, height: fh };
+                        });
+                    })(i);
+                } catch(e) {}
+            }
+
+            return { count: hostFibers.length };
+        })()
+    `;
+    const dispatchResult = await executeInApp(dispatchExpression, false, { timeoutMs: 30000 }, device);
+    if (!dispatchResult.success)
+        return dispatchResult;
+    try {
+        const parsed = JSON.parse(dispatchResult.result || "{}");
+        if (parsed.error)
+            return { success: false, error: parsed.error };
+    }
+    catch {
+        /* ignore */
+    }
+    // Wait for measureInWindow callbacks
+    await delay(300);
+    // --- Step 2: read measurements, filter visible, build results ---
+    const resolveExpression = `
+        (function() {
+            var fibers = globalThis.__layoutFibers;
+            var meta = globalThis.__layoutMeta;
+            var measurements = globalThis.__layoutMeasurements;
+            globalThis.__layoutFibers = null;
+            globalThis.__layoutMeta = null;
+            globalThis.__layoutMeasurements = null;
+
+            if (!fibers || !measurements || !meta) {
+                return { error: 'No measurement data. Run get_screen_layout again.' };
+            }
+
+            var componentsOnly = ${componentsOnly};
+            var shortPath = ${shortPath};
+            var summaryMode = ${summary};
+            var pathSegments = 3;
+
+
+            // Get viewport dimensions from the first root view measurement
+            // Accept elements starting at x=0 even with negative y (safe area extensions)
+            var viewportW = 9999, viewportH = 9999;
+            for (var v = 0; v < measurements.length; v++) {
+                if (measurements[v] && measurements[v].x === 0 && measurements[v].y <= 0 &&
+                    measurements[v].width > 0 && measurements[v].height > 0) {
+                    viewportW = measurements[v].width;
+                    // For wrappers extending behind safe area, the visible viewport height
+                    // is the total height minus the negative offset
+                    viewportH = measurements[v].height + measurements[v].y;
+                    break;
+                }
             }
 
             function formatPath(pathArray) {
@@ -781,22 +1231,14 @@ export async function getScreenLayout(options = {}) {
                 return '... > ' + pathArray.slice(-pathSegments).join(' > ');
             }
 
-            function extractAllStyles(style) {
-                if (!style) return null;
-                const merged = Array.isArray(style)
-                    ? Object.assign({}, ...style.filter(Boolean).map(s => typeof s === 'object' ? s : {}))
-                    : (typeof style === 'object' ? style : {});
-                return Object.keys(merged).length > 0 ? merged : null;
-            }
-
             function extractLayoutStyles(style) {
                 if (!style) return null;
-                const merged = Array.isArray(style)
-                    ? Object.assign({}, ...style.filter(Boolean).map(s => typeof s === 'object' ? s : {}))
+                var merged = Array.isArray(style)
+                    ? Object.assign.apply(null, [{}].concat(style.filter(Boolean).map(function(s) { return typeof s === 'object' ? s : {}; })))
                     : (typeof style === 'object' ? style : {});
 
-                const layout = {};
-                const layoutKeys = [
+                var layout = {};
+                var layoutKeys = [
                     'padding', 'paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight',
                     'paddingHorizontal', 'paddingVertical',
                     'margin', 'marginTop', 'marginBottom', 'marginLeft', 'marginRight',
@@ -807,79 +1249,109 @@ export async function getScreenLayout(options = {}) {
                     'position', 'top', 'bottom', 'left', 'right',
                     'gap', 'rowGap', 'columnGap',
                     'borderWidth', 'borderTopWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderRightWidth',
-                    'backgroundColor', 'borderColor', 'borderRadius'
+                    'backgroundColor', 'borderColor', 'borderRadius',
+                    'zIndex', 'elevation'
                 ];
 
-                for (const key of layoutKeys) {
-                    if (merged[key] !== undefined) layout[key] = merged[key];
+                for (var k = 0; k < layoutKeys.length; k++) {
+                    if (merged[layoutKeys[k]] !== undefined) layout[layoutKeys[k]] = merged[layoutKeys[k]];
                 }
                 return Object.keys(layout).length > 0 ? layout : null;
             }
 
-            const elements = [];
+            var elements = [];
 
-            function walkFiber(fiber, depth, path) {
-                if (!fiber || depth > maxDepth) return;
+            for (var i = 0; i < measurements.length; i++) {
+                var m = measurements[i];
+                if (!m) continue;
 
-                const name = getComponentName(fiber);
-                const isHost = isHostComponent(fiber);
-
-                // Include host components (View, Text, etc.) or named components
-                if (name && (!componentsOnly || !isHost)) {
-                    const style = fiber.memoizedProps?.style;
-                    const layout = extractLayoutStyles(style);
-
-                    // Get text content if it's a Text component
-                    let textContent = null;
-                    if (name === 'Text' || name === 'RCTText') {
-                        const children = fiber.memoizedProps?.children;
-                        if (typeof children === 'string') textContent = children;
-                        else if (typeof children === 'number') textContent = String(children);
-                    }
+                // Filter: only visible within viewport (with some tolerance for partial visibility)
+                if (m.width <= 0 || m.height <= 0) continue;
+                if (m.x + m.width < 0 || m.y + m.height < 0) continue;
+                if (m.x > viewportW || m.y > viewportH) continue;
 
-                    const element = {
-                        component: name,
-                        path: formatPath(path),
-                        depth
-                    };
+                var fiber = fibers[i];
+                var info = meta[i];
 
-                    if (layout) element.layout = layout;
-                    if (textContent) element.text = textContent.slice(0, 100);
-
-                    // Include key props for identification
-                    if (fiber.memoizedProps) {
-                        const identifiers = {};
-                        if (fiber.memoizedProps.testID) identifiers.testID = fiber.memoizedProps.testID;
-                        if (fiber.memoizedProps.accessibilityLabel) identifiers.accessibilityLabel = fiber.memoizedProps.accessibilityLabel;
-                        if (fiber.memoizedProps.nativeID) identifiers.nativeID = fiber.memoizedProps.nativeID;
-                        if (fiber.key) identifiers.key = fiber.key;
-                        if (Object.keys(identifiers).length > 0) element.identifiers = identifiers;
-                    }
+                var displayName = componentsOnly ? info.customName : info.hostName;
+                if (!displayName) continue;
+                if (componentsOnly && !info.customName) continue;
 
-                    elements.push(element);
+                var style = fiber.memoizedProps ? fiber.memoizedProps.style : null;
+                var layout = extractLayoutStyles(style);
+
+                // Get text content — use pre-collected text from step 1, or fall back to host fiber
+                var textContent = info.text || null;
+                if (!textContent && (info.hostName === 'RCTText' || info.hostName === 'Text')) {
+                    var children = fiber.memoizedProps ? fiber.memoizedProps.children : null;
+                    if (typeof children === 'string') textContent = children;
+                    else if (typeof children === 'number') textContent = String(children);
                 }
 
-                // Traverse children
-                let child = fiber.child;
-                while (child) {
-                    const childName = getComponentName(child);
-                    walkFiber(child, depth + 1, childName ? [...path, childName] : path);
-                    child = child.sibling;
+                var element = {
+                    component: displayName,
+                    path: formatPath(info.path),
+                    depth: info.depth,
+                    frame: { x: m.x, y: m.y, width: m.width, height: m.height },
+                    originalIndex: i
+                };
+
+                if (info.parentIndex !== undefined) element.parentIndex = info.parentIndex;
+                if (layout) element.layout = layout;
+                if (textContent) element.text = textContent.slice(0, 100);
+
+                // Identifiers
+                if (fiber.memoizedProps) {
+                    var identifiers = {};
+                    if (fiber.memoizedProps.testID) identifiers.testID = fiber.memoizedProps.testID;
+                    if (fiber.memoizedProps.accessibilityLabel) identifiers.accessibilityLabel = fiber.memoizedProps.accessibilityLabel;
+                    if (fiber.memoizedProps.nativeID) identifiers.nativeID = fiber.memoizedProps.nativeID;
+                    if (fiber.key) identifiers.key = fiber.key;
+                    if (Object.keys(identifiers).length > 0) element.identifiers = identifiers;
+                }
+
+                elements.push(element);
+            }
+
+            // In componentsOnly mode, remove full-screen wrapper components
+            // and re-parent their children to collapse the wrapper chain
+            if (componentsOnly && elements.length > 0) {
+                var filtered = [];
+                // Map: originalIndex -> resolved parent for skipped wrappers
+                var reparent = {};
+
+                for (var fi = 0; fi < elements.length; fi++) {
+                    var el = elements[fi];
+                    var fr = el.frame;
+                    // A wrapper is full-screen if it covers the entire viewport or extends beyond it
+                    // (e.g., y=-119 wrappers that extend behind the safe area)
+                    var isFullScreen = fr && fr.x <= 0 && fr.y <= 0 &&
+                        (fr.width >= viewportW - 2) && (fr.y + fr.height >= viewportH - 2);
+
+                    if (isFullScreen) {
+                        // Skip this wrapper, map its originalIndex to its parent
+                        reparent[el.originalIndex] = el.parentIndex;
+                    } else {
+                        // Resolve parent through any skipped wrappers
+                        var resolvedParent = el.parentIndex;
+                        while (resolvedParent !== undefined && resolvedParent !== -1 && reparent[resolvedParent] !== undefined) {
+                            resolvedParent = reparent[resolvedParent];
+                        }
+                        el.parentIndex = resolvedParent;
+                        filtered.push(el);
+                    }
                 }
+                elements = filtered;
             }
 
-            walkFiber(roots[0].current, 0, []);
-
-            // Summary mode: return counts by component name
             if (summaryMode) {
-                const counts = {};
-                for (const el of elements) {
-                    counts[el.component] = (counts[el.component] || 0) + 1;
+                var counts = {};
+                for (var j = 0; j < elements.length; j++) {
+                    counts[elements[j].component] = (counts[elements[j].component] || 0) + 1;
                 }
-                // Sort by count descending
-                const sorted = Object.entries(counts)
-                    .sort((a, b) => b[1] - a[1])
-                    .map(([name, count]) => ({ component: name, count }));
+                var sorted = Object.keys(counts).map(function(name) {
+                    return { component: name, count: counts[name] };
+                }).sort(function(a, b) { return b.count - a.count; });
                 return {
                     totalElements: elements.length,
                     uniqueComponents: sorted.length,
@@ -888,15 +1360,15 @@ export async function getScreenLayout(options = {}) {
             }
 
             return {
+                viewport: { width: viewportW, height: viewportH },
                 totalElements: elements.length,
                 elements: elements
             };
         })()
     `;
-    // Use a longer timeout for layout traversal — large component trees can exceed 10s
-    const result = await executeInApp(expression, false, { timeoutMs: 30000 });
-    // Apply TONL formatting if requested
-    if (format === "tonl" && result.success && result.result) {
+    const result = await executeInApp(resolveExpression, false, { timeoutMs: 30000 }, device);
+    // Format output as tree
+    if (result.success && result.result) {
         try {
             const parsed = JSON.parse(result.result);
             if (parsed.components) {
@@ -905,9 +1377,16 @@ export async function getScreenLayout(options = {}) {
                 return { success: true, result: tonl };
             }
             else if (parsed.elements) {
-                // Full element list
-                const tonl = formatScreenLayoutToTonl(parsed.elements);
-                return { success: true, result: tonl };
+                if (raw) {
+                    return {
+                        success: true,
+                        result: result.result,
+                        parsedElements: parsed.elements,
+                        viewport: parsed.viewport
+                    };
+                }
+                const tree = formatScreenLayoutTree(parsed.elements, extended);
+                return { success: true, result: tree };
             }
         }
         catch {
@@ -916,11 +1395,76 @@ export async function getScreenLayout(options = {}) {
     }
     return result;
 }
+/**
+ * Format enriched elements as an indented tree with tap coordinates in pixels.
+ * Same tree structure as get_screen_layout but with tap:(x,y) per node.
+ */
+function formatEnrichedLayoutTree(elements) {
+    return formatLayoutTree(elements, (el, indent, isLeaf) => {
+        const prefix = "  ".repeat(indent);
+        const frame = `(${Math.round(el.frame.x)},${Math.round(el.frame.y)} ${Math.round(el.frame.width)}x${Math.round(el.frame.height)})`;
+        const tap = ` tap:(${el.tapX},${el.tapY})`;
+        const id = el.identifiers?.testID || el.identifiers?.accessibilityLabel || "";
+        const idStr = id ? ` [${id}]` : "";
+        const textStr = el.text && isLeaf ? ` "${el.text}"` : "";
+        return `${prefix}${el.component} ${frame}${tap}${idStr}${textStr}`;
+    });
+}
+/**
+ * Enrich screen layout data with tap-ready pixel coordinates for bundling with screenshots.
+ * Converts points/dp frame coordinates to pixels using the device pixel ratio,
+ * computes center-point tapX/tapY for each element.
+ *
+ * @param pixelRatio - device pixel ratio (e.g., 3 for @3x iPhone)
+ * @param screenshotScaleFactor - if the screenshot image was scaled down, this factor adjusts coordinates
+ * @param device - optional target device name
+ * @returns formatted tree string with pixel coordinates, or null if unavailable
+ */
+export async function enrichScreenshotWithLayout(pixelRatio, screenshotScaleFactor, device) {
+    try {
+        const result = await getScreenLayout({ extended: false, summary: false, device, raw: true });
+        if (!result.success || !result.parsedElements || result.parsedElements.length === 0)
+            return null;
+        const elements = result.parsedElements.map((el) => {
+            const frame = el.frame || { x: 0, y: 0, width: 0, height: 0 };
+            // Convert center point from points/dp to screenshot pixels
+            // Points -> device pixels: multiply by pixelRatio
+            // Device pixels -> screenshot pixels: divide by screenshotScaleFactor (if image was resized)
+            const centerXPoints = frame.x + frame.width / 2;
+            const centerYPoints = frame.y + frame.height / 2;
+            const tapX = Math.round((centerXPoints * pixelRatio) / screenshotScaleFactor);
+            const tapY = Math.round((centerYPoints * pixelRatio) / screenshotScaleFactor);
+            // Convert frame to pixels too
+            const pixelFrame = {
+                x: Math.round((frame.x * pixelRatio) / screenshotScaleFactor),
+                y: Math.round((frame.y * pixelRatio) / screenshotScaleFactor),
+                width: Math.round((frame.width * pixelRatio) / screenshotScaleFactor),
+                height: Math.round((frame.height * pixelRatio) / screenshotScaleFactor),
+            };
+            return {
+                component: el.component,
+                frame: pixelFrame,
+                tapX,
+                tapY,
+                text: el.text,
+                identifiers: el.identifiers,
+                parentIndex: el.parentIndex,
+                originalIndex: el.originalIndex,
+                depth: el.depth,
+                path: el.path,
+            };
+        });
+        return formatEnrichedLayoutTree(elements);
+    }
+    catch {
+        return null; // Non-fatal: screenshot works without layout
+    }
+}
 /**
  * Inspect a specific component by name, returning its props, state, and layout.
  */
 export async function inspectComponent(componentName, options = {}) {
-    const { index = 0, includeState = true, includeChildren = false, childrenDepth = 1, shortPath = true, simplifyHooks = true } = options;
+    const { index = 0, includeState = true, includeChildren = false, childrenDepth = 1, shortPath = true, simplifyHooks = true, device } = options;
     const escapedName = componentName.replace(/'/g, "\\'");
     const expression = `
         (function() {
@@ -1126,13 +1670,13 @@ export async function inspectComponent(componentName, options = {}) {
             return result;
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, device);
 }
 /**
  * Find all components matching a name pattern and return summary info.
  */
 export async function findComponents(pattern, options = {}) {
-    const { maxResults = 20, includeLayout = false, shortPath = true, summary = false, format = "tonl" } = options;
+    const { maxResults = 20, includeLayout = false, shortPath = true, summary = false, format = "tonl", device } = options;
     const escapedPattern = pattern.replace(/'/g, "\\'").replace(/\\/g, "\\\\");
     const expression = `
         (function() {
@@ -1194,36 +1738,47 @@ export async function findComponents(pattern, options = {}) {
             function search(fiber, path, depth) {
                 if (!fiber || results.length >= maxResults) return;
 
-                const name = getComponentName(fiber);
-                if (name && regex.test(name)) {
-                    const entry = {
-                        component: name,
-                        path: formatPath(path),
-                        depth
-                    };
-
-                    if (fiber.memoizedProps?.testID) entry.testID = fiber.memoizedProps.testID;
-                    if (fiber.key) entry.key = fiber.key;
+                try {
+                    var name = getComponentName(fiber);
+                    if (name && regex.test(name)) {
+                        var entry = {
+                            component: name,
+                            path: formatPath(path),
+                            depth
+                        };
+
+                        if (fiber.memoizedProps && fiber.memoizedProps.testID) entry.testID = fiber.memoizedProps.testID;
+                        if (fiber.key) entry.key = fiber.key;
+
+                        if (includeLayout && fiber.memoizedProps && fiber.memoizedProps.style) {
+                            try {
+                                var layout = extractLayoutStyles(fiber.memoizedProps.style);
+                                if (layout) entry.layout = layout;
+                            } catch(e) {}
+                        }
 
-                    if (includeLayout && fiber.memoizedProps?.style) {
-                        const layout = extractLayoutStyles(fiber.memoizedProps.style);
-                        if (layout) entry.layout = layout;
+                        results.push(entry);
                     }
 
-                    results.push(entry);
-                }
-
-                let child = fiber.child;
-                while (child && results.length < maxResults) {
-                    const childName = getComponentName(child);
-                    search(child, childName ? [...path, childName] : path, depth + 1);
-                    child = child.sibling;
+                    var child = fiber.child;
+                    while (child && results.length < maxResults) {
+                        var childName = getComponentName(child);
+                        search(child, childName ? path.concat([childName]) : path, depth + 1);
+                        child = child.sibling;
+                    }
+                } catch(e) {
+                    try {
+                        var child = fiber.child;
+                        while (child && results.length < maxResults) {
+                            search(child, path, depth + 1);
+                            child = child.sibling;
+                        }
+                    } catch(e2) {}
                 }
             }
 
             search(roots[0].current, [], 0);
 
-            // Summary mode: just return counts by component name
             if (summaryMode) {
                 const counts = {};
                 for (const r of results) {
@@ -1247,19 +1802,16 @@ export async function findComponents(pattern, options = {}) {
             };
         })()
     `;
-    const result = await executeInApp(expression, false);
-    // Apply TONL formatting if requested
+    const result = await executeInApp(expression, false, {}, device);
     if (format === "tonl" && result.success && result.result) {
         try {
             const parsed = JSON.parse(result.result);
             if (parsed.components) {
                 if (parsed.totalMatches !== undefined) {
-                    // Summary mode
                     const tonl = formatSummaryToTonl(parsed.components, parsed.totalMatches);
                     return { success: true, result: `pattern: ${parsed.pattern}\n${tonl}` };
                 }
                 else {
-                    // Full list mode
                     const tonl = formatFoundComponentsToTonl(parsed.components);
                     return { success: true, result: `pattern: ${parsed.pattern}\nfound: ${parsed.found}\n${tonl}` };
                 }
@@ -1316,7 +1868,7 @@ export async function pressElement(options) {
             }
 
             function extractText(fiber, depth) {
-                if (!fiber || depth > 15) return '';
+                if (!fiber || depth > 5000) return '';
                 var parts = [];
                 var props = fiber.memoizedProps;
                 if (props) {
@@ -1399,7 +1951,95 @@ export async function pressElement(options) {
                 walkFiber(roots[ri].current, []);
             }
 
-            // Phase 2: If searching by component and no match found,
+            // Phase 2a: If searching by testID and no match found,
+            // the testID may be on a non-pressable/non-input wrapper — search ALL nodes
+            // for the testID and walk UP to find nearest pressable or input ancestor
+            if (matches.length === 0 && searchTestID !== null) {
+                var testIDCandidates = [];
+
+                function findByTestID(fiber, path) {
+                    if (!fiber) return;
+                    var name = getComponentName(fiber);
+                    var props = fiber.memoizedProps;
+                    if (name === 'RNSScreen' && props && props['aria-hidden'] === true) return;
+
+                    var tid = props && (props.testID || props.nativeID || null);
+                    if (tid === searchTestID) {
+                        testIDCandidates.push({ fiber: fiber, name: name || '(anonymous)', path: path.join(' > ') });
+                    }
+                    var child = fiber.child;
+                    while (child) {
+                        var childName = getComponentName(child);
+                        findByTestID(child, childName ? path.concat([childName]) : path);
+                        child = child.sibling;
+                    }
+                }
+
+                for (var ri3 = 0; ri3 < roots.length; ri3++) {
+                    findByTestID(roots[ri3].current, []);
+                }
+
+                // For each candidate, first check if the node itself is pressable/input,
+                // then walk UP to find nearest pressable/input ancestor
+                var maxDepthTID = ${maxTraversalDepth};
+                for (var ti = 0; ti < testIDCandidates.length; ti++) {
+                    var tCandidate = testIDCandidates[ti];
+                    var tProps = tCandidate.fiber.memoizedProps;
+                    var tIsPressable = tProps && typeof tProps.onPress === 'function';
+                    var tIsInput = !tIsPressable && tProps && (typeof tProps.onChangeText === 'function' || typeof tProps.onFocus === 'function');
+
+                    if (tIsPressable || tIsInput) {
+                        var text = extractText(tCandidate.fiber, 0);
+                        if (tIsInput) {
+                            var val = typeof tProps.value === 'string' ? tProps.value : '';
+                            var defVal = typeof tProps.defaultValue === 'string' ? tProps.defaultValue : '';
+                            var ph = typeof tProps.placeholder === 'string' ? tProps.placeholder : '';
+                            text = text || val || defVal || ph;
+                        }
+                        matches.push({
+                            fiber: tCandidate.fiber,
+                            name: tCandidate.name,
+                            text: text.substring(0, 100),
+                            testID: searchTestID,
+                            path: tCandidate.path,
+                            isInput: tIsInput
+                        });
+                        continue;
+                    }
+
+                    // Walk up to find pressable/input ancestor
+                    var tParent = tCandidate.fiber.return;
+                    var tDepth = 0;
+                    while (tParent && tDepth < maxDepthTID) {
+                        var tParentProps = tParent.memoizedProps;
+                        var parentIsPressable = tParentProps && typeof tParentProps.onPress === 'function';
+                        var parentIsInput = !parentIsPressable && tParentProps && (typeof tParentProps.onChangeText === 'function' || typeof tParentProps.onFocus === 'function');
+
+                        if (parentIsPressable || parentIsInput) {
+                            var text = extractText(tParent, 0);
+                            if (parentIsInput) {
+                                var val = typeof tParentProps.value === 'string' ? tParentProps.value : '';
+                                var defVal = typeof tParentProps.defaultValue === 'string' ? tParentProps.defaultValue : '';
+                                var ph = typeof tParentProps.placeholder === 'string' ? tParentProps.placeholder : '';
+                                text = text || val || defVal || ph;
+                            }
+                            matches.push({
+                                fiber: tParent,
+                                name: tCandidate.name,
+                                text: text.substring(0, 100),
+                                testID: tParentProps.testID || tParentProps.nativeID || searchTestID,
+                                path: tCandidate.path,
+                                isInput: parentIsInput
+                            });
+                            break;
+                        }
+                        tParent = tParent.return;
+                        tDepth++;
+                    }
+                }
+            }
+
+            // Phase 2b: If searching by component and no match found,
             // look for the component by name and walk UP to find nearest pressable ancestor
             if (matches.length === 0 && searchComponent !== null) {
                 var componentCandidates = [];
@@ -1469,49 +2109,136 @@ export async function pressElement(options) {
 
             var target = matches[targetIndex];
             try {
-                if (target.isInput) {
-                    // Input elements can't be pressed via fiber — return match info
-                    // so the orchestrator can fall through to accessibility/coordinate tap
-                    var result = {
-                        success: true,
-                        pressed: target.name,
-                        matchIndex: targetIndex,
-                        totalMatches: matches.length,
-                        text: target.text,
-                        testID: target.testID,
-                        path: target.path,
-                        isInput: true,
-                        needsNativeTap: true
-                    };
-                    if (matches.length > 1) {
-                        result.allMatches = matches.map(function(m, i) {
-                            return { index: i, component: m.name, text: m.text, testID: m.testID };
-                        });
-                    }
-                    return result;
-                }
-                target.fiber.memoizedProps.onPress();
-                var result = {
+                // Both pressable and input elements use native tap via measured coordinates.
+                // This ensures onPress wrappers, analytics, debouncing, and state tracking
+                // logic inside components is executed through React's event pipeline,
+                // rather than directly invoking the parent-supplied onPress prop.
+                var baseResult = {
                     success: true,
                     pressed: target.name,
                     matchIndex: targetIndex,
                     totalMatches: matches.length,
                     text: target.text,
                     testID: target.testID,
-                    path: target.path
+                    path: target.path,
+                    isInput: !!target.isInput,
+                    needsNativeTap: true,
+                    nativeTapTarget: null
                 };
                 if (matches.length > 1) {
-                    result.allMatches = matches.map(function(m, i) {
+                    baseResult.allMatches = matches.map(function(m, i) {
                         return { index: i, component: m.name, text: m.text, testID: m.testID };
                     });
                 }
-                return result;
+
+                // Walk down from the matched fiber to find a host component (tag === 5)
+                // whose screen position can be measured for a native tap.
+                // For inputs, prefer TextInput-specific hosts over generic RCTView.
+                var hostFiber = null;
+                var fallbackHost = null;
+                function findHostChild(fiber, depth) {
+                    if (!fiber || depth > 5000 || hostFiber) return;
+                    if (fiber.tag === 5 && fiber.stateNode) {
+                        var hostType = typeof fiber.type === 'string' ? fiber.type : '';
+                        if (target.isInput && (hostType.indexOf('TextInput') !== -1 || hostType.indexOf('textinput') !== -1)) {
+                            hostFiber = fiber;
+                            return;
+                        }
+                        if (!fallbackHost) fallbackHost = fiber;
+                    }
+                    var child = fiber.child;
+                    while (child) { findHostChild(child, depth + 1); child = child.sibling; }
+                }
+                if (target.fiber.tag === 5 && target.fiber.stateNode) {
+                    hostFiber = target.fiber;
+                } else {
+                    findHostChild(target.fiber, 0);
+                    if (!hostFiber) hostFiber = fallbackHost;
+                }
+
+                if (hostFiber && hostFiber.stateNode) {
+                    var sn = hostFiber.stateNode;
+
+                    // Fabric (New Architecture): stateNode.node is the shadow node.
+                    // nativeFabricUIManager.measure callback fires synchronously.
+                    var fabricUI = globalThis.nativeFabricUIManager;
+                    if (sn.node && fabricUI && typeof fabricUI.measure === 'function') {
+                        try {
+                            fabricUI.measure(sn.node, function(x, y, width, height, pageX, pageY) {
+                                if (width > 0 && height > 0) {
+                                    baseResult.nativeTapTarget = {
+                                        x: Math.round(pageX + width / 2),
+                                        y: Math.round(pageY + height / 2),
+                                        unit: 'points'
+                                    };
+                                }
+                            });
+
+                            // Modal offset correction: if the element is inside a native modal
+                            // (RNSModalScreen), measureInWindow returns coordinates relative to
+                            // the modal's window, not the screen. Detect and add the offset.
+                            if (baseResult.nativeTapTarget) {
+                                var modalNode = null;
+                                var screenStackNode = null;
+                                var ancestor = target.fiber.return;
+                                var walkCount = 0;
+                                while (ancestor && walkCount < 200) {
+                                    var aType = typeof ancestor.type === 'string' ? ancestor.type : '';
+                                    if (ancestor.tag === 5 && ancestor.stateNode && ancestor.stateNode.node) {
+                                        if (aType === 'RNSModalScreen' && !modalNode) modalNode = ancestor.stateNode.node;
+                                        if (aType === 'RNSScreenStack') screenStackNode = ancestor.stateNode.node;
+                                    }
+                                    ancestor = ancestor.return;
+                                    walkCount++;
+                                }
+                                if (modalNode && screenStackNode) {
+                                    var modalH = 0, stackH = 0;
+                                    fabricUI.measureInWindow(modalNode, function(mx, my, mw, mh) { modalH = mh; });
+                                    fabricUI.measureInWindow(screenStackNode, function(sx, sy, sw, sh) { stackH = sh; });
+                                    if (stackH > modalH && modalH > 0) {
+                                        baseResult.nativeTapTarget.y += (stackH - modalH);
+                                    }
+                                }
+                            }
+                        } catch (e) {
+                            // Measurement failed — fall through without coordinates
+                        }
+                    }
+
+                    // Old Architecture (Bridge): stateNode._nativeTag
+                    if (!baseResult.nativeTapTarget) {
+                        var nativeTag = sn._nativeTag || sn.__nativeTag;
+                        if (!nativeTag && typeof sn.getNativeTag === 'function') {
+                            nativeTag = sn.getNativeTag();
+                        }
+                        if (nativeTag) {
+                            var UIManager = globalThis.nativeModuleProxy && globalThis.nativeModuleProxy.UIManager;
+                            if (UIManager && typeof UIManager.measureInWindow === 'function') {
+                                try {
+                                    UIManager.measureInWindow(nativeTag, function(x, y, width, height) {
+                                        if (width > 0 && height > 0) {
+                                            baseResult.nativeTapTarget = {
+                                                x: Math.round(x + width / 2),
+                                                y: Math.round(y + height / 2),
+                                                unit: 'points'
+                                            };
+                                        }
+                                    });
+                                } catch (e) {
+                                    // Measurement failed
+                                }
+                            }
+                        }
+                    }
+                }
+
+                return baseResult;
             } catch (e) {
                 return { error: 'Handler threw: ' + (e.message || String(e)), component: target.name };
             }
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, options.device);
 }
 // ============================================================================
 // Coordinate-Based Element Inspection (via DevTools Inspector API)
@@ -1520,7 +2247,7 @@ export async function pressElement(options) {
  * Toggle the Element Inspector via DevSettings native module.
  * This enables the inspector overlay programmatically.
  */
-export async function toggleElementInspector() {
+export async function toggleElementInspector(device) {
     const expression = `
         (function() {
             const ds = globalThis.nativeModuleProxy?.DevSettings;
@@ -1539,12 +2266,12 @@ export async function toggleElementInspector() {
             }
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, device);
 }
 /**
  * Check if the Element Inspector overlay is currently active.
  */
-export async function isInspectorActive() {
+export async function isInspectorActive(device) {
     const expression = `
         (function() {
             const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -1560,7 +2287,7 @@ export async function isInspectorActive() {
             if (roots.length === 0) return false;
 
             function findComponent(fiber, targetName, depth = 0) {
-                if (!fiber || depth > 100) return null;
+                if (!fiber || depth > 5000) return null;
                 const name = fiber.type?.displayName || fiber.type?.name;
                 if (name === targetName) return fiber;
                 let child = fiber.child;
@@ -1575,7 +2302,7 @@ export async function isInspectorActive() {
             return !!findComponent(roots[0].current, 'InspectorPanel');
         })()
     `;
-    const result = await executeInApp(expression, false);
+    const result = await executeInApp(expression, false, {}, device);
     if (result.success && result.result) {
         return result.result === "true";
     }
@@ -1586,7 +2313,7 @@ export async function isInspectorActive() {
  * This reads the InspectorPanel component's props to get the hierarchy, frame, and style.
  * Requires the Element Inspector to be enabled and an element to be selected.
  */
-export async function getInspectorSelection() {
+export async function getInspectorSelection(device) {
     const expression = `
         (function() {
             const hook = globalThis.__REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -1602,28 +2329,29 @@ export async function getInspectorSelection() {
             }
             if (roots.length === 0) return { error: 'No fiber roots found.' };
 
-            // Find InspectorPanel component
-            function findComponent(fiber, targetName, depth = 0) {
-                if (!fiber || depth > 100) return null;
+            // Find all InspectorPanel instances (apps with modals may have multiple)
+            function findAllPanels(fiber, targetName, depth, results) {
+                if (!fiber || depth > 5000) return;
                 const name = fiber.type?.displayName || fiber.type?.name;
-                if (name === targetName) return fiber;
+                if (name === targetName) results.push(fiber);
                 let child = fiber.child;
                 while (child) {
-                    const found = findComponent(child, targetName, depth + 1);
-                    if (found) return found;
+                    findAllPanels(child, targetName, depth + 1, results);
                     child = child.sibling;
                 }
-                return null;
             }
 
-            const panelFiber = findComponent(roots[0].current, 'InspectorPanel');
-            if (!panelFiber) {
+            const panels = [];
+            findAllPanels(roots[0].current, 'InspectorPanel', 0, panels);
+            if (panels.length === 0) {
                 return {
                     error: 'Element Inspector is not active.',
                     hint: 'Use toggle_element_inspector to enable the inspector, then tap an element to select it.'
                 };
             }
 
+            // Prefer the panel that has an active selection
+            const panelFiber = panels.find(p => p.memoizedProps.hierarchy?.length > 0) || panels[0];
             const props = panelFiber.memoizedProps;
             if (!props.hierarchy || props.hierarchy.length === 0) {
                 return {
@@ -1659,7 +2387,7 @@ export async function getInspectorSelection() {
             };
         })()
     `;
-    return executeInApp(expression, false);
+    return executeInApp(expression, false, {}, device);
 }
 /**
  * Inspect the React component at a specific (x, y) coordinate.
@@ -1674,7 +2402,7 @@ export async function getInspectorSelection() {
  *   coordinates, return the innermost matching React component.
  */
 export async function inspectAtPoint(x, y, options = {}) {
-    const { includeProps = true, includeFrame = true } = options;
+    const { includeProps = true, includeFrame = true, device } = options;
     // --- Step 1: walk fiber tree + dispatch measureInWindow calls ---
     const dispatchExpression = `
         (function() {
@@ -1736,7 +2464,7 @@ export async function inspectAtPoint(x, y, options = {}) {
             return { count: hostFibers.length };
         })()
     `;
-    const dispatchResult = await executeInApp(dispatchExpression, false);
+    const dispatchResult = await executeInApp(dispatchExpression, false, {}, device);
     if (!dispatchResult.success)
         return dispatchResult;
     try {
@@ -1782,7 +2510,7 @@ export async function inspectAtPoint(x, y, options = {}) {
 
             // RN primitives and internal components to skip when surfacing the "element" name.
             // We want the nearest *custom* component, not a library wrapper.
-            var RN_PRIMITIVES = /^(View|Text|Image|ScrollView|FlatList|SectionList|TextInput|TouchableOpacity|TouchableHighlight|TouchableNativeFeedback|TouchableWithoutFeedback|Pressable|Button|Switch|ActivityIndicator|Modal|SafeAreaView|KeyboardAvoidingView|Animated\\(.*|withAnimated.*|ForwardRef.*|memo\\(.*|Context\\.Consumer|Context\\.Provider|VirtualizedList.*|CellRenderer.*|FrameSizeProvider|MaybeScreenContainer|RCT.*|RNS.*|Navigation.*|Screen$|ScreenStack|ScreenContainer|ScreenContentWrapper|SceneView|DelayedFreeze|Freeze|Suspender|DebugContainer|StaticContainer|Expo.*|LinearGradient|ViewManagerAdapter_.*|Svg.*|Defs|Path|Rect|Circle|G|Line|Polygon|Polyline|Ellipse|ClipPath|GestureHandler.*|NativeViewGestureHandler|Reanimated.*|BottomTabNavigator|TabLayout|RouteNode|Route$|MaybeScreen|SafeAreaProvider.*|GestureDetector|PanGestureHandler|DropShadow|BlurView|MaskedView.*)$/;
+            var RN_PRIMITIVES = /^(View|Text|Image|ScrollView|FlatList|SectionList|TextInput|TouchableOpacity|TouchableHighlight|TouchableNativeFeedback|TouchableWithoutFeedback|Pressable|Button|Switch|ActivityIndicator|SafeAreaView|KeyboardAvoidingView|Animated\\(.*|withAnimated.*|ForwardRef.*|memo\\(.*|Context\\.Consumer|Context\\.Provider|VirtualizedList.*|CellRenderer.*|FrameSizeProvider|MaybeScreenContainer|RCT.*|RNS.*|Navigation.*|Screen$|ScreenStack|ScreenContainer|ScreenContentWrapper|SceneView|DelayedFreeze|Freeze|Suspender|DebugContainer|StaticContainer|Expo.*|LinearGradient|ViewManagerAdapter_.*|Svg.*|Defs|Path|Rect|Circle|G|Line|Polygon|Polyline|Ellipse|ClipPath|GestureHandler.*|NativeViewGestureHandler|Reanimated.*|BottomTabNavigator|TabLayout|RouteNode|Route$|MaybeScreen|SafeAreaProvider.*|GestureDetector|PanGestureHandler|DropShadow|BlurView|MaskedView.*)$/;
 
             function getNearestNamed(fiber, skipPrimitives) {
                 var cur = fiber;
@@ -1872,6 +2600,6 @@ export async function inspectAtPoint(x, y, options = {}) {
             return result;
         })()
     `;
-    return executeInApp(resolveExpression, false);
+    return executeInApp(resolveExpression, false, {}, device);
 }
 //# sourceMappingURL=executor.js.map