@dxos/plugin-thread 0.10.0 → 0.11.1

package/dx.config.ts

@@ -24,10 +24,11 @@ export default Config2.make({
 
       The shared message and thread UI comes from @dxos/react-ui-thread; the Channel,
       Message, and Thread schema come from @dxos/types. Document comments and the
-      comment-thread AI agent live in the @dxos/plugin-comments plugin.
+      comment-thread AI agent live in the @dxos/plugin-review plugin.
     `,
     source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-thread',
     icon: { key: 'ph--video-conference--regular', hue: 'rose' },
     spec: 'PLUGIN.mdl',
+    tags: ['alpha'],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,34 +14,38 @@
   "type": "module",
   "imports": {
     "#capabilities": {
-      "source": "./src/capabilities/index.ts",
+      "source": {
+        "node": "./src/capabilities/node.ts",
+        "default": "./src/capabilities/index.ts"
+      },
       "types": "./dist/types/src/capabilities/index.d.ts",
-      "default": "./dist/lib/neutral/capabilities/index.mjs"
+      "node": "./dist/lib/capabilities/node.mjs",
+      "default": "./dist/lib/capabilities.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
       "types": "./dist/types/src/components/index.d.ts",
-      "default": "./dist/lib/neutral/components/index.mjs"
+      "default": "./dist/lib/components.mjs"
     },
     "#containers": {
       "source": "./src/containers/index.ts",
       "types": "./dist/types/src/containers/index.d.ts",
-      "default": "./dist/lib/neutral/containers/index.mjs"
+      "default": "./dist/lib/containers.mjs"
     },
     "#hooks": {
       "source": "./src/hooks/index.ts",
       "types": "./dist/types/src/hooks/index.d.ts",
-      "default": "./dist/lib/neutral/hooks/index.mjs"
+      "default": "./dist/lib/hooks.mjs"
     },
     "#meta": {
       "source": "./src/meta.ts",
       "types": "./dist/types/src/meta.d.ts",
-      "default": "./dist/lib/neutral/meta.mjs"
+      "default": "./dist/lib/meta.mjs"
     },
     "#operations": {
       "source": "./src/operations/index.ts",
       "types": "./dist/types/src/operations/index.d.ts",
-      "default": "./dist/lib/neutral/operations/index.mjs"
+      "default": "./dist/lib/operations.mjs"
     },
     "#plugin": {
       "source": {
@@ -50,42 +54,42 @@
         "default": "./src/ThreadPlugin.tsx"
       },
       "types": "./dist/types/src/ThreadPlugin.d.ts",
-      "workerd": "./dist/lib/neutral/ThreadPlugin.workerd.mjs",
-      "node": "./dist/lib/neutral/ThreadPlugin.node.mjs",
-      "default": "./dist/lib/neutral/ThreadPlugin.mjs"
+      "workerd": "./dist/lib/ThreadPlugin.workerd.mjs",
+      "node": "./dist/lib/ThreadPlugin.node.mjs",
+      "default": "./dist/lib/ThreadPlugin.mjs"
     },
     "#translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "default": "./dist/lib/translations.mjs"
     },
     "#types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "default": "./dist/lib/types.mjs"
     }
   },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
-      "default": "./dist/lib/neutral/index.mjs"
+      "import": "./dist/lib/index.mjs"
     },
     "./assets/PLUGIN.mdl": "./PLUGIN.mdl",
     "./plugin": {
       "source": "./src/plugin.ts",
       "types": "./dist/types/src/plugin.d.ts",
-      "default": "./dist/lib/neutral/plugin.mjs"
+      "import": "./dist/lib/plugin.mjs"
     },
     "./translations": {
       "source": "./src/translations.ts",
       "types": "./dist/types/src/translations.d.ts",
-      "default": "./dist/lib/neutral/translations.mjs"
+      "import": "./dist/lib/translations.mjs"
     },
     "./types": {
       "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts",
-      "default": "./dist/lib/neutral/types/index.mjs"
+      "import": "./dist/lib/types.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -97,25 +101,28 @@
   ],
   "dependencies": {
     "@effect-atom/atom-react": "^0.5.0",
-    "@dxos/app-framework": "0.10.0",
-    "@dxos/client-protocol": "0.10.0",
-    "@dxos/app-toolkit": "0.10.0",
-    "@dxos/client": "0.10.0",
-    "@dxos/display-name": "0.10.0",
-    "@dxos/echo": "0.10.0",
-    "@dxos/compute": "0.10.0",
-    "@dxos/echo-client": "0.10.0",
-    "@dxos/keys": "0.10.0",
-    "@dxos/plugin-calls": "0.10.0",
-    "@dxos/invariant": "0.10.0",
-    "@dxos/plugin-graph": "0.10.0",
-    "@dxos/plugin-client": "0.10.0",
-    "@dxos/plugin-space": "0.10.0",
-    "@dxos/random": "0.10.0",
-    "@dxos/react-client": "0.10.0",
-    "@dxos/react-ui-thread": "0.10.0",
-    "@dxos/types": "0.10.0",
-    "@dxos/util": "0.10.0"
+    "@dxos/app-framework": "0.11.1",
+    "@dxos/app-toolkit": "0.11.1",
+    "@dxos/client": "0.11.1",
+    "@dxos/client-protocol": "0.11.1",
+    "@dxos/compute": "0.11.1",
+    "@dxos/display-name": "0.11.1",
+    "@dxos/echo": "0.11.1",
+    "@dxos/echo-client": "0.11.1",
+    "@dxos/echo-react": "0.11.1",
+    "@dxos/halo": "0.11.1",
+    "@dxos/invariant": "0.11.1",
+    "@dxos/keys": "0.11.1",
+    "@dxos/halo-react": "0.11.1",
+    "@dxos/plugin-calls": "0.11.1",
+    "@dxos/plugin-graph": "0.11.1",
+    "@dxos/plugin-client": "0.11.1",
+    "@dxos/plugin-space": "0.11.1",
+    "@dxos/react-client": "0.11.1",
+    "@dxos/react-ui-thread": "0.11.1",
+    "@dxos/util": "0.11.1",
+    "@dxos/random": "0.11.1",
+    "@dxos/types": "0.11.1"
   },
   "devDependencies": {
     "@types/react": "~19.2.17",
@@ -123,22 +130,23 @@
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.0.16",
-    "@dxos/plugin-testing": "0.10.0",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-menu": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0"
+    "vite": "^8.1.4",
+    "@dxos/react-ui": "0.11.1",
+    "@dxos/react-ui-form": "0.11.1",
+    "@dxos/react-ui-menu": "0.11.1",
+    "@dxos/plugin-testing": "0.11.1",
+    "@dxos/react-ui-mosaic": "0.11.1",
+    "@dxos/ui-theme": "0.11.1"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "effect": "3.21.4",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "0.10.0",
-    "@dxos/react-ui-form": "0.10.0",
-    "@dxos/ui-theme": "0.10.0",
-    "@dxos/react-ui-menu": "0.10.0"
+    "@dxos/react-ui-form": "^0.11.1",
+    "@dxos/react-ui": "^0.11.1",
+    "@dxos/react-ui-menu": "^0.11.1",
+    "@dxos/ui-theme": "^0.11.1"
   },
   "publishConfig": {
     "access": "public"

package/src/ThreadPlugin.node.ts

@@ -6,11 +6,10 @@ import { ActivationEvents, Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
 import { Channel, Message, Thread } from '@dxos/types';
 
-import { ChannelBackendFeed, CreateObject, OperationHandler } from '#capabilities';
+import { ChannelBackendFeed, OperationHandler } from '#capabilities';
 import { meta } from '#meta';
 
 export const ThreadPlugin = Plugin.define(meta).pipe(
-  AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSchemaModule({
     schema: [Channel.Channel, Message.Message, Thread.Thread],

package/src/ThreadPlugin.test.ts

@@ -19,9 +19,12 @@ describe('ThreadPlugin', () => {
       plugins: [ClientPlugin({}), ThreadPlugin()],
     });
 
-    // After autoStart: CreateObject, schema, OperationHandler all auto-cascade.
+    // After autoStart: schema and OperationHandler auto-cascade. `CreateObject` is browser-only —
+    // its `CreateObjectEntry` carries a `customPanel` React component — so the node variant this
+    // test resolves does not contribute it.
     expect(harness.manager.getActive()).toEqual(
-      expect.arrayContaining([moduleId('CreateObject'), moduleId('schema'), moduleId('OperationHandler')]),
+      expect.arrayContaining([moduleId('schema'), moduleId('OperationHandler')]),
     );
+    expect(harness.manager.getActive()).not.toContain(moduleId('CreateObject'));
   });
 });

package/src/ThreadPlugin.tsx

@@ -4,18 +4,10 @@
 
 import { ActivationEvents, Plugin } from '@dxos/app-framework';
 import { AppPlugin } from '@dxos/app-toolkit';
-import { ClientEvents } from '@dxos/plugin-client';
 import { translations as threadTranslations } from '@dxos/react-ui-thread/translations';
 import { Channel, Message, Thread } from '@dxos/types';
 
-import {
-  AppGraphBuilder,
-  ChannelBackendFeed,
-  CreateObject,
-  NavigationResolver,
-  OperationHandler,
-  ReactSurface,
-} from '#capabilities';
+import { AppGraphBuilder, ChannelBackendFeed, CreateObject, OperationHandler, ReactSurface } from '#capabilities';
 import { meta } from '#meta';
 import { translations } from '#translations';
 
@@ -26,7 +18,6 @@ import pluginSpec from '../PLUGIN.mdl?raw';
 
 export const ThreadPlugin = Plugin.define(meta).pipe(
   AppPlugin.addAppGraphModule({ activate: AppGraphBuilder }),
-  AppPlugin.addNavigationResolverModule({ activatesOn: ClientEvents.ClientReady, activate: NavigationResolver }),
   AppPlugin.addCreateObjectModule({ activate: CreateObject }),
   AppPlugin.addOperationHandlerModule({ activate: OperationHandler }),
   AppPlugin.addSchemaModule({

package/src/capabilities/app-graph-builder.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import { AppCapabilities, AppNode, AppNodeMatcher, Paths, TypeSection } from '@dxos/app-toolkit';
+import { AppCapabilities, AppNode, AppNodeMatcher, GraphPath, TypeSection } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { Obj, Type } from '@dxos/echo';
 import { CallsCapabilities } from '@dxos/plugin-calls/types';
@@ -26,7 +26,9 @@ export default Capability.makeModule(
 
     const extensions = yield* Effect.all([
       TypeSection.createTypeSectionExtension(Channel.Channel, {
-        match: AppNodeMatcher.whenNavTreeGroup(Paths.GroupTypes.communications),
+        urlKey: 'channel',
+        match: AppNodeMatcher.whenNavTreeGroup(GraphPath.GroupTypes.communications),
+        groupSegment: GraphPath.GroupSegments.communications,
         createObject: (space) =>
           Operation.invoke(SpaceOperation.OpenCreateObject, {
             target: space.db,
@@ -51,7 +53,7 @@ export default Capability.makeModule(
 
           return Effect.succeed([
             AppNode.makeCompanion({
-              id: 'chat',
+              variant: 'chat',
               label: ['channel-companion.label', { ns: meta.profile.key }],
               icon: 'ph--hash--regular',
               data: 'chat',

package/src/capabilities/index.ts

@@ -6,7 +6,6 @@ import { Capability } from '@dxos/app-framework';
 import type { OperationHandlerSet } from '@dxos/compute';
 
 export const AppGraphBuilder = Capability.lazy('AppGraphBuilder', () => import('./app-graph-builder'));
-export const NavigationResolver = Capability.lazy('NavigationResolver', () => import('./navigation-resolver'));
 export const ChannelBackendFeed = Capability.lazy('ChannelBackendFeed', () => import('./channel-backend-feed'));
 export const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));
 export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(

package/src/capabilities/node.ts

@@ -0,0 +1,18 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Capability } from '@dxos/app-framework';
+import type { OperationHandlerSet } from '@dxos/compute';
+
+// The capabilities `ThreadPlugin.node` activates, and only those. `Capability.lazy` defers the
+// import at runtime but a bundler still walks it, so listing the React surfaces here would pull
+// the plugin's components into every node and bun build. `CreateObject` is omitted: its
+// `CreateObjectEntry` carries a `customPanel` React component alongside the object factory.
+// TODO(wittjosiah): Split the panel out of the entry so node can contribute the factory.
+
+export const ChannelBackendFeed = Capability.lazy('ChannelBackendFeed', () => import('./channel-backend-feed'));
+export const OperationHandler = Capability.lazy<OperationHandlerSet.OperationHandlerSet>(
+  'OperationHandler',
+  () => import('./operation-handler'),
+);

package/src/capabilities/{react-surface.tsx → react-surface.ts}

@@ -3,12 +3,10 @@
 //
 
 import * as Effect from 'effect/Effect';
-import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } 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 { ChannelArticle, ThreadArticle } from '#containers';
@@ -19,9 +17,8 @@ export default Capability.makeModule(() =>
       Surface.create({
         id: 'channel',
         filter: AppSurface.object(AppSurface.Article, Channel.Channel),
-        component: ({ data: { subject, attendableId }, role }) => (
-          <ChannelArticle role={role} subject={subject} attendableId={attendableId} />
-        ),
+        component: ChannelArticle,
+        props: ({ role, data: { subject, attendableId } }) => ({ role, subject, attendableId }),
       }),
       Surface.create({
         id: 'chatCompanion',
@@ -29,20 +26,15 @@ export default Capability.makeModule(() =>
           AppSurface.literal(AppSurface.Article, 'chat'),
           AppSurface.companion(AppSurface.Article, Channel.Channel),
         ),
-        component: ({ data: { companionTo: channel } }) => <ChannelArticle subject={channel} chatOnly />,
+        component: ChannelArticle,
+        props: ({ data: { companionTo } }) => ({ subject: companionTo, chatOnly: true }),
       }),
       // TODO(burdon): Disambiguate with Channel.
       Surface.create({
         id: 'thread',
         filter: AppSurface.object(AppSurface.Article, Thread.Thread),
-        component: ({ data: { subject } }) => {
-          const space = getSpace(subject);
-          if (!space || !subject) {
-            return null;
-          }
-
-          return <ThreadArticle space={space} thread={subject} />;
-        },
+        component: ThreadArticle,
+        props: ({ data: { subject } }) => ({ thread: subject }),
       }),
     ]),
   ),

package/src/components/{Chat/Chat.tsx → MessageThread/MessageThread.tsx}

@@ -6,9 +6,7 @@ import React, { useCallback, useMemo } from 'react';
 
 import { Surface } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
-import { PublicKey } from '@dxos/react-client';
-import { type SpaceMember } from '@dxos/react-client/echo';
-import { type Identity } from '@dxos/react-client/halo';
+import { type Identity, type Space } from '@dxos/halo';
 import { Card, type ThemedClassName, composable, useTranslation } from '@dxos/react-ui';
 import { type ObjectTileComponent, Thread } from '@dxos/react-ui-thread';
 import { type Message } from '@dxos/types';
@@ -18,13 +16,13 @@ import { meta } from '#meta';
 
 import { getMessageMetadata } from '../../util';
 
-export type ChatProps = ThemedClassName<{
+export type MessageThreadProps = 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;
+  identity?: Identity.Info;
   /** Space members for rendering sender names/avatars on incoming messages. */
-  members: SpaceMember[];
+  members: readonly Space.Member[];
   /** Messages to render in order. */
   messages: readonly Message.Message[];
   /** Activity indicator (e.g. processing) shown beneath the textbox. */
@@ -48,12 +46,12 @@ export type ChatProps = ThemedClassName<{
 }>;
 
 /**
- * Pure chat UI: message list + composer textbox + activity indicator, built on
- * the `@dxos/react-ui-thread` primitives. Does not load data or invoke
- * operations — the caller passes messages and an `onSend` callback. Used by
- * `ChannelArticle` and `ThreadArticle`.
+ * Pure message-thread UI: message list + composer textbox + activity
+ * indicator, built on the `@dxos/react-ui-thread` primitives. Does not load
+ * data or invoke operations — the caller passes messages and an `onSend`
+ * callback. Used by `ChannelArticle` and `ThreadArticle`.
  */
-export const Chat = composable<HTMLDivElement, ChatProps>(
+export const MessageThread = composable<HTMLDivElement, MessageThreadProps>(
   ({ id, identity, members, messages, activity, onSend, autoFocus, current, readOnly, classNames }, forwardedRef) => {
     const { t } = useTranslation(meta.profile.key);
 
@@ -66,22 +64,27 @@ export const Chat = composable<HTMLDivElement, ChatProps>(
         // TODO(burdon): Factor out.
         const sender = members.find(
           (member) =>
-            (message.sender.identityDid && member.identity.did === message.sender.identityDid) ||
-            (message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey)),
+            (message.sender.identityDid && member.did === message.sender.identityDid) ||
+            (message.sender.identityKey && member.identityKey === message.sender.identityKey),
         );
 
         // Pass `message.sender` as the fallback so externally-synced messages
         // (Slack, etc.) display the source-side sender name instead of "Anonymous"
         // when no DXOS identity matches.
-        return getMessageMetadata(message.id, sender?.identity, message.sender);
+        return getMessageMetadata(message.id, sender, message.sender, message.created);
       },
       [members],
     );
 
     return (
       <Thread.Root getMetadata={getMetadata} components={components} identityDid={identity?.did} editable={false}>
-        <Thread.Content id={id} current={current} classNames={['dx-container', classNames]} ref={forwardedRef}>
-          <Thread.Messages messages={messages} />
+        <Thread.Content
+          id={id}
+          current={current}
+          classNames={['dx-container h-full border', classNames]}
+          ref={forwardedRef}
+        >
+          <Thread.Messages id={id} messages={messages} />
           {!readOnly && (
             <>
               <Thread.Textbox
@@ -107,7 +110,7 @@ export const Chat = composable<HTMLDivElement, ChatProps>(
 const ObjectTile: ObjectTileComponent = ({ subject }) => {
   const Fallback = useCallback(() => <span className='p-1 text-sm text-description'>{subject.id}</span>, [subject]);
   return (
-    <Card.Root className={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}>
+    <Card.Root classNames={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}>
       <Surface.Surface
         type={AppSurface.CardContent}
         limit={1}

package/src/components/{Chat → MessageThread}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2026 DXOS.org
 //
 
-export * from './Chat';
+export * from './MessageThread';

package/src/components/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './Chat';
+export * from './MessageThread';

package/src/containers/ChannelArticle/ChannelArticle.stories.tsx

@@ -11,6 +11,7 @@ import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Database, Feed, Query } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { invariant } from '@dxos/invariant';
 import { CallsPlugin } from '@dxos/plugin-calls/plugin';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
@@ -18,7 +19,8 @@ import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Config } from '@dxos/react-client';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Channel, Message, Thread } from '@dxos/types';
 
@@ -43,6 +45,7 @@ const meta = {
   component: ChannelArticle,
   render: DefaultStory,
   decorators: [
+    withMosaic(),
     withTheme(),
     withLayout({ layout: 'column' }),
     withPluginManager({

package/src/containers/ChannelArticle/ChannelArticle.tsx

@@ -8,14 +8,14 @@ import React, { useCallback } from 'react';
 import { Surface, useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
+import { useIdentity, useMembers } from '@dxos/halo-react';
 import { CallsCapabilities } from '@dxos/plugin-calls/types';
-import { getSpace, useMembers } from '@dxos/react-client/echo';
-import { useIdentity } from '@dxos/react-client/halo';
+import { getSpace } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 import { Menu, MenuBuilder, useMenuBuilder } from '@dxos/react-ui-menu';
 import { type Channel } from '@dxos/types';
 
-import { Chat } from '#components';
+import { MessageThread } from '#components';
 import { useMessages, useStatus } from '#hooks';
 import { meta } from '#meta';
 import { ThreadCapabilities, ThreadOperation, resolveProvider } from '#types';
@@ -118,7 +118,7 @@ export const ChannelArticle = ({ role, subject: channel, attendableId, chatOnly
         </Panel.Content>
       ) : (
         <Panel.Content asChild>
-          <Chat
+          <MessageThread
             id={id}
             classNames='dx-document'
             identity={identity ?? undefined}
@@ -133,3 +133,5 @@ export const ChannelArticle = ({ role, subject: channel, attendableId, chatOnly
     </Panel.Root>
   );
 };
+
+ChannelArticle.displayName = 'ChannelArticle';

package/src/containers/ChannelCreatePanel/ChannelCreatePanel.tsx

@@ -7,7 +7,6 @@ import React, { useCallback, useMemo } from 'react';
 import { useCapabilities } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
 import { type SpaceCapabilities } from '@dxos/plugin-space';
-import { Column } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
 import { ThreadCapabilities, buildChannelFormSchema } from '#types';
@@ -41,12 +40,14 @@ export const ChannelCreatePanel = ({ target, onCreateObject }: SpaceCapabilities
       onSave={handleSave}
       testId='create-channel-form'
     >
-      <Column.Center>
+      <Form.Viewport>
         <Form.Content>
           <Form.FieldSet />
           <Form.Submit />
         </Form.Content>
-      </Column.Center>
+      </Form.Viewport>
     </Form.Root>
   );
 };
+
+ChannelCreatePanel.displayName = 'ChannelCreatePanel';

package/src/containers/ThreadArticle/ThreadArticle.stories.tsx

@@ -16,6 +16,7 @@ import { type Space } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { useAsyncEffect } from '@dxos/react-ui';
+import { withMosaic } from '@dxos/react-ui-mosaic/testing';
 import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { Loading, withLayout } from '@dxos/react-ui/testing';
 import { Message, Thread } from '@dxos/types';
@@ -45,7 +46,7 @@ const DefaultStory = () => {
     return <Loading data={{ identity: !!identity, space: !!space, thread: !!thread }} />;
   }
 
-  return <ThreadArticle space={space} thread={thread} />;
+  return <ThreadArticle thread={thread} />;
 };
 
 const meta = {
@@ -53,9 +54,10 @@ const meta = {
   component: ThreadComponent.Root as any,
   render: DefaultStory,
   decorators: [
+    withMosaic(),
     withLayout({ layout: 'column' }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
-    //  Currently this is required because Chat renders an object tile via a Surface.
+    //  Currently this is required because MessageThread renders an object tile via a Surface.
     withPluginManager({
       plugins: corePlugins(),
       capabilities: [