@qontinui/ui-bridge-native 0.5.1 → 0.6.1

package/dist/index.js

@@ -256,7 +256,18 @@ var NativeUIBridgeRegistry = class {
     return Array.from(this.elements.values());
   }
   /**
-   * Get all registered elements that are visible and have a layout
+   * Get all registered elements that are visible AND have a measured layout.
+   *
+   * This is the *strict* visibility filter: requires `state.visible === true`
+   * AND `state.layout !== null`. Use this when you need both signals
+   * (e.g. coord-based tap, where you need an actual rect to hit-test against).
+   *
+   * Callers driving an LLM agent typically want
+   * {@link getMountedVisibleElements} instead — that variant accepts
+   * elements that *should* be on screen (visible:true) but whose first
+   * `onLayout` has not yet fired. Without it, a snapshot taken in the gap
+   * between mount and the first layout pass returns 0 elements on a fully
+   * populated screen.
    */
   getVisibleElements() {
     return this.getAllElements().filter((e) => {
@@ -264,6 +275,26 @@ var NativeUIBridgeRegistry = class {
       return state.visible && state.layout !== null;
     });
   }
+  /**
+   * Get all registered elements marked as visible (regardless of layout).
+   *
+   * Looser than {@link getVisibleElements}: includes elements whose
+   * `onLayout` callback has not yet fired (so `layout === null`). React
+   * Native's `onLayout` is async — there's a one-tick window after mount
+   * where elements are in the tree, the user *sees* them, but the
+   * registry hasn't received their measurements yet. Excluding those
+   * elements makes `getSnapshot?visibleOnly=true` return 0 on a populated
+   * screen, which is a worse failure mode than including a few elements
+   * we can't yet locate spatially.
+   *
+   * Used by `createSnapshot`'s `visibleOnly` filter and by the
+   * `getSnapshot` / `getElements` handlers. Each emitted element carries a
+   * `visibility` discriminator (`"visible"` / `"likely-visible"`) so
+   * agents that *do* require a known rect can branch downstream.
+   */
+  getMountedVisibleElements() {
+    return this.getAllElements().filter((e) => e.getState().visible);
+  }
   /**
    * Get elements registered on a specific route (for page-scoped filtering)
    */
@@ -538,7 +569,7 @@ var NativeUIBridgeRegistry = class {
       }
       return { currentRoute: null, segments: void 0 };
     })();
