Conversation
Add a transport-neutral in-page channel relay and a dedicated inspected-page endpoint for browser adapters. Route page scripts and action activation to the inspected document while keeping custom renderers in the hub UI provider document. Run action setup before activation and serialize stale activation cleanup so rapid navigation cannot disable a newer action. Cover port routing, lifecycle cleanup, isolation, activation races, and the public API with regression tests and snapshots.
|
@SaKaNa-Y is attempting to deploy a commit to the NuxtLabs Team on Vercel. A member of the Team first needs to authorize it. |
3 tasks
Preserve the endpoint API reference alongside the relay reference and adapt the relay test protocol to the functions namespace introduced upstream.
Track the active inspected-page action across sessions and release ownership when page selection changes. Ignore stale deactivation and disconnect requests while preserving serialized teardown for in-flight activations.
SaKaNa-Y
marked this pull request as ready for review
September 11, 2026 12:21
◈ PR Lens
Architecture 
8 components touched across 4 lanes. Inside the changed components — 2 viewsComponent view — Inspected page bridge Internal components of the inspected page host and standalone viewer target. 
Component view — In-page channel relay Dual-role relay modules connecting panel iframes to page scripts. 
Data flow 
The other flows — 1 sequence
View
Tip The diagrams are links. Click one to open it on the canvas, then press W or click play to walk through the change. 🪧 More tips
Thanks for using PR Lens! It's built by Coldtea, free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. |
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Repeated action setup can duplicate Tracer handlers, and delayed relay handshakes can leak ports or enter reconnect loops.
Get a fresh assessment by requesting another Copilot review.
Pull request overview
Adds an inspected-page bridge so dock actions and page scripts execute in the inspected document while preserving existing panel APIs.
Changes:
- Adds transport-neutral in-page channel relaying.
- Adds inspected-page session, ownership, and teardown handling.
- Adds protocol documentation, snapshots, and regression tests.
File summaries
| File | Description |
|---|---|
tests/__snapshots__/tsnapi/devframe/in-page-channel.snapshot.js |
Records the relay export. |
tests/__snapshots__/tsnapi/devframe/in-page-channel.snapshot.d.ts |
Records relay types. |
tests/__snapshots__/tsnapi/@devframes/hub/constants.snapshot.d.ts |
Records the connection event. |
packages/hub/src/events.ts |
Defines the inspected-page event. |
packages/hub-ui/src/client/state/inspected-page.ts |
Implements inspected-page sessions and transport. |
packages/hub-ui/src/client/state/inspected-page.test.ts |
Tests bridge behavior and isolation. |
packages/hub-ui/src/client/state/inspected-page.test-utils.ts |
Provides browser test doubles. |
packages/hub-ui/src/client/state/inspected-page-context.test.ts |
Tests remote dock execution. |
packages/hub-ui/src/client/state/context.ts |
Routes scripts and actions to the inspected page. |
packages/hub-ui/src/client/state/action-activation.test.ts |
Tests first-activation ordering. |
packages/hub-ui/src/client/standalone/main.ts |
Connects the standalone UI to the bridge. |
packages/devframe/src/in-page-channel/relay.ts |
Implements channel relaying. |
packages/devframe/src/in-page-channel/relay.test.ts |
Tests relay lifecycle and isolation. |
packages/devframe/src/in-page-channel/index.ts |
Exports the relay API. |
docs/content/8.references/5.browser-api.md |
Documents the relay API. |
docs/content/8.references/3.events.md |
Documents the connection protocol. |
Review details
- Files reviewed: 14/16 changed files
- Comments generated: 3
- Review effort level: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+157
to
+167
| function onPageGrant(event: MessageEvent): void { | ||
| if (event.source !== win || !validHandshake(event.data, 'grant') || !event.ports[0]) | ||
| return | ||
| for (const [id, connection] of connections) { | ||
| if (!connection.port && matches(event.data, connection.hello)) { | ||
| attach(id, connection, event.ports[0]) | ||
| send({ id, kind: 'grant', handshake: event.data }) | ||
| return | ||
| } | ||
| } | ||
| } |
Comment on lines
+178
to
+183
| function forwardHello(id: string, hello: InPageChannelHandshakeMessage): void { | ||
| const connection = connections.get(id) | ||
| if (connection?.port || (connection && !sameHello(connection.hello, hello))) | ||
| return | ||
| connections.set(id, { hello }) | ||
| win.postMessage(hello, origin) |
Comment on lines
+288
to
+290
| // Import/setup must finish before activation is emitted. Page scripts | ||
| // such as Vue Tracer install their activation listener during setup. | ||
| await runDockSetupScript(entry) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Vue Tracer and A11y opened from the Vite DevTools browser extension run against the hub UI provider's iframe instead of the inspected app. The parent/opener connection does not cross the extension boundary. Action setup can finish after its first activation event, leaving Tracer inactive on the first click.
A disconnected or stale inspected-page session can also deactivate a newer session's Tracer action because cleanup previously tracked only the action ID.
Fix
Add a transport-neutral
createInPageChannelRelayand a dedicated inspected-page endpoint in@devframes/hub-ui. Browser adapters bind the transport to a document; page scripts and actions execute there while custom renderers stay in the hub UI provider document. Existing panel channel APIs remain unchanged.Finish action setup before activation and serialize activation and teardown. Track the active action's owning connection so disconnect and explicit deactivation requests can only stop that connection's action. Clear ownership when page selection changes, preserving subsequent activation from the embedded UI. In-flight actions still finish teardown before replacement sessions activate.
Include protocol documentation, API snapshots, and regression coverage for first activation, rapid navigation, reconnection, and session isolation. Incorporate current
main, retaining both endpoint and relay references and adapting test protocols to the upstream functions namespace.Merge and release order
This is step 1 of 2 in the Devframe / Vite DevTools fix. Keep this PR in draft for review.
devframe,@devframes/hub, and@devframes/hub-ui.Companion adapter: vitejs/devtools#563. That draft PR depends on this release; this PR can merge first.
Verification
pnpm lintandpnpm knip: passed.pnpm test --run: build passed; 1,556 tests passed, 9 skipped, including API snapshots.pnpm typecheck: passed, 39 tasks.