@dxos/plugin-thread 0.8.4-main.422d1c7879 → 0.8.4-main.43cb759274

package/src/containers/ChannelChat/ChannelChat.tsx

@@ -0,0 +1,75 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { Filter, Obj, Query } from '@dxos/echo';
+import { type Space, useMembers, useQuery } from '@dxos/react-client/echo';
+import { useIdentity } from '@dxos/react-client/halo';
+import { composable, composableProps } from '@dxos/react-ui';
+import { type Channel, Message } from '@dxos/types';
+
+import { Chat } from '#components';
+import { useStatus } from '#hooks';
+import { ThreadOperation } from '#types';
+
+export type ChannelChatProps = {
+  space: Space;
+  channel: Channel.Channel;
+};
+
+/**
+ * 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) => {
+    const identity = useIdentity()!;
+    const members = useMembers(space.id);
+    const id = Obj.getURI(channel);
+    const activity = useStatus(space, id);
+    const { invokePromise } = useOperationInvoker();
+
+    const feed = channel.feed?.target;
+    const messages = useQuery(
+      space.db,
+      feed ? Query.select(Filter.type(Message.Message)).from(feed) : Query.select(Filter.nothing()),
+    );
+
+    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 },
+        text,
+      });
+      return true;
+    };
+
+    return (
+      <Chat
+        {...composableProps(props)}
+        id={id}
+        identity={identity}
+        members={members}
+        messages={messages}
+        activity={activity}
+        onSend={handleSend}
+        orientation='bottom'
+        readOnly={readOnly}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

package/src/containers/ChannelChat/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { ChannelChat } from './ChannelChat';
+
+export { ChannelChat };
+export default ChannelChat;

package/src/containers/CommentsCompanion/CommentsCompanion.stories.tsx

@@ -0,0 +1,355 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import * as AnthropicClient from '@effect/ai-anthropic/AnthropicClient';
+import * as FetchHttpClient from '@effect/platform/FetchHttpClient';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import React, { useEffect, useMemo } from 'react';
+
+import { AiModelResolver } from '@dxos/ai';
+import { AnthropicResolver } from '@dxos/ai/resolvers';
+import { ActivationEvents, Capabilities, Capability, Plugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface, useCapability } from '@dxos/app-framework/ui';
+import {
+  AppActivationEvents,
+  AppCapabilities,
+  AppPlugin,
+  LayoutOperation,
+  createObjectNode,
+  getPersonalSpace,
+} from '@dxos/app-toolkit';
+import { AppSurface, useAppGraph } from '@dxos/app-toolkit/ui';
+import { Operation, OperationHandlerSet } from '@dxos/compute';
+import { Filter, Obj, Query, Ref } from '@dxos/echo';
+import { AtomQuery } from '@dxos/echo-atom';
+import { DXN } from '@dxos/keys';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { Graph, GraphBuilder, Node, NodeMatcher, qualifyId } from '@dxos/plugin-graph';
+import { Markdown, MarkdownCapabilities, MarkdownEvents } from '@dxos/plugin-markdown';
+import { MarkdownPlugin } from '@dxos/plugin-markdown/testing';
+import { SpacePlugin } from '@dxos/plugin-space/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useAttentionAttributes } from '@dxos/react-ui-attention';
+import { Loading, withLayout } from '@dxos/react-ui/testing';
+import { Text } from '@dxos/schema';
+import { AnchoredTo, Message, Thread } from '@dxos/types';
+import { isNonNullable } from '@dxos/util';
+
+import { translations } from '#translations';
+
+import { textOf } from '../../should-trigger-agent';
+import { ThreadPlugin } from '../../ThreadPlugin';
+import { AgentIdentity, ThreadCapabilities } from '../../types';
+
+random.seed(1);
+
+const STORY_AGENT_NAME = 'Kai';
+
+/**
+ * Canned echo runner — never makes network calls. On each turn finds the
+ * last non-assistant message and appends an assistant message that quotes it.
+ * Used by the WithMentionAgent / WithAutoAgent variants.
+ */
+const StubAgentRunner: ThreadCapabilities.AgentRunner = {
+  run: ({ thread }) =>
+    Effect.gen(function* () {
+      const identity = yield* Capability.get(AgentIdentity);
+      // User-authored messages have no role set; only assistant messages do.
+      const lastUser = [...thread.messages].reverse().find((ref) => ref.target?.sender.role !== 'assistant');
+      const echoText = textOf(lastUser?.target);
+      const reply = Obj.make(Message.Message, {
+        created: new Date().toISOString(),
+        sender: { role: 'assistant', name: identity.name, identityDid: identity.identityDid },
+        blocks: [{ _tag: 'text', text: `(${identity.name}) you said: "${echoText}"` }],
+      });
+      Obj.update(thread, (thread) => {
+        (thread.messages as Ref.Ref<Message.Message>[]).push(Ref.make(reply));
+      });
+    }),
+};
+
+/**
+ * Live `AppCapabilities.AiServiceLayer` wired through the DXOS edge so
+ * `ThreadPlugin`'s default `AgentRunner` can call Claude. The edge endpoint is
+ * open in dev — no API key is needed for the storybook to round-trip a real
+ * LLM response. Used by the WithLiveAgent variant.
+ *
+ * Headless `test-storybook` runs render the story but don't submit a comment,
+ * so no network call is made there either.
+ */
+const anthropicResolverLayer = AnthropicResolver.make().pipe(
+  Layer.provide(
+    AnthropicClient.layer({
+      apiUrl: 'https://ai-service.dxos.workers.dev/provider/anthropic',
+    }),
+  ),
+  Layer.provide(FetchHttpClient.layer),
+);
+
+const aiServiceLayer = AiModelResolver.AiModelResolver.buildAiService.pipe(
+  Layer.provide(
+    anthropicResolverLayer.pipe(
+      Layer.provide(AiModelResolver.AiModelResolver.fromModelMap({ name: 'Fallback' }, Effect.succeed({}))),
+    ),
+  ),
+);
+
+/**
+ * Common story-only plugin:
+ * 1. Exposes Markdown documents in the personal space as direct children of the
+ *    graph root, so ThreadPlugin's `comment-toolbar` extension can attach the
+ *    `comment` action to the doc's node.
+ * 2. Stubs out plugin-deck's layout operations (`UpdateCompanion`,
+ *    `ScrollIntoView`) that ThreadPlugin and the CommentsCompanion invoke —
+ *    no handler errors otherwise.
+ * 3. Contributes a static `AgentIdentity` ("Kai") so any AgentRunner has a name
+ *    to stamp on assistant messages.
+ *
+ * Agent runner / LLM hookup is contributed separately by `StoryStubAgentPlugin`
+ * (no network) or `StoryLiveAgentPlugin` (real Anthropic via DXOS edge),
+ * selected per-story via the `liveAgent` arg.
+ */
+const StoryGraphPlugin = Plugin.define(
+  Plugin.makeMeta({
+    key: DXN.make('org.dxos.plugin.thread.story.storyGraph'),
+    name: 'Story Graph',
+  }),
+).pipe(
+  AppPlugin.addAppGraphModule({
+    activate: Effect.fnUntraced(function* () {
+      const capabilities = yield* Capability.Service;
+      const extensions = yield* GraphBuilder.createExtension({
+        id: 'storyDocs',
+        match: NodeMatcher.whenRoot,
+        connector: (_, get) =>
+          Effect.gen(function* () {
+            const client = capabilities.get(ClientCapabilities.Client);
+            const space = getPersonalSpace(client);
+            if (!space) {
+              return [];
+            }
+            const docs = get(AtomQuery.make(space.db, Filter.type(Markdown.Document)));
+            return docs
+              .map((object) => createObjectNode({ db: space.db, object, droppable: false }))
+              .filter(isNonNullable);
+          }),
+      });
+      return Capability.contributes(AppCapabilities.AppGraphBuilder, extensions);
+    }),
+  }),
+  AppPlugin.addOperationHandlerModule({
+    activate: () =>
+      Effect.succeed(
+        Capability.contributes(
+          Capabilities.OperationHandler,
+          OperationHandlerSet.make(
+            Operation.withHandler(LayoutOperation.UpdateCompanion, () => Effect.void),
+            Operation.withHandler(LayoutOperation.ScrollIntoView, () => Effect.void),
+          ),
+        ),
+      ),
+  }),
+  Plugin.addModule({
+    id: 'story-graph.identity',
+    activatesOn: ActivationEvents.Startup,
+    activate: () => Effect.succeed(Capability.contributes(AgentIdentity, { name: STORY_AGENT_NAME })),
+  }),
+  Plugin.make,
+);
+
+/**
+ * Stub agent runner — used by the WithMentionAgent / WithAutoAgent variants.
+ * Loaded BEFORE ThreadPlugin so its `AgentRunner` contribution wins over
+ * ThreadPlugin's default LLM-backed runner.
+ */
+const StoryStubAgentPlugin = Plugin.define(
+  Plugin.makeMeta({
+    key: DXN.make('org.dxos.plugin.thread.story.storyStubAgent'),
+    name: 'Story Stub Agent',
+  }),
+).pipe(
+  Plugin.addModule({
+    id: 'story-stub-agent.runner',
+    activatesOn: ActivationEvents.Startup,
+    activate: () => Effect.succeed(Capability.contributes(ThreadCapabilities.AgentRunner, StubAgentRunner)),
+  }),
+  Plugin.make,
+);
+
+/**
+ * Live agent runner hookup — contributes `AppCapabilities.AiServiceLayer` so
+ * ThreadPlugin's default `AgentRunner` routes through Anthropic via the DXOS
+ * edge. Used by the WithLiveAgent variant.
+ */
+const StoryLiveAgentPlugin = Plugin.define(
+  Plugin.makeMeta({
+    key: DXN.make('org.dxos.plugin.thread.story.storyLiveAgent'),
+    name: 'Story Live Agent',
+  }),
+).pipe(
+  Plugin.addModule({
+    id: 'story-live-agent.ai-service',
+    activatesOn: ActivationEvents.Startup,
+    activate: () => Effect.succeed(Capability.contributes(AppCapabilities.AiServiceLayer, aiServiceLayer)),
+  }),
+  Plugin.make,
+);
+
+type StoryArgs = {
+  /**
+   * Sets the Markdown plugin's `commentAgentMode` setting so newly-created
+   * comment threads on the seeded doc are stamped with the matching agent
+   * config by ThreadOperation.Create.
+   */
+  agentMode?: Markdown.Settings['commentAgentMode'];
+
+  /**
+   * When true, contributes a live `AiServiceLayer` (Anthropic via DXOS edge)
+   * so ThreadPlugin's default `AgentRunner` makes a real LLM call.
+   * Defaults to `false` — variants use the stub echo runner.
+   */
+  liveAgent?: boolean;
+};
+
+const DefaultStory = ({ agentMode }: StoryArgs) => {
+  const { graph } = useAppGraph();
+  const [space] = useSpaces();
+  const [doc] = useQuery(space?.db, Query.type(Markdown.Document));
+  const attendableId = doc && qualifyId(Node.RootId, doc.id);
+  const attentionAttrs = useAttentionAttributes(attendableId);
+
+  // Story renders surfaces directly (no deck), so expand graph actions for the doc node.
+  useEffect(() => {
+    if (attendableId) {
+      void Graph.expand(graph, attendableId, 'action');
+    }
+  }, [graph, attendableId]);
+
+  // Push the variant's `agentMode` into the markdown plugin settings so that
+  // ThreadOperation.Create stamps new threads with the matching agent config.
+  const markdownSettings = useCapability(MarkdownCapabilities.Settings);
+  const registry = useCapability(Capabilities.AtomRegistry);
+  useEffect(() => {
+    if (!markdownSettings) {
+      return;
+    }
+    registry.set(markdownSettings, { ...registry.get(markdownSettings), commentAgentMode: agentMode ?? 'off' });
+  }, [markdownSettings, registry, agentMode]);
+
+  const articleData = useMemo(() => ({ subject: doc, attendableId: attendableId ?? 'story' }), [doc, attendableId]);
+  const companionData = useMemo(
+    () => ({ subject: 'comments', companionTo: doc, attendableId: attendableId ?? 'story' }),
+    [doc, attendableId],
+  );
+
+  if (!doc) {
+    return <Loading data={{ doc: !!doc }} />;
+  }
+
+  return (
+    <div className='dx-container grid grid-cols-[3fr_2fr] gap-4' {...attentionAttrs}>
+      <Surface.Surface type={AppSurface.Article} data={articleData} limit={1} />
+      <Surface.Surface type={AppSurface.Article} data={companionData} limit={1} />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/containers/CommentsCompanion',
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager<StoryArgs>((context) => ({
+      setupEvents: [AppActivationEvents.SetupSettings, MarkdownEvents.SetupExtensions],
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Markdown.Document, Text.Text, Thread.Thread, Message.Message, AnchoredTo.AnchoredTo],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              personalSpace.db.add(
+                Markdown.make({
+                  name: 'Sample',
+                  content: [
+                    '# Sample',
+                    '',
+                    'This document has comment threads attached to it.',
+                    '',
+                    'Select text in the editor to add a new comment, or view existing threads in the companion.',
+                    '',
+                  ].join('\n'),
+                }),
+              );
+
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+            }),
+        }),
+        SpacePlugin({}),
+        MarkdownPlugin(),
+        StoryGraphPlugin(),
+        // The stub agent plugin must come BEFORE ThreadPlugin so its
+        // `AgentRunner` contribution wins over ThreadPlugin's default
+        // (LLM-backed) runner — `Capability.get` returns the first match.
+        // The live variant simply doesn't contribute a stub, letting the
+        // default runner reach Anthropic via the AiServiceLayer.
+        ...(context.args.liveAgent ? [] : [StoryStubAgentPlugin()]),
+        ThreadPlugin(),
+        ...(context.args.liveAgent ? [StoryLiveAgentPlugin()] : []),
+      ],
+    })),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    controls: { disable: true },
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+/**
+ * Thread opted in to the AI agent in `mention` mode.
+ * Type `@Kai …` in the comment input to trigger the stub runner; plain messages are ignored.
+ */
+export const WithMentionAgent: Story = {
+  args: {
+    agentMode: 'mention',
+  },
+};
+
+/**
+ * Thread opted in to the AI agent in `auto` mode.
+ * Each user message triggers the stub runner, which appends a canned echo reply.
+ */
+export const WithAutoAgent: Story = {
+  args: {
+    agentMode: 'auto',
+  },
+};
+
+/**
+ * Thread opted in to the AI agent in `auto` mode with the LIVE runner —
+ * ThreadPlugin's default `AgentRunner` calls Anthropic Claude via the DXOS
+ * edge proxy. Each user message triggers a real LLM response.
+ *
+ * Note: headless `test-storybook` only renders the story (no comment is
+ * submitted) so this variant does not make a network call in CI.
+ */
+export const WithLiveAgent: Story = {
+  args: {
+    agentMode: 'auto',
+    liveAgent: true,
+  },
+};

