@dxos/plugin-thread 0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264 → 0.13.0

package/dx.config.ts

@@ -29,6 +29,9 @@ export default Config2.make({
     source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-thread',
     icon: { key: 'ph--video-conference--regular', hue: 'rose' },
     spec: 'PLUGIN.mdl',
+    screenshots: [
+      { dark: 'https://pub-39066a86073446d7b77b1c157b660bb5.r2.dev/demos/2026-08-27-qa-flows/plugin-thread-QA-1.webm' },
+    ],
     tags: ['alpha'],
   },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-thread",
-  "version": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
+  "version": "0.13.0",
   "description": "DXOS Threads Surface plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,19 +10,21 @@
   },
   "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "imports": {
     "#capabilities": {
       "source": {
         "workerd": "./src/capabilities/gen/workerd.ts",
         "node": "./src/capabilities/gen/node.ts",
-        "default": "./src/capabilities/index.ts"
+        "tauri": "./src/capabilities/gen/tauri.ts",
+        "browser": "./src/capabilities/gen/browser.ts"
       },
       "types": "./dist/types/src/capabilities/index.d.ts",
       "workerd": "./dist/lib/capabilities.workerd.mjs",
       "node": "./dist/lib/capabilities.node.mjs",
-      "default": "./dist/lib/capabilities.mjs"
+      "tauri": "./dist/lib/capabilities.tauri.mjs",
+      "browser": "./dist/lib/capabilities.browser.mjs"
     },
     "#components": {
       "source": "./src/components/index.ts",
@@ -78,6 +80,11 @@
       "types": "./dist/types/src/translations.d.ts",
       "import": "./dist/lib/translations.mjs"
     },
+    "./ThreadOperationHandlerSet": {
+      "source": "./src/operations/ThreadOperationHandlerSet.ts",
+      "types": "./dist/types/src/operations/ThreadOperationHandlerSet.d.ts",
+      "import": "./dist/lib/ThreadOperationHandlerSet.mjs"
+    },
     "./ChannelBackend": {
       "source": "./src/types/ChannelBackend.ts",
       "types": "./dist/types/src/types/ChannelBackend.d.ts",
@@ -118,6 +125,9 @@
       ],
       "ThreadOperation": [
         "dist/types/src/types/ThreadOperation.d.ts"
+      ],
+      "ThreadOperationHandlerSet": [
+        "dist/types/src/operations/ThreadOperationHandlerSet.d.ts"
       ]
     }
   },
