ignotum 0.0.13 → 0.0.15

package/src/client/sync.ts

@@ -1,24 +1,12 @@
 import { BrowserSession } from "./id.js";
-import {
-  Context,
-  Deferred,
-  Duration,
-  Effect,
-  Fiber,
-  HashMap,
-  Layer,
-  ManagedRuntime,
-  Option,
-  Schedule,
-  Schema,
-} from "effect";
-import * as Socket from "effect/unstable/socket/Socket";
-import * as BrowserCrypto from "@effect/platform-browser/BrowserCrypto";
+import { ManagedBrowserClient } from "./managed-client.js";
+import type { ExecutionSelection } from "@ignotum/contracts/platform";
+import { Context, Effect, Layer, ManagedRuntime, Schema } from "effect";
 
 import { encodeCanonicalJson } from "@ignotum/contracts/json";
 import { type AppStateRevision } from "@ignotum/contracts/runtime/hosted";
 import { IdGenerator } from "@ignotum/shared/id";
-import { encodeTransportObject } from "@ignotum/contracts/runtime/sync";
+import type { ManagedClientMessage, ManagedServerMessage } from "@ignotum/contracts/managed-sync";
 
 import type {
   ErrorValue,
@@ -27,33 +15,20 @@ import type {
 } from "@ignotum/contracts/runtime/result";
 import { failureFromWire, pending, Result } from "@ignotum/contracts/runtime/result";
 import {
-  ClientMessageJson,
-  DeploymentCloseCode,
-  InvocationId,
-  ServerMessageJson,
   SubscriptionId,
   decodeTransportValue,
-  type ClientMessage,
   type FunctionAddress,
-  type ServerMessage,
-  type SyncHandshake,
   type WireResult,
 } from "@ignotum/contracts/runtime/sync";
 import {
   ClientInfrastructureError,
   ConnectionUnavailable,
-  InvalidClientMessage,
   InvalidServerMessage,
-  ServerError,
-  InvalidMutationArguments,
   clientErrorReporterLayer,
-  reportClientError,
 } from "./errors.js";
-import { syncPath } from "../internal/http-paths.js";
-import { applyFileGrants, prepareMutationArguments } from "./files.js";
+import { applyFileGrants } from "./files.js";
 
 type Listener = () => void;
-type SocketWriter = (chunk: string) => Effect.Effect<void, Socket.SocketError>;
 
 interface QueryEntry {
   readonly args: Schema.Json;
@@ -67,13 +42,16 @@ interface QueryEntry {
   result: QueryResult<unknown, ErrorValue> | ClientInfrastructureError;
 }
 
-interface QueryObserver {
+export interface QueryObserver {
   readonly getSnapshot: () => QueryResult<unknown, ErrorValue> | ClientInfrastructureError;
   readonly release: Effect.Effect<void>;
   readonly subscribe: (listener: Listener) => () => void;
 }
 
-type QueryLifecycleMessage = Extract<ClientMessage, { readonly type: "Subscribe" | "Unsubscribe" }>;
+type QueryLifecycleMessage = Extract<
+  ManagedClientMessage,
+  { readonly type: "Subscribe" | "Unsubscribe" }
+>;
 
 interface QueryCache {
   readonly invalidate: (ids?: ReadonlyArray<SubscriptionId>) => void;
@@ -201,7 +179,9 @@ const makeQueryCache = (
   } satisfies QueryCache;
 };
 
-type SnapshotFiles = NonNullable<Extract<ServerMessage, { readonly type: "Snapshot" }>["files"]>;
+type SnapshotFiles = NonNullable<
+  Extract<ManagedServerMessage, { readonly type: "QuerySnapshot" }>["files"]
+>;
 
 const resultFromWire = Effect.fn("SyncClient.resultFromWire")(
   (wire: WireResult, files: SnapshotFiles = []) =>
@@ -222,40 +202,13 @@ const resultFromWire = Effect.fn("SyncClient.resultFromWire")(
     }),
 );
 
-export const shouldReloadForCloseCode = (code: number): boolean => code === DeploymentCloseCode;
-
-const handshakesMatch = (first: SyncHandshake, next: SyncHandshake): boolean =>
-  first.appId === next.appId &&
-  first.deploymentId === next.deploymentId &&
-  first.generation === next.generation;
-
-type HandshakeDecision = "Accept" | "Ignore" | "Reload";
-
-const handshakeDecision = (
-  remembered: SyncHandshake | undefined,
-  acceptedOnConnection: boolean,
-  next: SyncHandshake,
-): HandshakeDecision => {
-  if (remembered !== undefined && !handshakesMatch(remembered, next)) return "Reload";
-  return acceptedOnConnection ? "Ignore" : "Accept";
-};
-
 export const syncClientInternals = {
   makeQueryCache,
-  handshakeDecision,
   queryIdentity: queryKey,
   resultFromWire,
-  handshakesMatch,
-  shouldReloadForCloseCode,
 };
 
-const socketUrl = (): string => {
-  const url = new URL(syncPath, globalThis.location.href);
-  url.protocol = url.protocol === "https:" ? "wss:" : "ws:";
-  return url.href;
-};
-
-interface SyncClientService {
+export interface SyncClientService {
   readonly mutate: (
     functionAddress: FunctionAddress,
     // oxlint-disable-next-line anti-slop/no-unknown-parameters -- Generated reference argument types are deliberately erased at the client transport boundary.
@@ -267,539 +220,60 @@ interface SyncClientService {
   ) => Effect.Effect<QueryObserver, ClientInfrastructureError>;
 }
 
-interface PendingInvocation {
-  readonly sessionEpoch: string;
-  readonly deferred: Deferred.Deferred<
-    IgnotumResult<unknown, ErrorValue>,
-    ClientInfrastructureError
-  >;
-  readonly function: FunctionAddress;
-  readonly message: Extract<ClientMessage, { readonly type: "Invoke" | "Prepare" }>;
-  readonly prepared: Deferred.Deferred<
-    Extract<ServerMessage, { readonly type: "Preparation" }>["uploads"],
-    ClientInfrastructureError
-  >;
-}
-
 export class SyncClient extends Context.Service<SyncClient, SyncClientService>()(
   "ignotum/client/sync/SyncClient",
-) {
-  static readonly layer = Layer.effect(
-    SyncClient,
-    Effect.gen(function* () {
-      const ids = yield* IdGenerator;
-      const session = yield* BrowserSession;
-      let invocations = HashMap.empty<InvocationId, PendingInvocation>();
-      let rememberedHandshake: SyncHandshake | undefined;
-      let reloadRequested = false;
-      let writer: SocketWriter | undefined;
-      let sessionSuspended: Deferred.Deferred<void> | undefined;
-
-      const encode = (message: ClientMessage) =>
-        Schema.encodeEffect(ClientMessageJson)(message).pipe(
-          Effect.mapError((cause) =>
-            InvalidClientMessage.make({
-              cause,
-              message: "Could not encode an Ignotum sync message.",
-            }),
-          ),
-        );
-
-      const sendWith = (write: SocketWriter, message: ClientMessage) =>
-        encode(message).pipe(
-          Effect.flatMap(write),
-          Effect.mapError((cause) =>
-            Schema.is(InvalidClientMessage)(cause)
-              ? cause
-              : ConnectionUnavailable.make({
-                  cause,
-                  message: "The sync connection was lost.",
-                }),
-          ),
-        );
-
-      const send = (message: ClientMessage) =>
-        writer === undefined
-          ? Effect.fail(
-              ConnectionUnavailable.make({ message: "The sync connection is not ready." }),
-            )
-          : sendWith(writer, message);
-
-      const queryCache = makeQueryCache(ids.generate(SubscriptionId), (message) =>
-        writer === undefined
-          ? Effect.void
-          : send(message).pipe(
-              Effect.catchTags({
-                ConnectionUnavailable: reportClientError,
-                InvalidClientMessage: reportClientError,
-              }),
-            ),
-      );
-
-      const unsubscribeSession = session.subscribe(() => {
-        if (session.current() === undefined) {
-          queryCache.invalidatePrivate();
-          writer = undefined;
-          if (sessionSuspended !== undefined) Deferred.doneUnsafe(sessionSuspended, Effect.void);
-        }
-      });
-      yield* Effect.addFinalizer(() => Effect.sync(unsubscribeSession));
-
-      const rejectInvocation = (id: InvocationId, error: ClientInfrastructureError) => {
-        const pendingInvocation = Option.getOrUndefined(HashMap.get(invocations, id));
-        if (pendingInvocation === undefined) {
-          return Effect.void;
-        }
-        invocations = HashMap.remove(invocations, id);
-        return reportClientError(error).pipe(
-          Effect.andThen(Deferred.fail(pendingInvocation.prepared, error)),
-          Effect.andThen(Deferred.fail(pendingInvocation.deferred, error)),
-          Effect.asVoid,
-        );
-      };
-
-      const handleMessage = Effect.fn("SyncClient.handleMessage")(function* (
-        message: Exclude<ServerMessage, SyncHandshake | { readonly type: "Deployment" }>,
-      ) {
-        switch (message.type) {
-          case "Session": {
-            if (message.event === "Updated") {
-              const previous = session.current();
-              if (previous !== undefined && previous.sessionEpoch !== message.session.sessionEpoch)
-                return;
-              if (previous?.viewRevision !== message.session.viewRevision)
-                queryCache.invalidatePrivate();
-              session.accept(message.session, message.serverTime);
-            } else {
-              if (rememberedHandshake?.session?.sessionEpoch !== message.sessionEpoch) return;
-              session.suspend(
-                message.event === "Unavailable"
-                  ? "Your ID session is temporarily unavailable."
-                  : undefined,
-              );
-              if (message.event !== "Unavailable") {
-                yield* Effect.forEach(HashMap.keys(invocations), (id) =>
-                  rejectInvocation(
-                    id,
-                    ServerError.make({
-                      code: "SessionChanged",
-                      message: "The session changed. This operation may already have completed.",
-                    }),
-                  ),
-                );
-              }
-            }
-            return;
-          }
-          case "Invalidate": {
-            if (message.sessionEpoch === session.current()?.sessionEpoch)
-              queryCache.invalidate(message.ids);
-            return;
-          }
-          case "Snapshot": {
-            const current = session.current();
-            if (current === undefined || message.identity?.sessionEpoch !== current.sessionEpoch)
-              return;
-            if (
-              message.identity.dependsOnId &&
-              message.identity.viewRevision !== current.viewRevision
-            )
-              return;
-            const entry = queryCache.getById(message.id);
-            if (entry === undefined) return;
-            entry.dependsOnId = message.identity.dependsOnId;
-            if (entry.revision !== undefined && message.revision < entry.revision) return;
-            yield* resultFromWire(message.result, message.files ?? []).pipe(
-              Effect.tap((result) =>
-                Effect.sync(() => queryCache.setResult(message.id, result, message.revision)),
-              ),
-              Effect.catchTags({
-                InvalidServerMessage: (error) => {
-                  queryCache.setResult(message.id, error, message.revision);
-                  return reportClientError(error);
-                },
-              }),
-            );
-            return;
-          }
-          case "Preparation": {
-            if (message.sessionEpoch !== session.current()?.sessionEpoch) return;
-            const pendingInvocation = Option.getOrUndefined(HashMap.get(invocations, message.id));
-            if (pendingInvocation !== undefined) {
-              yield* Deferred.succeed(pendingInvocation.prepared, message.uploads);
-            }
-            return;
-          }
-          case "Result": {
-            if (message.sessionEpoch !== session.current()?.sessionEpoch) return;
-            const pendingInvocation = Option.getOrUndefined(HashMap.get(invocations, message.id));
-            if (pendingInvocation === undefined) return;
-            yield* resultFromWire(message.result).pipe(
-              Effect.flatMap((result) => {
-                invocations = HashMap.remove(invocations, message.id);
-                return Deferred.succeed(pendingInvocation.deferred, result);
-              }),
-              Effect.catchTags({
-                InvalidServerMessage: (error) => rejectInvocation(message.id, error),
-              }),
-            );
-            return;
-          }
-          case "Error": {
-            if (message.sessionEpoch !== session.current()?.sessionEpoch) return;
-            const error =
-              message.operation === undefined
-                ? ServerError.make({
-                    code: message.code,
-                    message: message.message,
-                  })
-                : ServerError.make({
-                    code: message.code,
-                    message: message.message,
-                    operation: message.operation,
-                  });
-            if (message.operation?.type === "Invocation") {
-              yield* rejectInvocation(message.operation.id, error);
-            } else if (message.operation?.type === "Subscription") {
-              queryCache.setResult(message.operation.id, error);
-              yield* reportClientError(error);
-            } else {
-              yield* reportClientError(error);
-            }
-            return;
-          }
-        }
-      });
-
-      const requestReload = () => {
-        if (reloadRequested) return;
-        reloadRequested = true;
-        writer = undefined;
-        globalThis.location.reload();
-      };
-
-      const disconnect = Effect.sync(() => {
-        writer = undefined;
-      });
-
-      const connect = Effect.scoped(
-        Effect.gen(function* () {
-          if (reloadRequested) return yield* Effect.never;
-          yield* session.bootstrap.pipe(
-            Effect.mapError((error) => ConnectionUnavailable.make({ message: error.message })),
-          );
-          const socket = yield* Socket.makeWebSocket(
-            `${socketUrl()}${session.socketParameters()}`,
-            {
-              closeCodeIsError: (code) => {
-                if (shouldReloadForCloseCode(code)) requestReload();
-                return false;
-              },
-            },
-          );
-          const write = yield* socket.writer;
-          const handshakeReceived = yield* Deferred.make<void>();
-          let handshakeAccepted = false;
-          const acceptHandshake = Effect.fn("SyncClient.acceptHandshake")(function* (
-            handshake: SyncHandshake,
-          ) {
-            const decision = handshakeDecision(rememberedHandshake, handshakeAccepted, handshake);
-            if (decision === "Reload") {
-              requestReload();
-              return;
-            }
-            if (decision === "Ignore") return;
-            if (handshake.session === undefined || handshake.serverTime === undefined) {
-              requestReload();
-              return;
-            }
-            if (
-              rememberedHandshake?.session !== undefined &&
-              rememberedHandshake.session.sessionEpoch !== handshake.session.sessionEpoch
-            ) {
-              queryCache.invalidatePrivate();
-              yield* Effect.forEach(HashMap.keys(invocations), (id) =>
-                rejectInvocation(
-                  id,
-                  ServerError.make({
-                    code: "SessionChanged",
-                    message: "The session changed. This operation may already have completed.",
-                  }),
-                ),
-              );
-            } else if (
-              rememberedHandshake?.session?.viewRevision !== handshake.session.viewRevision
-            ) {
-              queryCache.invalidatePrivate();
-            }
-            yield* Effect.forEach(HashMap.entries(invocations), ([id, pending]) =>
-              pending.sessionEpoch === handshake.session!.sessionEpoch
-                ? Effect.void
-                : rejectInvocation(
-                    id,
-                    ServerError.make({
-                      code: "SessionChanged",
-                      message: "The session changed. This operation may already have completed.",
-                    }),
-                  ),
-            );
-            session.accept(handshake.session, handshake.serverTime);
-            rememberedHandshake = handshake;
-            handshakeAccepted = true;
-            writer = write;
-            yield* Deferred.succeed(handshakeReceived, undefined);
-            yield* Effect.gen(function* () {
-              yield* Effect.forEach(queryCache.entries(), (entry) =>
-                sendWith(write, subscribeMessage(entry)),
-              );
-              yield* Effect.forEach(HashMap.values(invocations), (pendingInvocation) =>
-                sendWith(write, pendingInvocation.message),
-              );
-            }).pipe(Effect.tapError(reportClientError), Effect.ignore);
-          });
-
-          const handleText = Effect.fn("SyncClient.handleText")(function* (text: string) {
-            const message = yield* Schema.decodeEffect(ServerMessageJson)(text).pipe(
-              Effect.mapError((cause) =>
-                InvalidServerMessage.make({
-                  cause,
-                  message: "The server returned an invalid sync message.",
-                }),
-              ),
-            );
-            if (message.type === "Handshake") return yield* acceptHandshake(message);
-            if (message.type === "Deployment") {
-              requestReload();
-              return;
-            }
-            if (!handshakeAccepted) {
-              return yield* InvalidServerMessage.make({
-                cause: new Error("The server sent a sync message before the handshake."),
-                message: "The server returned a sync message before the handshake.",
-              });
-            }
-            return yield* handleMessage(message);
-          });
-
-          const suspended = yield* Deferred.make<void>();
-          sessionSuspended = suspended;
-          yield* Effect.addFinalizer(() =>
-            Effect.sync(() => {
-              if (sessionSuspended === suspended) sessionSuspended = undefined;
-            }),
-          );
-          const run = yield* socket.runString(handleText).pipe(Effect.forkChild);
-          yield* Effect.raceFirst(
-            Deferred.await(handshakeReceived).pipe(Effect.timeout("10 seconds")),
-            Fiber.join(run),
-          );
-          yield* Effect.raceFirst(Fiber.join(run), Deferred.await(suspended));
-        }),
-      ).pipe(
-        Effect.mapError((cause) =>
-          Schema.is(ClientInfrastructureError)(cause)
-            ? cause
-            : ConnectionUnavailable.make({
-                cause,
-                message: "The sync connection was lost.",
-              }),
-        ),
-        Effect.ensuring(disconnect),
-      );
-
-      const reconnectSchedule = Schedule.exponential("250 millis").pipe(
-        Schedule.modifyDelay(({ duration }) =>
-          Effect.succeed(Duration.min(duration, Duration.seconds(5))),
-        ),
-        Schedule.jittered,
-      );
-      yield* connect.pipe(
-        Effect.andThen(
-          Effect.fail(
-            ConnectionUnavailable.make({
-              message: "The sync connection closed; reconnecting.",
-            }),
-          ),
-        ),
-        Effect.tapError(reportClientError),
-        Effect.retry(reconnectSchedule),
-        Effect.forkScoped,
-      );
-
-      const observe: SyncClientService["observe"] = Effect.fn("SyncClient.observe")(
-        function* (functionAddress, args) {
-          return yield* queryCache.observe(functionAddress, args);
-        },
-      );
-
-      const mutate: SyncClientService["mutate"] = Effect.fn("SyncClient.mutate")(
-        function* (functionAddress, args) {
-          const admittedSession =
-            session.current() ??
-            rememberedHandshake?.session ??
-            (yield* session.bootstrap.pipe(
-              Effect.mapError((error) => ConnectionUnavailable.make({ message: error.message })),
-            ));
-          const invocationId = yield* ids.generate(InvocationId);
-          const preparedArguments = yield* prepareMutationArguments(args).pipe(
-            Effect.provideService(IdGenerator, ids),
-            Effect.mapError((cause) =>
-              InvalidMutationArguments.make({
-                cause,
-                function: functionAddress,
-                message: `Mutation arguments for ${functionAddress} contain an unsupported file or value.`,
-              }),
-            ),
-            Effect.tapError(reportClientError),
-          );
-          const jsonArgs = yield* Effect.try({
-            try: () => encodeTransportObject(preparedArguments.value),
-            catch: (cause) =>
-              InvalidMutationArguments.make({
-                cause,
-                function: functionAddress,
-                message: `Mutation arguments for ${functionAddress} contain an unsupported value.`,
-              }),
-          }).pipe(Effect.tapError(reportClientError));
-          const deferred = yield* Deferred.make<
-            IgnotumResult<unknown, ErrorValue>,
-            ClientInfrastructureError
-          >();
-          const prepared = yield* Deferred.make<
-            Extract<ServerMessage, { readonly type: "Preparation" }>["uploads"],
-            ClientInfrastructureError
-          >();
-          const invokeMessage: Extract<ClientMessage, { readonly type: "Invoke" }> = {
-            type: "Invoke",
-            id: invocationId,
-            kind: "Mutation",
-            function: functionAddress,
-            args: jsonArgs,
-          };
-          const message: PendingInvocation["message"] =
-            preparedArguments.fileIds.length === 0
-              ? invokeMessage
-              : {
-                  type: "Prepare",
-                  id: invocationId,
-                  kind: "Mutation",
-                  function: functionAddress,
-                  args: jsonArgs,
-                  files: preparedArguments.fileIds,
-                };
-          invocations = HashMap.set(invocations, invocationId, {
-            sessionEpoch: admittedSession.sessionEpoch,
-            deferred,
-            function: functionAddress,
-            message,
-            prepared,
-          });
-          return yield* Effect.gen(function* () {
-            if (writer !== undefined) {
-              yield* sendWith(writer, message).pipe(
-                Effect.catchTags({
-                  ConnectionUnavailable: reportClientError,
-                  InvalidClientMessage: (error) => rejectInvocation(invocationId, error),
-                }),
-              );
-            }
-            if (message.type === "Prepare") {
-              const uploads = yield* Deferred.await(prepared);
-              const expected = new Set(message.files);
-              const received = new Set<string>();
-              const transfers: Array<{ readonly file: File; readonly url: string }> = [];
-              for (const upload of uploads) {
-                if (!expected.has(upload.id) || received.has(upload.id)) {
-                  return yield* InvalidServerMessage.make({
-                    cause: new Error(`Unexpected prepared file '${upload.id}'.`),
-                    message: "The server returned invalid application file preparation data.",
-                  });
-                }
-                received.add(upload.id);
-                const file = preparedArguments.nativeFiles.get(upload.id);
-                if (file === undefined) {
-                  return yield* InvalidServerMessage.make({
-                    cause: new Error(`Missing native file '${upload.id}'.`),
-                    message: "The server prepared an unknown application file.",
-                  });
-                }
-                if (upload.url === undefined) continue;
-                transfers.push({ file, url: upload.url });
-              }
-              if (received.size !== expected.size) {
-                return yield* InvalidServerMessage.make({
-                  cause: new Error("The server omitted a prepared file."),
-                  message: "The server returned incomplete application file preparation data.",
-                });
-              }
-              yield* Effect.forEach(
-                transfers,
-                Effect.fn("SyncClient.uploadFile")(function* ({ file, url }) {
-                  const response = yield* Effect.tryPromise({
-                    try: (signal) =>
-                      fetch(url, {
-                        method: "PUT",
-                        body: file,
-                        headers: { "content-type": file.type },
-                        signal,
-                      }),
-                    catch: (cause) =>
-                      ConnectionUnavailable.make({
-                        cause,
-                        message: `File '${file.name}' could not be uploaded.`,
-                      }),
-                  });
-                  if (!response.ok) {
-                    const detail = yield* Effect.promise(() => response.text());
-                    return yield* InvalidMutationArguments.make({
-                      cause: new Error(detail),
-                      function: functionAddress,
-                      message: `File '${file.name}' was rejected by application storage.`,
-                    });
-                  }
-                }),
-                { concurrency: 3, discard: true },
-              );
-              const pendingInvocation = Option.getOrUndefined(
-                HashMap.get(invocations, invocationId),
-              );
-              if (pendingInvocation === undefined) return yield* Deferred.await(deferred);
-              invocations = HashMap.set(invocations, invocationId, {
-                ...pendingInvocation,
-                message: invokeMessage,
-              });
-              if (writer !== undefined) {
-                yield* sendWith(writer, invokeMessage).pipe(
-                  Effect.catchTags({
-                    ConnectionUnavailable: reportClientError,
-                    InvalidClientMessage: (error) => rejectInvocation(invocationId, error),
-                  }),
-                );
-              }
-            }
-            return yield* Deferred.await(deferred);
-          }).pipe(
-            Effect.tapError(() =>
-              Effect.sync(() => {
-                invocations = HashMap.remove(invocations, invocationId);
-              }),
-            ),
-          );
-        },
-      );
-
-      return SyncClient.of({ mutate, observe });
-    }),
-  ).pipe(Layer.provide(Layer.merge(Socket.layerWebSocketConstructorGlobal, BrowserCrypto.layer)));
-}
-
-export const syncRuntime = ManagedRuntime.make(
-  SyncClient.layer.pipe(
-    Layer.provideMerge(BrowserSession.layer),
-    Layer.provideMerge(clientErrorReporterLayer),
-    Layer.provideMerge(IdGenerator.layer),
-  ),
-);
+) {}
+
+const makeUnmountedSyncRuntime = () =>
+  ManagedRuntime.make(
+    Layer.succeed(SyncClient)({
+      observe: () =>
+        Effect.fail(ConnectionUnavailable.make({ message: "The application has not mounted." })),
+      mutate: () =>
+        Effect.fail(ConnectionUnavailable.make({ message: "The application has not mounted." })),
+    }).pipe(
+      Layer.provideMerge(BrowserSession.layer),
+      Layer.provideMerge(clientErrorReporterLayer),
+      Layer.provideMerge(IdGenerator.layer),
+    ),
+  );
+export let syncRuntime = makeUnmountedSyncRuntime();
+
+export const mountManagedSync = (
+  selection: ExecutionSelection,
+  browser: Window,
+  callbacks: { readonly stopAdmission: () => void; readonly reload: () => void },
+) => {
+  const client = new ManagedBrowserClient(selection, browser, syncClientInternals, callbacks);
+  const previous = syncRuntime;
+  void previous.dispose();
+  syncRuntime = ManagedRuntime.make(
+    Layer.effect(
+      SyncClient,
+      Effect.gen(function* () {
+        client.attachSession(yield* BrowserSession, yield* IdGenerator);
+        return SyncClient.of({ observe: client.observe, mutate: client.mutate });
+      }),
+    ).pipe(
+      Layer.provideMerge(BrowserSession.layer),
+      Layer.provideMerge(clientErrorReporterLayer),
+      Layer.provideMerge(IdGenerator.layer),
+    ),
+  );
+  const runtime = syncRuntime;
+  void runtime.runPromise(SyncClient).then(
+    () => client.start(),
+    () => client.dispose(),
+  );
+  return {
+    client,
+    dispose: () => {
+      client.dispose();
+      void runtime.dispose();
+      if (syncRuntime === runtime) syncRuntime = makeUnmountedSyncRuntime();
+    },
+  };
+};
 
 // SAFETY: Vite adds this optional property to browser development modules.
 const hot = (