@dxos/plugin-assistant 0.8.4-main.2e9d522 → 0.8.4-main.5ea62a8

package/src/stories/Chat.stories.tsx

@@ -4,63 +4,113 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react-vite';
-import React, { useCallback, useEffect, useMemo, useState, type FC } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { type FC, useCallback } from 'react';
 
-import { Capabilities, contributes, Events, IntentPlugin, type Plugin, SettingsPlugin } from '@dxos/app-framework';
-import { withPluginManager } from '@dxos/app-framework/testing';
-import { ContextBinder } from '@dxos/assistant';
-import {
-  DESIGN_BLUEPRINT,
-  TASK_BLUEPRINT,
-  readDocument,
-  remoteServiceEndpoints,
-  writeDocument,
-} from '@dxos/assistant-testing';
+import { EXA_API_KEY } from '@dxos/ai/testing';
+import { Capabilities, useCapabilities } from '@dxos/app-framework';
+import { AiContextBinder } from '@dxos/assistant';
+import { LINEAR_BLUEPRINT, RESEARCH_BLUEPRINT, ResearchDataTypes, ResearchGraph } from '@dxos/assistant-testing';
 import { Blueprint } from '@dxos/blueprints';
 import { Filter, Obj, Ref } from '@dxos/echo';
-import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { ChessPlugin } from '@dxos/plugin-chess';
-import { ClientPlugin } from '@dxos/plugin-client';
+import { Board, BoardPlugin } from '@dxos/plugin-board';
+import { Chess, ChessPlugin } from '@dxos/plugin-chess';
 import { InboxPlugin } from '@dxos/plugin-inbox';
-import { MapPlugin } from '@dxos/plugin-map';
-import { MarkdownPlugin } from '@dxos/plugin-markdown';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { SpacePlugin } from '@dxos/plugin-space';
+import { Mailbox } from '@dxos/plugin-inbox/types';
+import { Map, MapPlugin } from '@dxos/plugin-map';
+import { createLocationSchema } from '@dxos/plugin-map/testing';
+import { Markdown, MarkdownPlugin } from '@dxos/plugin-markdown';
 import { TablePlugin } from '@dxos/plugin-table';
+import { ThreadPlugin } from '@dxos/plugin-thread';
+import { TokenManagerPlugin } from '@dxos/plugin-token-manager';
 import { TranscriptionPlugin } from '@dxos/plugin-transcription';
-import { Config } from '@dxos/react-client';
-import { createDocAccessor, useQuery, useSpace } from '@dxos/react-client/echo';
-import { Toolbar, useThemeContext, useTranslation } from '@dxos/react-ui';
-import {
-  Editor,
-  createBasicExtensions,
-  createDataExtensions,
-  createMarkdownExtensions,
-  createThemeExtensions,
-  outliner,
-} from '@dxos/react-ui-editor';
-import { mx } from '@dxos/react-ui-theme';
+import { Transcript } from '@dxos/plugin-transcription/types';
+import { useClient } from '@dxos/react-client';
+import { useSpace } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { Table } from '@dxos/react-ui-table/types';
 import { DataType } from '@dxos/schema';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
+import { isNonNullable, trim } from '@dxos/util';
 
-import { AssistantPlugin } from '../AssistantPlugin';
-import { Chat, TemplateEditor, type ChatPromptProps } from '../components';
-import { type AiServicePreset, AiServicePresets } from '../hooks';
-import { useChatProcessor, useChatServices } from '../hooks';
-import { meta as AssistantMeta } from '../meta';
+import { BLUEPRINT_KEY } from '../capabilities';
+import { createTestMailbox, createTestTranscription } from '../testing';
 import { translations } from '../translations';
 import { Assistant } from '../types';
 
