@dxos/plugin-thread 0.8.4-main.fcfe5033a5 → 0.8.4-staging.60fe92afc8

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

@@ -1,127 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-//
-
-import { scheduleTaskInterval, waitForCondition } from '@dxos/async';
-import { type Context, cancelWithContext } from '@dxos/context';
-import { invariant } from '@dxos/invariant';
-
-/**
- * Creates a black canvas stream track.
- * We need this to to have black rectangle video that is live (have frames) when video feed is disabled.
- */
-export const createBlackCanvasStreamTrack = async ({
-  ctx,
-  width,
-  height,
-}: {
-  ctx: Context;
-  width: number;
-  height: number;
-}): Promise<MediaStreamTrack> => {
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-
-  const canvasCtx = canvas.getContext('2d');
-  invariant(canvasCtx);
-  const drawFrame = () => {
-    canvasCtx.fillStyle = 'black';
-    canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
-  };
-  scheduleTaskInterval(ctx, async () => drawFrame(), 200);
-
-  const track = canvas.captureStream().getVideoTracks()[0];
-  drawFrame();
-
-  await cancelWithContext(ctx, waitForCondition({ condition: () => track.readyState === 'live', timeout: 1_000 }));
-
-  return track;
-};
-
-let audioContextStartedPreviously = false;
-const userGestureEvents = [
-  'click',
-  'contextmenu',
-  'auxclick',
-  'dblclick',
-  'mousedown',
-  'mouseup',
-  'pointerup',
-  'touchend',
-  'keydown',
-  'keyup',
-];
-
-/**
- * Creates an inaudible audio stream track.
- * We need this to have audio track available when audio is disabled.
- */
-export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context }): Promise<MediaStreamTrack> => {
-  const audioContext = new window.AudioContext();
-
-  const oscillator = audioContext.createOscillator();
-  oscillator.type = 'triangle';
-  oscillator.frequency.setValueAtTime(20, audioContext.currentTime);
-
-  const gainNode = audioContext.createGain();
-  gainNode.gain.setValueAtTime(0, audioContext.currentTime);
-  oscillator.connect(gainNode);
-
-  const destination = audioContext.createMediaStreamDestination();
-  gainNode.connect(destination);
-
-  let oscillatorStarted = false;
-  const ensureOscillatorStarted = () => {
-    if (oscillatorStarted) return;
-    oscillator.start();
-    oscillatorStarted = true;
-  };
-
-  const stateChangeHandler = () => {
-    if (audioContext.state === 'running') {
-      audioContextStartedPreviously = true;
-      ensureOscillatorStarted();
-    }
-
-    if (audioContext.state === 'suspended' || (audioContext.state as string) === 'interrupted') {
-      resumeAudioContext();
-    }
-  };
-
-  audioContext.addEventListener('statechange', stateChangeHandler);
-
-  const resumeAudioContext = () => {
-    void audioContext.resume().then(() => {
-      cleanUpUserGestureListeners();
-    });
-  };
-
-  const cleanUpUserGestureListeners = () => {
-    userGestureEvents.forEach((gesture) => {
-      document.removeEventListener(gesture, resumeAudioContext, {
-        capture: true,
-      });
-    });
-  };
-
-  if (audioContextStartedPreviously) {
-    resumeAudioContext();
-  } else {
-    userGestureEvents.forEach((gesture) => {
-      document.addEventListener(gesture, resumeAudioContext, {
-        capture: true,
-      });
-    });
-  }
-
-  ctx.onDispose(async () => {
-    cleanUpUserGestureListeners();
-    oscillator.disconnect();
-    oscillator.stop();
-    await audioContext.close();
-  });
-
-  return destination.stream.getAudioTracks()[0];
-};

package/src/calls/util/task-scheduling.ts

