phase 4 of 4: lead where no Angular devtools goes today #313

Goal

Build what no Angular devtools offers today. Since Angular 22, Chrome DevTools MCP gives agents angular:signal_graph and angular:di_graph, so a plain signal or DI graph no longer sets us apart for agents. Our lead has to come from diagnosis, correlation across inspectors, and actions. Ongoing; pick items after phases 1 to 3.

Diagnosis

• Zoneless trigger attribution: what started each change detection run (event, signal, timer, HTTP), and which components still depend on zone.js.
• Wasted checks and OnPush hints: components checked without any change, and inputs mutated in place.
• Leak detection: live subscriptions and effects per component, and components that are destroyed but still alive across navigations.
• Explainers for NG0100 (binding with old and new value), NG0500 (server vs client DOM diff) and NullInjectorError (an explain-injection tool that walks the lookup path with self, skipSelf, host and optional).
• Before/after measurement sessions, and one pangular:audit entry point with a single list of findings, including an axe pass over the app.

Agents

• Register read-only tools on the page through devtoolstooldiscovery and WebMCP, so browser agents and Chrome DevTools MCP find them with no setup.
• Ship agent skills in the npm package, plus a pangular skills install command.
• Agent tools for the panel-only actions: NgRx restore, TransferState and SSR overrides (register them in ACTION_TOOLS).
• A component screenshot tool and a console log tool, both scoped by pageId and redacted.

Data and SSR

• SSR tracing for web-standard Request/Response handlers (Hono, h3, Nitro/Analog). Today it needs Node req/res (ssr-middleware.ts).
• A network waterfall, plus redacted request and response headers on client calls.
• Peek at an already-created service's value from the DI view.
• NgRx: full state at any past entry with State, Diff and Action tabs, export and import of a session, and generated tests.
• Other stores (NGXS, Elf, MiniRx) through a Redux DevTools shim, and a TanStack Query view.

Ecosystem

• A public plugin API, so libraries can ship their own Pangular tabs (Signal Store add-ons, TanStack Query, Spartan).
• Startup and DI timing (time from bootstrap to stable, and the slowest providers).

Done when

• An agent can run an inspect, fix and verify loop from one audit entry point.
• At least one third-party library ships a Pangular tab.