@dxos/plugin-thread 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/src/calls/call-manager.ts

@@ -2,13 +2,12 @@
 // Copyright 2025 DXOS.org
 //
 
-import { computed } from '@preact/signals-core';
+import { Atom, type Registry } from '@effect-atom/atom-react';
 
 import { Event, synchronized } from '@dxos/async';
 import { type Client } from '@dxos/client';
 import { Resource } from '@dxos/context';
 import { invariant } from '@dxos/invariant';
-import { live } from '@dxos/live-object';
 import { type Tracks } from '@dxos/protocols/proto/dxos/edge/calls';
 import { isNonNullable } from '@dxos/util';
 
@@ -31,84 +30,103 @@ export class CallManager extends Resource {
   public readonly left = new Event<string>();
 
   /**
-   * Live object state. Is changed on internal events.
+   * Atom-based state. Updated via `_updateState()`.
    * CAUTION: Do not change directly.
    */
-  private readonly _state = live<GlobalState>({
+  private readonly _stateAtom = Atom.make<GlobalState>({
     call: {},
     media: { pulledAudioTracks: {}, pulledVideoStreams: {} },
   });
 
-  // TODO(wittjosiah): This shouldn't be necessary, live-object's signals should be granular.
-  private readonly _raisedHandSignal = computed(() => this._state.call.raisedHand ?? false);
-  private readonly _speakingSignal = computed(() => this._state.call.speaking ?? false);
-  private readonly _joinedSignal = computed(() => this._state.call.joined ?? false);
+  // Derived atoms for reactive subscriptions.
+  private readonly _roomIdAtom = Atom.make((get) => get(this._stateAtom).call.roomId);
+  private readonly _raisedHandAtom = Atom.make((get) => get(this._stateAtom).call.raisedHand ?? false);
+  private readonly _speakingAtom = Atom.make((get) => get(this._stateAtom).call.speaking ?? false);
+  private readonly _joinedAtom = Atom.make((get) => get(this._stateAtom).call.joined ?? false);
+  private readonly _selfAtom = Atom.make((get) => get(this._stateAtom).call.self ?? {});
+  private readonly _tracksAtom = Atom.make((get) => get(this._stateAtom).call.tracks ?? {});
+  private readonly _usersAtom = Atom.make((get) => get(this._stateAtom).call.users ?? []);
+  private readonly _mediaAtom = Atom.make((get) => get(this._stateAtom).media);
+  private readonly _audioTracksToPlayAtom = Atom.make((get) => {
+    const state = get(this._stateAtom);
+    return (state.call.users ?? [])
+      .map((user: UserState) => (user.tracks?.audioEnabled ? user.tracks?.audio : undefined))
+      .filter(isNonNullable)
+      .map((track: string) => state.media.pulledAudioTracks[track as EncodedTrackName]?.track)
+      .filter(isNonNullable);
+  });
+  private readonly _videoStreamAtomFamily = Atom.family<EncodedTrackName, Atom.Atom<MediaStream | undefined>>((name) =>
+    Atom.make((get) => get(this._stateAtom).media.pulledVideoStreams[name]?.stream),
+  );
+  private readonly _activityAtomFamily = Atom.family<string, Atom.Atom<ActivityState | undefined>>((key) =>
+    Atom.make((get) => get(this._stateAtom).call.activities?.[key]),
+  );
 
   private readonly _swarmSynchronizer: CallSwarmSynchronizer;
   private readonly _mediaManager: MediaManager;
 
-  /** @reactive */
-  get roomId(): string | undefined {
-    return this._state.call.roomId;
+  //
+  // Derived atoms for reactive UI subscriptions.
+  //
+
+  /** Derived atom for roomId. */
+  get roomIdAtom(): Atom.Atom<string | undefined> {
+    return this._roomIdAtom;
   }
 
-  /** @reactive */
-  get raisedHand(): boolean {
-    return this._raisedHandSignal.value;
+  /** Derived atom for raisedHand. */
+  get raisedHandAtom(): Atom.Atom<boolean> {
+    return this._raisedHandAtom;
   }
 
-  /** @reactive */
-  get speaking(): boolean {
-    return this._speakingSignal.value;
+  /** Derived atom for speaking. */
+  get speakingAtom(): Atom.Atom<boolean> {
+    return this._speakingAtom;
   }
 
-  /** @reactive */
-  get joined(): boolean {
-    return this._joinedSignal.value;
+  /** Derived atom for joined. */
+  get joinedAtom(): Atom.Atom<boolean> {
+    return this._joinedAtom;
   }
 
-  /** @reactive */
-  get self(): UserState {
-    return this._state.call.self ?? {};
+  /** Derived atom for self. */
+  get selfAtom(): Atom.Atom<UserState> {
+    return this._selfAtom;
   }
 
-  /** @reactive */
-  get tracks(): Tracks {
-    return this._state.call.tracks ?? {};
+  /** Derived atom for tracks. */
+  get tracksAtom(): Atom.Atom<Tracks> {
+    return this._tracksAtom;
   }
 
-  /** @reactive */
-  get users(): UserState[] {
-    return this._state.call.users ?? [];
+  /** Derived atom for users. */
+  get usersAtom(): Atom.Atom<UserState[]> {
+    return this._usersAtom;
   }
 
-  /** @reactive */
-  get media() {
-    return this._state.media;
+  /** Derived atom for media. */
+  get mediaAtom(): Atom.Atom<MediaState> {
+    return this._mediaAtom;
   }
 
-  /** @reactive */
-  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);
+  /** Derived atom for audioTracksToPlay. */
+  get audioTracksToPlayAtom(): Atom.Atom<MediaStreamTrack[]> {
+    return this._audioTracksToPlayAtom;
   }
 
-  /** @reactive */
-  get state() {
-    return this._state;
+  /** Returns the full state atom for reactive subscriptions. */
+  get stateAtom(): Atom.Atom<GlobalState> {
+    return this._stateAtom;
   }
 
-  /** @reactive */
-  getVideoStream(name?: EncodedTrackName): MediaStream | undefined {
-    return name ? this._state.media.pulledVideoStreams[name]?.stream : undefined;
+  /** Returns a derived atom for a video stream by name. */
+  videoStreamAtom(name: EncodedTrackName): Atom.Atom<MediaStream | undefined> {
+    return this._videoStreamAtomFamily(name);
   }
 
-  /** @reactive */
-  getActivity(key: string): ActivityState | undefined {
-    return this._state.call.activities?.[key];
+  /** Returns a derived atom for an activity by key. */
+  activityAtom(key: string): Atom.Atom<ActivityState | undefined> {
+    return this._activityAtomFamily(key);
   }
 
   setRoomId(roomId: string): void {
@@ -152,7 +170,10 @@ export class CallManager extends Resource {
   }
 
   // TODO(burdon): Can this be mocked?
-  constructor(private readonly _client: Client) {
+  constructor(
+    private readonly _client: Client,
+    private readonly _registry: Registry.Registry,
+  ) {
     super();
     this._client.config.getOrThrow('runtime.services.edge.url');
     const networkService = this._client.services.services.NetworkService;
@@ -205,7 +226,8 @@ export class CallManager extends Resource {
     this._swarmSynchronizer.setJoined(false);
     await this._swarmSynchronizer.leave();
     await this._mediaManager.leave();
-    this.roomId && this.left.emit(this.roomId);
+    const roomId = this._registry.get(this._roomIdAtom);
+    roomId && this.left.emit(roomId);
   }
 
   private _onCallStateUpdated(state: CallState): void {
@@ -240,7 +262,9 @@ export class CallManager extends Resource {
    * Only this method is allowed to change state.
    */
   private _updateState(): void {
-    this._state.call = this._swarmSynchronizer._getState();
-    this._state.media = this._mediaManager._getState();
+    this._registry.set(this._stateAtom, {
+      call: this._swarmSynchronizer._getState(),
+      media: this._mediaManager._getState(),
+    });
   }
 }

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

@@ -50,7 +50,7 @@ export type CallState = {
   tracks?: UserState['tracks'];
 };
 
-export type CallSwarmSynchronizerParams = { networkService: NetworkService };
+export type CallSwarmSynchronizerProps = { networkService: NetworkService };
 
 /**
  * Period for peer to reconnect to the call swarm gracefully if connection was lost abruptly.
@@ -76,7 +76,7 @@ export class CallSwarmSynchronizer extends Resource {
 
   private _sendStateTask?: DeferredTask = undefined;
 
-  constructor({ networkService }: CallSwarmSynchronizerParams) {
+  constructor({ networkService }: CallSwarmSynchronizerProps) {
     super();
     this._networkService = networkService;
   }

package/src/calls/media-manager.ts

@@ -51,7 +51,7 @@ const MAX_WEB_CAM_FRAMERATE = 24;
 const MAX_WEB_CAM_BITRATE = 120_0000;
 const RETRY_INTERVAL = 100;
 
-export type MediaManagerParams = {
+export type MediaManagerProps = {
   serviceConfig: CallsServiceConfig;
 };
 

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

@@ -27,7 +27,7 @@ export type Session = {
 
 export type CallsServiceConfig = {
   apiBase: string;
-  apiExtraParams?: string;
+  apiExtraProps?: string;
   iceServers?: RTCIceServer[];
 };
 

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

@@ -27,8 +27,8 @@ export class FIFOScheduler {
 }
 
 // TODO(mykola): Reconcile with @dxos/async task scheduling.
-export class BulkRequestDispatcher<RequestEntryParams, BulkResponse> {
-  #currentBatch: RequestEntryParams[];
+export class BulkRequestDispatcher<RequestEntryProps, BulkResponse> {
+  #currentBatch: RequestEntryProps[];
   #currentBulkResponse: Promise<BulkResponse> | null;
   #batchSizeLimit: number;
 
@@ -43,8 +43,8 @@ export class BulkRequestDispatcher<RequestEntryParams, BulkResponse> {
    * At the event loop iteration end, the accumulated entries will be dispatched as a bulk request.
    */
   doBulkRequest(
-    params: RequestEntryParams,
-    bulkRequestFunc: (bulkCopy: RequestEntryParams[]) => Promise<BulkResponse>,
+    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.

package/src/calls-service.stories.tsx

@@ -130,9 +130,9 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
   };
 };
 
-type StoryProps = { source: string };
+type DefaultStoryProps = { source: string };
 
-const DefaultStory = ({ source }: StoryProps) => {
+const DefaultStory = ({ source }: DefaultStoryProps) => {
   const pushVideoElement = useRef<HTMLVideoElement>(null);
   const pullVideoElement = useRef<HTMLVideoElement>(null);
   // Get video stream track.
@@ -172,10 +172,10 @@ const DefaultStory = ({ source }: StoryProps) => {
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/calls-service',
+  title: 'plugins/plugin-thread/experimental/Calls',
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       config: new Config({
         runtime: {

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

@@ -0,0 +1,204 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities, companionSegment } from '@dxos/app-toolkit';
+import { Obj } from '@dxos/echo';
+import { Operation } from '@dxos/operation';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+import { DECK_COMPANION_TYPE, PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
+import { type SelectionManager, type SelectionMode, defaultSelection } from '@dxos/react-ui-attention';
+
+import { meta } from '../../meta';
+import { Channel, ThreadCapabilities, type ThreadState } from '../../types';
+import { ThreadOperation } from '../../operations';
+import { getAnchor } from '../../util';
+
+type CommentDisabledParams = {
+  stateAtom: Atom.Atom<Atom.Writable<ThreadState>[]>;
+  selectionManager: SelectionManager;
+  objectId: string;
+  commentsType: string;
+  selectionMode: SelectionMode | undefined;
+};
+
+/**
+ * Atom family to derive whether the comment button should be disabled.
+ * Uses a composite key to ensure proper caching.
+ */
+const commentDisabledFamily = Atom.family(
+  ({ stateAtom, selectionManager, objectId, commentsType, selectionMode }: CommentDisabledParams) =>
+    Atom.make((get) => {
+      const stateAtoms = get(stateAtom);
+      const state = stateAtoms[0] ? get(stateAtoms[0]) : undefined;
+      const toolbar = state?.toolbar ?? {};
+      const selectionState = get(selectionManager.state);
+      const selection =
+        selectionState.selections[objectId] ?? (selectionMode ? defaultSelection(selectionMode) : undefined);
+      const anchor = getAnchor(selection);
+      const invalidSelection = !anchor;
+      const overlappingComment = toolbar[objectId];
+      return (commentsType === 'anchored' && invalidSelection) || overlappingComment;
+    }),
+);
+
+/** Match ECHO objects that are NOT Channels (i.e. objects that can have comments). */
+const whenCommentableObject = NodeMatcher.whenAll(
+  NodeMatcher.whenEchoObjectMatches,
+  NodeMatcher.whenNot(NodeMatcher.whenEchoTypeMatches(Channel.Channel)),
+);
+
+// TODO(wittjosiah): Highlight active calls in L1.
+//  Track active meetings by subscribing to meetings query and polling the swarms of recent meetings in the space.
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const capabilities = yield* Capability.Service;
+
+    const resolve = (typename: string) =>
+      capabilities.getAll(AppCapabilities.Metadata).find(({ id }: { id: string }) => id === typename)?.metadata ?? {};
+
+    const extensions = yield* Effect.all([
+      GraphBuilder.createExtension({
+        id: `${meta.id}.active-call`,
+        match: NodeMatcher.whenRoot,
+        connector: (node, get) => {
+          const callManagerAtom = capabilities.atom(ThreadCapabilities.CallManager);
+          const [call] = get(callManagerAtom);
+          if (!call) {
+            return Effect.succeed([]);
+          }
+          // Use derived joinedAtom for efficient subscription.
+          const joined = get(call.joinedAtom);
+          return Effect.succeed(
+            joined
+              ? [
+                  {
+                    id: 'active-call',
+                    type: DECK_COMPANION_TYPE,
+                    data: null,
+                    properties: {
+                      label: ['call panel label', { ns: meta.id }],
+                      icon: 'ph--video-conference--regular',
+                      position: 'hoist',
+                      disposition: 'hidden',
+                    },
+                  },
+                ]
+              : [],
+          );
+        },
+      }),
+      GraphBuilder.createTypeExtension({
+        id: `${meta.id}.channel-chat-companion`,
+        type: Channel.Channel,
+        connector: (channel, get) => {
+          const callManager = capabilities.get(ThreadCapabilities.CallManager);
+          // Use derived atoms for efficient subscription.
+          const joined = get(callManager.joinedAtom);
+          const roomId = get(callManager.roomIdAtom);
+          const isActive = joined && roomId === Obj.getDXN(channel).toString();
+          if (!isActive) {
+            return Effect.succeed([]);
+          }
+
+          return Effect.succeed([
+            {
+              id: 'chat',
+              type: PLANK_COMPANION_TYPE,
+              data: 'chat',
+              properties: {
+                label: ['channel companion label', { ns: meta.id }],
+                icon: 'ph--hash--regular',
+                position: 'hoist',
+                disposition: 'hidden',
+              },
+            },
+          ]);
+        },
+      }),
+      GraphBuilder.createExtension({
+        id: `${meta.id}.comments-companion`,
+        match: (node) => {
+          if (!Obj.isObject(node.data) || Option.isNone(whenCommentableObject(node))) {
+            return Option.none();
+          }
+          const metadata = resolve(Obj.getTypename(node.data)!);
+          return typeof metadata.comments === 'string' ? Option.some(node) : Option.none();
+        },
+        connector: () =>
+          Effect.succeed([
+            {
+              id: companionSegment('comments'),
+              type: PLANK_COMPANION_TYPE,
+              data: 'comments',
+              properties: {
+                label: ['comments label', { ns: meta.id }],
+                icon: 'ph--chat-text--regular',
+                disposition: 'hidden',
+                position: 'hoist',
+              },
+            },
+          ]),
+      }),
+      GraphBuilder.createExtension({
+        id: `${meta.id}.comment-toolbar`,
+        match: (node) => {
+          if (!Obj.isObject(node.data) || Option.isNone(whenCommentableObject(node))) {
+            return Option.none();
+          }
+          const metadata = resolve(Obj.getTypename(node.data)!);
+          return typeof metadata.comments === 'string' ? Option.some(node) : Option.none();
+        },
+        actions: (matched, get) => {
+          const object = matched.data;
+          const objectDxn = Obj.getDXN(object).toString();
+          const stateAtom = capabilities.atom(ThreadCapabilities.State);
+          const selectionManager = capabilities.get(AttentionCapabilities.Selection);
+          const metadata = resolve(Obj.getTypename(object)!);
+
+          const disabled = get(
+            commentDisabledFamily({
+              stateAtom,
+              selectionManager,
+              objectId: objectDxn,
+              commentsType: metadata.comments as string,
+              selectionMode: metadata.selectionMode,
+            }),
+          );
+
+          return Effect.succeed([
+            {
+              id: 'comment',
+              data: Effect.fnUntraced(function* () {
+                const metadata = resolve(Obj.getTypename(object)!);
+                const selection = selectionManager.getSelection(objectDxn);
+                const anchor = metadata.comments === 'anchored' ? getAnchor(selection) : Date.now().toString();
+                const name = metadata.getAnchorLabel?.(object, anchor);
+                yield* Operation.invoke(ThreadOperation.Create, {
+                  anchor,
+                  name,
+                  subject: object,
+                });
+              }),
+              properties: {
+                label: ['add comment label', { ns: meta.id }],
+                icon: 'ph--chat-text--regular',
+                disposition: 'toolbar',
+                disabled,
+                testId: 'thread.comment.add',
+              },
+            },
+          ]);
+        },
+      }),
+    ]);
+
+    return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+  }),
+);

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

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -0,0 +1,17 @@
+//
+// 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/blueprint-definition/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));

package/src/capabilities/call-manager/call-manager.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { CallManager } from '../../calls';
+import { ThreadCapabilities } from '../../types';
+
+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/call-manager/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const CallManager = Capability.lazy('CallManager', () => import('./call-manager'));

package/src/capabilities/index.ts

@@ -2,16 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { lazy } from '@dxos/app-framework';
-
-export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
-export const BlueprintDefinition = lazy(() => import('./blueprint-definition'));
-export const CallManager = lazy(() => import('./call-manager'));
-export const IntentResolver = lazy(() => import('./intent-resolver'));
-export const Markdown = lazy(() => import('./markdown'));
-export const ReactRoot = lazy(() => import('./react-root'));
-export const ReactSurface = lazy(() => import('./react-surface'));
-export const ThreadSettings = lazy(() => import('./settings'));
-export const ThreadState = lazy(() => import('./state'));
-
-export * from './capabilities';
+export * from './app-graph-builder';
+export * from './blueprint-definition';
+export * from './call-manager';
+export * from './markdown';
+export * from './operation-handler';
+export * from './undo-mappings';
+export * from './react-root';
+export * from './react-surface';
+export * from './settings';
+export * from './state';

package/src/capabilities/markdown/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const Markdown = Capability.lazy('Markdown', () => import('./markdown'));