fix: apply in-page channel codecs to shared state

[posva]

Shared-state updates in the in-page channel skipped the codec hooks, even though subscription snapshots passed through deserialize. Apply serialize and deserialize consistently to snapshots, full-state updates, and patches in both directions, with regression tests for each path.

I found this in pinia colada devtools where opening the devtools after the app was running was yielding double-deserialization on the data and after digging a bit, it turned out to be within devframe but I could be wrong.

This is the commit that is meant to be a workaround this bug: posva/pinia-colada@86e8ebf

[vercel]

@posva is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
devframe	Ready	Preview	Sep 8, 2026 10:19am UTC

[coldtea-pr-lens]

◈ PR Lens

🟢 +0 new · 🟠 ~1 changed · 🔴 -0 removed · 1 flow · 4 files · commit 7c65d3d

Architecture

1 component touched across 2 lanes.

Open the interactive canvas

Data flow

Shared state synchronization

Open the interactive canvas

Drill down

Client Runtimes ＆ UI — 1 component

🟡 CHANGED In-Page Channel Bridge

Coordinates communication, RPC execution, and shared state between page scripts and devframe panels.

• packages/devframe/src/in-page-channel/page-script.ts:71-110
• packages/devframe/src/in-page-channel/panel.ts:84-145
• packages/devframe/src/in-page-channel/in-page-channel.test.ts:328-398
• docs/content/1.guide/12.in-page-channel.md:168-169

View

• Architecture lens
• Data flow lens
• Expand every detail
• Show unchanged neighbours

Tip

Draw a diff before it is even a pull request: npx @coldtea/pr-lens-cli analyze --base origin/main reads the diff with your own model key, and npx @coldtea/pr-lens-cli render .pr-lens/graph.json draws the same lenses on your machine.

🪧 More tips

• Run PR Lens on your own machine: npx skills add coldteadotai/pr-lens installs the agent skill. Then tell your coding agent: "Diagram the change you just made with PR Lens and attach it to the pull request."
• The boxes under View are live. Tick Architecture lens or Data flow lens to choose which diagrams appear, or Expand every detail to open every drill-down at once. The comment redraws in place a few seconds later.
• Show unchanged neighbours lists the components this change did not touch alongside the ones it did, so the drill-down shows what the changed code sits next to.
• GitHub will not let you zoom an image in a comment. The link under each diagram opens it on an interactive canvas, where you can zoom, pan and step through the flow.
• The CLI's render picks up .github/pr-lens.yml automatically and applies your corrections (renames, exclusions, lane pins) at draw time.
• Would you rather run it from CI on a key of your own? Add .github/workflows/pr-lens.yml with coldteadotai/pr-lens/packages/action@v0 and a model key in your repository secrets, say GEMINI_API_KEY. The Action asks Gemini by default, or OpenAI and any endpoint speaking /chat/completions through its provider input.
• PR Lens is free for open source. A star on the repository is what keeps it going.
• Push a new commit and the whole comment re-renders for the new head. An older run never overwrites a newer one, so a slow render cannot put a stale diagram back.
• The diagrams follow your GitHub theme, so dark mode gets the dark render and light mode the light one, and the moving dots show this pull request's data in motion.

---

◈ Rendered by PR Lens · crafted with ❤️ by the Coldtea team · Come say hi on Discord

[Copilot]

🟢 Approval recommended

The change consistently applies existing codec semantics to shared-state traffic and includes regression coverage for the previously inconsistent paths.

Pull request overview

This PR fixes an inconsistency in the in-page channel’s serialization pipeline where shared-state traffic bypassed endpoint codec hooks in some paths, leading to incorrect behavior (e.g., double-deserialization) when panels subscribe after the page script has already established state.

Changes:

• Apply serialize to shared-state outbound payloads (snapshots, full-state updates, patch arrays) before sending across the port.
• Route shared-state inbound handlers through the same createLocalFunctionRegistry(codec) receive pipeline so deserialize is applied consistently.
• Add regression tests covering patch-based vs full-state update flows through both endpoint codecs, plus a targeted snapshot/notification deserialization test.

File summaries

File	Description
packages/devframe/src/in-page-channel/panel.ts	Ensures shared-state requests/events use serializeArgs and shared-state handlers resolve via a codec-aware local function registry.
packages/devframe/src/in-page-channel/page-script.ts	Applies codec serialization to shared-state notifications and routes per-peer shared-state handlers through a codec-aware registry.
packages/devframe/src/in-page-channel/in-page-channel.test.ts	Adds regression tests verifying shared-state snapshots/updates/patches round-trip through both endpoint codecs.
docs/content/1.guide/12.in-page-channel.md	Documents that codec hooks also apply to shared-state snapshots, full-state updates, and patch arrays (and notes deep restoration considerations).

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.