@dxos/plugin-thread 0.8.3 → 0.8.4-main.28f8d3d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.8.3",
+  "version": "0.8.4-main.28f8d3d",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,11 +10,13 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs"
@@ -45,66 +47,65 @@
     "md5-hex": "5.0.0",
     "react-resize-detector": "^12.0.2",
     "wavefile": "^11.0.0",
-    "@dxos/app-framework": "0.8.3",
-    "@dxos/codec-protobuf": "0.8.3",
-    "@dxos/async": "0.8.3",
-    "@dxos/context": "0.8.3",
-    "@dxos/devtools": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/keys": "0.8.3",
-    "@dxos/display-name": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/local-storage": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/plugin-attention": "0.8.3",
-    "@dxos/plugin-client": "0.8.3",
-    "@dxos/plugin-deck": "0.8.3",
-    "@dxos/plugin-graph": "0.8.3",
-    "@dxos/plugin-observability": "0.8.3",
-    "@dxos/plugin-space": "0.8.3",
-    "@dxos/plugin-markdown": "0.8.3",
-    "@dxos/protocols": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui-attention": "0.8.3",
-    "@dxos/react-ui-editor": "0.8.3",
-    "@dxos/react-ui-form": "0.8.3",
-    "@dxos/react-ui-dnd": "0.8.3",
-    "@dxos/react-ui-menu": "0.8.3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.3",
-    "@dxos/react-ui-sfx": "0.8.3",
-    "@dxos/react-ui-stack": "0.8.3",
-    "@dxos/react-ui-tabs": "0.8.3",
-    "@dxos/schema": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/react-ui-thread": "0.8.3"
+    "@dxos/app-framework": "0.8.4-main.28f8d3d",
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/codec-protobuf": "0.8.4-main.28f8d3d",
+    "@dxos/debug": "0.8.4-main.28f8d3d",
+    "@dxos/context": "0.8.4-main.28f8d3d",
+    "@dxos/devtools": "0.8.4-main.28f8d3d",
+    "@dxos/display-name": "0.8.4-main.28f8d3d",
+    "@dxos/echo": "0.8.4-main.28f8d3d",
+    "@dxos/echo-schema": "0.8.4-main.28f8d3d",
+    "@dxos/invariant": "0.8.4-main.28f8d3d",
+    "@dxos/keys": "0.8.4-main.28f8d3d",
+    "@dxos/live-object": "0.8.4-main.28f8d3d",
+    "@dxos/local-storage": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-deck": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-attention": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-graph": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-client": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-markdown": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-observability": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-space": "0.8.4-main.28f8d3d",
+    "@dxos/protocols": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-dnd": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-attention": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-editor": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-form": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-stack": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-sfx": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-menu": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-tabs": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-thread": "0.8.4-main.28f8d3d",
+    "@dxos/schema": "0.8.4-main.28f8d3d",
+    "@dxos/util": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/plugin-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/random": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
+    "@dxos/storybook-utils": "0.8.4-main.28f8d3d",
+    "@dxos/plugin-theme": "0.8.4-main.28f8d3d"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
   },
   "publishConfig": {
     "access": "public"

package/src/ThreadPlugin.tsx

@@ -2,14 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Effect } from 'effect';
-
-import { Capabilities, contributes, createIntent, defineModule, definePlugin, Events } from '@dxos/app-framework';
-import { Ref, Type } from '@dxos/echo';
+import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
+import { Ref } from '@dxos/echo';
 import { ClientCapabilities, ClientEvents } from '@dxos/plugin-client';
 import { MarkdownEvents } from '@dxos/plugin-markdown';
 import { SpaceCapabilities, SpaceEvents } from '@dxos/plugin-space';
-import { CollectionAction, defineObjectForm } from '@dxos/plugin-space/types';
+import { defineObjectForm } from '@dxos/plugin-space/types';
 import { translations as threadTranslations } from '@dxos/react-ui-thread';
 import { AnchoredTo, DataType } from '@dxos/schema';
 
@@ -22,8 +20,8 @@ import {
   ReactSurface,
   ThreadState,
 } from './capabilities';