-    let elements = options?.visibleOnly ? this.getVisibleElements() : this.getAllElements();
+    let elements = options?.visibleOnly ? this.getMountedVisibleElements() : this.getAllElements();
     if (options?.currentRouteOnly && resolvedRoute.currentRoute) {
       const currentRoute = resolvedRoute.currentRoute;
       elements = elements.filter((e) => e.registrationRoute === currentRoute);
@@ -547,16 +578,19 @@ var NativeUIBridgeRegistry = class {
       timestamp: Date.now(),
       elements: elements.map((e) => {
         const handlers = extractHandlerNames(e.props);
+        const state = e.getState();
+        const visibility = !state.visible ? "hidden" : state.layout !== null ? "visible" : "likely-visible";
         return {
           id: e.id,
           type: e.type,
           label: e.label,
           identifier: e.getIdentifier(),
-          state: e.getState(),
+          state,
           actions: e.actions,
           customActions: e.customActions ? Object.keys(e.customActions) : void 0,
           registeredHandlers: handlers.length > 0 ? handlers : void 0,
-          registrationRoute: e.registrationRoute
+          registrationRoute: e.registrationRoute,
+          visibility
         };
       }),
       components: this.getAllComponents().map((c) => ({
@@ -1950,22 +1984,25 @@ function createServerHandlers(registry, executor, config) {
     getElements: async (ctx) => {
       const visibleOnly = ctx.query?.visibleOnly === "true" || ctx.body?.visibleOnly === true;
       const forRoute = ctx.query?.route || ctx.body?.route;
-      let allElements = visibleOnly ? registry.getVisibleElements() : registry.getAllElements();
+      let allElements = visibleOnly ? registry.getMountedVisibleElements() : registry.getAllElements();
       if (forRoute) {
         allElements = allElements.filter((e) => e.registrationRoute === forRoute);
       }
       const elements = allElements.map((e) => {
         const handlers = extractHandlerNames(e.props);
+        const state = e.getState();
+        const visibility = !state.visible ? "hidden" : state.layout !== null ? "visible" : "likely-visible";
         return {
           id: e.id,
           type: e.type,
           label: e.label,
           identifier: e.getIdentifier(),
-          state: e.getState(),
+          state,
           actions: e.actions,
           customActions: e.customActions ? Object.keys(e.customActions) : void 0,
           registeredHandlers: handlers.length > 0 ? handlers : void 0,
-          registrationRoute: e.registrationRoute
+          registrationRoute: e.registrationRoute,
+          visibility
         };
       });
       return success2({ elements });
@@ -2228,6 +2265,37 @@ function createServerHandlers(registry, executor, config) {
         "NOT_SUPPORTED"
       );
     },
+    // AI helpers — runner-only endpoints that have no React Native analog.
+    //
+    // The mobile bridge mounts explicit NOT_SUPPORTED stubs at the runner's
+    // cheatsheet paths so callers (and the /manual-test skill in particular)
+    // get a structured envelope explaining the gap rather than a confusing
+    // HTTP 404. Each error message names an in-tree mobile replacement so
+    // operators aren't left guessing what to use instead.
+    aiForms: async () => {
+      return error2(
+        'ai/forms (form discovery) is runner-only; mobile React Native has no DOM to walk. Use GET /ui-bridge/control/snapshot and filter for type === "input" instead.',
+        "NOT_SUPPORTED"
+      );
+    },
+    aiIdleStatus: async () => {
+      return error2(
+        'ai/idle-status (page-idle signal) is runner-only; mobile React Native has no DOM-mutation / network-idle signals. Use the registry event stream (WS subscribe to "element:registered"/"element:stateChanged") or poll /control/snapshot for stability.',
+        "NOT_SUPPORTED"
+      );
+    },
+    aiChangeBufferEnable: async () => {
+      return error2(
+        'ai/change-buffer (DOM mutation diff buffer) is runner-only; mobile React Native has no DOM. Use the WS event bridge (subscribe to "element:registered"/"element:unregistered"/"element:stateChanged") for change notifications.',
+        "NOT_SUPPORTED"
+      );
+    },
+    aiWaitForElement: async () => {
+      return error2(
+        'POST /ai/wait-for-element is runner-only on mobile. Use the WS "waitForElement" JSON-RPC method or "waitForCondition" instead \u2014 same semantics, no HTTP polling overhead.',
+        "NOT_SUPPORTED"
+      );
+    },
     // Meta / Introspection (stub — server constructor overrides with real route table)
     getMethods: async () => {
       return error2("Methods introspection not configured", "NOT_SUPPORTED");
@@ -2883,6 +2951,24 @@ var WS_ROUTES = [
   { pattern: "meta/methods", handler: "getMethods", httpMethods: ["GET"] },
   // AI helpers — mobile parity with the runner's `/ui-bridge/ai/*` family.
   { pattern: "ai/fill-form", handler: "fillForm", httpMethods: ["POST"] },
+  // AI helpers — NOT_SUPPORTED stubs. These endpoints exist on the runner-side
+  // UI Bridge surface (and the /manual-test skill's cheatsheet documents them
+  // as if they're universally available). Mobile React Native has no DOM, so
+  // the mobile bridge mounts explicit stubs so callers get a structured
+  // NOT_SUPPORTED envelope (with a hint pointing at the mobile-native
+  // replacement) instead of a confusing HTTP 404.
+  { pattern: "ai/forms", handler: "aiForms", httpMethods: ["GET"] },
+  { pattern: "ai/idle-status", handler: "aiIdleStatus", httpMethods: ["GET"] },
+  {
+    pattern: "ai/change-buffer/enable",
+    handler: "aiChangeBufferEnable",
+    httpMethods: ["POST"]
+  },
+  {
+    pattern: "ai/wait-for-element",
+    handler: "aiWaitForElement",
+    httpMethods: ["POST"]
+  },
   // Coord-based tap — synthesizes a press at the given screen coords by
   // matching against registered elements' layout rects.
   { pattern: "control/tap", handler: "tapAt", httpMethods: ["POST"] },
@@ -2955,6 +3041,10 @@ var HANDLER_DESCRIPTIONS = {
   diffBaseline: "Diff current UI against a saved baseline",
   getMethods: "List every handler name (legacy introspection)",
   fillForm: "Fill multiple inputs in one call: body { fields: [{elementId, value}] } \u2014 each field dispatches `type` + `clear:true`",
+  aiForms: 'STUB \u2014 runner-only; mobile returns NOT_SUPPORTED. Use /control/snapshot + filter type==="input" instead.',
+  aiIdleStatus: "STUB \u2014 runner-only; mobile returns NOT_SUPPORTED. Subscribe to registry events over WS for change signals.",
+  aiChangeBufferEnable: "STUB \u2014 runner-only; mobile returns NOT_SUPPORTED. Use WS event subscriptions for change notifications.",
+  aiWaitForElement: "STUB \u2014 runner-only; mobile returns NOT_SUPPORTED. Use the WS waitForElement / waitForCondition JSON-RPC methods.",
   tapAt: "Synthesize a press at given screen coords by matching registered element layout rects: body { x, y, action? }",
   getConsoleErrors: "TEST HOOK \u2014 last-N console.error/console.warn entries; ?since=<ms>&limit=<n>",
   getNetworkRequests: "TEST HOOK \u2014 last-N fetch/XHR entries with status + duration; ?since=<ms>&limit=<n>",
@@ -5075,6 +5165,24 @@ function flattenStateStyles(stateStyles) {
   if (stateStyles.disabled != null) result.disabled = flattenStyle(stateStyles.disabled);
   return Object.keys(result).length > 0 ? result : void 0;
 }
+var warnedDeadButtonIds = /* @__PURE__ */ new Set();
+function scheduleDeadButtonWarning(bridge, id, type) {
+  if (type !== "button" && type !== "pressable") return;
+  if (warnedDeadButtonIds.has(id)) return;
+  if (!bridge) return;
+  setTimeout(() => {
+    if (warnedDeadButtonIds.has(id)) return;
+    const element = bridge.registry.getElement(id);
+    if (!element) return;
+    const props = element.props ?? {};
+    const hasPress = typeof props.onPress === "function" || typeof props.onPressIn === "function" || typeof props.onResponderRelease === "function";
+    if (hasPress) return;
+    warnedDeadButtonIds.add(id);
+    console.warn(
+      `[UI Bridge] Registered \`${type}\` element "${id}" without an \`onPress\` handler \u2014 UI Bridge \`press\` actions on this element will fail with "No press handler found on element". Use \`useUIElementWithProps\` and \`captureProps({onPress})\` instead.`
+    );
+  }, 0);
+}
 function useUIElement(options) {
   const bridge = useUIBridgeNativeOptional();
   const ref = react.useRef(null);
@@ -5121,6 +5229,7 @@ function useUIElement(options) {
     registeredRef.current = true;
     registeredIdRef.current = id;
     setRegistered(true);
+    scheduleDeadButtonWarning(bridge, id, type);
   }, [bridge, id, type, label, actions, customActions, treePath, style, stateStylesProp]);
   const unregister = react.useCallback(() => {
     if (!bridge || !registeredRef.current) return;
@@ -5180,30 +5289,42 @@ function useUIElement(options) {
     const node = ref.current;
     if (!node || typeof node.measureInWindow !== "function") return;
     let cancelled = false;
-    node.measureInWindow((pageX, pageY, w, h) => {
-      if (cancelled) return;
-      if (w <= 0 || h <= 0) return;
-      const newLayout = {
-        x: pageX,
-        y: pageY,
-        width: w,
-        height: h,
-        pageX,
-        pageY
-      };
-      setLayout(newLayout);
-      const newState = {
-        mounted: true,
-        visible: true,
-        enabled: true,
-        focused: false,
-        layout: newLayout
-      };
-      bridge.registry.updateElementState(id, newState);
-      onStateChangeRef.current?.(newState);
-    });
+    let pendingTimer = null;
+    const backoffMs = [50, 200, 500, 1e3, 2500];
+    let attempt = 0;
+    const tryMeasure = () => {
+      if (cancelled || !node.measureInWindow) return;
+      node.measureInWindow((pageX, pageY, w, h) => {
+        if (cancelled) return;
+        if (w > 0 && h > 0) {
+          const newLayout = {
+            x: pageX,
+            y: pageY,
+            width: w,
+            height: h,
+            pageX,
+            pageY
+          };
+          setLayout(newLayout);
+          const newState = {
+            mounted: true,
+            visible: true,
+            enabled: true,
+            focused: false,
+            layout: newLayout
+          };
+          bridge.registry.updateElementState(id, newState);
+          onStateChangeRef.current?.(newState);
+          return;
+        }
+        if (attempt >= backoffMs.length) return;
+        pendingTimer = setTimeout(tryMeasure, backoffMs[attempt++]);
+      });
+    };
+    tryMeasure();
     return () => {
       cancelled = true;
+      if (pendingTimer != null) clearTimeout(pendingTimer);
     };
   }, [bridge, registered, id]);
   const registeredHandlerKeysRef = react.useRef([]);
@@ -5696,6 +5817,31 @@ var UI_BRIDGE_NATIVE_ROUTES = {
     path: "/ui-bridge/ai/fill-form",
     description: "Fill multiple input elements in a single call"
   },
+  // AI helpers (NOT_SUPPORTED stubs) — these endpoints exist on the runner-side
+  // UI Bridge surface but have no analog on mobile React Native. The mobile
+  // bridge registers explicit stubs so callers get a structured NOT_SUPPORTED
+  // envelope instead of a confusing HTTP 404. The mobile bridge's snapshot +
+  // `/control/find` already cover what an operator would reach for these for.
+  AI_FORMS: {
+    method: "GET",
+    path: "/ui-bridge/ai/forms",
+    description: "Discover forms (runner-only; mobile returns NOT_SUPPORTED)"
+  },
+  AI_IDLE_STATUS: {
+    method: "GET",
+    path: "/ui-bridge/ai/idle-status",
+    description: "Get page-idle signal (runner-only; mobile returns NOT_SUPPORTED)"
+  },
+  AI_CHANGE_BUFFER_ENABLE: {
+    method: "POST",
+    path: "/ui-bridge/ai/change-buffer/enable",
+    description: "Enable DOM change buffer (runner-only; mobile returns NOT_SUPPORTED)"
+  },
+  AI_WAIT_FOR_ELEMENT: {
+    method: "POST",
+    path: "/ui-bridge/ai/wait-for-element",
+    description: "Wait for element predicate via HTTP (runner-only; mobile returns NOT_SUPPORTED \u2014 use WS waitForElement instead)"
+  },
   // Test hooks — drive ModalDetector state from outside the React tree
   // (gated by `features.testHooks`). Mirrors `pushModal` / `dismissModal`
   // calls that components normally make in-process.