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

package/src/capabilities/settings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ThreadSettings = Capability.lazy('ThreadSettings', () => import('./settings'));

package/src/capabilities/settings/settings.ts

@@ -0,0 +1,34 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+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';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: ThreadSettingsSchema,
+      defaultValue: () => ({}),
+    });
+
+    return [
+      // Expose atom directly for programmatic access.
+      Capability.contributes(ThreadCapabilities.Settings, settingsAtom),
+      // Contribute to common settings for UI discovery.
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: ThreadSettingsSchema,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/capabilities/state/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+
+export const ThreadState = Capability.lazy('ThreadState', () => import('./state'));

package/src/capabilities/state/state.ts

@@ -0,0 +1,22 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+
+import { ThreadCapabilities, type ThreadState, type ViewStore } from '../../types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const stateAtom = Atom.make<ThreadState>({ toolbar: {}, drafts: {} }).pipe(Atom.keepAlive);
+    const viewStoreAtom = Atom.make<ViewStore>({}).pipe(Atom.keepAlive);
+
+    return [
+      Capability.contributes(ThreadCapabilities.State, stateAtom),
+      Capability.contributes(ThreadCapabilities.ViewState, viewStoreAtom),
+    ];
+  }),
+);

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/react';
+import { useCapability } from '@dxos/app-framework/ui';
 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,10 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
 import React from 'react';
 
