@livestore/adapter-web 0.0.0-snapshot-a953343ad2d7468c6573bcb5e26f0eab4302078f

package/src/web-worker/common/persisted-sqlite.ts

@@ -0,0 +1,136 @@
+import { liveStoreStorageFormatVersion } from '@livestore/common'
+import type { LiveStoreSchema } from '@livestore/common/schema'
+import { decodeSAHPoolFilename, HEADER_OFFSET_DATA } from '@livestore/sqlite-wasm/browser'
+import { Effect, Schema } from '@livestore/utils/effect'
+
+import * as OpfsUtils from '../../opfs-utils.js'
+import type * as WorkerSchema from './worker-schema.js'
+
+export class PersistedSqliteError extends Schema.TaggedError<PersistedSqliteError>()('PersistedSqliteError', {
+  cause: Schema.Defect,
+}) {}
+
+export const readPersistedAppDbFromClientSession = ({
+  storageOptions,
+  storeId,
+  schema,
+}: {
+  storageOptions: WorkerSchema.StorageType
+  storeId: string
+  schema: LiveStoreSchema
+}) =>
+  Effect.gen(function* () {
+    return yield* Effect.promise(async () => {
+      const directory = sanitizeOpfsDir(storageOptions.directory, storeId)
+      const sahPoolOpaqueDir = await OpfsUtils.getDirHandle(directory).catch(() => undefined)
+
+      if (sahPoolOpaqueDir === undefined) {
+        return undefined
+      }
+
+      const tryGetDbFile = async (fileHandle: FileSystemFileHandle) => {
+        const file = await fileHandle.getFile()
+        const fileName = await decodeSAHPoolFilename(file)
+        return fileName ? { fileName, file } : undefined
+      }
+
+      const getAllFiles = async (asyncIterator: AsyncIterable<FileSystemHandle>): Promise<FileSystemFileHandle[]> => {
+        const results: FileSystemFileHandle[] = []
+        for await (const value of asyncIterator) {
+          if (value.kind === 'file') {
+            results.push(value as FileSystemFileHandle)
+          }
+        }
+        return results
+      }
+
+      const files = await getAllFiles(sahPoolOpaqueDir.values())
+
+      const fileResults = await Promise.all(files.map(tryGetDbFile))
+
+      const appDbFileName = '/' + getAppDbFileName(schema)
+
+      const dbFileRes = fileResults.find((_) => _?.fileName === appDbFileName)
+      // console.debug('fileResults', fileResults, 'dbFileRes', dbFileRes)
+
+      if (dbFileRes !== undefined) {
+        const data = await dbFileRes.file.slice(HEADER_OFFSET_DATA).arrayBuffer()
+        // console.debug('readPersistedAppDbFromClientSession', data.byteLength, data)
+
+        // Given the SAH pool always eagerly creates files with empty non-header data,
+        // we want to return undefined if the file exists but is empty
+        if (data.byteLength === 0) {
+          return undefined
+        }
+
+        return new Uint8Array(data)
+      }
+
+      return undefined
+    })
+  }).pipe(
+    Effect.logWarnIfTakesLongerThan({
+      duration: 1000,
+      label: '@livestore/adapter-web:readPersistedAppDbFromClientSession',
+    }),
+    Effect.withPerformanceMeasure('@livestore/adapter-web:readPersistedAppDbFromClientSession'),
+    Effect.withSpan('@livestore/adapter-web:readPersistedAppDbFromClientSession'),
+  )
+
+export const resetPersistedDataFromClientSession = ({
+  storageOptions,
+  storeId,
+}: {
+  storageOptions: WorkerSchema.StorageType
+  storeId: string
+}) =>
+  Effect.gen(function* () {
+    const directory = sanitizeOpfsDir(storageOptions.directory, storeId)
+    yield* opfsDeleteAbs(directory)
+  }).pipe(Effect.withSpan('@livestore/adapter-web:resetPersistedDataFromClientSession'))
+
+const opfsDeleteAbs = (absPath: string) =>
+  Effect.promise(async () => {
+    // Get the root directory handle
+    const root = await OpfsUtils.rootHandlePromise
+
+    // Split the absolute path to traverse directories
+    const pathParts = absPath.split('/').filter((part) => part.length)
+
+    try {
+      // Traverse to the target file handle
+      let currentDir = root
+      for (let i = 0; i < pathParts.length - 1; i++) {
+        currentDir = await currentDir.getDirectoryHandle(pathParts[i]!)
+      }
+
+      // Delete the file
+      await currentDir.removeEntry(pathParts.at(-1)!, { recursive: true })
+    } catch (error) {
+      if (error instanceof DOMException && error.name === 'NotFoundError') {
+        // Can ignore as it's already been deleted or not there in the first place
+        return
+      } else {
+        throw error
+      }
+    }
+  }).pipe(Effect.withSpan('@livestore/adapter-web:worker:opfsDeleteFile', { attributes: { absFilePath: absPath } }))
+
+export const sanitizeOpfsDir = (directory: string | undefined, storeId: string) => {
+  // Root dir should be `''` not `/`
+  if (directory === undefined || directory === '' || directory === '/')
+    return `livestore-${storeId}@${liveStoreStorageFormatVersion}`
+
+  if (directory.includes('/')) {
+    throw new Error(
+      `@livestore/adapter-web:worker:sanitizeOpfsDir: Nested directories are not yet supported ('${directory}')`,
+    )
+  }
+
+  return `${directory}@${liveStoreStorageFormatVersion}`
+}
+
+export const getAppDbFileName = (schema: LiveStoreSchema) => {
+  const schemaHashSuffix = schema.migrationOptions.strategy === 'manual' ? 'fixed' : schema.hash.toString()
+  return `app${schemaHashSuffix}.db`
+}

