@qontinui/ui-bridge-native 0.6.7 → 0.6.9

package/dist/react/index.js

@@ -28,7 +28,7 @@ function inferActions(type) {
     case "pressable":
       return [...baseActions, "click", "press", "longPress", "doubleTap"];
     case "input":
-      return [...baseActions, "click", "press", "type", "clear"];
+      return [...baseActions, "click", "press", "type", "setValue", "clear"];
     case "text":
       return [...baseActions, "click", "press", "longPress"];
     case "view":
@@ -990,6 +990,8 @@ var DefaultNativeActionExecutor = class {
         return this.performDoubleTap(props);
       case "type":
         return this.performType(element, props, params);
+      case "setValue":
+        return this.performSetValue(element, props, params);
       case "clear":
         return this.performClear(element, props);
       case "focus":
@@ -1082,6 +1084,38 @@ var DefaultNativeActionExecutor = class {
       this.registry.updateElementState(element.id, { value: params.text });
     }
   }
+  /**
+   * Perform setValue action.
+   *
+   * Web/runner UI Bridge parity: `setValue` replaces the input's value
+   * atomically in a single call (no per-character keystroke simulation),
+   * mirroring the web bridge's `setValue` semantics. On native there is no
+   * DOM value to assign, so we drive the controlled-input handler
+   * (`onChangeText`, falling back to `onChange`) with the full string. The
+   * registry's `state.value` is then synced so a subsequent GET on the
+   * element reflects the new value.
+   *
+   * Unlike `type`, this does not append to existing content and ignores
+   * `delay` — it is the deterministic "set the field to exactly this" action.
+   */
+  async performSetValue(element, props, params) {
+    const next = typeof params?.text === "string" ? params.text : typeof params?.value === "string" ? params.value : void 0;
+    if (typeof next !== "string") {
+      throw new Error('setValue action requires a string "text" (or "value") parameter');
+    }
+    if (typeof props.onChangeText === "function") {
+      props.onChangeText(next);
+    } else if (typeof props.onChange === "function") {
+      props.onChange({
+        nativeEvent: { text: next }
+      });
+    } else {
+      throw new Error("No text change handler found on element");
+    }
+    if (element) {
+      this.registry.updateElementState(element.id, { value: next });
+    }
+  }
   /**
    * Perform clear action
    */
@@ -2045,6 +2079,35 @@ function diagnosePageHealth(elements, viewport) {
 }
 
 // src/server/handlers.ts
+function matchElementsByText(registry, text, opts) {
+  const needle = text.toLowerCase();
+  const contains = (v) => typeof v === "string" && v.toLowerCase().includes(needle);
+  let all = registry.getAllElements();
+  if (opts?.visibleOnly) {
+    all = all.filter((e) => e.getState().visible);
+  }
+  const scored = [];
+  for (const e of all) {
+    let rank = Number.POSITIVE_INFINITY;
+    if (contains(e.label)) rank = Math.min(rank, 0);
+    const ident = e.getIdentifier();
+    if (ident) {
+      if (contains(ident.testId)) rank = Math.min(rank, 1);
+      if (contains(ident.accessibilityLabel)) rank = Math.min(rank, 1);
+      if (contains(ident.treePath)) rank = Math.min(rank, 1);
+      if (contains(ident.uiId)) rank = Math.min(rank, 1);
+    }
+    if (rank === Number.POSITIVE_INFINITY) {
+      const handlers = extractHandlerNames(e.props);
+      if (handlers.some((h) => h.toLowerCase().includes(needle))) rank = 2;
+    }
+    if (rank !== Number.POSITIVE_INFINITY) {
+      scored.push({ rank, element: { id: e.id, type: e.type, label: e.label } });
+    }
+  }
+  scored.sort((a, b) => a.rank - b.rank);
+  return scored.map((s) => s.element);
+}
 async function executeWorkflowStep(step, registry, executor) {
   const startTime = Date.now();
   try {
@@ -2641,6 +2704,89 @@ function createServerHandlers(registry, executor, config) {
       const failedCount = results.length - succeededCount;
       return success2({ results, succeededCount, failedCount });
     },
+    // ========================================================================
+    // App-agnostic interaction parity (cross-platform `/control/page/*`)
+    //
+    // Mirrors the web/runner convenience endpoints so the SAME contract drives
+    // mobile. Text/label interactions compose `executor.find` (registry-based
+    // discovery) + `executor.executeAction` (press/type). Selector-only
+    // variants have no React-Native analog and return NOT_SUPPORTED — the
+    // mobile bridge's snapshot + `/control/find` (testID / accessibilityLabel)
+    // cover what a selector would on web.
+    // ========================================================================
+    clickByText: async (ctx) => {
+      const body = ctx.body;
+      const text = typeof body?.text === "string" ? body.text.trim() : "";
+      if (!text) {
+        return error2("text is required and must not be empty", "INVALID_REQUEST");
+      }
+      const match = matchElementsByText(registry, text, { visibleOnly: body?.visibleOnly })[0];
+      if (!match) {
+        return error2(`No element found with text "${text}"`, "ELEMENT_NOT_FOUND");
+      }
+      const response = await executor.executeAction(match.id, { action: "press" });
+      if (!response.success) {
+        return error2(response.error || "Press failed", "ACTION_FAILED");
+      }
+      return success2({
+        clicked: true,
+        element: { id: match.id, type: match.type, label: match.label }
+      });
+    },
+    clickBySelector: async () => {
+      return error2(
+        "clickBySelector is not supported on native platform \u2014 React Native has no CSS-selector DOM. Use clickByText, or /control/find with testIdPattern/accessibilityLabelPattern then /control/element/:id/action.",
+        "NOT_SUPPORTED"
+      );
+    },
+    typeInto: async (ctx) => {
+      const body = ctx.body;
+      const label = typeof body?.label === "string" ? body.label.trim() : "";
+      if (!label) {
+        return error2(
+          "label is required on native (selector-based typeInto is web-only)",
+          "INVALID_REQUEST"
+        );
+      }
+      const text = typeof body?.text === "string" ? body.text : "";
+      const match = matchElementsByText(registry, label, { visibleOnly: body?.visibleOnly })[0];
+      if (!match) {
+        return error2(`No input found for label "${label}"`, "ELEMENT_NOT_FOUND");
+      }
+      const response = await executor.executeAction(match.id, {
+        action: "type",
+        params: { text, clear: body?.clear === true }
+      });
+      if (!response.success) {
+        return error2(response.error || "Type failed", "ACTION_FAILED");
+      }
+      return success2({
+        typed: true,
+        element: { id: match.id, type: match.type, label: match.label }
+      });
+    },
+    readValue: async () => {
+      return error2(
+        "readValue is not supported on native platform \u2014 React Native has no CSS-selector DOM. Use /control/element/:id/state to read an element value.",
+        "NOT_SUPPORTED"
+      );
+    },
+    findByText: async (ctx) => {
+      const body = ctx.body;
+      const text = typeof body?.text === "string" ? body.text.trim() : "";
+      if (!text) {
+        return error2("text is required and must not be empty", "INVALID_REQUEST");
+      }
+      const matches = matchElementsByText(registry, text, { visibleOnly: body?.visibleOnly });
+      return success2(
+        matches.map((el, index) => ({
+          index,
+          id: el.id,
+          type: el.type,
+          label: el.label
+        }))
+      );
+    },
     // Coord-based tap
     //
     // Synthesizes a press at the given screen coordinates by scanning the
@@ -2735,7 +2881,8 @@ function createServerHandlers(registry, executor, config) {
         return success2({
           entries: [],
           count: 0,
-          bufferSize: 0
+          bufferSize: 0,
+          installed: false
         });
       }
       const entries = buf.entries({
@@ -2745,7 +2892,8 @@ function createServerHandlers(registry, executor, config) {
       return success2({
         entries,
         count: entries.length,
-        bufferSize: buf.size()
+        bufferSize: buf.size(),
+        installed: buf.isInstalled()
       });
     },
     getNetworkRequests: async (ctx) => {
@@ -2756,7 +2904,8 @@ function createServerHandlers(registry, executor, config) {
         return success2({
           entries: [],
           count: 0,
-          bufferSize: 0
+          bufferSize: 0,
+          installed: false
         });
       }
       const entries = buf.entries({
@@ -2766,7 +2915,8 @@ function createServerHandlers(registry, executor, config) {
       return success2({
         entries,
         count: entries.length,
-        bufferSize: buf.size()
+        bufferSize: buf.size(),
+        installed: buf.isInstalled()
       });
     },
     // Test hooks — modal stack manipulation
@@ -3185,7 +3335,10 @@ var WS_ROUTES = [
   // same handler at both paths to keep agents portable across platforms.
   { pattern: "ai/find", handler: "find", httpMethods: ["POST"] },
   { pattern: "control/snapshot", handler: "getSnapshot", httpMethods: ["GET"] },
-  { pattern: "control/discover", handler: "getSnapshot" },
+  // Discovery alias — web/runner parity with `POST /control/discover` (a
+  // legacy alias for snapshot/find). Mounted on HTTP (GET+POST) so mobile
+  // doesn't 404 where web returns 200; delegates to the snapshot handler.
+  { pattern: "control/discover", handler: "getSnapshot", httpMethods: ["GET", "POST"] },
   // Page health — accepts both GET and POST so the canonical skill invocation
   // (`POST .../control/page-health` with an empty body) and ad-hoc curls both
   // work without a body-shape gotcha.
@@ -3247,6 +3400,17 @@ var WS_ROUTES = [
   // 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"] },
+  // App-agnostic interaction parity — mirrors the web/runner convenience
+  // endpoints (`/control/page/click-by-text` etc.) so the SAME cross-platform
+  // contract drives mobile. Text/label-based interactions compose
+  // `executor.find` + `executor.executeAction` over the registry; the
+  // DOM-selector-only variants (`click-by-selector`, `read-value`) have no RN
+  // analog and return a structured NOT_SUPPORTED envelope.
+  { pattern: "control/page/click-by-text", handler: "clickByText", httpMethods: ["POST"] },
+  { pattern: "control/page/click-by-selector", handler: "clickBySelector", httpMethods: ["POST"] },
+  { pattern: "control/page/type-into", handler: "typeInto", httpMethods: ["POST"] },
+  { pattern: "control/page/read-value", handler: "readValue", httpMethods: ["POST"] },
+  { pattern: "control/page/find-by-text", handler: "findByText", httpMethods: ["POST"] },
   // Test hooks — gated behind `features.testHooks`. Let external runners
   // drive the ModalDetector over HTTP so tests can flip `snapshot.modalStack`
   // without mounting React components.
@@ -3268,19 +3432,26 @@ var WS_ROUTES = [
     httpMethods: ["POST"],
     requiresTestHooks: true
   },
-  // Observability — last-N console errors + network requests. testHooks-gated
-  // because patching `console.error` / `fetch` is invasive in production.
+  // Observability — last-N console errors + network requests.
+  //
+  // Always mounted (not testHooks-gated) so they return a schema-valid 200
+  // on every build instead of a 404 that agents can't distinguish from a
+  // missing route. The INVASIVE part — monkey-patching `console.error` /
+  // `fetch` / `XMLHttpRequest` — stays gated behind `testHooks` (see
+  // NativeUIBridgeServer.start → buffer.install()). When the patches aren't
+  // installed the handlers report `installed: false` + empty entries, so
+  // production builds expose the contract without observing real users'
+  // console/network traffic. Set `features.testHooks` (typically on
+  // `__DEV__`) to populate the buffers with live data.
   {
     pattern: "control/console-errors",
     handler: "getConsoleErrors",
-    httpMethods: ["GET"],
-    requiresTestHooks: true
+    httpMethods: ["GET"]
   },
   {
     pattern: "sdk/network-requests",
     handler: "getNetworkRequests",
-    httpMethods: ["GET"],
-    requiresTestHooks: true
+    httpMethods: ["GET"]
   }
 ];
 var HANDLER_DESCRIPTIONS = {
@@ -3322,8 +3493,13 @@ var HANDLER_DESCRIPTIONS = {
   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>",
+  clickByText: "App-agnostic: press the first element matching free-text (label/accessibilityLabel/testID): body { text, visibleOnly? }",
+  clickBySelector: "STUB \u2014 selector-based; NOT_SUPPORTED on native (no DOM). Use clickByText or /control/find + /control/element/:id/action.",
+  typeInto: "App-agnostic: type into the input matching a label: body { label, text, clear?, visibleOnly? }. (selector form is web-only)",
+  readValue: "STUB \u2014 selector-based; NOT_SUPPORTED on native (no DOM). Use /control/element/:id/state to read a value.",
+  findByText: "App-agnostic: list elements matching free-text (no press): body { text, visibleOnly? }",
+  getConsoleErrors: "Last-N console.error/console.warn entries; ?since=<ms>&limit=<n>. `installed:false` when capture is off (no testHooks) \u2014 entries empty but schema-valid.",
+  getNetworkRequests: "Last-N fetch/XHR entries with status + duration; ?since=<ms>&limit=<n>. `installed:false` when capture is off (no testHooks) \u2014 entries empty but schema-valid.",
   pushModal: "TEST HOOK \u2014 push a modal onto the snapshot.modalStack via the registry ModalDetector",
   dismissModal: "TEST HOOK \u2014 dismiss a modal by id from the snapshot.modalStack via the registry ModalDetector",
   keepAwake: "TEST HOOK \u2014 keep the device screen awake via the injected keepAwakeProvider: body { enabled: boolean, durationMs?: number }"
@@ -5494,7 +5670,8 @@ function useUIElement(options) {
     parentPath,
     style,
     stateStyles: stateStylesProp,
-    handlers: handlersProp
+    handlers: handlersProp,
+    value: valueProp
   } = options;
   const treePath = parentPath ? `${parentPath}/${id}` : id;
   const bridgeProps = react.useMemo(
@@ -5520,9 +5697,12 @@ function useUIElement(options) {
     });
     registeredRef.current = true;
     registeredIdRef.current = id;
+    if (typeof valueProp === "string") {
+      bridge.registry.updateElementState(id, { value: valueProp });
+    }
     setRegistered(true);
     scheduleDeadButtonWarning(bridge, id, type);
-  }, [bridge, id, type, label, actions, customActions, treePath, style, stateStylesProp]);
+  }, [bridge, id, type, label, actions, customActions, treePath, style, stateStylesProp, valueProp]);
   const unregister = react.useCallback(() => {
     if (!bridge || !registeredRef.current) return;
     bridge.registry.unregisterElement(registeredIdRef.current ?? id);
@@ -5652,6 +5832,13 @@ function useUIElement(options) {
       }
     };
   }, [bridge, registered, id, handlersProp]);
+  react.useEffect(() => {
+    if (!bridge || !registered) return;
+    if (typeof valueProp !== "string") return;
+    const current = bridge.registry.getElement(id)?.getState().value;
+    if (current === valueProp) return;
+    bridge.registry.updateElementState(id, { value: valueProp });
+  }, [bridge, registered, id, valueProp]);
   react.useCallback(
     (props) => {
       propsRef.current = { ...propsRef.current, ...props };