@q9labsai/chalk-react-native 4.1.17 → 5.0.1

package/src/sounds/assets.d.ts

@@ -0,0 +1,5 @@
+// Metro resolves an imported audio file to an asset id that expo-audio plays.
+declare module "*.wav" {
+  const asset: number;
+  export default asset;
+}

package/src/sounds/sounds.ts

@@ -0,0 +1,50 @@
+/// <reference path="./assets.d.ts" />
+import { createAudioPlayer, type AudioPlayer } from "expo-audio";
+import error from "./assets/error.wav";
+import hand from "./assets/hand.wav";
+import join from "./assets/join.wav";
+import knock from "./assets/knock.wav";
+import leave from "./assets/leave.wav";
+import message from "./assets/message.wav";
+import mute from "./assets/mute.wav";
+import recording from "./assets/recording.wav";
+import test from "./assets/test.wav";
+import unmute from "./assets/unmute.wav";
+
+/**
+ * The call's sounds, rendered offline from the mockup's WebAudio synth so they sound the same:
+ * two rising notes for a join, two falling for a leave, two thuds for a knock, one light tone for
+ * a message, two bell notes for a raised hand, a tick for mute and unmute, three notes when
+ * recording starts, two low notes for an error, and three rising notes for Test speaker.
+ */
+const sources = { join, leave, knock, message, hand, mute, unmute, recording, error, test } as const;
+
+export type SoundName = keyof typeof sources;
+
+const players = new Map<SoundName, AudioPlayer>();
+
+/**
+ * Plays one sound when `enabled` (the persisted Sounds setting); Test speaker ignores the setting.
+ *
+ * Players keep the audio session active: expo-audio otherwise deactivates the shared iOS session
+ * after each sound, which would cut the call's audio. This module never calls `setAudioModeAsync`,
+ * because on Android that resets the audio mode and turns on the speakerphone mid-call. On iOS the
+ * silent switch mutes these sounds only outside a call; during a call WebRTC's play-and-record
+ * session plays them regardless.
+ */
+export function playSound(name: SoundName, enabled: boolean): void {
+  if (!enabled && name !== "test") return;
+  let player = players.get(name);
+  if (!player) {
+    player = createAudioPlayer(sources[name], { keepAudioSessionActive: true });
+    players.set(name, player);
+  }
+  void player.seekTo(0);
+  player.play();
+}
+
+/** Frees the players when the call view goes away. */
+export function releaseSounds(): void {
+  for (const player of players.values()) player.remove();
+  players.clear();
+}

package/src/space-client/create-native-space-client.ts

@@ -1,36 +1,29 @@
 import {
   AsyncStorageV1PendingTargetStore,
-  CloudflareRTKClient,
   CloudflareSFUClient,
   createChalkChatFileHttpTransport,
   createChalkWhiteboardV1Client,
-  createChalkWhiteboardV1FileHttpTransport,
+  createChalkWhiteboardV1FileDownloadTransport,
   createCloudflareSFUHTTPTransport,
   createReactNativeSyncLifecycle,
   createReactNativeWebSocketFactory,
   createV1SyncClient,
-  type DiagnosticObservation,
   type GetAccess,
-  type ReactNativeWebSocket,
   type ReactNativeWebSocketConstructor,
   type ReactNativeAsyncStorage,
 } from "@q9labsai/chalk-client";
 import { createSpaceClientForPlatform, type SpaceClientPlatform } from "@q9labsai/chalk-client/effect";
-import type { FeedbackSource } from "@q9labsai/chalk-client";
 import type { SpaceClient } from "@q9labsai/chalk-client";
 import { RTCPeerConnection, mediaDevices } from "@cloudflare/react-native-webrtc";
 import { AppState } from "react-native";