-import { meta, THREAD_ITEM } from './meta';
-import translations from './translations';
+import { THREAD_ITEM, meta } from './meta';
+import { translations } from './translations';
 import { ChannelType, ThreadAction, ThreadType } from './types';
 
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
@@ -124,23 +122,10 @@ export const ThreadPlugin = () =>
     defineModule({
       id: `${meta.id}/module/on-space-created`,
       activatesOn: SpaceEvents.SpaceCreated,
-      activate: (context) => {
-        const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-        return contributes(SpaceCapabilities.OnSpaceCreated, async ({ space, rootCollection }) => {
-          const program = Effect.gen(function* () {
-            const { object: collection } = yield* dispatch(
-              createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(ChannelType) }),
-            );
-            rootCollection.objects.push(Ref.make(collection));
-
-            const { object: channel } = yield* dispatch(
-              createIntent(ThreadAction.CreateChannel, { name: 'General', spaceId: space.id }),
-            );
-            space.db.add(channel);
-          });
-          await Effect.runPromise(program);
-        });
-      },
+      activate: () =>
+        contributes(SpaceCapabilities.OnSpaceCreated, ({ space, rootCollection }) =>
+          createIntent(ThreadAction.OnSpaceCreated, { space, rootCollection }),
+        ),
     }),
     defineModule({
       id: `${meta.id}/module/markdown`,

package/src/calls/call-manager.ts

@@ -12,7 +12,7 @@ import { live } from '@dxos/live-object';
 import { type Tracks } from '@dxos/protocols/proto/dxos/edge/calls';
 import { isNonNullable } from '@dxos/util';
 
-import { CallSwarmSynchronizer, type CallState } from './call-swarm-synchronizer';
+import { type CallState, CallSwarmSynchronizer } from './call-swarm-synchronizer';
 import { MediaManager, type MediaState } from './media-manager';
 import { type ActivityState, CALLS_URL, type EncodedTrackName, TrackNameCodec, type UserState } from './types';
 
@@ -88,8 +88,12 @@ export class CallManager extends Resource {
   }
 
   /** @reactive */
-  get pulledAudioTracks() {
-    return Object.values(this._state.media.pulledAudioTracks).map((track) => track.track);
+  get audioTracksToPlay(): MediaStreamTrack[] {
+    return (this._state.call.users ?? [])
+      .map((user) => (user.tracks?.audioEnabled ? user.tracks?.audio : undefined))
+      .filter(isNonNullable)
+      .map((track) => this._state.media.pulledAudioTracks[track as EncodedTrackName]?.track)
+      .filter(isNonNullable);
   }
 
   /** @reactive */

package/src/calls/call-swarm-synchronizer.ts

@@ -17,7 +17,7 @@ import { type Device, type NetworkService } from '@dxos/protocols/proto/dxos/cli
 import { ConnectionState, type SwarmResponse } from '@dxos/protocols/proto/dxos/edge/messenger';
 import { isNonNullable } from '@dxos/util';
 
-import { codec, type ActivityState, type UserState } from './types';
+import { type ActivityState, type UserState, codec } from './types';
 
 export type CallState = {
   /**

package/src/calls/media-manager.ts

@@ -3,11 +3,11 @@
 //
 
 import { DeferredTask, Event, sleep, synchronized } from '@dxos/async';
-import { cancelWithContext, type Context, Resource } from '@dxos/context';
+import { type Context, Resource, cancelWithContext } from '@dxos/context';
 import { log } from '@dxos/log';
 
 import { SpeakingMonitor } from './speaking-monitor';
-import { TrackNameCodec, type EncodedTrackName, type TrackObject } from './types';
+import { type EncodedTrackName, TrackNameCodec, type TrackObject } from './types';
 import {
   type CallsServiceConfig,
   CallsServicePeer,
@@ -54,6 +54,8 @@ export type MediaManagerParams = {
   serviceConfig: CallsServiceConfig;
 };
 
+const USE_INAUDIBLE_AUDIO = false;
+
 export class MediaManager extends Resource {
   public readonly stateUpdated = new Event<MediaState>();
   private readonly _state: MediaState = { pulledVideoStreams: {}, pulledAudioTracks: {} };
@@ -86,8 +88,10 @@ export class MediaManager extends Resource {
     this._state.videoStream = new MediaStream();
     this._state.videoStream.addTrack(this._state.videoTrack);
 
-    this._inaudibleAudioStreamTrack = await createInaudibleAudioStreamTrack({ ctx: this._ctx });
-    this._state.audioTrack = this._inaudibleAudioStreamTrack;
+    if (USE_INAUDIBLE_AUDIO) {
+      this._inaudibleAudioStreamTrack = await createInaudibleAudioStreamTrack({ ctx: this._ctx });
+      this._state.audioTrack = this._inaudibleAudioStreamTrack;
+    }
 
     this._pushTracksTask = new DeferredTask(this._ctx, async () => {
       await this._pushTracks();
@@ -170,11 +174,14 @@ export class MediaManager extends Resource {
   async turnAudioOff(): Promise<void> {
     void this._speakingMonitor?.close();
     this._speakingMonitor = undefined;
-    if (this._state.audioTrack !== this._inaudibleAudioStreamTrack) {
+    this._state.audioEnabled = false;
+    if (USE_INAUDIBLE_AUDIO && this._state.audioTrack !== this._inaudibleAudioStreamTrack) {
       this._state.audioTrack?.stop();
       this._state.audioTrack = this._inaudibleAudioStreamTrack;
+    } else {
+      this._state.audioTrack?.stop();
+      this._state.audioTrack = undefined;
     }
-    this._state.audioEnabled = false;
     this.stateUpdated.emit(this._state);
     this._pushTracksTask!.schedule();
   }

package/src/calls/types.ts

@@ -5,8 +5,8 @@
 import { buf } from '@dxos/protocols/buf';
 import {
   type ActivitySchema,
-  UserStateSchema,
   type UserState as UserStateProto,
+  UserStateSchema,
 } from '@dxos/protocols/buf/dxos/edge/calls_pb';
 
 /**

package/src/calls/util/calls-service.ts

@@ -7,16 +7,17 @@ import { type Context, Resource } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
 
-import { HistoryCache } from './history-cache';
-import { BulkRequestDispatcher, FIFOScheduler } from './task-scheduling';
 import {
-  type SessionResponse,
   type ErrorResponse,
   type RenegotiationResponse,
+  type SessionResponse,
   type TrackObject,
   type TracksResponse,
 } from '../types';
 
+import { HistoryCache } from './history-cache';
+import { BulkRequestDispatcher, FIFOScheduler } from './task-scheduling';
+
 const NETWORK_TIMEOUT = 5_000;
 
 export type Session = {
@@ -73,7 +74,10 @@ export class CallsServicePeer extends Resource {
   pullTrackDispatcher = new BulkRequestDispatcher<
     TrackObject,
     {
-      trackMap: Map<TrackObject, { resolvedTrack: Promise<MediaStreamTrack>; mid: string }>;
+      /**
+       * trackName -> { resolvedTrack, mid }
+       */
+      trackMap: Map<string, { resolvedTrack: Promise<MediaStreamTrack>; mid: string }>;
     }
   >(32);
 
@@ -354,14 +358,14 @@ export class CallsServicePeer extends Resource {
             );
 
             if (pulledTrackData && pulledTrackData.mid) {
-              acc.set(track, {
+              acc.set(track.trackName!, {
                 mid: pulledTrackData.mid,
                 resolvedTrack: resolveTrack(peerConnection, (t) => t.mid === pulledTrackData.mid),
               });
             }
 
             return acc;
-          }, new Map<TrackObject, { resolvedTrack: Promise<MediaStreamTrack>; mid: string }>());
+          }, new Map<string, { resolvedTrack: Promise<MediaStreamTrack>; mid: string }>());
 
           if (newTrackResponse.requiresImmediateRenegotiation) {
             await peerConnection.setRemoteDescription(new RTCSessionDescription(newTrackResponse.sessionDescription));
@@ -392,7 +396,7 @@ export class CallsServicePeer extends Resource {
         }),
       )
       .then(({ trackMap }) => {
-        const trackInfo = trackMap.get(trackData);
+        const trackInfo = trackMap.get(trackData.trackName!);
         if (trackInfo) {
           return trackInfo.resolvedTrack
             .then((track) => {
@@ -401,7 +405,7 @@ export class CallsServicePeer extends Resource {
             })
             .catch((err) => log.catch(err));
         } else {
-          log.error('missing track info');
+          log.warn('missing track info', { trackData, availableTracks: Array.from(trackMap.keys()) });
         }
       });
 

package/src/calls/util/stub-media-streams.ts

@@ -3,8 +3,8 @@
 //
 //
 
-import { waitForCondition, scheduleTaskInterval } from '@dxos/async';
-import { cancelWithContext, type Context } from '@dxos/context';
+import { scheduleTaskInterval, waitForCondition } from '@dxos/async';
+import { type Context, cancelWithContext } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
 
 /**
@@ -48,19 +48,16 @@ export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context })
   const audioContext = new window.AudioContext();
   const oscillator = audioContext.createOscillator();
   oscillator.type = 'triangle';
-
-  // set to 0.1 to make inaudible
-  oscillator.frequency.setValueAtTime(0.1, audioContext.currentTime);
+  // roughly sounds like a box fan
+  oscillator.frequency.setValueAtTime(20, audioContext.currentTime);
 
   const gainNode = audioContext.createGain();
   // even w/ gain at 0 some packets are sent
-  gainNode.gain.setValueAtTime(0, audioContext.currentTime);
-
+  gainNode.gain.setValueAtTime(0.02, audioContext.currentTime);
   oscillator.connect(gainNode);
 
   const destination = audioContext.createMediaStreamDestination();
   gainNode.connect(destination);
-
   oscillator.start();
 
   ctx.onDispose(async () => {

package/src/calls-service.stories.tsx

@@ -0,0 +1,216 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { scheduleTask, sleep } from '@dxos/async';
+import { Context } from '@dxos/context';
+import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
+import { Config, useConfig } from '@dxos/react-client';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { Button } from '@dxos/react-ui';
+import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import video from '../testing/video.mp4?raw';
+
+import { CALLS_URL, CallsServicePeer, type TrackObject } from './calls';
+import { useInaudibleAudioStreamTrack, useVideoStreamTrack } from './hooks';
+
+const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
+  const config = useConfig();
+  const callsConfig = {
+    iceServers: config.get('runtime.services.ice'),
+    apiBase: `${CALLS_URL}/api/calls`,
+  };
+  const peerPush = useMemo(() => new CallsServicePeer(callsConfig), []);
+  const peerPull = useMemo(() => new CallsServicePeer(callsConfig), []);
+  const [metrics, setMetrics] = useState<Record<string, any>>({});
+  const trackInfo = useRef<TrackObject | undefined>(undefined);
+  const pullCtx = useRef<Context | undefined>(undefined);
+  const [pulledTrack, setPulledTrack] = useState<MediaStreamTrack | undefined>(undefined);
+  const hadRun = useRef(false);
+
+  // Push/pull video stream track to cloudflare.
+  useEffect(() => {
+    if (hadRun.current || !mediaStreamTrack || !peerPush || !peerPull) {
+      log.info('not running', { hadRun: hadRun.current, mediaStreamTrack, peerPush, peerPull });
+      return;
+    }
+    hadRun.current = true;
+    const ctx = Context.default();
+    ctx.onDispose(() => {
+      log.info('disposing ctx', { ctx });
+    });
+    scheduleTask(
+      ctx,
+      async () => {
+        log.info('starting push/pull', { mediaStreamTrack });
+        await peerPush.open();
+        await peerPull.open();
+        ctx.onDispose(() => {
+          void peerPush.close();
+          void peerPull.close();
+        });
+
+        // Push track to cloudflare.
+        performance.mark('push:begin');
+        log.info('pushing track', { track: mediaStreamTrack });
+        trackInfo.current = await peerPush.pushTrack({ track: mediaStreamTrack });
+        performance.mark('push:end');
+        const pushTime = performance.measure('push', 'push:begin', 'push:end').duration;
+        log.info('successfully pushed track', { pushTime, trackInfo: trackInfo.current });
+        setMetrics((prev) => ({ ...prev, 'time to push track [ms]': Math.round(pushTime) }));
+
+        // Wait for cloudflare to process the track.
+        await sleep(1000);
+
+        // Pull track from cloudflare.
+        performance.mark('pullTrack:begin');
+        pullCtx.current = Context.default();
+        let retries = 0;
+        let pulledTrack: MediaStreamTrack | undefined;
+        while (!pulledTrack && retries < 3) {
+          retries++;
+          log.info('pulling track', {
+            trackData: { ...trackInfo.current!, mid: undefined },
+            retries,
+            pulledTrack,
+          });
+          pulledTrack = await peerPull.pullTrack({
+            trackData: { ...trackInfo.current!, mid: undefined },
+            ctx: pullCtx.current,
+          });
+          await sleep(200);
+        }
+        invariant(pulledTrack);
+        setPulledTrack(pulledTrack);
+        performance.mark('pullTrack:end');
+        const pullTime = performance.measure('pullTrack', 'pullTrack:begin', 'pullTrack:end').duration;
+        setMetrics((prev) => ({ ...prev, 'time to pull track [ms]': Math.round(pullTime) }));
+        log.info('successfully pulled track', { pullTime, pulledTrack });
+      },
+      1000,
+    );
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [mediaStreamTrack, peerPush, peerPull]);
+
+  const rePullTrack = useCallback(async () => {
+    performance.mark('rePullVideo:begin');
+    invariant(pulledTrack);
+    pulledTrack.stop();
+    await pullCtx.current!.dispose();
+    pullCtx.current = Context.default();
+    const newPulledTrack = await peerPull.pullTrack({
+      trackData: { ...trackInfo.current!, mid: undefined },
+      ctx: pullCtx.current,
+    });
+    invariant(newPulledTrack);
+    setPulledTrack(newPulledTrack);
+    performance.mark('rePullVideo:end');
+    const rePullTime = performance.measure('rePullVideo', 'rePullVideo:begin', 'rePullVideo:end').duration;
+    setMetrics((prev) => ({ ...prev, 'time to re-pull video [ms]': Math.round(rePullTime) }));
+  }, [peerPull, trackInfo.current, pullCtx.current, pulledTrack]);
+
+  return {
+    pulledTrack,
+    rePullTrack,
+    metrics,
+  };
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/calls-service',
+  decorators: [
+    withClientProvider({
+      config: new Config({
+        runtime: {
+          services: {
+            iceProviders: [{ urls: 'https://edge.dxos.workers.dev/ice' }],
+          },
+        },
+      }),
+    }),
+    withTheme,
+    withLayout(),
+  ],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Default = {
+  render: ({ videoSrc }: { videoSrc: string }) => {
+    const pushVideoElement = useRef<HTMLVideoElement>(null);
+    const pullVideoElement = useRef<HTMLVideoElement>(null);
+    // Get video stream track.
+    const videoStreamTrack = useVideoStreamTrack(pushVideoElement, videoSrc);
+    const { pulledTrack, rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
+    const hadRun = useRef(false);
+
+    // Push/pull video stream track to cloudflare.
+    useEffect(() => {
+      if (!pulledTrack || hadRun.current) {
+        return;
+      }
+      hadRun.current = true;
+      const ctx = Context.default();
+      scheduleTask(ctx, async () => {
+        pullVideoElement.current!.srcObject = new MediaStream([pulledTrack]);
+        await pullVideoElement.current!.play();
+      });
+
+      return () => {
+        void ctx.dispose();
+      };
+    }, [pulledTrack]);
+
+    return (
+      <div className='grid grid-rows-3 gap-4 items-center'>
+        <video ref={pushVideoElement} muted autoPlay loop />
+        <div className='flex flex-col gap-4'>
+          <video ref={pullVideoElement} muted />
+          <Button
+            disabled={
+              !(
+                pullVideoElement?.current?.srcObject instanceof MediaStream &&
+                pullVideoElement.current.srcObject.getTracks()[0]
+              )
+            }
+            onClick={rePullTrack}
+          >
+            Re-pull video
+          </Button>
+        </div>
+        <Json data={metrics} />
+      </div>
+    );
+  },
+  args: {
+    videoSrc: video,
+  },
+};
+
+export const InaudibleAudioStreamTrack = {
+  render: () => {
+    const audioStreamTrack = useInaudibleAudioStreamTrack();
+
+    const { rePullTrack, metrics } = pushAndPullTrack(audioStreamTrack);
+
+    return (
+      <div className='flex flex-col gap-4 items-center'>
+        <Json data={metrics} />
+        <Button onClick={rePullTrack}>Re-pull audio</Button>
+      </div>
+    );
+  },
+};

package/src/capabilities/app-graph-builder.ts

@@ -5,18 +5,19 @@
 import { Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 
-import { Capabilities, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
-import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
-import { createExtension, ROOT_ID, rxFromSignal } from '@dxos/plugin-graph';
+import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { ROOT_ID, createExtension, rxFromSignal } from '@dxos/plugin-graph';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 
-import { ThreadCapabilities } from './capabilities';
-import { meta, THREAD_PLUGIN } from '../meta';
+import { THREAD_PLUGIN, meta } from '../meta';
 import { ChannelType, ThreadAction } from '../types';
 import { getAnchor } from '../util';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default (context: PluginContext) => {
   const resolve = (typename: string) =>
     context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};

package/src/capabilities/call-manager.ts

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes, type PluginContext } from '@dxos/app-framework';
+import { type PluginContext, contributes } from '@dxos/app-framework';
 import { ClientCapabilities } from '@dxos/plugin-client';
 
-import { ThreadCapabilities } from './capabilities';
 import { CallManager } from '../calls';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default async (context: PluginContext) => {
   const client = context.getCapability(ClientCapabilities.Client);
   const callManager = new CallManager(client);

package/src/capabilities/capabilities.ts

@@ -5,9 +5,9 @@
 import { defineCapability } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
-import { type CallState, type MediaState, type CallManager } from '../calls';
+import { type CallManager, type CallState, type MediaState } from '../calls';
 import { THREAD_PLUGIN } from '../meta';
-import { type ViewState, type ThreadState, type ChannelType } from '../types';
+import { type ChannelType, type ThreadState, type ViewState } from '../types';
 
 export namespace ThreadCapabilities {
   export const CallManager = defineCapability<CallManager>(`${THREAD_PLUGIN}/capability/call-manager`);