metro-mcp 0.2.0 → 0.4.0

package/README.md

@@ -7,6 +7,23 @@ A plugin-based MCP server for React Native runtime debugging, inspection, and au
 
 Works with **Expo**, **bare React Native**, and any project using **Metro + Hermes**.
 
+---
+
+## Contents
+
+- [Quick Start](#quick-start)
+- [Requirements](#requirements)
+- [How It Works](#how-it-works)
+- [Features](#features)
+- [Claude Code Status Bar](#claude-code-status-bar)
+- [Test Recording](#test-recording)
+- [App Integration](#app-integration-optional)
+- [Configuration](#configuration)
+- [Custom Plugins](#custom-plugins)
+- [Compatibility](#compatibility)
+
+---
+
 ## Quick Start
 
 ### Claude Code
@@ -49,6 +66,8 @@ Or with Bun:
 claude mcp add metro-mcp -- npx -y metro-mcp --port 19000
 ```
 
+---
+
 ## Requirements
 
 - **Node.js** 18+ or **Bun** 1.0+
@@ -56,42 +75,95 @@ claude mcp add metro-mcp -- npx -y metro-mcp --port 19000
 - **Android**: Android SDK with `adb` on your PATH
 - **IDB** *(optional)*: Some iOS operations fall back to [IDB (idb-companion)](https://github.com/facebook/idb) — install with `brew install idb-companion`. Tools will tell you when IDB is needed.
 
+---
+
 ## How It Works
 
 metro-mcp connects to your running Metro dev server the same way Chrome DevTools does:
 
-1. Discovers Metro via port scanning (8081, 8082, 19000-19002)
+1. Discovers Metro via port scanning (8081, 8082, 19000–19002)
 2. Connects to Hermes via Chrome DevTools Protocol (CDP)
-3. Streams console logs, network requests, errors into buffers
+3. Streams console logs, network requests, and errors into buffers
 4. Exposes everything as MCP tools, resources, and prompts
 
 **No app modifications required** for core debugging features.
 
+---
+
 ## Features
 
 | Plugin | Tools | Description |
 |--------|-------|-------------|
 | **console** | 2 | Console log collection with filtering |
-| **network** | 3 | Network request tracking and search |
-| **errors** | 2 | Exception collection with auto-symbolication |
-| **evaluate** | 1 | Execute JavaScript in app runtime |
+| **network** | 4 | Network request tracking and response body inspection |
+| **errors** | 3 | Runtime exception collection + Metro bundle error detection |
+| **evaluate** | 1 | Execute JavaScript in the app runtime |
 | **device** | 3 | Device and connection management |
 | **source** | 1 | Stack trace symbolication |
 | **redux** | 3 | Redux state inspection and action dispatch |
-| **components** | 4 | React component tree inspection |
+| **components** | 5 | React component tree inspection |
 | **storage** | 3 | AsyncStorage reading |
-| **bundle** | 2 | Metro bundle diagnostics |
 | **simulator** | 6 | iOS simulator / Android device control |
 | **deeplink** | 2 | Cross-platform deep link testing |
 | **ui-interact** | 6 | UI automation (tap, swipe, type) |
 | **navigation** | 4 | React Navigation / Expo Router state |
 | **accessibility** | 3 | Accessibility auditing |
 | **commands** | 2 | Custom app commands |
-| **profiler** | 5 | CPU profiling (Hermes CDP) + React render tracking |
-| **maestro** | 2 | Maestro test flow generation |
-| **appium** | 3 | Appium/WebdriverIO Jest test generation |
+| **automation** | 3 | Wait/polling helpers for async state changes |
+| **profiler** | 9 | CPU profiling (React DevTools hook) + heap sampling + render tracking |
+| **test-recorder** | 7 | Record interactions and generate Appium, Maestro, or Detox tests |
+| **statusline** | 1 | Claude Code status bar integration |
+
+→ See the [full tools reference](docs/tools.md).
+
+---
+
+## Claude Code Status Bar
+
+Get live Metro CDP connection status in your Claude Code status bar.
+
+Run `setup_statusline` in Claude Code — it writes a script to `~/.claude/metro-mcp-statusline.sh`, then ask Claude to add it to your status bar:
+
+```
+/statusline add the script at ~/.claude/metro-mcp-statusline.sh
+```
+
+The status bar segment shows three states:
+
+| State | Display |
+|-------|---------|
+| Not running | `Metro ○` (dimmed) |
+| Running, not connected | `Metro ●` (red) |
+| Connected | `Metro ● localhost:8081` (green) |
 
-**Total: 55 tools, 9 resources, 7 prompts** — see the [full tools reference](docs/tools.md).
+---
+
+## Test Recording
+
+Record real user interactions (taps, text entry, scrolls) and generate production-ready tests — no app code changes required.
+
+### AI-driven test generation
+
+Describe a flow and the AI navigates the app, then generates the test:
+
+> *"Write an Appium test for the guest checkout flow — start by tapping 'Start Shopping' on the welcome screen and end when the cart screen is visible."*
+
+The AI calls `start_test_recording`, navigates using `tap_element`/`type_text`/`swipe`, then generates a complete test with real selectors observed from the fiber tree.
+
+### Manual recording
+
+```
+start_test_recording   → inject interceptors
+(interact with the app)
+stop_test_recording    → retrieve event log
+generate_test_from_recording format=appium
+```
+
+Supports **Appium (WebdriverIO)**, **Maestro YAML**, and **Detox**.
+
+→ See the [testing guide](docs/testing.md) for full details, format examples, and tips.
+
+---
 
 ## App Integration (Optional)
 
@@ -124,14 +196,20 @@ Use `list_commands` and `run_command` to call these from the MCP client.
 
 For enhanced features like real-time Redux action tracking, navigation events, performance marks, and React render profiling, see the [optional client SDK](docs/sdk.md) and [profiling guide](docs/profiling.md).
 
+---
+
 ## Configuration
 
 See [configuration docs](docs/configuration.md) for environment variables, CLI arguments, and config file options.
 
+---
+
 ## Custom Plugins
 
 metro-mcp is fully extensible. See the [plugins guide](docs/plugins.md) to build your own tools and resources.
 
+---
+
 ## Compatibility
 
 - **React Native**: 0.70+ (Hermes required)