@dxos/plugin-thread 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,7 +20,13 @@
     "#hooks": "./src/hooks/index.ts",
     "#meta": "./src/meta.ts",
     "#operations": "./src/operations/index.ts",
+    "#plugin": {
+      "browser": "./src/ThreadPlugin.tsx",
+      "node": "./src/ThreadPlugin.node.ts",
+      "default": "./src/ThreadPlugin.tsx"
+    },
     "#testing": "./src/testing/index.ts",
+    "#translations": "./src/translations.ts",
     "#types": "./src/types/index.ts"
   },
   "exports": {
@@ -42,6 +48,12 @@
       "node": "./dist/lib/node-esm/operations/index.mjs",
       "types": "./dist/types/src/operations/index.d.ts"
     },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
+    },
     "./types": {
       "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
@@ -50,19 +62,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "blueprints": [
-        "dist/types/src/blueprints/index.d.ts"
-      ],
-      "operations": [
-        "dist/types/src/operations/index.d.ts"
-      ],
-      "types": [
-        "dist/types/src/types/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -82,50 +81,49 @@
     "md5-hex": "5.0.0",
     "react-resize-detector": "^11.0.1",
     "wavefile": "^11.0.0",
-    "@dxos/app-framework": "0.8.4-main.9be5663bfe",
-    "@dxos/app-toolkit": "0.8.4-main.9be5663bfe",
-    "@dxos/assistant": "0.8.4-main.9be5663bfe",
-    "@dxos/blueprints": "0.8.4-main.9be5663bfe",
-    "@dxos/context": "0.8.4-main.9be5663bfe",
-    "@dxos/async": "0.8.4-main.9be5663bfe",
-    "@dxos/codec-protobuf": "0.8.4-main.9be5663bfe",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/display-name": "0.8.4-main.9be5663bfe",
-    "@dxos/devtools": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-db": "0.8.4-main.9be5663bfe",
-    "@dxos/effect": "0.8.4-main.9be5663bfe",
-    "@dxos/echo-react": "0.8.4-main.9be5663bfe",
-    "@dxos/functions": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe",
-    "@dxos/operation": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-client": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/keys": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-deck": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-graph": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-markdown": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-settings": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-space": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-observability": "0.8.4-main.9be5663bfe",
-    "@dxos/protocols": "0.8.4-main.9be5663bfe",
-    "@dxos/react-client": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-attention": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-dnd": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-form": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-editor": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-mosaic": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-stack": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-sfx": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-tabs": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.9be5663bfe",
-    "@dxos/schema": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-thread": "0.8.4-main.9be5663bfe",
-    "@dxos/types": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-editor": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-menu": "0.8.4-main.9be5663bfe"
+    "@dxos/app-toolkit": "0.8.4-main.abd8ff62ef",
+    "@dxos/assistant": "0.8.4-main.abd8ff62ef",
+    "@dxos/app-framework": "0.8.4-main.abd8ff62ef",
+    "@dxos/async": "0.8.4-main.abd8ff62ef",
+    "@dxos/compute": "0.8.4-main.abd8ff62ef",
+    "@dxos/context": "0.8.4-main.abd8ff62ef",
+    "@dxos/devtools": "0.8.4-main.abd8ff62ef",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/display-name": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-db": "0.8.4-main.abd8ff62ef",
+    "@dxos/effect": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo-react": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/codec-protobuf": "0.8.4-main.abd8ff62ef",
+    "@dxos/keys": "0.8.4-main.abd8ff62ef",
+    "@dxos/operation": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-deck": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-graph": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-markdown": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-observability": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-settings": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-space": "0.8.4-main.abd8ff62ef",
+    "@dxos/protocols": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-attention": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-client": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-menu": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-mosaic": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-form": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-stack": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-sfx": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-tabs": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-dnd": "0.8.4-main.abd8ff62ef",
+    "@dxos/schema": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-editor": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-thread": "0.8.4-main.abd8ff62ef",
+    "@dxos/types": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -135,13 +133,13 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/plugin-testing": "0.8.4-main.9be5663bfe",
-    "@dxos/plugin-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/plugin-testing": "0.8.4-main.abd8ff62ef",
+    "@dxos/plugin-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -149,8 +147,8 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

package/src/ThreadPlugin.node.ts

@@ -0,0 +1,84 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+
+import { Capability, Plugin } from '@dxos/app-framework';
+import { AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Annotation, Ref, Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
+import { SpaceCapabilities, SpaceEvents, type CreateObject } from '@dxos/plugin-space/types';
+import { AnchoredTo, Channel, Message, Thread } from '@dxos/types';
+
+import { AppGraphBuilder, BlueprintDefinition, OperationHandler, UndoMappings } from '#capabilities';
+import { THREAD_ITEM, meta } from '#meta';
+import { ThreadOperation } from '#operations';
+
+export const ThreadPlugin = Plugin.define(meta).pipe(
+  AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
+  AppPlugin.addBlueprintDefinitionModule({ activate: BlueprintDefinition }),
+  AppPlugin.addMetadataModule({
+    metadata: [
+      {
+        id: Type.getTypename(Channel.Channel),
+        metadata: {
+          icon: Annotation.IconAnnotation.get(Channel.Channel).pipe(Option.getOrThrow).icon,
+          iconHue: Annotation.IconAnnotation.get(Channel.Channel).pipe(Option.getOrThrow).hue ?? 'white',
+          createObject: ((props, options) =>
+            Effect.gen(function* () {
+              const object = Channel.make(props);
+              return yield* Operation.invoke(SpaceOperation.AddObject, {
+                object,
+                target: options.target,
+                hidden: true,
+                targetNodeId: options.targetNodeId,
+              });
+            })) satisfies CreateObject,
+        },
+      },
+      {
+        id: Type.getTypename(Thread.Thread),
+        metadata: {
+          // TODO(wittjosiah): Move out of metadata.
+          loadReferences: async (thread: Thread.Thread) => await Ref.Array.loadAll(thread.messages ?? []),
+        },
+      },
+      {
+        id: THREAD_ITEM,
+        metadata: {
+          parse: (item: Thread.Thread, type: string) => {
+            switch (type) {
+              case 'node':
+                return { id: item.id, label: item.name, data: item };
+              case 'object':
+                return item;
+              case 'view-object':
+                return { id: `${item.id}-view`, object: item };
+            }
+          },
+        },
+      },
+    ],
+  }),
+  AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
+  AppPlugin.addSchemaModule({
+    schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Thread.Thread],
+  }),
+  Plugin.addModule({
+    id: 'on-space-created',
+    activatesOn: SpaceEvents.SpaceCreated,
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(SpaceCapabilities.OnCreateSpace, (params) =>
+          Operation.invoke(ThreadOperation.OnCreateSpace, params),
+        ),
+      ),
+  }),
+  Plugin.make,
+);
+
+export default ThreadPlugin;

package/src/ThreadPlugin.test.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { AppActivationEvents } from '@dxos/app-toolkit';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { createComposerTestApp } from '@dxos/plugin-testing/harness';
+
+import { ThreadPlugin } from '#plugin';
+
+import { meta } from './meta';
+
+const moduleId = (name: string) => `${meta.id}.module.${name}`;
+
+describe('ThreadPlugin', () => {
+  test('modules activate on the expected events', async ({ expect }) => {
+    await using harness = await createComposerTestApp({
+      plugins: [ClientPlugin({}), ThreadPlugin()],
+    });
+
+    // After autoStart: AppGraphBuilder, metadata, schema, OperationHandler, UndoMappings all auto-cascade.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('AppGraphBuilder'), moduleId('metadata'), moduleId('schema')]),
+    );
+
+    // SetupArtifactDefinition is fired by AssistantPlugin, which can't be included here due to a workspace cycle.
+    await harness.fire(AppActivationEvents.SetupArtifactDefinition);
+    expect(harness.manager.getActive()).toContain(moduleId('BlueprintDefinition'));
+
+    // Operation handlers auto-cascade from OperationPlugin.
+    expect(harness.manager.getActive()).toEqual(
+      expect.arrayContaining([moduleId('OperationHandler'), moduleId('UndoMappings')]),
+    );
+  });
+});

