@dxos/plugin-thread 0.8.2-main.f11618f → 0.8.2-staging.42af850

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

@@ -0,0 +1,92 @@
+//
+// 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<RequestEntryParams, BulkResponse> {
+  #currentBatch: RequestEntryParams[];
+  #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: RequestEntryParams,
+    bulkRequestFunc: (bulkCopy: RequestEntryParams[]) => 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/capabilities/app-graph-builder.ts

@@ -2,33 +2,179 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
-import { type ReactiveEchoObject } from '@dxos/client/echo';
-import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
-import { createExtension, type Node } from '@dxos/plugin-graph';
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
 
-import { meta } from '../meta';
+import { Capabilities, contributes, createIntent, type PluginContext } from '@dxos/app-framework';
+import { getTypename, isInstanceOf } from '@dxos/echo-schema';
+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 { fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
 
-export default (context: PluginsContext) =>
-  contributes(Capabilities.AppGraphBuilder, [
+import { ThreadCapabilities } from './capabilities';
+import { meta, THREAD_PLUGIN } from '../meta';
+import { ChannelType, ThreadAction } from '../types';
+import { getAnchor } from '../util';
+
+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`,
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+            Option.map((node) => {
+              const [call] = get(context.capabilities(ThreadCapabilities.CallManager));
+              return get(
+                rxFromSignal(() =>
+                  call?.joined
+                    ? [
+                        {
+                          id: `${node.id}${ATTENDABLE_PATH_SEPARATOR}active-call`,
+                          type: DECK_COMPANION_TYPE,
+                          data: null,
+                          properties: {
+                            label: ['call panel label', { ns: THREAD_PLUGIN }],
+                            icon: 'ph--video-conference--regular',
+                            position: 'hoist',
+                            disposition: 'hidden',
+                          },
+                        },
+                      ]
+                    : [],
+                ),
+              );
+            }),
+            Option.getOrElse(() => []),
+          ),
+        ),
+    }),
+    // 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`,
+      connector: (node) => {
+        return Rx.make((get) => {
+          return pipe(
+            get(node),
+            Option.flatMap((node) => (isInstanceOf(ChannelType, node.data) ? Option.some(node.data) : Option.none())),
+            Option.map((channel) => {
+              const callManager = context.getCapability(ThreadCapabilities.CallManager);
+              const joined = get(
+                rxFromSignal(() => callManager.joined && callManager.roomId === fullyQualifiedId(channel)),
+              );
+              if (!joined) {
+                return [];
+              }
+
+              return [
+                {
+                  id: `${fullyQualifiedId(channel)}${ATTENDABLE_PATH_SEPARATOR}chat`,
+                  type: PLANK_COMPANION_TYPE,
+                  data: 'chat',
+                  properties: {
+                    label: ['channel companion label', { ns: THREAD_PLUGIN }],
+                    icon: 'ph--hash--regular',
+                    position: 'hoist',
+                    disposition: 'hidden',
+                  },
+                },
+              ];
+            }),
+            Option.getOrElse(() => []),
+          );
+        });
+      },
+    }),
     createExtension({
-      id: `${meta.id}/comments`,
-      // TODO(wittjosiah): Support comments on any object.
-      // filter: (node): node is Node<ReactiveEchoObject<any>> => isEchoObject(node.data),
-      filter: (node): node is Node<ReactiveEchoObject<any>> =>
-        !!node.data && typeof node.data === 'object' && 'threads' in node.data && Array.isArray(node.data.threads),
-      connector: ({ node }) => [
-        {
-          id: [node.id, 'comments'].join(ATTENDABLE_PATH_SEPARATOR),
-          type: PLANK_COMPANION_TYPE,
-          data: 'comments',
-          properties: {
-            label: ['comments label', { ns: meta.id }],
-            icon: 'ph--chat-text--regular',
-            disposition: 'hidden',
-            position: 'hoist',
-          },
-        },
-      ],
+      id: `${meta.id}/comments-companion`,
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => {
+              if (!isEchoObject(node.data) || isInstanceOf(ChannelType, node.data)) {
+                return Option.none();
+              }
+              const metadata = resolve(getTypename(node.data)!);
+              return typeof metadata.comments === 'string' ? Option.some(node) : Option.none();
+            }),
+            Option.map((node) => [
+              {
+                id: [node.id, 'comments'].join(ATTENDABLE_PATH_SEPARATOR),
+                type: PLANK_COMPANION_TYPE,
+                data: 'comments',
+                properties: {
+                  label: ['comments label', { ns: meta.id }],
+                  icon: 'ph--chat-text--regular',
+                  disposition: 'hidden',
+                  position: 'hoist',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
+    }),
+    createExtension({
+      id: `${meta.id}/comment-toolbar`,
+      actions: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => {
+              if (!isEchoObject(node.data) || isInstanceOf(ChannelType, node.data)) {
+                return Option.none();
+              }
+              const metadata = resolve(getTypename(node.data)!);
+              return typeof metadata.comments === 'string' ? Option.some(node.data) : Option.none();
+            }),
+            Option.map((object) => {
+              const selectionManager = context.getCapability(AttentionCapabilities.Selection);
+              const toolbar = get(context.capabilities(ThreadCapabilities.State))[0]?.state.toolbar ?? {};
+              const disabled = get(
+                rxFromSignal(() => {
+                  const metadata = resolve(getTypename(object)!);
+                  const selection = selectionManager.getSelection(fullyQualifiedId(object), metadata.selectionMode);
+                  const anchor = getAnchor(selection);
+                  const invalidSelection = !anchor;
+                  const overlappingComment = toolbar[fullyQualifiedId(object)];
+                  return (metadata.comments === 'anchored' && invalidSelection) || overlappingComment;
+                }),
+              );
+
+              return [
+                {
+                  id: `${fullyQualifiedId(object)}/comment`,
+                  data: () => {
+                    const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+                    const metadata = resolve(getTypename(object)!);
+                    const selection = selectionManager.getSelection(fullyQualifiedId(object));
+                    // TODO(wittjosiah): Use presence of selection to determine if the comment should be anchored.
+                    // Requires all components which support selection (e.g. table/kanban) to support anchored comments.
+                    const anchor = metadata.comments === 'anchored' ? getAnchor(selection) : Date.now().toString();
+                    const name = metadata.getAnchorLabel?.(object, anchor);
+                    void dispatch(createIntent(ThreadAction.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',
+                  },
+                },
+              ];
+            }),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   ]);
+};

package/src/capabilities/call-manager.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { contributes, type PluginContext } from '@dxos/app-framework';
+import { ClientCapabilities } from '@dxos/plugin-client';
+
+import { ThreadCapabilities } from './capabilities';
+import { CallManager } from '../calls';
+
+export default async (context: PluginContext) => {
+  const client = context.getCapability(ClientCapabilities.Client);
+  const callManager = new CallManager(client);
+  await callManager.open();
+
+  return contributes(ThreadCapabilities.CallManager, callManager, () => {
+    void callManager.close();
+  });
+};

package/src/capabilities/capabilities.ts

@@ -5,10 +5,24 @@
 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 } from '../types';
+import { type ViewState, type ThreadState, type ChannelType } from '../types';
 
 export namespace ThreadCapabilities {
+  export const CallManager = defineCapability<CallManager>(`${THREAD_PLUGIN}/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>;
+    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`);
+
   type GetViewState = (subjectId: string) => ViewState;
   export const State = defineCapability<{ state: DeepReadonly<ThreadState>; getViewState: GetViewState }>(
     `${THREAD_PLUGIN}/capability/state`,

package/src/capabilities/index.ts

@@ -5,8 +5,10 @@
 import { lazy } from '@dxos/app-framework';
 
 export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
+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'));

package/src/capabilities/intent-resolver.ts

@@ -2,61 +2,70 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, createResolver, type PluginsContext } from '@dxos/app-framework';
-import { ObjectId, Ref } from '@dxos/echo-schema';
+import { batch } from '@preact/signals-core';
+
+import { Capabilities, contributes, createIntent, createResolver, type PluginContext } from '@dxos/app-framework';
+import { RelationSourceId, RelationTargetId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { DXN, QueueSubspaceTags } from '@dxos/keys';
-import { refFromDXN } from '@dxos/live-object';
-import { log } from '@dxos/log';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { ChannelType, ThreadType } from '@dxos/plugin-space/types';
-import { live, fullyQualifiedId, getSpace, makeRef } from '@dxos/react-client/echo';
-import { MessageType } from '@dxos/schema';
+import { SpaceAction } from '@dxos/plugin-space/types';
+import { live, fullyQualifiedId, getSpace, Ref } from '@dxos/react-client/echo';
+import { AnchoredTo, DataType } from '@dxos/schema';
 
 import { ThreadCapabilities } from './capabilities';
 import { THREAD_PLUGIN } from '../meta';
-import { ThreadAction } from '../types';
+import { ChannelType, ThreadAction, ThreadType } from '../types';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
       intent: ThreadAction.CreateChannel,
-      resolve: ({ spaceId, name }) => ({
+      resolve: ({ name }) => ({
         data: {
           object: live(ChannelType, {
             name,
-            queue: refFromDXN(new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, spaceId, ObjectId.random()])),
+            defaultThread: Ref.make(live(ThreadType, { messages: [], status: 'active' })),
+            threads: [],
           }),
         },
       }),
     }),
+    createResolver({
+      intent: ThreadAction.CreateChannelThread,
+      resolve: ({ channel }) => {
+        const thread = live(ThreadType, { messages: [], status: 'active' });
+        channel.threads.push(Ref.make(thread));
+        return {
+          data: {
+            object: thread,
+          },
+        };
+      },
+    }),
+    // TODO(wittjosiah): Break this up into more composable pieces.
     createResolver({
       intent: ThreadAction.Create,
-      resolve: ({ name, cursor, subject }) => {
-        // Seed the threads array if it does not exist.
-        if (subject?.threads === undefined) {
-          try {
-            // Static schema will throw an error if subject does not support threads array property.
-            subject.threads = [];
-          } catch (err) {
-            log.error('Subject does not support threads array', { typename: subject?.typename });
-            return;
-          }
-        }
+      resolve: ({ name, anchor: _anchor, subject }) => {
+        const space = getSpace(subject);
+        invariant(space, 'Space not found');
 
-        const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+        const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
-        const thread = live(ThreadType, { name, anchor: cursor, messages: [], status: 'staged' });
+        const thread = live(ThreadType, { name, messages: [], status: 'staged' });
+        const anchor = live(AnchoredTo, {
+          [RelationSourceId]: thread,
+          [RelationTargetId]: subject,
+          anchor: _anchor,
+        });
         const draft = state.drafts[subjectId];
         if (draft) {
-          draft.push(thread);
+          draft.push(anchor);
         } else {
-          state.drafts[subjectId] = [thread];
+          state.drafts[subjectId] = [anchor];
         }
 
         return {
-          data: { object: thread },
           intents: [
             createIntent(ThreadAction.Select, { current: fullyQualifiedId(thread) }),
             createIntent(DeckAction.ChangeCompanion, {
@@ -70,7 +79,7 @@ export default (context: PluginsContext) =>
     createResolver({
       intent: ThreadAction.Select,
       resolve: ({ current }) => {
-        const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+        const { state } = context.getCapability(ThreadCapabilities.MutableState);
         state.current = current;
       },
     }),
@@ -102,37 +111,35 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: ThreadAction.Delete,
-      resolve: ({ subject, thread }, undo) => {
-        const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      resolve: ({ subject, anchor, thread: _thread }, undo) => {
+        const thread = _thread ?? (anchor[RelationSourceId] as ThreadType);
+        const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
         const draft = state.drafts[subjectId];
         if (draft) {
           // Check if we're deleting a draft; if so, remove it.
-          const index = draft.findIndex((t) => t.id === thread.id);
+          const index = draft.findIndex((a) => a.id === anchor.id);
           if (index !== -1) {
             draft.splice(index, 1);
             return;
           }
         }
 
-        const space = getSpace(thread);
-        if (!space || !subject.threads) {
+        const space = getSpace(anchor);
+        if (!space) {
           return;
         }
 
         if (!undo) {
-          const index = subject.threads.findIndex((t: any) => t?.id === thread.id);
-          const cursor = subject.threads[index]?.anchor;
-          if (index !== -1) {
-            subject.threads?.splice(index, 1);
-          }
-
-          space.db.remove(thread);
+          batch(() => {
+            space.db.remove(thread);
+            space.db.remove(anchor);
+          });
 
           return {
             undoable: {
               message: ['thread deleted label', { ns: THREAD_PLUGIN }],
-              data: { cursor },
+              data: { thread, anchor },
             },
             intents: [
               createIntent(ObservabilityAction.SendEvent, {
@@ -145,9 +152,10 @@ export default (context: PluginsContext) =>
             ],
           };
         } else {
-          // TODO(wittjosiah): SDK should do this automatically.
-          const savedThread = space.db.add(thread);
-          subject.threads.push(savedThread);
+          batch(() => {
+            space.db.add(thread);
+            space.db.add(anchor);
+          });
 
           return {
             intents: [
@@ -165,27 +173,39 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: ThreadAction.AddMessage,
-      resolve: ({ thread, subject, sender, text }) => {
-        const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      resolve: ({ anchor, subject, sender, text }) => {
+        const thread = anchor[RelationSourceId] as ThreadType;
+        const { state } = context.getCapability(ThreadCapabilities.MutableState);
         const subjectId = fullyQualifiedId(subject);
         const space = getSpace(subject);
         invariant(space, 'Space not found');
         const intents = [];
 
-        const message = live(MessageType, {
+        const message = live(DataType.Message, {
           sender,
           created: new Date().toISOString(),
           blocks: [{ type: 'text', text }],
           // TODO(wittjosiah): Context based on attention.
           // context: context ? makeRef(context) : undefined,
         });
-        thread.messages.push(makeRef(message));
+        thread.messages.push(Ref.make(message));
 
-        if (state.drafts[subjectId]?.find((t) => t === thread)) {
+        const draft = state.drafts[subjectId]?.find((a) => a.id === anchor.id);
+        if (draft) {
           // Move draft to document.
           thread.status = 'active';
-          subject.threads ? subject.threads.push(makeRef(thread)) : (subject.threads = [makeRef(thread)]);
-          state.drafts[subjectId] = state.drafts[subjectId]?.filter(({ id }) => id !== thread.id);
+          // TODO(wittjosiah): This causes the thread to flash as it transitions from draft to db.
+          state.drafts[subjectId] = state.drafts[subjectId]?.filter((a) => a.id !== anchor.id);
+          intents.push(createIntent(SpaceAction.AddObject, { object: thread, target: space, hidden: true }));
+          intents.push(
+            createIntent(SpaceAction.AddRelation, {
+              space,
+              schema: AnchoredTo,
+              source: thread,
+              target: subject,
+              fields: { anchor: draft.anchor },
+            }),
+          );
           intents.push(
             createIntent(ObservabilityAction.SendEvent, {
               name: 'threads.create',
@@ -215,7 +235,8 @@ export default (context: PluginsContext) =>
     }),
     createResolver({
       intent: ThreadAction.DeleteMessage,
-      resolve: ({ subject, thread, messageId, message, messageIndex }, undo) => {
+      resolve: ({ subject, anchor, messageId, message, messageIndex }, undo) => {
+        const thread = anchor[RelationSourceId] as ThreadType;
         const space = getSpace(subject);
         invariant(space, 'Space not found');
 
@@ -229,7 +250,7 @@ export default (context: PluginsContext) =>
           if (messageIndex === 0 && thread.messages.length === 1) {
             // If the message is the only message in the thread, delete the thread.
             return {
-              intents: [createIntent(ThreadAction.Delete, { subject, thread })],
+              intents: [createIntent(ThreadAction.Delete, { subject, anchor })],
             };
           } else {
             thread.messages.splice(messageIndex, 1);
@@ -256,7 +277,7 @@ export default (context: PluginsContext) =>
             return;
           }
 
-          thread.messages.splice(messageIndex, 0, makeRef(message));
+          thread.messages.splice(messageIndex, 0, Ref.make(message));
           return {
             intents: [
               createIntent(ObservabilityAction.SendEvent, {

package/src/capabilities/markdown.ts

@@ -2,17 +2,67 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { EditorView } from '@codemirror/view';
+
+import { Capabilities, contributes, createIntent, type PluginContext } 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 { ThreadCapabilities } from './capabilities';
 import { threads } from '../extensions';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(MarkdownCapabilities.Extensions, [
     ({ document: doc }) => {
-      const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
-      const { state } = context.requestCapability(ThreadCapabilities.MutableState);
+      const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+      const { state } = context.getCapability(ThreadCapabilities.MutableState);
       return threads(state, doc, dispatch);
     },
+    ({ document: doc }) => {
+      const { state } = context.getCapability(ThreadCapabilities.MutableState);
+
+      return EditorView.updateListener.of((update) => {
+        if (update.docChanged || update.selectionSet) {
+          state.toolbar[fullyQualifiedId(doc)] = selectionOverlapsComment(update.state);
+        }
+      });
+    },
+    ({ document: doc }) => {
+      const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+      const id = fullyQualifiedId(doc);
+
+      return EditorView.updateListener.of((update) => {
+        update.transactions.forEach((transaction) => {
+          transaction.effects.forEach(async (effect) => {
+            if (effect.is(commentClickedEffect)) {
+              void dispatch(
+                createIntent(DeckAction.ChangeCompanion, {
+                  primary: id,
+                  companion: `${id}${ATTENDABLE_PATH_SEPARATOR}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;
+};