@dxos/plugin-thread 0.8.4-main.5ea62a8 → 0.8.4-main.ae835ea

package/src/components/CallDebugPanel.tsx

@@ -2,15 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { WebRTCStats } from '@peermetrics/webrtc-stats';
+import { WebRTCStats, type WebRTCStatsEvent } from '@peermetrics/webrtc-stats';
 import React, { useEffect, useMemo, useState } from 'react';
 
-import { Panel } from '@dxos/devtools';
+import { truncateKey } from '@dxos/debug';
+import { JsonView, Panel } from '@dxos/devtools';
 import { log } from '@dxos/log';
-import { Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
-import { Json } from '@dxos/react-ui-syntax-highlighter';
+import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
-import { type GlobalState } from '../calls';
+import { type EncodedTrackName, type GlobalState } from '../calls';
 import { meta } from '../meta';
 
 export type CallDebugPanelProps = ThemedClassName<{
@@ -19,11 +19,16 @@ export type CallDebugPanelProps = ThemedClassName<{
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
   const { t } = useTranslation(meta.id);
-  const users = state?.call?.users;
-  const self = state?.call?.self;
 
   const [open, setOpen] = useState(false);
   const handleToggle = () => setOpen(!open);
+  const [showServiceHistory, setShowServiceHistory] = useState(false);
+  const handleToggleServiceHistory = () => setShowServiceHistory(!showServiceHistory);
+
+  const handleCopyRaw = async () => {
+    await navigator.clipboard.writeText(JSON.stringify({ users: state?.call?.users, stats }, null, 2));
+  };
+
   const [showDetailedWebRTCStats, setShowDetailedWebRTCStats] = useState(false);
   const handleShowDetailedWebRTCStats = () => setShowDetailedWebRTCStats(!showDetailedWebRTCStats);
 
@@ -34,22 +39,24 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       }),
     [],
   );
+  const [stats, setStats] = useState<WebRTCStatsEvent['data']>();
 
-  const [stats, setStats] = useState<Record<string, any>>({});
   useEffect(() => {
     const pc = state?.media.peer?.session?.peerConnection;
-    const handleStats = (stats: Record<string, any>) => setStats(stats.data);
+    const handleStats = (stats: WebRTCStatsEvent) => {
+      setStats(stats.data);
+    };
     let added = false;
     if (pc && showDetailedWebRTCStats) {
       webrtcStats.addConnection({ pc, peerId: 1, connectionId: '1' });
-      webrtcStats.on('stats', handleStats);
+      webrtcStats.on('stats', handleStats as never);
       added = true;
     }
     return () => {
       try {
         if (pc && added) {
           webrtcStats.removeConnection({ pc });
-          webrtcStats.removeListener('stats', handleStats);
+          webrtcStats.removeListener('stats', handleStats as never);
         }
       } catch (error) {
         log.error('error removing webrtc stats', { error, pc, peerId: 1, connectionId: '1' });
@@ -57,6 +64,8 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
     };
   }, [state?.media.peer?.session?.peerConnection, showDetailedWebRTCStats]);
 
+  const rows = useMemo(() => getCallStatusTable(state), [state?.call.users, state?.media.pulledAudioTracks]);
+
   return (
     <Panel
       id='meeting-status'
@@ -65,51 +74,101 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       onToggle={handleToggle}
       title={t('meeting status title')}
       maxHeight={false}
-      info={
-        <div className='flex items-center gap-2'>
-          <span title='Joined'>{self?.joined ? 'Active' : 'Inactive'}</span>
-          {users?.length !== undefined && <span title='Users'>{users?.length ?? 0} User(s)</span>}
-        </div>
-      }
+      info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
     >
-      <div className='flex flex-col gap-2 overflow-y-auto'>
-        <div className='flex items-row gap-2'>
+      <div className='flex flex-col w-full gap-2 text-xs'>
+        <div className='flex items-center gap-2'>
           <Input.Root>
             <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
             <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
           </Input.Root>
         </div>
-        <Json
-          classNames='text-sm'
-          data={{
-            users,
-            activities: state?.call?.activities,
-            ...(showDetailedWebRTCStats
-              ? {
-                  webrtc: {
-                    connectionState: state?.media.peer?.session?.peerConnection.connectionState,
-                    iceConnectionState: state?.media.peer?.session?.peerConnection.iceConnectionState,
-                    stats,
-                  },
-                }
-              : {}),
-            tracks: state?.media.peer?.session?.peerConnection.getTransceivers().map((transceiver) => {
-              const track =
-                transceiver.direction === 'recvonly' ? transceiver.receiver.track : transceiver.sender.track;
-              return {
-                id: track?.id,
-                kind: track?.kind,
-                direction: transceiver.direction,
-                enabled: track?.enabled,
-                muted: track?.muted,
-                readyState: track?.readyState,
-                settings: track?.getSettings(),
-              };
-            }),
-            callsServiceHistory: state?.media.peer?.history.get(),
-          }}
-        />
+        <div className='flex items-center gap-2'>
+          <Input.Root>
+            <Input.Label classNames={'text-sm'}>{t('show calls history title')}</Input.Label>
+            <Input.Checkbox checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+          </Input.Root>
+        </div>
+        <div className='flex items-center gap-2'>
+          <IconButton classNames={'text-sm'} icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
+        </div>
+        <Table rows={rows} />
+        {showDetailedWebRTCStats && <JsonView data={{ stats }} />}
+        {showServiceHistory && <JsonView data={{ history: state?.media.peer?.history.get() }} />}
       </div>
     </Panel>
   );
 };
