vincentvella/devloop

---
A unified dev-loop tool: it drives a **browser** and your **dev server**, pushing both sides into one timestamped buffer so you can correlate a browser console error with the backend stack trace from the same moment. It runs two ways from a shared core:
- **Headless (stdio)** — drives Chrome via Puppeteer, served over stdio. The lightweight mode Claude Code spawns per session. Run devloop-mcp daemon to instead serve one shared, long-running instance over HTTP/SSE that many agents/sessions connect to (see **Daemon mode**).
- **Cockpit (Electron)** — a single desktop window: tabbed browser panes (embedded WebContentsViews driven via CDP) with a browser bar (back/forward/reload + address) beside a collapsible side panel that toggles between **logs** and a **repro builder**. Project picker, auto-navigate, pop-out targets. The renderer is React 19 + Tailwind v4 + Radix + lucide-react. Serves the same tools over HTTP.
Because every event (browser console/network/page-errors **and** server stdout/stderr) shares one monotonic clock, get_logs_around / repro return a correlated, cross-source slice of the timeline.
Native targets — Expo / React Native (iOS + Android)
The cockpit also drives **Expo/React Native** projects, not just web. Open a native project and you get one pane with a **Web · iOS · Android** target switcher, a **bundler** toggle (Metro) separate from a **Build** button (expo run:ios / expo run:android, with @expo/fingerprint staleness detection), and:
- **JS console + errors over CDP** via Metro's Hermes inspector (both platforms) — with **source-mapped** stacks (your bundled index.bundle:1:… resolves to original .tsx).
- **RN network capture** — an injected XMLHttpRequest hook turns the app's fetch/XHR traffic into the same network timeline rows as web (so get_network / export_har / the network chip work for native too).
- **Native device logs** merged onto the timeline as a native source — iOS simctl log stream, Android logcat.
- A **live, interactive device embedded in the pane** — iOS via serve-sim (MJPEG, tap/scroll/type), Android via a polled screencap mirror (~2fps) with click→tap + key input. Screenshots on both.
- **Agent-drivable interactions** — browser_snapshot reads the native accessibility tree (iOS via idb's UIKit a11y tree; Android via uiautomator dump) and browser_click/type/scroll/press drive the device by an element's pt:x,y ref (from the snapshot) or its label — replayable through repro, openable over MCP via native_open / native_build. The same agent tools as web, mapped onto native.
All of it lands on the same correlated timeline, app-scoped — the web dev-loop experience, for a native app. (macOS + Apple Silicon for the embedded iOS simulator; Android works wherever the Android SDK + an emulator do.)
**iOS interactions need idb:** brew install facebook/fb/idb-companion and pipx install fb-idb (use Python MCP clients Claude Code · agents · mcporter"]
clients --> stdio & daemon & cockpit
stdio[" stdio spawned per session "]
daemon[" daemon HTTP/SSE · one shared instance "]
cockpit[" cockpit HTTP/SSE · Electron app "]
stdio --> mcp
daemon --> mcp
cockpit --> mcp
mcp([" MCP Server stdio transport, or HTTP/SSE for the daemon + cockpit "])
mcp --> core
core[" shared core · transport- and substrate-agnostic the MCP tool layer + one unified, correlated timeline"]
core --> iface([" IBrowserController · IBrowserManager · ITargetController capability-gated by the active target "])
iface --> pup & elec & rn
pup[" web · Puppeteer / Chrome stdio + daemon "]
elec[" web · Electron CDP panes cockpit · per-project partitions "]
rn[" native · React Native (Hermes) JS + network over Metro CDP "]
rn -->|"idb / adb"| nd[" NativeDriver iOS idb · Android adb taps · snapshot · screens · logs"]
sh
claude mcp add devloop --scope user -- npx -y devloop-mcp
sh
bun install
bun run app # build + launch the Electron cockpit