feat(components): flash checked components, add a Pangular Performance track and profiling toggle

[erkamyaman]

Refs #341. This PR does the last two "Change detection profiling" items of phase 2.

What it adds

Three live change detection views. Each one is toggled from a new Live views group under Record in the Components change detection section, or by agents through new flash, track and angularProfiling arguments on the change-detection tool. None of them attaches a profiler listener while it is off.

• Flash checks (cd-flash.ts)
  • Draws a box over every component that change detection checks. Each box has a fading "Name ×N" label, where N is how many times it was checked since the box appeared.
  • The profiler callback only counts checks. The boxes are measured and drawn once per animation frame, outside the Angular zone.
  • It draws on a fixed, pointer-events: none, aria-hidden canvas in its own shadow root and never changes the app's own DOM.
  • It shows at most 150 boxes, handles devicePixelRatio, resizing and page scrolling, and shows a still outline instead of the fade under prefers-reduced-motion.
• Performance track (cd-perf-track.ts)
  • Writes a "Pangular" track in the Chrome Performance panel through console.timeStamp, with one entry per component check, lifecycle hook and output listener.
  • It is skipped where console.timeStamp is missing.
• Angular profiling
  • Calls ng.enableProfiling() when the page has it. This can't be undone, so the toggle stays on until the page reloads, and the panel and the tool say so.

cd-live.ts connects the three views to the page. The page reports their state as options in the change detection report. The new request-change-detection-options RPC is registered in RPC_INSPECTOR.

change-detection was already an action tool, so I added arguments to it rather than a new tool. In read-only mode the new arguments are hidden and refused, the same as record. The views can be combined with record but not with export.

Tests

• cd-flash.test.ts (12): nothing attached while off, measuring once per frame, the label count, fading, reduced motion, the box cap, devicePixelRatio, resizing and scrolling, and that the app's own DOM stays untouched.
• cd-live.test.ts (10): the exact console.timeStamp calls against a stubbed console, enableProfiling called once, the three views sharing one Angular profiler, and that page events are filtered by pageId.
• cd-views-tool.test.ts (6): the tool arguments and the RPC.
• app/src/__tests__/cd-views.test.ts (8): the panel toggles.
• New cases in config.test.ts and hub-messages.test.ts: read-only handling and hub messages.

Docs

• inspectors/components.md: new "Watch checks live" section.
• agents/tools.md: the new arguments.

Checks

• pnpm format:check, pnpm typecheck, pnpm docs:build and pnpm skills:check: pass.
• pnpm test:devtools: 2284 passed.
• pnpm test:panel: 521 passed.
• pnpm extension:build: done; extension/ui is in its own commit.
• Axe passes on every static-report view.
  • The static report doesn't show the change detection section, so the new toggles were checked separately with axe-core in jsdom, with no violations.
  • jsdom can't check contrast. The toggles use the same tokens as the existing Record button.

Not covered

• The flash overlay and the Performance track are tested only against fakes and were not tried in a real browser.
• On Angular 22, ng.enableProfiling() returns a function that turns profiling off again. The toggle ignores it and treats profiling as one-way.
• Boxes stay on their element when the window scrolls. Under a scrolled inner container, a box stays where it was measured until that component is checked again.

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Added live-view controls for Flash checks, the Performance track, and Angular profiling, with availability and status reporting.
  • Added a Flash checks overlay with component labels and check counts.
  • Added a Performance track showing component checks, lifecycle hooks, and output listeners.
  • Added controls for agents to manage live views on selected or connected pages, alongside recording where supported.
• Documentation
  • Documented live-view controls, agent options, availability requirements, and behavior.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 9a0cd935-3257-4eea-85fb-0163048b0bd5

---

📥 Commits

Reviewing files that changed from the base of the PR and between ed19f98 and 67a11e4.

---

⛔ Files ignored due to path filters (1)

• extension/ui/assets/index-Cs1iD7Iz.js is excluded by !**/assets/index-[0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-].js

---

📒 Files selected for processing (20)

• app/src/__tests__/cd-views.test.ts
• app/src/pages/cd-recording.ts
• apps/docs/src/content/agents/tools.md
• apps/docs/src/content/inspectors/components.md
• extension/ui/assets/browser-agent-rpc-BXhoSh1z-B1xMNaze.js
• extension/ui/index.html
• packages/devtools/src/__tests__/cd-flash.test.ts
• packages/devtools/src/__tests__/cd-live.test.ts
• packages/devtools/src/__tests__/cd-views-tool.test.ts
• packages/devtools/src/__tests__/config.test.ts
• packages/devtools/src/__tests__/hub-messages.test.ts
• packages/devtools/src/cd-data.ts
• packages/devtools/src/cd-flash.ts
• packages/devtools/src/cd-live.ts
• packages/devtools/src/cd-overlay.ts
• packages/devtools/src/cd-perf-track.ts
• packages/devtools/src/config.ts
• packages/devtools/src/devframe.ts
• packages/devtools/src/hub-messages.ts
• packages/devtools/src/rpc/cd-tools.ts