-//
-// Story container
-//
+import {
+  BlueprintContainer,
+  ChatContainer,
+  CommentsContainer,
+  type ComponentProps,
+  GraphContainer,
+  LoggingContainer,
+  MessageContainer,
+  SurfaceContainer,
+  TasksContainer,
+  TokenManagerContainer,
+} from './components';
+import { accessTokensFromEnv, addTestData, config, getDecorators, testTypes } from './testing';
+
+const panelClassNames = 'flex flex-col overflow-hidden bg-baseSurface rounded border border-separator';
+
+const DefaultStory = ({
+  debug = true,
+  components,
+  blueprints = [],
+}: {
+  debug?: boolean;
+  components: (FC<ComponentProps> | FC<ComponentProps>[])[];
+  blueprints?: string[];
+}) => {
+  const client = useClient();
+  const space = useSpace();
+
+  const blueprintsDefinitions = useCapabilities(Capabilities.BlueprintDefinition);
+  useAsyncEffect(async () => {
+    if (!space) {
+      return;
+    }
+    const { objects: chats = [] } = await space.db.query(Filter.type(Assistant.Chat)).run();
+    const chat = chats[0];
+    if (!chat) {
+      return;
+    }
+
+    // Add blueprints to context.
+    const binder = new AiContextBinder(await chat.queue.load());
+    const registry = new Blueprint.Registry(blueprintsDefinitions);
+    const blueprintObjects = blueprints
+      .map((key) => {
+        const blueprint = registry.getByKey(key);
+        if (blueprint) {
+          return space.db.add(Obj.clone(blueprint));
+        }
+      })
+      .filter(isNonNullable);
+    await binder.bind({ blueprints: blueprintObjects.map((blueprint) => Ref.make(blueprint)) });
+  }, [space, blueprints, blueprintsDefinitions]);
+
+  const handleEvent = useCallback<NonNullable<ComponentProps['onEvent']>>((event) => {
+    log.info('event', { event });
+    switch (event) {
+      case 'reset': {
+        void client?.reset().then(() => {
+          document.location.reload();
+        });
+        break;
+      }
+    }
+  }, []);
+
+  if (!space) {
+    return null;
+  }
 
-const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
   return (
     <div
-      className={mx('grid grid-cols gap-2 m-2')}
+      className='grid grid-cols gap-2 m-2'
       style={{ gridTemplateColumns: `repeat(${components.length}, minmax(0, 40rem))` }}
     >
       {components.map((Component, index) =>
@@ -71,14 +121,14 @@ const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
             style={{ gridTemplateRows: `repeat(${Component.length}, 1fr)` }}
           >
             {Component.map((Component, index) => (
-              <div key={index} className='flex flex-col overflow-hidden bg-baseSurface border border-separator'>
-                <Component />
+              <div key={index} className={panelClassNames}>
+                <Component space={space} debug={debug} onEvent={handleEvent} />
               </div>
             ))}
           </div>
         ) : (
-          <div key={index} className='flex flex-col overflow-hidden bg-baseSurface border border-separator'>
-            <Component />
+          <div key={index} className={panelClassNames}>
+            <Component space={space} debug={debug} onEvent={handleEvent} />
           </div>
         ),
       )}
@@ -86,293 +136,334 @@ const DefaultStory = ({ components }: { components: (FC | FC[])[] }) => {
   );
 };
 
