@playfast/reform-remote 1.1.0 → 1.3.0

package/src/wire-id-uniqueness.test.ts

@@ -0,0 +1,287 @@
+// @vitest-environment happy-dom
+//
+// Round-5 adversarial audit — `reform-remote`'s half of the keyed-identity fix set.
+//
+// Under audit:
+//   * `wireRender.ts` `enqueueStructureSlot` — an `Each` child's id is now
+//     `${parent.id}.${slotName}.${entry.key}`, with a `used` Set that appends
+//     `#${index}` when a key repeats.
+//   * `client.ts` `WireNodeView` — a slot child is now reconciled by React on
+//     `child.key ?? child.id` instead of `child.id`.
+//
+// Both findings below survived an attempt to refute them. Each test states the
+// behaviour the FIXED code is supposed to have, fails on the current working
+// tree, and carries a passing CONTROL in the same body that proves the harness
+// works and isolates the defect. Every listener/observer is attached before
+// anything is awaited.
+import { act, createElement, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, test } from 'vitest'
+import { Layer, Schema as S } from 'effect'
+import {
+  Composition,
+  Engine,
+  State,
+  Ui,
+  each,
+  mount,
+  provide,
+  scene,
+  slot,
+  ui,
+} from '@playfast/reform'
+import { Wire, type WireNode, type WireTree } from '@playfast/reform/internal'
+import { makeRemoteServer } from './server'
+import { remoteViews, renderWireTree } from './client'
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+
+// ---------------------------------------------------------------------------
+// One scene, seeded per server: a list whose rows are keyed by `entry.id`, the
+// shape every `each(...)` call in the repo uses. A "reorder" is modelled as a
+// second server over the same rows in a different order — which is exactly the
+// frame a reordering server emits now that ids are minted from keys rather than
+// positions.
+// ---------------------------------------------------------------------------
+
+const RowValue = S.Struct({ id: S.String, label: S.String })
+
+class Rows extends State.make('audit5.rows', S.Array(RowValue)) {}
+
+class RowUi extends ui('audit5.Row', { props: S.Struct({ label: S.String }) }) {}
+class RowComp extends Composition.make('audit5.Row', {
+  title: 'Row',
+  ui: RowUi,
+  props: RowValue,
+})<RowComp>() {}
+class RowSlot extends slot('audit5.Row')<RowSlot, typeof RowComp>() {}
+
+class ListUi extends ui('audit5.List', { props: S.Struct({}), slots: { Row: RowSlot } }) {}
+class ListComp extends Composition.make('audit5.List', {
+  title: 'List',
+  ui: ListUi,
+  slots: { Row: RowSlot },
+  states: [Rows],
+})<ListComp>() {}
+
+interface Row {
+  readonly id: string
+  readonly label: string
+}
+
+const listScene = (seed: ReadonlyArray<Row>) => {
+  const presentation = Layer.mergeAll(
+    provide(
+      ListUi,
+      Ui.make(ListUi, () => null),
+    ),
+    provide(
+      RowUi,
+      Ui.make(RowUi, () => null),
+    ),
+    provide(RowSlot, RowComp),
+    State.live(Rows, seed),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(ListComp, function* () {
+      const rows = yield* Rows
+      return mount({
+        props: {},
+        slots: {
+          Row: each(rows, {
+            key: (entry) => entry.id,
+            props: (entry) => ({ id: entry.id, label: entry.label }),
+          }),
+        },
+      })
+    }),
+    Composition.live(RowComp, function* () {
+      const rowProps = yield* RowComp.props
+      return mount({ props: { label: rowProps.label }, slots: {} })
+    }),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(ListComp, { provide: [app] })
+}
+
+const frameFor = async (seed: ReadonlyArray<Row>): Promise<WireTree> => {
+  const server = makeRemoteServer(listScene(seed))
+  try {
+    return await server.render()
+  } finally {
+    await server.dispose()
+  }
+}
+
+const rowsOf = (tree: WireTree): WireTree => tree.filter((node) => node.slot === 'Row')
+
+const labelOf = (node: WireNode): string => {
+  const prop = node.props.find(
+    (candidate) => candidate._tag === 'Data' && candidate.name === 'label',
+  )
+  return prop !== undefined && 'value' in prop ? String(prop.value) : '<none>'
+}
+
+// ---------------------------------------------------------------------------
+// FINDING 1 — `wireRender.ts:104-108`. The `used` dedupe is not collision-safe.
+//
+//     const preferred = `${parent.id}.${slotName}.${entry.key ?? index}`
+//     const id = used.has(preferred) ? `${preferred}#${index}` : preferred
+//     used.add(id)
+//
+// The repeat branch mints `${preferred}#${index}` and never asks whether THAT
+// string is already taken. It can be: an earlier row whose own key literally
+// ends in `#<n>` already claimed it, where `n` is the index of a later repeat.
+// Keys carrying a `#` are ordinary — an issue ref (`PROJ#12`), a channel or
+// thread name, a URL fragment, a label with a discriminator — and the whole
+// point of the `used` branch is that the framework tolerates a duplicate key
+// instead of trusting the app to produce unique ones.
+//
+// The result is two wire NODES sharing one id. Node id is the wire's primary
+// key everywhere downstream: `Wire.diff` builds `previousById`/`nextById` from
+// it, `Wire.apply`'s `upsertNode` finds-and-replaces by it, and a trigger
+// handle is `${id}:${eventName}`. So the row that loses the tie is not merely
+// mis-reconciled, it is DELETED from the client's tree by the very first frame,
+// and its `remove` handle points at the row that overwrote it.
+// ---------------------------------------------------------------------------
+
+test('every wire node in a frame has its own id, whatever the app keys rows by', async () => {
+  // ---- CONTROL — three rows, two of them sharing the key `dup`. The `used`
+  // branch does its job: three rows, three ids, and a client that applies the
+  // opening diff sees all three. This is the harness, the scene and the whole
+  // duplicate-key path working.
+  const control = await frameFor([
+    { id: 'dup', label: 'A' },
+    { id: 'dup', label: 'B' },
+    { id: 'plain', label: 'C' },
+  ])
+  const controlRows = rowsOf(control)
+  expect(controlRows.map(labelOf)).toEqual(['A', 'B', 'C'])
+  expect(new Set(controlRows.map((node) => node.id)).size).toBe(3)
+  expect(rowsOf(Wire.apply([], Wire.diff([], control))).map(labelOf)).toEqual(['A', 'B', 'C'])
+
+  // ---- DEFECT — the same three rows. The only change is that the first row's
+  // key already spells the collision the dedupe is about to mint for index 2.
+  //   index 0  key 'tag#2'  -> '0.audit5.Row.tag#2'   (taken)
+  //   index 1  key 'tag'    -> '0.audit5.Row.tag'
+  //   index 2  key 'tag'    -> taken, so '0.audit5.Row.tag#2'  <- same id
+  const defect = await frameFor([
+    { id: 'tag#2', label: 'A' },
+    { id: 'tag', label: 'B' },
+    { id: 'tag', label: 'C' },
+  ])
+  const defectRows = rowsOf(defect)
+  expect(defectRows.map(labelOf)).toEqual(['A', 'B', 'C'])
+
+  // Two nodes, one id. Actual today: 2 — `0.audit5.Row.tag#2` is minted twice.
+  expect(new Set(defectRows.map((node) => node.id)).size).toBe(3)
+
+  // ...and the consequence a connected client actually sees: `Wire.apply` keys
+  // by id, so the opening frame loses a row outright.
+  // Actual today: ['C', 'B'] — row A was overwritten in place by row C.
+  expect(rowsOf(Wire.apply([], Wire.diff([], defect))).map(labelOf)).toEqual(['A', 'B', 'C'])
+})
+
+// ---------------------------------------------------------------------------
+// FINDING 2 — `client.ts:172`. `key: child.key ?? child.id`.
+//
+// `child.id` is unique across a frame by construction (that is what FINDING 1
+// is about). `child.key` is whatever the app's `key:` callback returned and
+// carries no uniqueness guarantee at all — `enqueueStructureSlot` was hardened
+// in this same change set precisely BECAUSE a duplicate key happens.
+//
+// Handing React a duplicate key is documented-unsupported: "Non-unique keys may
+// cause children to be duplicated and/or omitted". It does. A reorder across a
+// duplicate key makes React emit a row the frame does not contain and keep an
+// element the frame deleted, so the painted list stops matching the wire tree.
+//
+// The change is also unnecessary. Its stated reason — "node ids are positional,
+// so a reorder would otherwise slide item state between rows" — was true of the
+// OLD id scheme and is no longer true of the one shipped in the same commit:
+// `${parent.id}.${slotName}.${key}` is already reorder-stable, and stable for
+// un-keyed `one(...)` descendants too, which `child.key` is not (it is null for
+// them). `key: child.id` satisfies both round-4 bugs and stays unique.
+// ---------------------------------------------------------------------------
+
+const paint = async (
+  before: WireTree,
+  after: WireTree,
+): Promise<{
+  readonly painted: ReadonlyArray<string>
+  readonly expected: ReadonlyArray<string>
+}> => {
+  const seat = { n: 0 }
+  const views = remoteViews<{ 'audit5.List': typeof ListUi; 'audit5.Row': typeof RowUi }>({
+    'audit5.List': Ui.make(ListUi, (_props, slots) =>
+      createElement('div', null, createElement(slots.Row)),
+    ),
+    'audit5.Row': Ui.make(RowUi, ({ label }) => {
+      const [seatId] = useState(() => {
+        seat.n += 1
+        return `seat-${seat.n}`
+      })
+      return createElement('span', { 'data-row': label, 'data-seat': seatId })
+    }),
+  })
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+  const config = { views, invoke: () => undefined }
+  try {
+    await act(async () => {
+      root.render(renderWireTree(before, config))
+    })
+    await act(async () => {
+      root.render(renderWireTree(after, config))
+    })
+    return {
+      painted: [...container.querySelectorAll('[data-row]')].map(
+        (element) => element.getAttribute('data-row') ?? '<none>',
+      ),
+      expected: Wire.childrenOf(after, '0').map(labelOf),
+    }
+  } finally {
+    await act(async () => {
+      root.unmount()
+    })
+    container.remove()
+  }
+}
+
+test('a reordered frame paints exactly the rows the frame contains', async () => {
+  // ---- CONTROL — three rows with distinct keys, reordered. The client keys
+  // React by `child.key`, every key is unique, and the painted list is the
+  // frame's list. Same scene, same two renders, same assertion as the arm below.
+  const uniqueBefore = await frameFor([
+    { id: 'one', label: 'A' },
+    { id: 'two', label: 'B' },
+    { id: 'three', label: 'C' },
+  ])
+  const uniqueAfter = await frameFor([
+    { id: 'two', label: 'B' },
+    { id: 'one', label: 'A' },
+    { id: 'three', label: 'C' },
+  ])
+  const control = await paint(uniqueBefore, uniqueAfter)
+  expect(control.expected).toEqual(['B', 'A', 'C'])
+  expect(control.painted).toEqual(control.expected)
+
+  // ---- DEFECT — the same reorder over a list where two rows share a key. The
+  // server handled it: three nodes, three distinct ids, correct order.
+  const dupBefore = await frameFor([
+    { id: 'dup', label: 'A' },
+    { id: 'other', label: 'B' },
+    { id: 'dup', label: 'C' },
+  ])
+  const dupAfter = await frameFor([
+    { id: 'other', label: 'B' },
+    { id: 'dup', label: 'A' },
+    { id: 'dup', label: 'C' },
+  ])
+  expect(new Set(rowsOf(dupAfter).map((node) => node.id)).size).toBe(3)
+
+  const defect = await paint(dupBefore, dupAfter)
+  expect(defect.expected).toEqual(['B', 'A', 'C'])
+  // Actual today: ['A', 'B', 'A', 'C'] — React duplicated the row it could not
+  // tell apart, so the browser shows four rows for a three-row frame.
+  expect(defect.painted).toEqual(defect.expected)
+})

package/src/wire-identity.test.ts

@@ -0,0 +1,369 @@
+// @vitest-environment happy-dom
+//
+// Wire-level identity/attribution defects in @playfast/reform-remote.
+// Every test here asserts the behaviour the package is *supposed* to have; each
+// one currently FAILS. Nothing in this file fixes anything.
+import { act, createElement, StrictMode, useState } from 'react'
+import { createRoot } from 'react-dom/client'
+import { expect, test } from 'vitest'
+import { Data, Layer, Schema as S } from 'effect'
+import {
+  Composition,
+  Engine,
+  Event,
+  Reducer,
+  State,
+  Ui,
+  each,
+  mount,
+  provide,
+  scene,
+  slot,
+  ui,
+} from '@playfast/reform'
+import type { WireNode, WireTree } from '@playfast/reform/internal'
+import { makeRemoteServer } from './server'
+import { remoteViews, renderWireTree } from './client'
+import { RemoteUI, type RemoteUIProps } from './react'
+import { connect, serve, type InvokeMessage, type ServerMessage } from './transport'
+import { inMemoryTransportPair } from './memory'
+import { CounterUi, counterScene } from './fixtures'
+
+// ---------------------------------------------------------------------------
+// polling helper — no fixed waits, every poll stops the moment it is satisfied
+// ---------------------------------------------------------------------------
+
+const PollTimeoutBase: new (args: { readonly detail: string }) => Error & {
+  readonly _tag: 'regress/PollTimeout'
+} & Readonly<{ readonly detail: string }> = Data.TaggedError('regress/PollTimeout')<{
+  readonly detail: string
+}>
+
+class PollTimeout extends PollTimeoutBase {
+  override get message(): string {
+    return `condition never became true — ${this.detail}`
+  }
+}
+
+const until = async (detail: string, predicate: () => boolean, rounds = 200): Promise<void> => {
+  if (predicate()) {
+    return
+  }
+  if (rounds <= 0) {
+    throw new PollTimeout({ detail })
+  }
+  await new Promise<void>((resolve) => {
+    // oxlint-disable-next-line reform-rules/no-wall-clock-wait-in-test -- turn hop inside a bounded structural poll, not a fixed wait
+    setTimeout(resolve, 0)
+  })
+  return until(detail, predicate, rounds - 1)
+}
+
+// ---------------------------------------------------------------------------
+// a keyed, reorderable list scene
+// ---------------------------------------------------------------------------
+
+const Row = S.Struct({ id: S.String, label: S.String })
+
+class Rows extends State.make('identity.rows', S.Array(Row)) {}
+class Reversed extends Event.make('identity.Reversed', S.Struct({})) {}
+class ReverseRows extends Reducer.make('identity.ReverseRows', {
+  states: [Rows],
+  events: [Reversed],
+}) {}
+
+class RowUi extends ui('RegressRow', {
+  props: S.Struct({ label: S.String }),
+  events: { ping: S.Struct({}) },
+}) {}
+class RowComp extends Composition.make('RegressRow', {
+  title: 'RegressRow',
+  ui: RowUi,
+  props: Row,
+})<RowComp>() {}
+class RowSlot extends slot('RegressRow')<RowSlot, typeof RowComp>() {}
+
+class ListUi extends ui('RegressList', {
+  props: S.Struct({}),
+  events: { reverse: S.Struct({}) },
+  slots: { Row: RowSlot },
+}) {}
+class ListComp extends Composition.make('RegressList', {
+  title: 'RegressList',
+  ui: ListUi,
+  slots: { Row: RowSlot },
+  states: [Rows],
+})<ListComp>() {}
+
+const identityScene = (initial: ReadonlyArray<{ readonly id: string; readonly label: string }>) => {
+  const presentation = Layer.mergeAll(
+    provide(
+      ListUi,
+      Ui.make(ListUi, () => null),
+    ),
+    provide(
+      RowUi,
+      Ui.make(RowUi, ({ label }) => label),
+    ),
+    provide(RowSlot, RowComp),
+    State.live(Rows, initial),
+  )
+  const app = Layer.mergeAll(
+    Composition.live(ListComp, function* () {
+      const rows = yield* Rows
+      const reverse = yield* Event.trigger(Reversed)
+      return mount({
+        props: {},
+        events: { reverse },
+        slots: {
+          Row: each(rows, {
+            key: (entry) => entry.id,
+            props: (entry) => ({ id: entry.id, label: entry.label }),
+          }),
+        },
+      })
+    }),
+    Composition.live(RowComp, function* () {
+      const rowProps = yield* RowComp.props
+      const pingTrigger = yield* Event.trigger(Reversed)
+      const ping = (): void => pingTrigger({})
+      return mount({ props: { label: rowProps.label }, slots: {}, events: { ping } })
+    }),
+    Reducer.live(ReverseRows, (current) => [...current].reverse()),
+  ).pipe(Layer.provideMerge(presentation), Layer.provideMerge(Engine))
+  return scene(ListComp, { provide: [app] })
+}
+
+const rowsOf = (tree: WireTree): ReadonlyArray<WireNode> =>
+  tree.filter((node) => node.slot === 'Row')
+
+// ---------------------------------------------------------------------------
+// BUG 1 — a keyed slot child's client identity follows its POSITION, not its key.
+//
+// `each({ key: … })` labels every child, the server ships that label as
+// `WireNode.key`, and `@playfast/reform-react` (the local host for the same
+// scene) reconciles React by exactly that key —
+// packages/react/src/structure.ts:106 `key: placement.key`.
+// The remote client instead keys React by the wire node id
+// (packages/reform-remote/src/client.ts:158 `key: child.id`), and that id is
+// minted positionally as `${parent}.${slot}.${index}`
+// (packages/reform-remote/src/wireRender.ts:104). Reorder a keyed list and every
+// node id keeps its slot position while its `key` slides underneath it, so each
+// client component instance — and all of its local state — is silently
+// re-attached to a different item.
+// ---------------------------------------------------------------------------
+
+test('a reordered keyed slot keeps each item on its own client instance', async () => {
+  const server = makeRemoteServer(
+    identityScene([
+      { id: 'a', label: 'A' },
+      { id: 'b', label: 'B' },
+      { id: 'c', label: 'C' },
+    ]),
+  )
+  const mounts = { n: 0 }
+  const views = remoteViews<{ RegressList: typeof ListUi; RegressRow: typeof RowUi }>({
+    RegressList: Ui.make(ListUi, (_props, slots) =>
+      createElement('div', null, createElement(slots.Row)),
+    ),
+    // Per-row client state: which instance is rendering this row?
+    RegressRow: Ui.make(RowUi, ({ label }) => {
+      const [instance] = useState(() => {
+        mounts.n += 1
+        return `instance-${mounts.n}`
+      })
+      return createElement('span', { 'data-label': label, 'data-instance': instance }, label)
+    }),
+  })
+
+  const container = document.createElement('div')
+  document.body.appendChild(container)
+  const root = createRoot(container)
+
+  const rendered = (): ReadonlyArray<readonly [string, string]> =>
+    [...container.querySelectorAll('[data-label]')].map(
+      (element) =>
+        [
+          element.getAttribute('data-label') ?? '',
+          element.getAttribute('data-instance') ?? '',
+        ] as const,
+    )
+  const instanceByLabel = (): Record<string, string> => Object.fromEntries(rendered())
+
+  try {
+    const before = await server.render()
+    expect(rowsOf(before).map((node) => node.key)).toEqual(['a', 'b', 'c'])
+    await act(async () => {
+      root.render(renderWireTree(before, { views, invoke: () => undefined }))
+    })
+    const ownerBefore = instanceByLabel()
+    expect(ownerBefore).toEqual({ A: 'instance-1', B: 'instance-2', C: 'instance-3' })
+
+    // Reverse the list server-side: same three keys, new order.
+    await server.invoke('0:reverse', {})
+    const after = await server.render()
+    expect(rowsOf(after).map((node) => node.key)).toEqual(['c', 'b', 'a'])
+    await act(async () => {
+      root.render(renderWireTree(after, { views, invoke: () => undefined }))
+    })
+
+    // The reorder itself did land in the DOM…
+    expect(rendered().map(([label]) => label)).toEqual(['C', 'B', 'A'])
+    // …and nothing remounted, so every instance is still alive.
+    expect(mounts.n).toBe(3)
+    // Each key must therefore still be rendered by the instance that owned it.
+    // Actual today: A→instance-3, C→instance-1 — the state stayed at the slot
+    // position and the items swapped underneath it.
+    expect(instanceByLabel()).toEqual(ownerBefore)
+  } finally {
+    await act(async () => {
+      root.unmount()
+    })
+    await server.dispose()
+  }
+})
+
+// ---------------------------------------------------------------------------
+// BUG 2 — a failed invoke escapes serve()'s message pump as an unhandled
+// promise rejection.
+//
+// packages/reform-remote/src/transport.ts:108-113 (and the identical
+// `serveShared` pump at :215-220) wrap `server.invoke` in `Effect.promise`,
+// which turns a rejection into a defect, then drop the resulting promise with
+// `void Effect.runPromise(…)`. `registry.invoke` legitimately FAILS for a
+// revoked handle (`UnknownTrigger`) or a payload that misses its schema —
+// exactly the "stale client invoke fails cleanly" path the playbook documents —
+// so any client frame that loses that race detonates in the server process.
+// Under Node's default `--unhandled-rejections=throw` that takes down the
+// WebSocket server for every other connected client.
+// ---------------------------------------------------------------------------
+
+test('a stale invoke fails cleanly instead of escaping serve() unhandled', async () => {
+  const rejections: Array<unknown> = []
+  const onRejection = (reason: unknown): void => void rejections.push(reason)
+  process.on('unhandledRejection', onRejection)
+
+  const { server: serverTransport, client: clientTransport } = inMemoryTransportPair<
+    ServerMessage,
+    InvokeMessage
+  >()
+  const client = connect({
+    transport: clientTransport,
+    views: remoteViews<{ Counter: typeof CounterUi }>({
+      Counter: Ui.make(CounterUi, () => null),
+    }),
+  })
+  const server = serve({ scene: counterScene(), transport: serverTransport })
+
+  const countOnClient = (): unknown => {
+    const prop = client
+      .snapshot()
+      .find((node) => node.id === '0')
+      ?.props.find((candidate) => candidate._tag === 'Data' && candidate.name === 'count')
+    return prop !== undefined && 'value' in prop ? prop.value : undefined
+  }
+
+  try {
+    await server.start()
+    await until('the client received the initial snapshot', () => countOnClient() === 0)
+
+    // A handle the server does not know: the everyday outcome of clicking a row
+    // whose node was deleted by a background patch still in flight.
+    clientTransport.send({ _tag: 'Invoke', handle: '0:gone', payload: {} })
+    // A well-formed invoke behind it, used purely as the landing signal.
+    clientTransport.send({ _tag: 'Invoke', handle: '0:bump', payload: { by: 3 } })
+    await until('the following invoke round-tripped', () => countOnClient() === 3)
+
+    expect(rejections).toEqual([])
+  } finally {
+    process.off('unhandledRejection', onRejection)
+    client.dispose()
+    await server.dispose()
+  }
+})
+
+// ---------------------------------------------------------------------------
+// BUG 3 — <RemoteUI> renders nothing under <StrictMode>.
+//
+// packages/reform-remote/src/react.ts:9-10 creates the transport subscription
+// inside a `useState` initializer — `connect()` calls `transport.onMessage`
+// eagerly — but tears it down from an effect cleanup. StrictMode double-invokes
+// the initializer (two bindings, one orphaned but still subscribed) and then
+// double-invokes the effect: setup → cleanup → setup. The cleanup calls
+// `binding.dispose()` on the binding React kept, and the second setup does
+// nothing to re-subscribe it, so the binding that is actually rendered is deaf
+// for the rest of its life. `@playfast/reform-react` deliberately avoids this
+// shape ("Capture once: committed construction avoids leaking runtimes from
+// abandoned renders", packages/react/src/index.ts:116).
+// ---------------------------------------------------------------------------
+
+const counterNode: WireNode = {
+  id: '0',
+  name: 'Counter',
+  parentId: null,
+  childIndex: 0,
+  slot: null,
+  key: null,
+  props: [{ _tag: 'Data', name: 'count', value: 41 }],
+}
+
+type CounterContract = { Counter: typeof CounterUi }
+
+test('RemoteUI stays subscribed to its transport under StrictMode', async () => {
+  const views = remoteViews<CounterContract>({
+    Counter: Ui.make(CounterUi, ({ count }) =>
+      createElement('i', { 'data-count': String(count) }, String(count)),
+    ),
+  })
+
+  const control = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+  const controlContainer = document.createElement('div')
+  document.body.appendChild(controlContainer)
+  const controlRoot = createRoot(controlContainer)
+
+  const strict = inMemoryTransportPair<ServerMessage, InvokeMessage>()
+  const strictContainer = document.createElement('div')
+  document.body.appendChild(strictContainer)
+  const strictRoot = createRoot(strictContainer)
+
+  try {
+    // Control: the very same mount without StrictMode, so a failure below can
+    // only be StrictMode's double-invocation and not a broken harness.
+    await act(async () => {
+      controlRoot.render(
+        createElement<RemoteUIProps<CounterContract>>(RemoteUI, {
+          transport: control.client,
+          views,
+        }),
+      )
+    })
+    await act(async () => {
+      control.server.send({ _tag: 'Snapshot', tree: [counterNode] })
+    })
+    expect(controlContainer.querySelector('[data-count]')?.getAttribute('data-count')).toBe('41')
+
+    await act(async () => {
+      strictRoot.render(
+        createElement(
+          StrictMode,
+          null,
+          createElement<RemoteUIProps<CounterContract>>(RemoteUI, {
+            transport: strict.client,
+            views,
+          }),
+        ),
+      )
+    })
+    await act(async () => {
+      strict.server.send({ _tag: 'Snapshot', tree: [counterNode] })
+    })
+    // Actual today: null — the snapshot reached an orphaned binding, and the
+    // rendered one had already been unsubscribed by StrictMode's effect cleanup.
+    expect(strictContainer.querySelector('[data-count]')?.getAttribute('data-count')).toBe('41')
+  } finally {
+    await act(async () => {
+      controlRoot.unmount()
+      strictRoot.unmount()
+    })
+  }
+})