overlay: fixes and improvements for the NativeScript and Angular Native overlays #357

Context

Fixes and improvements from a code audit of the nativescript and angular native overlays, done in October 2026. Roadmap work lives in #340, #341, #342 and #343. Items marked (to confirm) were not reproduced; check them before fixing.

Problems

Medium

• NativeScript page id changes on every reconnect: startSession creates the pageId, so a server restart or socket drop leaves a ghost page until it expires and the panel's selected page jumps. The forget-* calls in the dispose function then go out on a socket that is already dead. Create the pageId once in initNativeScriptOverlay() as Angular Native does, pass it down, and skip the forget-* calls when the socket dropped. Update the "new page id" line in getting-started/nativescript.md (packages/devtools/src/overlay-nativescript.ts:163, :320-327).
• NativeScript reports have no platform, url or title: pushTree sends collectComponentTree(...) without platform, and PagePlatform is only 'browser' | 'angular-native'. So list-pages calls the app browser and the panel shows pick and change-detection controls that do nothing. Add 'nativescript', send platform, url: '/' and the NativeScript (iOS/Android) title, turn the angular-native check into one native-page check, and update list-pages and the docs (packages/devtools/src/overlay-nativescript.ts:174, packages/devtools/src/types.ts:179, packages/devtools/src/rpc/pages.ts:151, apps/docs/src/content/getting-started/nativescript.md:27, :49).
• NativeScript has no trust check: against a server with auth on, it connects, every push is rejected, and the log shows only generic report failed warnings. Fetch the connection meta, call rpc.ensureTrusted(TRUST_TIMEOUT_MS) and throw UntrustedError with the same --no-auth warning as Angular Native (packages/devtools/src/overlay-nativescript.ts:120-153, compare overlay-angular-native.ts:97-101, :139-141).
• NativeScript lags behind Angular Native: it has no pipes collector, hardcodes a 3000 ms interval instead of limits.refreshMs, passes undefined instead of limits.changeLog to attachNgrx, resends the full payload on keepalive instead of a ping-* check, never sends writeHook: false, and leaves resource status out of signal history. Bring its session loop up to the Angular Native one (packages/devtools/src/overlay-nativescript.ts:73, :200-228, :252, compare overlay-angular-native.ts:174-178, :205-243, :297-299).

Low

• NativeScript highlight can't be cleared: a null request returns early, so a hover-out leaves the border on for the full 2 s, and the agent tool's durationMs is ignored. Track the active flash, restore it on null or on a request for another page, and use Math.min(durationMs, HIGHLIGHT_SAFETY_MS) (packages/devtools/src/overlay-nativescript.ts:273-287, :359-371).
• Angular Native outline skips array styles: writeStyle returns false when style is an array, which is common in React Native style code, so hover-highlight does nothing on those nodes with no hint why. Append the outline object to the array and restore the original array on clear (packages/devtools/src/overlay-angular-native-views.ts:110-113).
• Angular Native clears another device's outline: clearOutline() runs before the pageId check, so hovering a component on one device removes the outline on another. Move it after the wanted.pageId !== pageId return (packages/devtools/src/overlay-angular-native.ts:322-324).
• Angular Native drops failed pushes: pushTree and pushInjectorTree set lastJson and sentAt before the RPC resolves and never roll back, so a failed push is not retried until the next keepalive. Restore the previous values on failure as the NativeScript overlay does (packages/devtools/src/overlay-angular-native.ts:197-199, :262-264, compare overlay-nativescript.ts:174-186).
• Angular Native leaves the injector profiler ungated: provider lists stay empty unless the user defines window before mount(), which is only an FAQ entry. Export a prepareAngularNativeOverlay() that applies the same gate as gateInjectorProfiler() in the NativeScript overlay (packages/devtools/src/overlay-angular-native.ts, overlay-nativescript.ts:383, apps/docs/src/content/getting-started/angular-native.md).
• NativeScript guide misses the cleartext note: Android 9+ and iOS ATS block plain http to a LAN address on real devices. Add the same usesCleartextTraffic / Info.plist note the Angular Native guide has under "Where the overlay connects" (apps/docs/src/content/guides/nativescript.md, compare guides/angular-native.md:107).
• CLI start-up names only Angular Native: print a generic "Mobile apps" line, or a NativeScript line once that view exists, and update the CLI docs (packages/devtools/src/cli.ts:170).

Improvements

• Tap-to-pick on the device: a long-press listener on the root view (NativeScript) or a touch responder (Angular Native) that sends inspect-component, so "Pick component on page" works on mobile (overlay-nativescript.ts, overlay-angular-native.ts).
• Record change detection on native apps by patching ApplicationRef.tick, which needs no DOM (cd-recorder.ts, both mobile overlays).
• Highlight by drawing a bordered native view on top of the root instead of changing the app's own border or style, which avoids clobbering app styles and works for array styles (overlay-nativescript-views.ts, overlay-angular-native-views.ts).
• A headless test harness per mobile overlay that feeds fake view trees and checks the pushed reports, so drift between the two overlays fails in CI (packages/devtools/src/overlay-nativescript.ts, overlay-angular-native.ts).

Already tracked elsewhere

• NativeScript overlay ignores config.inspectors: phase 1 of 4: safe by default and wired into your workflow #340.
• Shared native overlay core with an adapter per platform, generic platform tag, Capacitor overlay and tab, server address without typing an IP: First-class mobile support: a core plus an adapter per framework #307.
• Device console and error logs for agents: phase 4 of 4: deeper diagnosis #343.

Generated by Claude Code