@dxos/plugin-thread 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

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

@@ -8,13 +8,12 @@ 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 CallManager = Capability.lazy('CallManager', () => import('./call-manager'));
+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 ReactRoot = Capability.lazy('ReactRoot', () => import('./react-root'));
 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'));

package/src/capabilities/markdown.ts

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { LayoutOperation } from '@dxos/app-toolkit';
-import { MarkdownCapabilities } from '@dxos/plugin-markdown/types';
+import { MarkdownCapabilities } from '@dxos/plugin-markdown';
 import { linkedSegment } from '@dxos/react-ui-attention';
 import { type EditorState, commentClickedEffect, commentsState, documentId, overlap } from '@dxos/ui-editor';
 

package/src/capabilities/react-surface.tsx

@@ -2,27 +2,19 @@
 // Copyright 2025 DXOS.org
 //
 
-import { useAtomValue } from '@effect-atom/atom-react';
 import * as Effect from 'effect/Effect';
 import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { Surface, useCapability, useSettingsState } from '@dxos/app-framework/ui';
+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 {
-  CallDebugPanel,
-  CallSidebar,
-  ChannelChat,
-  ChannelContainer,
-  ThreadCompanion,
-  ThreadContainer,
-} from '#containers';
+import { ChannelChat, ChannelArticle, ThreadCompanion, ThreadContainer } from '#containers';
 import { meta } from '#meta';
