@playfast/reform-remote-web 1.0.3 → 1.2.0

package/README.md

@@ -33,7 +33,7 @@ const App = () => {
 **Reconnection is built in.** A dropped socket is retried with exponential backoff
 (`baseDelayMs`/`maxDelayMs`), and because the message handlers persist across sockets, the
 server's first frame on the new connection — always a `Snapshot` — re-syncs the tree
-automatically, with no stale nodes left behind. The returned value *is* a `RemoteTransport`
+automatically, with no stale nodes left behind. The returned value _is_ a `RemoteTransport`
 (pass it straight to `connect` or `<RemoteUI>`) that additionally carries `status()`,
 `onStatusChange()` — together a `StatusReporter`, so `useConnectionStatus` drives the badge
 above — and `close()` to stop reconnecting.

package/dist/errors.d.ts

@@ -0,0 +1,11 @@
+import { type Cause } from 'effect';
+type TaggedErrorClass<Tag extends string, A extends Record<string, unknown>> = new (args: A) => Cause.YieldableError & {
+    readonly _tag: Tag;
+} & Readonly<A>;
+declare const MissingWebSocketBase: TaggedErrorClass<'@playfast/reform-remote-web/MissingWebSocket', {
+    readonly message: string;
+}>;
+export declare class MissingWebSocket extends MissingWebSocketBase {
+}
+export {};
+//# sourceMappingURL=errors.d.ts.map

package/dist/errors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,KAAK,EAAQ,MAAM,QAAQ,CAAA;AAGzC,KAAK,gBAAgB,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,KAC7E,IAAI,EAAE,CAAC,KACJ,KAAK,CAAC,cAAc,GAAG;IAAE,QAAQ,CAAC,IAAI,EAAE,GAAG,CAAA;CAAE,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;AAEhE,QAAA,MAAM,oBAAoB,EAAE,gBAAgB,CAC1C,8CAA8C,EAC9C;IAAE,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAG5B,CAAA;AAEF,qBAAa,gBAAiB,SAAQ,oBAAoB;CAAG"}

package/dist/errors.js

@@ -0,0 +1,5 @@
+import { Data } from 'effect';
+const MissingWebSocketBase = (Data.TaggedError('@playfast/reform-remote-web/MissingWebSocket'));
+export class MissingWebSocket extends MissingWebSocketBase {
+}
+//# sourceMappingURL=errors.js.map

package/dist/errors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"errors.js","sourceRoot":"","sources":["../src/errors.ts"],"names":[],"mappings":"AAAA,OAAO,EAAc,IAAI,EAAE,MAAM,QAAQ,CAAA;AAOzC,MAAM,oBAAoB,GAGtB,CAAA,IAAI,CAAC,WAAW,CAAC,8CAA8C,CAEjE,CAAA,CAAA;AAEF,MAAM,OAAO,gBAAiB,SAAQ,oBAAoB;CAAG"}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export * as Transport from './transport.js';
+export * as Errors from './errors.js';
+export { type ClientStatus, createWebSocketClientTransport, type WebSocketClientTransport, type WebSocketClientTransportOptions, } from './transport.js';
+export { MissingWebSocket } from './errors.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAA;AAC3C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAA;AAErC,OAAO,EACL,KAAK,YAAY,EACjB,8BAA8B,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,+BAA+B,GACrC,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export * as Transport from './transport.js';
+export * as Errors from './errors.js';
+export { createWebSocketClientTransport, } from './transport.js';
+export { MissingWebSocket } from './errors.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,SAAS,MAAM,gBAAgB,CAAA;AAC3C,OAAO,KAAK,MAAM,MAAM,aAAa,CAAA;AAErC,OAAO,EAEL,8BAA8B,GAG/B,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA"}

package/dist/transport.d.ts

