@dxos/plugin-thread 0.8.3-staging.0fa589b → 0.8.4-main.28f8d3d

package/src/capabilities/capabilities.ts

@@ -5,9 +5,9 @@
 import { defineCapability } from '@dxos/app-framework';
 import { type DeepReadonly } from '@dxos/util';
 
-import { type CallState, type MediaState, type CallManager } from '../calls';
+import { type CallManager, type CallState, type MediaState } from '../calls';
 import { THREAD_PLUGIN } from '../meta';
-import { type ViewState, type ThreadState, type ChannelType } from '../types';
+import { type ChannelType, type ThreadState, type ViewState } from '../types';
 
 export namespace ThreadCapabilities {
   export const CallManager = defineCapability<CallManager>(`${THREAD_PLUGIN}/capability/call-manager`);

package/src/capabilities/intent-resolver.ts

@@ -2,22 +2,41 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, createResolver, type PluginContext } from '@dxos/app-framework';
+import { Effect } from 'effect';
+
+import { Capabilities, type PluginContext, contributes, createIntent, createResolver } from '@dxos/app-framework';
 import { sleep } from '@dxos/async';
-import { Obj, Relation } from '@dxos/echo';
+import { Obj, Relation, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { ATTENDABLE_PATH_SEPARATOR, DeckAction } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
-import { fullyQualifiedId, getSpace, Ref } from '@dxos/react-client/echo';
+import { CollectionAction, SpaceAction } from '@dxos/plugin-space/types';
+import { Ref, fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { AnchoredTo, DataType } from '@dxos/schema';
 
-import { ThreadCapabilities } from './capabilities';
 import { THREAD_PLUGIN } from '../meta';
 import { ChannelType, ThreadAction, ThreadType } from '../types';
 
+import { ThreadCapabilities } from './capabilities';
+
 export default (context: PluginContext) =>
   contributes(Capabilities.IntentResolver, [
+    createResolver({
+      intent: ThreadAction.OnSpaceCreated,
+      resolve: ({ space, rootCollection }) =>
+        Effect.gen(function* () {
+          const { dispatch } = context.getCapability(Capabilities.IntentDispatcher);
+          const { object: collection } = yield* dispatch(
+            createIntent(CollectionAction.CreateQueryCollection, { typename: Type.getTypename(ChannelType) }),
+          );
+          rootCollection.objects.push(Ref.make(collection));
+
+          const { object: channel } = yield* dispatch(
+            createIntent(ThreadAction.CreateChannel, { name: 'General', spaceId: space.id }),
+          );
+          space.db.add(channel);
+        }),
+    }),
     createResolver({
       intent: ThreadAction.CreateChannel,
       resolve: ({ name }) => ({
@@ -182,9 +201,9 @@ export default (context: PluginContext) =>
         const intents = [];
 
         const message = Obj.make(DataType.Message, {
-          sender,
           created: new Date().toISOString(),
-          blocks: [{ type: 'text', text }],
+          sender,
+          blocks: [{ _tag: 'text', text }],
           // TODO(wittjosiah): Context based on attention.
           // context: context ? Ref.make(context) : undefined,
         });

package/src/capabilities/markdown.ts

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

package/src/capabilities/react-surface.tsx

@@ -9,17 +9,18 @@ import { Obj, type Ref } from '@dxos/echo';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
 
-import { ThreadCapabilities } from './capabilities';
 import {
-  CallSidebar,
   CallDebugPanel,
+  CallSidebar,
   ChannelContainer,
+  ChatContainer,
   ThreadComplementary,
   ThreadSettings,
-  ChatContainer,
 } from '../components';
 import { THREAD_PLUGIN } from '../meta';
-import { ChannelType, ThreadType, type ThreadSettingsProps } from '../types';
+import { ChannelType, type ThreadSettingsProps, ThreadType } from '../types';
+
+import { ThreadCapabilities } from './capabilities';
 
 export default () =>
   contributes(Capabilities.ReactSurface, [

package/src/capabilities/state.ts

@@ -5,9 +5,10 @@
 import { contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
-import { ThreadCapabilities } from './capabilities';
 import { type ThreadState, type ViewStore } from '../types';
 
+import { ThreadCapabilities } from './capabilities';
+
 const initialViewState = { showResolvedThreads: false };
 
 export default () => {

package/src/components/Call/Call.tsx

@@ -2,17 +2,18 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type PropsWithChildren, type FC } from 'react';
+import React, { type FC, type PropsWithChildren } from 'react';
 
 import { useCapability } from '@dxos/app-framework';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { Toolbar, type ToolbarProps } from './Toolbar';
 import { ThreadCapabilities } from '../../capabilities';
 import { useDebugMode } from '../../hooks';
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
 
+import { Toolbar, type ToolbarProps } from './Toolbar';
+
 //
 // Root
 //
@@ -34,7 +35,7 @@ type CallAudioProps = {};
 const CallAudio: FC<CallAudioProps> = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
 
-  return <AudioStream tracks={call.pulledAudioTracks} />;
+  return <AudioStream tracks={call.audioTracksToPlay} />;
 };
 
 CallAudio.displayName = 'CallAudio';

package/src/components/Call/Toolbar.tsx

@@ -5,21 +5,21 @@
 import React from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';
-import { useNode, useActions } from '@dxos/plugin-graph';
+import { useActions, useNode } from '@dxos/plugin-graph';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Icon,
   IconButton,
   type IconButtonProps,
-  type ThemedClassName,
   Toolbar as NativeToolbar,
+  type ThemedClassName,
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
 import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
 
 import { ThreadCapabilities } from '../../capabilities';
-import { THREAD_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type ChannelType } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
@@ -40,7 +40,7 @@ export const Toolbar = ({
   onJoin,
   onLeave,
 }: ToolbarProps) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
   const call = useCapability(ThreadCapabilities.CallManager);
 
@@ -174,7 +174,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-callActive') : 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/CallDebugPanel.tsx

@@ -7,20 +7,20 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
-import { Input, useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 
 import { type GlobalState } from '../calls';
-import { THREAD_PLUGIN } from '../meta';
+import { meta } from '../meta';
 
 export type CallDebugPanelProps = ThemedClassName<{
   state?: GlobalState;
 }>;
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
+  const { t } = useTranslation(meta.id);
   const users = state?.call?.users;
   const self = state?.call?.self;
-  const { t } = useTranslation(THREAD_PLUGIN);
 
   const [open, setOpen] = useState(false);
   const handleToggle = () => setOpen(!open);

package/src/components/CallSidebar.tsx

@@ -6,9 +6,10 @@ import React from 'react';
 
 import { useCapability } from '@dxos/app-framework';
 
-import { ChannelContainer } from './ChannelContainer';
 import { ThreadCapabilities } from '../capabilities';
 
+import { ChannelContainer } from './ChannelContainer';
+
 export const CallSidebar = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
   return <ChannelContainer roomId={call.roomId} />;

package/src/components/ChannelContainer.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { contributes } from '@dxos/app-framework';
@@ -12,28 +12,29 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
 import { DataType } from '@dxos/schema';
-import { withLayout, ColumnContainer } from '@dxos/storybook-utils';
+import { ColumnContainer, withLayout } from '@dxos/storybook-utils';
 
-import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 import { createThreadPlugins } from '../testing';
-import translations from '../translations';
+import { translations } from '../translations';
 import { ChannelType, ThreadType } from '../types';
 
+import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+
 // TODO(wittjosiah): Channel doesn't render full height.
-const Story = () => {
+const Story = ({ roomId }: ChannelContainerProps) => {
   const space = useSpace();
   const [channel] = useQuery(space, Query.type(ChannelType));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} />;
+  return <ChannelContainer channel={channel} roomId={roomId} />;
 };
 
 const meta: Meta<ChannelContainerProps> = {
   title: 'plugins/plugin-thread/ChannelContainer',
   component: ChannelContainer,
-  render: () => <Story />,
+  render: (args) => <Story {...args} />,
   decorators: [
     withPluginManager({
       plugins: [...(await createThreadPlugins())],

package/src/components/ChannelContainer.tsx

@@ -3,26 +3,28 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import React, { useCallback, useEffect, useMemo, useState, type ChangeEvent } from 'react';
+import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useCapabilities, useCapability } from '@dxos/app-framework';
 import { Context } from '@dxos/context';
+import { failUndefined } from '@dxos/debug';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { useTranslation, Input, ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
-import { ControlGroup, ControlItemInput, ControlGroupButton } from '@dxos/react-ui-form';
-import { ToolbarMenu, MenuProvider, createMenuAction, useMenuActions, createMenuItemGroup } from '@dxos/react-ui-menu';
+import { ElevationProvider, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
+import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMenuActions } from '@dxos/react-ui-menu';
 import { useSoundEffect } from '@dxos/react-ui-sfx';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { Call } from './Call';
-import ChatContainer from './ChatContainer';
 import { ThreadCapabilities } from '../capabilities';
-import { THREAD_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type ChannelType } from '../types';
 
+import { Call } from './Call';
+import ChatContainer from './ChatContainer';
+
 export type ChannelContainerProps = {
   channel?: ChannelType;
   roomId?: string;
@@ -36,7 +38,7 @@ export type ChannelContainerProps = {
 export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = channel ? fullyQualifiedId(channel) : _roomId;
+  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -133,7 +135,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
 export default ChannelContainer;
 
 const DisplayNameMissing = () => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const client = useClient();
   const [displayName, setDisplayName] = useState('');
   const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>) => setDisplayName(event.target.value), []);
@@ -163,10 +165,10 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
         return {
           nodes: [
             createMenuItemGroup('root', {
-              label: ['channel toolbar title', { ns: THREAD_PLUGIN }],
+              label: ['channel toolbar title', { ns: meta.id }],
             }),
             createMenuAction('video-call', () => onJoinCall?.(), {
-              label: ['start video call label', { ns: THREAD_PLUGIN }],
+              label: ['start video call label', { ns: meta.id }],
               icon: 'ph--video-camera--regular',
               type: 'video-call',
             }),

package/src/components/Chat.stories.tsx

@@ -4,10 +4,10 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import React, { useEffect, useState } from 'react';
 
-import { Capabilities, contributes, createSurface, IntentPlugin } from '@dxos/app-framework';
+import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Ref } from '@dxos/echo';
 import { faker } from '@dxos/random';
@@ -19,10 +19,11 @@ import { Thread } from '@dxos/react-ui-thread';
 import { DataType } from '@dxos/schema';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { ChatContainer } from './ChatContainer';
-import translations from '../translations';
+import { translations } from '../translations';
 import { ChannelType, ThreadType } from '../types';
 
+import { ChatContainer } from './ChatContainer';
+
 faker.seed(1);
 
 const Story = () => {
@@ -60,9 +61,9 @@ const Story = () => {
 
 export const Default = {};
 
-const meta: Meta = {
+const meta: Meta<typeof Thread.Root> = {
   title: 'plugins/plugin-thread/Chat',
-  component: Thread,
+  component: Thread.Root,
   render: () => <Story />,
   decorators: [
     withPluginManager({

package/src/components/ChatContainer.tsx

@@ -5,7 +5,7 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Obj, Ref } from '@dxos/echo';
-import { fullyQualifiedId, type Space, useMembers } from '@dxos/react-client/echo';
+import { type Space, fullyQualifiedId, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Icon, ScrollArea, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
@@ -15,22 +15,22 @@ import {
   MessageTextbox,
   type MessageTextboxProps,
   Thread,
-  ThreadFooter,
+  type ThreadRootProps,
   threadLayout,
-  type ThreadProps,
 } from '@dxos/react-ui-thread';
 import { DataType } from '@dxos/schema';
 import { isNonNullable } from '@dxos/util';
 
-import { MessageContainer } from './MessageContainer';
-import { command } from './command-extension';
 import { useStatus } from '../hooks';
-import { THREAD_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type ThreadType } from '../types';
 import { getMessageMetadata } from '../util';
 
+import { command } from './command-extension';
+import { MessageContainer } from './MessageContainer';
+
 export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <div role='none' className='flex items-center'>
       <StackItem.SigilButton attendableId={attendableId}>
@@ -46,14 +46,14 @@ export type ChatContainerProps = {
   thread: ThreadType;
   context?: Obj.Any;
   autoFocusTextbox?: boolean;
-} & Pick<ThreadProps, 'current'>;
+} & Pick<ThreadRootProps, 'current'>;
 
 export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+  const { t } = useTranslation(meta.id);
   const id = fullyQualifiedId(thread);
   const identity = useIdentity()!;
   const members = useMembers(space?.key);
   const activity = useStatus(space, id);
-  const { t } = useTranslation(THREAD_PLUGIN);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
   const rerenderEditor = () => _setCount((count) => count + 1);
@@ -93,9 +93,9 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
     thread.messages.push(
       Ref.make(
         Obj.make(DataType.Message, {
-          sender: { identityDid: identity.did },
           created: new Date().toISOString(),
-          blocks: [{ type: 'text', text: messageRef.current }],
+          sender: { identityDid: identity.did },
+          blocks: [{ _tag: 'text', text: messageRef.current }],
           properties: context ? { context: Ref.make(context) } : undefined,
         }),
       ),
@@ -109,7 +109,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
   };
 
   return (
-    <Thread
+    <Thread.Root
       current={current}
       id={id}
       classNames='bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0'
@@ -131,9 +131,11 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
           </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>
+
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
-      <ThreadFooter activity={activity}>{t('activity message')}</ThreadFooter>
-    </Thread>
+
+      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
+    </Thread.Root>
   );
 };
 

package/src/components/Comments.stories.tsx

@@ -4,29 +4,30 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj, Query, Relation, Type } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { faker } from '@dxos/random';
 import { useQuery, useSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
-import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { AnchoredTo, DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { layoutCentered, render, withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { translations } from '../translations';
+import { ThreadType } from '../types';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread } from './testing';
-import translations from '../translations';
-import { ThreadType } from '../types';
 
 faker.seed(1);
 
-const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
+const DefaultStory = () => {
   const identity = useIdentity();
-  const space = useSpace(spaceKey);
+  const space = useSpace();
   const anchors = useQuery(space, Query.type(AnchoredTo));
 
   useEffect(() => {
@@ -58,26 +59,33 @@ const Story = ({ spaceKey }: ClientRepeatedComponentProps) => {
   }
 
   return (
-    <div className='flex justify-center overflow-y-auto bg-white dark:bg-black'>
-      <div className='flex flex-col w-[30rem]'>
-        <CommentsContainer anchors={anchors} onThreadDelete={console.log} />
-      </div>
+    <div className='w-[30rem] overflow-y-auto bg-baseSurface'>
+      <CommentsContainer anchors={anchors} onThreadDelete={console.log} />
     </div>
   );
 };
 
 const meta: Meta = {
   title: 'plugins/plugin-thread/Comments',
-  // TODO(wittjosiah): Use decorator.
-  render: () => <ClientRepeater component={Story} createIdentity createSpace types={[ThreadType, DataType.Message]} />,
+  render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ fullscreen: true, classNames: layoutCentered }),
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [
+        IntentPlugin(),
+        ClientPlugin({
+          types: [DataType.Message, ThreadType, AnchoredTo],
+          onClientInitialized: async ({ client }) => {
+            await client.halo.createIdentity();
+          },
+        }),
+      ],
     }),
   ],
-  parameters: { translations },
+  parameters: {
+    translations,
+  },
 };
 
 export default meta;

package/src/components/CommentsContainer.tsx

@@ -9,21 +9,23 @@ import { fullyQualifiedId } from '@dxos/react-client/echo';
 import { Callout, Icon, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo } from '@dxos/schema';
 
-import { CommentContainer, type CommentContainerProps } from './CommentContainer';
-import { THREAD_PLUGIN } from '../meta';
+import { meta } from '../meta';
 import { type ThreadType } from '../types';
 
-export type ThreadsContainerProps = Omit<CommentContainerProps, 'anchor' | 'current'> & {
+import { CommentsThreadContainer, type CommentsThreadContainerProps } from './CommentsThreadContainer';
+
+export type CommentsContainerProps = Omit<CommentsThreadContainerProps, 'anchor' | 'current'> & {
   anchors: AnchoredTo[];
   currentId?: string;
   showResolvedThreads?: boolean;
 };
 
 /**
- * Comment threads.
+ * Root container for collection of comment threads.
  */
-export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: ThreadsContainerProps) => {
-  const { t } = useTranslation(THREAD_PLUGIN);
+export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...props }: CommentsContainerProps) => {
+  const { t } = useTranslation(meta.id);
+
   // TODO(wittjosiah): There seems to be a race between thread and anchor being deleted.
   const filteredAnchors = showResolvedThreads
     ? anchors.filter((anchor) => !!Relation.getSource(anchor))
@@ -58,9 +60,13 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
     );
   }
 
-  return filteredAnchors.map((anchor) => {
-    const thread = Relation.getSource(anchor) as ThreadType;
-    const threadId = fullyQualifiedId(thread);
-    return <CommentContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
-  });
+  return (
+    <div>
+      {filteredAnchors.map((anchor) => {
+        const thread = Relation.getSource(anchor) as ThreadType;
+        const threadId = fullyQualifiedId(thread);
+        return <CommentsThreadContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
+      })}
+    </div>
+  );
 };