package/src/ThreadPlugin.tsx

@@ -7,14 +7,14 @@ import * as Option from 'effect/Option';
 
 import { Capability, Plugin } from '@dxos/app-framework';
 import { AppActivationEvents, AppPlugin } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { Annotation, Ref, Type } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
 import { ClientEvents } from '@dxos/plugin-client/types';
-import { MarkdownEvents } from '@dxos/plugin-markdown';
+import { MarkdownEvents } from '@dxos/plugin-markdown/types';
 import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { SpaceCapabilities, SpaceEvents, type CreateObject } from '@dxos/plugin-space/types';
-import { translations as threadTranslations } from '@dxos/react-ui-thread';
-import { AnchoredTo, Message, Thread } from '@dxos/types';
+import { translations as threadTranslations } from '@dxos/react-ui-thread/translations';
+import { AnchoredTo, Channel, Message, Thread } from '@dxos/types';
 
 import {
   AppGraphBuilder,
@@ -29,9 +29,7 @@ import {
 } from '#capabilities';
 import { THREAD_ITEM, meta } from '#meta';
 import { ThreadOperation } from '#operations';
-import { Channel } from '#types';
-
-import { translations } from './translations';
+import { translations } from '#translations';
 
 // TODO(Zan): Every instance of `cursor` should be replaced with `anchor`.
 //  NOTE(burdon): Review/discuss CursorConverter semantics.
@@ -86,7 +84,7 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
     ],
   }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