@@ -0,0 +1,20 @@
+import { Redacted } from 'effect';
+import type { InvokeMessage, RemoteTransport, ServerMessage } from '@playfast/reform-remote';
+export type ClientStatus = 'connecting' | 'open' | 'reconnecting' | 'closed';
+export interface WebSocketClientTransportOptionsExternalApi {
+    readonly url: string;
+    readonly baseDelayMs?: number;
+    readonly maxDelayMs?: number;
+    readonly protocols?: string | ReadonlyArray<string>;
+    readonly authToken?: Redacted.Redacted<string>;
+    readonly WebSocket?: typeof WebSocket;
+    readonly onStatus?: (status: ClientStatus) => void;
+}
+export type WebSocketClientTransportOptions = WebSocketClientTransportOptionsExternalApi;
+export type WebSocketClientTransport = RemoteTransport<InvokeMessage, ServerMessage> & {
+    readonly status: () => ClientStatus;
+    readonly onStatusChange: (listener: () => void) => () => void;
+    readonly close: () => void;
+};
+export declare const createWebSocketClientTransport: (options: WebSocketClientTransportOptions) => WebSocketClientTransport;
+//# sourceMappingURL=transport.d.ts.map

package/dist/transport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.d.ts","sourceRoot":"","sources":["../src/transport.ts"],"names":[],"mappings":"AAAA,OAAO,EAAyB,QAAQ,EAAU,MAAM,QAAQ,CAAA;AAChE,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAG5F,MAAM,MAAM,YAAY,GAAG,YAAY,GAAG,MAAM,GAAG,cAAc,GAAG,QAAQ,CAAA;AAqD5E,MAAM,WAAW,0CAA0C;IACzD,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAA;IAC7B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,MAAM,CAAC,CAAA;IAEnD,QAAQ,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAA;IAC9C,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,SAAS,CAAA;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAA;CACnD;AAED,MAAM,MAAM,+BAA+B,GAAG,0CAA0C,CAAA;AAExF,MAAM,MAAM,wBAAwB,GAAG,eAAe,CAAC,aAAa,EAAE,aAAa,CAAC,GAAG;IACrF,QAAQ,CAAC,MAAM,EAAE,MAAM,YAAY,CAAA;IACnC,QAAQ,CAAC,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;IAC7D,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAC3B,CAAA;AAmBD,eAAO,MAAM,8BAA8B,GACzC,SAAS,+BAA+B,KACvC,wBAqIF,CAAA"}

package/dist/transport.js

