@dxos/plugin-thread 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

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}

@@ -8,25 +8,35 @@ import React, { useCallback, useMemo } from 'react';
 import { Capabilities } from '@dxos/app-framework';
 import { useCapabilities, useCapability, useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppCapabilities, CollaborationOperation, LayoutOperation } from '@dxos/app-toolkit';
-import { Filter, Obj, Query, Relation } from '@dxos/echo';
-import { Ref, useQuery } from '@dxos/react-client/echo';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+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 { useAttended } from '@dxos/react-ui-attention';
+import { getParentId, useAttention } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { AnchoredTo, Thread } from '@dxos/types';
 
-import { CommentsContainer, type CommentsContainerProps } from '../../components';
-import { meta } from '../../meta';
-import { ThreadCapabilities, ThreadOperation, type ViewState } from '../../types';
+import { CommentsPanel, type CommentsPanelProps } from '#components';
+import { meta } from '#meta';
+import { ThreadOperation } from '#types';
+import { ThreadCapabilities, type ViewState } from '#types';
 
 const initialViewState: ViewState = { showResolvedThreads: false };
 
-export const ThreadCompanion = ({ subject }: { subject: any }) => {
+/**
+ * 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 CommentsCompanion = ({ attendableId, subject }: CommentsCompanionProps) => {
   const { t } = useTranslation(meta.id);
   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);
 
   const stateAtom = useCapability(ThreadCapabilities.State);
@@ -41,20 +51,12 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
       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,
@@ -68,27 +70,45 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
     .filter((anchor) => Obj.instanceOf(Thread.Thread, Relation.getSource(anchor)))
     .concat(drafts ?? []);
 
-  const attended = useAttended();
+  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 });
 
-        // TODO(wittjosiah): Should this be a thread-specific intent?
-        //  The layout doesn't know about threads and this working depends on other plugins conditionally handling it.
-        //  This may be overloading this intent or highjacking its intended purpose.
-        void invokePromise(LayoutOperation.ScrollIntoView, {
-          subject: Obj.getDXN(subject).toString(),
-          cursor: anchor.anchor,
-          ref: threadId,
-        });
+        // Scroll plank into view (deck handler).
+        void invokePromise(LayoutOperation.ScrollIntoView, { subject: parentId });
+
+        // Scroll within content to anchor (comment config per typename).
+        if (anchor.anchor && parentId) {
+          const typename = Obj.getTypename(subject);
+          const commentConfig = commentConfigs.find(({ id }) => id === typename);
+          if (commentConfig?.scrollToAnchor) {
+            void invokePromise(commentConfig.scrollToAnchor, {
+              subject: parentId,
+              cursor: anchor.anchor,
+              ref: threadId,
+            });
+          }
+        }
       }
     },
-    [state.current, invokePromise, subject, registry, stateAtom],
+    [state.current, invokePromise, registry, stateAtom, parentId, subject, commentConfigs],
   );
 
   const handleComment = useCallback(
@@ -101,7 +121,7 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
       });
 
       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],
   );
@@ -129,10 +149,10 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
     [invokePromise, subject],
   );
 
-  const handleAcceptProposal = useCallback<NonNullable<CommentsContainerProps['onAcceptProposal']>>(
+  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) {
@@ -150,9 +170,9 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
   );
 
   const comments = (
-    <CommentsContainer
+    <CommentsPanel
       anchors={anchors}
-      currentId={attended.includes(subjectId) ? state.current : undefined}
+      currentId={isAttended ? state.current : undefined}
       showResolvedThreads={showResolvedThreads}
       onAttend={handleAttend}
       onComment={handleComment}
@@ -163,22 +183,21 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
     />
   );
 
-  // TODO(burdon): Root should be headless.
   return (
     <Tabs.Root
-      value={showResolvedThreads ? 'all' : 'unresolved'}
       orientation='horizontal'
-      onValueChange={onChangeViewState}
+      value={showResolvedThreads ? 'all' : 'unresolved'}
+      onValueChange={handleChangeViewState}
     >
       <Panel.Root>
         <Panel.Toolbar asChild>
           <Toolbar.Root>
-            <Tabs.Tablist>
-              <Tabs.Tab value='unresolved' classNames='text-sm'>
-                {t('show unresolved label')}
+            <Tabs.Tablist classNames='p-0'>
+              <Tabs.Tab classNames='text-sm' value='unresolved'>
+                {t('show-unresolved.label')}
               </Tabs.Tab>
-              <Tabs.Tab value='all' classNames='text-sm'>
-                {t('show all label')}
+              <Tabs.Tab classNames='text-sm' value='all'>
+                {t('show-all.label')}
               </Tabs.Tab>
             </Tabs.Tablist>
           </Toolbar.Root>
@@ -186,8 +205,8 @@ export const ThreadCompanion = ({ subject }: { subject: any }) => {
         <Panel.Content asChild>
           <ScrollArea.Root thin>
             <ScrollArea.Viewport>
-              <Tabs.Tabpanel value='all'>{showResolvedThreads && comments}</Tabs.Tabpanel>
-              <Tabs.Tabpanel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Tabpanel>
+              <Tabs.Panel value='all'>{showResolvedThreads && comments}</Tabs.Panel>
+              <Tabs.Panel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Panel>
             </ScrollArea.Viewport>
           </ScrollArea.Root>
         </Panel.Content>

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}

@@ -5,60 +5,58 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
-import { Capabilities, Capability, OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Surface } from '@dxos/app-framework/ui';
-import { faker } from '@dxos/random';
+import { corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Thread as ThreadComponent } from '@dxos/react-ui-thread';
-import { render } from '@dxos/storybook-utils';
+import { withLayout, Loading } from '@dxos/react-ui/testing';
 import { Message, Thread } from '@dxos/types';
 
-import { translations } from '../../translations';
-import { Channel } from '../../types';
+import { translations } from '#translations';
 
-import { ChatContainer } from './ChatContainer';
+import { ThreadContainer } from './ThreadContainer';
 
-faker.seed(1);
+random.seed(1);
 
 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 null;
+  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: render(DefaultStory),
+  render: DefaultStory,
   decorators: [
-    withTheme(),
     withLayout({ layout: 'column' }),
     // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
     //  Currently this is required due to useOnEditAnalytics.
     withPluginManager({
-      plugins: [OperationPlugin(), RuntimePlugin()],
+      plugins: corePlugins(),
       capabilities: [
         Capability.contributes(
           Capabilities.ReactSurface,
@@ -72,7 +70,7 @@ const meta = {
     }),
     withClientProvider({
       createSpace: true,
-      types: [Thread.Thread, Channel.Channel, Message.Message],
+      types: [Thread.Thread, Message.Message],
     }),
   ],
   parameters: {