package/src/web-worker/common/shutdown-channel.ts

@@ -0,0 +1,8 @@
+import { ShutdownChannel } from '@livestore/common/leader-thread'
+import { WebChannel } from '@livestore/utils/effect'
+
+export const makeShutdownChannel = (storeId: string) =>
+  WebChannel.broadcastChannel({
+    channelName: `livestore.shutdown.${storeId}`,
+    schema: ShutdownChannel.All,
+  })

package/src/web-worker/common/worker-schema.ts

@@ -0,0 +1,206 @@
+import {
+  BootStatus,
+  Devtools,
+  InvalidPushError,
+  MigrationsReport,
+  NetworkStatus,
+  SyncState,
+  UnexpectedError,
+} from '@livestore/common'
+import { EventId, MutationEvent } from '@livestore/common/schema'
+import * as WebMeshWorker from '@livestore/devtools-web-common/worker'
+import { Schema, Transferable } from '@livestore/utils/effect'
+
+export const StorageTypeOpfs = Schema.Struct({
+  type: Schema.Literal('opfs'),
+  /**
+   * Default is `livestore-${storeId}`
+   *
+   * When providing this option, make sure to include the `storeId` in the path to avoid
+   * conflicts with other LiveStore apps.
+   */
+  directory: Schema.optional(Schema.String),
+})
+
+export type StorageTypeOpfs = typeof StorageTypeOpfs.Type
+
+// export const StorageTypeIndexeddb = Schema.Struct({
+//   type: Schema.Literal('indexeddb'),
+//   /** @default "livestore" */
+//   databaseName: Schema.optionalWith(Schema.String, { default: () => 'livestore' }),
+//   /** @default "livestore-" */
+//   storeNamePrefix: Schema.optionalWith(Schema.String, { default: () => 'livestore-' }),
+// })
+
+export const StorageType = Schema.Union(
+  StorageTypeOpfs,
+  // StorageTypeIndexeddb
+)
+export type StorageType = typeof StorageType.Type
+export type StorageTypeEncoded = typeof StorageType.Encoded
+
+// export const SyncBackendOptions = Schema.Union(SyncBackendOptionsWebsocket)
+export const SyncBackendOptions = Schema.Record({ key: Schema.String, value: Schema.JsonValue })
+export type SyncBackendOptions = Record<string, Schema.JsonValue>
+
+export namespace LeaderWorkerOuter {
+  export class InitialMessage extends Schema.TaggedRequest<InitialMessage>()('InitialMessage', {
+    payload: { port: Transferable.MessagePort, storeId: Schema.String, clientId: Schema.String },
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export class Request extends Schema.Union(InitialMessage) {}
+}
+
+// TODO unify this code with schema from node adapter
+export namespace LeaderWorkerInner {
+  export class InitialMessage extends Schema.TaggedRequest<InitialMessage>()('InitialMessage', {
+    payload: {
+      storageOptions: StorageType,
+      devtoolsEnabled: Schema.Boolean,
+      storeId: Schema.String,
+      clientId: Schema.String,
+      debugInstanceId: Schema.String,
+    },
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export class BootStatusStream extends Schema.TaggedRequest<BootStatusStream>()('BootStatusStream', {
+    payload: {},
+    success: BootStatus,
+    failure: UnexpectedError,
+  }) {}
+
+  export class PushToLeader extends Schema.TaggedRequest<PushToLeader>()('PushToLeader', {
+    payload: {
+      batch: Schema.Array(MutationEvent.AnyEncoded),
+    },
+    success: Schema.Void,
+    failure: Schema.Union(UnexpectedError, InvalidPushError),
+  }) {}
+
+  export class PullStream extends Schema.TaggedRequest<PullStream>()('PullStream', {
+    payload: {
+      cursor: EventId.EventId,
+    },
+    success: Schema.Struct({
+      payload: SyncState.PayloadUpstream,
+      remaining: Schema.Number,
+    }),
+    failure: UnexpectedError,
+  }) {}
+
+  export class Export extends Schema.TaggedRequest<Export>()('Export', {
+    payload: {},
+    success: Transferable.Uint8Array,
+    failure: UnexpectedError,
+  }) {}
+
+  export class ExportMutationlog extends Schema.TaggedRequest<ExportMutationlog>()('ExportMutationlog', {
+    payload: {},
+    success: Transferable.Uint8Array,
+    failure: UnexpectedError,
+  }) {}
+
+  export class GetRecreateSnapshot extends Schema.TaggedRequest<GetRecreateSnapshot>()('GetRecreateSnapshot', {
+    payload: {},
+    success: Schema.Struct({
+      snapshot: Transferable.Uint8Array,
+      migrationsReport: MigrationsReport,
+    }),
+    failure: UnexpectedError,
+  }) {}
+
+  export class GetLeaderHead extends Schema.TaggedRequest<GetLeaderHead>()('GetLeaderHead', {
+    payload: {},
+    success: EventId.EventId,
+    failure: UnexpectedError,
+  }) {}
+
+  export class GetLeaderSyncState extends Schema.TaggedRequest<GetLeaderSyncState>()('GetLeaderSyncState', {
+    payload: {},
+    success: SyncState.SyncState,
+    failure: UnexpectedError,
+  }) {}
+
+  export class NetworkStatusStream extends Schema.TaggedRequest<NetworkStatusStream>()('NetworkStatusStream', {
+    payload: {},
+    success: NetworkStatus,
+    failure: UnexpectedError,
+  }) {}
+
+  export class Shutdown extends Schema.TaggedRequest<Shutdown>()('Shutdown', {
+    payload: {},
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export class ExtraDevtoolsMessage extends Schema.TaggedRequest<ExtraDevtoolsMessage>()('ExtraDevtoolsMessage', {
+    payload: {
+      message: Devtools.Leader.MessageToApp,
+    },
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export const Request = Schema.Union(
+    InitialMessage,
+    BootStatusStream,
+    PushToLeader,
+    PullStream,
+    Export,
+    ExportMutationlog,
+    GetRecreateSnapshot,
+    GetLeaderHead,
+    GetLeaderSyncState,
+    NetworkStatusStream,
+    Shutdown,
+    ExtraDevtoolsMessage,
+    WebMeshWorker.Schema.CreateConnection,
+  )
+  export type Request = typeof Request.Type
+}
+
+export namespace SharedWorker {
+  export class InitialMessagePayloadFromClientSession extends Schema.TaggedStruct('FromClientSession', {
+    initialMessage: LeaderWorkerInner.InitialMessage,
+  }) {}
+
+  export class InitialMessage extends Schema.TaggedRequest<InitialMessage>()('InitialMessage', {
+    payload: {
+      payload: Schema.Union(InitialMessagePayloadFromClientSession, Schema.TaggedStruct('FromWebBridge', {})),
+    },
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export class UpdateMessagePort extends Schema.TaggedRequest<UpdateMessagePort>()('UpdateMessagePort', {
+    payload: {
+      port: Transferable.MessagePort,
+    },
+    success: Schema.Void,
+    failure: UnexpectedError,
+  }) {}
+
+  export class Request extends Schema.Union(
+    InitialMessage,
+    UpdateMessagePort,
+
+    // Proxied requests
+    LeaderWorkerInner.BootStatusStream,
+    LeaderWorkerInner.PushToLeader,
+    LeaderWorkerInner.PullStream,
+    LeaderWorkerInner.Export,
+    LeaderWorkerInner.GetRecreateSnapshot,
+    LeaderWorkerInner.ExportMutationlog,
+    LeaderWorkerInner.GetLeaderHead,
+    LeaderWorkerInner.GetLeaderSyncState,
+    LeaderWorkerInner.NetworkStatusStream,
+    LeaderWorkerInner.Shutdown,
+    LeaderWorkerInner.ExtraDevtoolsMessage,
+
+    WebMeshWorker.Schema.CreateConnection,
+  ) {}
+}

package/src/web-worker/leader-worker/make-leader-worker.ts

@@ -0,0 +1,276 @@
+import type { NetworkStatus, SqliteDb, SyncOptions } from '@livestore/common'
+import { Devtools, UnexpectedError } from '@livestore/common'
+import type { DevtoolsOptions } from '@livestore/common/leader-thread'
+import {
+  configureConnection,
+  getClientHeadFromDb,
+  LeaderThreadCtx,
+  makeLeaderThreadLayer,
+} from '@livestore/common/leader-thread'
+import type { LiveStoreSchema } from '@livestore/common/schema'
+import { MutationEvent } from '@livestore/common/schema'
+import { makeChannelForConnectedMeshNode } from '@livestore/devtools-web-common/web-channel'
+import * as WebMeshWorker from '@livestore/devtools-web-common/worker'
+import { sqliteDbFactory } from '@livestore/sqlite-wasm/browser'
+import { loadSqlite3Wasm } from '@livestore/sqlite-wasm/load-wasm'
+import { isDevEnv, LS_DEV } from '@livestore/utils'
+import type { HttpClient, Scope, WorkerError } from '@livestore/utils/effect'
+import {
+  BrowserWorkerRunner,
+  Effect,
+  FetchHttpClient,
+  identity,
+  Layer,
+  Logger,
+  LogLevel,
+  OtelTracer,
+  Scheduler,
+  Stream,
+  TaskTracing,
+  WorkerRunner,
+} from '@livestore/utils/effect'
+import type * as otel from '@opentelemetry/api'
+
+import * as OpfsUtils from '../../opfs-utils.js'
+import { getAppDbFileName, sanitizeOpfsDir } from '../common/persisted-sqlite.js'
+import { makeShutdownChannel } from '../common/shutdown-channel.js'
+import * as WorkerSchema from '../common/worker-schema.js'
+
+export type WorkerOptions = {
+  schema: LiveStoreSchema
+  sync?: SyncOptions
+  otelOptions?: {
+    tracer?: otel.Tracer
+  }
+}
+
+if (isDevEnv()) {
+  globalThis.__debugLiveStoreUtils = {
+    opfs: OpfsUtils,
+    blobUrl: (buffer: Uint8Array) => URL.createObjectURL(new Blob([buffer], { type: 'application/octet-stream' })),
+  }
+}
+
+export const makeWorker = (options: WorkerOptions) => {
+  makeWorkerEffect(options).pipe(Effect.runFork)
+}
+
+export const makeWorkerEffect = (options: WorkerOptions) => {
+  const TracingLive = options.otelOptions?.tracer
+    ? Layer.unwrapEffect(Effect.map(OtelTracer.make, Layer.setTracer)).pipe(
+        Layer.provideMerge(Layer.succeed(OtelTracer.OtelTracer, options.otelOptions.tracer)),
+      )
+    : undefined
+
+  return makeWorkerRunnerOuter(options).pipe(
+    Layer.provide(BrowserWorkerRunner.layer),
+    Layer.launch,
+    Effect.scoped,
+    Effect.tapCauseLogPretty,
+    Effect.annotateLogs({ thread: self.name }),
+    Effect.provide(Logger.prettyWithThread(self.name)),
+    Effect.provide(FetchHttpClient.layer),
+    LS_DEV ? TaskTracing.withAsyncTaggingTracing((name) => (console as any).createTask(name)) : identity,
+    TracingLive ? Effect.provide(TracingLive) : identity,
+    // We're using this custom scheduler to improve op batching behaviour and reduce the overhead
+    // of the Effect fiber runtime given we have different tradeoffs on a worker thread.
+    // Despite the "message channel" name, is has nothing to do with the `incomingRequestsPort` above.
+    Effect.withScheduler(Scheduler.messageChannel()),
+    // We're increasing the Effect ops limit here to allow for larger chunks of operations at a time
+    Effect.withMaxOpsBeforeYield(4096),
+    Logger.withMinimumLogLevel(LogLevel.Debug),
+  )
+}
+
+const makeWorkerRunnerOuter = (
+  workerOptions: WorkerOptions,
+): Layer.Layer<never, WorkerError.WorkerError, WorkerRunner.PlatformRunner | HttpClient.HttpClient> =>
+  WorkerRunner.layerSerialized(WorkerSchema.LeaderWorkerOuter.InitialMessage, {
+    // Port coming from client session and forwarded via the shared worker
+    InitialMessage: ({ port: incomingRequestsPort, storeId, clientId }) =>
+      Effect.gen(function* () {
+        yield* makeWorkerRunnerInner(workerOptions).pipe(
+          Layer.provide(BrowserWorkerRunner.layerMessagePort(incomingRequestsPort)),
+          Layer.launch,
+          Effect.scoped,
+          Effect.withSpan('@livestore/adapter-web:worker:wrapper:InitialMessage:innerFiber'),
+          Effect.tapCauseLogPretty,
+          Effect.provide(WebMeshWorker.CacheService.layer({ nodeName: `leader-${storeId}-${clientId}` })),
+          Effect.forkScoped,
+        )
+
+        return Layer.empty
+      }).pipe(Effect.withSpan('@livestore/adapter-web:worker:wrapper:InitialMessage'), Layer.unwrapScoped),
+  })
+
+const makeWorkerRunnerInner = ({ schema, sync: syncOptions }: WorkerOptions) =>
+  WorkerRunner.layerSerialized(WorkerSchema.LeaderWorkerInner.Request, {
+    InitialMessage: ({ storageOptions, storeId, clientId, devtoolsEnabled, debugInstanceId }) =>
+      Effect.gen(function* () {
+        const sqlite3 = yield* Effect.promise(() => loadSqlite3Wasm())
+        const makeSqliteDb = sqliteDbFactory({ sqlite3 })
+        const runtime = yield* Effect.runtime<never>()
+
+        const makeDb = (kind: 'app' | 'mutationlog') =>
+          makeSqliteDb({
+            _tag: 'opfs',
+            opfsDirectory: sanitizeOpfsDir(storageOptions.directory, storeId),
+            fileName: kind === 'app' ? getAppDbFileName(schema) : 'mutationlog.db',
+            configureDb: (db) =>
+              configureConnection(db, {
+                //  The persisted databases use the AccessHandlePoolVFS which always uses a single database connection.
+                //  Multiple connections are not supported. This means that we can use the exclusive locking mode to
+                //  avoid unnecessary system calls and enable the use of the WAL journal mode without the use of shared memory.
+                // TODO bring back exclusive locking mode when `WAL` is working properly
+                // lockingMode: 'EXCLUSIVE',
+                foreignKeys: true,
+              }).pipe(Effect.provide(runtime), Effect.runSync),
+          }).pipe(Effect.acquireRelease((db) => Effect.try(() => db.close()).pipe(Effect.ignoreLogged)))
+
+        // Might involve some async work, so we're running them concurrently
+        const [dbReadModel, dbMutationLog] = yield* Effect.all([makeDb('app'), makeDb('mutationlog')], {
+          concurrency: 2,
+        })
+
+        const devtoolsOptions = yield* makeDevtoolsOptions({ devtoolsEnabled, dbReadModel, dbMutationLog })
+        const shutdownChannel = yield* makeShutdownChannel(storeId)
+
+        return makeLeaderThreadLayer({
+          schema,
+          storeId,
+          clientId,
+          makeSqliteDb,
+          syncOptions,
+          dbReadModel,
+          dbMutationLog,
+          devtoolsOptions,
+          shutdownChannel,
+        })
+      }).pipe(
+        Effect.tapCauseLogPretty,
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withPerformanceMeasure('@livestore/adapter-web:worker:InitialMessage'),
+        Effect.withSpan('@livestore/adapter-web:worker:InitialMessage'),
+        Effect.annotateSpans({ debugInstanceId }),
+        Layer.unwrapScoped,
+      ),
+    GetRecreateSnapshot: () =>
+      Effect.gen(function* () {
+        const workerCtx = yield* LeaderThreadCtx
+
+        // NOTE we can only return the cached snapshot once as it's transferred (i.e. disposed), so we need to set it to undefined
+        // const cachedSnapshot =
+        //   result._tag === 'Recreate' ? yield* Ref.getAndSet(result.snapshotRef, undefined) : undefined
+
+        // return cachedSnapshot ?? workerCtx.db.export()
+
+        const snapshot = workerCtx.dbReadModel.export()
+        return { snapshot, migrationsReport: workerCtx.initialState.migrationsReport }
+      }).pipe(
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withSpan('@livestore/adapter-web:worker:GetRecreateSnapshot'),
+      ),
+    PullStream: ({ cursor }) =>
+      Effect.gen(function* () {
+        const { connectedClientSessionPullQueues } = yield* LeaderThreadCtx
+        const pullQueue = yield* connectedClientSessionPullQueues.makeQueue(cursor)
+        return Stream.fromQueue(pullQueue)
+      }).pipe(
+        Stream.unwrapScoped,
+        // For debugging purposes
+        // Stream.tapLogWithLabel('@livestore/adapter-web:worker:PullStream'),
+      ),
+    PushToLeader: ({ batch }) =>
+      Effect.andThen(LeaderThreadCtx, ({ syncProcessor }) =>
+        syncProcessor.push(
+          batch.map((mutationEvent) => new MutationEvent.EncodedWithMeta(mutationEvent)),
+          // We'll wait in order to keep back pressure on the client session
+          { waitForProcessing: true },
+        ),
+      ).pipe(Effect.uninterruptible, Effect.withSpan('@livestore/adapter-web:worker:PushToLeader')),
+    Export: () =>
+      Effect.andThen(LeaderThreadCtx, (_) => _.dbReadModel.export()).pipe(
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withSpan('@livestore/adapter-web:worker:Export'),
+      ),
+    ExportMutationlog: () =>
+      Effect.andThen(LeaderThreadCtx, (_) => _.dbMutationLog.export()).pipe(
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withSpan('@livestore/adapter-web:worker:ExportMutationlog'),
+      ),
+    BootStatusStream: () =>
+      Effect.andThen(LeaderThreadCtx, (_) => Stream.fromQueue(_.bootStatusQueue)).pipe(Stream.unwrap),
+    GetLeaderHead: () =>
+      Effect.gen(function* () {
+        const workerCtx = yield* LeaderThreadCtx
+        return getClientHeadFromDb(workerCtx.dbMutationLog)
+      }).pipe(UnexpectedError.mapToUnexpectedError, Effect.withSpan('@livestore/adapter-web:worker:GetLeaderHead')),
+    GetLeaderSyncState: () =>
+      Effect.gen(function* () {
+        const workerCtx = yield* LeaderThreadCtx
+        return yield* workerCtx.syncProcessor.syncState
+      }).pipe(
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withSpan('@livestore/adapter-web:worker:GetLeaderSyncState'),
+      ),
+    NetworkStatusStream: () =>
+      Effect.gen(function* (_) {
+        const ctx = yield* LeaderThreadCtx
+
+        if (ctx.syncBackend === undefined) {
+          return Stream.make<[NetworkStatus]>({ isConnected: false, timestampMs: Date.now(), latchClosed: false })
+        }
+
+        return Stream.zipLatest(
+          ctx.syncBackend.isConnected.changes,
+          ctx.devtools.enabled ? ctx.devtools.syncBackendLatchState.changes : Stream.make({ latchClosed: false }),
+        ).pipe(Stream.map(([isConnected, { latchClosed }]) => ({ isConnected, timestampMs: Date.now(), latchClosed })))
+      }).pipe(Stream.unwrap),
+    Shutdown: () =>
+      Effect.gen(function* () {
+        yield* Effect.logDebug('[@livestore/adapter-web:worker] Shutdown')
+
+        // Buy some time for Otel to flush
+        // TODO find a cleaner way to do this
+        yield* Effect.sleep(300)
+      }).pipe(UnexpectedError.mapToUnexpectedError, Effect.withSpan('@livestore/adapter-web:worker:Shutdown')),
+    ExtraDevtoolsMessage: ({ message }) =>
+      Effect.andThen(LeaderThreadCtx, (_) => _.extraIncomingMessagesQueue.offer(message)).pipe(
+        UnexpectedError.mapToUnexpectedError,
+        Effect.withSpan('@livestore/adapter-web:worker:ExtraDevtoolsMessage'),
+      ),
+    'DevtoolsWebCommon.CreateConnection': WebMeshWorker.CreateConnection,
+  })
+
+const makeDevtoolsOptions = ({
+  devtoolsEnabled,
+  dbReadModel,
+  dbMutationLog,
+}: {
+  devtoolsEnabled: boolean
+  dbReadModel: SqliteDb
+  dbMutationLog: SqliteDb
+}): Effect.Effect<DevtoolsOptions, UnexpectedError, Scope.Scope | WebMeshWorker.CacheService> =>
+  Effect.gen(function* () {
+    if (devtoolsEnabled === false) {
+      return { enabled: false }
+    }
+    const { node } = yield* WebMeshWorker.CacheService
+
+    return {
+      enabled: true,
+      makeBootContext: Effect.gen(function* () {
+        return {
+          devtoolsWebChannel: yield* makeChannelForConnectedMeshNode({
+            node,
+            target: `devtools`,
+            schema: { listen: Devtools.Leader.MessageToApp, send: Devtools.Leader.MessageFromApp },
+          }),
+          persistenceInfo: {
+            readModel: dbReadModel.metadata.persistenceInfo,
+            mutationLog: dbMutationLog.metadata.persistenceInfo,
+          },
+        }
+      }),
+    }
+  })