First-class mobile support: a core plus an adapter per framework #307

Goal

Make mobile apps first-class in the devtools, not just "able to connect". Start with mobile (Capacitor, Ionic, NativeScript, Angular Native), then other frameworks. A mobile app should get the same inspectors, agent tools and setup experience as a browser tab, plus what only its platform has.

Where things stand

• NativeScript: its own overlay (overlay-nativescript, feat: NativeScript support (native overlay, example app, standalone server fixes) #16), verified on an iOS simulator. The app passes the server address by hand, e.g. initNativeScriptOverlay({ baseURL: 'http://localhost:9999/' }).
• Angular Native: its own overlay (overlay-angular-native); reports carry platform: 'angular-native'.
• Capacitor: the browser overlay runs in the WebView, but can't reach the server on the dev machine. feat(overlay): add manual overlay initialization and support for Capacitor apps #21 (overlay-manual plus connectionMeta for initOverlay) is being ported onto current main.
• Ionic: planned. Ionic Angular apps usually run on Capacitor, so they build on the Capacitor adapter; what Ionic adds on top is an open question below.
• The collectors already walk a HostTree adapter (feat: NativeScript support (native overlay, example app, standalone server fixes) #16): domTree() for browsers, a native view tree for NativeScript. So the core and adapter split already exists in part.

Decided so far

1. Goal: first-class mobile support. Mobile first, other frameworks later.
2. Shape: one core plus an adapter per framework.
   • Core: collectors, page reports, page identity (pageId and a platform tag), the connection (server address, transport, reconnect), redaction and agent tools.
   • Adapter: the platform's HostTree, runtime shims (WebSocket, location, window), setup and native settings, and inspectors only that platform has.
3. Packaging, easiest first: everything stays in @pangular-inspector/devtools, with adapters as entry points like overlay-nativescript and overlay-manual. An adapter moves to its own package (e.g. @pangular-inspector/capacitor) only when it needs native code or CLI hooks (npx cap sync, ns).
4. Ionic support is coming, after Capacitor.

Open questions

• Which framework goes first? Leaning Capacitor: the feat(overlay): add manual overlay initialization and support for Capacitor apps #21 port is in motion, the browser overlay already works in its WebView, and Ionic/Capacitor is the most common path for Angular on phones.
• Server address without typing an IP. The build tool (Vite plugin, hub or CLI) knows the dev machine's LAN address and could inject it at build time. This would cover every adapter.
• Platform network settings (dev builds only):
  • Android blocks cleartext http, and a Capacitor page on https://localhost talking to an http server is mixed content.
  • iOS needs local-networking allowed in ATS.
  • Options: a docs step, a setup command, or a native plugin per framework. A NativeScript plugin can merge these settings itself; a Capacitor plugin can't easily change the app's Info.plist.
• Allowed origins and auth for device origins (https://localhost, capacitor://localhost), and listening on 0.0.0.0.
• Platform inspectors. The first agreed one is a Capacitor tab:
  • installed plugins and their availability per platform
  • a live log of plugin calls (plugin, method, redacted args, result or error, duration)
  • listeners and their events
  • "not implemented on this platform" errors
  • matching agent tools
• What Ionic adds on top of Capacitor. Does Ionic need its own view (for example the ion-router-outlet page stack, or open modals, popovers and toasts), or is the Capacitor tab plus the existing inspectors enough? Does it get its own dock and logo in the hub?
• Agent tools on devices. list-pages should make a device page obvious (e.g. "Capacitor, Android"), and a backgrounded app should expire cleanly. Action tools need timeouts that suit Wi-Fi round trips.
• Does Angular Native run on NativeScript and share its adapter, or stay separate?

Not in scope here

• The feat(overlay): add manual overlay initialization and support for Capacitor apps #21 port itself, which has its own PR.
• Network discovery (mDNS/Bonjour). It's more code and more failure modes than injecting the address at build time.