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#diff-b8557b35c73d5dc5d785af45cfdfd8081ff9ebac962aa58b1fdcf6790cee0e2bR48-R53

[coldtea-pr-lens]

◈ PR Lens

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

Architecture

3 components touched across 2 lanes.

Open the interactive canvas

Inside the changed components — 1 view

Component view — In-page channel endpoints

Page script and panel endpoints now route shared-state subscriptions, updates, and patches through serialization codecs.

Data flow

Shared state synchronization with codecs

Open the interactive canvas

Drill down

Client Runtimes ＆ UI — 3 components

🟡 CHANGED In-Page Channel Bridge

Browser-only communication bridge between host page scripts and devframe panels, now running shared-state replication through serialization codecs.

• packages/devframe/src/in-page-channel/page-script.ts:71-112
• packages/devframe/src/in-page-channel/panel.ts:84-147
• packages/devframe/src/in-page-channel/internal.ts
• packages/devframe/src/in-page-channel/types.ts
• packages/devframe/src/in-page-channel/diagnostics.ts
• docs/content/1.guide/12.in-page-channel.md:165-170
• packages/devframe/src/in-page-channel/in-page-channel.test.ts:325-400

🟡 CHANGED Page script channel endpoint

Host-side state authority that serializes subscription snapshots and update notifications through the endpoint codec.

• packages/devframe/src/in-page-channel/page-script.ts:71-112

🟡 CHANGED Panel channel endpoint

Devframe panel state mirror that serializes outbound mutations and deserializes incoming state snapshots and patches.

• packages/devframe/src/in-page-channel/panel.ts:84-147

View

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

Tip

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.

🪧 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."
• 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.
• 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.

---

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

[Copilot]

🟢 Approval recommended

The change is narrowly scoped to codec application points, aligns with the existing registry-based codec pipeline, and is backed by targeted regression tests.

Pull request overview

This PR fixes inconsistent application of in-page channel serialize/deserialize hooks for shared-state traffic, so shared-state subscription snapshots, full-state updates, and patch notifications all go through the codec pipeline in both directions (matching how regular RPC calls/events are already handled).

Changes:

• Apply serializeArgs() when sending shared-state events/calls from both panel and page script.
• Route shared-state internal handlers through createLocalFunctionRegistry(codec) so incoming shared-state payloads are decoded (and outgoing snapshots/results encoded) consistently.
• Add regression tests covering codec round-trips for snapshot + full-state + patch-array paths, and document the behavior in the in-page channel guide.

File summaries

File	Description
packages/devframe/src/in-page-channel/panel.ts	Ensures panel-side shared-state traffic is encoded on send and decoded via registry-wrapped internal handlers.
packages/devframe/src/in-page-channel/page-script.ts	Ensures page-script shared-state notifications and per-peer shared-state handlers use the codec on both send and receive.
packages/devframe/src/in-page-channel/in-page-channel.test.ts	Adds regression coverage verifying shared-state snapshots and updates traverse both endpoint codecs.
docs/content/1.guide/12.in-page-channel.md	Documents that codec hooks apply to shared-state snapshots/updates/patch arrays in both directions.

Review details

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

---

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

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
devframe	Skipped		Sep 9, 2026 11:20pm UTC

[Copilot]

🟢 Approval recommended

It applies serialization/deserialization consistently across all shared-state wire paths and includes targeted regression coverage for both patch and full-state update modes.

Review details

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