@@ -1,92 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-const DefaultBatchSizeLimit = 64;
-
-type Task<Value = unknown> = () => Promise<Value>;
-
-export class FIFOScheduler {
-  #schedulerChain: Promise<void>;
-
-  constructor() {
-    this.#schedulerChain = Promise.resolve();
-  }
-
-  schedule<T>(task: Task<T>): Promise<T> {
-    return new Promise((resolve, reject) => {
-      this.#schedulerChain = this.#schedulerChain.then(async () => {
-        try {
-          resolve(await task());
-        } catch (error: any) {
-          reject(error);
-        }
-      });
-    });
-  }
-}
-
-// TODO(mykola): Reconcile with @dxos/async task scheduling.
-export class BulkRequestDispatcher<RequestEntryProps, BulkResponse> {
-  #currentBatch: RequestEntryProps[];
-  #currentBulkResponse: Promise<BulkResponse> | null;
-  #batchSizeLimit: number;
-
-  constructor(batchSizeLimit: number = DefaultBatchSizeLimit) {
-    this.#currentBatch = [];
-    this.#currentBulkResponse = null;
-    this.#batchSizeLimit = batchSizeLimit;
-  }
-
-  /**
-   * Returns a bulk response promise.
-   * At the event loop iteration end, the accumulated entries will be dispatched as a bulk request.
-   */
-  doBulkRequest(
-    params: RequestEntryProps,
-    bulkRequestFunc: (bulkCopy: RequestEntryProps[]) => Promise<BulkResponse>,
-  ): Promise<BulkResponse> {
-    if (this.#currentBatch.length >= this.#batchSizeLimit) {
-      // If it reaches the batch size limit, we make another bulk request.
-      this.#currentBatch = [];
-      this.#currentBulkResponse = null;
-    }
-    this.#currentBatch.push(params);
-    if (this.#currentBulkResponse != null) {
-      return this.#currentBulkResponse;
-    }
-
-    // Save the current batch list reference in the function scope because this.#currentBatch could be reset
-    // if the batch limit is reached.
-    const batch = this.#currentBatch;
-    this.#currentBulkResponse = new Promise((resolve, reject) => {
-      //   script
-      //     |
-      //     V
-      // microtasks (Promise)
-      //     |
-      //     V
-      // macrotasks (setTimeout)
-      //
-      // macrotasks are run in the event loop iteration end, so we use that moment to make the bulkRequestFunc call.
-      setTimeout(() => {
-        // When the bulk request happens, the batch list and the response is reset to start another batch.
-        // Coming callers will wait for a new response promise.
-        this.#currentBulkResponse = null;
-
-        // We cut here to make the bulk request.
-        const batchCopy = batch.splice(0, batch.length);
-        bulkRequestFunc(batchCopy)
-          .then((result) => {
-            resolve(result);
-          })
-          .catch((err) => {
-            reject(err);
-          });
-      }, 0);
-    });
-
-    // This bulk response needs to be processed to extract the the result for the entry.
-    return this.#currentBulkResponse;
-  }
-}

package/src/calls-service.stories.tsx