@@ -0,0 +1,157 @@
+import { Effect, Fiber, Option, Redacted, Schema } from 'effect';
+import { MissingWebSocket } from './errors.js';
+const DEFAULT_BASE_DELAY_MS = 250;
+const DEFAULT_MAX_DELAY_MS = 5000;
+const WirePropSchema = Schema.Union(Schema.Struct({
+    _tag: Schema.Literal('Data'),
+    name: Schema.String,
+    value: Schema.Unknown,
+}), Schema.Struct({
+    _tag: Schema.Literal('Event'),
+    name: Schema.String,
+    handle: Schema.String,
+}));
+const WireNodeSchema = Schema.Struct({
+    id: Schema.String,
+    name: Schema.String,
+    parentId: Schema.NullOr(Schema.String),
+    childIndex: Schema.Number,
+    slot: Schema.NullOr(Schema.String),
+    key: Schema.NullOr(Schema.String),
+    props: Schema.Array(WirePropSchema),
+});
+const WirePatchSchema = Schema.Union(Schema.Struct({ _tag: Schema.Literal('Upsert'), node: WireNodeSchema }), Schema.Struct({ _tag: Schema.Literal('Delete'), id: Schema.String }));
+const InvokeMessageJson = Schema.parseJson(Schema.Struct({
+    _tag: Schema.Literal('Invoke'),
+    handle: Schema.String,
+    payload: Schema.Unknown,
+}));
+const ServerMessageJson = Schema.parseJson(Schema.Union(Schema.Struct({
+    _tag: Schema.Literal('Snapshot'),
+    tree: Schema.Array(WireNodeSchema),
+}), Schema.Struct({
+    _tag: Schema.Literal('Patches'),
+    patches: Schema.Array(WirePatchSchema),
+})));
+const encodeInvokeMessage = Schema.encodeSync(InvokeMessageJson);
+const decodeServerMessage = Schema.decodeUnknownSync(ServerMessageJson);
+const resolveWebSocket = (injected) => {
+    const globalScope = globalThis;
+    const impl = injected ?? globalScope.WebSocket;
+    return Option.getOrThrowWith(Option.fromNullable(impl), () => new MissingWebSocket({
+        message: 'No global WebSocket; pass `WebSocket` in options (e.g. the `ws` package in Node <22).',
+    }));
+};
+export const createWebSocketClientTransport = (options) => {
+    const url = options.url;
+    const WebSocketImpl = resolveWebSocket(options.WebSocket);
+    const baseDelayMs = options.baseDelayMs ?? DEFAULT_BASE_DELAY_MS;
+    const maxDelayMs = options.maxDelayMs ?? DEFAULT_MAX_DELAY_MS;
+    const baseProtocols = options.protocols === undefined
+        ? []
+        : typeof options.protocols === 'string'
+            ? [options.protocols]
+            : options.protocols;
+    const protocols = options.authToken !== undefined
+        ? [`bearer.${Redacted.value(options.authToken)}`, ...baseProtocols]
+        : baseProtocols.length === 0
+            ? undefined
+            : baseProtocols;
+    const handlers = new Set();
+    const statusListeners = new Set();
+    const state = {
+        socket: Option.none(),
+        status: 'connecting',
+        attempts: 0,
+        timer: Option.none(),
+        queue: [],
+        inbox: [],
+    };
+    const setStatus = (status) => {
+        if (status === state.status) {
+            return;
+        }
+        state.status = status;
+        options.onStatus?.(status);
+        statusListeners.forEach((listener) => listener());
+    };
+    const flush = () => {
+        if (!Option.isSome(state.socket)) {
+            return;
+        }
+        const socket = state.socket.value;
+        if (socket.readyState !== WebSocketImpl.OPEN) {
+            return;
+        }
+        const pending = state.queue;
+        state.queue = [];
+        pending.forEach((message) => socket.send(encodeInvokeMessage(message)));
+    };
+    const scheduleReconnect = () => {
+        if (state.status === 'closed') {
+            return;
+        }
+        setStatus('reconnecting');
+        const delay = Math.min(maxDelayMs, baseDelayMs * 2 ** state.attempts);
+        state.attempts += 1;
+        state.timer = Option.some(Effect.runFork(Effect.sleep(delay).pipe(Effect.andThen(Effect.sync(connect)))));
+    };
+    // A socket may fire both error and close; clearing first prevents duplicate reconnects.
+    const handleDrop = (socket) => {
+        if (Option.isNone(state.socket) || state.socket.value !== socket) {
+            return;
+        }
+        state.socket = Option.none();
+        scheduleReconnect();
+    };
+    function connect() {
+        const socket = protocols === undefined ? new WebSocketImpl(url) : new WebSocketImpl(url, [...protocols]);
+        state.socket = Option.some(socket);
+        socket.addEventListener('open', () => {
+            state.attempts = 0;
+            setStatus('open');
+            flush();
+        });
+        socket.addEventListener('message', (event) => {
+            const message = decodeServerMessage(event.data);
+            if (handlers.size === 0) {
+                state.inbox = [...state.inbox, message];
+                return;
+            }
+            handlers.forEach((handler) => handler(message));
+        });
+        socket.addEventListener('close', () => handleDrop(socket));
+        socket.addEventListener('error', () => handleDrop(socket));
+    }
+    connect();
+    return {
+        send: (message) => {
+            state.queue = [...state.queue, message];
+            flush();
+        },
+        onMessage: (handler) => {
+            handlers.add(handler);
+            if (state.inbox.length > 0) {
+                const buffered = state.inbox;
+                state.inbox = [];
+                buffered.forEach((message) => handler(message));
+            }
+            return () => void handlers.delete(handler);
+        },
+        status: () => state.status,
+        onStatusChange: (listener) => {
+            statusListeners.add(listener);
+            return () => void statusListeners.delete(listener);
+        },
+        close: () => {
+            setStatus('closed');
+            if (Option.isSome(state.timer)) {
+                Effect.runSync(Fiber.interrupt(state.timer.value));
+            }
+            if (Option.isSome(state.socket)) {
+                state.socket.value.close();
+            }
+        },
+    };
+};
+//# sourceMappingURL=transport.js.map

