feat(ramp): opt-in RAMPS debug dashboard tooling (#28110)

## **Description**

Adds **opt-in** developer tooling so Money Movement / RAMPS engineers
can stream `RampsController` state and calls to a local browser
dashboard without loading the bridge for every dev build.

- **`RAMPS_DEBUG_DASHBOARD=true`** in `.js.env` + Metro restart enables
the bridge; **`RAMPS_DEBUG_DASHBOARD_URL`** overrides the WebSocket URL
(devices/emulators).
- **Dynamic `import()`** from `ramps-controller-init.ts` so the bridge
(including fetch instrumentation) is omitted from the bundle unless
enabled.
- **`app/components/UI/Ramp/debug/README.md`** — setup, `adb reverse`,
env vars.
- **`ramps-debug-dashboard/`** — self-contained Node server (`npm ci` +
`node server.mjs`); session logs gitignored.
- Includes prior commit on this branch: **CODEOWNERS** paths for Money
Movement (`@MetaMask/money-movement`) and **`ramps-debug-dashboard/`**
entry.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: RAMPS debug dashboard

  Scenario: Dashboard receives data when opt-in env is set
    Given a debug build with RAMPS_DEBUG_DASHBOARD=true in .js.env and Metro restarted
    And ramps-debug-dashboard is running (npm ci && node server.mjs)
    When the app launches and RampsController is active
    Then the browser UI at http://localhost:8099 shows state/method traffic
    And Metro logs include a RampsDebug connected message
```

## **Screenshots/Recordings**

<div>
<a href="https://www.loom.com/share/4644574b45ae42e6beda7d17b627a6ca">
      <p>Ramps Debug Dashboard - Watch Video</p>
    </a>
<a href="https://www.loom.com/share/4644574b45ae42e6beda7d17b627a6ca">
<img style="max-width:300px;"
src="https://cdn.loom.com/sessions/thumbnails/4644574b45ae42e6beda7d17b627a6ca-cc0038d0a8a8afd5-full-play.gif#t=0.1">
    </a>
  </div>

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Dev-only code now conditionally patches `fetch` and wraps
`RampsController` methods when `RAMPS_DEBUG_DASHBOARD=true`, which could
affect local debugging behavior if enabled. Production behavior should
remain unchanged due to `__DEV__` gating and optional `require`.
> 
> **Overview**
> Adds an **opt-in, `__DEV__`-only** “RAMPS debug dashboard” that
streams `RampsController` state changes, method calls (with
timing/cache-hit heuristics), and selected ramps-related `fetch` traffic
to `ws://localhost:8099`.
> 
> Introduces a self-contained host dashboard under
`scripts/money-movement/debug-dashboard/` (Node HTTP+WebSocket server,
JSONL session logging, and `yarn ramps:debug-dashboard` runner) plus new
docs and env var guidance in `.js.env.example`.
> 
> Updates `ramps-controller-init` to conditionally `require` and
initialize the bridge when `RAMPS_DEBUG_DASHBOARD=true`, adds Jest
coverage for that gating, and excludes the new debug tooling from Sonar
coverage and the security code scanner.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b8ed425. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amitabh94

.github/workflows/security-code-scanner.yml

@@ -24,6 +24,7 @@ jobs:
           paths_ignored: |
             tests/
             docs/
+            scripts/money-movement/debug-dashboard/
             .storybook/
             '**/*.test.js'
             '**/*.test.ts'

.js.env.example

@@ -54,6 +54,10 @@ export METAMASK_ENVIRONMENT="dev"
 # Build type: "main" or "flask" or "beta"
 export METAMASK_BUILD_TYPE="main"
 
+# Optional: enable Ramps debug dashboard bridge in __DEV__ (WebSocket + fetch instrumentation).
+# See app/components/UI/Ramp/debug/README.md
+# export RAMPS_DEBUG_DASHBOARD="true"
+
 # Segment SDK proxy endpoint and write key
 export SEGMENT_WRITE_KEY_DEV=""
 export SEGMENT_PROXY_URL_DEV=""

app/components/UI/Ramp/debug/README.md

@@ -0,0 +1,56 @@
+# RAMPS debug dashboard (developer tooling)
+
+Streams `RampsController` state, method calls, and related fetch traffic to a **local WebSocket server** and browser UI. **Debug builds only** (`__DEV__`); production is unchanged.
+
+**Opt-in:** set `RAMPS_DEBUG_DASHBOARD=true` in **`.js.env`** (or export it in the shell before starting Metro). Without this, the app does **not** load the bridge, so most devs avoid extra fetch instrumentation and WebSocket reconnect attempts.
+
+**Ownership:** Ramps team (see `.github/CODEOWNERS` for `app/components/UI/Ramp/` and `scripts/money-movement/`).
+
+## Quick start
+
+1. Enable the bridge for local debug builds — add to **`.js.env`** (see `.js.env.example`):
+
+   ```bash
+   export RAMPS_DEBUG_DASHBOARD="true"
+   ```
+
+   Restart Metro after changing `.js.env`.
+
+2. From the **repository root**, start the dashboard (installs `ws` under `scripts/money-movement/debug-dashboard/` on first run, then starts the server):
+
+   ```bash
+   yarn ramps:debug-dashboard
+   ```
+
+3. Open **<http://localhost:8099>** in a browser.
+
+4. Run the app in a **debug** build. When RAMPS initializes, the server logs `Mobile app connected`.
+
+The app connects to **`ws://localhost:8099`** when the bridge is enabled.
+
+### Android emulator / device → host
+
+So the app can reach the dashboard on your machine:
+
+```bash
+adb reverse tcp:8099 tcp:8099
+```
+
+### Optional (dashboard server / shell)
+
+- **Different port:** `RAMPS_DEBUG_PORT=8100 yarn ramps:debug-dashboard` — the app still uses `ws://localhost:8099` (port is on the host); change the bridge URL in `RampsDebugBridge.ts` if you need a non-default port.
+- **Session log path:** `RAMPS_DEBUG_LOG_FILE=/path/to/log.jsonl` when running the server (see dashboard `README.md`).
+
+## Manual run
+
+From **`scripts/money-movement/debug-dashboard/`**: `npm ci && node server.mjs` (or `bash run.sh` from that directory).
+
+## Verify
+
+1. Server: `Mobile app connected`
+2. Metro / device: `[RampsDebug] Connected to debug dashboard`
+
+## Related code
+
+- `RampsDebugBridge.ts` — WebSocket client, controller wrapping, fetch instrumentation.
+- `app/core/Engine/controllers/ramps-controller/ramps-controller-init.ts` — `__DEV__`-gated `require` and `isRampsDebugDashboardEnabled()`.