@dxos/plugin-thread 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/capabilities/{blueprint-definition/blueprint-definition.ts → blueprint-definition.ts}

@@ -6,8 +6,10 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 import { AppCapabilities } from '@dxos/app-toolkit';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint } from '@dxos/compute';
 
-import { ThreadBlueprint } from '../../blueprints';
+import { ThreadBlueprint } from '#blueprints';
 
 const blueprintDefinition = Capability.makeModule<
   [],

package/src/capabilities/create-object.ts

@@ -0,0 +1,29 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+
+import { Capability } from '@dxos/app-framework';
+import { Operation } from '@dxos/compute';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { SpaceCapabilities } from '@dxos/plugin-space';
+import { Channel } from '@dxos/types';
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    return Capability.contributes(SpaceCapabilities.CreateObjectEntry, {
+      id: Channel.Channel.typename,
+      createObject: (props, options) =>
+        Effect.gen(function* () {
+          const object = Channel.make(props);
+          return yield* Operation.invoke(SpaceOperation.AddObject, {
+            object,
+            target: options.target,
+            hidden: true,
+            targetNodeId: options.targetNodeId,
+          });
+        }),
+    });
+  }),
+);

package/src/capabilities/index.ts

@@ -2,13 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './app-graph-builder';
-export * from './blueprint-definition';
-export * from './call-manager';
-export * from './markdown';
-export * from './operation-handler';
-export * from './undo-mappings';
-export * from './react-root';
-export * from './react-surface';
-export * from './settings';
-export * from './state';
+import { Capability } from '@dxos/app-framework';
+// eslint-disable-next-line unused-imports/no-unused-imports
+import type { Blueprint, OperationHandlerSet } from '@dxos/compute';
+
+export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
+export const BlueprintDefinition = Capability.lazy('BlueprintDefinition', () => import('./blueprint-definition'));
+export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
+export const Markdown = Capability.lazy('Markdown', () => import('./markdown'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);
+export const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));
+export const ThreadSettings = Capability.lazy('ThreadSettings', () => import('./settings'));
+export const ThreadState = Capability.lazy('ThreadState', () => import('./state'));
+export const UndoMappings = Capability.lazy('UndoMappings', () => import('./undo-mappings'));

package/src/capabilities/{markdown/markdown.ts → markdown.ts}

@@ -6,13 +6,14 @@ import { EditorView } from '@codemirror/view';
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { companionSegment } from '@dxos/app-toolkit';
-import { DeckOperation } from '@dxos/plugin-deck/operations';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { MarkdownCapabilities } from '@dxos/plugin-markdown';
+import { linkedSegment } from '@dxos/react-ui-attention';
 import { type EditorState, commentClickedEffect, commentsState, documentId, overlap } from '@dxos/ui-editor';
 