@@ -1,230 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { type Meta, type StoryObj } from '@storybook/react-vite';
-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 { withTheme } from '@dxos/react-ui/testing';
-
-const testVideo = new URL('../testing/video.mp4', import.meta.url).href;
-
-import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from '#hooks';
-
-import { CALLS_URL, CallsServicePeer, type TrackObject } from './calls';
-
-// TODO(burdon): THIS IS TOO COMPLEX FOR A TEST SETUP.
-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);
-
-  const deps: any[] = [];
-  // Push/pull video stream track to cloudflare.
-  useEffect(() => {
-    if (hadRun.current || !mediaStreamTrack || !peerPush || !peerPull) {
-      return;
-    }
-    hadRun.current = true;
-    const ctx = Context.default();
-    log.info('setting up ctx', { ctx, mediaStreamTrack, peerPush, peerPull });
-    deps.push([ctx, mediaStreamTrack, peerPush, peerPull]);
-    ctx.onDispose(() => {
-      log.info('disposing 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, ctx: Context.default() });
-        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) }));
-
-        // 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');
-    if (!pulledTrack) {
-      log.info('no pulled track, skipping re-pull', { pulledTrack });
-      return;
-    }
-    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,
-    pushService: peerPush,
-    pullService: peerPull,
-  };
-};
-
-type DefaultStoryProps = { source: string };
-
-const DefaultStory = ({ source }: DefaultStoryProps) => {
-  const pushVideoElement = useRef<HTMLVideoElement>(null);
-  const pullVideoElement = useRef<HTMLVideoElement>(null);
-  // Get video stream track.
-  const videoStreamTrack = useVideoStreamTrack(pushVideoElement, source);
-  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={!pulledTrack} onClick={rePullTrack}>
-          Re-pull video
-        </Button>
-      </div>
-      <Json.Data data={metrics} />
-    </div>
-  );
-};
-
-const meta = {
-  title: 'plugins/plugin-thread/experimental/Calls',
-  render: DefaultStory,
-  decorators: [
-    withTheme(),
-    withClientProvider({
-      config: new Config({
-        runtime: {
-          services: {
-            iceProviders: [{ urls: 'https://edge.dxos.workers.dev/ice' }],
-          },
-        },
-      }),
-    }),
-  ],
-  parameters: {
-    layout: 'centered',
-  },
-} satisfies Meta<typeof DefaultStory>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    source: testVideo,
-  },
-};
-
-export const InaudibleAudioStreamTrack = {
-  render: () => {
-    const audioStreamTrack = useInaudibleAudioStreamTrack();
-    const { rePullTrack, metrics } = pushAndPullTrack(audioStreamTrack);
-
-    return (
-      <div className='flex flex-col gap-4 items-center'>
-        <Json.Data data={metrics} />
-        <Button onClick={rePullTrack}>Re-pull audio</Button>
-      </div>
-    );
-  },
-};
-
-export const BlackVideoStreamTrack = {
-  render: () => {
-    const videoStreamTrack = useBlackCanvasStreamTrack();
-    const { rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
-    return (
-      <div className='flex flex-col gap-4 items-center'>
-        <Json.Data data={metrics} />
-        <Button onClick={rePullTrack}>Re-pull audio</Button>
-      </div>
-    );
-  },
-};

package/src/capabilities/blueprint-definition.ts

@@ -1,17 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability } from '@dxos/app-framework';
-import { AppCapabilities } from '@dxos/app-toolkit';
-
-import { ThreadBlueprint } from '#blueprints';
-
-const blueprintDefinition = Capability.makeModule<
-  [],
-  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
->(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, ThreadBlueprint)]));
-
-export default blueprintDefinition;

package/src/capabilities/call-manager.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { ClientCapabilities } from '@dxos/plugin-client/types';
-
-import { ThreadCapabilities } from '#types';
-
-import { CallManager } from '../calls';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const client = yield* Capability.get(ClientCapabilities.Client);
-    const registry = yield* Capability.get(Capabilities.AtomRegistry);
-    const callManager = new CallManager(client, registry);
-    yield* Effect.tryPromise(() => callManager.open());
-
-    return Capability.contributes(ThreadCapabilities.CallManager, callManager, () =>
-      Effect.sync(() => {
-        void callManager.close();
-      }),
-    );
-  }),
-);

package/src/capabilities/markdown.ts