-import { ThreadCapabilities, type Settings } from '#types';
+import { type Settings } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.succeed(
@@ -31,7 +23,7 @@ export default Capability.makeModule(() =>
         id: 'channel',
         filter: AppSurface.object(AppSurface.Article, Channel.Channel),
         component: ({ data: { subject, attendableId }, role }) => (
-          <ChannelContainer role={role} subject={subject} attendableId={attendableId} />
+          <ChannelArticle role={role} subject={subject} attendableId={attendableId} />
         ),
       }),
       Surface.create({
@@ -78,20 +70,6 @@ export default Capability.makeModule(() =>
           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

@@ -9,9 +9,7 @@ import { AppCapabilities } from '@dxos/app-toolkit';
 import { createKvsStore } from '@dxos/effect';
 
 import { meta } from '#meta';
-import { Settings } from '#types';
-
-import { ThreadCapabilities } from '../types/capabilities';
+import { Settings, ThreadCapabilities } from '#types';
 
 export default Capability.makeModule(() =>
   Effect.sync(() => {

package/src/capabilities/undo-mappings.ts

@@ -7,7 +7,7 @@ import * as Effect from 'effect/Effect';
 import { Capabilities, Capability, UndoMapping } from '@dxos/app-framework';
 
 import { meta } from '#meta';
-import { ThreadOperation } from '#operations';
+import { ThreadOperation } from '#types';
 
 export default Capability.makeModule(
   Effect.fnUntraced(function* () {

package/src/components/Chat/Chat.tsx

@@ -51,6 +51,13 @@ export type ChatProps = ThemedClassName<
      *   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'>
 >;
 
@@ -61,11 +68,23 @@ export type ChatOrientation = 'top' | 'bottom';
  * 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
- * `ChannelContainer`'s feed-backed channel chat.
+ * `ChannelArticle`'s feed-backed channel chat.
  */
 export const Chat = composable<HTMLDivElement, ChatProps>(
   (
-    { id, identity, members, messages, activity, onSend, autoFocusTextbox, current, orientation = 'top', ...props },
+    {
+      id,
+      identity,
+      members,
+      messages,
+      activity,
+      onSend,
+      autoFocusTextbox,
+      current,
+      orientation = 'top',
+      readOnly,
+      ...props
+    },
     forwardedRef,
   ) => {
     const { t } = useTranslation(meta.id);
@@ -129,6 +148,7 @@ export const Chat = composable<HTMLDivElement, ChatProps>(
       textboxMetadata,
       scrollRef,
       sentinelRef,
+      readOnly,
     };
 
     return orientation === 'bottom' ? (
@@ -164,6 +184,7 @@ type ChatRenderState = {
   textboxMetadata: MessageMetadata;
   scrollRef: RefObject<HTMLDivElement | null>;
   sentinelRef: RefObject<HTMLDivElement | null>;
+  readOnly?: boolean;
 };
 
 type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -175,20 +196,25 @@ type LayoutProps = React.HTMLAttributes<HTMLDivElement> & {
 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 } = state;
+    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 role='none' className={mx(threadLayout, 'place-self-end')}>
+            <div className={mx(threadLayout, 'place-self-end')}>
               {messages.map((message) => (
                 <MessagePanel key={message.id} message={message} members={members} />
               ))}
             </div>
           </ScrollArea.Viewport>
         </ScrollArea.Root>
-        <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
-        <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+        {!readOnly && (
+          <>
+            <MessageTextbox extensions={extensions} autoFocus={autoFocus} onSend={handleSend} {...textboxMetadata} />
+            <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
+          </>
+        )}
       </ThreadComponent.Root>
     );
   },
@@ -197,8 +223,18 @@ const ThreadLayout = React.forwardRef<HTMLDivElement, LayoutProps & Pick<ThreadR
 /** 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 } =
-    state;
+  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'>
@@ -209,10 +245,14 @@ const ChannelLayout = React.forwardRef<HTMLDivElement, LayoutProps>(({ id, state
         ))}
         <div ref={sentinelRef} />
       </div>
-      <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>
+      {!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/CommentsPanel/CommentsPanel.stories.tsx

@@ -10,7 +10,7 @@ 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 { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
 import { random } from '@dxos/random';
 import { useQuery, useSpaces } from '@dxos/react-client/echo';

package/src/components/CommentsPanel/CommentsPanel.tsx

@@ -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',
                 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>
     );

package/src/components/CommentsPanel/CommentsThread.tsx

@@ -104,7 +104,6 @@ export const CommentsThread = ({
       onFocusCapture={handleAttend}
     >
       <div
-        role='none'
         className={mx(
           'col-span-2 grid grid-cols-[var(--dx-rail-size)_1fr_min-content]',
           hoverableControls,
@@ -118,7 +117,7 @@ export const CommentsThread = ({
         ) : (
           <ThreadComponent.Header>{thread.name}</ThreadComponent.Header>
         )}
-        <div role='none' className={buttonGroupClassNames}>
+        <div className={buttonGroupClassNames}>
           {thread.status === 'staged' && <Tag palette='neutral'>{t('draft.button')}</Tag>}
           {onResolve && !(thread?.status === 'staged') && (
             <IconButton
@@ -166,7 +165,7 @@ export const CommentsThread = ({
 
       <ThreadComponent.Status activity={activity}>{t('activity.message')}</ThreadComponent.Status>
 
-      <div role='none' className='h-px -mt-px' ref={threadScrollRef} />
+      <div className='h-px -mt-px' ref={threadScrollRef} />
     </ThreadComponent.Root>
   );
 };

package/src/components/MessagePanel/MessagePanel.tsx

@@ -82,7 +82,10 @@ export const MessagePanel = ({
       (message.sender.identityDid && member.identity.did === message.sender.identityDid) ||
       (message.sender.identityKey && PublicKey.equals(member.identity.identityKey, message.sender.identityKey)),
   )?.identity;
-  const messageMetadata = getMessageMetadata(message.id, senderIdentity);
+  // 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.
+  const messageMetadata = getMessageMetadata(message.id, senderIdentity, message.sender);
   const userIsAuthor = identity?.did === messageMetadata.authorId;
   const proposalBlock = message.blocks.find((block) => block._tag === 'proposal');
   const references = message.blocks.filter((block) => block._tag === 'reference').map((block) => block.reference);
@@ -90,7 +93,7 @@ export const MessagePanel = ({
   return (
     <MessageRoot {...messageMetadata} classNames={[hoverableControls, hoverableFocusedWithinControls]}>
       <MessageHeading authorName={messageMetadata.authorName} timestamp={messageMetadata.timestamp}>
-        <div role='none' className={buttonGroupClassNames}>
+        <div className={buttonGroupClassNames}>
           {userIsAuthor && editable && (
             <IconButton
               data-testid={editing ? 'thread.message.save' : 'thread.message.edit'}
@@ -188,15 +191,11 @@ const TextboxBlock = ({
     editing && view?.focus();
   }, [editing, view]);
 
-  return <div role='none' ref={parentRef} className='me-4' {...focusAttributes} />;
+  return <div ref={parentRef} className='me-4' {...focusAttributes} />;
 };
 
 const ProposalBlock = ({ block }: { block: ContentBlock.Proposal }) => {
-  return (
-    <div role='none' className='me-4 italic'>
-      {block.text}
-    </div>
-  );
+  return <div className='me-4 italic'>{block.text}</div>;
 };
 
 const MessageBlockObjectTile = forwardRef<HTMLDivElement, { subject: Obj.Unknown }>(({ subject }, forwardedRef) => {

package/src/components/ThreadSettings/ThreadSettings.tsx

@@ -13,7 +13,6 @@ import { type Settings } from '#types';
 
 export type ThreadSettingsProps = AppSurface.SettingsArticleProps<Settings.Settings>;
 
-// TODO(burdon): Settings.
 export const ThreadSettings = ({ settings: _settings }: ThreadSettingsProps) => {
   const { t: _t } = useTranslation(meta.id);
   return <SettingsForm.Viewport></SettingsForm.Viewport>;

package/src/components/index.ts

@@ -4,7 +4,6 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export * from './Call';
 export * from './Chat';
 export * from './CommentsPanel';
 export * from './MessagePanel';

package/src/containers/{ChannelContainer/ChannelContainer.stories.tsx → ChannelArticle/ChannelArticle.stories.tsx}

@@ -9,36 +9,36 @@ import React from 'react';
 import { Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppCapabilities } from '@dxos/app-toolkit';
-import { Feed } from '@dxos/echo';
+import { Feed, Query } from '@dxos/echo';
 import { createFeedServiceLayer } from '@dxos/echo-db';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
 import { initializeIdentity } from '@dxos/plugin-client/testing';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
 import { corePlugins } from '@dxos/plugin-testing';
 import { Config } from '@dxos/react-client';
-import { Query, useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
 import { withLayout, withTheme, Loading } from '@dxos/react-ui/testing';
 import { Channel, Message, Thread } from '@dxos/types';
 
 import { translations } from '#translations';
 
 import { ThreadPlugin } from '../../ThreadPlugin';
-import { ChannelContainer, type ChannelContainerProps } from './ChannelContainer';
+import { ChannelArticle, type ChannelArticleProps } from './ChannelArticle';
 
 // TODO(wittjosiah): Channel doesn't render full height.
-const DefaultStory = ({ roomId }: ChannelContainerProps) => {
+const DefaultStory = ({ roomId }: ChannelArticleProps) => {
   const [space] = useSpaces();
   const [channel] = useQuery(space?.db, Query.type(Channel.Channel));
   if (!channel) {
     return <Loading data={{ channel }} />;
   }
 
-  return <ChannelContainer subject={channel} attendableId='story' roomId={roomId} role='article' />;
+  return <ChannelArticle subject={channel} attendableId='story' roomId={roomId} role='article' />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/containers/ChannelContainer',
-  component: ChannelContainer,
+  title: 'plugins/plugin-thread/containers/ChannelArticle',
+  component: ChannelArticle,
   render: DefaultStory,
   decorators: [
     withTheme(),
@@ -88,7 +88,7 @@ const meta = {
   parameters: {
     translations,
   },
-} satisfies Meta<typeof ChannelContainer>;
+} satisfies Meta<typeof ChannelArticle>;
 
 export default meta;
 

package/src/containers/ChannelArticle/ChannelArticle.tsx

@@ -0,0 +1,42 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { getSpace } from '@dxos/react-client/echo';
+import { Panel } from '@dxos/react-ui';
+import { type Channel } from '@dxos/types';
+
+import { ChannelChat } from '../ChannelChat';
+
+export type ChannelArticleProps = AppSurface.ObjectArticleProps<
+  Channel.Channel | undefined,
+  {
+    roomId?: string;
+    fullscreen?: boolean;
+  }
+>;
+
+/**
+ * Renders the channel chat. The "Start video call" action and the in-call surface
+ * are contributed by plugin-calls — this container is call-agnostic.
+ */
+// TODO(burdon): Create Radix style layout.
+// TODO(burdon): Restore graph-driven toolbar so plugin-calls can contribute a "Start video call" action (F-1.1).
+export const ChannelArticle = ({ subject: channel }: ChannelArticleProps) => {
+  const space = getSpace(channel);
+
+  if (channel && space) {
+    return (
+      <Panel.Root classNames='dx-document'>
+        <Panel.Content asChild>
+          <ChannelChat classNames='border' space={space} channel={channel} />
+        </Panel.Content>
+      </Panel.Root>
+    );
+  }
+
+  return null;
+};

package/src/containers/ChannelArticle/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { ChannelArticle as default } from './ChannelArticle';

package/src/containers/ChannelChat/ChannelChat.tsx

@@ -13,7 +13,7 @@ import { composable, composableProps } from '@dxos/ui-theme';
 
 import { Chat } from '#components';
 import { useStatus } from '#hooks';
-import { ThreadOperation } from '#operations';
+import { ThreadOperation } from '#types';
 
 export type ChannelChatProps = {
   space: Space;
@@ -24,6 +24,10 @@ export type ChannelChatProps = {
  * Channel chat: composer pinned to the bottom of the panel, messages scrolling
  * above it (newest at the bottom). Threading via `Message.threadId` is
  * intentionally not reconstructed in this round.
+ *
+ * Externally-synced channels (any Channel carrying foreign-key `Obj.Meta`,
+ * e.g. Slack/Discord-sourced rooms) render read-only — the composer is
+ * suppressed because there's no local-write path back to the source.
  */
 export const ChannelChat = composable<HTMLDivElement, ChannelChatProps>(
   ({ space, channel, ...props }, forwardedRef) => {
@@ -37,9 +41,14 @@ export const ChannelChat = composable<HTMLDivElement, ChannelChatProps>(
     const messages = useQuery(
       space.db,
       feed ? Query.select(Filter.type(Message.Message)).from(feed) : Query.select(Filter.nothing()),
-    ) as Message.Message[];
+    );
+
+    const readOnly = Obj.getMeta(channel).keys.length > 0;
 
     const handleSend = (text: string) => {
+      if (readOnly) {
+        return false;
+      }
       void invokePromise(ThreadOperation.AppendChannelMessage, {
         channel,
         sender: { identityDid: identity.did },
@@ -58,6 +67,7 @@ export const ChannelChat = composable<HTMLDivElement, ChannelChatProps>(
         activity={activity}
         onSend={handleSend}
         orientation='bottom'
+        readOnly={readOnly}
         ref={forwardedRef}
       />
     );

package/src/containers/ThreadCompanion/ThreadCompanion.tsx

@@ -6,11 +6,11 @@ import { useAtomValue } from '@effect-atom/atom-react';
 import React, { useCallback, useMemo } from 'react';
 
 import { Capabilities } from '@dxos/app-framework';
-import { useCapabilities, useCapability, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { useCapabilities, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppCapabilities, CollaborationOperation, LayoutOperation } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { Ref, useQuery } from '@dxos/react-client/echo';
+import { Filter, Obj, Query, Ref, Relation } from '@dxos/echo';
+import { useQuery } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
 import { getParentId, useAttention } from '@dxos/react-ui-attention';
@@ -19,7 +19,7 @@ import { AnchoredTo, Thread } from '@dxos/types';
 
 import { CommentsPanel, type CommentsPanelProps } from '#components';
 import { meta } from '#meta';
-import { ThreadOperation } from '#operations';
+import { ThreadOperation } from '#types';
 import { ThreadCapabilities, type ViewState } from '#types';
 
 const initialViewState: ViewState = { showResolvedThreads: false };
@@ -33,7 +33,6 @@ export type ThreadCompanionProps = AppSurface.ObjectArticleProps<
 
 export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps) => {
   const { t } = useTranslation(meta.id);
-  const manager = usePluginManager();
   const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
   const subjectId = Obj.getDXN(subject).toString();
@@ -66,6 +65,7 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
     [registry, viewStoreAtom, subjectId],
   );
 
+  const commentConfigs = useCapabilities(AppCapabilities.CommentConfig);
   const anchorSorts = useCapabilities(AppCapabilities.AnchorSort);
   const sort = useMemo(
     () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
@@ -93,14 +93,12 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
         // Scroll plank into view (deck handler).
         void invokePromise(LayoutOperation.ScrollIntoView, { subject: parentId });
 
-        // Scroll within content to anchor (metadata-driven, per typename).
+        // Scroll within content to anchor (comment config per typename).
         if (anchor.anchor && parentId) {
           const typename = Obj.getTypename(subject);
-          const metadata = manager.capabilities
-            .getAll(AppCapabilities.Metadata)
-            .find(({ id }) => id === typename)?.metadata;
-          if (metadata?.scrollToAnchor) {
-            void invokePromise(metadata.scrollToAnchor, {
+          const commentConfig = commentConfigs.find(({ id }) => id === typename);
+          if (commentConfig?.scrollToAnchor) {
+            void invokePromise(commentConfig.scrollToAnchor, {
               subject: parentId,
               cursor: anchor.anchor,
               ref: threadId,
@@ -109,7 +107,7 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
         }
       }
     },
-    [state.current, invokePromise, registry, stateAtom, parentId, subject, manager],
+    [state.current, invokePromise, registry, stateAtom, parentId, subject, commentConfigs],
   );
 
   const handleComment = useCallback(

package/src/containers/index.ts

@@ -4,9 +4,7 @@
 
 import { type ComponentType, lazy } from 'react';
 
-export const CallDebugPanel: ComponentType<any> = lazy(() => import('./CallDebugPanel'));
-export const CallSidebar: ComponentType<any> = lazy(() => import('./CallSidebar'));
 export const ChannelChat: ComponentType<any> = lazy(() => import('./ChannelChat'));
-export const ChannelContainer: ComponentType<any> = lazy(() => import('./ChannelContainer'));
+export const ChannelArticle: ComponentType<any> = lazy(() => import('./ChannelArticle'));
 export const ThreadContainer: ComponentType<any> = lazy(() => import('./ThreadContainer'));
 export const ThreadCompanion: ComponentType<any> = lazy(() => import('./ThreadCompanion'));

package/src/extensions/command.ts

@@ -29,7 +29,7 @@ const parser = StreamLanguage.define<{ count: number }>({
 const styles = HighlightStyle.define([
   {
     tag: tags.tagName,
-    class: mx('dx-tag dx-tag--indigo text-base-surface-text font-medium'),
+    class: mx('dx-tag dx-tag--indigo text-base-foreground font-medium'),
   },
 ]);
 

package/src/extensions/threads.ts

@@ -9,11 +9,11 @@ import { type Atom, type Registry } from '@effect-atom/atom-react';
 import { Filter, Obj, Query, Relation } from '@dxos/echo';
 import { createDocAccessor, getTextInRange } from '@dxos/echo-db';
 import { OperationInvoker } from '@dxos/operation';
-import { type Markdown } from '@dxos/plugin-markdown/types';
+import { type Markdown } from '@dxos/plugin-markdown';
 import { AnchoredTo, Thread } from '@dxos/types';
 import { comments, createExternalCommentSync } from '@dxos/ui-editor';
 
-import { ThreadOperation } from '#operations';
+import { ThreadOperation } from '#types';
 import { type ThreadState } from '#types';
 
 // TODO(burdon): Factor out.

package/src/hooks/analytics.ts

@@ -6,7 +6,7 @@ import { useCallback } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { Obj } from '@dxos/echo';
-import { ObservabilityOperation } from '@dxos/plugin-observability/operations';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
 import { useOnTransition } from '@dxos/react-ui';
 import { type ContentBlock } from '@dxos/types';