-import { threads } from '../../extensions';
-import { ThreadCapabilities } from '../../types';
+import { ThreadCapabilities } from '#types';
+
+import { threads } from '../extensions';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -27,7 +28,9 @@ export default Capability.makeModule(
         return threads({ registry, stateAtom }, doc, invokePromise);
       },
       ({ document: doc }) => {
-        if (!doc) return [];
+        if (!doc) {
+          return [];
+        }
         const registry = capabilities.get(Capabilities.AtomRegistry);
         const stateAtom = capabilities.get(ThreadCapabilities.State);
 
@@ -44,15 +47,17 @@ export default Capability.makeModule(
         });
       },
       ({ document: doc }) => {
-        if (!doc) return [];
+        if (!doc) {
+          return [];
+        }
         const { invokePromise } = capabilities.get(Capabilities.OperationInvoker);
 
         return EditorView.updateListener.of((update) => {
           update.transactions.forEach((transaction) => {
             transaction.effects.forEach(async (effect) => {
               if (effect.is(commentClickedEffect)) {
-                void invokePromise(DeckOperation.ChangeCompanion, {
-                  companion: companionSegment('comments'),
+                void invokePromise(LayoutOperation.UpdateCompanion, {
+                  subject: linkedSegment('comments'),
                 });
               }
             });

package/src/capabilities/{operation-handler/operation-handler.ts → operation-handler.ts}

@@ -5,9 +5,9 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import type { OperationHandlerSet } from '@dxos/operation';
+import type { OperationHandlerSet } from '@dxos/compute';
 
-import { ThreadOperationHandlerSet } from '../../operations';
+import { ThreadOperationHandlerSet } from '#operations';
 
 export default Capability.makeModule<OperationHandlerSet.OperationHandlerSet>(
   Effect.fnUntraced(function* () {

package/src/capabilities/react-surface.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { Surface, useSettingsState } from '@dxos/app-framework/ui';
+import { AppSurface } from '@dxos/app-toolkit/ui';
+import { getSpace } from '@dxos/react-client/echo';
+import { Channel, Thread } from '@dxos/types';
+
+import { ThreadSettings } from '#components';
+import { ChannelChat, ChannelArticle, ThreadCompanion, ThreadContainer } from '#containers';
+import { meta } from '#meta';
+import { type Settings } from '#types';
+
+export default Capability.makeModule(() =>
+  Effect.succeed(
+    Capability.contributes(Capabilities.ReactSurface, [
+      Surface.create({
+        id: 'channel',
+        filter: AppSurface.object(AppSurface.Article, Channel.Channel),
+        component: ({ data: { subject, attendableId }, role }) => (
+          <ChannelArticle role={role} subject={subject} attendableId={attendableId} />
+        ),
+      }),
+      Surface.create({
+        id: 'chat-companion',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'chat'),
+          AppSurface.companion(AppSurface.Article, Channel.Channel),
+        ),
+        component: ({ data: { companionTo: channel } }) => {
+          const space = getSpace(channel);
+          if (!space) {
+            return null;
+          }
+
+          return <ChannelChat channel={channel} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'thread',
+        filter: AppSurface.object(AppSurface.Article, Thread.Thread),
+        component: ({ data: { subject } }) => {
+          const space = getSpace(subject);
+          if (!space || !subject) {
+            return null;
+          }
+
+          return <ThreadContainer thread={subject} space={space} />;
+        },
+      }),
+      Surface.create({
+        id: 'comments',
+        filter: AppSurface.allOf(
+          AppSurface.literal(AppSurface.Article, 'comments'),
+          AppSurface.companion(AppSurface.Article),
+        ),
+        // TODO(wittjosiah): This isn't scrolling properly in a plank.
+        component: ({ data }) => <ThreadCompanion attendableId={data.attendableId} subject={data.companionTo} />,
+      }),
+      Surface.create({
+        id: 'plugin-settings',
+        filter: AppSurface.settings(AppSurface.Article, meta.id),
+        component: ({ data: { subject } }) => {
+          const { settings, updateSettings } = useSettingsState<Settings.Settings>(subject.atom);
+          return <ThreadSettings settings={settings} onSettingsChange={updateSettings} />;
+        },
+      }),
+    ]),
+  ),
+);

package/src/capabilities/{settings/settings.ts → settings.ts}

@@ -8,15 +8,14 @@ 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';
+import { meta } from '#meta';
+import { Settings, ThreadCapabilities } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {
     const settingsAtom = createKvsStore({
       key: meta.id,
-      schema: ThreadSettingsSchema,
+      schema: Settings.Settings,
       defaultValue: () => ({}),
     });
 
@@ -26,7 +25,7 @@ export default Capability.makeModule(() =>
       // Contribute to common settings for UI discovery.
       Capability.contributes(AppCapabilities.Settings, {
         prefix: meta.id,
-        schema: ThreadSettingsSchema,
+        schema: Settings.Settings,
         atom: settingsAtom,
       }),
     ];

package/src/capabilities/{state/state.ts → state.ts}

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
 
-import { ThreadCapabilities, type ThreadState, type ViewStore } from '../../types';
+import { ThreadCapabilities, type ThreadState, type ViewStore } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {

package/src/capabilities/{undo-mappings/undo-mappings.ts → undo-mappings.ts}

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 
-import { meta } from '../../meta';
-import { ThreadOperation } from '../../operations';
+import { meta } from '#meta';
+import { ThreadOperation } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
@@ -24,7 +24,7 @@ export default Capability.makeModule(
             anchor: output.anchor,
           };
         },
-        message: ['thread deleted label', { ns: meta.id }],
+        message: ['thread-deleted.label', { ns: meta.id }],
       }),
       UndoMapping.make({
         operation: ThreadOperation.DeleteMessage,
@@ -39,7 +39,7 @@ export default Capability.makeModule(
             messageIndex: output.messageIndex,
           };
         },
-        message: ['message deleted label', { ns: meta.id }],
+        message: ['message-deleted.label', { ns: meta.id }],
       }),
     ]);
   }),

package/src/components/Chat/Chat.tsx

@@ -0,0 +1,258 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type RefObject, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+import { type SpaceMember } from '@dxos/react-client/echo';
+import { type Identity } from '@dxos/react-client/halo';
+import { ScrollArea, type ThemedClassName, useThemeContext, useTranslation } from '@dxos/react-ui';
+import {
+  type MessageMetadata,
+  MessageTextbox,
+  Thread as ThreadComponent,
+  type ThreadRootProps,
+  threadLayout,
+} from '@dxos/react-ui-thread';
+import { type Message } from '@dxos/types';
+import { createBasicExtensions, createThemeExtensions, listener, type Extension } from '@dxos/ui-editor';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+import { isNonNullable } from '@dxos/util';
+
+import { meta } from '#meta';
+
+import { command } from '../../extensions';
+import { getMessageMetadata } from '../../util';
+import { MessagePanel } from '../MessagePanel';
+
+export type ChatProps = ThemedClassName<
+  {
+    /** Stable id used for the underlying thread root and message metadata. */
+    id: string;
+    /** Identity used to attribute outgoing messages in the textbox metadata. */
+    identity?: Identity;
+    /** Space members for rendering sender names/avatars on incoming messages. */
+    members: SpaceMember[];
+    /** Messages to render in order. */
+    messages: readonly Message.Message[];
+    /** Activity indicator (e.g. processing) shown beneath the textbox. */
+    activity?: boolean;
+    /**
+     * Called with the user's textbox content when they press send.
+     * Returning `true` signals the message was accepted; the textbox is then cleared.
+     */
+    onSend: (text: string) => boolean;
+    autoFocusTextbox?: boolean;
+    /**
+     * Where the composer sits relative to the messages.
+     * - `'top'` (default) — composer follows the messages at intrinsic height,
+     *   suitable for inline comment threads.
+     * - `'bottom'` — composer pinned to the bottom of the panel, messages
+     *   scrolling above it. Suitable for full-panel multi-party chat.
+     */
+    orientation?: ChatOrientation;
+    /**
+     * When true, hide the composer textbox and activity indicator. Used for
+     * channels whose source-of-truth lives elsewhere (e.g. externally-synced
+     * Slack/Discord channels keyed by a foreign id) — sending isn't meaningful
+     * because there is no local-write path back to the source.
+     */
+    readOnly?: boolean;
+  } & Pick<ThreadRootProps, 'current'>
+>;
+
+export type ChatOrientation = 'top' | 'bottom';
+
+/**
+ * Pure chat UI: scrollable message list + composer textbox + activity indicator.
+ * Owns its own UI state (textbox content, scroll position, editor extensions) but
+ * does not load data or invoke operations — the caller passes messages and an
+ * `onSend` callback. Used by both `ThreadContainer` (AutoMerge `Thread`) and
+ * `ChannelArticle`'s feed-backed channel chat.
+ */
+export const Chat = composable<HTMLDivElement, ChatProps>(
+  (
+    {
+      id,
+      identity,
+      members,
+      messages,
+      activity,
+      onSend,
+      autoFocusTextbox,
+      current,
+      orientation = 'top',
+      readOnly,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const { themeMode } = useThemeContext();
+
+    const scrollRef = useRef<HTMLDivElement | null>(null);
+    const sentinelRef = useRef<HTMLDivElement | null>(null);
+    const [autoFocus, setAutoFocus] = useState(autoFocusTextbox);
+
+    // Force the editor to remount after a successful send so its content resets.
+    const [_count, _setCount] = useState(0);
+
+    const textboxMetadata = getMessageMetadata(id, identity);
+    const messageRef = useRef('');
+    const extensions = useMemo(
+      () => [
+        createBasicExtensions({ placeholder: t('message.placeholder') }),
+        createThemeExtensions({ themeMode }),
+        listener({ onChange: ({ text }) => (messageRef.current = text) }),
+        command,
+      ],
+      [themeMode, _count],
+    );
+
+    const scrollToEnd = (behavior: ScrollBehavior) =>
+      setTimeout(() => sentinelRef.current?.scrollIntoView({ behavior, block: 'end' }), 10);
+
+    useLayoutEffect(() => {
+      scrollToEnd('instant');
+    }, []);
+    // NOTE: Auto-scroll on new messages is intentionally not implemented here. Smooth-scroll
+    // animations were causing ResizeObserver feedback loops with CodeMirror/ScrollArea. The
+    // proper fix is "scroll only if user is already at the bottom" — deferred to a follow-up.
+
+    const handleSend = () => {
+      const text = messageRef.current;
+      if (!text?.length) {
+        return false;
+      }
+
+      const accepted = onSend(text);
+      if (!accepted) {
+        return false;
+      }
+
+      messageRef.current = '';
+      setAutoFocus(true);
+      scrollToEnd('smooth');
+      _setCount((count) => count + 1);
+      return true;
+    };
+
+    const filteredMessages = messages.filter(isNonNullable);
+    const renderState: ChatRenderState = {
+      messages: filteredMessages,
+      members,
+      activity,
+      extensions,
+      autoFocus,
+      handleSend,
+      textboxMetadata,
+      scrollRef,
+      sentinelRef,
+      readOnly,
+    };
+
+    return orientation === 'bottom' ? (
+      <ChannelLayout
+        {...composableProps(props, { classNames: 'flex flex-col bs-full min-h-0' })}
+        id={id}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    ) : (
+      <ThreadLayout
+        {...composableProps(props, { classNames: 'dx-container grid-rows-[1fr_min-content_min-content]' })}
+        id={id}
+        current={current}
+        ref={forwardedRef}
+        state={renderState}
+      />
+    );
+  },
+);
+
+//
+// Internal layout helpers — share state via the ChatRenderState bag.
+//
+
+type ChatRenderState = {
+  messages: Message.Message[];
+  members: SpaceMember[];
+  activity?: boolean;
+  extensions: Extension[];
+  autoFocus?: boolean;
+  handleSend: () => boolean;
+  textboxMetadata: MessageMetadata;
+  scrollRef: RefObject<HTMLDivElement | null>;
+  sentinelRef: RefObject<HTMLDivElement | null>;
+  readOnly?: boolean;
+};
+
+type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
+  id: string;
+  state: ChatRenderState;
+};
+
+/** Thread layout — composer follows messages at intrinsic height. */
+const ThreadLayout = React.forwardRef<HTMLDivElement, LayoutProps & Pick<ThreadRootProps, 'current'>>(
+  ({ id, current, state, ...props }, ref) => {
+    const { t } = useTranslation(meta.id);
+    const { messages, members, activity, extensions, autoFocus, handleSend, textboxMetadata, sentinelRef, readOnly } =
+      state;
+    return (
+      <ThreadComponent.Root {...props} id={id} current={current} ref={ref}>
+        <ScrollArea.Root classNames='col-span-2' orientation='vertical'>
+          <ScrollArea.Viewport ref={sentinelRef}>
+            <div className={mx(threadLayout, 'place-self-end')}>
+              {messages.map((message) => (
+                <MessagePanel key={message.id} message={message} members={members} />
+              ))}
+            </div>
+          </ScrollArea.Viewport>
+        </ScrollArea.Root>
+        {!readOnly && (
+          <>
+            <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+            <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+          </>
+        )}
+      </ThreadComponent.Root>
+    );
+  },
+);
+
+/** Channel layout — composer pinned to the bottom, messages scroll above it. */
+const ChannelLayout = React.forwardRef<HTMLDivElement, LayoutProps>(({ id, state, ...props }, ref) => {
+  const { t } = useTranslation(meta.id);
+  const {
+    messages,
+    members,
+    activity,
+    extensions,
+    autoFocus,
+    handleSend,
+    textboxMetadata,
+    scrollRef,
+    sentinelRef,
+    readOnly,
+  } = state;
+  return (
+    <div {...props} id={id} ref={ref}>
+      <div ref={scrollRef} className='flex-1 min-h-0 overflow-y-auto'>
+        {messages.map((message) => (
+          <div key={message.id} className='grid grid-cols-[var(--dx-rail-size)_1fr] w-full'>
+            <MessagePanel message={message} members={members} />
+          </div>
+        ))}
+        <div ref={sentinelRef} />
+      </div>
+      {!readOnly && (
+        <>
+          <div className='shrink-0 grid grid-cols-[var(--dx-rail-size)_1fr]'>
+            <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+          </div>
+          <div className='shrink-0 px-2 pb-1 text-xs text-description'>{activity ? t('activity.message') : null}</div>
+        </>
+      )}
+    </div>
+  );
+});

package/src/components/Chat/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Chat';

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

@@ -6,29 +6,30 @@ 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 { ProcessManagerPlugin } 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 { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { faker } from '@dxos/random';
-import { useDatabase, useQuery } from '@dxos/react-client/echo';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } 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 { translations } from '../../translations';
+import { translations } from '#translations';
 
-import { CommentsPanel } from './CommentsPanel';
 import { createCommentThread, createProposalThread } from '../../testing/data';
+import { CommentsPanel } from './CommentsPanel';
 
-faker.seed(1);
+random.seed(1);
 
 const DefaultStory = () => {
   const identity = useIdentity();
-  const db = useDatabase();
+  const [space] = useSpaces();
+  const db = space?.db;
   const anchors = useQuery(db, Query.type(AnchoredTo.AnchoredTo));
 
   useAsyncEffect(async () => {
@@ -70,8 +71,7 @@ const meta = {
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
       plugins: [
-        OperationPlugin(),
-        RuntimePlugin(),
+        ProcessManagerPlugin(),
         ClientPlugin({
           types: [Message.Message, Thread.Thread, AnchoredTo.AnchoredTo],
           onClientInitialized: ({ client }) =>

package/src/components/CommentsPanel/CommentsPanel.tsx

@@ -8,7 +8,7 @@ import { Obj, Relation } from '@dxos/echo';
 import { Icon, Message, Trans, useTranslation } from '@dxos/react-ui';
 import { type AnchoredTo, type Thread } from '@dxos/types';
 
-import { meta } from '../../meta';
+import { meta } from '#meta';
 
 import { CommentsThread, type CommentsThreadProps } from './CommentsThread';
 
@@ -41,19 +41,19 @@ export const CommentsPanel = ({ anchors, currentId, showResolvedThreads, ...prop
 
   if (filteredAnchors.length === 0) {
     return (
-      <div role='none' className='p-form-padding'>
+      <div className='p-form-padding'>
         <Message.Root>
-          <Message.Title>
+          <Message.Content>
             <Trans
               {...{
                 t,
-                i18nKey: 'no comments message',
+                i18nKey: 'no-comments.message',
                 components: {
-                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='w-block' />,
+                  commentIcon: <Icon icon='ph--chat-text--regular' size={4} classNames='dx-icon-inline' />,
                 },
               }}
             />
-          </Message.Title>
+          </Message.Content>
         </Message.Root>
       </div>
     );