@dxos/plugin-thread 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/src/capabilities/agent-runner.ts

@@ -0,0 +1,291 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as LanguageModel from '@effect/ai/LanguageModel';
+import * as Tool from '@effect/ai/Tool';
+import * as Toolkit from '@effect/ai/Toolkit';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as Schema from 'effect/Schema';
+
+import { AiPreprocessor, AiService } from '@dxos/ai';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Filter, Obj, Ref, Relation } from '@dxos/echo';
+import { createDocAccessor, getRangeFromCursor, toCursorRange, updateText } from '@dxos/echo-db';
+import { log } from '@dxos/log';
+import { Markdown } from '@dxos/plugin-markdown';
+import { AnchoredTo, Message } from '@dxos/types';
+import { trim } from '@dxos/util';
+
+import { AgentIdentity, ThreadCapabilities } from '../types';
+
+const DEFAULT_MODEL = '@anthropic/claude-sonnet-4-5';
+
+const baseInstructions = trim`
+  You are a helpful assistant participating in a comment thread on a document.
+  Read the document and the conversation history; the user's requests usually
+  refer to the document content.
+
+  When the user asks you to MODIFY the document (translate, rewrite, edit, fix,
+  refactor, etc.) call ONE of the edit tools. Do NOT paste the new content into
+  chat — always use the tool.
+
+  - If the thread has an anchored selection (shown in <selection>...</selection>
+    below), use \`editAnchoredRange\` with ONLY the replacement text for that
+    span. Leave the rest of the document untouched.
+  - If there is no anchored selection, use \`updateDocument\` with the FULL new
+    markdown content.
+
+  AFTER calling an edit tool you MUST also produce a chat reply that:
+    1. States in one line what you changed (e.g. "Translated the selection to
+       Japanese.");
+    2. Optionally adds one or two sentences explaining notable choices,
+       caveats, or suggesting a follow-up. Keep the whole reply under 60 words.
+    3. Does NOT repeat the new document content — it's already shown in the
+       editor on the left.
+
+  When the user asks a QUESTION (or just chats), reply in plain text under
+  80 words and do not call any edit tool.
+
+  Do not address the user as 'user'; use their name if known. Never call yourself.
+`;
+
+const EditAnchoredRangeTool = Tool.make('editAnchoredRange', {
+  description:
+    'Replace the text of the anchored selection in the markdown document. Call this for in-place edits when a <selection> is provided.',
+  parameters: {
+    replacement: Schema.String.annotations({
+      description: 'The new text for the anchored range. Only this span will be replaced.',
+    }),
+  },
+  success: Schema.String,
+});
+
+const UpdateDocumentTool = Tool.make('updateDocument', {
+  description:
+    'Replace the entire markdown content of the document. Call this for in-place edits when there is no anchored selection.',
+  parameters: {
+    content: Schema.String.annotations({
+      description: 'The full new markdown content of the document.',
+    }),
+  },
+  success: Schema.String,
+});
+
+type EditTarget =
+  | {
+      kind: 'anchored';
+      text: Obj.Any;
+      snippet: string;
+      from: number;
+      to: number;
+      relation: AnchoredTo.AnchoredTo;
+    }
+  | { kind: 'document'; text: Obj.Any }
+  | { kind: 'none' };
+
+/**
+ * Resolve the agent's edit target for this turn:
+ *  - 'anchored' when the thread is anchored to a span of the doc — agent edits
+ *    only that span via `editAnchoredRange`.
+ *  - 'document' when the subject is a Markdown.Document but the thread has no
+ *    anchor — agent may replace the whole doc via `updateDocument`.
+ *  - 'none' when the subject isn't editable text — no edit tools wired.
+ */
+const resolveEditTarget = (thread: Obj.Any, subject: Obj.Any): EditTarget => {
+  if (!Obj.instanceOf(Markdown.Document, subject)) {
+    return { kind: 'none' };
+  }
+  const text = subject.content?.target;
+  if (!text) {
+    return { kind: 'none' };
+  }
+  const db = Obj.getDatabase(thread);
+  if (!db) {
+    return { kind: 'document', text };
+  }
+  const relations = db.query(Filter.type(AnchoredTo.AnchoredTo)).runSync();
+  const ours = relations.find(
+    (relation: AnchoredTo.AnchoredTo) =>
+      Relation.getSource(relation) === thread && Relation.getTarget(relation) === subject,
+  );
+  if (!ours?.anchor) {
+    return { kind: 'document', text };
+  }
+  try {
+    const accessor = createDocAccessor(text, ['content']);
+    const range = getRangeFromCursor(accessor, ours.anchor);
+    if (!range || range.start === range.end) {
+      return { kind: 'document', text };
+    }
+    const content = (text as unknown as { content: string }).content ?? '';
+    return {
+      kind: 'anchored',
+      text,
+      from: range.start,
+      to: range.end,
+      snippet: content.slice(range.start, range.end),
+      relation: ours,
+    };
+  } catch (err) {
+    log.warn('failed to resolve anchored range; falling back to whole-document edit', { error: err });
+    return { kind: 'document', text };
+  }
+};
+
+/**
+ * Build the system prompt for a turn. Inlines the doc content and, when the
+ * thread is anchored, the highlighted snippet so the agent can target just
+ * that span.
+ */
+const buildInstructions = (subject: Obj.Any, target: EditTarget): string => {
+  if (!Obj.instanceOf(Markdown.Document, subject)) {
+    return baseInstructions;
+  }
+  const content = subject.content?.target?.content ?? '';
+  if (!content) {
+    return baseInstructions;
+  }
+  const selectionBlock = target.kind === 'anchored' ? `\n\n<selection>\n${target.snippet}\n</selection>` : '';
+  return trim`
+    ${baseInstructions}
+
+    <document name="${subject.name ?? 'untitled'}">
+    ${content}
+    </document>${selectionBlock}
+  `;
+};
+
+/**
+ * Normalises messages for the LLM prompt: user-authored messages in comment
+ * threads carry no explicit role (only assistant messages do), but the prompt
+ * preprocessor switches on `role` and drops anything that isn't 'user' or
+ * 'assistant'. Stamp `role: 'user'` on every non-assistant turn before
+ * preprocessing.
+ */
+const normalizeRoles = (messages: readonly Message.Message[]): Message.Message[] =>
+  messages.map((message) =>
+    message.sender.role === 'assistant'
+      ? message
+      : { ...message, sender: { ...message.sender, role: 'user' as const } },
+  );
+
+/**
+ * Default AgentRunner implementation. One-shot LLM call per scheduled turn —
+ * loads the thread, builds a prompt from the message history, generates a
+ * reply via `LanguageModel.generateText`, and appends the response as an
+ * assistant message on the same thread.
+ *
+ * Edit tools (`editAnchoredRange`, `updateDocument`) are wired per turn based
+ * on whether the thread has an anchored range. Splicing uses `updateText`
+ * (Automerge-diff based) so cursors on other comment threads stay valid.
+ *
+ * The `AiServiceLayer` capability is resolved per turn (not at module
+ * activation) so plugin order doesn't matter for live wiring. When no host
+ * has contributed an `AppCapabilities.AiServiceLayer`, the runner logs a
+ * warning and returns; storybook stub paths contribute their own
+ * `AgentRunner` earlier in plugin order to short-circuit this module entirely.
+ */
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const runner: ThreadCapabilities.AgentRunner = {
+      run: ({ thread, subject }) =>
+        Effect.gen(function* () {
+          const aiServiceLayers = yield* Capability.getAll(AppCapabilities.AiServiceLayer);
+          const aiServiceLayer = aiServiceLayers[0];
+          if (!aiServiceLayer) {
+            log.warn('comment-thread agent runner: no AiServiceLayer contributed; skipping turn');
+            return;
+          }
+          const identity = yield* Capability.get(AgentIdentity);
+
+          // Load every referenced message into a plain Message.Message[].
+          const loaded = yield* Effect.forEach(
+            thread.messages,
+            (messageRef) => Effect.promise(() => messageRef.load()),
+            { concurrency: 'unbounded' },
+          );
+          const history = normalizeRoles(loaded);
+
+          const target = resolveEditTarget(thread, subject);
+          const prompt = yield* AiPreprocessor.preprocessPrompt(history, {
+            system: buildInstructions(subject, target),
+          });
+
+          // Capture which edit tool fired so we can synthesize a fallback chat
+          // ack when the model elides the post-tool message.
+          let editOutcome: 'anchored' | 'document' | undefined;
+
+          const toolkit = Toolkit.make(EditAnchoredRangeTool, UpdateDocumentTool);
+          const toolkitLayer = toolkit.toLayer({
+            editAnchoredRange: ({ replacement }) =>
+              Effect.sync(() => {
+                if (target.kind !== 'anchored') {
+                  return 'No anchored selection on this thread; use updateDocument instead.';
+                }
+                const original = (target.text as unknown as { content: string }).content ?? '';
+                const next = original.slice(0, target.from) + replacement + original.slice(target.to);
+                updateText(target.text, ['content'], next);
+
+                // Cursor at `to` (left-associated) can collapse to `from` after a
+                // delete-and-insert at that range, leaving the comment's anchor
+                // pointing at a zero-width span. Rewrite AnchoredTo.anchor to
+                // span the newly-inserted text so the editor marker continues
+                // to highlight the replaced range.
+                const newTo = target.from + replacement.length;
+                const accessor = createDocAccessor(target.text, ['content']);
+                const newAnchor = toCursorRange(accessor, target.from, newTo);
+                Relation.update(target.relation, (relation) => {
+                  (relation as Relation.Mutable<AnchoredTo.AnchoredTo>).anchor = newAnchor;
+                });
+                editOutcome = 'anchored';
+                return 'Anchored range replaced.';
+              }),
+            updateDocument: ({ content }) =>
+              Effect.sync(() => {
+                if (target.kind === 'none') {
+                  return 'No editable document in scope.';
+                }
+                updateText(target.text, ['content'], content);
+                editOutcome = 'document';
+                return 'Document updated.';
+              }),
+          });
+
+          const response = yield* LanguageModel.generateText({ prompt, toolkit }).pipe(
+            Effect.scoped,
+            Effect.provide(AiService.model(DEFAULT_MODEL).pipe(Layer.provide(aiServiceLayer))),
+            Effect.provide(toolkitLayer),
+          );
+
+          // The chat message defaults to whatever the model returned, but when
+          // the model elided its post-tool reply (some providers do) fall back
+          // to a synthesized ack so the thread always reflects that something
+          // happened.
+          const fallbackByOutcome: Record<'anchored' | 'document', string> = {
+            anchored: 'Updated the highlighted selection.',
+            document: 'Updated the document.',
+          };
+          const text =
+            response.text.trim().length > 0 ? response.text : editOutcome ? fallbackByOutcome[editOutcome] : '';
+          if (text.length === 0) {
+            // Nothing to say and nothing was edited — don't post a hollow bubble.
+            return;
+          }
+
+          const reply = Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: { role: 'assistant', name: identity.name, identityDid: identity.identityDid },
+            blocks: [{ _tag: 'text', text }],
+          });
+          Obj.update(thread, (thread) => {
+            (thread.messages as Ref.Ref<Message.Message>[]).push(Ref.make(reply));
+          });
+        }),
+    };
+
+    return Capability.contributes(ThreadCapabilities.AgentRunner, runner);
+  }),
+);

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