-  AppPlugin.addOperationHandlerModule({ id: 'undo-mappings', activate: UndoMappings }),
+  AppPlugin.addUndoMappingsModule({ activate: UndoMappings }),
   AppPlugin.addReactRootModule({ activate: ReactRoot }),
   AppPlugin.addSchemaModule({
     schema: [AnchoredTo.AnchoredTo, Channel.Channel, Message.Message, Thread.Thread],
@@ -129,3 +127,5 @@ export const ThreadPlugin = Plugin.define(meta).pipe(
   }),
   Plugin.make,
 );
+
+export default ThreadPlugin;

package/src/blueprints/thread-blueprint.ts

@@ -2,8 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type AppCapabilities } from '@dxos/app-toolkit';
-import { Blueprint, Template } from '@dxos/blueprints';
+import { Blueprint, Template } from '@dxos/compute';
 import { trim } from '@dxos/util';
 
 import { ThreadOperation } from '#operations';
@@ -29,7 +28,7 @@ const make = () =>
     }),
   });
 
-const blueprint: AppCapabilities.BlueprintDefinition = {
+const blueprint: Blueprint.Definition = {
   key: BLUEPRINT_KEY,
   make,
 };

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

@@ -547,7 +547,9 @@ const waitForTransceiverToSendData = async (ctx: Context, transceiver: RTCRtpTra
   ctx.onDispose(() => waitForData.throw(new Error('Transceiver was closed')));
 
   const checkStats = async () => {
-    if (ctx.disposed) return;
+    if (ctx.disposed) {
+      return;
+    }
 
     try {
       const stats = await transceiver.sender.getStats();

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

@@ -74,7 +74,9 @@ export const createInaudibleAudioStreamTrack = async ({ ctx }: { ctx: Context })
 
   let oscillatorStarted = false;
   const ensureOscillatorStarted = () => {
-    if (oscillatorStarted) return;
+    if (oscillatorStarted) {
+      return;
+    }
     oscillator.start();
     oscillatorStarted = true;
   };

package/src/calls-service.stories.tsx

@@ -12,7 +12,7 @@ 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 { JsonHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { withTheme } from '@dxos/react-ui/testing';
 
 const testVideo = new URL('../testing/video.mp4', import.meta.url).href;
@@ -167,7 +167,7 @@ const DefaultStory = ({ source }: DefaultStoryProps) => {
           Re-pull video
         </Button>
       </div>
-      <Json.Data data={metrics} />
+      <JsonHighlighter data={metrics} />
     </div>
   );
 };
@@ -209,7 +209,7 @@ export const InaudibleAudioStreamTrack = {
 
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json.Data data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );
@@ -222,7 +222,7 @@ export const BlackVideoStreamTrack = {
     const { rePullTrack, metrics } = pushAndPullTrack(videoStreamTrack);
     return (
       <div className='flex flex-col gap-4 items-center'>
-        <Json.Data data={metrics} />
+        <JsonHighlighter data={metrics} />
         <Button onClick={rePullTrack}>Re-pull audio</Button>
       </div>
     );

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

@@ -8,16 +8,17 @@ import * as Option from 'effect/Option';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities, AppNode } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
 import { Obj } from '@dxos/echo';
-import { Operation } from '@dxos/operation';
 import { AttentionCapabilities } from '@dxos/plugin-attention/types';
 import { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';
 import { linkedSegment } from '@dxos/react-ui-attention';
 import { type SelectionManager, type SelectionMode, defaultSelection } from '@dxos/react-ui-attention';
+import { Channel } from '@dxos/types';
 
 import { meta } from '#meta';
 import { ThreadOperation } from '#operations';
-import { Channel, ThreadCapabilities, type ThreadState } from '#types';
+import { ThreadCapabilities, type ThreadState } from '#types';
 
 import { getAnchor } from '../util';
 

package/src/capabilities/blueprint-definition.ts

@@ -6,6 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
 import { ThreadBlueprint } from '#blueprints';
 

package/src/capabilities/index.ts

@@ -3,7 +3,8 @@
 //
 
 import { Capability } from '@dxos/app-framework';
-import { OperationHandlerSet } from '@dxos/operation';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
 export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));

package/src/capabilities/markdown.ts

@@ -6,8 +6,8 @@ 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 { LayoutOperation } from '@dxos/app-toolkit';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown/types';
 import { linkedSegment } from '@dxos/react-ui-attention';
 import { type EditorState, commentClickedEffect, commentsState, documentId, overlap } from '@dxos/ui-editor';
 
@@ -28,7 +28,9 @@ export default Capability.makeModule(
         return threads({ registry, stateAtom }, doc, invokePromise);
       },
       ({ document: doc }) => {
-        if (!doc) return [];
+        if (!doc) {
+          return [];
+        }
         const registry = capabilities.get(Capabilities.AtomRegistry);
         const stateAtom = capabilities.get(ThreadCapabilities.State);
 
@@ -45,15 +47,17 @@ export default Capability.makeModule(
         });
       },
       ({ document: doc }) => {
-        if (!doc) return [];
+        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'),
+                void invokePromise(LayoutOperation.UpdateCompanion, {
+                  subject: linkedSegment('comments'),
                 });
               }
             });

