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

[SaKaNa-Y]

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 createInPageChannelRelay and 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.

1. Merge this PR and publish the affected packages, including devframe, @devframes/hub, and @devframes/hub-ui.
2. Upgrade the Devframe dependencies in the companion Vite DevTools PR to that release, validate with the published packages, then merge and release the extension changes.

Companion adapter: vitejs/devtools#563. That draft PR depends on this release; this PR can merge first.

Verification

• pnpm lint and pnpm knip: passed.
• pnpm test --run: build passed; 1,556 tests passed, 9 skipped, including API snapshots.
• pnpm typecheck: passed, 39 tasks.
• Three ownership regressions fail before the fix and pass afterward: old-session disconnect, old-session explicit deactivation, and page selection ending before a subsequent embedded activation.
• Focused inspected-page and activation tests: 32 passed.
• Full Tracer/A11y browser UI end-to-end scenarios were not rerun in this revision.

[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

🟢 +5 new · 🟠 ~3 changed · 🔴 -0 removed · 2 flows · 6 files · commit 4559790

Architecture

8 components touched across 4 lanes.

Open the interactive canvas

Inside the changed components — 2 views

Component 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

Activating an action dock in an inspected page · Relaying an in-page channel handshake across the bridge

Open the interactive canvas

The other flows — 1 sequence

Relaying an in-page channel handshake across the bridge

View

• Architecture lens
• Data flow lens
• Expand every detail

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

• 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.
• 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.
• Push a commit and the comment redraws for the new head. A slow older run never overwrites a newer one.
• 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