@dxos/plugin-thread 0.8.4-main.70d3990 → 0.8.4-main.74a063c4e0

package/src/capabilities/react-surface.tsx

@@ -2,90 +2,89 @@
 // Copyright 2025 DXOS.org
 //
 
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 import React from 'react';
 
-import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
-import { Obj, type Ref } from '@dxos/echo';
-import { SettingsStore } from '@dxos/local-storage';
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
 import { getSpace } from '@dxos/react-client/echo';
 import { Thread } from '@dxos/types';
 
-import {
-  CallDebugPanel,
-  CallSidebar,
-  ChannelContainer,
-  ChatContainer,
-  ThreadCompanion,
-  ThreadSettings,
-} from '../components';
-import { meta } from '../meta';
-import { Channel, type ThreadSettingsProps } from '../types';
+import { ThreadSettings } from '#components';
+import { CallDebugPanel, CallSidebar, ChannelContainer, ChatContainer, ThreadCompanion } from '#containers';
+import { meta } from '#meta';
+import { Channel, ThreadCapabilities, type Settings } from '#types';
 
-import { ThreadCapabilities } from './capabilities';
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'channel',
+        role: 'article',
+        filter: AppSurface.objectArticle(Channel.Channel),
+        component: ({ data: { subject, attendableId }, role }) => (
+          <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'chat-companion',
+        role: 'article',
+        filter: AppSurface.and(AppSurface.literalArticle('chat'), AppSurface.companionArticle(Channel.Channel)),
+        component: ({ data: { companionTo: channel } }) => {
+          const space = getSpace(channel);
+          const thread = channel.defaultThread.target;
+          if (!space || !thread) {
+            return null;
+          }
 
-export default () =>
-  contributes(Capabilities.ReactSurface, [
-    createSurface({
-      id: `${meta.id}/channel`,
-      role: 'article',
-      filter: (data): data is { subject: Channel.Channel } => Obj.instanceOf(Channel.Channel, data.subject),
-      component: ({ data: { subject }, role }) => <ChannelContainer channel={subject} role={role} />,
-    }),
-    createSurface({
-      id: `${meta.id}/chat-companion`,
-      role: 'article',
-      filter: (data): data is { companionTo: Channel.Channel; subject: 'chat' } =>
-        Obj.instanceOf(Channel.Channel, data.companionTo) && data.subject === 'chat',
-      component: ({ data: { companionTo: channel } }) => {
-        const space = getSpace(channel);
-        const thread = channel.defaultThread.target;
-        if (!space || !thread) {
-          return null;
-        }
+          return <ChatContainer thread={thread} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'thread',
+        role: 'article',
+        filter: AppSurface.objectArticle(Thread.Thread),
+        component: ({ data: { subject } }) => {
+          const space = getSpace(subject);
+          if (!space || !subject) {
+            return null;
+          }
 
-        return <ChatContainer thread={thread} space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/thread`,
-      role: 'article',
-      filter: (data): data is { subject: Thread.Thread } => Obj.instanceOf(Thread.Thread, data.subject),
-      component: ({ data: { subject } }) => {
-        const space = getSpace(subject);
-        if (!space || !subject) {
-          return null;
-        }
-
-        return <ChatContainer thread={subject} space={space} />;
-      },
-    }),
-    createSurface({
-      id: `${meta.id}/comments`,
-      role: 'article',
-      filter: (data): data is { companionTo: { threads: Ref.Ref<Thread.Thread>[] } } =>
-        data.subject === 'comments' && Obj.isObject(data.companionTo),
-      // TODO(wittjosiah): This isn't scrolling properly in a plank.
-      component: ({ data }) => <ThreadCompanion subject={data.companionTo} />,
-    }),
-    createSurface({
-      id: `${meta.id}/plugin-settings`,
-      role: 'article',
-      filter: (data): data is { subject: SettingsStore<ThreadSettingsProps> } =>
-        data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
-      component: ({ data: { subject } }) => <ThreadSettings settings={subject.value} />,
-    }),
-    createSurface({
-      id: `${meta.id}/assistant`,
-      role: 'deck-companion--active-call',
-      component: () => <CallSidebar />,
-    }),
-    createSurface({
-      id: `${meta.id}/devtools-overview`,
-      role: 'devtools-overview',
-      component: () => {
-        const call = useCapability(ThreadCapabilities.CallManager);
-        return <CallDebugPanel state={call.state} />;
-      },
-    }),
-  ]);
+          return <ChatContainer thread={subject} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'comments',
+        role: 'article',
+        filter: AppSurface.and(AppSurface.literalArticle('comments'), AppSurface.companionArticle()),
+        // TODO(wittjosiah): This isn't scrolling properly in a plank.
+        component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
+      }),
+      Surface.create({
+        id: 'plugin-settings',
+        role: 'article',
+        filter: AppSurface.settingsArticle(meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+      Surface.create({
+        id: 'assistant',
+        role: 'deck-companion--active-call',
+        component: () => <CallSidebar />,
+      }),
+      Surface.create({
+        id: 'devtools-overview',
+        role: 'devtools-overview',
+        component: () => {
+          const call = useCapability(ThreadCapabilities.CallManager);
+          const state = useAtomValue(call.stateAtom);
+          return <CallDebugPanel state={state} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/capabilities/settings.ts

@@ -2,18 +2,34 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import * as Effect from 'effect/Effect';
 
-import { meta } from '../meta';
-import { type ThreadSettingsProps, ThreadSettingsSchema } from '../types';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
 
-export default () => {
-  const settings = live<ThreadSettingsProps>({});
+import { meta } from '#meta';
+import { Settings } from '#types';
 
-  return contributes(Capabilities.Settings, {
-    prefix: meta.id,
-    schema: ThreadSettingsSchema,
-    value: settings,
-  });
-};
+import { ThreadCapabilities } from '../types/capabilities';
+
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Settings.Settings,
+      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: Settings.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/capabilities/state.ts

@@ -2,25 +2,21 @@
 // Copyright 2025 DXOS.org
 //
 
-import { contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
 
-import { type ThreadState, type ViewStore } from '../types';
+import { Capability } from '@dxos/app-framework';
 
-import { ThreadCapabilities } from './capabilities';
+import { ThreadCapabilities, type ThreadState, type ViewStore } from '#types';
 
-const initialViewState = { showResolvedThreads: false };
+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);
 
-export default () => {
-  const state = live<ThreadState>({ toolbar: {}, drafts: {} });
-  const viewStore = live<ViewStore>({});
-
-  const getViewState = (subjectId: string) => {
-    if (!viewStore[subjectId]) {
-      viewStore[subjectId] = { ...initialViewState };
-    }
-    return viewStore[subjectId];
-  };
-
-  return contributes(ThreadCapabilities.State, { state, getViewState });
-};
+    return [
+      Capability.contributes(ThreadCapabilities.State, stateAtom),
+      Capability.contributes(ThreadCapabilities.ViewState, viewStoreAtom),
+    ];
+  }),
+);

package/src/capabilities/undo-mappings.ts

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

package/src/components/Call/Call.tsx

@@ -2,16 +2,17 @@
 // 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 { useDebugMode } from '#hooks';
+import { ThreadCapabilities } from '#types';
+
 import { AudioStream } from '../Media';
 import { ParticipantGrid } from '../Participant';
-
 import { Toolbar, type ToolbarProps } from './Toolbar';
 
 //
@@ -21,7 +22,7 @@ import { Toolbar, type ToolbarProps } from './Toolbar';
 type CallRootProps = PropsWithChildren<ThemedClassName>;
 
 const CallRoot: FC<CallRootProps> = ({ children }) => {
-  return <div className='relative flex flex-col grow overflow-hidden'>{children}</div>;
+  return <div className='relative dx-container flex flex-col'>{children}</div>;
 };
 
 CallRoot.displayName = 'CallRoot';
@@ -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,11 +19,11 @@ 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 { type Channel } from '../../types';
+import { meta } from '#meta';
+import { ThreadCapabilities } from '#types';
+import { type Channel } from '#types';
 
 export type ToolbarProps = ThemedClassName<{
   channel?: Channel.Channel;
@@ -42,62 +45,65 @@ 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;
 
   // TODO(wittjosiah): In order to use toolbar, need to update to actually use the graph action callbacks directly.
   return (
     <div className={mx('z-20 flex justify-center m-8', autoHideControls && groupHoverControlItemWithTransition)}>
-      <NaturalToolbar.Root classNames={['p-2 bg-modalSurface rounded-md shadow-md', classNames]}>
+      <NaturalToolbar.Root classNames={['p-2 bg-modal-surface rounded-md shadow-md', classNames]}>
         <ToggleButton
-          active={call.media.audioEnabled}
+          active={media.audioEnabled}
           state={{
             on: {
               icon: 'ph--microphone--regular',
-              label: t('mic off'),
+              label: t('mic-off.button'),
               onClick: () => call.turnAudioOff(),
-              classNames: 'bg-callActive',
+              classNames: 'bg-call-active',
             },
             off: {
               icon: 'ph--microphone-slash--duotone',
-              label: t('mic on'),
+              label: t('mic-on.button'),
               onClick: () => call.turnAudioOn(),
-              classNames: [call.joined && 'bg-callAlert'],
             },
           }}
         />
         <ToggleButton
-          active={call.media.videoEnabled}
+          active={media.videoEnabled}
           state={{
             on: {
               icon: 'ph--video-camera--regular',
-              label: t('camera off'),
+              label: t('camera-off.button'),
               onClick: () => call.turnVideoOff(),
             },
             off: {
               icon: 'ph--video-camera-slash--duotone',
-              label: t('camera on'),
+              label: t('camera-on.button'),
               onClick: () => call.turnVideoOn(),
             },
           }}
         />
 
         {(participants !== undefined && (
-          <div className='flex justify-center items-center gap-2 is-[5rem] text-xs text-subdued'>
-            <Icon icon='ph--users--regular' size={4} />
+          <div className='flex justify-center items-center gap-2 w-[5rem] text-xs text-subdued'>
+            <Icon icon='ph--users--regular' />
             <div>{participants}</div>
           </div>
         )) || <NaturalToolbar.Separator variant='gap' />}
 
-        {call.joined && (
+        {joined && (
           <>
             <ToggleButton
               disabled={!canSharescreen}
@@ -105,51 +111,62 @@ export const Toolbar = ({
               state={{
                 on: {
                   icon: 'ph--monitor--regular',
-                  label: t('screenshare off'),
+                  label: t('screenshare-off.button'),
                   onClick: () => call.turnScreenshareOff(),
                 },
                 off: {
                   icon: 'ph--monitor-arrow-up--duotone',
-                  label: t('screenshare on'),
+                  label: t('screenshare-on.button'),
                   onClick: () => call.turnScreenshareOn(),
                 },
               }}
             />
 
             {/* 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'),
+                  label: t('lower-hand.button'),
                   onClick: () => call.setRaisedHand(false),
-                  classNames: [call.joined && 'bg-callAlert'],
                 },
                 off: {
                   icon: 'ph--hand-palm--duotone',
-                  label: t('raise hand'),
+                  label: t('raise-hand.button'),
                   onClick: () => call.setRaisedHand(true),
                 },
               }}
             />
           </>
         )}
-        {call.joined ? (
-          <IconButton variant='destructive' icon='ph--phone-x--regular' label={t('leave call')} onClick={onLeave} />
+        {joined ? (
+          <IconButton
+            variant='destructive'
+            icon='ph--phone-x--regular'
+            label={t('leave-call.button')}
+            onClick={onLeave}
+          />
         ) : (
-          <IconButton variant='primary' icon='ph--phone-incoming--regular' label={t('join call')} onClick={onJoin} />
+          <IconButton
+            variant='primary'
+            icon='ph--phone-incoming--regular'
+            label={t('join-call.button')}
+            onClick={onJoin}
+          />
         )}
       </NaturalToolbar.Root>
     </div>
@@ -174,7 +191,7 @@ const defaultButtonProps: Partial<IconButtonProps> = {
 const ToggleButton = ({ active, state }: ToolbarButtonProps) => (
   <IconButton
     {...defaultButtonProps}
-    classNames={[active ? (state.on.classNames ?? 'bg-callActive') : state.off.classNames]}
+    classNames={[active ? (state.on.classNames ?? 'bg-call-active') : state.off.classNames]}
     icon={active ? state.on.icon : state.off.icon}
     label={active ? state.on.label : state.off.label}
     onClick={active ? state.on.onClick : state.off.onClick}

package/src/components/CommentsPanel/CommentsPanel.stories.tsx

@@ -0,0 +1,93 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj, Query, Relation } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
+import { ClientPlugin } from '@dxos/plugin-client';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { random } from '@dxos/random';
+import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
+import { AnchoredTo, Message, Thread } from '@dxos/types';
+
+import { createCommentThread, createProposalThread } from '../../testing/data';
+import { translations } from '../../translations';
+import { CommentsPanel } from './CommentsPanel';
+
+random.seed(1);
+
+const DefaultStory = () => {
+  const identity = useIdentity();
+  const db = useDatabase();
+  const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
+
+  useAsyncEffect(async () => {
+    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',
+        }),
+      );
+      db.add(
+        Relation.make(AnchoredTo.AnchoredTo, {
+          [Relation.Source]: thread2,
+          [Relation.Target]: object,
+          anchor: 'test',
+        }),
+      );
+    }
+  }, [identity, db]);
+
+  if (!identity || !db || !anchors) {
+    return <Loading data={{ identity: !!identity, db: !!db, anchors: !!anchors }} />;
+  }
+
+  return <CommentsPanel anchors={anchors} onThreadDelete={console.log} onAcceptProposal={console.log} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/components/Comments',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'column' }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
+    withPluginManager({
+      plugins: [
+        OperationPlugin(),
+        RuntimePlugin(),
+        ClientPlugin({
+          types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              yield* initializeIdentity(client);
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};