package/src/containers/{ThreadCompanion/ThreadCompanion.tsx → CommentsCompanion/CommentsCompanion.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,24 +19,23 @@ 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 };
 
-export type ThreadCompanionProps = AppSurface.ObjectArticleProps<
-  Thread.Thread,
-  {
-    attendableId?: string;
-  }
->;
+/**
+ * Subject is the host object being commented on (e.g. a Markdown.Document),
+ * not a Thread — the threads anchored to that host are discovered via the
+ * `AnchoredTo` query inside the component.
+ */
+export type CommentsCompanionProps = AppSurface.ObjectArticleProps<Obj.Any>;
 
-export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps) => {
+export const CommentsCompanion = ({ attendableId, subject }: CommentsCompanionProps) => {
   const { t } = useTranslation(meta.id);
-  const manager = usePluginManager();
   const { invokePromise } = useOperationInvoker();
   const identity = useIdentity();
-  const subjectId = Obj.getDXN(subject).toString();
+  const subjectId = Obj.getURI(subject);
   const parentId = attendableId ? getParentId(attendableId) : undefined;
   const registry = useCapability(Capabilities.AtomRegistry);
 
@@ -52,20 +51,12 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
       registry.set(viewStoreAtom, { ...viewStore, [subjectId]: { ...initialViewState } });
       return initialViewState;
     }
+
     return viewStore[subjectId];
   }, [viewStore, subjectId, registry, viewStoreAtom]);
   const { showResolvedThreads } = viewState;
 
