@dxos/plugin-thread 0.8.4-main.ead640a → 0.8.4-main.effb148878

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

@@ -0,0 +1,339 @@
+//
+// 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 { 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({ id: 'story-graph', name: 'Story Graph' }).pipe(
+  AppPlugin.addAppGraphModule({
+    activate: Effect.fnUntraced(function* () {
+      const capabilities = yield* Capability.Service;
+      const extensions = yield* GraphBuilder.createExtension({
+        id: 'story-docs',
+        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({ id: 'story-stub-agent', 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({ id: 'story-live-agent', 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/CommentsCompanion/CommentsCompanion.tsx

@@ -0,0 +1,216 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+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 { 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 { getParentId, useAttention } from '@dxos/react-ui-attention';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { AnchoredTo, Thread } from '@dxos/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 };
+
+/**
+ * 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.getURI(subject);
+  const parentId = attendableId ? getParentId(attendableId) : undefined;
+  const registry = useCapability(Capabilities.AtomRegistry);
+
+  const stateAtom = useCapability(ThreadCapabilities.State);
+  const viewStoreAtom = useCapability(ThreadCapabilities.ViewState);
+  const state = useAtomValue(stateAtom);
+  const viewStore = useAtomValue(viewStoreAtom);
+  const drafts = state.drafts[subjectId];
+
+  // Get or initialize view state for this subject.
+  const viewState = useMemo(() => {
+    if (!viewStore[subjectId]) {
+      registry.set(viewStoreAtom, { ...viewStore, [subjectId]: { ...initialViewState } });
+      return initialViewState;
+    }
+
+    return viewStore[subjectId];
+  }, [viewStore, subjectId, registry, viewStoreAtom]);
+  const { showResolvedThreads } = viewState;
+
+  const commentConfigs = useCapabilities(AppCapabilities.CommentConfig);
+  const anchorSorts = useCapabilities(AppCapabilities.AnchorSort);
+  const sort = useMemo(
+    () => anchorSorts.find(({ key }) => key === Obj.getTypename(subject))?.sort,
+    [anchorSorts, subject],
+  );
+
+  const db = Obj.getDatabase(subject);
+  const objectsAnchoredTo = useQuery(db, Query.select(Filter.id(subject.id)).targetOf(AnchoredTo.AnchoredTo));
+  const anchors = objectsAnchoredTo
+    .toSorted((a, b) => sort?.(a, b) ?? 0)
+    .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.getURI(thread);
+
+      if (state.current !== threadId) {
+        registry.set(stateAtom, { ...registry.get(stateAtom), current: 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, registry, stateAtom, parentId, subject, commentConfigs],
+  );
+
+  const handleComment = useCallback(
+    async (anchor: AnchoredTo.AnchoredTo, text: string) => {
+      await invokePromise(ThreadOperation.AddMessage, {
+        anchor,
+        subject,
+        sender: { identityDid: identity?.did },
+        text,
+      });
+
+      const thread = Relation.getSource(anchor) as Thread.Thread;
+      registry.set(stateAtom, { ...registry.get(stateAtom), current: Obj.getURI(thread) });
+    },
+    [invokePromise, identity, subject, registry, stateAtom],
+  );
+
+  const handleResolve = useCallback(
+    (anchor: AnchoredTo.AnchoredTo) =>
+      invokePromise(ThreadOperation.ToggleResolved, {
+        thread: Relation.getSource(anchor) as Thread.Thread,
+      }),
+    [invokePromise],
+  );
+
+  const handleThreadDelete = useCallback(
+    (anchor: AnchoredTo.AnchoredTo) => invokePromise(ThreadOperation.Delete, { anchor, subject }),
+    [invokePromise, subject],
+  );
+
+  const handleMessageDelete = useCallback(
+    (anchor: AnchoredTo.AnchoredTo, messageId: string) =>
+      invokePromise(ThreadOperation.DeleteMessage, {
+        anchor,
+        subject,
+        messageId,
+      }),
+    [invokePromise, subject],
+  );
+
+  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 message = thread.messages[messageIndex]?.target;
+      const proposal = message?.blocks.find((block) => block._tag === 'proposal');
+      if (!proposal || !anchor.anchor) {
+        return;
+      }
+
+      await invokePromise(CollaborationOperation.AcceptProposal, {
+        subject,
+        anchor: anchor.anchor,
+        proposal,
+      });
+      await invokePromise(ThreadOperation.ToggleResolved, { thread });
+    },
+    [invokePromise, subject],
+  );
+
+  const comments = (
+    <CommentsPanel
+      anchors={anchors}
+      currentId={isAttended ? state.current : undefined}
+      showResolvedThreads={showResolvedThreads}
+      onAttend={handleAttend}
+      onComment={handleComment}
+      onResolve={handleResolve}
+      onMessageDelete={handleMessageDelete}
+      onThreadDelete={handleThreadDelete}
+      onAcceptProposal={handleAcceptProposal}
+    />
+  );
+
+  return (
+    <Tabs.Root
+      orientation='horizontal'
+      value={showResolvedThreads ? 'all' : 'unresolved'}
+      onValueChange={handleChangeViewState}
+    >
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Tabs.Tablist classNames='p-0'>
+              <Tabs.Tab classNames='text-sm' value='unresolved'>
+                {t('show-unresolved.label')}
+              </Tabs.Tab>
+              <Tabs.Tab classNames='text-sm' value='all'>
+                {t('show-all.label')}
+              </Tabs.Tab>
+            </Tabs.Tablist>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root thin>
+            <ScrollArea.Viewport>
+              <Tabs.Panel value='all'>{showResolvedThreads && comments}</Tabs.Panel>
+              <Tabs.Panel value='unresolved'>{!showResolvedThreads && comments}</Tabs.Panel>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    </Tabs.Root>
+  );
+};

package/src/containers/CommentsCompanion/index.ts

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

package/src/containers/ThreadContainer/ThreadContainer.stories.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Surface } from '@dxos/app-framework/ui';
+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 { Thread as ThreadComponent } from '@dxos/react-ui-thread';
+import { withLayout, Loading } from '@dxos/react-ui/testing';
+import { Message, Thread } from '@dxos/types';
+
+import { translations } from '#translations';
+
+import { ThreadContainer } from './ThreadContainer';
+
+random.seed(1);
+
+const DefaultStory = () => {
+  const client = useClient();
+  const identity = useIdentity();
+  const [space, setSpace] = useState<Space>();
+  const [thread, setThread] = useState<Thread.Thread | null>();
+
+  useAsyncEffect(async () => {
+    if (identity) {
+      const space = await client.spaces.create();
+      const thread = space.db.add(Thread.make({ status: 'active' }));
+      setSpace(space);
+      setThread(thread);
+    }
+  }, [identity]);
+
+  if (!identity || !thread || !space) {
+    return <Loading data={{ identity: !!identity, space: !!space, thread: !!thread }} />;
+  }
+
+  return <ThreadContainer space={space} thread={thread} />;
+};
+
+const meta = {
+  title: 'plugins/plugin-thread/containers/ThreadContainer',
+  component: ThreadComponent.Root as any,
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'column' }),
+    // TODO(wittjosiah): This shouldn't depend on app framework (use withClientProvider instead).
+    //  Currently this is required due to useOnEditAnalytics.
+    withPluginManager({
+      plugins: corePlugins(),
+      capabilities: [
+        Capability.contributes(
+          Capabilities.ReactSurface,
+          Surface.create({
+            id: 'test',
+            role: 'card',
+            component: ({ role }) => <span>{JSON.stringify({ role })}</span>,
+          }),
+        ),
+      ],
+    }),
+    withClientProvider({
+      createSpace: true,
+      types: [Thread.Thread, Message.Message],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};