@dxos/plugin-thread 0.8.4-main.3eb6e50203 → 0.8.4-main.422d1c7879

package/src/capabilities/index.ts

@@ -2,13 +2,19 @@
 // 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';
+import { OperationHandlerSet } from '@dxos/operation';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CallManager = Capability.lazy('CallManager', () => import('./call-manager'));
+export const Markdown = Capability.lazy('Markdown', () => import('./markdown'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));
+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* () {
@@ -33,12 +34,12 @@ export default Capability.makeModule(
 
         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 },
             });
           }
         });
@@ -46,15 +47,13 @@ export default Capability.makeModule(
       ({ document: doc }) => {
         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, {
-                  primary: id,
-                  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/operation';
+
+import { ThreadOperationHandlerSet } from '#operations';
+
+export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.OperationHandler, ThreadOperationHandlerSet);
+  }),
+);

package/src/capabilities/{react-root/react-root.tsx → react-root.tsx}

@@ -7,8 +7,8 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 
-import { Call } from '../../components';
-import { meta } from '../../meta';
+import { Call } from '#components';
+import { meta } from '#meta';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {

package/src/capabilities/{react-surface/react-surface.tsx → react-surface.tsx}

@@ -8,36 +8,31 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
-import { AppCapabilities } from '@dxos/app-toolkit';
-import { Obj, type Ref } from '@dxos/echo';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { getSpace } from '@dxos/react-client/echo';
 import { Thread } from '@dxos/types';
 
-import {
-  CallDebugPanel,
-  CallSidebar,
-  ChannelContainer,
-  ChatContainer,
-  ThreadCompanion,
-  ThreadSettings,
-} from '../../components';
-import { meta } from '../../meta';
-import { Channel, ThreadCapabilities, type ThreadSettingsProps } from '../../types';
+import { ThreadSettings } from '#components';
+import { CallDebugPanel, CallSidebar, ChannelContainer, ChatContainer, ThreadCompanion } from '#containers';
+import { meta } from '#meta';
+import { Channel, ThreadCapabilities, type Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
-        id: `${meta.id}/channel`,
-        role: 'article',
-        filter: (data): data is { subject: Channel.Channel } => Obj.instanceOf(Channel.Channel, data.subject),
-        component: ({ data: { subject }, role }) => <ChannelContainer role={role} subject={subject} />,
+        id: 'channel',
+        filter: AppSurface.object(AppSurface.Article, Channel.Channel),
+        component: ({ data: { subject, attendableId }, role }) => (
+          <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
+        ),
       }),
       Surface.create({
-        id: `${meta.id}/chat-companion`,
-        role: 'article',
-        filter: (data): data is { companionTo: Channel.Channel; subject: 'chat' } =>
-          Obj.instanceOf(Channel.Channel, data.companionTo) && data.subject === 'chat',
+        id: 'chat-companion',
+        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;
@@ -49,9 +44,8 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: `${meta.id}/thread`,
-        role: 'article',
-        filter: (data): data is { subject: Thread.Thread } => Obj.instanceOf(Thread.Thread, data.subject),
+        id: 'thread',
+        filter: AppSurface.object(AppSurface.Article, Thread.Thread),
         component: ({ data: { subject } }) => {
           const space = getSpace(subject);
           if (!space || !subject) {
@@ -62,30 +56,29 @@ export default Capability.makeModule(() =>
         },
       }),
       Surface.create({
-        id: `${meta.id}/comments`,
-        role: 'article',
-        filter: (data): data is { companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
-          data.subject === 'comments' && Obj.isObject(data.companionTo),
+        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 }) => <ThreadCompanion subject={data.companionTo} />,
+        component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
       }),
       Surface.create({
-        id: `${meta.id}/plugin-settings`,
-        role: 'article',
-        filter: (data): data is { subject: AppCapabilities.Settings } =>
-          AppCapabilities.isSettings(data.subject) && data.subject.prefix === meta.id,
+        id: 'plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
         component: ({ data: { subject } }) => {
-          const { settings, updateSettings } = useSettingsState<ThreadSettingsProps>(subject.atom);
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
           return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
         },
       }),
       Surface.create({
-        id: `${meta.id}/assistant`,
+        id: 'assistant',
         role: 'deck-companion--active-call',
         component: () => <CallSidebar />,
       }),
       Surface.create({
-        id: `${meta.id}/devtools-overview`,
+        id: 'devtools-overview',
         role: 'devtools-overview',
         component: () => {
           const call = useCapability(ThreadCapabilities.CallManager);

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

@@ -8,15 +8,16 @@ import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
-import { meta } from '../../meta';
-import { ThreadSettingsSchema } from '../../types';
-import { ThreadCapabilities } from '../../types/capabilities';
+import { meta } from '#meta';
+import { Settings } from '#types';
+
+import { ThreadCapabilities } from '../types/capabilities';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
       key: meta.id,
-      schema: ThreadSettingsSchema,
+      schema: Settings.Settings,
       defaultValue: () => ({}),
     });
 
@@ -26,7 +27,7 @@ export default Capability.makeModule(() =>
       // Contribute to common settings for UI discovery.
       Capability.contributes(AppCapabilities.Settings, {
         prefix: meta.id,
-        schema: ThreadSettingsSchema,
+        schema: Settings.Settings,
         atom: settingsAtom,
       }),
     ];

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

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 
-import { ThreadCapabilities, type ThreadState, type ViewStore } from '../../types';
+import { ThreadCapabilities, type ThreadState, type ViewStore } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {

package/src/capabilities/undo-mappings.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
+
+import { meta } from '#meta';
+import { ThreadOperation } from '#operations';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(Capabilities.UndoMapping, [
+      UndoMapping.make({
+        operation: ThreadOperation.Delete,
+        inverse: ThreadOperation.Restore,
+        deriveContext: (_input, output) => {
+          if (!output.thread || !output.anchor) {
+            return;
+          }
+          return {
+            thread: output.thread,
+            anchor: output.anchor,
+          };
+        },
+        message: ['thread-deleted.label', { ns: meta.id }],
+      }),
+      UndoMapping.make({
+        operation: ThreadOperation.DeleteMessage,
+        inverse: ThreadOperation.RestoreMessage,
+        deriveContext: (input, output) => {
+          if (!output.message || output.messageIndex === undefined) {
+            return;
+          }
+          return {
+            anchor: input.anchor,
+            message: output.message,
+            messageIndex: output.messageIndex,
+          };
+        },
+        message: ['message-deleted.label', { ns: meta.id }],
+      }),
+    ]);
+  }),
+);