-  const onChangeViewState = useCallback(
-    (nextValue: string) => {
-      registry.set(viewStoreAtom, {
-        ...registry.get(viewStoreAtom),
-        [subjectId]: { ...registry.get(viewStoreAtom)[subjectId], showResolvedThreads: nextValue === 'all' },
-      });
-    },
-    [registry, viewStoreAtom, subjectId],
-  );
-
+  const commentConfigs = useCapabilities(AppCapabilities.CommentConfig);
   const anchorSorts = useCapabilities(AppCapabilities.AnchorSort);
   const sort = useMemo(
     () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
@@ -79,13 +70,23 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
     .filter((anchor) => Obj.instanceOf(Thread.Thread, Relation.getSource(anchor)))
     .concat(drafts ?? []);
 
+  const handleChangeViewState = useCallback(
+    (nextValue: string) => {
+      registry.set(viewStoreAtom, {
+        ...registry.get(viewStoreAtom),
+        [subjectId]: { ...registry.get(viewStoreAtom)[subjectId], showResolvedThreads: nextValue === 'all' },
+      });
+    },
+    [registry, viewStoreAtom, subjectId],
+  );
+
   const { hasAttention, isAncestor, isRelated } = useAttention(parentId);
   const isAttended = hasAttention || isAncestor || isRelated;
 
   const handleAttend = useCallback(
     (anchor: AnchoredTo.AnchoredTo) => {
       const thread = Relation.getSource(anchor) as Thread.Thread;
-      const threadId = Obj.getDXN(thread).toString();
+      const threadId = Obj.getURI(thread);
 
       if (state.current !== threadId) {
         registry.set(stateAtom, { ...registry.get(stateAtom), current: threadId });
@@ -93,14 +94,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 +108,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(
@@ -122,7 +121,7 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
       });
 
       const thread = Relation.getSource(anchor) as Thread.Thread;
-      registry.set(stateAtom, { ...registry.get(stateAtom), current: Obj.getDXN(thread).toString() });
+      registry.set(stateAtom, { ...registry.get(stateAtom), current: Obj.getURI(thread) });
     },
     [invokePromise, identity, subject, registry, stateAtom],
   );
@@ -153,7 +152,7 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
   const handleAcceptProposal = useCallback<NonNullable<CommentsPanelProps['onAcceptProposal']>>(
     async (anchor, messageId) => {
       const thread = Relation.getSource(anchor) as Thread.Thread;
-      const messageIndex = thread.messages.findIndex(Ref.hasObjectId(messageId));
+      const messageIndex = thread.messages.findIndex(Ref.hasEntityId(messageId));
       const message = thread.messages[messageIndex]?.target;
       const proposal = message?.blocks.find((block) => block._tag === 'proposal');
       if (!proposal || !anchor.anchor) {
@@ -188,7 +187,7 @@ export const ThreadCompanion = ({ attendableId, subject }: ThreadCompanionProps)
     <Tabs.Root
       orientation='horizontal'
       value={showResolvedThreads ? 'all' : 'unresolved'}
-      onValueChange={onChangeViewState}
+      onValueChange={handleChangeViewState}
     >
       <Panel.Root>
         <Panel.Toolbar asChild>

package/src/containers/CommentsCompanion/index.ts

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

package/src/containers/{ChatContainer/ChatContainer.stories.tsx → ThreadContainer/ThreadContainer.stories.tsx}

@@ -19,10 +19,9 @@ import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
 import { withLayout, Loading } from '@dxos/react-ui/testing';
 import { Message, Thread } from '@dxos/types';
 
-import { Channel } from '#types';
+import { translations } from '#translations';
 
-import { translations } from '../../translations';
-import { ChatContainer } from './ChatContainer';
+import { ThreadContainer } from './ThreadContainer';
 
 random.seed(1);
 
@@ -30,26 +29,26 @@ const DefaultStory = () => {
   const client = useClient();
   const identity = useIdentity();
   const [space, setSpace] = useState<Space>();
-  const [channel, setChannel] = useState<Channel.Channel | null>();
+  const [thread, setThread] = useState<Thread.Thread | null>();
 
   useAsyncEffect(async () => {
     if (identity) {
       const space = await client.spaces.create();
-      const channel = space.db.add(Channel.make());
+      const thread = space.db.add(Thread.make({ status: 'active' }));
       setSpace(space);
-      setChannel(channel);
+      setThread(thread);
     }
   }, [identity]);
 
-  if (!identity || !channel || !space || !channel.defaultThread.target) {
-    return <Loading data={{ identity: !!identity, space: !!space, channel: !!channel }} />;
+  if (!identity || !thread || !space) {
+    return <Loading data={{ identity: !!identity, space: !!space, thread: !!thread }} />;
   }
 
-  return <ChatContainer space={space} thread={channel.defaultThread.target} />;
+  return <ThreadContainer space={space} thread={thread} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-thread/containers/ChatContainer',
+  title: 'plugins/plugin-thread/containers/ThreadContainer',
   component: ThreadComponent.Root as any,
   render: DefaultStory,
   decorators: [
@@ -71,7 +70,7 @@ const meta = {
     }),
     withClientProvider({
       createSpace: true,
-      types: [Thread.Thread, Channel.Channel, Message.Message],
+      types: [Thread.Thread, Message.Message],
     }),
   ],
   parameters: {