-//
-// Components
-//
-
-const ChatContainer = () => {
-  const { t } = useTranslation(AssistantMeta.id);
-  const space = useSpace();
+const storybook: Meta<typeof DefaultStory> = {
+  title: 'plugins/plugin-assistant/Chat',
+  render: render(DefaultStory),
+  parameters: {
+    translations,
+    controls: { disable: true },
+  },
+};
 
-  const [chat, setChat] = useState<Assistant.Chat>();
-  useEffect(() => {
-    const results = space?.db.query(Filter.type(Assistant.Chat)).runSync();
-    if (results?.length) {
-      setChat(results[0].object);
-    }
-  }, [space]);
-
-  // TODO(burdon): Memo preset for provider.
-  const [online, setOnline] = useState(true);
-  const [preset, setPreset] = useState<AiServicePreset>();
-  const presets = useMemo(
-    () => AiServicePresets.filter((preset) => online === (preset.provider === 'dxos-remote')),
-    [online],
-  );
-  useEffect(() => {
-    setPreset(presets[0]);
-  }, [presets]);
-
-  const services = useChatServices({ space });
-  const blueprintRegistry = useMemo(() => new Blueprint.Registry([DESIGN_BLUEPRINT, TASK_BLUEPRINT]), []);
-  const processor = useChatProcessor({
-    preset,
-    chat,
-    space,
-    services,
-    blueprintRegistry,
-    noPluginArtifacts: true,
-  });
-
-  const handleChangePreset = useCallback<NonNullable<ChatPromptProps['onChangePreset']>>(
-    (id) => {
-      const preset = presets.find((preset) => preset.id === id);
-      if (preset) {
-        setPreset(preset);
-      }
-    },
-    [presets],
-  );
+export default storybook;
 
-  const handleNewChat = useCallback(() => {
-    invariant(space);
-    const chat = space.db.add(
-      Obj.make(Assistant.Chat, {
-        queue: Ref.fromDXN(space.queues.create().dxn),
-      }),
-    );
-    setChat(chat);
-  }, [space]);
+type Story = StoryObj<typeof storybook>;
 
-  const handleBranchChat = useCallback(() => {}, [space]);
+//
+// Stories
+//
 
-  if (!chat || !processor) {
-    return null;
+const MARKDOWN_DOCUMENT = trim`
+  # Hello, world!
+
+  This is a test document that contains Markdown content. Markdown is a lightweight markup language for writing formatted text in plain text form. Its goal is to be easy to read and write in raw form, easy to convert to HTML.
+
+  Markdown’s simplicity makes it highly adaptable: it can be written in any text editor, stored in plain .md files, and rendered into HTML, PDF, or other formats with converters. Because of this portability, it’s widely used in software documentation, static site generators, technical blogging, and collaborative platforms like GitHub and Notion. 
+
+  Many applications extend the core syntax with extras (e.g., tables, task lists, math notation), but the core idea remains the same—clean, minimal markup that stays readable even without rendering.
+`;
+
+const STYLE_GUIDE = trim`
+  # Style Guide
+  - Use short, simple sentences.
+  - Organize content with headings and bullet points.
+  - Avoid jargon and explain technical terms.
+  - Use active voice whenever possible.
+  - Highlight key points in bold.
+  - Keep paragraphs brief and focused on one idea.
+  - Proofread for clarity and correctness.
+`;
+
+const addSpellingMistakes = (text: string, n: number): string => {
+  const words = text.split(' ');
+  for (let i = 0; i < n; i++) {
+    const idx = Math.floor(Math.random() * words.length);
+    const word = words[idx];
+    const charIdx = Math.floor(Math.random() * word.length);
+    const typoChar = String.fromCharCode(word.charCodeAt(charIdx) + 1);
+    words[idx] = word.slice(0, charIdx) + typoChar + word.slice(charIdx + 1);
   }
 
-  return (
-    <Chat.Root chat={chat} processor={processor} onEvent={(event) => log.info('event', { event })}>
-      <Toolbar.Root classNames='border-b border-subduedSeparator'>
-        <Toolbar.IconButton icon='ph--plus--regular' iconOnly label={t('button new thread')} onClick={handleNewChat} />
-        <Toolbar.IconButton
-          disabled
-          icon='ph--git-branch--regular'
-          iconOnly
-          label={t('button branch thread')}
-          onClick={handleBranchChat}
-        />
-      </Toolbar.Root>
-      <Chat.Thread />
-      <div className='p-4'>
-        <Chat.Prompt
-          classNames='p-2 border border-subduedSeparator rounded focus-within:outline focus-within:border-transparent outline-primary-500'
-          expandable
-          online={online}
-          presets={presets.map(({ id, model, label }) => ({ id, label: label ?? model }))}
-          preset={preset?.id}
-          onChangeOnline={setOnline}
-          onChangePreset={handleChangePreset}
-        />
-      </div>
-    </Chat.Root>
-  );
+  return words.join(' ');
 };
 
-const DocumentContainer = () => {
-  const { themeMode } = useThemeContext();
-  const space = useSpace();
-  const [document] = useQuery(space, Filter.type(DocumentType));
-  if (!document?.content.target) {
-    return null;
-  }
-
-  return (
-    <>
-      <Toolbar.Root classNames='border-b border-subduedSeparator'>
-        <h2>{Obj.getLabel(document)}</h2>
-      </Toolbar.Root>
-      <Editor
-        id={document.id}
-        text={document.content.target}
-        classNames='h-full p-2 overflow-hidden'
-        extensions={[
-          // TODO(burdon): Create util.
-          createDataExtensions({ id: document.id, text: createDocAccessor(document.content.target, ['content']) }),
-          createBasicExtensions({ readOnly: false }),
-          createMarkdownExtensions({ themeMode }),
-          createThemeExtensions({ themeMode }),
-          outliner(),
-        ]}
-      />
-    </>
-  );
+export const Default: Story = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin()],
+    config: config.remote,
+  }),
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+  },
 };
 