---

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 5 remain after this review.

---

---

📝 Walkthrough

Walkthrough

The change adds three live change-detection views: Flash checks, a Chrome Performance track, and Angular profiling. It adds page-level option requests and reports, exposes controls through the inspector and agent tool, and documents their behavior.

Changes

Live change-detection views

Layer / File(s)	Summary
Live-view controllers packages/devtools/src/cd-data.ts, packages/devtools/src/config.ts, packages/devtools/src/cd-flash.ts, packages/devtools/src/cd-perf-track.ts, packages/devtools/src/cd-live.ts, packages/devtools/src/__tests__/cd-flash.test.ts, packages/devtools/src/__tests__/cd-live.test.ts	New controllers manage the Flash overlay, Performance track, and Angular profiling state. Option types and converters define accepted requests and reported settings. Tests cover controller behavior and limits.
Option requests and reports packages/devtools/src/devframe.ts, packages/devtools/src/cd-overlay.ts, packages/devtools/src/rpc/cd-tools.ts, packages/devtools/src/hub-messages.ts, packages/devtools/src/config.ts, packages/devtools/src/__tests__/cd-live.test.ts, packages/devtools/src/__tests__/cd-views-tool.test.ts, packages/devtools/src/__tests__/config.test.ts, packages/devtools/src/__tests__/hub-messages.test.ts	The agent tool accepts view options and broadcasts requests. Page overlays apply matching requests and include available settings in reports. The tool formats requested and reported settings, and hub-message handling recognizes view-setting writes.
Inspector controls and usage app/src/pages/cd-recording.ts, app/src/__tests__/cd-views.test.ts, apps/docs/src/content/agents/tools.md, apps/docs/src/content/inspectors/components.md, extension/ui/index.html, extension/ui/assets/browser-agent-rpc-BXhoSh1z-B1xMNaze.js	The recording page displays the three controls, reflects reported state, and restores prior settings when a request fails. Documentation describes the controls and agent-tool options. The UI entry points reference the updated asset bundle.

Priority: ➖ Normal

Estimated code review effort: 4 (Complex) | ~60 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant AgentTool
  participant Devframe
  participant PageOverlay
  participant CdLive
  AgentTool->>Devframe: Submit change-detection view options
  Devframe->>PageOverlay: Broadcast change-detection-options
  PageOverlay->>CdLive: Apply matching page options
  CdLive-->>PageOverlay: Return live-view state
  PageOverlay->>Devframe: Push updated page report

Loading

---

Merge Risk | ⚪ Minimal · up to 67a11

Merge Risk: ⚪ Minimal · up to 67a11

This adds opt-in, default-off live change-detection views. No concrete merge-blocking risk was identified. Manual checking of the flash overlay and Performance track in a real browser is advisable.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 67a11

The controls preserve the existing read-only restriction. Profiling requires a reload to undo, but restarting inspection without reloading can lose its reported state and hide that requirement.

Retained concerns

• Low · reliability · inferred: Irreversible profiling state is owned by a replaceable controller rather than the page runtime. After successful enablement and same-page overlay replacement, the new controller initially omits options and reports angularProfiling=false after an unrelated view request, although profiling remains enabled. The tool then describes profiling as off and the panel loses its reload-only notice. This introduced state-ownership mismatch makes rollback information unreliable; repeated enablement is also possible.

Security review details

Security Blast Radius

• observed — The broadest inspected request scope is every connected receiving page when pageId is omitted, including reload-only profiling enablement where available. Supplying a pageId narrows application through receiving-page filtering. Broadcast-to-all semantics already existed for recording, but the available effects are new.

Trust Boundaries and Controls

• observed — The new agent arguments are omitted in read-only mode and independently rejected by the handler. The options RPC is explicitly assigned to the components inspector and passes through inspector-aware registration. Wire sanitization limits page operations to the known option fields; these controls do not establish deployed transport authentication.

Resilience and Maintainability Implications

• inferred — Normal listener cleanup contains reversible instrumentation, but it cannot restore truthful irreversible-state reporting after controller replacement. This is a rollback-information and ownership concern, not evidence of privilege escalation or a verified data-exposure vulnerability.

---

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 48.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 35 functions across 17 files. (3 skipped:…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely identifies the three main changes: flash checks, the Pangular Performance track, and the profiling toggle.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

---

Full details: Docstring Coverage

Explanation

Docstring coverage is 48.57% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 35 functions across 17 files. (3 skipped: 3 unsupported.)

---

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

---

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

---

_{Comment @coderabbitai help to get the list of available commands.}

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		67a11e4	2026-10-12T18:09:39.961Z	View logs ↗

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 67a11e4

Command	Status	Duration	Result
nx affected -t test build	✅ Succeeded	2m 20s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-10-12 18:10:38 UTC