feat(router): show routed components in the Components tab by erkamyaman · Pull Request #267 · pangular-inspector/devtools

erkamyaman · 2026-10-10T22:57:01Z

What and why

The Router Current view listed each outlet's routed component as plain text, so finding that component in the tree meant switching tabs and searching for it by name. The router report already carries the devtools id of the routed component's host element, and the component tree uses it for its routed badges. The panel's OutletInfo type left that id out.

Each activated outlet with an id now has a Show in Components button. Its accessible name includes the component name, for example "Show in Components: Shell". Clicking it opens the Components tab with that component selected and scrolled into view. The button is hidden when the outlet has no id or the Components inspector is turned off.

How it was verified

pnpm commit:check: 1 commit message OK
pnpm format:check: all files pass
pnpm typecheck: exit 0, no error TS or error NG lines
pnpm test:panel: 30 files, 169 tests passed (5 new)
Docs updated (inspectors/router.md, Current view) and pnpm docs:build passes
pnpm extension:build: extension/ui rebuilt and committed
Browser axe check:
- scripts/panel-axe.mjs on the static report, dark and light: all 28 views pass.
- Live check on the Angular Travel dev server, dark and light, at 1280px and 360px: 0 axe violations and no horizontal overflow.
- In the same live check, pressing Enter on the button opened Components with the routed component (Home) selected and in view.

Notes for reviewers

Order of the focus update: the focus is set after the tab switch on purpose. componentFocus is a linked signal that resets on tab change, so setting it first would lose it. A test covers this.
No data changes: no RPC names or data shapes changed. devtoolsId was already in the router report.
Known limit: the id is looked up on the page the Components tab is showing. When several pages report, that may not be the page the Router tab is showing, and then nothing gets selected in the component tree.

Summary by CodeRabbit

New Features
- Added a Show in Components button for activated routes. It opens the Components tab, selects the routed component, and scrolls it into view.
- The Components tab switches to the route’s page when available and reports when the component is no longer on that page. The button is hidden when component inspection is disabled or no component is available.

The Current view listed each outlet's routed component as plain text, so finding it in the component tree meant switching tabs and searching by name. The router report already carries the devtools id of the routed component's host element, and the component tree uses the same id for its routed badges. Each activated outlet with an id now has a Show in Components button. It opens the Components tab with that component selected and scrolled into view. The focus is set after the tab switch, because the focus signal resets when the tab changes. The button is hidden when the outlet has no id or the Components inspector is turned off.

coderabbitai · 2026-10-10T22:57:18Z

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 6f0e9787-4c82-4cb6-bf64-be8446c8195d

📥 Commits

Reviewing files that changed from the base of the PR and between d5adc67 and 848005a.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-CgvJVwtz.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 (4)

app/src/__tests__/router-panels.test.ts
app/src/pages/component-tree.ts
extension/ui/assets/browser-agent-rpc-BXhoSh1z-CQUbrXfP.js
extension/ui/index.html

 _______________________________________________________________________________________________________________________________________________
< Configure, don't integrate. Implement technology choices for an application as configuration options, not through integration or engineering. >
 -----------------------------------------------------------------------------------------------------------------------------------------------
  \
   \   (\__/)
       (•ㅅ•)
       / 　 づ

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: a3680a25-480a-49dc-af77-171ff13055e6

📥 Commits

Reviewing files that changed from the base of the PR and between 8642160 and d5adc67.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-Diz7ulJK.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 (11)

app/src/__tests__/router-panels.test.ts
app/src/__tests__/router-show-component.test.ts
app/src/app.ts
app/src/pages/component-tree.ts
app/src/pages/live-route.ts
app/src/pages/route-current.ts
app/src/pages/route-inspector.ts
app/src/types/component-focus.types.ts
apps/docs/src/content/inspectors/router.md
extension/ui/assets/browser-agent-rpc-BXhoSh1z-3lTsX0b0.js
extension/ui/index.html

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

📝 Walkthrough

Walkthrough

The Router inspector now provides an action to open the Components inspector and focus the routed component. The focus event includes the page ID. ComponentTree handles page changes and reports when the component is absent from the selected page.

Changes

Routes-to-components navigation