-// TODO(burdon): Show all active blueprints from context?
-const BlueprintContainer = () => {
-  const space = useSpace();
-  const [blueprint] = useQuery(space, Filter.type(Blueprint.Blueprint));
-  if (!blueprint?.instructions.target) {
-    return null;
-  }
-
-  return (
-    <div className='flex flex-col h-full'>
-      <Toolbar.Root classNames='border-b border-subduedSeparator'>
-        <h2>{Obj.getLabel(blueprint)}</h2>
-      </Toolbar.Root>
-      <TemplateEditor template={blueprint.instructions.target} />
-    </div>
-  );
+// Test with prompt: Propose changes to my document based on the style guide.
+export const WithDocument: Story = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin(), ThreadPlugin()],
+    config: config.remote, // TODO(burdon): Issue making persistent.
+    onInit: async ({ space, binder }) => {
+      const doc = space.db.add(
+        Markdown.makeDocument({
+          name: 'My Document',
+          content: addSpellingMistakes(MARKDOWN_DOCUMENT, 2),
+        }),
+      );
+      const styleGuide = space.db.add(
+        Markdown.makeDocument({
+          name: 'Style Guide',
+          content: STYLE_GUIDE,
+        }),
+      );
+      await binder.bind({ objects: [Ref.make(doc), Ref.make(styleGuide)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [SurfaceContainer, CommentsContainer, LoggingContainer]],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/markdown'],
+  },
 };
 
-//
-// Configuration
-//
-
-const meta = {
-  title: 'plugins/plugin-assistant/Chat',
-  render: render(DefaultStory),
-  decorators: [],
-  parameters: {
-    translations,
-    controls: { disable: true },
+export const WithBlueprints: Story = {
+  decorators: getDecorators({
+    plugins: [InboxPlugin(), MarkdownPlugin(), TablePlugin()],
+    config: config.remote,
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(Markdown.makeDocument({ name: 'Tasks' }));
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [TasksContainer, BlueprintContainer]],
   },
-} satisfies Meta<typeof DefaultStory>;
+};
 
-export default meta;
+export const WithChess: Story = {
+  decorators: getDecorators({
+    plugins: [ChessPlugin()],
+    config: config.remote,
+    types: [Chess.Game],
+    onInit: async ({ space, binder }) => {
+      // TODO(burdon): Add player DID (for user and assistant).
+      const object = space.db.add(
+        Chess.makeGame({
+          name: 'Challenge',
+          pgn: [
+            '1. e4 e5',
+            '2. Nf3 Nc6',
+            '3. Bc4 Bc5',
+            '4. c3 Nf6',
+            '5. d4 exd4',
+            '6. cxd4 Bb4+',
+            '7. Nc3 d5',
+            '8. exd5 Nxd5',
+            '9. O-O Be6',
+            '10. Qb3 Na5',
+            '11. Qa4+ c6',
+            '12. Bxd5 Bxc3',
+            '13. Bxe6 fxe6',
+            '*',
+          ].join(' '),
+        }),
+      );
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [SurfaceContainer, LoggingContainer]],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/chess'],
+  },
+};
 
-type Story = StoryObj<typeof meta>;
+// Test with prompt: Summarize my mailbox and write the summary in a new document.
+export const WithMail: Story = {
+  decorators: getDecorators({
+    plugins: [InboxPlugin(), MarkdownPlugin(), ThreadPlugin()],
+    config: config.remote,
+    types: [Mailbox.Mailbox],
+    onInit: async ({ space, binder }) => {
+      const queue = space.queues.create();
+      const messages = createTestMailbox();
+      await queue.append(messages);
+      const mailbox = space.db.add(Mailbox.make({ name: 'Mailbox', queue: queue.dxn }));
+      await binder.bind({ objects: [Ref.make(mailbox)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [SurfaceContainer, MessageContainer]],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/inbox'],
+  },
+};
 
-//
-// Decorators
-//
+export const WithGmail: Story = {
+  decorators: getDecorators({
+    plugins: [InboxPlugin(), TokenManagerPlugin()],
+    config: config.remote,
+    types: [Mailbox.Mailbox],
+    onInit: async ({ space, binder }) => {
+      const queue = space.queues.create();
+      const mailbox = space.db.add(Mailbox.make({ name: 'Mailbox', queue: queue.dxn }));
+      await binder.bind({ objects: [Ref.make(mailbox)] });
+    },
+  }),
+  args: {
+    components: [ChatContainer, [SurfaceContainer, MessageContainer, TokenManagerContainer]],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/inbox'],
+  },
+};
 
-const remoteConfig = new Config({
-  runtime: {
-    services: {
-      ai: {
-        // TODO(burdon): 'url'?
-        server: remoteServiceEndpoints.ai,
-      },
-      edge: {
-        url: remoteServiceEndpoints.edge,
-      },
+// Test with prompt: Create 10 locations.
+export const WithMap: Story = {
+  decorators: getDecorators({
+    plugins: [MapPlugin(), TablePlugin()],
+    config: config.remote,
+    types: [DataType.View, Map.Map, Table.Table],
+    onInit: async ({ space, binder }) => {
+      const [schema] = await space.db.schemaRegistry.register([createLocationSchema()]);
+      const { view: tableView } = await Table.makeView({ name: 'Table', space, typename: schema.typename });
+      const { view: mapView } = await Map.makeView({
+        name: 'Map',
+        space,
+        typename: schema.typename,
+        pivotFieldName: 'location',
+      });
+      space.db.add(tableView);
+      space.db.add(mapView);
+      await binder.bind({ objects: [Ref.make(tableView), Ref.make(mapView)] });
     },
+  }),
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/map'],
   },
-});
+};
 
-const getDecorators = ({
-  config,
-  plugins = [],
-  blueprints = [],
-  context = false,
-}: {
-  config: Config;
-  plugins?: Plugin[];
-  blueprints?: Blueprint.Blueprint[];
-  context?: boolean;
-}) => [
-  withPluginManager({
-    fireEvents: [Events.SetupArtifactDefinition],
-    plugins: [
-      ClientPlugin({
-        config,
-        types: [Assistant.Chat, DocumentType, Blueprint.Blueprint],
-        onClientInitialized: async (_, client) => {
-          await client.halo.createIdentity();
-          await client.spaces.waitUntilReady();
-          const space = client.spaces.default;
-          // ISSUE(burdon): Should not require this.
-          //  ERROR: invariant violation: Database was not initialized with root object.
-          await space.waitUntilReady();
-
-          // TODO(burdon): Remove need for this boilerplate. Namespace for types?
-          const chat = space.db.add(
-            Obj.make(Assistant.Chat, {
-              queue: Ref.fromDXN(space.queues.create().dxn),
-            }),
-          );
-          const binder = new ContextBinder(await chat.queue.load());
-
-          const doc = space.db.add(
-            Obj.make(DocumentType, {
-              name: 'Tasks',
-              content: Ref.make(Obj.make(DataType.Text, { content: '' })),
-            }),
-          );
-          if (context) {
-            await binder.bind({ objects: [Ref.make(doc)] });
-          }
-
-          for (const blueprint of blueprints) {
-            // Clone blueprints and bind to conversation.
-            // TODO(dmaretskyi): This should be done by Obj.clone.
-            const { id: _id, ...data } = blueprint;
-            const obj = space.db.add(Obj.make(Blueprint.Blueprint, data));
-            await binder.bind({ blueprints: [Ref.make(obj)] });
-          }
-        },
-      }),
-      IntentPlugin(),
-      SettingsPlugin(),
-      SpacePlugin(),
-
-      TranscriptionPlugin(),
-      AssistantPlugin(),
-
-      ...plugins,
-    ],
-    capabilities: [contributes(Capabilities.Functions, [readDocument, writeDocument])],
+export const WithTrip: Story = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin(), MapPlugin()],
+    config: config.remote,
+    types: [Map.Map],
+    onInit: async ({ space, binder }) => {
+      // TODO(burdon): Table.
+      {
+        const object = space.db.add(Map.make({ name: 'Trip' }));
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+      {
+        const object = space.db.add(
+          Markdown.makeDocument({
+            name: 'Itinerary',
+            content: trim`
+              # Itinerary
+
+              ## Day 1
+              - Visit the Sagrada Familia
+              - Visit the Park Güell
+              - Visit the Casa Batlló
+
+              ## Day 2
+              - Visit the Eiffel Tower
+              - Visit the Louvre
+              - Visit the Musée d'Orsay
+            `,
+          }),
+        );
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+      {
+        const object = space.db.add(
+          Markdown.makeDocument({
+            name: 'Barcelona',
+            content: trim`
+              # Barcelona
+
+              Barcelona is the capital and most populous city of Catalonia, an autonomous community in northeastern Spain. 
+              It is located on the Mediterranean coast, on the banks of the Llobregat River, in the comarca of the Baix Llobregat. 
+              The city is known for its rich history, vibrant culture, and stunning architecture, including the Sagrada Familia, Park Güell, and Casa Batlló.
+            `,
+          }),
+        );
+        await binder.bind({ objects: [Ref.make(object)] });
+      }
+    },
   }),
-  withTheme,
-  withLayout({
-    fullscreen: true,
-    classNames: 'bg-deckSurface justify-center',
+  args: {
+    components: [ChatContainer, SurfaceContainer],
+  },
+};
+
+export const WithBoard: Story = {
+  decorators: getDecorators({
+    plugins: [BoardPlugin()],
+    config: config.remote,
+    types: [Board.Board],
+    onInit: async ({ space, binder }) => {
+      const object = space.db.add(Board.makeBoard());
+      await binder.bind({ objects: [Ref.make(object)] });
+    },
   }),
-];
+  args: {
+    debug: true,
+    components: [ChatContainer, SurfaceContainer],
+  },
+};
 
-//
-// Stories
-//
+export const WithResearch: Story = {
+  decorators: getDecorators({
+    plugins: [MarkdownPlugin(), TablePlugin()],
+    config: config.persistent,
+    types: [...ResearchDataTypes, ResearchGraph],
+    accessTokens: [Obj.make(DataType.AccessToken, { source: 'exa.ai', token: EXA_API_KEY })],
+  }),
+  args: {
+    components: [ChatContainer, [GraphContainer, LoggingContainer]],
+    blueprints: [RESEARCH_BLUEPRINT.key],
+  },
+};
 
-export const Default = {
+export const WithSearch: Story = {
   decorators: getDecorators({
-    config: remoteConfig,
+    config: config.remote,
+    types: testTypes,
+    onInit: async ({ space }) => {
+      await addTestData(space);
+    },
   }),
   args: {
-    components: [ChatContainer],
+    components: [ChatContainer, [GraphContainer, LoggingContainer]],
   },
-} satisfies Story;
+};
 
-export const WithDocument = {
+export const WithTranscription: Story = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [MarkdownPlugin()],
+    plugins: [TranscriptionPlugin()],
+    config: config.remote,
+    types: [Transcript.Transcript],
+    onInit: async ({ space, binder }) => {
+      const queue = space.queues.create();
+      const messages = createTestTranscription();
+      await queue.append(messages);
+      const transcript = space.db.add(Transcript.makeTranscript(queue.dxn));
+      await binder.bind({ objects: [Ref.make(transcript)] });
+    },
   }),
   args: {
-    components: [ChatContainer, DocumentContainer],
+    components: [ChatContainer, [SurfaceContainer, LoggingContainer]],
+    blueprints: [BLUEPRINT_KEY, 'dxos.org/blueprint/transcription'],
   },
-} satisfies Story;
+};
 
-export const WithBlueprints = {
+export const WithLinearSync: Story = {
   decorators: getDecorators({
-    config: remoteConfig,
-    plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-    blueprints: [TASK_BLUEPRINT],
-    context: true,
+    plugins: [],
+    config: config.remote,
+    types: [DataType.Task, DataType.Person, DataType.Project],
+    accessTokens: accessTokensFromEnv({
+      'linear.app': import.meta.env.VITE_LINEAR_API_KEY,
+    }),
   }),
   args: {
-    components: [ChatContainer, [DocumentContainer, BlueprintContainer]],
+    components: [ChatContainer, [GraphContainer]],
+    blueprints: [LINEAR_BLUEPRINT.key],
   },
-} satisfies Story;
-
-// export const WithArtifacts = {
-//   decorators: getDecorators({
-//     config: remoteConfig,
-//     plugins: [ChessPlugin(), InboxPlugin(), MapPlugin(), MarkdownPlugin(), TablePlugin()],
-//   }),
-//   args: {
-//     components: [ChatContainer],
-//   },
-// } satisfies Story;
+};