fix: preload wasm-zstd for inline workers and stabilize E2E

Upgrade @ioai/wasm-zstd to 1.1.1 and pass preloaded wasm bytes from the
main thread into MCAP/bag inline workers, matching the HDF5 loading pattern.
Add shared E2E helpers that wait on data-player-presence before asserting
dockview readiness.

Author: joaner

package-lock.json

@@ -97,7 +97,7 @@
     "@foxglove/rosmsg-serialization": "^2.0.4",
     "@foxglove/rosmsg2-serialization": "^3.0.3",
     "@ioai/hdf5": "^1.0.0",
-    "@ioai/wasm-zstd": "^1.1.0",
+    "@ioai/wasm-zstd": "^1.1.1",
     "@mcap/browser": "^1.1.0",
     "@mcap/core": "^2.0.2",
     "@playwright/test": "^1.59.1",

package.json

@@ -11,6 +11,7 @@ export default defineConfig({
     // Match vite preview host; static preview is more reliable for Range/HEAD than raw dev.
     baseURL: 'http://127.0.0.1:4173',
     trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
   },
   projects: [
     {

playwright.config.ts

@@ -2,6 +2,8 @@ import React, { createContext, useContext, useEffect, useMemo, useState } from '
 import { IntlProvider } from 'react-intl';
 import { getRosViewMessages, type RosViewLocale } from '@/shared/intl/loadRosViewMessages';
 import { Toaster } from '@/shared/ui/sonner';
+import { useMessagePipeline } from '@/core/pipeline/useMessagePipeline';
+import type { MessagePipelineState } from '@/core/pipeline/store';
 
 export interface RosViewProviderProps {
   theme?: 'light' | 'dark' | 'system';
@@ -73,13 +75,17 @@ export const RosViewProvider: React.FC<RosViewProviderProps> = ({
   );
 
   const messages = useMemo(() => getRosViewMessages(language), [language]);
+  const playerPresence = useMessagePipeline(
+    (state: MessagePipelineState) => state.playerState.presence,
+  );
 
   return (
     <RosViewThemeContext.Provider value={contextValue}>
       <div
         id="rosview-root"
         data-language={language}
         data-theme={resolvedTheme}
+        data-player-presence={playerPresence}
         className={`w-full h-full ${resolvedTheme === 'dark' ? 'dark' : ''}`}
       >
         <IntlProvider locale={intlLocaleFor(language)} defaultLocale="en" messages={messages}>

src/features/viewer/RosViewProvider.tsx

@@ -67,31 +67,12 @@ import { resolveEmbedChrome, type RosViewerChrome, type RosViewerMode } from './
 import { RosViewerLayoutProvider } from './RosViewerLayoutContext';
 import type { RosViewExtension } from '@/core/extensions/types';
 import { toast } from 'sonner';
-import sqlWasmUrl from 'sql.js/dist/sql-wasm.wasm?url';
-import hdf5WasmUrl from '@ioai/hdf5/wasm/ioai_hdf5.wasm?url';
-
-let sqlWasmBinaryPromise: Promise<ArrayBuffer> | null = null;
-let hdf5WasmBinaryPromise: Promise<ArrayBuffer> | null = null;
-
-async function loadSqlWasmBinary(): Promise<ArrayBuffer> {
-  sqlWasmBinaryPromise ??= fetch(sqlWasmUrl).then((response) => {
-    if (!response.ok) {
-      throw new Error(`Failed to load SQL wasm: HTTP ${response.status}`);
-    }
-    return response.arrayBuffer();
-  });
-  return await sqlWasmBinaryPromise;
-}
-
-async function loadHdf5WasmBinary(): Promise<ArrayBuffer> {
-  hdf5WasmBinaryPromise ??= fetch(hdf5WasmUrl).then((response) => {
-    if (!response.ok) {
-      throw new Error(`Failed to load HDF5 wasm: HTTP ${response.status}`);
-    }
-    return response.arrayBuffer();
-  });
-  return await hdf5WasmBinaryPromise;
-}
+import {
+  loadHdf5WasmBinary,
+  loadSqlWasmBinary,
+  loadZstdWasmBinary,
+  needsZstdWasmForWorker,
+} from '@/infra/workers/preloadWorkerWasm';
 
 function extensionForDataset(ds: DatasetItem): string | undefined {
   if (ds.kind === 'file' && ds.file) {
@@ -139,6 +120,7 @@ async function initializePlayerForDataset(
     typeof window !== 'undefined' && new URLSearchParams(window.location.search).get('workerPerf') === '1';
   const sqlWasmBinary = ext === 'db3' ? await loadSqlWasmBinary() : undefined;
   const hdf5WasmBinary = ext === 'hdf5' || ext === 'h5' ? await loadHdf5WasmBinary() : undefined;
+  const zstdWasmBinary = needsZstdWasmForWorker(ext) ? await loadZstdWasmBinary() : undefined;
   if (ds.kind === 'url' && ds.url) {
     const init: Record<string, unknown> = {
       url: resolveBrowserHttpUrl(ds.url),
@@ -151,6 +133,9 @@ async function initializePlayerForDataset(
     if (hdf5WasmBinary) {
       init.hdf5WasmBinary = hdf5WasmBinary;
     }
+    if (zstdWasmBinary) {
+      init.zstdWasmBinary = zstdWasmBinary;
+    }
     if (
       typeof ds.sizeBytes === 'number' &&
       Number.isFinite(ds.sizeBytes) &&
@@ -171,13 +156,15 @@ async function initializePlayerForDataset(
         workerPerf,
         autoDataQualityScan,
         ...(sqlWasmBinary ? { sqlWasmBinary } : {}),
+        ...(zstdWasmBinary ? { zstdWasmBinary } : {}),
       });
     } else {
       await player.initialize({
         file: ds.file,
         workerPerf,
         autoDataQualityScan,
         ...(hdf5WasmBinary ? { hdf5WasmBinary } : {}),
+        ...(zstdWasmBinary ? { zstdWasmBinary } : {}),
       });
     }
     return;

src/features/viewer/RosViewerImpl.tsx

@@ -18,6 +18,7 @@ export const LoadingOverlay: React.FC<LoadingOverlayProps> = ({ sourceName, onCa
       role="status"
       aria-live="polite"
       aria-busy="true"
+      data-testid="rosview-loading-overlay"
     >
       <Card className="pointer-events-auto w-full max-w-sm border-border shadow-none">
         <CardHeader className="gap-2 pb-4 text-center">

src/features/workspace/common/LoadingOverlay.tsx

@@ -47,16 +47,18 @@ function asTime(value: unknown): Time {
 
 export class BagIterableSource implements IIterableSource {
   private _source: BagSource;
+  private _wasmBinary: ArrayBuffer;
   private _bag?: Bag;
   private _datatypesByConnectionId = new Map<number, string>();
   private _readersByConnectionId = new Map<number, MessageReader>();
 
-  constructor(source: BagSource) {
+  constructor(source: BagSource, options: { wasmBinary: ArrayBuffer }) {
     this._source = source;
+    this._wasmBinary = options.wasmBinary;
   }
 
   async initialize(): Promise<Initialization> {
-    const decompressHandlers = await loadDecompressHandlers();
+    const decompressHandlers = await loadDecompressHandlers({ wasmBinary: this._wasmBinary });
 
     const fileLike: BlobReader | RemoteBagReadable =
       this._source.type === "remote" ? this._source.readable : new BlobReader(this._source.file);

src/infra/sources/BagIterableSource.ts

@@ -1,19 +1,16 @@
 import type { McapTypes } from "@mcap/core";
-import { decompress as zstdDecompress, init as initZstd } from "@ioai/wasm-zstd";
-import zstdWasmUrl from "@ioai/wasm-zstd/wasm-zstd.wasm?url";
 import * as lz4js from "lz4js";
+import { decompress as zstdDecompress } from "@ioai/wasm-zstd";
+import { ensureZstdRuntime } from "@/infra/workers/zstdRuntimeLoader";
 
-// Load the zstd wasm module explicitly so Vite owns the wasm asset URL in both
-// dev and production worker bundles.
+export type LoadDecompressHandlersOptions = {
+  wasmBinary: ArrayBuffer;
+};
 
-let handlersPromise: Promise<McapTypes.DecompressHandlers> | undefined;
-
-export async function loadDecompressHandlers(): Promise<McapTypes.DecompressHandlers> {
-  return await (handlersPromise ??= _loadDecompressHandlers());
-}
-
-async function _loadDecompressHandlers(): Promise<McapTypes.DecompressHandlers> {
-  await initZstd({ wasmUrl: zstdWasmUrl });
+export async function loadDecompressHandlers(
+  options: LoadDecompressHandlersOptions,
+): Promise<McapTypes.DecompressHandlers> {
+  await ensureZstdRuntime(options.wasmBinary);
 
   return {
     lz4: (buffer, decompressedSize) => {

src/infra/sources/decompressHandlers.ts

@@ -69,7 +69,14 @@ class BagWorker implements IWorkerSerializedSourceWorker {
       throw new Error("Invalid arguments for BagWorker");
     }
 
-    this._source = new BagIterableSource(sourceArgs);
+    const zstdWasmBinary = args.zstdWasmBinary;
+    if (!(zstdWasmBinary instanceof ArrayBuffer)) {
+      throw new Error(
+        "BagWorker: zstdWasmBinary required (pass wasm bytes from main thread for inline workers)",
+      );
+    }
+
+    this._source = new BagIterableSource(sourceArgs, { wasmBinary: zstdWasmBinary });
     const init = await this._source.initialize();
     this._initialization = init;
     this._qualityScan.initialize(this._source, init, args.autoDataQualityScan === true);

src/infra/workers/bag.worker.ts

@@ -103,9 +103,16 @@ class McapWorkerImpl implements IWorkerSerializedSourceWorker {
         throw new Error("McapWorker: neither url nor file provided");
       }
 
+      const zstdWasmBinary = args.zstdWasmBinary;
+      if (!(zstdWasmBinary instanceof ArrayBuffer)) {
+        throw new Error(
+          "McapWorker: zstdWasmBinary required (pass wasm bytes from main thread for inline workers)",
+        );
+      }
+
       const decompressHandlers = await workerPerf.timeAsync(
         "initialize.loadDecompressHandlers",
-        () => loadDecompressHandlers(),
+        () => loadDecompressHandlers({ wasmBinary: zstdWasmBinary }),
       );
 
       const mcapReadable = {