@dxos/plugin-assistant 0.10.0 → 0.11.1

package/src/containers/AssistantSettings/OllamaModels.tsx

@@ -103,7 +103,7 @@ export const OllamaModelsSection = ({ manager }: { manager: Ollama.Manager }) =>
           // Plain `List`/`ListItem` (non-select), with the trigger editor's "fatter" two-line row
           // treatment: a name line plus a secondary meta line, on a surface-styled row. Rows are
           // actioned via their trailing buttons (no selection semantics).
-          <List variant='unordered' className='flex flex-col gap-1 grow is-full text-left'>
+          <List variant='unordered' className='flex flex-col gap-1 grow w-full text-left'>
             {state.models.map((model) => {
               const running = loaded.get(model.name);
               const error = state.errors[model.name];
@@ -116,7 +116,7 @@ export const OllamaModelsSection = ({ manager }: { manager: Ollama.Manager }) =>
               return (
                 <ListItem
                   key={model.name}
-                  className='flex flex-col gap-0.5 rounded-sm bg-input-surface px-2 py-1.5 is-full'
+                  className='flex flex-col gap-0.5 rounded-sm dx-input-surface px-2 py-1.5 w-full'
                 >
                   <div className='flex items-center gap-2'>
                     <span className='grow truncate font-medium'>{model.name}</span>
@@ -157,7 +157,7 @@ export const OllamaModelsSection = ({ manager }: { manager: Ollama.Manager }) =>
                 ? t('settings.ollama.pulling.message', { percent: percentOf(progress) })
                 : (progress?.status ?? t('settings.ollama.pulling.label'));
               return (
-                <ListItem key={name} className='flex flex-col gap-0.5 rounded-sm bg-input-surface px-2 py-1.5 is-full'>
+                <ListItem key={name} className='flex flex-col gap-0.5 rounded-sm dx-input-surface px-2 py-1.5 w-full'>
                   <div className='flex items-center gap-2'>
                     <span className='grow truncate font-medium text-description'>{name}</span>
                     <IconButton
@@ -193,7 +193,7 @@ export const OllamaModelsSection = ({ manager }: { manager: Ollama.Manager }) =>
           onValueChange={() => {}}
           placeholder={t('settings.ollama.pull.placeholder')}
         >
-          <Combobox.Trigger classNames='is-full' />
+          <Combobox.Trigger classNames='w-full' />
           <Combobox.Portal>
             <Combobox.Content>
               <Combobox.Input
@@ -253,3 +253,5 @@ const formatBytes = (bytes: number): string => {
   }
   return `${value.toFixed(unit === 0 ? 0 : 1)} ${UNITS[unit]}`;
 };
+
+OllamaModels.displayName = 'OllamaModels';

package/src/containers/ChatArticle/ChatArticle.stories.tsx

@@ -2,29 +2,85 @@
 // Copyright 2026 DXOS.org
 //
 
+import * as LanguageModel from '@effect/ai/LanguageModel';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
 import React from 'react';
+import { expect, userEvent, waitFor } from 'storybook/test';
 
-import { SERVICES_CONFIG } from '@dxos/ai/testing';
+import { type AiService } from '@dxos/ai';
+import { ScriptedLanguageModel, SERVICES_CONFIG } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AppActivationEvents } from '@dxos/app-toolkit';
 import { Chat } from '@dxos/assistant-toolkit';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { Feed, Filter, Ref } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
 import { PreviewPlugin } from '@dxos/plugin-preview/testing';
 import { RoutinePlugin } from '@dxos/plugin-routine/testing';
 import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { Config } from '@dxos/react-client';
-import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { useSpaces } from '@dxos/react-client/echo';
 import { Loading, withTheme } from '@dxos/react-ui/testing';
+import { Message } from '@dxos/types';
 
 import { translations } from '#translations';
 
 import { AssistantPlugin } from '../../AssistantPlugin';
 import { ChatArticle } from './ChatArticle';
 
+/**
+ * Replaces the AI service the plugin would build with a scripted model, so a story can drive the real
+ * request loop offline and deterministically.
+ *
+ * The model is built **once** and shared across requests. Constructing it per request — the obvious
+ * shape, since `model()` returns a layer — gives each request its own cursor, so every turn replays the
+ * first reply and a multi-turn story silently answers itself wrongly.
+ *
+ * Inert until something submits: the model is only consulted on a request, so stories that never submit
+ * are unaffected. The script is exhausted rather than looped, so submitting more often than there are
+ * replies fails loudly instead of hanging.
+ */
+const scriptedAiServiceMiddleware = (replies: readonly string[]) => {
+  const model = Effect.runSync(
+    ScriptedLanguageModel.makeScriptedLanguageModel(
+      replies.map((reply) => ({ parts: [ScriptedLanguageModel.text(reply)] })),
+    ),
+  );
+  const layer = Layer.succeed(LanguageModel.LanguageModel, model);
+  return (_upstream: AiService.Service) => ({ model: () => layer });
+};
+
+/**
+ * Types into the chat prompt and submits.
+ *
+ * The thread renders its own CodeMirror instance (read-only, but still `contenteditable`), so an
+ * unscoped `.cm-content` lookup is ambiguous; `ChatPrompt` wraps the real editor in a `role="group"`.
+ */
+const submitPrompt = async (canvasElement: HTMLElement, text: string) => {
+  const content = await waitFor(
+    () => {
+      const element = canvasElement.querySelector<HTMLElement>('[role="group"] .cm-content');
+      if (!element) {
+        throw new Error('Prompt editor not found.');
+      }
+      return element;
+    },
+    { timeout: 15_000, interval: 300 },
+  );
+
+  await userEvent.click(content);
+  await userEvent.type(content, text);
+  await userEvent.keyboard('{Enter}');
+};
+
+type StoryProps = {
+  /** Turns the story drives: each prompt is submitted, and its reply is what the scripted model returns. */
+  messages?: { prompt: string; reply: string }[];
+};
+
 const DefaultStory = () => {
   const [space] = useSpaces();
   const [chat] = useQuery(space?.db, Filter.type(Chat.Chat));
@@ -40,39 +96,156 @@ const meta = {
   render: DefaultStory,
   decorators: [
     withTheme(),
-    withPluginManager({
-      setupEvents: [AppActivationEvents.SetupSettings],
-      plugins: [
-        ...corePlugins(),
-        ClientPlugin({
-          types: [Chat.Chat, Feed.Feed],
-          config: new Config({ runtime: { services: SERVICES_CONFIG.REMOTE } }),
-          onClientInitialized: ({ client }) =>
-            Effect.gen(function* () {
-              yield* initializeIdentity(client);
-              const [space] = client.spaces.get();
-              yield* Effect.promise(() => space.waitUntilReady());
-              const feed = space.db.add(Feed.make());
-              space.db.add(Chat.make({ name: 'Test', feed: Ref.make(feed) }));
-              yield* Effect.promise(() => space.db.flush({ indexes: true }));
-            }),
-        }),
-        RoutinePlugin(),
-        AssistantPlugin(),
-        PreviewPlugin(),
-        StorybookPlugin({}),
-      ],
-      capabilities,
+    withPluginManager<StoryProps>(({ args: { messages = [] } }) => {
+      return {
+        setupEvents: [AppActivationEvents.SetupSettings],
+        plugins: [
+          ...corePlugins(),
+          ClientPlugin({
+            types: [Chat.Chat, Feed.Feed, Message.Message],
+            config: new Config({ runtime: { services: SERVICES_CONFIG.REMOTE } }),
+            onClientInitialized: ({ client }) =>
+              Effect.gen(function* () {
+                yield* initializeIdentity(client);
+                const [space] = client.spaces.get();
+                yield* Effect.promise(() => space.waitUntilReady());
+                const feed = space.db.add(Feed.make());
+                space.db.add(Chat.make({ name: 'Test', feed: Ref.make(feed) }));
+
+                yield* Effect.promise(() => space.db.flush({ indexes: true }));
+              }),
+          }),
+          RoutinePlugin(),
+          AssistantPlugin({
+            // Only the stories that declare their turns are scripted; the rest keep the real service, so
+            // `Default` stays a place to actually talk to a model rather than one with an empty script.
+            aiServiceMiddleware:
+              messages.length > 0 ? scriptedAiServiceMiddleware(messages.map(({ reply }) => reply)) : undefined,
+          }),
+          PreviewPlugin(),
+          StorybookPlugin({}),
+        ],
+        capabilities,
+      };
     }),
   ],
   parameters: {
     layout: 'fullscreen',
     translations,
   },
-} satisfies Meta<typeof DefaultStory>;
+} satisfies Meta<StoryProps>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<StoryProps>;
 
 export const Default: Story = {};
+
+/**
+ * Drives the real request loop against the scripted model — no network and no seeded feed. This is the
+ * precondition for exercising rewind against turns the app itself produced.
+ */
+export const Scripted: Story = {
+  args: {
+    messages: [
+      {
+        prompt: 'What is a feed?',
+        reply: 'A feed is an append-only log.',
+      },
+    ],
+  },
+  play: async ({ canvasElement, args: { messages = [] } }) => {
+    const { prompt, reply } = messages[0];
+    await submitPrompt(canvasElement, prompt);
+    await waitFor(() => void expect(canvasElement.textContent ?? '').toContain(reply), {
+      timeout: 20_000,
+      interval: 300,
+    });
+  },
+};
+
+/**
+ * Soft fork ("rewind") driven entirely through the UI, over a realistic conversation: a greeting, then a
+ * question, then a rewind of that question, then the same question asked differently.
+ *
+ * Rewinding is edit-and-resend: the prompt and its answer both leave the thread and the prompt text comes
+ * back in the composer. The greeting survives, because it precedes the rewind point. The resend then
+ * continues from the greeting, so the abandoned pair never rejoins the conversation.
+ */
+export const Rewind: Story = {
+  args: {
+    messages: [
+      { prompt: 'Hello', reply: 'Hi — how can I help?' },
+      { prompt: 'What is a feed?', reply: 'A feed is an append-only log.' },
+      { prompt: 'What is a feed, in one sentence?', reply: 'An append-only log of immutable blocks.' },
+    ],
+  },
+  play: async ({ canvasElement, args: { messages = [] } }) => {
+    const [greeting, asked, revised] = messages;
+    const toolbars = () => canvasElement.querySelectorAll<HTMLElement>('[data-testid="chat.rewind"]');
+
+    // Greeting, then the question.
+    await submitPrompt(canvasElement, greeting.prompt);
+    await waitFor(() => void expect(threadText(canvasElement)).toContain(greeting.reply), {
+      timeout: 8_000,
+      interval: 200,
+    });
+    await submitPrompt(canvasElement, asked.prompt);
+    await waitFor(() => void expect(threadText(canvasElement)).toContain(asked.reply), {
+      timeout: 8_000,
+      interval: 200,
+    });
+
+    // Let the reply finish streaming, so the rewind forks a settled turn.
+    await new Promise((resolve) => setTimeout(resolve, 1_000));
+    await waitFor(() => void expect(toolbars()).toHaveLength(2), { timeout: 5_000, interval: 200 });
+
+    // Rewind the question — the second prompt's toolbar.
+    toolbars()[1].click();
+
+    // The question and its answer leave the thread, and the greeting is untouched.
+    await waitFor(() => void expect(threadText(canvasElement)).not.toContain(asked.reply), {
+      timeout: 5_000,
+      interval: 200,
+    });
+    await expect(threadText(canvasElement)).not.toContain(asked.prompt);
+    await expect(threadText(canvasElement)).toContain(greeting.prompt);
+    await expect(threadText(canvasElement)).toContain(greeting.reply);
+
+    // Edit-and-resend: the question comes back in the composer, ready to be revised.
+    await expect(composerText(canvasElement)).toContain(asked.prompt);
+
+    // Ask it differently. The answer continues from the greeting, so the abandoned pair stays gone.
+    await clearPrompt(canvasElement);
+    await submitPrompt(canvasElement, revised.prompt);
+    await waitFor(() => void expect(threadText(canvasElement)).toContain(revised.reply), {
+      timeout: 8_000,
+      interval: 200,
+    });
+    await expect(threadText(canvasElement)).toContain(revised.prompt);
+    await expect(threadText(canvasElement)).not.toContain(asked.reply);
+  },
+};
+
+/**
+ * The rendered conversation, excluding the composer — both are CodeMirror instances, and the composer
+ * holds the restored prompt after a rewind, so an unscoped read cannot tell "still in the thread" from
+ * "waiting to be resent".
+ */
+const threadText = (canvasElement: HTMLElement) =>
+  Array.from(canvasElement.querySelectorAll<HTMLElement>('.cm-content'))
+    .filter((element) => !element.closest('[role="group"]'))
+    .map((element) => element.textContent ?? '')
+    .join('\n');
+
+const composerText = (canvasElement: HTMLElement) =>
+  canvasElement.querySelector<HTMLElement>('[role="group"] .cm-content')?.textContent ?? '';
+
+/** Empties the composer, so a restored prompt can be replaced rather than appended to. */
+const clearPrompt = async (canvasElement: HTMLElement) => {
+  const content = canvasElement.querySelector<HTMLElement>('[role="group"] .cm-content');
+  if (content) {
+    await userEvent.click(content);
+    await userEvent.keyboard('{Control>}a{/Control}{Backspace}');
+  }
+};

package/src/containers/ChatArticle/ChatArticle.tsx

@@ -10,12 +10,13 @@ import { useAtomCapability, useCapability, useOperationInvoker } from '@dxos/app
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { getSpace } from '@dxos/client/echo';
 import { type Obj } from '@dxos/echo';
+import { useObject } from '@dxos/echo-react';
 import { ClientOperation } from '@dxos/plugin-client';
-import { useObject, useRegistry } from '@dxos/react-client/echo';
+import { useRegistry } from '@dxos/react-client/echo';
 import { Panel } from '@dxos/react-ui';
 
 import { Chat as ChatComponent, type ChatRootProps } from '#components';
-import { useChatProcessor, useChatServices, usePresets } from '#hooks';
+import { useChatProcessor, useChatServices, usePresets, useSelectionContext } from '#hooks';
 import { type Assistant, AssistantCapabilities, type ChatType } from '#types';
 
 export type ChatArticleProps = AppSurface.ObjectSectionProps<ChatType.Chat> & {
@@ -36,6 +37,7 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
     // The provider is configured in settings; the chat surfaces it as a read-only online indicator.
     const online = preset?.provider === Provider.edge.id;
     const processor = useChatProcessor({ space, chat, preset, runtime, registry, settings });
+    const getContext = useSelectionContext(companionTo);
 
     // Subscribe to the view type via `useObject` so the thread re-renders when ChatOptions changes it;
     // a direct `chat.viewType` read in render does not establish a reactive dependency.
@@ -77,14 +79,24 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
     }
 
     return (
-      <ChatComponent.Root chat={chat} db={space?.db} processor={processor} onEvent={onEvent} onSubmit={onSubmit}>
+      <ChatComponent.Root
+        chat={chat}
+        db={space?.db}
+        processor={processor}
+        getContext={getContext}
+        onEvent={onEvent}
+        onSubmit={onSubmit}
+      >
         <Panel.Root role={role} ref={forwardedRef}>
           <Panel.Toolbar>
             <ChatComponent.Toolbar classNames='dx-document' attendableId={attendableId} companionTo={companionTo} />
           </Panel.Toolbar>
-          <Panel.Content>
+          <Panel.Content asChild>
             <ChatComponent.Content>
               <div className='dx-container relative'>
+                {viewType !== 'summary' && (
+                  <ChatComponent.Minimap classNames='absolute left-0 top-1/2 -translate-y-1/2 z-10' />
+                )}
                 <ChatComponent.Thread viewType={viewType} onViewUsage={handleViewUsage} />
                 {viewType !== 'summary' && (
                   <div className='absolute bottom-2 left-0 right-0'>
@@ -98,7 +110,13 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
                 <div className='flex flex-col items-center py-2 overflow-hidden'>
                   <ChatComponent.TaskList classNames='max-h-[120px] border border-separator rounded-sm text-description' />
                 </div>
-                <ChatComponent.Prompt {...chatProps} outline preset={preset?.id} online={online} />
+                <ChatComponent.Prompt
+                  {...chatProps}
+                  outline
+                  preset={preset?.id}
+                  online={online}
+                  companionTo={companionTo}
+                />
               </div>
             </ChatComponent.Content>
           </Panel.Content>
@@ -107,3 +125,5 @@ export const ChatArticle = forwardRef<HTMLDivElement, ChatArticleProps>(
     );
   },
 );
+
+ChatArticle.displayName = 'ChatArticle';

package/src/containers/ChatCompanion/ChatCompanion.tsx

@@ -3,17 +3,18 @@
 //
 
 import * as Option from 'effect/Option';
-import React, { forwardRef, useCallback, useMemo } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo } from 'react';
 
 import { useOperationInvoker } from '@dxos/app-framework/ui';
 import { AppAnnotation } from '@dxos/app-toolkit';
 import { type AppSurface } from '@dxos/app-toolkit/ui';
 import { Chat } from '@dxos/assistant-toolkit';
 import { getSpace } from '@dxos/client/echo';
-import { Skill } from '@dxos/compute';
+import { Project, Skill } from '@dxos/compute';
 import { Entity, Filter, Obj, Ref, Type } from '@dxos/echo';
+import { useObject, useQuery } from '@dxos/echo-react';
 import { SpaceOperation } from '@dxos/plugin-space';
-import { useObject, useQuery, useRegistry } from '@dxos/react-client/echo';
+import { useRegistry } from '@dxos/react-client/echo';
 import { useAsyncEffect } from '@dxos/react-ui';
 
 import { useContextBinder } from '#hooks';
@@ -26,22 +27,22 @@ export type ChatCompanionProps = AppSurface.ArticleProps<Chat.Chat, {}, Obj.Unkn
 export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
   ({ role = 'article', subject: chat, companionTo, attendableId }, forwardedRef) => {
     const { invokePromise } = useOperationInvoker();
-    const space = getSpace(companionTo);
+    const db = Obj.getDatabase(companionTo);
     useSkills({ subject: chat, companionTo });
 
     // Persist (and flush) a transient chat before the first request so the agent can resolve
     // the now-durable conversation feed; subsequent submits are a no-op once persisted.
     const handleSubmit = useCallback(async () => {
-      if (!space || !chat || Obj.getDatabase(chat)) {
+      if (!db || !chat || Obj.getDatabase(chat)) {
         return;
       }
 
       await invokePromise(SpaceOperation.AddObject, {
         object: chat,
-        target: space.db,
+        target: db,
       });
       await invokePromise(SpaceOperation.AddRelation, {
-        db: space.db,
+        db,
         schema: Chat.CompanionTo,
         source: chat,
         target: companionTo,
@@ -50,8 +51,8 @@ export const ChatCompanion = forwardRef<HTMLDivElement, ChatCompanionProps>(
         companionTo,
         chat,
       });
-      await space.db.flush();
-    }, [space, chat, companionTo, invokePromise]);
+      await db.flush();
+    }, [db, chat, companionTo, invokePromise]);
 
     return (
       <ChatArticle
@@ -96,6 +97,26 @@ const useSkills = ({ subject: chat, companionTo }: Pick<ChatCompanionProps, 'sub
     [existingSkills, skillKeys],
   );
 
+  // Subscribe so a project's instructions ref resolving after the project object itself (e.g. loading
+  // over the wire) re-triggers the effects below, mirroring the `feedSnapshot` subscription above.
+  const [instructionsSnapshot] = useObject(
+    Obj.instanceOf(Project.Project, companionTo) ? companionTo.instructions : undefined,
+  );
+
+  // Steer the chat with the project's instructions BY REFERENCE (chat.instructions → system prompt at
+  // request time). Also the lazy backfill: pre-existing project chats without the field pick it up here.
+  useEffect(() => {
+    if (!chat || chat.instructions || !Obj.instanceOf(Project.Project, companionTo)) {
+      return;
+    }
+    const instructionsRef = companionTo.instructions;
+    if (instructionsRef) {
+      Obj.update(chat, (chat) => {
+        chat.instructions = instructionsRef;
+      });
+    }
+  }, [chat, companionTo, instructionsSnapshot]);
+
   useAsyncEffect(async () => {
     if (!binder?.isOpen) {
       return;
@@ -123,5 +144,19 @@ const useSkills = ({ subject: chat, companionTo }: Pick<ChatCompanionProps, 'sub
     } else {
       await binder.bind({ objects: [Ref.make(companionTo)] });
     }
-  }, [binder, skillKeys, pluginSkills, companionTo]);
+
+    // Bind the project's skills and context objects into the session (instructions text travels
+    // via chat.instructions, set above).
+    if (Obj.instanceOf(Project.Project, companionTo)) {
+      const bindings = Project.contextBindings(companionTo);
+      if (bindings.skills.length > 0) {
+        await binder.bind({ skills: bindings.skills });
+      }
+      if (bindings.objects.length > 0) {
+        await binder.bind({ objects: bindings.objects });
+      }
+    }
+  }, [binder, skillKeys, pluginSkills, companionTo, instructionsSnapshot]);
 };
+
+ChatCompanion.displayName = 'ChatCompanion';

package/src/containers/ChatDialog/ChatDialog.tsx

@@ -8,7 +8,8 @@ import { Provider } from '@dxos/ai';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { type Chat as ChatTypes } from '@dxos/assistant-toolkit';
 import { Obj } from '@dxos/echo';
-import { useObject, useRegistry } from '@dxos/react-client/echo';
+import { useObject } from '@dxos/echo-react';
+import { useRegistry } from '@dxos/react-client/echo';
 import { useTranslation } from '@dxos/react-ui';
 import { ChatDialog as NaturalChatDialog } from '@dxos/react-ui-chat';
 
@@ -68,3 +69,5 @@ export const ChatDialog = ({ chat }: ChatDialogProps) => {
     </Chat.Root>
   );
 };
+
+ChatDialog.displayName = 'ChatDialog';

package/src/containers/IntegrationPrompt/IntegrationPrompt.tsx

@@ -4,11 +4,12 @@
 
 import React, { useMemo } from 'react';
 
-import { Surface, useCapabilities } from '@dxos/app-framework/ui';
+import { useCapabilities } from '@dxos/app-framework/ui';
 import { useActiveSpace } from '@dxos/app-toolkit/ui';
-import { Connector, ConnectorAuth, type ConnectorEntry } from '@dxos/plugin-connector';
+import { Connector, type ConnectorEntry } from '@dxos/plugin-connector';
 import { Icon, useTranslation } from '@dxos/react-ui';
 
+import { ConnectorAuthMenu } from '#components';
 import { meta } from '#meta';
 
 export type IntegrationPromptProps = {
@@ -19,7 +20,7 @@ export type IntegrationPromptProps = {
 /**
  * Agent-facing connector prompt: rendered when the assistant needs a service the user has not yet
  * connected. Resolves the matching {@link Connector} entries for `service` and offers to connect via
- * the shared connector-auth surface, so the user can grant access inline instead of the agent failing
+ * the shared connector-auth menu, so the user can grant access inline instead of the agent failing
  * silently.
  */
 export const IntegrationPrompt = ({ service }: IntegrationPromptProps) => {
@@ -27,13 +28,13 @@ export const IntegrationPrompt = ({ service }: IntegrationPromptProps) => {
   const space = useActiveSpace();
   const connectors = useCapabilities(Connector).flat();
   const matched = useMemo(() => (service ? matchConnectors(connectors, service) : []), [connectors, service]);
+  const connectorIds = useMemo(() => matched.map((connector) => connector.id), [matched]);
 
   if (!service) {
     return null;
   }
 
   const label = matched[0]?.label ?? service;
-  const connectorIds = matched.map((connector) => connector.id);
 
   return (
     <div role='group' className='flex flex-col gap-2 my-2 p-3 border border-subdued-separator rounded-sm'>
@@ -48,9 +49,9 @@ export const IntegrationPrompt = ({ service }: IntegrationPromptProps) => {
           </p>
         </div>
       </div>
-      {connectorIds.length > 0 && space && (
+      {connectorIds.length > 0 && (
         <div className='flex justify-end'>
-          <Surface.Surface type={ConnectorAuth} data={{ connectorIds }} limit={1} />
+          <ConnectorAuthMenu connectorIds={connectorIds} db={space?.db} />
         </div>
       )}
     </div>
@@ -77,3 +78,5 @@ const matchConnectors = (connectors: ConnectorEntry[], service: string): Connect
     return candidates.some((value) => value === needle || value === base || value.includes(base));
   });
 };
+
+IntegrationPrompt.displayName = 'IntegrationPrompt';

package/src/containers/SpaceHomePrompt/SpaceHomePrompt.tsx

@@ -105,3 +105,5 @@ export const SpaceHomePrompt = ({ space }: SpaceScopedProps) => {
     />
   );
 };
+
+SpaceHomePrompt.displayName = 'SpaceHomePrompt';