package/dist/transport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transport.js","sourceRoot":"","sources":["../src/transport.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,48 +1,58 @@
 {
   "name": "@playfast/reform-remote-web",
-  "playbook": "./playbook",
-  "version": "1.0.3",
-  "type": "module",
+  "version": "1.2.0",
   "description": "Browser/web WebSocket client transport for reform-remote — streams a server-run reform scene to a thin renderer.",
   "keywords": [
-    "reform",
     "effect",
-    "websocket",
+    "reform",
     "remote",
-    "transport"
+    "transport",
+    "websocket"
   ],
+  "bugs": {
+    "url": "https://github.com/playfast/reform/issues"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/playfast/reform.git",
     "directory": "packages/reform-remote-web"
   },
-  "bugs": {
-    "url": "https://github.com/playfast/reform/issues"
-  },
-  "sideEffects": false,
-  "exports": {
-    "./package.json": "./package.json",
-    ".": "./src/index.ts",
-    "./*": "./src/*.ts"
-  },
   "files": [
+    "dist",
     "src",
     "README.md"
   ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "playfast-src": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "playfast-src": "./src/*.ts",
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "clean": "rm -rf dist .tsbuildinfo",
     "check": "tsc --noEmit",
-    "build": "tsc -p tsconfig.build.json",
+    "build": "rm -rf dist .tsbuildinfo && tsc -p tsconfig.build.json && bun ../../scripts/fix-esm-extensions.ts dist",
     "test": "vitest run",
     "test:watch": "vitest",
     "coverage": "vitest run --coverage",
     "lint": "oxlint src",
-    "lint:fix": "oxlint --fix src"
-  },
-  "peerDependencies": {
-    "effect": "*",
-    "@playfast/reform-remote": "*"
+    "lint:fix": "oxlint --fix src",
+    "prepack": "bun run build"
   },
   "devDependencies": {
     "@playfast/reform": "*",
@@ -50,7 +60,9 @@
     "@playfast/reform-remote-node": "*",
     "react": "^19.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  }
+  "peerDependencies": {
+    "@playfast/reform-remote": "*",
+    "effect": "*"
+  },
+  "playbook": "./playbook"
 }

package/src/client.test.ts

@@ -31,11 +31,19 @@ class CounterUi extends ui('Counter', {
   props: S.Struct({ count: S.Number }),
   events: { bump: S.Struct({ by: S.Number }) },
 }) {}
-class Counter extends Composition.make('Counter', { title: 'Counter', ui: CounterUi, states: [Count] }) {}
+
+class Counter extends Composition.make('Counter', {
+  title: 'Counter',
+  ui: CounterUi,
+  states: [Count],
+})<Counter>() {}
 
 const counterScene = () => {
   const presentation = Layer.mergeAll(
-    provide(CounterUi, Ui.make(CounterUi, ({ count }) => `count:${count}`)),
+    provide(
+      CounterUi,
+      Ui.make(CounterUi, ({ count }) => `count:${count}`),
+    ),
     StateGroup.live(Counters, { count: 0 }),
   )
   const app = Layer.mergeAll(
@@ -60,7 +68,8 @@ const probeView = (probe: Probe) =>
     return null
   })
 
-const draw = (node: ReactNode): void => void renderToStaticMarkup(createElement(Fragment, null, node))
+const draw = (node: ReactNode): void =>
+  void renderToStaticMarkup(createElement(Fragment, null, node))
 
 const listening = (host: NodeWebSocketServer): Promise<number> =>
   new Promise((resolve) =>

package/src/transport.ts

@@ -1,4 +1,4 @@
-import { Option, Redacted } from 'effect'
+import { Effect, Fiber, Option, Redacted, Schema } from 'effect'
 import type { InvokeMessage, RemoteTransport, ServerMessage } from '@playfast/reform-remote'
 import { MissingWebSocket } from './errors.js'
 
@@ -7,12 +7,60 @@ export type ClientStatus = 'connecting' | 'open' | 'reconnecting' | 'closed'
 const DEFAULT_BASE_DELAY_MS = 250
 const DEFAULT_MAX_DELAY_MS = 5000
 
+const WirePropSchema = Schema.Union(
+  Schema.Struct({
+    _tag: Schema.Literal('Data'),
+    name: Schema.String,
+    value: Schema.Unknown,
+  }),
+  Schema.Struct({
+    _tag: Schema.Literal('Event'),
+    name: Schema.String,
+    handle: Schema.String,
+  }),
+)
+const WireNodeSchema = Schema.Struct({
+  id: Schema.String,
+  name: Schema.String,
+  parentId: Schema.NullOr(Schema.String),
+  childIndex: Schema.Number,
+  slot: Schema.NullOr(Schema.String),
+  key: Schema.NullOr(Schema.String),
+  props: Schema.Array(WirePropSchema),
+})
+const WirePatchSchema = Schema.Union(
+  Schema.Struct({ _tag: Schema.Literal('Upsert'), node: WireNodeSchema }),
+  Schema.Struct({ _tag: Schema.Literal('Delete'), id: Schema.String }),
+)
+const InvokeMessageJson: Schema.Schema<InvokeMessage, string, never> = Schema.parseJson(
+  Schema.Struct({
+    _tag: Schema.Literal('Invoke'),
+    handle: Schema.String,
+    payload: Schema.Unknown,
+  }),
+)
+const ServerMessageJson: Schema.Schema<ServerMessage, string, never> = Schema.parseJson(
+  Schema.Union(
+    Schema.Struct({
+      _tag: Schema.Literal('Snapshot'),
+      tree: Schema.Array(WireNodeSchema),
+    }),
+    Schema.Struct({
+      _tag: Schema.Literal('Patches'),
+      patches: Schema.Array(WirePatchSchema),
+    }),
+  ),
+)
+const encodeInvokeMessage: (message: InvokeMessage) => string = Schema.encodeSync(InvokeMessageJson)
+const decodeServerMessage: (input: unknown) => ServerMessage =
+  Schema.decodeUnknownSync(ServerMessageJson)
+
 export interface WebSocketClientTransportOptionsExternalApi {
   readonly url: string
   readonly baseDelayMs?: number
   readonly maxDelayMs?: number
   readonly protocols?: string | ReadonlyArray<string>
-  // Browser WebSocket can't set headers; auth rides as `bearer.<token>` subprotocol. Redacted so it never logs.
+  // Browser WebSocket cannot set headers; auth uses a bearer subprotocol and stays redacted.
   readonly authToken?: Redacted.Redacted<string>
   readonly WebSocket?: typeof WebSocket
   readonly onStatus?: (status: ClientStatus) => void
@@ -33,13 +81,14 @@ interface GlobalWebSocketHolderExternalApi {
 const resolveWebSocket = (injected: typeof WebSocket | undefined): typeof WebSocket => {
   const globalScope: GlobalWebSocketHolderExternalApi = globalThis
   const impl = injected ?? globalScope.WebSocket
-  if (impl === undefined) {
-    // oxlint-disable-next-line reform-rules/no-throw -- sync public transport factory invariant; no Effect context at construction
-    throw new MissingWebSocket({
-      message: 'No global WebSocket; pass `WebSocket` in options (e.g. the `ws` package in Node <22).',
-    })
-  }
-  return impl
+  return Option.getOrThrowWith(
+    Option.fromNullable(impl),
+    () =>
+      new MissingWebSocket({
+        message:
+          'No global WebSocket; pass `WebSocket` in options (e.g. the `ws` package in Node <22).',
+      }),
+  )
 }
 
 export const createWebSocketClientTransport = (
@@ -69,11 +118,9 @@ export const createWebSocketClientTransport = (
     socket: Option.Option<WebSocket>
     status: ClientStatus
     attempts: number
-    timer: Option.Option<ReturnType<typeof setTimeout>>
+    timer: Option.Option<Fiber.RuntimeFiber<void, never>>
     queue: ReadonlyArray<InvokeMessage>
-    // Inbound messages that arrived before any handler subscribed. The server pushes the initial
-    // Snapshot the instant the socket opens, but a consumer (e.g. RemoteUI) only subscribes after
-    // it mounts — so without this buffer the first scene is dropped and the UI blanks forever.
+    // The opening Snapshot can arrive before RemoteUI subscribes.
     inbox: ReadonlyArray<ServerMessage>
   } = {
     socket: Option.none(),
@@ -103,8 +150,7 @@ export const createWebSocketClientTransport = (
     }
     const pending = state.queue
     state.queue = []
-    // oxlint-disable-next-line reform-rules/no-json-parse-stringify -- wire frame encode; InvokeMessage is a structural type with no Schema here
-    pending.forEach((message) => socket.send(JSON.stringify(message)))
+    pending.forEach((message) => socket.send(encodeInvokeMessage(message)))
   }
 
   const scheduleReconnect = (): void => {
@@ -114,11 +160,12 @@ export const createWebSocketClientTransport = (
     setStatus('reconnecting')
     const delay = Math.min(maxDelayMs, baseDelayMs * 2 ** state.attempts)
     state.attempts += 1
-    // oxlint-disable-next-line reform-rules/no-set-timeout-interval -- DOM transport reconnect backoff; sync factory has no Effect runtime
-    state.timer = Option.some(setTimeout(connect, delay))
+    state.timer = Option.some(
+      Effect.runFork(Effect.sleep(delay).pipe(Effect.andThen(Effect.sync(connect)))),
+    )
   }
 
-  // Socket may fire both error and close; clear on first drop so only one reconnect is scheduled.
+  // A socket may fire both error and close; clearing first prevents duplicate reconnects.
   const handleDrop = (socket: WebSocket): void => {
     if (Option.isNone(state.socket) || state.socket.value !== socket) {
       return
@@ -128,19 +175,17 @@ export const createWebSocketClientTransport = (
   }
 
   function connect(): void {
-    const socket = protocols === undefined ? new WebSocketImpl(url) : new WebSocketImpl(url, [...protocols])
+    const socket =
+      protocols === undefined ? new WebSocketImpl(url) : new WebSocketImpl(url, [...protocols])
     state.socket = Option.some(socket)
     socket.addEventListener('open', () => {
       state.attempts = 0
       setStatus('open')
       flush()
     })
-    socket.addEventListener('message', (event: MessageEvent) => {
-      // oxlint-disable-next-line reform-rules/no-json-parse-stringify, reform-rules/no-type-assertion -- wire frame decode; ServerMessage is a structural type with no Schema here
-      const message = JSON.parse(event.data as string) as ServerMessage
+    socket.addEventListener('message', (event: MessageEvent<unknown>) => {
+      const message = decodeServerMessage(event.data)
       if (handlers.size === 0) {
-        // No subscriber yet: buffer so the first one to subscribe still receives this message
-        // rather than losing it (the server's initial Snapshot can beat the consumer's mount).
         state.inbox = [...state.inbox, message]
         return
       }
@@ -153,14 +198,12 @@ export const createWebSocketClientTransport = (
   connect()
 
   return {
-    send: (message) => {
+    send: (message: InvokeMessage): void => {
       state.queue = [...state.queue, message]
       flush()
     },
-    onMessage: (handler) => {
+    onMessage: (handler: (message: ServerMessage) => void): (() => void) => {
       handlers.add(handler)
-      // Replay anything that arrived before this first subscription, then clear the buffer so a
-      // later second subscriber does not receive the same messages again.
       if (state.inbox.length > 0) {
         const buffered = state.inbox
         state.inbox = []
@@ -169,14 +212,14 @@ export const createWebSocketClientTransport = (
       return () => void handlers.delete(handler)
     },
     status: () => state.status,
-    onStatusChange: (listener) => {
+    onStatusChange: (listener: () => void): (() => void) => {
       statusListeners.add(listener)
       return () => void statusListeners.delete(listener)
     },
     close: () => {
       setStatus('closed')
       if (Option.isSome(state.timer)) {
-        clearTimeout(state.timer.value)
+        Effect.runSync(Fiber.interrupt(state.timer.value))
       }
       if (Option.isSome(state.socket)) {
         state.socket.value.close()