-
-import { authenticatedNativeCredential, bindNativeAuthenticatedTelemetry, createTelemetry, registerNativeJourneyContext, syncTransportCloseDiagnostic, type RtcPeerConnection, type TelemetryJourney } from "../telemetry";
-import { createNativeRealtimeKitClient } from "./cloudflare-rtk-native";
-
+import { toNativeCaptureError } from "../media/native-capture-error";
+import { ensureRandomUUID } from "./random-uuid";
 type PlatformDependencies = NonNullable<SpaceClientPlatform["dependencies"]>;
 type NativeMediaClient = ReturnType<NonNullable<PlatformDependencies["createMediaClient"]>>;
 type MediaFactoryInput = Parameters<NonNullable<PlatformDependencies["createMediaClient"]>>[0];
 type SyncFactoryInput = Parameters<NonNullable<PlatformDependencies["createSyncClient"]>>[0];
 type ChatFileFactoryInput = Parameters<NonNullable<PlatformDependencies["createChatFileTransport"]>>[0];
 type WhiteboardFactoryInput = Parameters<NonNullable<PlatformDependencies["createWhiteboardClient"]>>[0];
-
 export type NativeSpaceClientOptions = {
   readonly space: string;
   readonly getAccess: GetAccess;
@@ -41,18 +34,15 @@ export type NativeSpaceClientOptions = {
   readonly camera?: boolean;
   readonly syncStartupTimeoutMs?: number;
   readonly storage?: ReactNativeAsyncStorage;
-  readonly telemetry?: TelemetryJourney;
-  readonly feedbackSource?: FeedbackSource;
 };
-
 export function createNativeSpaceClient(options: NativeSpaceClientOptions): SpaceClient {
-  const { storage, telemetry: journey } = options;
+  ensureRandomUUID();
+  const { storage } = options;
   const apiBaseURL = options.baseUrl ?? "https://api.chalkmeet.com";
   const syncURL = options.syncUrl ?? defaultSyncURL(apiBaseURL);
-  const telemetry = journey ? createTelemetry(journey) : undefined;
-  const fetch = telemetryFetch(journey);
+  const fetch = globalThis.fetch;
   const lifecycle = createReactNativeSyncLifecycle({ appState: AppState });
-  const webSocket = createReactNativeWebSocketFactory(nativeWebSocketConstructor(journey));
+  const webSocket = createReactNativeWebSocketFactory(globalThis.WebSocket as unknown as ReactNativeWebSocketConstructor);
   const dependencies: PlatformDependencies = {
     clock: {
       now: () => Date.now(),
@@ -60,10 +50,16 @@ export function createNativeSpaceClient(options: NativeSpaceClientOptions): Spac
       clearTimeout: (handle) => globalThis.clearTimeout(handle as ReturnType<typeof globalThis.setTimeout>),
     },
     mediaDevices: {
-      getUserMedia: async (constraints) => (await mediaDevices.getUserMedia(constraints)) as unknown as globalThis.MediaStream,
+      getUserMedia: async (constraints) => {
+        try {
+          return (await mediaDevices.getUserMedia(constraints)) as unknown as globalThis.MediaStream;
+        } catch (cause) {
+          throw toNativeCaptureError(cause);
+        }
+      },
       getDisplayMedia: async () => (await mediaDevices.getDisplayMedia()) as unknown as globalThis.MediaStream,
     },
-    createMediaClient: (input) => createMediaClient(apiBaseURL, input, fetch, telemetry?.observePeerConnection, journey),
+    createMediaClient: (input) => createMediaClient(apiBaseURL, input, fetch),
     createSyncClient: (input) => createSyncClient(syncURL, input, lifecycle, webSocket, storage),
     createChatFileTransport: (input) => createChatFileTransport(apiBaseURL, input, fetch),
     createWhiteboardClient: options.whiteboardURL === null ? undefined : (input) => createWhiteboardClient(apiBaseURL, options.whiteboardURL ?? whiteboardURL(syncURL), input, fetch, lifecycle, webSocket),
@@ -74,88 +70,30 @@ export function createNativeSpaceClient(options: NativeSpaceClientOptions): Spac
       return () => subscription.remove();
     },
   };
-
   const client = createSpaceClientForPlatform(
     { space: options.space, getAccess: options.getAccess, baseUrl: apiBaseURL },
     {
       apiBaseUrl: apiBaseURL,
       syncUrl: syncURL,
       whiteboardUrl: options.whiteboardURL,
-      telemetry: journey?.context,
       dependencies,
       fetch,
-      syncStartupTimeoutMs: options.syncStartupTimeoutMs ?? 30_000,
+      syncStartupTimeoutMs: options.syncStartupTimeoutMs ?? 30000,
       initialMicrophoneEnabled: options.microphone,
       initialCameraEnabled: options.camera,
-      onConnectionDiagnostic: (event) => journey?.recordDiagnostic(connectionDiagnostic(event)),
-      ...(journey ? { recordReconnect: (observation) => journey.recordDiagnostic(observation) } : {}),
-      feedbackSource: options.feedbackSource ?? "embedded",
     },
   );
-  bindNativeAuthenticatedTelemetry(client, journey);
-  registerNativeJourneyContext(client, journey, telemetry);
   return client;
 }
