feat(injectors): add a page picker to the Injectors tab

[erkamyaman]

What and why

With no host page, the Injectors tab read the top-level roots/environment of the injector-tree state, which belong to whichever tab reported last. With two app tabs open, the tree jumped between them on every report, and a selected injector became "no longer on the page" for no visible reason. Components, Signals, NgRx, Router and SSR & HTTP already have a Page picker.

The tab now reads pages[pageId] for the shown page and picks it with pickPage, like Signals: the host page when the panel is framed by one, otherwise the page you choose, otherwise the page shown before, otherwise the newest. A Page picker (shared app-select) appears only when more than one page reports and the panel has no host page. It labels pages by title or URL from the component tree. When the chosen page closes, the tab falls back to another page and announces it. Each page keeps its own selected injector, focus and collapsed rows, and row highlights go to the shown page. Servers without a per-page map still show the top-level tree. The docs page gets a "Page picker" section.

How it was verified

• pnpm format:check
• pnpm typecheck (ngc with strictTemplates, no errors)
• pnpm test:panel (249 tests, 7 new; 5 of them fail without the change)
• pnpm docs:build
• pnpm extension:build, extension/ui committed
• Browser axe on a static report seeded with two pages: dark and light, 1280px and 360px, tab, open page list and after switching. 0 violations, no overflow, tree switches as expected
• pnpm commit:check

Screenshots

None attached.

Notes for reviewers

• Page titles come from the component-tree shared state, which is read only while the picker is shown, as on the Signals tab. If that state isn't available, pages show as Page <id>.
• request-page-highlight now sends the shown page id instead of hostPageId(). With a host page, nothing changes.
• No RPC names or data shapes changed.

Summary by CodeRabbit

• New Features

  • Added a page picker to the injector inspector when multiple pages have injector trees. Choose a page to view its tree, with selections and expanded rows remembered separately for each page.
  • The inspector starts on the most recently reporting page and switches to another page if the selected page closes, with an accessible announcement.
  • Hover highlights now target the page shown in the inspector.

• Documentation

  • Updated the injector inspector guide with page picker behavior and availability.

[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: 3bb95460-3573-4316-86da-f6d95203ed85

---

📥 Commits

Reviewing files that changed from the base of the PR and between e4f95dd and 01afbdc.

---

⛔ Files ignored due to path filters (1)

• extension/ui/assets/index-BrsfgX9o.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 (2)

• extension/ui/assets/browser-agent-rpc-BXhoSh1z-D45sjRrF.js
• extension/ui/index.html

---

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

---

---

📝 Walkthrough

Walkthrough

DiInspector can display injector trees reported by multiple pages when it is not hosted within a page. It provides a page picker, keeps selection state per page, and updates the displayed page when the selected page closes.

Changes

Injector page selection

Layer / File(s)	Summary
Page-aware tree state app/src/pages/di-inspector.ts	DiInspector derives the displayed page and its injector data from shared reports. Selection, expansion, focus, and selected labels are stored per page. Page changes and closures update the selection and accessible announcements. Highlight requests use the displayed page ID.
Page picker UI app/src/pages/di-inspector.ts, extension/ui/index.html, extension/ui/assets/browser-agent-rpc-BXhoSh1z-D45sjRrF.js	The page picker appears in the live-tree, no-DI-data, and source-provider toolbars when multiple pages are available. The extension UI references the updated JavaScript asset.
Picker behavior validation app/src/__tests__/di-inspector-pages.test.ts, apps/docs/src/content/inspectors/injectors.md	Tests cover picker visibility, page switching, per-page state, highlighting, and fallback when a page closes. Documentation describes page identification, selection, fallback, and single-page behavior.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant RPCClient
  participant DiInspector
  participant PagePicker
  RPCClient->>DiInspector: Report component-tree state
  DiInspector->>PagePicker: Provide page options
  PagePicker->>DiInspector: Select page
  DiInspector->>RPCClient: Send highlight target for displayed page

Loading

---

Merge Risk: ⚪ Minimal · up to 01afb

The reviewed changes add the page picker and update its bundle references; no actionable merge-blocking issue remains.

Architecture Summary

Architecture risk: 🔵 Low · up to 01afb

The change affects 3 systems.

Changed systems: extension, app, apps/docs

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — extension (ui) was modified; 2 changed files map to changed impact.
• observed — app (ui) was modified; 2 changed files map to changed impact.
• observed — apps/docs (service) was modified; 1 changed file maps to changed impact.

Before / after behavior

• observed — Modified behavior in app/src/tests/di-inspector-pages.test.ts: The Angular testing import adds the ComponentFixture type.
• observed — Modified behavior in app/src/tests/di-inspector-pages.test.ts: Adds page-picker test helpers and scenarios covering when the picker is hidden, switching pages and highlighting on the selected page, retaining page and selection state across other-page reports, keeping selections separate by page, and falling back with a status announcement when the chosen page closes.
• observed — Modified behavior in app/src/pages/di-inspector.ts: Added linkedSignal, NgTemplateOutlet, page-selection helpers and types, and the Select component imports.
• observed — Modified behavior in app/src/pages/di-inspector.ts: Added InjectorPage for page tree data and InjectorTreeState for the shared state with an optional per-page map.

---

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 4 files. (1 skipped: 1…	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 describes the main change: adding a page picker to the Injectors tab.
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 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 10 functions across 4 files. (1 skipped: 1 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 ↗		01afbdc	2026-10-11T05:14:06.734Z	View logs ↗
Build: Failed ❌ View logs ↗		e4f95dd	2026-10-11T03:02:13.147Z	View logs ↗