Layer / File(s)	Summary
Outlet action and focus contract `app/src/types/component-focus.types.ts`, `app/src/pages/router-types.ts`, `app/src/pages/route-current.ts`, `app/src/__tests__/router-panels.test.ts`, `apps/docs/src/content/inspectors/router.md`	Outlet data now includes an optional component ID. Activated outlets show “Show in Components” when component inspection is enabled and emit the current page ID with the component ID. The tests and Router documentation cover this action.
Selection event and inspector focus `app/src/pages/live-route.ts`, `app/src/pages/route-inspector.ts`, `app/src/app.ts`, `extension/ui/index.html`, `extension/ui/assets/browser-agent-rpc-BXhoSh1z-3lTsX0b0.js`	LiveRoute and RouteInspector forward the focus event to App. App switches to Components and sets focus when component inspection is enabled. The extension UI references the updated asset.
Page-aware component focus `app/src/pages/component-tree.ts`, `app/src/__tests__/router-show-component.test.ts`	ComponentTree can switch to the event’s page when that page is available. It reveals a component only when the page matches and the component exists. Tests cover tab switching, focus, page selection, and the missing-component message.

Priority: ⬇️ Low

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant RouteCurrent
  participant LiveRoute
  participant RouteInspector
  participant App
  participant ComponentTree
  RouteCurrent->>LiveRoute: Emit component ID and page ID
  LiveRoute->>RouteInspector: Forward showComponent event
  RouteInspector->>App: Forward showComponent event
  App->>ComponentTree: Set focus after switching to Components

Merge Risk: ⚪ Minimal · up to d5adc

The Components view already explains when a page reports no component instances. No issue identified here needs to be fixed before merging.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to d5adc

The shortcut reaches inspection capabilities that were already available. It preserves the disabled-feature setting, ties selection to the originating page, and clears handled requests. No additional privileges or broader data access were found in the changed flow.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

inferred — The newly reachable outcome is existing component selection within the pages already reported to the panel, including its existing select-component RPC. The shortcut does not establish a new service, credential, or data-access capability.

Security Findings and Attack Paths

inferred — Report-supplied outlet identifiers now reach component selection through a user action, but the inspected path preserves the disabled-feature control and page-local resolution before reaching the existing selection sink. Comparison with the base did not identify an authority expansion or control bypass in this handoff.

Trust Boundaries and Controls

observed — The emitted component ID stays paired with its Router page ID. Components switches only to a page present in its reported-page collection and does not reveal a matching ID on a different live page. Existing hostPageId-aware page selection remains in both inspectors.

Resilience and Maintainability Implications

inferred — Page-local lookup, acknowledgement, and tab-change cleanup contain stale-request effects. Missing components on a live page produce an announcement rather than unrelated selection; nonlive requests remain subject to the same identity checks when reports resume. These controls limit the new caller's effects to the existing inspection lifecycle.

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 17 functions across 11 files. (2 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 describes the primary change: showing routed components in the Components 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 17 functions across 11 files. (2 skipped: 2 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches

📝 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 · 2026-10-10T22:58:05Z

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Commit	Updated (UTC)	See this deployment's details
Build: In progress 🔵 View logs ↗	`848005a`	2026-10-11T02:10:53.543Z	View logs ↗
Build: Failed ❌ View logs ↗	`d5adc67`	2026-10-11T01:56:23.103Z	View logs ↗
Build: Failed ❌ View logs ↗	`8642160`	2026-10-10T22:57:57.916Z	View logs ↗

Show in Components sent only the component id, so the Components tab looked for it on the page it already showed. With two app tabs, or after picking another page in the Router page picker, the click switched tabs and did nothing. The router now sends the page it shows along with the id. The Components tab switches to that page before selecting the component, and says when the component is no longer on the page.

…onents # Conflicts: # app/src/__tests__/router-panels.test.ts # extension/ui/assets/browser-agent-rpc-BXhoSh1z-3lTsX0b0.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-BdhmaYxc.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-C_twCiPD.js # extension/ui/assets/index-BCjCE1wD.js # extension/ui/assets/index-BEfrZ0QX.js # extension/ui/assets/index-Diz7ulJK.js # extension/ui/index.html

erkamyaman requested a review from santoshyadavdev as a code owner October 10, 2026 22:57

github-actions Bot added area: panel The devtools panel app (app/) area: extension The Chrome extension area: docs The documentation site labels Oct 10, 2026

erkamyaman mentioned this pull request Oct 10, 2026

feat(mcp): add list-components tool with a component tree outline #268

Merged

5 tasks done

erkamyaman added 2 commits October 11, 2026 01:54

erkamyaman merged commit 7fe6966 into main Oct 11, 2026
1 of 2 checks passed

erkamyaman deleted the router/show-in-components branch October 11, 2026 02:10

Navigation Menu

Repository navigation

feat(router): show routed components in the Components tab - #267

feat(router): show routed components in the Components tab#267
erkamyaman merged 3 commits into
mainfrom
router/show-in-components

erkamyaman commented Oct 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 10, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

erkamyaman commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What and why

How it was verified

Notes for reviewers

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

erkamyaman commented Oct 10, 2026 •

edited

Loading

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Oct 10, 2026 •

edited

Loading