@dxos/plugin-thread 0.8.4-main.67995b8 → 0.8.4-main.ae835ea

package/src/calls-service.stories.tsx

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { scheduleTask, sleep } from '@dxos/async';
@@ -13,14 +12,15 @@ 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 { withTheme } from '@dxos/react-ui/testing';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { type TrackObject, CallsServicePeer, CALLS_URL } from './calls';
-import { useInaudibleAudioStreamTrack, useVideoStreamTrack } from './hooks';
-// @ts-ignore
-import video from '../testing/video.mp4';
+const testVideo = new URL('../testing/video.mp4', import.meta.url).href;
+
+import { CALLS_URL, CallsServicePeer, type TrackObject } from './calls';
+import { useBlackCanvasStreamTrack, useInaudibleAudioStreamTrack, useVideoStreamTrack } from './hooks';
 
+// TODO(burdon): THIS IS TOO COMPLEX FOR A TEST SETUP.
 const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
   const config = useConfig();
   const callsConfig = {
@@ -35,16 +35,18 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
   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) {
-      log.info('not running', { hadRun: 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', { ctx });
+      log.info('disposing ctx', {});
     });
     scheduleTask(
       ctx,
@@ -60,15 +62,12 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
         // Push track to cloudflare.
         performance.mark('push:begin');
         log.info('pushing track', { track: mediaStreamTrack });
-        trackInfo.current = await peerPush.pushTrack({ 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) }));
 
-        // Wait for cloudflare to process the track.
-        await sleep(1000);
-
         // Pull track from cloudflare.
         performance.mark('pullTrack:begin');
         pullCtx.current = Context.default();