@@ -0,0 +1,143 @@
+//
+// 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, AppNode } from '@dxos/app-toolkit';
+import { Operation } from '@dxos/compute';
+import { Obj } from '@dxos/echo';
+import { AttentionCapabilities } from '@dxos/plugin-attention';
+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 '#types';
+import { ThreadCapabilities, type ThreadState } from '#types';
+
+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)),
+);
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const capabilities = yield* Capability.Service;
+
+    const getCommentConfig = (typename: string) =>
+      capabilities.getAll(AppCapabilities.CommentConfig).find(({ id }) => id === typename);
+
+    const extensions = yield* Effect.all([
+      GraphBuilder.createExtension({
+        id: 'commentsCompanion',
+        match: (node) => {
+          if (!Obj.isObject(node.data) || Option.isNone(whenCommentableObject(node))) {
+            return Option.none();
+          }
+          const commentConfig = getCommentConfig(Obj.getTypename(node.data)!);
+          return commentConfig ? Option.some(node) : Option.none();
+        },
+        connector: () =>
+          Effect.succeed([
+            AppNode.makeCompanion({
+              id: linkedSegment('comments'),
+              label: ['comments.label', { ns: meta.id }],
+              icon: 'ph--chat-text--regular',
+              data: 'comments',
+              position: 'first',
+            }),
+          ]),
+      }),
+      GraphBuilder.createExtension({
+        id: 'commentToolbar',
+        match: (node) => {
+          if (!Obj.isObject(node.data) || Option.isNone(whenCommentableObject(node))) {
+            return Option.none();
+          }
+          const commentConfig = getCommentConfig(Obj.getTypename(node.data)!);
+          return commentConfig ? Option.some(node) : Option.none();
+        },
+        actions: (matched, get) => {
+          const object = matched.data;
+          const objectUri = Obj.getURI(object);
+          const stateAtom = capabilities.atom(ThreadCapabilities.State);
+          const selectionManager = capabilities.get(AttentionCapabilities.Selection);
+          const commentConfig = getCommentConfig(Obj.getTypename(object)!)!;
+
+          const disabled = get(
+            commentDisabledFamily({
+              stateAtom,
+              selectionManager,
+              objectId: objectUri,
+              commentsType: commentConfig.comments,
+              selectionMode: commentConfig.selectionMode as SelectionMode | undefined,
+            }),
+          );
+
+          return Effect.succeed([
+            {
+              id: 'comment',
+              data: Effect.fnUntraced(function* () {
+                const config = getCommentConfig(Obj.getTypename(object)!)!;
+                const selection = selectionManager.getSelection(objectUri);
+                const anchor =
+                  (config.comments === 'anchored' ? getAnchor(selection) : undefined) ?? Date.now().toString();
+                const name = config.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/{blueprint-definition/blueprint-definition.ts → blueprint-definition.ts}

@@ -6,8 +6,10 @@ 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';
+import { ThreadBlueprint } from '#blueprints';
 
 const blueprintDefinition = Capability.makeModule<
   [],

package/src/capabilities/create-object.ts

@@ -0,0 +1,30 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { Type } from '@dxos/echo';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { Channel } from '@dxos/types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+      id: Type.getTypename(Channel.Channel),
+      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,
+          });
+        }),
+    });
+  }),
+);

package/src/capabilities/index.ts

@@ -2,13 +2,20 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './blueprint-definition';
-export * from './call-manager';
-export * from './markdown';
-export * from './operation-resolver';
-export * from './react-root';
-export * from './react-surface';
-export * from './repair';
-export * from './settings';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const AgentRunner = Capability.lazy('AgentRunner', () => import('./agent-runner'));
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Markdown = Capability.lazy('Markdown', () => import('./markdown'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const ThreadSettings = Capability.lazy('ThreadSettings', () => import('./settings'));
+export const ThreadState = Capability.lazy('ThreadState', () => import('./state'));
+export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/capabilities/{markdown/markdown.ts → markdown.ts}

@@ -6,13 +6,14 @@ import { EditorView } from '@codemirror/view';
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { Obj } from '@dxos/echo';
-import { ATTENDABLE_PATH_SEPARATOR, DeckOperation } from '@dxos/plugin-deck/types';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
-import { type EditorState, commentClickedEffect, commentsState, overlap } from '@dxos/ui-editor';
+import { linkedSegment } from '@dxos/react-ui-attention';
+import { type EditorState, commentClickedEffect, commentsState, documentId, overlap } from '@dxos/ui-editor';
 
-import { threads } from '../../extensions';
-import { ThreadCapabilities } from '../../types';
+import { ThreadCapabilities } from '#types';
+
+import { threads } from '../extensions';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -27,33 +28,36 @@ 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);
 
         return EditorView.updateListener.of((update) => {
           if (update.docChanged || update.selectionSet) {
-            const objectId = Obj.getDXN(doc).toString();
+            const id = update.state.facet(documentId);
             const overlaps = selectionOverlapsComment(update.state);
             const current = registry.get(stateAtom);
             registry.set(stateAtom, {
               ...current,
-              toolbar: { ...current.toolbar, [objectId]: overlaps },
+              toolbar: { ...current.toolbar, [id]: overlaps },
             });
           }
         });
       },
       ({ document: doc }) => {
-        if (!doc) return [];
+        if (!doc) {
+          return [];
+        }
         const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
-        const id = Obj.getDXN(doc).toString();
 
         return EditorView.updateListener.of((update) => {
           update.transactions.forEach((transaction) => {
             transaction.effects.forEach(async (effect) => {
               if (effect.is(commentClickedEffect)) {
-                void invokePromise(DeckOperation.ChangeCompanion, {
-                  companion: `${id}${ATTENDABLE_PATH_SEPARATOR}comments`,
+                void invokePromise(LayoutOperation.UpdateCompanion, {
+                  subject: linkedSegment('comments'),
                 });
               }
             });

package/src/capabilities/operation-handler.ts

@@ -0,0 +1,16 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+import { ThreadOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, ThreadOperationHandlerSet);
+  }),
+);

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { getSpace } from '@dxos/react-client/echo';
+import { Channel, Thread } from '@dxos/types';
+
+import { ThreadSettings } from '#components';
+import { ChannelChat, ChannelArticle, CommentsCompanion, ThreadContainer } from '#containers';
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'channel',
+        filter: AppSurface.object(AppSurface.Article, Channel.Channel),
+        component: ({ data: { subject, attendableId }, role }) => (
+          <ChannelArticle role={role} subject={subject} attendableId={attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'chatCompanion',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'chat'),
+          AppSurface.companion(AppSurface.Article, Channel.Channel),
+        ),
+        component: ({ data: { companionTo: channel } }) => {
+          const space = getSpace(channel);
+          if (!space) {
+            return null;
+          }
+
+          return <ChannelChat channel={channel} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'thread',
+        filter: AppSurface.object(AppSurface.Article, Thread.Thread),
+        component: ({ data: { subject } }) => {
+          const space = getSpace(subject);
+          if (!space || !subject) {
+            return null;
+          }
+
+          return <ThreadContainer thread={subject} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'comments',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'comments'),
+          AppSurface.companion(AppSurface.Article),
+        ),
+        // TODO(wittjosiah): This isn't scrolling properly in a plank.
+        component: ({ data }) => <CommentsCompanion attendableId={data.attendableId} subject={data.companionTo} />,
+      }),
+      Surface.create({
+        id: 'pluginSettings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+    ]),
+  ),
+);