@dxos/plugin-thread 0.8.4-main.ae835ea → 0.8.4-main.bc674ce

package/src/components/Call/Call.tsx

@@ -2,13 +2,14 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React, { type FC, type PropsWithChildren } from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 import { type ThemedClassName } from '@dxos/react-ui';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { useDebugMode } from '../../hooks';
+import { ThreadCapabilities } from '../../types';
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
 
@@ -34,8 +35,9 @@ type CallAudioProps = {};
 
 const CallAudio: FC<CallAudioProps> = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
+  const audioTracksToPlay = useAtomValue(call.audioTracksToPlayAtom);
 
-  return <AudioStream tracks={call.audioTracksToPlay} />;
+  return <AudioStream tracks={audioTracksToPlay} />;
 };
 
 CallAudio.displayName = 'CallAudio';
@@ -51,10 +53,12 @@ type CallGridProps = {
 const CallGrid: FC<CallGridProps> = ({ fullscreen }) => {
   const debug = useDebugMode();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const self = useAtomValue(call.selfAtom);
+  const users = useAtomValue(call.usersAtom);
 
   return (
     <div className='grid grow p-4 dark:bg-neutral-900'>
-      <ParticipantGrid self={call.self} users={call.users} debug={debug} fullscreen={fullscreen} />
+      <ParticipantGrid self={self} users={users} debug={debug} fullscreen={fullscreen} />
     </div>
   );
 };

package/src/components/Call/Toolbar.tsx

@@ -2,11 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework';
+import { useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { Obj } from '@dxos/echo';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
 import {
   Icon,
   IconButton,
@@ -16,10 +18,10 @@ import {
   toLocalizedString,
   useTranslation,
 } from '@dxos/react-ui';
-import { groupHoverControlItemWithTransition, mx } from '@dxos/react-ui-theme';
+import { groupHoverControlItemWithTransition, mx } from '@dxos/ui-theme';
 
-import { ThreadCapabilities } from '../../capabilities';
 import { meta } from '../../meta';
+import { ThreadCapabilities } from '../../types';
 import { type Channel } from '../../types';
 
 export type ToolbarProps = ThemedClassName<{
@@ -42,14 +44,18 @@ export const Toolbar = ({
 }: ToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const { graph } = useAppGraph();
+  const runAction = useActionRunner();
   const call = useCapability(ThreadCapabilities.CallManager);
+  const media = useAtomValue(call.mediaAtom);
+  const joined = useAtomValue(call.joinedAtom);
+  const raisedHand = useAtomValue(call.raisedHandAtom);
 
   // Channel app graph node.
-  const node = useNode(graph, channel && fullyQualifiedId(channel));
+  const node = useNode(graph, channel && Obj.getDXN(channel).toString());
   const actions = useActions(graph, node?.id).filter((action) => action.properties.disposition === 'toolbar');
 
   // Screen sharing.
-  const isScreensharing = call.media.screenshareTrack !== undefined;
+  const isScreensharing = media.screenshareTrack !== undefined;
   const canSharescreen =
     typeof navigator.mediaDevices !== 'undefined' && navigator.mediaDevices.getDisplayMedia !== undefined;
 
@@ -58,7 +64,7 @@ export const Toolbar = ({
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
       <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
         <ToggleButton
-          active={call.media.audioEnabled}
+          active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
@@ -70,12 +76,12 @@ export const Toolbar = ({
               icon: 'ph--microphone-slash--duotone',
               label: t('mic on'),
               onClick: () => call.turnAudioOn(),
-              classNames: [call.joined && 'bg-callAlert'],
+              classNames: [joined && 'bg-callAlert'],
             },
           }}
         />
         <ToggleButton
-          active={call.media.videoEnabled}
+          active={media.videoEnabled}
           state={{
             on: {
               icon: 'ph--video-camera--regular',
@@ -97,7 +103,7 @@ export const Toolbar = ({
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -117,25 +123,27 @@ export const Toolbar = ({
             />
 
             {/* Companion actions. */}
-            {actions.map((action) => (
-              <IconButton
-                key={action.id}
-                {...defaultButtonProps}
-                icon={action.properties.icon}
-                label={toLocalizedString(action.properties.label, t)}
-                classNames={action.properties.classNames}
-                onClick={() => action.data({ node })}
-              />
-            ))}
+            {actions
+              .filter((action): action is Node.Action => Node.isAction(action))
+              .map((action) => (
+                <IconButton
+                  key={action.id}
+                  {...defaultButtonProps}
+                  icon={action.properties.icon}
+                  label={toLocalizedString(action.properties.label, t)}
+                  classNames={action.properties.classNames}
+                  onClick={() => node && void runAction(action, { parent: node })}
+                />
+              ))}
 
             <ToggleButton
-              active={call.raisedHand}
+              active={raisedHand}
               state={{
                 on: {
                   icon: 'ph--hand-waving--regular',
                   label: t('lower hand'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [call.joined && 'bg-callAlert'],
+                  classNames: [joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
@@ -146,7 +154,7 @@ export const Toolbar = ({
             />
           </>
         )}
-        {call.joined ? (
+        {joined ? (
           <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
         ) : (
           <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />

package/src/components/CallDebugPanel.tsx

@@ -13,9 +13,7 @@ import { IconButton, Input, type ThemedClassName, useTranslation } from '@dxos/r
 import { type EncodedTrackName, type GlobalState } from '../calls';
 import { meta } from '../meta';
 
-export type CallDebugPanelProps = ThemedClassName<{
-  state?: GlobalState;
-}>;
+export type CallDebugPanelProps = ThemedClassName<{ state?: GlobalState }>;
 
 export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
   const { t } = useTranslation(meta.id);
@@ -73,24 +71,24 @@ export const CallDebugPanel = ({ state }: CallDebugPanelProps) => {
       open={open}
       onToggle={handleToggle}
       title={t('meeting status title')}
-      maxHeight={false}
       info={<div className='flex items-center gap-2'> {state?.call.joined ? 'Active' : 'Inactive'}</div>}
+      maxHeight={0}
     >
-      <div className='flex flex-col w-full gap-2 text-xs'>
-        <div className='flex items-center gap-2'>
+      <div className='flex flex-col is-full text-xs'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show webrtc stats title')}</Input.Label>
-            <Input.Checkbox checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <Input.Switch checked={showDetailedWebRTCStats} onCheckedChange={handleShowDetailedWebRTCStats} />
+            <Input.Label>{t('show webrtc stats title')}</Input.Label>
           </Input.Root>
         </div>
-        <div className='flex items-center gap-2'>
+        <div className='flex items-center gap-2 items-center'>
           <Input.Root>
-            <Input.Label classNames={'text-sm'}>{t('show calls history title')}</Input.Label>
-            <Input.Checkbox checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <Input.Switch checked={showServiceHistory} onCheckedChange={handleToggleServiceHistory} />
+            <Input.Label>{t('show calls history title')}</Input.Label>
           </Input.Root>
         </div>
-        <div className='flex items-center gap-2'>
-          <IconButton classNames={'text-sm'} icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
+        <div className='flex items-center gap-2 items-center'>
+          <IconButton icon='ph--copy--regular' label={'copy raw'} onClick={handleCopyRaw} />
         </div>
         <Table rows={rows} />
         {showDetailedWebRTCStats && <JsonView data={{ stats }} />}
@@ -160,7 +158,7 @@ export type TableProps = {
 
 export const Table = ({ rows }: TableProps) => {
   return (
-    <div className='w-full text-xs font-mono'>
+    <div className='is-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>

package/src/components/CallSidebar.tsx

@@ -2,17 +2,19 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useCapability } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/react';
 
-import { ThreadCapabilities } from '../capabilities';
+import { ThreadCapabilities } from '../types';
 
 import { ChannelContainer } from './ChannelContainer';
 
 export const CallSidebar = () => {
   const call = useCapability(ThreadCapabilities.CallManager);
-  return <ChannelContainer roomId={call.roomId} />;
+  const roomId = useAtomValue(call.roomIdAtom);
+  return <ChannelContainer subject={undefined} roomId={roomId} />;
 };
 
 export default CallSidebar;

package/src/components/ChannelContainer.stories.tsx

@@ -5,29 +5,28 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { contributes } from '@dxos/app-framework';
+import { Capability, Common } 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 { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { DataType } from '@dxos/schema';
 import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
 
 import { createThreadPlugins } from '../testing';
 import { translations } from '../translations';
-import { Channel, Thread } from '../types';
+import { Channel } from '../types';
 
 import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelContainerProps) => {
-  const space = useSpace();
-  const [channel] = useQuery(space, Query.type(Channel.Channel));
+  const db = useDatabase();
+  const [channel] = useQuery(db, Query.type(Channel.Channel));
   if (!channel) {
     return null;
   }
 
-  return <ChannelContainer channel={channel} roomId={roomId} />;
+  return <ChannelContainer subject={channel} roomId={roomId} />;
 };
 
 const meta = {
@@ -36,10 +35,12 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ container: 'column' }),
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [Channel.Channel, Thread.Thread, DataType.Message])],
+      capabilities: [
+        Capability.contributes(Common.Capability.Schema, [Channel.Channel, Thread.Thread, Message.Message]),
+      ],
     }),
   ],
   parameters: {
@@ -54,6 +55,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     // Fixed room for testing.
+    subject: undefined,
     roomId: '04a1d1911703b8e929d0649021a965',
   },
 };

package/src/components/ChannelContainer.tsx

@@ -2,15 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
 import React, { type ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { useCapabilities, useCapability } from '@dxos/app-framework';
+import { type SurfaceComponentProps, useCapabilities, useCapability } from '@dxos/app-framework/react';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
+import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { fullyQualifiedId, getSpace } from '@dxos/react-client/echo';
+import { getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { ElevationProvider, Input, useTranslation } from '@dxos/react-ui';
 import { ControlGroup, ControlGroupButton, ControlItemInput } from '@dxos/react-ui-form';
@@ -18,30 +19,32 @@ import { MenuProvider, ToolbarMenu, createMenuAction, createMenuItemGroup, useMe
 import { useSoundEffect } from '@dxos/react-ui-sfx';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { ThreadCapabilities } from '../capabilities';
 import { meta } from '../meta';
+import { ThreadCapabilities } 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?: Channel.Channel;
-  roomId?: string;
-  role?: string;
-  fullscreen?: boolean;
-};
+export type ChannelContainerProps = SurfaceComponentProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
 
 /**
  * Renders a call when active, otherwise renders the channel chat.
  */
-export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }: ChannelContainerProps) => {
+// TODO(burdon): Create Radix style layout.
+export const ChannelContainer = ({ role, subject: channel, roomId: roomIdProp, fullscreen }: ChannelContainerProps) => {
   const space = getSpace(channel);
   const callManager = useCapability(ThreadCapabilities.CallManager);
-  const attendableId = fullyQualifiedId(channel);
-  const roomId = _roomId ?? (channel ? attendableId : failUndefined());
+  const joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
+  const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -82,7 +85,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -95,7 +98,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       // TODO(burdon): Error sound.
       log.catch(err);
     }
-  }, [extensions, channel, roomId]);
+  }, [extensions, channel, roomId, joined]);
 
   /**
    * Leave the call.
@@ -114,7 +117,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
     }
   }, [extensions, roomId]);
 
-  const isJoined = callManager.joined && callManager.roomId === roomId;
+  const isJoined = joined && currentRoomId === roomId;
 
   return (
     <StackItem.Content classNames={isJoined && 'bs-full'} toolbar={!isJoined}>
@@ -164,7 +167,7 @@ const DisplayNameMissing = () => {
 const useChannelToolbarActions = (onJoinCall?: () => void) => {
   const creator = useMemo(
     () =>
-      Rx.make(() => {
+      Atom.make(() => {
         return {
           nodes: [
             createMenuItemGroup('root', {

package/src/components/Chat.stories.tsx

@@ -5,7 +5,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
+import { Capability, Common, OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
@@ -15,11 +15,11 @@ import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
 import { render } from '@dxos/storybook-utils';
+import { Message, Thread } from '@dxos/types';
 
 import { translations } from '../translations';
-import { Channel, Thread } from '../types';
+import { Channel } from '../types';
 
 import { ChatContainer } from './ChatContainer';
 
@@ -45,7 +45,7 @@ const DefaultStory = () => {
   }
 
   return (
-    <main className='is-full max-is-prose mli-auto bs-dvh overflow-hidden'>
+    <main className='is-full max-is-proseMaxWidth mli-auto bs-full overflow-hidden'>
       <ChatContainer space={space} thread={channel.defaultThread.target} />
     </main>
   );
@@ -58,11 +58,11 @@ const meta = {
   decorators: [
     withTheme,
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin()],
       capabilities: [
-        contributes(
-          Capabilities.ReactSurface,
-          createSurface({
+        Capability.contributes(
+          Common.Capability.ReactSurface,
+          Common.createSurface({
             id: 'test',
             role: 'card',
             component: ({ role }) => <span>{JSON.stringify({ role })}</span>,
@@ -70,7 +70,7 @@ const meta = {
         ),
       ],
     }),
-    withClientProvider({ createSpace: true, types: [Thread.Thread, Channel.Channel, DataType.Message] }),
+    withClientProvider({ createSpace: true, types: [Thread.Thread, Channel.Channel, Message.Message] }),
   ],
   parameters: {
     layout: 'fullscreen',

package/src/components/ChatContainer.tsx

@@ -5,12 +5,10 @@
 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 { type Space, useMembers } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 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,
@@ -18,12 +16,13 @@ import {
   type ThreadRootProps,
   threadLayout,
 } from '@dxos/react-ui-thread';
-import { DataType } from '@dxos/schema';
+import { Message, type Thread } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener } from '@dxos/ui-editor';
+import { mx } from '@dxos/ui-theme';
 import { isNonNullable } from '@dxos/util';
 
 import { useStatus } from '../hooks';
 import { meta } from '../meta';
-import { type Thread } from '../types';
 import { getMessageMetadata } from '../util';
 
 import { command } from './command-extension';
@@ -45,7 +44,7 @@ export type ChatContainerProps = ThemedClassName<
   {
     space: Space;
     thread: Thread.Thread;
-    context?: Obj.Any;
+    context?: Obj.Unknown;
     autoFocusTextbox?: boolean;
   } & Pick<ThreadRootProps, 'current'>
 >;
@@ -59,9 +58,9 @@ export const ChatContainer = ({
   autoFocusTextbox,
 }: ChatContainerProps) => {
   const { t } = useTranslation(meta.id);
-  const id = fullyQualifiedId(thread);
+  const id = Obj.getDXN(thread).toString();
   const identity = useIdentity()!;
-  const members = useMembers(space?.key);
+  const members = useMembers(space?.id);
   const activity = useStatus(space, id);
   // TODO(wittjosiah): This is a hack to reset the editor after a message is sent.
   const [_count, _setCount] = useState(0);
@@ -99,16 +98,18 @@ export const ChatContainer = ({
       return false;
     }
 
-    thread.messages.push(
-      Ref.make(
-        Obj.make(DataType.Message, {
-          created: new Date().toISOString(),
-          sender: { identityDid: identity.did },
-          blocks: [{ _tag: 'text', text: messageRef.current }],
-          properties: context ? { context: Ref.make(context) } : undefined,
-        }),
-      ),
-    );
+    Obj.change(thread, (t) => {
+      t.messages.push(
+        Ref.make(
+          Obj.make(Message.Message, {
+            created: new Date().toISOString(),
+            sender: { identityDid: identity.did },
+            blocks: [{ _tag: 'text', text: messageRef.current }],
+            properties: context ? { context: Ref.make(context) } : undefined,
+          }),
+        ),
+      );
+    });
 
     messageRef.current = '';
     setAutoFocus(true);
@@ -139,10 +140,10 @@ export const ChatContainer = ({
           </div>
           {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
           <div role='none' className='bs-px -mbs-px' ref={threadScrollRef} />
-          <ScrollArea.Scrollbar>
-            <ScrollArea.Thumb />
-          </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
+        <ScrollArea.Scrollbar>
+          <ScrollArea.Thumb />
+        </ScrollArea.Scrollbar>
       </ScrollArea.Root>
 
       <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleCreate} {...textboxMetadata} />

package/src/components/Comments.stories.tsx

@@ -3,22 +3,23 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { IntentPlugin } from '@dxos/app-framework';
+import { OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { Obj, Query, Relation, Type } from '@dxos/echo';
+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 { useQuery, useSpace } from '@dxos/react-client/echo';
+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 { AnchoredTo, DataType } from '@dxos/schema';
 import { render } from '@dxos/storybook-utils';
+import { AnchoredTo, Message, Thread } from '@dxos/types';
 
 import { translations } from '../translations';
-import { Thread } from '../types';
 
 import { CommentsContainer } from './CommentsContainer';
 import { createCommentThread, createProposalThread } from './testing';
@@ -27,32 +28,32 @@ faker.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const space = useSpace();
-  const anchors = useQuery(space, Query.type(AnchoredTo));
+  const db = useDatabase();
+  const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {
-    if (identity && space) {
-      const object = space.db.add(Obj.make(Type.Expando, {}));
-      const thread1 = space.db.add(createCommentThread(identity));
-      const thread2 = space.db.add(createProposalThread(identity));
-      space.db.add(
-        Relation.make(AnchoredTo, {
+    if (identity && db) {
+      const object = db.add(Obj.make(TestSchema.Expando, {}));
+      const thread1 = db.add(createCommentThread(identity));
+      const thread2 = db.add(createProposalThread(identity));
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread1,
           [Relation.Target]: object,
           anchor: 'test',
         }),
       );
-      space.db.add(
-        Relation.make(AnchoredTo, {
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread2,
           [Relation.Target]: object,
           anchor: 'test',
         }),
       );
     }
-  }, [identity, space]);
+  }, [identity, db]);
 
-  if (!identity || !space || !anchors) {
+  if (!identity || !db || !anchors) {
     return null;
   }
 
@@ -64,17 +65,18 @@ const meta = {
   render: render(DefaultStory),
   decorators: [
     withTheme,
-    withLayout({ container: 'column', scroll: true }),
+    withLayout({ layout: '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(),
+        OperationPlugin(),
         ClientPlugin({
-          types: [DataType.Message, Thread.Thread, AnchoredTo],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
       ],
     }),