@@ -104,7 +103,10 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
 
   const rePullTrack = useCallback(async () => {
     performance.mark('rePullVideo:begin');
-    invariant(pulledTrack);
+    if (!pulledTrack) {
+      log.info('no pulled track, skipping re-pull', { pulledTrack });
+      return;
+    }
     pulledTrack.stop();
     await pullCtx.current!.dispose();
     pullCtx.current = Context.default();
@@ -123,12 +125,57 @@ const pushAndPullTrack = (mediaStreamTrack?: MediaStreamTrack) => {
     pulledTrack,
     rePullTrack,
     metrics,
+    pushService: peerPush,
+    pullService: peerPull,
   };
 };
 
+type StoryProps = { source: string };
+
+const DefaultStory = ({ source }: StoryProps) => {
+  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={metrics} />
+    </div>
+  );
+};
+
 const meta = {
   title: 'plugins/plugin-thread/calls-service',
+  render: DefaultStory,
   decorators: [
+    withTheme,
     withClientProvider({
       config: new Config({
         runtime: {
@@ -138,72 +185,25 @@ const meta = {
         },
       }),
     }),
-    withTheme,
-    withLayout(),
   ],
   parameters: {
     layout: 'centered',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 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]);
+type Story = StoryObj<typeof meta>;
 
-    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>
-    );
-  },
+export const Default: Story = {
   args: {
-    videoSrc: video,
+    source: testVideo,
   },
 };
 
 export const InaudibleAudioStreamTrack = {
   render: () => {
     const audioStreamTrack = useInaudibleAudioStreamTrack();
-
     const { rePullTrack, metrics } = pushAndPullTrack(audioStreamTrack);
 
     return (
@@ -214,3 +214,16 @@ export const InaudibleAudioStreamTrack = {
     );
   },
 };
+
+export const BlackVideoStreamTrack = {
+  render: () => {
+    const videoStreamTrack = useBlackCanvasStreamTrack();
+    const { rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
+    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

@@ -3,30 +3,34 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
-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 { ChannelType, ThreadAction } from '../types';
+import { meta } from '../meta';
+import { Channel, ThreadAction } from '../types';
 import { getAnchor } from '../util';
 
+import { ThreadCapabilities } from './capabilities';
+
+// 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 (context: PluginContext) => {
   const resolve = (typename: string) =>
     context.getCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
 
   return contributes(Capabilities.AppGraphBuilder, [
     createExtension({
-      id: `${THREAD_PLUGIN}/active-call`,
+      id: `${meta.id}/active-call`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
             Option.map((node) => {
@@ -40,7 +44,7 @@ export default (context: PluginContext) => {
                           type: DECK_COMPANION_TYPE,
                           data: null,
                           properties: {
-                            label: ['call panel label', { ns: THREAD_PLUGIN }],
+                            label: ['call panel label', { ns: meta.id }],
                             icon: 'ph--video-conference--regular',
                             position: 'hoist',
                             disposition: 'hidden',
@@ -58,12 +62,14 @@ export default (context: PluginContext) => {
     // TODO(wittjosiah): The channel shouldn't become the companion during a call.
     //   Alternative: the call/meeting/thread should be a child node of the channel and that should be opened.
     createExtension({
-      id: `${THREAD_PLUGIN}/channel-chat-companion`,
+      id: `${meta.id}/channel-chat-companion`,
       connector: (node) => {
         return Rx.make((get) => {
-          return pipe(
+          return Function.pipe(
             get(node),
-            Option.flatMap((node) => (Obj.instanceOf(ChannelType, node.data) ? Option.some(node.data) : Option.none())),
+            Option.flatMap((node) =>
+              Obj.instanceOf(Channel.Channel, node.data) ? Option.some(node.data) : Option.none(),
+            ),
             Option.map((channel) => {
               const callManager = context.getCapability(ThreadCapabilities.CallManager);
               const joined = get(
@@ -79,7 +85,7 @@ export default (context: PluginContext) => {
                   type: PLANK_COMPANION_TYPE,
                   data: 'chat',
                   properties: {
-                    label: ['channel companion label', { ns: THREAD_PLUGIN }],
+                    label: ['channel companion label', { ns: meta.id }],
                     icon: 'ph--hash--regular',
                     position: 'hoist',
                     disposition: 'hidden',
@@ -96,10 +102,10 @@ export default (context: PluginContext) => {
       id: `${meta.id}/comments-companion`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => {
-              if (!Obj.isObject(node.data) || Obj.instanceOf(ChannelType, node.data)) {
+              if (!Obj.isObject(node.data) || Obj.instanceOf(Channel.Channel, node.data)) {
                 return Option.none();
               }
               const metadata = resolve(Obj.getTypename(node.data)!);
@@ -126,10 +132,10 @@ export default (context: PluginContext) => {
       id: `${meta.id}/comment-toolbar`,
       actions: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => {
-              if (!Obj.isObject(node.data) || Obj.instanceOf(ChannelType, node.data)) {
+              if (!Obj.isObject(node.data) || Obj.instanceOf(Channel.Channel, node.data)) {
                 return Option.none();
               }
               const metadata = resolve(Obj.getTypename(node.data)!);

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,29 +5,29 @@
 import { defineCapability } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
-import { type CallState, type MediaState, type CallManager } from '../calls';
-import { THREAD_PLUGIN } from '../meta';
-import { type ViewState, type ThreadState, type ChannelType } from '../types';
+import { type CallManager, type CallState, type MediaState } from '../calls';
+import { meta } from '../meta';
+import { type Channel, type ThreadState, type ViewState } from '../types';
 
 export namespace ThreadCapabilities {
-  export const CallManager = defineCapability<CallManager>(`${THREAD_PLUGIN}/capability/call-manager`);
+  export const CallManager = defineCapability<CallManager>(`${meta.id}/capability/call-manager`);
 
   // TODO(burdon): Better way to define specific extensions for meeting companions.
   // TODO(burdon): This brings in deps from ../calls; how should we manage/minimize explicit type exposure to other plugins?
   // TODO(wittjosiah): These callbacks could be intents once we support broadcast.
   export type CallProperties = {
-    onJoin: (state: { channel?: ChannelType; roomId?: string }) => Promise<void>;
+    onJoin: (state: { channel?: Channel.Channel; roomId?: string }) => Promise<void>;
     onLeave: (roomId?: string) => Promise<void>;
     onCallStateUpdated: (callState: CallState) => Promise<void>;
     onMediaStateUpdated: ([mediaState, isSpeaking]: [MediaState, boolean]) => Promise<void>;
   };
-  export const CallExtension = defineCapability<CallProperties>(`${THREAD_PLUGIN}/capability/call-extension`);
+  export const CallExtension = defineCapability<CallProperties>(`${meta.id}/capability/call-extension`);
 
   type GetViewState = (subjectId: string) => ViewState;
   export const State = defineCapability<{ state: DeepReadonly<ThreadState>; getViewState: GetViewState }>(
-    `${THREAD_PLUGIN}/capability/state`,
+    `${meta.id}/capability/state`,
   );
   export const MutableState = defineCapability<{ state: ThreadState; getViewState: GetViewState }>(
-    `${THREAD_PLUGIN}/capability/state`,
+    `${meta.id}/capability/state`,
   );
 }

package/src/capabilities/index.ts

@@ -12,5 +12,6 @@ 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 const Toolkit = lazy(() => import('./toolkit'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -2,31 +2,32 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Effect } from 'effect';
+import * as Effect from 'effect/Effect';
 
-import { Capabilities, contributes, createIntent, createResolver, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes, createIntent, createResolver } from '@dxos/app-framework';
 import { sleep } from '@dxos/async';
 import { Obj, Relation, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { CollectionAction, SpaceAction } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, getSpace, Ref } from '@dxos/react-client/echo';
+import { Ref, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { AnchoredTo, DataType } from '@dxos/schema';
 
+import { meta } from '../meta';
+import { Channel, Thread, ThreadAction } from '../types';
+
 import { ThreadCapabilities } from './capabilities';
-import { THREAD_PLUGIN } from '../meta';
-import { ChannelType, ThreadAction, ThreadType } from '../types';
 
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
-      intent: ThreadAction.OnSpaceCreated,
+      intent: ThreadAction.onCreateSpace,
       resolve: ({ space, rootCollection }) =>
         Effect.gen(function* () {
           const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
           const { object: collection } = yield* dispatch(
-            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(ChannelType) }),
+            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(Channel.Channel) }),
           );
           rootCollection.objects.push(Ref.make(collection));
 
@@ -40,18 +41,14 @@ export default (context: PluginContext) =>
       intent: ThreadAction.CreateChannel,
       resolve: ({ name }) => ({
         data: {
-          object: Obj.make(ChannelType, {
-            name,
-            defaultThread: Ref.make(Obj.make(ThreadType, { messages: [], status: 'active' })),
-            threads: [],
-          }),
+          object: Channel.make({ name }),
         },
       }),
     }),
     createResolver({
       intent: ThreadAction.CreateChannelThread,
       resolve: ({ channel }) => {
-        const thread = Obj.make(ThreadType, { messages: [], status: 'active' });
+        const thread = Thread.make({ status: 'active' });
         channel.threads.push(Ref.make(thread));
         return {
           data: {
@@ -69,7 +66,7 @@ export default (context: PluginContext) =>
 
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
-        const thread = Obj.make(ThreadType, { name, messages: [], status: 'staged' });
+        const thread = Thread.make({ name });
         const anchor = Relation.make(AnchoredTo, {
           [Relation.Source]: thread,
           [Relation.Target]: subject,
@@ -94,6 +91,39 @@ export default (context: PluginContext) =>
         };
       },
     }),
+    createResolver({
+      intent: ThreadAction.AddProposal,
+      resolve: ({ text, anchor, sender, subject }) => {
+        const space = getSpace(subject);
+        invariant(space, 'Space not found');
+
+        const subjectId = fullyQualifiedId(subject);
+        const proposal = Obj.make(DataType.Message, {
+          created: new Date().toISOString(),
+          sender,
+          blocks: [{ _tag: 'proposal', text }],
+        });
+        const thread = Thread.make({ name: 'Proposal', messages: [Ref.make(proposal)], status: 'active' });
+
+        return {
+          intents: [
+            createIntent(SpaceAction.AddObject, { object: thread, target: space, hidden: true }),
+            createIntent(SpaceAction.AddRelation, {
+              space,
+              schema: AnchoredTo,
+              source: thread,
+              target: subject,
+              fields: { anchor },
+            }),
+            createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
+            createIntent(DeckAction.ChangeCompanion, {
+              primary: subjectId,
+              companion: `${subjectId}${ATTENDABLE_PATH_SEPARATOR}comments`,
+            }),
+          ],
+        };
+      },
+    }),
     createResolver({
       intent: ThreadAction.Select,
       resolve: ({ current }) => {
@@ -130,7 +160,7 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.Delete,
       resolve: async ({ subject, anchor, thread: _thread }, undo) => {
-        const thread = _thread ?? (Relation.getSource(anchor) as ThreadType);
+        const thread = _thread ?? (Relation.getSource(anchor) as Thread.Thread);
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
         const draft = state.drafts[subjectId];
@@ -156,7 +186,7 @@ export default (context: PluginContext) =>
 
           return {
             undoable: {
-              message: ['thread deleted label', { ns: THREAD_PLUGIN }],
+              message: ['thread deleted label', { ns: meta.id }],
               data: { thread, anchor },
             },
             intents: [
@@ -192,12 +222,11 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.AddMessage,
       resolve: ({ anchor, subject, sender, text }) => {
-        const thread = Relation.getSource(anchor) as ThreadType;
+        const thread = Relation.getSource(anchor) as Thread.Thread;
         const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
         const space = getSpace(subject);
         invariant(space, 'Space not found');
-        const intents = [];
 
         const message = Obj.make(DataType.Message, {
           created: new Date().toISOString(),
@@ -208,6 +237,7 @@ export default (context: PluginContext) =>
         });
         thread.messages.push(Ref.make(message));
 
+        const intents = [];
         const draft = state.drafts[subjectId]?.find((a) => a.id === anchor.id);
         if (draft) {
           // Move draft to document.
@@ -254,7 +284,7 @@ export default (context: PluginContext) =>
     createResolver({
       intent: ThreadAction.DeleteMessage,
       resolve: ({ subject, anchor, messageId, message, messageIndex }, undo) => {
-        const thread = Relation.getSource(anchor) as ThreadType;
+        const thread = Relation.getSource(anchor) as Thread.Thread;
         const space = getSpace(subject);
         invariant(space, 'Space not found');
 
@@ -276,7 +306,7 @@ export default (context: PluginContext) =>
 
           return {
             undoable: {
-              message: ['message deleted label', { ns: THREAD_PLUGIN }],
+              message: ['message deleted label', { ns: meta.id }],
               data: { message, messageIndex },
             },
             intents: [

package/src/capabilities/markdown.ts

@@ -4,15 +4,16 @@
 
 import { EditorView } from '@codemirror/view';
 
-import { Capabilities, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { commentClickedEffect, commentsState, type EditorState, overlap } from '@dxos/react-ui-editor';
+import { type EditorState, commentClickedEffect, commentsState, overlap } from '@dxos/react-ui-editor';
 
-import { ThreadCapabilities } from './capabilities';
 import { threads } from '../extensions';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {

package/src/capabilities/react-root.tsx

@@ -7,11 +7,11 @@ import React from 'react';
 import { Capabilities, contributes } from '@dxos/app-framework';
 
 import { Call } from '../components';
-import { THREAD_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export default () => {
   return contributes(Capabilities.ReactRoot, {
-    id: THREAD_PLUGIN,
+    id: meta.id,
     root: () => <Call.Audio />,
   });
 };