fix(hub-ui): bridge tools to the inspected page

[SaKaNa-Y]

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

1. Merge fix(devtools): clean up tracer activation subscriptions antfu/vite-plugin-vue-tracer#13 and publish a Tracer release containing the subscription fix.
2. 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.
3. 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.

[vercel]

@SaKaNa-Y is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[coldtea-pr-lens]

◈ 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

• X
• Mastodon
• Reddit
• LinkedIn

[Copilot]

🟡 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.