+
+const getCallStatusTable = (state?: GlobalState): TableProps['rows'] => {
+  if (!state || !state.call?.users) {
+    return [];
+  }
+
+  const self = state.call.self;
+  const users = state.call.users
+    .filter((user) => user.id !== self!.id)
+    .map((user) => {
+      const isOk = {
+        audio:
+          user.tracks?.audio &&
+          state.media.pulledAudioTracks[user.tracks?.audio as EncodedTrackName]?.ctx.disposed === false,
+        video:
+          user.tracks?.video &&
+          state.media.pulledVideoStreams[user.tracks?.video as EncodedTrackName]?.ctx.disposed === false,
+        screenshare:
+          user.tracks?.screenshare &&
+          state.media.pulledVideoStreams[user.tracks?.screenshare as EncodedTrackName]?.ctx.disposed === false,
+      };
+
+      return {
+        ...user,
+        isOk,
+      };
+    });
+
+  return [
+    ['users', state.call.users.length ?? 0],
+    [
+      '*self* ' + (self?.name ?? truncateKey(self!.id, 8)),
+      self?.tracks?.audio && state.media.pushedAudioTrack ? 'AUD ✅' : 'AUD ❌',
+      self?.tracks?.video && state.media.pushedVideoTrack ? 'VID ✅' : 'VID ❌',
+      self?.tracks?.screenshareEnabled
+        ? self.tracks.screenshareEnabled && state.media.pushedScreenshareTrack
+          ? 'SCR ✅'
+          : 'SCR ❌'
+        : undefined,
+    ],
+
+    ...users.map((user) => [
+      user.name ?? truncateKey(user.id, 8),
+      user.isOk.audio ? 'AUD ✅' : 'AUD ❌',
+      user.isOk.video ? 'VID ✅' : 'VID ❌',
+      user.tracks?.screenshareEnabled ? (user.isOk.screenshare ? 'SCR ✅' : 'SCR ❌') : undefined,
+    ]),
+    ['ICE', state.media.peer?.session?.peerConnection.iceConnectionState ?? 'no connection'],
+  ];
+};
+
+export namespace Unit {
+  export const KB = (n?: number) => ((n ?? 0) / 1_000).toFixed(2);
+}
+
+export type TableProps = {
+  rows: (string | number | undefined)[][];
+};
+
+export const Table = ({ rows }: TableProps) => {
+  return (
+    <div className='w-full text-xs font-mono'>
+      {rows.map(([prefix, label, value, unit], i) => (
+        <div key={i} className='grid grid-cols-[3fr_1fr_1fr_1fr]'>
+          <div className='p-1'>{prefix}</div>
+          <div className='p-1'>{label}</div>
+          <div className='p-1'>{value}</div>
+          <div className='p-1'>{unit}</div>
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/ChannelContainer.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -11,19 +9,20 @@ import { contributes } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientCapabilities } from '@dxos/plugin-client';
 import { Query, useQuery, useSpace } from '@dxos/react-client/echo';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { DataType } from '@dxos/schema';
-import { ColumnContainer, withLayout } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
 import { createThreadPlugins } from '../testing';
 import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { Channel, Thread } from '../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
-const Story = ({ roomId }: ChannelContainerProps) => {
+const DefaultStory = ({ roomId }: ChannelContainerProps) => {
   const space = useSpace();
-  const [channel] = useQuery(space, Query.type(ChannelType));
+  const [channel] = useQuery(space, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
@@ -34,13 +33,14 @@ const Story = ({ roomId }: ChannelContainerProps) => {
 const meta = {
   title: 'plugins/plugin-thread/ChannelContainer',
   component: ChannelContainer,
-  render: (args) => <Story {...args} />,
+  render: render(DefaultStory),
   decorators: [
+    withTheme,
+    withLayout({ container: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [ChannelType, ThreadType, DataType.Message])],
+      capabilities: [contributes(ClientCapabilities.Schema, [Channel.Channel, Thread.Thread, DataType.Message])],
     }),
-    withLayout({ Container: ColumnContainer, classNames: 'w-[40rem] overflow-hidden' }),
   ],
   parameters: {
     translations,

package/src/components/ChannelContainer.tsx

@@ -12,7 +12,7 @@ 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 { ElevationProvider, Input, type ThemedClassName, useTranslation } from '@dxos/react-ui';
+import { ElevationProvider, Input, 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';
@@ -20,13 +20,15 @@ import { StackItem } from '@dxos/react-ui-stack';
 
 import { ThreadCapabilities } from '../capabilities';
 import { meta } from '../meta';
-import { type ChannelType } from '../types';
+import { type Channel } from '../types';
 
 import { Call } from './Call';
 import ChatContainer from './ChatContainer';
 
+// TODO(burdon): Create Radix style layout.
+
 export type ChannelContainerProps = {
-  channel?: ChannelType;
+  channel?: Channel.Channel;
   roomId?: string;
   role?: string;
   fullscreen?: boolean;
@@ -38,7 +40,8 @@ export type ChannelContainerProps = {
 export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const roomId = _roomId ?? (channel ? fullyQualifiedId(channel) : failUndefined());
+  const attendableId = fullyQualifiedId(channel);
+  const roomId = _roomId ?? (channel ? attendableId : failUndefined());
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -114,7 +117,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
   const isJoined = callManager.joined && callManager.roomId === roomId;
 
   return (
-    <StackItem.Content toolbar={!isJoined} classNames={isJoined && 'h-full'}>
+    <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>
       {isJoined && !isNamed && <DisplayNameMissing />}
       {isJoined && isNamed && (
         <Call.Root>
@@ -124,8 +127,8 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       )}
       {!isJoined && channel && channel.defaultThread.target && space && (
         <>
-          <ChannelToolbar attendableId={fullyQualifiedId(channel)} role={role} onJoinCall={handleJoin} />
-          <ChatContainer space={space} thread={channel.defaultThread.target} />
+          <ChannelToolbar attendableId={attendableId} role={role} onJoinCall={handleJoin} />
+          <ChatContainer space={space} thread={channel.defaultThread.target} classNames='container-max-width' />
         </>
       )}
     </StackItem.Content>
@@ -182,19 +185,19 @@ const useChannelToolbarActions = (onJoinCall?: () => void) => {
   return useMenuActions(creator);
 };
 
-type ChannelToolbarProps = ThemedClassName<{
+type ChannelToolbarProps = {
   attendableId?: string;
   role?: string;
   onJoinCall?: () => void;
-}>;
+};
 
-const ChannelToolbar = ({ attendableId, role, onJoinCall, classNames }: ChannelToolbarProps) => {
+const ChannelToolbar = ({ attendableId, role, onJoinCall }: ChannelToolbarProps) => {
   const menuProps = useChannelToolbarActions(onJoinCall);
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
       <MenuProvider {...menuProps} attendableId={attendableId}>
-        <ToolbarMenu classNames={classNames} />
+        <ToolbarMenu textBlockWidth />
       </MenuProvider>
     </ElevationProvider>
   );

package/src/components/Chat.stories.tsx

@@ -2,26 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 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';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
-import { Thread } from '@dxos/react-ui-thread';
+import { withTheme } from '@dxos/react-ui/testing';
+import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { DataType } from '@dxos/schema';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
 import { translations } from '../translations';
-import { ChannelType, ThreadType } from '../types';
+import { Channel, Thread } from '../types';
 
 import { ChatContainer } from './ChatContainer';
 
@@ -31,17 +29,12 @@ const DefaultStory = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [channel, setChannel] = useState<ChannelType | null>();
+  const [channel, setChannel] = useState<Channel.Channel | null>();
 
   useAsyncEffect(async () => {
     if (identity) {
       const space = await client.spaces.create();
-      const channel = space.db.add(
-        Obj.make(ChannelType, {
-          defaultThread: Ref.make(Obj.make(ThreadType, { messages: [], status: 'active' })),
-          threads: [],
-        }),
-      );
+      const channel = space.db.add(Channel.make());
       setSpace(space);
       setChannel(channel);
     }
@@ -60,9 +53,10 @@ const DefaultStory = () => {
 
 const meta = {
   title: 'plugins/plugin-thread/Chat',
-  component: Thread.Root as any,
+  component: ThreadComponent.Root as any,
   render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [IntentPlugin()],
       capabilities: [
@@ -76,11 +70,12 @@ const meta = {
         ),
       ],
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
-    withClientProvider({ createSpace: true, types: [ThreadType, ChannelType, DataType.Message] }),
+    withClientProvider({ createSpace: true, types: [Thread.Thread, Channel.Channel, DataType.Message] }),
   ],
-  parameters: { translations },
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/ChatContainer.tsx

@@ -7,14 +7,14 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Obj, Ref } from '@dxos/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 { Icon, ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
 import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/react-ui-editor';
 import { StackItem } from '@dxos/react-ui-stack';
 import { mx } from '@dxos/react-ui-theme';
 import {
   MessageTextbox,
   type MessageTextboxProps,
-  Thread,
+  Thread as ThreadComponent,
   type ThreadRootProps,
   threadLayout,
 } from '@dxos/react-ui-thread';
@@ -23,7 +23,7 @@ import { isNonNullable } from '@dxos/util';
 
 import { useStatus } from '../hooks';
 import { meta } from '../meta';
-import { type ThreadType } from '../types';
+import { type Thread } from '../types';
 import { getMessageMetadata } from '../util';
 
 import { command } from './command-extension';
@@ -41,14 +41,23 @@ export const ChatHeading = ({ attendableId }: { attendableId?: string }) => {
   );
 };
 
-export type ChatContainerProps = {
-  space: Space;
-  thread: ThreadType;
-  context?: Obj.Any;
-  autoFocusTextbox?: boolean;
-} & Pick<ThreadRootProps, 'current'>;
-
-export const ChatContainer = ({ space, thread, context, current, autoFocusTextbox }: ChatContainerProps) => {
+export type ChatContainerProps = ThemedClassName<
+  {
+    space: Space;
+    thread: Thread.Thread;
+    context?: Obj.Any;
+    autoFocusTextbox?: boolean;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export const ChatContainer = ({
+  classNames,
+  space,
+  thread,
+  context,
+  current,
+  autoFocusTextbox,
+}: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
   const id = fullyQualifiedId(thread);
   const identity = useIdentity()!;
@@ -67,7 +76,7 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
     () => [
       createBasicExtensions({ placeholder: t('message placeholder') }),
       createThemeExtensions({ themeMode }),
-      listener({ onChange: (text) => (messageRef.current = text) }),
+      listener({ onChange: ({ text }) => (messageRef.current = text) }),
       command,
     ],
     [themeMode, _count],
@@ -109,12 +118,13 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
   };
 
   return (
-    <Thread.Root
+    <ThreadComponent.Root
       current={current}
       id={id}
       classNames={[
-        'bs-full is-full max-is-prose mli-auto grid-rows-[1fr_min-content_min-content] overflow-hidden',
+        'bs-full grid-rows-[1fr_min-content_min-content] overflow-hidden',
         'transition-[padding-block-end] [[data-sidebar-inline-start-state=open]_&]:lg:pbe-0',
+        classNames,
       ]}
     >
       <ScrollArea.Root classNames='col-span-2'>
@@ -136,9 +146,8 @@ export const ChatContainer = ({ space, thread, context, current, autoFocusTextbo
       </ScrollArea.Root>
 
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />
-
-      <Thread.Status activity={activity}>{t('activity message')}</Thread.Status>
-    </Thread.Root>
+      <ThreadComponent.Status activity={activity}>{t('activity message')}</ThreadComponent.Status>
+    </ThreadComponent.Root>
   );
 };
 

package/src/components/Comments.stories.tsx

@@ -2,8 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
@@ -15,11 +13,12 @@ import { faker } from '@dxos/random';
 import { useQuery, useSpace } 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 { AnchoredTo, DataType } from '@dxos/schema';
-import { layoutCentered, render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
 
 import { translations } from '../translations';
-import { ThreadType } from '../types';
+import { Thread } from '../types';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread, createProposalThread } from './testing';
@@ -57,11 +56,7 @@ const DefaultStory = () => {
     return null;
   }
 
-  return (
-    <div className='w-[30rem] overflow-y-auto bg-baseSurface'>
-      <CommentsContainer anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />
-    </div>
-  );
+  return <CommentsContainer anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
 };
 
 const meta = {
@@ -69,14 +64,14 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ fullscreen: true, classNames: layoutCentered }),
-    // TODO(wittjosiah): This shouldn't depend on app framework. Should use withClientProvider instead.
-    //   Currently this is required due to useOnEditAnalytics.
+    withLayout({ container: 'column', scroll: true }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
         IntentPlugin(),
         ClientPlugin({
-          types: [DataType.Message, ThreadType, AnchoredTo],
+          types: [DataType.Message, Thread.Thread, AnchoredTo],
           onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },

package/src/components/CommentsContainer.tsx

@@ -10,7 +10,7 @@ import { Callout, Icon, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo } from '@dxos/schema';
 
 import { meta } from '../meta';
-import { type ThreadType } from '../types';
+import { type Thread } from '../types';
 
 import { CommentsThreadContainer, type CommentsThreadContainerProps } from './CommentsThreadContainer';
 
@@ -63,7 +63,7 @@ export const CommentsContainer = ({ anchors, currentId, showResolvedThreads, ...
   return (
     <div>
       {filteredAnchors.map((anchor) => {
-        const thread = Relation.getSource(anchor) as ThreadType;
+        const thread = Relation.getSource(anchor) as Thread.Thread;
         const threadId = fullyQualifiedId(thread);
         return <CommentsThreadContainer key={threadId} anchor={anchor} current={currentId === threadId} {...props} />;
       })}