@@ -128,52 +138,55 @@
     "PLUGIN.mdl"
   ],
   "dependencies": {
-    "@effect/atom-react": "4.0.0-rc.108",
-    "@dxos/app-framework": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/app-graph": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/app-toolkit": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/compute": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/display-name": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/echo": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/effect": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/halo": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/halo-react": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/invariant": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/log": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-calls": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-client": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-space": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-client": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-thread": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/types": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/util": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@effect/atom-react": "4.0.0",
+    "@dxos/app-framework": "0.13.0",
+    "@dxos/app-graph": "0.13.0",
+    "@dxos/app-toolkit": "0.13.0",
+    "@dxos/compute": "0.13.0",
+    "@dxos/display-name": "0.13.0",
+    "@dxos/echo": "0.13.0",
+    "@dxos/errors": "0.13.0",
+    "@dxos/halo": "0.13.0",
+    "@dxos/halo-react": "0.13.0",
+    "@dxos/invariant": "0.13.0",
+    "@dxos/log": "0.13.0",
+    "@dxos/effect": "0.13.0",
+    "@dxos/plugin-calls": "0.13.0",
+    "@dxos/plugin-space": "0.13.0",
+    "@dxos/react-client": "0.13.0",
+    "@dxos/react-ui-thread": "0.13.0",
+    "@dxos/types": "0.13.0",
+    "@dxos/protocols": "0.13.0",
+    "@dxos/util": "0.13.0"
   },
   "devDependencies": {
-    "@storybook/react-vite": "^10.5.8",
+    "@storybook/react-vite": "^10.6.0",
     "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "4.0.0-rc.108",
+    "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "vite": "^8.2.1",
-    "@dxos/echo-react": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/plugin-testing": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/random": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-form": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-menu": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-mosaic": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "vite": "^8.2.2",
+    "@dxos/echo-client": "0.13.0",
+    "@dxos/echo-react": "0.13.0",
+    "@dxos/plugin-client": "0.13.0",
+    "@dxos/plugin-testing": "0.13.0",
+    "@dxos/random": "0.13.0",
+    "@dxos/react-ui-form": "0.13.0",
+    "@dxos/react-ui-menu": "0.13.0",
+    "@dxos/react-ui-mosaic": "0.13.0",
+    "@dxos/ui-theme": "0.13.0",
+    "@dxos/react-ui": "0.13.0"
   },
   "peerDependencies": {
-    "@effect/atom-react": "4.0.0-rc.108",
-    "effect": "4.0.0-rc.108",
+    "@effect/atom-react": "4.0.0",
+    "effect": "4.0.0",
     "react": "~19.2.7",
     "react-dom": "~19.2.7",
-    "@dxos/react-ui": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-form": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/react-ui-menu": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264",
-    "@dxos/ui-theme": "^0.12.0-next-73daef452f1464b62efdbca75fb0067c1066f264"
+    "@dxos/react-ui": "^0.13.0",
+    "@dxos/react-ui-form": "^0.13.0",
+    "@dxos/react-ui-menu": "^0.13.0",
+    "@dxos/ui-theme": "^0.13.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -16,11 +16,11 @@ import { Obj, Type } from '@dxos/echo';
 import * as CallsCapabilities from '@dxos/plugin-calls/CallsCapabilities';
 import * as SpaceOperation from '@dxos/plugin-space/SpaceOperation';
 import { Channel } from '@dxos/types';
-import { Position } from '@dxos/util';
+import * as Position from '@dxos/util/Position';
 
 import { meta } from '#meta';
 
-import { getChannelsPath } from '../paths';
+import { getChannelsPath } from '../paths.ts';
 
 const channelTypename = Type.getTypename(Channel.Channel);
 
@@ -45,6 +45,7 @@ export default Capability.makeModule(
 
       AppGraphBuilder.createTypeExtension({
         id: 'channelChatCompanion',
+        relation: AppNode.companion,
         type: Channel.Channel,
         connector: (channel, get) => {
           const [callManager] = get(callManagerAtom);

package/src/capabilities/channel-backend-feed.ts

@@ -6,12 +6,11 @@ import * as Effect from 'effect/Effect';
 import * as Schema from 'effect/Schema';
 
 import * as Capability from '@dxos/app-framework/Capability';
-import { Database, Feed, Filter, Obj, Query } from '@dxos/echo';
+import { Database, Feed, Obj } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
-import * as ClientCapabilities from '@dxos/plugin-client/ClientCapabilities';
-import { Channel, Message } from '@dxos/types';
+import { Channel } from '@dxos/types';
 
-import { ThreadCapabilities } from '#types';
+import { ChannelBackend, ThreadCapabilities } from '#types';
 
 /**
  * Default local ECHO-feed-backed channel provider. Stores messages in a `Feed`
@@ -32,19 +31,15 @@ export const feedChannelBackend: ThreadCapabilities.ChannelBackendProvider = {
       return () => {};
     }
 
-    const result = db.query(Query.select(Filter.type(Message.Message)).from(feed));
-    return result.subscribe(() => onMessages(result.results), { fire: true });
+    return ChannelBackend.subscribeFeed(db, feed, onMessages);
   },
   send: (channel, message) =>
     Effect.gen(function* () {
       const db = Obj.getDatabase(channel);
       invariant(db, 'Database not found');
-      const client = yield* Capability.get(ClientCapabilities.Client);
-      const space = client.spaces.get(db.spaceId);
-      invariant(space, 'Space not found');
       const feed = Channel.getFeed(channel);
       invariant(feed, 'Channel is not feed-backed');
-      yield* Feed.append(feed, [message]).pipe(Effect.provide(Database.layer(space.db)));
+      yield* Feed.append(feed, [message]).pipe(Effect.provide(Database.layer(db)));
     }),
   readOnly: (channel) => Obj.getMeta(channel).keys.length > 0,
 };

package/src/capabilities/gen/browser.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'browser' condition.
+
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';
+import { translations as threadTranslations } from '@dxos/react-ui-thread/translations';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { ThreadCapabilities, ThreadEvents } from '#types';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+// The graph builder reads the call manager OPTIONALLY (reactive atom with an absence guard),
+// so no spec-level require: a hard cross-plugin require would fail this plugin whenever
+// plugin-calls is disabled. Cross-feature requires are only valid with a plugin-level dependsOn.
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));
+
+export const ChannelBackendFeed = Capability.lazyModule(
+  'ChannelBackendFeed',
+  {
+    provides: [ThreadCapabilities.ChannelBackend],
+    activatesOn: ThreadEvents.Start,
+    environments: ['browser', 'node', 'tauri', 'workerd'],
+  },
+  () => import('../channel-backend-feed.ts'),
+);
+
+// `CreateObjectEntry` carries a `customPanel` React component alongside the object factory, so it
+// cannot load without React — browser only.
+export const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'), {
+  environments: ['browser', 'tauri'],
+});
+
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
+  activatesOn: ActivationEvents.Idle,
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
+
+export const Translations = AppCapability.translations([...translations, ...threadTranslations]);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});

package/src/capabilities/gen/node.ts

@@ -15,23 +15,23 @@ import { ThreadCapabilities, ThreadEvents } from '#types';
 // The graph builder reads the call manager OPTIONALLY (reactive atom with an absence guard),
 // so no spec-level require: a hard cross-plugin require would fail this plugin whenever
 // plugin-calls is disabled. Cross-feature requires are only valid with a plugin-level dependsOn.
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'));
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));
 
 export const ChannelBackendFeed = Capability.lazyModule(
   'ChannelBackendFeed',
   {
     provides: [ThreadCapabilities.ChannelBackend],
     activatesOn: ThreadEvents.Start,
-    environments: ['node', 'workerd'],
+    environments: ['browser', 'node', 'tauri', 'workerd'],
   },
-  () => import('../channel-backend-feed'),
+  () => import('../channel-backend-feed.ts'),
 );
 
-export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler'), {
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
   activatesOn: ActivationEvents.Idle,
 });
 
-export const Schema = AppCapability.schema(() => import('../schema'));
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
 
 export const Translations = AppCapability.translations([...translations, ...threadTranslations]);
 

package/src/capabilities/gen/tauri.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+// GENERATED by dx-plugin — do not edit. Sliced from ../index.ts for the 'tauri' condition.
+
+import * as ActivationEvents from '@dxos/app-framework/ActivationEvents';
+import * as Capability from '@dxos/app-framework/Capability';
+import * as AppCapability from '@dxos/app-toolkit/AppCapability';
+import * as SpaceCapability from '@dxos/plugin-space/SpaceCapability';
+import { translations as threadTranslations } from '@dxos/react-ui-thread/translations';
+
+import { meta } from '#meta';
+import { translations } from '#translations';
+import { ThreadCapabilities, ThreadEvents } from '#types';
+
+import pluginSpec from '../../../PLUGIN.mdl?raw';
+
+// The graph builder reads the call manager OPTIONALLY (reactive atom with an absence guard),
+// so no spec-level require: a hard cross-plugin require would fail this plugin whenever
+// plugin-calls is disabled. Cross-feature requires are only valid with a plugin-level dependsOn.
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));
+
+export const ChannelBackendFeed = Capability.lazyModule(
+  'ChannelBackendFeed',
+  {
+    provides: [ThreadCapabilities.ChannelBackend],
+    activatesOn: ThreadEvents.Start,
+    environments: ['browser', 'node', 'tauri', 'workerd'],
+  },
+  () => import('../channel-backend-feed.ts'),
+);
+
+// `CreateObjectEntry` carries a `customPanel` React component alongside the object factory, so it
+// cannot load without React — browser only.
+export const CreateObject = SpaceCapability.createObject(() => import('../create-object.ts'), {
+  environments: ['browser', 'tauri'],
+});
+
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
+  activatesOn: ActivationEvents.Idle,
+});
+
+export const ReactSurface = AppCapability.surface(() => import('../react-surface.ts'), {
+  roles: ['org.dxos.role.article'],
+});
+
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
+
+export const Translations = AppCapability.translations([...translations, ...threadTranslations]);
+
+export const PluginAsset = AppCapability.pluginAsset({
+  pluginId: meta.profile.key,
+  path: 'PLUGIN.mdl',
+  content: pluginSpec,
+  mimeType: 'application/x-mdl',
+});

package/src/capabilities/gen/workerd.ts

@@ -15,23 +15,23 @@ import { ThreadCapabilities, ThreadEvents } from '#types';
 // The graph builder reads the call manager OPTIONALLY (reactive atom with an absence guard),
 // so no spec-level require: a hard cross-plugin require would fail this plugin whenever
 // plugin-calls is disabled. Cross-feature requires are only valid with a plugin-level dependsOn.
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder'));
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('../app-graph-builder.ts'));
 
 export const ChannelBackendFeed = Capability.lazyModule(
   'ChannelBackendFeed',
   {
     provides: [ThreadCapabilities.ChannelBackend],
     activatesOn: ThreadEvents.Start,
-    environments: ['node', 'workerd'],
+    environments: ['browser', 'node', 'tauri', 'workerd'],
   },
-  () => import('../channel-backend-feed'),
+  () => import('../channel-backend-feed.ts'),
 );
 
-export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler'), {
+export const OperationHandler = AppCapability.operationHandler(() => import('../operation-handler.ts'), {
   activatesOn: ActivationEvents.Idle,
 });
 
-export const Schema = AppCapability.schema(() => import('../schema'));
+export const Schema = AppCapability.schema(() => import('../schema.ts'));
 
 export const Translations = AppCapability.translations([...translations, ...threadTranslations]);
 

package/src/capabilities/index.ts

@@ -18,28 +18,28 @@ import pluginSpec from '../../PLUGIN.mdl?raw';
 // The graph builder reads the call manager OPTIONALLY (reactive atom with an absence guard),
 // so no spec-level require: a hard cross-plugin require would fail this plugin whenever
 // plugin-calls is disabled. Cross-feature requires are only valid with a plugin-level dependsOn.
-export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder'));
+export const AppGraphBuilder = AppCapability.appGraphBuilder(() => import('./app-graph-builder.ts'));
 export const ChannelBackendFeed = Capability.lazyModule(
   'ChannelBackendFeed',
   {
     provides: [ThreadCapabilities.ChannelBackend],
     activatesOn: ThreadEvents.Start,
-    environments: ['node', 'workerd'],
+    environments: ['browser', 'node', 'tauri', 'workerd'],
   },
-  () => import('./channel-backend-feed'),
+  () => import('./channel-backend-feed.ts'),
 );
 // `CreateObjectEntry` carries a `customPanel` React component alongside the object factory, so it
 // cannot load without React — browser only.
-export const CreateObject = SpaceCapability.createObject(() => import('./create-object'), {
-  environments: [],
+export const CreateObject = SpaceCapability.createObject(() => import('./create-object.ts'), {
+  environments: ['browser', 'tauri'],
 });
-export const OperationHandler = AppCapability.operationHandler(() => import('./operation-handler'), {
+export const OperationHandler = AppCapability.operationHandler(() => import('./operation-handler.ts'), {
   activatesOn: ActivationEvents.Idle,
 });
-export const ReactSurface = AppCapability.surface(() => import('./react-surface'), {
+export const ReactSurface = AppCapability.surface(() => import('./react-surface.ts'), {
   roles: ['org.dxos.role.article'],
 });
-export const Schema = AppCapability.schema(() => import('./schema'));
+export const Schema = AppCapability.schema(() => import('./schema.ts'));
 export const Translations = AppCapability.translations([...translations, ...threadTranslations]);
 export const PluginAsset = AppCapability.pluginAsset({
   pluginId: meta.profile.key,

package/src/capabilities/operation-handler.ts

@@ -11,6 +11,6 @@ import { ThreadOperationHandlerSet } from '#operations';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {
-    return Capability.contribute(Capabilities.OperationHandler, ThreadOperationHandlerSet);
+    return Capability.contribute(Capabilities.OperationHandler, ThreadOperationHandlerSet.handlers);
   }),
 );

package/src/capabilities/react-surface.ts

@@ -6,8 +6,8 @@ import * as Effect from 'effect/Effect';
 
 import * as Capabilities from '@dxos/app-framework/Capabilities';
 import * as Capability from '@dxos/app-framework/Capability';
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Channel, Thread } from '@dxos/types';
 
 import { ChannelArticle, ThreadArticle } from '#containers';

package/src/components/MessageThread/MessageThread.tsx

@@ -4,19 +4,21 @@
 
 import React, { useCallback, useMemo } from 'react';
 
-import { Surface } from '@dxos/app-framework/ui';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as Surface from '@dxos/app-framework/Surface';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 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 * as Card from '@dxos/react-ui/Card';
+import * as Hooks from '@dxos/react-ui/Hooks';
+import * as Util from '@dxos/react-ui/Util';
 import { type Message } from '@dxos/types';
 import { hoverableControls, hoverableFocusedWithinControls, mx } from '@dxos/ui-theme';
 
 import { meta } from '#meta';
 
-import { getMessageMetadata } from '../../util';
+import { getMessageMetadata } from '../../util.ts';
 
-export type MessageThreadProps = ThemedClassName<{
+export type MessageThreadProps = Util.ThemedClassName<{
   /** Stable id used for the underlying thread root and message metadata. */
   id: string;
   /** Identity used to attribute outgoing messages in the textbox metadata. */
@@ -51,9 +53,9 @@ export type MessageThreadProps = ThemedClassName<{
  * data or invoke operations — the caller passes messages and an `onSend`
  * callback. Used by `ChannelArticle` and `ThreadArticle`.
  */
-export const MessageThread = composable<HTMLDivElement, MessageThreadProps>(
+export const MessageThread = Util.composable<HTMLDivElement, MessageThreadProps>(
   ({ id, identity, members, messages, activity, onSend, autoFocus, current, readOnly, classNames }, forwardedRef) => {
-    const { t } = useTranslation(meta.profile.key);
+    const { t } = Hooks.useTranslation(meta.profile.key);
 
     const components = useMemo(() => ({ Object: ObjectTile }), []);
 
@@ -78,12 +80,7 @@ export const MessageThread = composable<HTMLDivElement, MessageThreadProps>(
 
     return (
       <Thread.Root getMetadata={getMetadata} components={components} identityDid={identity?.did} editable={false}>
-        <Thread.Content
-          id={id}
-          current={current}
-          classNames={['dx-container h-full border', classNames]}
-          ref={forwardedRef}
-        >
+        <Thread.Content id={id} current={current} classNames={['dx-expand border', classNames]} ref={forwardedRef}>
           <Thread.Messages id={id} messages={messages} />
           {!readOnly && (
             <>
@@ -108,7 +105,7 @@ export const MessageThread = composable<HTMLDivElement, MessageThreadProps>(
  * referenced subject via an app-framework `Surface` (the card role).
  */
 const ObjectTile: ObjectTileComponent = ({ subject }) => {
-  const Fallback = useCallback(() => <span className='p-1 text-sm text-description'>{subject.id}</span>, [subject]);
+  const Fallback = useCallback(() => <span className='p-1 text-sm text-fg-muted'>{subject.id}</span>, [subject]);
   return (
     <Card.Root classNames={mx('grid col-span-3 py-1 pr-4', hoverableControls, hoverableFocusedWithinControls)}>
       <Surface.Surface

package/src/components/MessageThread/index.ts

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

package/src/components/index.ts

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

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

@@ -9,7 +9,7 @@ import React from 'react';
 import * as Capability from '@dxos/app-framework/Capability';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import * as AppCapabilities from '@dxos/app-toolkit/AppCapabilities';
-import { AppSurface } from '@dxos/app-toolkit/ui';
+import * as AppSurface from '@dxos/app-toolkit/AppSurface';
 import { Database, Feed, Query } from '@dxos/echo';
 import { useQuery } from '@dxos/echo-react';
 import { invariant } from '@dxos/invariant';
@@ -17,7 +17,7 @@ import * as CallsPlugin from '@dxos/plugin-calls/CallsPlugin';
 import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { SpacePlugin } from '@dxos/plugin-space/testing';
-import { corePlugins } from '@dxos/plugin-testing';
+import * as CorePlugins from '@dxos/plugin-testing/CorePlugins';
 import { Config } from '@dxos/react-client';
 import { useSpaces } from '@dxos/react-client/echo';
 import { withMosaic } from '@dxos/react-ui-mosaic/testing';
@@ -27,7 +27,7 @@ import { Channel, Message, Thread } from '@dxos/types';
 import { ThreadPlugin } from '#plugin';
 import { translations } from '#translations';
 
-import { ChannelArticle, type ChannelArticleProps } from './ChannelArticle';
+import { ChannelArticle, type ChannelArticleProps } from './ChannelArticle.tsx';
 
 // TODO(wittjosiah): Channel doesn't render full height.
 const DefaultStory = ({ roomId }: ChannelArticleProps) => {
@@ -53,7 +53,7 @@ const meta = {
         Capability.contribute(AppCapabilities.Schema, [Channel.Channel, Feed.Feed, Thread.Thread, Message.Message]),
       ],
       plugins: [
-        ...corePlugins(),
+        ...CorePlugins.make(),
         ClientPlugin.make({
           types: [Channel.Channel, Feed.Feed, Thread.Thread, Message.Message],
           config: new Config({