-
-type PlatformDiagnostic = Parameters<NonNullable<SpaceClientPlatform["onConnectionDiagnostic"]>>[0];
-
-function connectionDiagnostic(event: PlatformDiagnostic): DiagnosticObservation {
-  if (event.event === "space_join_span" && event.step && event.spanId && event.outcome) {
-    return {
-      category: "connection",
-      code: `space.join.${event.step}.${event.outcome}`,
-      phase: joinTracePhase(event.step),
-      state: event.outcome === "succeeded" ? "succeeded" : event.outcome === "failed" ? "failed" : "observed",
-      ...(event.durationMs === undefined ? {} : { metricValue: event.durationMs }),
-      attributes: {
-        span_id: event.spanId,
-        ...(event.parentSpanId ? { parent_span_id: event.parentSpanId } : {}),
-        step: event.step,
-        outcome: event.outcome,
-        epoch: event.epoch,
-        ...(event.code ? { failure_code: event.code } : {}),
-      },
-    };
-  }
-  return {
-    category: "connection",
-    code: event.event,
-    phase: event.state === "joining" ? "signaling" : event.state === "leaving" || event.state === "left" ? "terminal" : "recovery",
-    state: event.event.endsWith("_failed") || event.event.endsWith("_exhausted") ? "failed" : "observed",
-  };
-}
-
-function joinTracePhase(step: NonNullable<PlatformDiagnostic["step"]>): "authentication" | "signaling" | "media" | "recovery" {
-  switch (step) {
-    case "acquire_initial_media":
-    case "create_media_client":
-    case "start_media":
-      return "media";
-    default:
-      return "signaling";
-  }
-}
-
-function createMediaClient(apiBaseURL: string, input: MediaFactoryInput, fetch: typeof globalThis.fetch, observePeerConnection: ((peerConnection: RtcPeerConnection) => () => void) | undefined, journey: TelemetryJourney | undefined): NativeMediaClient {
+function createMediaClient(apiBaseURL: string, input: MediaFactoryInput, fetch: typeof globalThis.fetch): NativeMediaClient {
   const { subject } = input.access;
-  if (input.access.media.provider === "cloudflare_rtk") {
-    const client = new CloudflareRTKClient({
-      authToken: input.access.media.clientPayload.token,
-      participantId: subject.participantId,
-      clientFactory: createNativeRealtimeKitClient,
-      onError: input.onFailure,
-      onScreenEnded: input.onScreenEnded,
-    });
-    return createRTKConnectionMediaClient(client);
-  }
   const replaceMediaConnection = input.replaceMediaConnection;
   const client = new CloudflareSFUClient({
     bootstrap: input.access.media.clientPayload,
     participantId: subject.participantId,
     transport: createCloudflareSFUHTTPTransport({
       apiBaseURL,
-      telemetry: input.telemetry,
-      credential: () => authenticatedNativeCredential(input.credential, journey),
+      credential: input.credential,
       tenantId: subject.tenantId,
       spaceId: subject.spaceId,
       episodeId: subject.episodeId,
@@ -171,34 +109,13 @@ function createMediaClient(apiBaseURL: string, input: MediaFactoryInput, fetch:
       : undefined,
     peerConnectionFactory: (configuration) => {
       const connection = new RTCPeerConnection(configuration);
-      observePeerConnection?.(connection as unknown as RtcPeerConnection);
       return connection as unknown as globalThis.RTCPeerConnection;
     },
-    recordReconnect: input.recordReconnect,
     onError: input.onFailure,
     onScreenEnded: input.onScreenEnded,
   });
   return createSFUConnectionMediaClient(client);
 }
-
-function createRTKConnectionMediaClient(client: CloudflareRTKClient): NativeMediaClient {
-  return {
-    setLocalPublicationTarget: client.setLocalPublicationTarget.bind(client),
-    observeLocalPublications: client.observeLocalPublications.bind(client),
-    observeRemotePublications: client.observeRemotePublications.bind(client),
-    start: client.start.bind(client),
-    stop: client.stop.bind(client),
-    restart: (input) => {
-      if (!("provider" in input) || input.provider !== "cloudflare_rtk") throw new TypeError("The RealtimeKit adapter requires a Cloudflare RealtimeKit access grant");
-      return client.restart(input);
-    },
-    prepareLocalTrack: client.prepareLocalTrack.bind(client),
-    clearPreparedLocalTrack: client.clearPreparedLocalTrack.bind(client),
-    getSnapshot: client.getSnapshot.bind(client),
-    subscribe: client.subscribe.bind(client),
-  };
-}
-
 function createSFUConnectionMediaClient(client: CloudflareSFUClient): NativeMediaClient {
   return {
     setLocalPublicationTarget: client.setLocalPublicationTarget.bind(client),
@@ -219,7 +136,6 @@ function createSFUConnectionMediaClient(client: CloudflareSFUClient): NativeMedi
     subscribe: client.subscribe.bind(client),
   };
 }
-
 function createSyncClient(syncURL: string, input: SyncFactoryInput, lifecycle: ReturnType<typeof createReactNativeSyncLifecycle>, webSocket: ReturnType<typeof createReactNativeWebSocketFactory>, storage: ReactNativeAsyncStorage | undefined) {
   const subject = input.access.subject;
   const scope = `${subject.tenantId}:${subject.episodeId}:${subject.participantId}`;
@@ -229,25 +145,16 @@ function createSyncClient(syncURL: string, input: SyncFactoryInput, lifecycle: R
     mediaPlane: input.media,
     lifecycle,
     webSocket,
-    telemetry: input.telemetry,
-    recordReconnect: input.recordReconnect,
     ...(storage ? { pendingStore: new AsyncStorageV1PendingTargetStore({ scope, storage }) } : {}),
   });
 }
-
 function createChatFileTransport(apiBaseURL: string, input: ChatFileFactoryInput, fetch: typeof globalThis.fetch) {
   return createChalkChatFileHttpTransport({ baseUrl: apiBaseURL, token: input.token, fetch });
 }
-
 function createWhiteboardClient(apiBaseURL: string, url: string, input: WhiteboardFactoryInput, fetch: typeof globalThis.fetch, lifecycle: ReturnType<typeof createReactNativeSyncLifecycle>, webSocket: ReturnType<typeof createReactNativeWebSocketFactory>) {
-  let sceneId: string | null = null;
-  const files = createChalkWhiteboardV1FileHttpTransport({
+  const files = createChalkWhiteboardV1FileDownloadTransport({
     baseUrl: apiBaseURL,
     token: input.token,
-    sceneId: () => {
-      if (sceneId === null) throw new TypeError("Whiteboard scene is not ready");
-      return sceneId;
-    },
     fetch,
   });
   return createChalkWhiteboardV1Client({
@@ -256,79 +163,12 @@ function createWhiteboardClient(apiBaseURL: string, url: string, input: Whiteboa
     files,
     lifecycle,
     webSocket,
+    onWatchdogReplacement: input.onWatchdogReplacement,
     onSummary: (summary) => {
-      sceneId = summary.sceneId;
       input.onSummary(summary);
     },
   });
 }
-
-function telemetryFetch(journey: TelemetryJourney | undefined): typeof globalThis.fetch {
-  if (!journey) return globalThis.fetch;
-  return (input, init) => {
-    const headers = new Headers(init?.headers);
-    for (const [name, value] of Object.entries(journey.headers)) headers.set(name, value);
-    return globalThis.fetch(input, { ...init, headers });
-  };
-}
-
-function nativeWebSocketConstructor(journey: TelemetryJourney | undefined): ReactNativeWebSocketConstructor {
-  const RuntimeWebSocket = globalThis.WebSocket as unknown as new (url: string, protocols?: string | string[], options?: { readonly headers?: Readonly<Record<string, string>> }) => ReactNativeWebSocket;
-
-  return class ChalkNativeWebSocket implements ReactNativeWebSocket {
-    onopen: ((event: unknown) => void) | null = null;
-    onmessage: ((event: { readonly data: unknown }) => void) | null = null;
-    onclose: ((event: { readonly code?: unknown; readonly reason?: unknown }) => void) | null = null;
-    onerror: ((event: unknown) => void) | null = null;
-    readonly #socket: ReactNativeWebSocket;
-
-    constructor(url: string) {
-      this.#socket = new RuntimeWebSocket(url, undefined, journey ? { headers: journey.headers } : undefined);
-      this.#socket.onopen = (event) => this.onopen?.(event);
-      this.#socket.onmessage = (event) => {
-        recordSyncFrame(journey, "server_to_client", event.data);
-        this.onmessage?.(event);
-      };
-      this.#socket.onclose = (event) => {
-        recordSyncTransportClose(journey, event);
-        this.onclose?.(event);
-      };
-      this.#socket.onerror = (event) => {
-        journey?.recordDiagnostic({ category: "network", code: "sync_websocket_error", phase: "signaling", state: "failed" });
-        this.onerror?.(event);
-      };
-    }
-
-    send(data: string): void {
-      recordSyncFrame(journey, "client_to_server", data);
-      this.#socket.send(data);
-    }
-
-    close(code?: number, reason?: string): void {
-      this.#socket.close(code, reason);
-    }
-  };
-}
-
-function recordSyncTransportClose(journey: TelemetryJourney | undefined, event: { readonly code?: unknown; readonly reason?: unknown }): void {
-  if (!journey) return;
-  journey.recordDiagnostic(syncTransportCloseDiagnostic(event));
-}
-
-function recordSyncFrame(journey: TelemetryJourney | undefined, direction: "client_to_server" | "server_to_client", data: unknown): void {
-  if (!journey) return;
-  let frameType = "binary";
-  if (typeof data === "string") {
-    try {
-      const frame = JSON.parse(data) as { readonly type?: unknown };
-      frameType = typeof frame.type === "string" ? frame.type : "unknown";
-    } catch {
-      frameType = "invalid_json";
-    }
-  }
-  journey.recordSyncFrame({ direction, frameType });
-}
-
 function whiteboardURL(syncURL: string): string {
   const url = new URL(syncURL);
   url.pathname = "/v1/whiteboard";
@@ -336,7 +176,6 @@ function whiteboardURL(syncURL: string): string {
   url.hash = "";
   return url.toString();
 }
-
 function defaultSyncURL(apiBaseURL: string): string {
   const url = new URL(apiBaseURL);
   url.protocol = url.protocol === "https:" ? "wss:" : "ws:";

package/src/space-client/random-uuid.ts

@@ -0,0 +1,17 @@
+import { randomUUID } from "expo-crypto";
+
+/**
+ * JavaScriptCore on React Native has no Web Crypto, and the client calls `crypto.randomUUID()` for request and command keys
+ * and for its connection id, which must come from a secure source. Without it, Leave and media commands fail. This fills only
+ * what is missing with Expo's native secure generator, so runtimes with Web Crypto keep theirs.
+ */
+export function ensureRandomUUID(): void {
+  const existing: Partial<Crypto> | undefined = globalThis.crypto;
+  if (typeof existing?.randomUUID === "function") return;
+  if (existing === undefined) {
+    Object.defineProperty(globalThis, "crypto", { configurable: true, value: { randomUUID } });
+    return;
+  }
+  // A partial Web Crypto, such as a getRandomValues polyfill, keeps its members and gains randomUUID.
+  Object.defineProperty(existing, "randomUUID", { configurable: true, value: randomUUID });
+}

package/src/space-client/whiteboard-watchdog.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it, vi } from "vitest";
+import type { SpaceClientPlatform } from "@q9labsai/chalk-client/effect";
+const mocks = vi.hoisted(() => ({ platform: vi.fn(), whiteboard: vi.fn() }));
+vi.mock("react-native", () => ({ AppState: { currentState: "active", addEventListener: vi.fn(() => ({ remove: vi.fn() })) } }));
+vi.mock("@cloudflare/react-native-webrtc", () => ({ RTCPeerConnection: vi.fn(), mediaDevices: {} }));
+vi.mock("@q9labsai/chalk-client/effect", () => ({ createSpaceClientForPlatform: mocks.platform }));
+vi.mock("@q9labsai/chalk-client", async (original) => ({ ...(await original<typeof import("@q9labsai/chalk-client")>()), createChalkWhiteboardV1Client: mocks.whiteboard }));
+import { createNativeSpaceClient } from "./create-native-space-client";
+describe("native whiteboard watchdog adapter", () => {
+  it("passes the shared core's replacement recorder without a journey option", () => {
+    createNativeSpaceClient({
+      space: "test",
+      getAccess: async () => {
+        throw new Error("unused");
+      },
+    });
+    const platform: SpaceClientPlatform | undefined = mocks.platform.mock.calls[0]?.[1];
+    const onWatchdogReplacement = vi.fn();
+    platform?.dependencies?.createWhiteboardClient?.({ token: async () => "unused", onSummary: vi.fn(), onWatchdogReplacement });
+    expect(mocks.whiteboard).toHaveBeenCalledOnce();
+    expect(mocks.whiteboard.mock.calls[0]?.[0].onWatchdogReplacement).toBe(onWatchdogReplacement);
+  });
+});

package/src/stage/ContentTile.tsx

@@ -0,0 +1,100 @@
+import type { SpaceSnapshot } from "@q9labsai/chalk-client";
+import { memo, useMemo, useRef } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { EmbeddedWhiteboard } from "../components/EmbeddedWhiteboard";
+import { RtcVideoView } from "../components/RtcVideoView";
+import { useSpaceClient } from "../context/space-client-context";
+import { useDevScenario } from "../frame/dev-scenario";
+import { useMeasuredRef } from "../frame/measurement";
+import { Icon } from "../icons/Icon";
+import { createNativeMediaStream } from "../media/native-webrtc";
+import type { Frame } from "../motion/MovingFrame";
+import { ChalkText } from "../primitives/ChalkText";
+import { NameTag } from "../primitives/NameTag";
+import { useTheme } from "../theme/theme";
+import { radii } from "../theme/tokens";
+import { useSpaceSelector } from "./space-selector";
+
+export type SharedContent = { readonly kind: "screen"; readonly sharerId: string } | { readonly kind: "board" };
+
+export type ContentTileProps = {
+  readonly content: SharedContent;
+  /** The content's box inside the tile, letterboxed to its aspect. */
+  readonly inner: Frame;
+  /** A small tile in the rows; tapping it brings the content back to the spotlight. */
+  readonly mini: boolean;
+  readonly onShowInSpotlight: () => void;
+};
+
+/** The shared screen or board as one stage tile (`.tile.content`), kept mounted while it moves. */
+export const ContentTile = memo(function ContentTile({ content, inner, mini, onShowInSpotlight }: ContentTileProps): React.JSX.Element {
+  const { colors } = useTheme();
+  const tileStyle = [styles.tile, { backgroundColor: colors.tile }];
+  const tileRef = useMeasuredRef<View>("tile.content", tileStyle);
+  return (
+    <View ref={tileRef} style={tileStyle} testID="tile.content">
+      {content.kind === "screen" ? <ScreenShare inner={inner} mini={mini} onShowInSpotlight={onShowInSpotlight} sharerId={content.sharerId} /> : <Board mini={mini} onShowInSpotlight={onShowInSpotlight} />}
+    </View>
+  );
+});
+
+function ScreenShare({ sharerId, inner, mini, onShowInSpotlight }: { readonly sharerId: string; readonly inner: Frame; readonly mini: boolean; readonly onShowInSpotlight: () => void }): React.JSX.Element {
+  const { colors } = useTheme();
+  const select = useMemo(() => (snapshot: SpaceSnapshot) => snapshot.media.remote.find((media) => media.participantId === sharerId && media.source === "screen")?.track ?? null, [sharerId]);
+  const track = useSpaceSelector(select);
+  const selectName = useMemo(() => (snapshot: SpaceSnapshot) => snapshot.participants.roster.find((person) => person.participantId === sharerId)?.displayName ?? "", [sharerId]);
+  const sharerName = useSpaceSelector(selectName);
+  const slot = useDevScenario().screenSlots?.[sharerId];
+  const streamURL = useMemo(() => (track ? createNativeMediaStream(track).toURL() : null), [track]);
+  const name = `${sharerName.split(" ")[0]}’s screen`;
+
+  return (
+    <>
+      <View style={[styles.box, { left: inner.x, top: inner.y, width: inner.width, height: inner.height, backgroundColor: colors.tile }]} testID="tile.content.screen">
+        {slot ?? (streamURL ? <RtcVideoView objectFit="contain" streamURL={streamURL} style={StyleSheet.absoluteFill} /> : null)}
+      </View>
+      {mini ? <Pressable accessibilityLabel={`Show ${name} in spotlight`} accessibilityRole="button" onPress={onShowInSpotlight} style={StyleSheet.absoluteFill} testID="tile.content.open" /> : null}
+      <NameTag icon="share" name={name} testID="tile.content.name" />
+    </>
+  );
+}
+
+const selectBoard = (snapshot: SpaceSnapshot) => snapshot.whiteboard.engine.status;
+
+/** The shared board, view-only today, through the embedded whiteboard. It loads only while a board is shared. */
+function Board({ mini, onShowInSpotlight }: { readonly mini: boolean; readonly onShowInSpotlight: () => void }): React.JSX.Element {
+  const client = useSpaceClient();
+  const { colors, scheme } = useTheme();
+  const status = useSpaceSelector(selectBoard);
+  const chipStyle = [styles.viewOnly, { backgroundColor: colors.surface, borderColor: colors.lineStrong }];
+  const chipRef = useMeasuredRef<View>("tile.content.view-only", chipStyle);
+  // The transport changes when the engine resubscribes.
+  const transport = useMemo(() => client.whiteboard.transport(), [client, status]);
+  const journeyId = useRef(`board-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`).current;
+
+  return (
+    <>
+      {transport ? <EmbeddedWhiteboard canClear={false} canDraw={false} journeyId={journeyId} style={StyleSheet.absoluteFill} testID="tile.content.board" theme={scheme} transport={transport} /> : null}
+      {mini ? (
+        <>
+          <Pressable accessibilityLabel="Show the board in spotlight" accessibilityRole="button" onPress={onShowInSpotlight} style={StyleSheet.absoluteFill} testID="tile.content.open" />
+          <NameTag icon="pen" name="Board" testID="tile.content.name" />
+        </>
+      ) : (
+        <View accessibilityLiveRegion="polite" accessibilityRole="text" accessible ref={chipRef} style={chipStyle} testID="tile.content.view-only">
+          <Icon color={colors.textMuted} name="lock" size={16} />
+          <ChalkText tone="textSoft" variant="section">
+            View only
+          </ChalkText>
+        </View>
+      )}
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  tile: { flex: 1, overflow: "hidden", borderRadius: radii.tilePhone },
+  box: { position: "absolute", overflow: "hidden" },
+  // `.vchip`: a 30 pt pill 12 pt in from the board's top-left corner, with a one-pixel ring.
+  viewOnly: { position: "absolute", left: 12, top: 12, height: 30, paddingHorizontal: 12, borderRadius: radii.round, borderWidth: 1, flexDirection: "row", alignItems: "center", gap: 6, zIndex: 3 },
+});