react-native-ai-debugger 1.0.4 → 1.0.6

package/README.md

@@ -6,6 +6,7 @@ An MCP (Model Context Protocol) server for AI-powered React Native debugging. En
 
 -   Captures `console.log`, `console.warn`, `console.error` from React Native apps
 -   **Network request tracking** - capture HTTP requests/responses with headers, timing, and status
+-   **Debug Web Dashboard** - browser-based UI to view logs and network requests in real-time
 -   Supports both **Expo SDK 54+** (React Native Bridgeless) and **RN 0.70+** (Hermes)
 -   Auto-discovers running Metro servers on common ports
 -   Filters logs by level (log, warn, error, info, debug)
@@ -15,11 +16,14 @@ An MCP (Model Context Protocol) server for AI-powered React Native debugging. En
 -   **Discover debug globals** available in the app
 -   **Android device control** - screenshots, tap, swipe, text input, key events via ADB
 -   **iOS simulator control** - screenshots, app management, URL handling via simctl
+-   **iOS UI automation** - tap, swipe, text input, button presses via IDB (optional)
+-   **iOS accessibility inspection** - get UI element tree and element info at coordinates via IDB
 
 ## Requirements
 
 -   Node.js 18+
 -   React Native app running with Metro bundler
+-   **Optional for iOS UI automation**: [Facebook IDB](https://fbidb.io/) - `brew install idb-companion`
 
 ## Claude Code Setup
 
@@ -125,6 +129,7 @@ Requires VS Code 1.102+ with Copilot ([docs](https://code.visualstudio.com/docs/
 | `list_debug_globals` | Discover available debug objects (Apollo, Redux, Expo Router, etc.) |
 | `inspect_global`     | Inspect a global object to see its properties and callable methods  |
 | `reload_app`         | Reload the app (like pressing 'r' in Metro or shaking the device)   |
+| `get_debug_server`   | Get the debug HTTP server URL for browser-based viewing             |
 
 ### Android (ADB)
 
@@ -154,6 +159,22 @@ Requires VS Code 1.102+ with Copilot ([docs](https://code.visualstudio.com/docs/
 | `ios_terminate_app`   | Terminate a running app                     |
 | `ios_boot_simulator`  | Boot a simulator by UDID                    |
 
+### iOS UI Interaction (requires IDB)
+
+These tools require [Facebook IDB](https://fbidb.io/) to be installed: `brew install idb-companion`
+
+| Tool                | Description                                           |
+| ------------------- | ----------------------------------------------------- |
+| `ios_tap`           | Tap at specific coordinates on screen                 |
+| `ios_tap_element`   | Tap an element by its accessibility label             |
+| `ios_swipe`         | Swipe from one point to another                       |
+| `ios_input_text`    | Type text into the active input field                 |
+| `ios_button`        | Press hardware buttons (HOME, LOCK, SIRI, etc.)       |
+| `ios_key_event`     | Send a key event by keycode                           |
+| `ios_key_sequence`  | Send multiple key events in sequence                  |
+| `ios_describe_all`  | Get accessibility tree for entire screen              |
+| `ios_describe_point`| Get accessibility info for element at specific point  |
+
 ## Usage
 
 1. Start your React Native app:
@@ -264,6 +285,57 @@ By Domain:
   cdn.example.com: 7
 ```
 
+## Debug Web Dashboard
+
+The MCP server includes a built-in web dashboard for viewing logs and network requests in your browser. This is useful for real-time monitoring without using MCP tools.
+
+### Getting the Dashboard URL
+
+Use the `get_debug_server` tool to find the dashboard URL:
+
+```
+get_debug_server
+```
+
+The server automatically finds an available port starting from 3456. Each MCP instance gets its own port, so multiple Claude Code sessions can run simultaneously.
+
+### Available Pages
+
+| URL        | Description                                    |
+| ---------- | ---------------------------------------------- |
+| `/`        | Dashboard with overview stats                  |
+| `/logs`    | Console logs with color-coded levels           |
+| `/network` | Network requests with expandable details       |
+| `/apps`    | Connected React Native apps                    |
+
+### Features
+
+-   **Auto-refresh** - Pages update automatically every 3 seconds
+-   **Color-coded logs** - Errors (red), warnings (yellow), info (blue), debug (gray)
+-   **Expandable network requests** - Click any request to see full details:
+    -   Request/response headers
+    -   Request body (with JSON formatting)
+    -   Timing information
+    -   Error details
+-   **GraphQL support** - Shows operation name and variables in compact view:
+    ```
+    POST  200  https://api.example.com/graphql         1ms  ▶
+               GetMeetingsBasic (timeFilter: "Future", first: 20)
+    ```
+-   **REST body preview** - Shows JSON body preview for non-GraphQL requests
+
+### JSON API Endpoints
+
+For programmatic access, JSON endpoints are also available:
+
+| URL                  | Description                   |
+| -------------------- | ----------------------------- |
+| `/api/status`        | Server status and buffer sizes |
+| `/api/logs`          | All logs as JSON              |
+| `/api/network`       | All network requests as JSON  |
+| `/api/bundle-errors` | Metro bundle errors as JSON   |
+| `/api/apps`          | Connected apps as JSON        |
+
 ## App Inspection
 
 ### Discover Debug Globals
@@ -404,6 +476,79 @@ Open a deep link:
 ios_open_url with url="myapp://settings"
 ```
 
+### iOS UI Automation (requires IDB)
+
+Install IDB first: `brew install idb-companion`
+
+**Important: Coordinate System**
+- iOS IDB uses **points** (logical coordinates), not pixels
+- For 2x Retina displays: 1 point = 2 pixels
+- Example: 1640x2360 pixel screenshot = 820x1180 points
+- Use `ios_describe_all` to get exact element coordinates in points
+
+Tap on screen (coordinates in points):
+
+```
+ios_tap with x=200 y=400
+```
+
+Long press (hold for 2 seconds):
+
+```
+ios_tap with x=200 y=400 duration=2
+```
+
+Swipe gesture:
+
+```
+ios_swipe with startX=200 startY=600 endX=200 endY=200
+```
+
+Type text (tap input field first):
+
+```
+ios_tap with x=200 y=300
+ios_input_text with text="hello@example.com"
+```
+
+Press hardware buttons:
+
+```
+ios_button with button="HOME"
+ios_button with button="LOCK"
+ios_button with button="SIRI"
+```
+
+Get accessibility info for the screen:
+
+```
+ios_describe_all
+```
+
+Get accessibility info at a specific point:
+
+```
+ios_describe_point with x=200 y=400
+```
+
+Tap an element by accessibility label:
+
+```
+ios_tap_element with label="Settings"
+```
+
+Tap using partial label match:
+
+```
+ios_tap_element with labelContains="Sign"
+```
+
+When multiple elements match, use index (0-based):
+
+```
+ios_tap_element with labelContains="Button" index=1
+```
+
 ## Supported React Native Versions
 
 | Version        | Runtime                 | Status     |

package/build/core/httpServer.d.ts

@@ -0,0 +1,14 @@
+interface DebugServerOptions {
+    port?: number;
+}
+/**
+ * Get the port the debug HTTP server is running on (if started)
+ */
+export declare function getDebugServerPort(): number | null;
+/**
+ * Start a debug HTTP server to expose buffer contents.
+ * Automatically finds an available port starting from the default.
+ */
+export declare function startDebugHttpServer(options?: DebugServerOptions): Promise<number | null>;
+export {};
+//# sourceMappingURL=httpServer.d.ts.map

package/build/core/httpServer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"httpServer.d.ts","sourceRoot":"","sources":["../../src/core/httpServer.ts"],"names":[],"mappings":"AASA,UAAU,kBAAkB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,GAAG,IAAI,CAElD;AAgnBD;;;GAGG;AACH,wBAAsB,oBAAoB,CAAC,OAAO,GAAE,kBAAuB,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAkBnG"}