phase 4 of 4: deeper diagnosis #343

Goal

Deeper diagnosis: explain why something happened, connect what the inspectors see, find leaks, and let agents run inspect, fix and verify loops. 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. (feat(overlay): explain change detection, leaks and common errors #395)
• Wasted checks and OnPush hints: components checked without any change, and inputs mutated in place. (feat(overlay): explain change detection, leaks and common errors #395)
• Leak detection: live subscriptions and effects per component, and components that are destroyed but still alive across navigations. (feat(overlay): explain change detection, leaks and common errors #395)
• 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). (feat(overlay): explain change detection, leaks and common errors #395)
• Before/after measurement sessions, and one pangular:audit entry point with a single list of findings, including an axe pass over the app. (feat(mcp): add an audit entry point with axe and before/after sessions #397)

Agents

• Register read-only tools on the page through WebMCP and devtoolstooldiscovery, so browser agents find them with no setup. (feat(mcp): add page tools, shipped agent skills and more agent actions #398, off by default, see agents: decide whether page tools (agent.browserTools) are on by default #396)
• Ship agent skills in the npm package, plus a pangular skills install command. (feat(mcp): add page tools, shipped agent skills and more agent actions #398)
• Agent tools for the panel-only actions: NgRx restore, TransferState and SSR overrides (register them in ACTION_TOOLS). (feat(mcp): add page tools, shipped agent skills and more agent actions #398, feat: add fetch SSR tracing, a waterfall, store history and a TanStack Query inspector #400)
• A component screenshot tool and a console log tool, both scoped by pageId and redacted. (feat(mcp): add page tools, shipped agent skills and more agent actions #398)

Data and SSR

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

Ecosystem

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

Done when

• An agent can run an inspect, fix and verify loop from one audit entry point. (feat(mcp): add an audit entry point with axe and before/after sessions #397)
• At least one third-party library ships a Pangular tab. Moved to plugins: no third-party library ships a Pangular tab yet #404.