Round 11: Add multi-tab web infrastructure

- Add SharedWorker coordinator for tab coordination and provider election
- Add provider worker for SQLite database access
- Add DbClient proxy for main thread database operations
- Add multi-tab Playwright tests (skipped until bundled)

Multi-tab architecture:
- Coordinator uses Web Locks for provider election
- Provider owns SQLite WASM connection
- Client tabs route requests through coordinator
- Serial request queue prevents race conditions

Author: subtleGradient

zig/browser-test/src/client/db-client.ts

@@ -0,0 +1,164 @@
+/**
+ * DbClient - Browser Tab Database Client
+ *
+ * Provides the client-side API that browser tabs use to access the database
+ * through the SharedWorker coordinator.
+ */
+
+import {
+  RpcRequest,
+  RequestId,
+  createRequest,
+  RPC_TIMEOUT_MS,
+  SHARED_WORKER_PATH,
+} from '../shared';
+
+export interface DbClientOptions {
+  dbName: string;
+  coordinatorUrl?: string;
+}
+
+export class DbClient {
+  private worker: SharedWorker | null = null;
+  private port: MessagePort | null = null;
+  private clientId: string | null = null;
+  private isProvider = false;
+  private pendingRequests = new Map<
+    RequestId,
+    {
+      resolve: (result: unknown) => void;
+      reject: (error: Error) => void;
+    }
+  >();
+  private readyPromise: Promise<void>;
+  private resolveReady!: () => void;
+
+  readonly dbName: string;
+
+  constructor(options: DbClientOptions) {
+    this.dbName = options.dbName;
+    this.readyPromise = new Promise((resolve) => {
+      this.resolveReady = resolve;
+    });
+
+    this.connect(options.coordinatorUrl);
+  }
+
+  private connect(coordinatorUrl?: string) {
+    const url = coordinatorUrl || SHARED_WORKER_PATH;
+    this.worker = new SharedWorker(url, { type: 'module' });
+    this.port = this.worker.port;
+
+    this.port.onmessage = (event) => this.handleMessage(event.data);
+    this.port.start();
+  }
+
+  private handleMessage(msg: unknown) {
+    const message = msg as {
+      type: string;
+      clientId?: string;
+      isYou?: boolean;
+      requestId?: RequestId;
+      payload?: { result?: unknown; message?: string };
+    };
+
+    switch (message.type) {
+      case 'connected':
+        this.clientId = message.clientId ?? null;
+        break;
+
+      case 'provider-elected':
+        this.isProvider = message.isYou ?? false;
+        this.resolveReady();
+        break;
+
+      case 'result':
+      case 'error': {
+        if (!message.requestId) break;
+        const pending = this.pendingRequests.get(message.requestId);
+        if (pending) {
+          this.pendingRequests.delete(message.requestId);
+          if (message.type === 'result') {
+            pending.resolve(message.payload?.result);
+          } else {
+            pending.reject(new Error(message.payload?.message ?? 'Unknown error'));
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  get ready(): Promise<void> {
+    return this.readyPromise;
+  }
+
+  get isDbProvider(): boolean {
+    return this.isProvider;
+  }
+
+  get id(): string | null {
+    return this.clientId;
+  }
+
+  private async sendRequest<T>(request: RpcRequest): Promise<T> {
+    await this.ready;
+
+    return new Promise((resolve, reject) => {
+      this.pendingRequests.set(request.requestId, {
+        resolve: resolve as (result: unknown) => void,
+        reject,
+      });
+      this.port?.postMessage(request);
+
+      // Timeout after configured duration
+      setTimeout(() => {
+        if (this.pendingRequests.has(request.requestId)) {
+          this.pendingRequests.delete(request.requestId);
+          reject(new Error('Request timeout'));
+        }
+      }, RPC_TIMEOUT_MS);
+    });
+  }
+
+  async open(): Promise<void> {
+    await this.sendRequest(
+      createRequest('open', crypto.randomUUID(), { dbName: this.dbName })
+    );
+  }
+
+  async close(): Promise<void> {
+    await this.sendRequest(
+      createRequest('close', crypto.randomUUID(), { dbName: this.dbName })
+    );
+  }
+
+  async exec(sql: string, bind?: unknown[]): Promise<{ changes: number }> {
+    return this.sendRequest(
+      createRequest('exec', crypto.randomUUID(), { sql, bind })
+    );
+  }
+
+  async query(sql: string, bind?: unknown[]): Promise<unknown[][]> {
+    const result = await this.sendRequest<{ rows: unknown[][] }>(
+      createRequest('query', crypto.randomUUID(), { sql, bind })
+    );
+    return result.rows;
+  }
+
+  async ping(): Promise<{ pong: boolean; timestamp: number }> {
+    return this.sendRequest(
+      createRequest('ping', crypto.randomUUID(), {})
+    );
+  }
+
+  disconnect() {
+    this.port?.close();
+    this.worker = null;
+    this.port = null;
+  }
+}
+
+export function createDbClient(options: DbClientOptions): DbClient {
+  return new DbClient(options);
+}

zig/browser-test/src/client/index.ts

@@ -0,0 +1,15 @@
+/**
+ * Client module for browser tab database access
+ *
+ * @example
+ * ```typescript
+ * import { DbClient, createDbClient } from './client';
+ *
+ * const client = createDbClient({ dbName: 'mydb' });
+ * await client.ready;
+ * const rows = await client.query('SELECT * FROM users');
+ * ```
+ */
+
+export { DbClient, createDbClient } from './db-client';
+export type { DbClientOptions } from './db-client';

zig/browser-test/src/coordinator/index.ts

@@ -0,0 +1,14 @@
+/**
+ * Coordinator Module
+ *
+ * Re-exports SharedWorker coordinator functionality for multi-tab database access.
+ */
+
+// The SharedWorker runs in its own context, so we just re-export the path
+// and any utilities that might be useful for the main thread.
+
+export { SHARED_WORKER_PATH } from '../shared/constants';
+
+// Note: The actual SharedWorker code (shared-worker.ts) runs in a separate
+// worker context and cannot be directly imported into the main thread.
+// Use SHARED_WORKER_PATH to instantiate: new SharedWorker(SHARED_WORKER_PATH)