package/src/capabilities/operation-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
 import { ThreadOperationHandlerSet } from '#operations';
 

package/src/capabilities/react-surface.tsx

@@ -10,62 +10,69 @@ import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { getSpace } from '@dxos/react-client/echo';
-import { Thread } from '@dxos/types';
+import { Channel, Thread } from '@dxos/types';
 
 import { ThreadSettings } from '#components';
-import { CallDebugPanel, CallSidebar, ChannelContainer, ChatContainer, ThreadCompanion } from '#containers';
+import {
+  CallDebugPanel,
+  CallSidebar,
+  ChannelChat,
+  ChannelContainer,
+  ThreadCompanion,
+  ThreadContainer,
+} from '#containers';
 import { meta } from '#meta';
-import { Channel, ThreadCapabilities, type Settings } from '#types';
+import { ThreadCapabilities, type Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'channel',
-        role: 'article',
-        filter: AppSurface.objectArticle(Channel.Channel),
+        filter: AppSurface.object(AppSurface.Article, Channel.Channel),
         component: ({ data: { subject, attendableId }, role }) => (
           <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
         ),
       }),
       Surface.create({
         id: 'chat-companion',
-        role: 'article',
-        filter: AppSurface.and(AppSurface.literalArticle('chat'), AppSurface.companionArticle(Channel.Channel)),
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'chat'),
+          AppSurface.companion(AppSurface.Article, Channel.Channel),
+        ),
         component: ({ data: { companionTo: channel } }) => {
           const space = getSpace(channel);
-          const thread = channel.defaultThread.target;
-          if (!space || !thread) {
+          if (!space) {
             return null;
           }
 
-          return <ChatContainer thread={thread} space={space} />;
+          return <ChannelChat channel={channel} space={space} />;
         },
       }),
       Surface.create({
         id: 'thread',
-        role: 'article',
-        filter: AppSurface.objectArticle(Thread.Thread),
+        filter: AppSurface.object(AppSurface.Article, Thread.Thread),
         component: ({ data: { subject } }) => {
           const space = getSpace(subject);
           if (!space || !subject) {
             return null;
           }
 
-          return <ChatContainer thread={subject} space={space} />;
+          return <ThreadContainer thread={subject} space={space} />;
         },
       }),
       Surface.create({
         id: 'comments',
-        role: 'article',
-        filter: AppSurface.and(AppSurface.literalArticle('comments'), AppSurface.companionArticle()),
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'comments'),
+          AppSurface.companion(AppSurface.Article),
+        ),
         // TODO(wittjosiah): This isn't scrolling properly in a plank.
         component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
       }),
       Surface.create({
         id: 'plugin-settings',
-        role: 'article',
-        filter: AppSurface.settingsArticle(meta.id),
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
         component: ({ data: { subject } }) => {
           const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
           return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;

package/src/components/Call/Call.tsx

@@ -3,7 +3,7 @@
 //
 
 import { useAtomValue } from '@effect-atom/atom-react';
-import React, { type FC, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren } from 'react';
 
 import { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -21,7 +21,7 @@ import { Toolbar, type ToolbarProps } from './Toolbar';
 
 type CallRootProps = PropsWithChildren<ThemedClassName>;
 
-const CallRoot: FC<CallRootProps> = ({ children }) => {
+const CallRoot = ({ children }: CallRootProps) => {
   return <div className='relative dx-container flex flex-col'>{children}</div>;
 };
 
@@ -33,7 +33,7 @@ CallRoot.displayName = 'CallRoot';
 
 type CallAudioProps = {};
 
-const CallAudio: FC<CallAudioProps> = () => {
+const CallAudio = (_props: CallAudioProps) => {
   const call = useCapability(ThreadCapabilities.CallManager);
   const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
 
@@ -50,7 +50,7 @@ type CallGridProps = {
   fullscreen?: boolean;
 };
 
-const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
+const CallGrid = ({ fullscreen }: CallGridProps) => {
   const debug = useDebugMode();
   const call = useCapability(ThreadCapabilities.CallManager);
   const self = useAtomValue(call.selfAtom);
@@ -71,7 +71,7 @@ CallGrid.displayName = 'CallGrid';
 
 type CallToolbarProps = Pick<ToolbarProps, 'channel' | 'onLeave'>;
 
-const CallToolbar: FC<CallToolbarProps> = (props) => {
+const CallToolbar = (props: CallToolbarProps) => {
   return (
     <div className='absolute bottom-0 left-0 right-0 flex justify-center'>
       <Toolbar isInRoom {...props} />