feat(signals): add a page picker when several pages report a graph

[erkamyaman]

What and why

In the hub and the extension the panel is not framed by a page, so the Signals tab locked onto whichever page's graph arrived first and stayed there until that page went away. With two tabs open there was no way to see the other tab's graph.

The Signals tab now shows a Page select when more than one page reports a signal graph. It uses the shared pickPage like Components, and the same app-select markup as Components, Network and Store.

• The Graph of options follow the chosen page.
• Each page keeps its own Graph of choice.
• select-signal-target is sent with the chosen page's pageId.
• If the chosen page closes, the tab moves to the page that reported last and announces the change in a status region.
• A panel framed by a page, or a single reporting page, works as before, with no picker.
• No RPC names or data shapes changed.

The docs page inspectors/signals.md has a new "Page picker" section.

How it was verified

• pnpm commit:check: 1 commit message OK
• pnpm format:check: all files pass
• pnpm typecheck: passes (no error TS or error NG in ngc -p app/tsconfig.json)
• pnpm test:panel: 29 files, 168 tests passed. New tests cover two pages reporting, switching the graph and the Graph of options, the RPC carrying the chosen pageId and a pick kept per page, falling back and announcing when the chosen page closes, and no picker with one page.
• pnpm test:devtools: 129 files, 1425 tests passed. The first run had 8 failures in unrelated timing and CLI tests; the rerun passed.
• Docs updated (apps/docs/src/content/inspectors/signals.md) and pnpm docs:build passes (run with NX_NO_CLOUD=true; without it, Nx fails to download its Cloud client)
• pnpm extension:build, rebuilt extension/ui committed
• Browser axe check:
  • pnpm test:axe could not download Chromium, so the same script ran with the installed Chromium. Every tab and view passed axe in dark and light, and every tab had no horizontal overflow at 360px.
  • Live check against the SSR demo with two tabs (/ and /examples/signals), opened at /__devframes/: the Page picker shows both pages. The keyboard (Enter, Arrow, Enter) switches the graph and the Graph of options, and the status region announces the switch. axe is clean with the listbox open and closed in both schemes, and there is no overflow at 360px.

Notes for reviewers

• Page graphs carry no reportedAt, so "newest" for pickPage is the page that owns the top-level graph in the shared state. This keeps the previous fallback behaviour.
• Page labels come from the component tree's title and url, falling back to Page <id> like Components.
• When the server sends only graph with no pages map, it is treated as a single page, so there is no picker.
• The picker stays hidden when the panel is framed by a page.

Summary by CodeRabbit

• New Features
  • Added a page picker to the Signals inspector when multiple pages report signal graphs. Page titles or URLs identify each option, and each page retains its own component selection.
  • The inspector switches to another reporting page if the selected page closes and announces the change to screen readers.
  • When opened within a page, the inspector shows that page’s graph without a picker.

[coderabbitai]

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: 673a701f-9a47-4690-ae4b-313a9849b101

---

📥 Commits

Reviewing files that changed from the base of the PR and between 616a78e and 3e3bc6f.

---

⛔ Files ignored due to path filters (1)

• extension/ui/assets/index-Do9otzEJ.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-DEU1Kfnx.js
• extension/ui/index.html

---

 _____________________________________________
< You shall not pass...without a code review! >
 ---------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: ab8ba068-69cb-4c8f-a6d1-db3151a3b724

---

---

📥 Commits

Reviewing files that changed from the base of the PR and between f245551 and 616a78e.

---

---

⛔ Files ignored due to path filters (1)

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

• app/src/__tests__/signal-inspector.test.ts
• app/src/pages/signal-inspector.ts
• apps/docs/src/content/inspectors/signals.md
• extension/ui/assets/browser-agent-rpc-BXhoSh1z-Do6b9e5w.js
• extension/ui/index.html

---

---

Limit details: You’ve used all 10 included reviews currently available.

---

---

---

📝 Walkthrough

📝 Walkthrough

Walkthrough

SignalInspector now supports selecting among pages that report signal graphs. It displays the selected page’s graph, keeps component and injector picks per page, and announces page changes and fallback when a selected page closes.

Changes

Signal inspector page selection

Layer / File(s)	Summary
Per-page graph state and target routing app/src/pages/signal-inspector.ts, app/src/__tests__/signal-inspector.test.ts	SignalInspector stores graphs and component or injector picks by page. Component selection sends the target page ID with the selected component ID.
Page picker and page-change handling app/src/pages/signal-inspector.ts, app/src/__tests__/signal-inspector.test.ts, apps/docs/src/content/inspectors/signals.md, extension/ui/assets/browser-agent-rpc-BXhoSh1z-Do6b9e5w.js, extension/ui/index.html	The toolbar displays a page picker when multiple pages report graphs. The inspector announces page changes and falls back when the selected page closes. Tests and documentation cover this behavior, and the UI bundle references are updated.

Priority: ⬇️ Low

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

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant SignalInspector
  participant RPC
  RPC->>SignalInspector: Report graph updates for pages
  User->>SignalInspector: Select a page
  SignalInspector->>SignalInspector: Display the selected page graph
  User->>SignalInspector: Select a component
  SignalInspector->>RPC: select-signal-target with page ID and component ID

Loading

---

---

Merge Risk: ⚪ Minimal · up to 616a7

The page picker and page-scoped graph behavior have no identified merge-blocking defect. A page-framed panel remains limited to its host page.

Security Architecture Review

Security architecture risk: 🔵 Low · up to 616a7

The picker reuses existing page-targeted inspection requests and preserves normal framed-page behavior. No introduced security defect was established, but connection authorization and packaged runtime behavior were not fully verified.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The new UI makes already-aggregated reporting pages intentionally selectable. In the inspected flow, the affected authority is the existing signal-inspection target selection, not a newly added privileged action. Connection-level authorization remains outside the verified source coverage.

Trust Boundaries and Controls

• observed — The existing devframe action broadcasts target selection, while the browser receiver applies toSignalTarget before changing its local target. That helper rejects a nonempty explicit pageId belonging to another receiver. Requests without an explicit pageId remain accepted under the pre-existing design; this is identity filtering, not proof of sender authentication.
• observed — The normal framed-panel path starts without an explicit choice and suppresses page options. pickPage then retains the host identity even before its graph exists, and targetPageId prefers the host. The helper itself prioritizes a valid explicit choice before the host, so host isolation should not be attributed to helper precedence alone.

---

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 8 functions across 3 files. (2 skipped: 2 …	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 Signals when multiple pages report a graph.
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 8 functions across 3 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]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		616a78e	2026-10-10T22:36:14.870Z	View logs ↗