GeezerVison is showing github.com — fix(hub-ui): bridge tools to the inspected page by SaKaNa-Y · Pull Request #363 · devframes/devframe
Conversation
SaKaNa-Y
commented
Sep 5, 2026
•
edited
Loading
Uh oh!
There was an error while loading. Please reload this page.
Important Please take a moment to read this. Thank you!
I should include a brief explanation of the problem in my own words in every PR. If that explanation is missing, please @mention me and do not merge this PR until I have added it. You may also leave this PR unaddressed (because this means I have not fulfilled my responsibilities as the author).
If my explanation is unclear or difficult to follow, please ask me to clarify or provide reproduction steps or supporting evidence.
I welcome suggestions and counterarguments, especially questions about anything I may have overlooked. (Your feedback helps me learn and improve. 🙏)
I hold myself to this standard for every PR, regardless of its size.
Problem
Vue Tracer and A11y opened from the Vite DevTools browser extension execute against the hub UI provider document instead of the inspected app. Action setup can also miss the first activation, and stale inspected-page sessions can deactivate newer sessions' actions.
Fix
Add a transport-neutral createInPageChannelRelay and an inspected-page endpoint in @devframes/hub-ui. Page scripts and actions execute in the inspected document; custom renderers stay in the hub UI provider document. Preserve existing panel channel APIs.
Complete action setup before activation, serialize remote activation and teardown, and track action ownership per connection. Preserve main's trusted eager initialization and setup cache while routing eager page/action scripts to the inspected document. Ignore stale page preparation after navigation.
Deduplicate pending document handshakes and retry every second with an attempt-specific identity. Close unclaimed or superseded grant ports and explicitly end their opposite endpoints, including when heartbeat is disabled. Panels send cancellation on close even before receiving a port. Relays match the originating window, origin, and handshake identity before cancelling, stop pending retries, and release late grants. Preserve direct in-page connections alongside relayed panels.
The demo action now performs its work directly on each invocation instead of accumulating activation subscriptions. Actions retain the per-activation execution contract established in #387.
Review follow-up: Vue Tracer
The demo action no longer accumulates activation subscriptions. The Tracer-owned dock and element-click subscription cleanup is implemented separately in antfu/vite-plugin-vue-tracer#13. This preserves the per-activation action contract established in #387; one-time framework setup alone would leave Tracer's inner click-listener leak intact.
Merge and release order
- Merge fix(devtools): clean up tracer activation subscriptions antfu/vite-plugin-vue-tracer#13 and publish a Tracer release containing the subscription fix.
- Merge fix(hub-ui): bridge tools to the inspected page #363 and publish the affected Devframe packages, including
devframe, @devframes/hub, and @devframes/hub-ui.
- Upgrade the dependencies used by fix(webext)!: bridge tools to the inspected page vitejs/devtools#563, validate the extension with both published fixes, then merge and release that adapter.
The first two fixes are independently mergeable and may be reviewed in parallel. The recommended order above puts the Tracer lifecycle fix first; the extension integration remains the final step. Published-package validation should include repeated Tracer activation, cancellation, and A11y inspection against the inspected app.
Verification
pnpm lint and pnpm knip: passed.
pnpm build: all 28 tasks passed.
pnpm typecheck: coverage verification and all 40 tasks passed.
pnpm test --run: 145 test files passed; 1,621 tests passed and 9 skipped, including API snapshots.
- Three cancellation regressions failed before the fix and passed afterward: closing a panel before the page script loads, with a delayed page grant, and with a delayed transport grant. These run with heartbeat disabled.
- Additional coverage rejects cancellation from another window, origin, protocol version, channel, panel, or instance.
- Full Tracer/A11y browser UI end-to-end scenarios were not rerun. Published-package validation remains the extension release gate.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
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.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
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.
◈ PR Lens
🟢 +3 new · 🟠 ~6 changed · 🔴 -0 removed · 2 flows · 7 files · commit a1f91e5
Architecture
9 components touched across 5 lanes.
Open the interactive canvas
Inside the changed components — 2 views
Component view — In-page channel relay
Internal components of the in-page channel bridge relaying handshakes and dedicated MessagePorts.
Component view — Inspected page bridge
Internal components managing inspected page connection, action preparation, and lifecycle serialization.
Data flow
Relaying dock panel channel across inspected page bridge · Inspected page action lifecycle
Open the interactive canvas
The other flows — 1 sequence
Inspected page action lifecycle
View
- Architecture lens
- Data flow lens
- Expand every detail
Tip Push a commit and the comment redraws for the new head. A slow older run never overwrites a newer one.
🪧 More tips
- Run
npx skills add coldteadotai/pr-lens, then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
- Run
npx @coldtea/pr-lens-cli analyze --base origin/main on a branch, then npx @coldtea/pr-lens-cli render .pr-lens/graph.json. Same lenses, your own model key, before the pull request exists.
- Untick Architecture lens or Data flow lens under View to hide a diagram, or tick Expand every detail to open every section. The comment redraws in a few seconds.
- Click the link under each diagram to open it on a canvas you can zoom, pan and step through.
- The diagrams are links. Click one to open it on the canvas, then press W or click play to walk through the change.
- Open a diagram on the canvas, then press W or click play to walk through the change one step at a time.
- The CLI's
render reads .github/pr-lens.yml and applies your renames, exclusions and lane pins at draw time.
- Set
github.comment.collapsed: true in .github/pr-lens.yml to fold the comment behind one View architecture and data flow row. Drawing still runs on every push.
- Add
.github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and your model provider's key as its api-key to run PR Lens from your own CI. Any /chat/completions endpoint works.
- Switch GitHub to dark mode and the diagrams follow. The moving dots are this pull request's data in motion.
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.
❤️ Share
|
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🟡 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.
Sorry, something went wrong.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Preserve trusted eager initialization while routing page scripts to the inspected document. Keep action setup before activation and reject stale page preparation after navigation.
Close unclaimed grant ports and end their opposite endpoints. Retry pending document handshakes with distinct identities so delayed grants cannot replace newer connections. Cover cancellation, delayed grants, late scripts, and direct in-page connections.
Count each action invocation directly, preserving the per-activation action contract without retaining entry activation subscriptions.
A panel could close before receiving its port while the relay kept retrying. A later grant then registered an unused peer indefinitely when heartbeat was disabled.
Send cancellation through the window handshake and validate its source and identity before closing the relay connection. Cover late page scripts, delayed grants, and cancellation isolation.
This branch has not been deployed
No deployments
Reviewers
At least 1 approving review is required to merge this pull request.
Uh oh!
There was an error while loading. Please reload this page.
Assignees
No one assigned
Milestone
No milestone
Development
Successfully merging this pull request may close these issues.
Uh oh!
There was an error while loading. Please reload this page.
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.
|