-import { useAppGraph, useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
+import { Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions, useNode } from '@dxos/plugin-graph';
 import {
   Icon,
@@ -16,10 +19,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 +45,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 && 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 +65,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 +77,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 +104,7 @@ export const Toolbar = ({
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -117,25 +124,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 +155,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/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/react';
+import { useCapability } from '@dxos/app-framework/ui';
 
-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,10 +5,10 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { contributes } from '@dxos/app-framework';
+import { Capability } 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 { AppCapabilities } from '@dxos/app-toolkit';
+import { Query, useDatabase, useQuery } from '@dxos/react-client/echo';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { render } from '@dxos/storybook-utils';
 import { Message, Thread } from '@dxos/types';
@@ -21,13 +21,13 @@ 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 = {
@@ -35,11 +35,11 @@ const meta = {
   component: ChannelContainer,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
-    withLayout({ container: 'column' }),
+    withTheme(),
+    withLayout({ layout: 'column' }),
     withPluginManager({
       plugins: [...(await createThreadPlugins())],
-      capabilities: [contributes(ClientCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
+      capabilities: [Capability.contributes(AppCapabilities.Schema, [Channel.Channel, Thread.Thread, Message.Message])],
     }),
   ],
   parameters: {
@@ -54,6 +54,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,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Atom } from '@effect-atom/atom-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/react';
+import { useCapabilities, useCapability } from '@dxos/app-framework/ui';
+import { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';
 import { Context } from '@dxos/context';
 import { failUndefined } from '@dxos/debug';
 import { Obj } from '@dxos/echo';
@@ -14,35 +15,37 @@ import { useClient } from '@dxos/react-client';
 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';
+import { Settings } 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 { 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 joined = useAtomValue(callManager.joinedAtom);
+  const currentRoomId = useAtomValue(callManager.roomIdAtom);
   const attendableId = channel ? Obj.getDXN(channel).toString() : undefined;
-  const roomId = _roomId ?? attendableId ?? failUndefined();
+  const roomId = roomIdProp ?? attendableId ?? failUndefined();
   const identity = useIdentity();
   const isNamed = !!identity?.profile?.displayName;
   const joinSound = useSoundEffect('JoinCall');
@@ -83,7 +86,7 @@ export const ChannelContainer = ({ channel, roomId: _roomId, role, fullscreen }:
       return;
     }
 
-    if (callManager.joined) {
+    if (joined) {
       await callManager.leave();
     }
 
@@ -96,7 +99,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.
@@ -115,7 +118,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}>
@@ -146,19 +149,19 @@ const DisplayNameMissing = () => {
   const handleSave = useCallback(() => client.halo.updateProfile({ displayName }), [client, displayName]);
 
   return (
-    <ControlGroup classNames='p-4 place-content-center'>
-      <ControlItemInput title={t('display name label')} description={t('display name description')}>
+    <Settings.Group classNames='p-4 place-content-center'>
+      <Settings.ItemInput title={t('display name label')} description={t('display name description')}>
         <Input.TextInput
           value={displayName}
           onChange={handleChange}
           placeholder={t('display name input placeholder')}
           classNames='md:min-is-64'
         />
-      </ControlItemInput>
-      <ControlGroupButton disabled={!displayName} onClick={handleSave}>
+      </Settings.ItemInput>
+      <Settings.GroupButton disabled={!displayName} onClick={handleSave}>
         {t('set display name label')}
-      </ControlGroupButton>
-    </ControlGroup>
+      </Settings.GroupButton>
+    </Settings.Group>
   );
 };
 

package/src/components/Chat.stories.tsx

@@ -5,8 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, IntentPlugin, contributes, createSurface } from '@dxos/app-framework';
+import { Capabilities, Capability, OperationPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface } from '@dxos/app-framework/ui';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
@@ -45,7 +46,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>
   );
@@ -56,13 +57,13 @@ const meta = {
   component: ThreadComponent.Root as any,
   render: render(DefaultStory),
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
-      plugins: [IntentPlugin()],
+      plugins: [OperationPlugin()],
       capabilities: [
-        contributes(
+        Capability.contributes(
           Capabilities.ReactSurface,
-          createSurface({
+          Surface.create({
             id: 'test',
             role: 'card',
             component: ({ role }) => <span>{JSON.stringify({ role })}</span>,

package/src/components/ChatContainer.tsx

@@ -8,9 +8,7 @@ import { Obj, Ref } from '@dxos/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,
@@ -19,6 +17,8 @@ import {
   threadLayout,
 } from '@dxos/react-ui-thread';
 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';
@@ -44,7 +44,7 @@ export type ChatContainerProps = ThemedClassName<
   {
     space: Space;
     thread: Thread.Thread;
-    context?: Obj.Any;
+    context?: Obj.Unknown;
     autoFocusTextbox?: boolean;
   } & Pick<ThreadRootProps, 'current'>
 >;
@@ -60,7 +60,7 @@ export const ChatContainer = ({
   const { t } = useTranslation(meta.id);
   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);
@@ -98,16 +98,18 @@ export const ChatContainer = ({
       return false;
     }
 
-    thread.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,
-        }),
-      ),
-    );
+    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);
@@ -126,8 +128,8 @@ export const ChatContainer = ({
         classNames,
       ]}
     >
-      <ScrollArea.Root classNames='col-span-2'>
-        <ScrollArea.Viewport classNames='overflow-anchored after:overflow-anchor after:block after:bs-px after:-mbs-px [&>div]:min-bs-full [&>div]:!grid [&>div]:grid-rows-[1fr_0]'>
+      <ScrollArea.Root orientation='vertical'>
+        <ScrollArea.Viewport classNames='col-span-2'>
           <div role='none' className={mx(threadLayout, 'place-self-end')}>
             {thread.messages
               .map((message) => message.target)
@@ -136,11 +138,8 @@ export const ChatContainer = ({
                 <MessageContainer key={message.id} message={message} members={members} />
               ))}
           </div>
-          {/* NOTE(thure): This can’t also be the `overflow-anchor` because `ScrollArea` injects an interceding node that contains this necessary ref’d element. */}
+          {/* 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.Root>
 

package/src/components/Comments.stories.tsx

@@ -3,14 +3,16 @@
 //
 
 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';
@@ -26,22 +28,22 @@ faker.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const space = useSpace();
-  const anchors = useQuery(space, Query.type(AnchoredTo.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(
+    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(
+      db.add(
         Relation.make(AnchoredTo.AnchoredTo, {
           [Relation.Source]: thread2,
           [Relation.Target]: object,
@@ -49,9 +51,9 @@ const DefaultStory = () => {
         }),
       );
     }
-  }, [identity, space]);
+  }, [identity, db]);
 
-  if (!identity || !space || !anchors) {
+  if (!identity || !db || !anchors) {
     return null;
   }
 
@@ -62,18 +64,19 @@ const meta = {
   title: 'plugins/plugin-thread/Comments',
   render: render(DefaultStory),
   decorators: [
-    withTheme,
-    withLayout({ container: 'column', scroll: true }),
+    withTheme(),
+    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: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
-          onClientInitialized: async ({ client }) => {
-            await client.halo.createIdentity();
-          },
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* Effect.promise(() => client.halo.createIdentity());
+            }),
         }),
       ],
     }),