@@ -1,82 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { EditorView } from '@codemirror/view';
-import * as Effect from 'effect/Effect';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-import { DeckOperation } from '@dxos/plugin-deck/operations';
-import { MarkdownCapabilities } from '@dxos/plugin-markdown';
-import { linkedSegment } from '@dxos/react-ui-attention';
-import { type EditorState, commentClickedEffect, commentsState, documentId, overlap } from '@dxos/ui-editor';
-
-import { ThreadCapabilities } from '#types';
-
-import { threads } from '../extensions';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    // Get context for lazy capability access in callbacks.
-    const capabilities = yield* Capability.Service;
-
-    return Capability.contributes(MarkdownCapabilities.Extensions, [
-      ({ document: doc }) => {
-        const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
-        const registry = capabilities.get(Capabilities.AtomRegistry);
-        const stateAtom = capabilities.get(ThreadCapabilities.State);
-        return threads({ registry, stateAtom }, doc, invokePromise);
-      },
-      ({ document: doc }) => {
-        if (!doc) return [];
-        const registry = capabilities.get(Capabilities.AtomRegistry);
-        const stateAtom = capabilities.get(ThreadCapabilities.State);
-
-        return EditorView.updateListener.of((update) => {
-          if (update.docChanged || update.selectionSet) {
-            const id = update.state.facet(documentId);
-            const overlaps = selectionOverlapsComment(update.state);
-            const current = registry.get(stateAtom);
-            registry.set(stateAtom, {
-              ...current,
-              toolbar: { ...current.toolbar, [id]: overlaps },
-            });
-          }
-        });
-      },
-      ({ document: doc }) => {
-        if (!doc) return [];
-        const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
-
-        return EditorView.updateListener.of((update) => {
-          update.transactions.forEach((transaction) => {
-            transaction.effects.forEach(async (effect) => {
-              if (effect.is(commentClickedEffect)) {
-                void invokePromise(DeckOperation.ChangeCompanion, {
-                  companion: linkedSegment('comments'),
-                });
-              }
-            });
-          });
-        });
-      },
-    ]);
-  }),
-);
-
-const selectionOverlapsComment = (state: EditorState): boolean => {
-  // May not be defined if thread plugin not installed.
-  const commentState = state.field(commentsState, false);
-  if (commentState === undefined) {
-    return false;
-  }
-
-  const { selection } = state;
-  for (const range of selection.ranges) {
-    if (commentState.comments.some(({ range: commentRange }) => overlap(commentRange, range))) {
-      return true;
-    }
-  }
-
-  return false;
-};

package/src/capabilities/react-root.tsx

@@ -1,20 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-import React from 'react';
-
-import { Capabilities, Capability } from '@dxos/app-framework';
-
-import { Call } from '#components';
-import { meta } from '#meta';
-
-export default Capability.makeModule(() =>
-  Effect.sync(() => {
-    return Capability.contributes(Capabilities.ReactRoot, {
-      id: meta.id,
-      root: () => <Call.Audio />,
-    });
-  }),
-);

package/src/capabilities/settings.ts

@@ -1,35 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import * as Effect from 'effect/Effect';
-
-import { Capability } from '@dxos/app-framework';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { createKvsStore } from '@dxos/effect';
-
-import { meta } from '#meta';
-import { Settings } from '#types';
-
-import { ThreadCapabilities } from '../types/capabilities';
-
-export default Capability.makeModule(() =>
-  Effect.sync(() => {
-    const settingsAtom = createKvsStore({
-      key: meta.id,
-      schema: Settings.Settings,
-      defaultValue: () => ({}),
-    });
-
-    return [
-      // Expose atom directly for programmatic access.
-      Capability.contributes(ThreadCapabilities.Settings, settingsAtom),
-      // Contribute to common settings for UI discovery.
-      Capability.contributes(AppCapabilities.Settings, {
-        prefix: meta.id,
-        schema: Settings.Settings,
-        atom: settingsAtom,
-      }),
-    ];
-  }),
-);

package/src/capabilities/state.ts

@@ -1,22 +0,0 @@
-//
-// Copyright 2025 DXOS.org
-//
-
-import { Atom } from '@effect-atom/atom-react';
-import * as Effect from 'effect/Effect';
-
-import { Capability } from '@dxos/app-framework';
-
-import { ThreadCapabilities, type ThreadState, type ViewStore } from '#types';
-
-export default Capability.makeModule(
-  Effect.fnUntraced(function* () {
-    const stateAtom = Atom.make<ThreadState>({ toolbar: {}, drafts: {} }).pipe(Atom.keepAlive);
-    const viewStoreAtom = Atom.make<ViewStore>({}).pipe(Atom.keepAlive);
-
-    return [
-      Capability.contributes(ThreadCapabilities.State, stateAtom),
-      Capability.contributes(ThreadCapabilities.ViewState, viewStoreAtom),
-    ];
-  }),
-);