package/src/components/Call/Call.tsx

@@ -8,11 +8,11 @@ import React, { type FC, type PropsWithChildren } from 'react';
 import { useCapability } from '@dxos/app-framework/ui';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { useDebugMode } from '../../hooks';
-import { ThreadCapabilities } from '../../types';
+import { useDebugMode } from '#hooks';
+import { ThreadCapabilities } from '#types';
+
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
-
 import { Toolbar, type ToolbarProps } from './Toolbar';
 
 //
@@ -22,7 +22,7 @@ import { Toolbar, type ToolbarProps } from './Toolbar';
 type CallRootProps = PropsWithChildren<ThemedClassName>;
 
 const CallRoot: FC<CallRootProps> = ({ children }) => {
-  return <div className='relative flex flex-col grow overflow-hidden'>{children}</div>;
+  return <div className='relative dx-container flex flex-col'>{children}</div>;
 };
 
 CallRoot.displayName = 'CallRoot';

package/src/components/Call/Toolbar.tsx

@@ -21,9 +21,9 @@ import {
 } from '@dxos/react-ui';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { ThreadCapabilities } from '../../types';
-import { type Channel } from '../../types';
+import { meta } from '#meta';
+import { ThreadCapabilities } from '#types';
+import { type Channel } from '#types';
 
 export type ToolbarProps = ThemedClassName<{
   channel?: Channel.Channel;
@@ -63,21 +63,20 @@ export const Toolbar = ({
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
         <ToggleButton
           active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
-              label: t('mic off'),
+              label: t('mic-off.button'),
               onClick: () => call.turnAudioOff(),
-              classNames: 'bg-callActive',
+              classNames: 'bg-call-active',
             },
             off: {
               icon: 'ph--microphone-slash--duotone',
-              label: t('mic on'),
+              label: t('mic-on.button'),
               onClick: () => call.turnAudioOn(),
-              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
@@ -86,20 +85,20 @@ export const Toolbar = ({
           state={{
             on: {
               icon: 'ph--video-camera--regular',
-              label: t('camera off'),
+              label: t('camera-off.button'),
               onClick: () => call.turnVideoOff(),
             },
             off: {
               icon: 'ph--video-camera-slash--duotone',
-              label: t('camera on'),
+              label: t('camera-on.button'),
               onClick: () => call.turnVideoOn(),
             },
           }}
         />
 
         {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued'>
-            <Icon icon='ph--users--regular' size={4} />
+          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
+            <Icon icon='ph--users--regular' />
             <div>{participants}</div>
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
@@ -112,12 +111,12 @@ export const Toolbar = ({
               state={{
                 on: {
                   icon: 'ph--monitor--regular',
-                  label: t('screenshare off'),
+                  label: t('screenshare-off.button'),
                   onClick: () => call.turnScreenshareOff(),
                 },
                 off: {
                   icon: 'ph--monitor-arrow-up--duotone',
-                  label: t('screenshare on'),
+                  label: t('screenshare-on.button'),
                   onClick: () => call.turnScreenshareOn(),
                 },
               }}
@@ -142,13 +141,12 @@ export const Toolbar = ({
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
-                  label: t('lower hand'),
+                  label: t('lower-hand.button'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
-                  label: t('raise hand'),
+                  label: t('raise-hand.button'),
                   onClick: () => call.setRaisedHand(true),
                 },
               }}
@@ -156,9 +154,19 @@ export const Toolbar = ({
           </>
         )}
         {joined ? (
-          <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
+          <IconButton
+            variant='destructive'
+            icon='ph--phone-x--regular'
+            label={t('leave-call.button')}
+            onClick={onLeave}
+          />
         ) : (
-          <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
+          <IconButton
+            variant='primary'
+            icon='ph--phone-incoming--regular'
+            label={t('join-call.button')}
+            onClick={onJoin}
+          />
         )}
       </NaturalToolbar.Root>
     </div>
@@ -183,7 +191,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/{Comments.stories.tsx → CommentsPanel/CommentsPanel.stories.tsx}

@@ -6,25 +6,24 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Query, Relation } from '@dxos/echo';
 import { TestSchema } from '@dxos/echo/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
-import { faker } from '@dxos/random';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { random } from '@dxos/random';
 import { useDatabase, useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { render } from '@dxos/storybook-utils';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { AnchoredTo, Message, Thread } from '@dxos/types';
 
-import { translations } from '../translations';
+import { createCommentThread, createProposalThread } from '../../testing/data';
+import { translations } from '../../translations';
+import { CommentsPanel } from './CommentsPanel';
 
-import { CommentsContainer } from './CommentsContainer';
-import { createCommentThread, createProposalThread } from './testing';
-
-faker.seed(1);
+random.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
@@ -54,28 +53,29 @@ const DefaultStory = () => {
   }, [identity, db]);
 
   if (!identity || !db || !anchors) {
-    return null;
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
   }
 
-  return <CommentsContainer anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/Comments',
-  render: render(DefaultStory),
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
   decorators: [
     withTheme(),
-    withLayout({ layout: 'column', scroll: true }),
+    withLayout({ layout: 'column' }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
         OperationPlugin(),
+        RuntimePlugin(),
         ClientPlugin({
           types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
           onClientInitialized: ({ client }) =>
             Effect.gen(function* () {
-              yield* Effect.promise(() => client.halo.createIdentity());
+              yield* initializeIdentity(client);
             }),
         }),
       ],

package/src/components/{CommentsContainer.tsx → CommentsPanel/CommentsPanel.tsx}

@@ -5,14 +5,14 @@
 import React, { useEffect } from 'react';
 
 import { Obj, Relation } from '@dxos/echo';
-import { Callout, Icon, Trans, useTranslation } from '@dxos/react-ui';
+import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo, type Thread } from '@dxos/types';
 
-import { meta } from '../meta';
+import { meta } from '#meta';
 
-import { CommentsThreadContainer, type CommentsThreadContainerProps } from './CommentsThreadContainer';
+import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
 
-export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor' | 'current'> & {
+export type CommentsPanelProps = Omit<CommentsThreadProps, 'anchor' | 'current'> & {
   anchors: AnchoredTo.AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
@@ -21,7 +21,7 @@ export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor'
 /**
  * Root container for collection of comment threads.
  */
-export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsContainerProps) => {
+export const CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsPanelProps) => {
   const { t } = useTranslation(meta.id);
 
   // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
@@ -29,7 +29,8 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
     ? anchors.filter((anchor) => !!Relation.getSource(anchor))
     : anchors.filter((anchor) => {
         const thread = Relation.getSource(anchor);
-        return thread && thread.status !== 'resolved';
+        // TODO(dmaretskyi): Do Obj.instanceOf check instead.
+        return thread && (thread as any).status !== 'resolved';
       });
 
   useEffect(() => {
@@ -40,20 +41,20 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
 
   if (filteredAnchors.length === 0) {
     return (
-      <div role='none' className='plb-cardSpacingBlock pli-cardSpacingInline'>
-        <Callout.Root>
-          <Callout.Title>
+      <div role='none' className='p-form-padding'>
+        <Message.Root>
+          <Message.Title>
             <Trans
               {...{
                 t,
-                i18nKey: 'no comments message',
+                i18nKey: 'no-comments.message',
                 components: {
-                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='inline-block' />,
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='w-block' />,
                 },
               }}
             />
-          </Callout.Title>
-        </Callout.Root>
+          </Message.Title>
+        </Message.Root>
       </div>
     );
   }
@@ -63,7 +64,7 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
       {filteredAnchors.map((anchor) => {
         const thread = Relation.getSource(anchor) as Thread.Thread;
         const threadId = Obj.getDXN(thread).toString();
-        return <CommentsThreadContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+        return <CommentsThread key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
       })}
     </div>
   );