@dxos/plugin-assistant 0.8.2-main.fbd8ed0 → 0.8.2-staging.7ac8446

package/src/capabilities/app-graph-builder.ts

@@ -2,214 +2,186 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
-
 import {
   Capabilities,
   contributes,
   createIntent,
   LayoutAction,
   type PromiseIntentDispatcher,
-  type PluginContext,
+  type PluginsContext,
 } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ClientCapabilities } from '@dxos/plugin-client';
-import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
-import { createExtension, ROOT_ID } from '@dxos/plugin-graph';
-import { rxFromQuery } from '@dxos/plugin-space';
-import { SPACE_TYPE, SpaceAction } from '@dxos/plugin-space/types';
+import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { createExtension, type Node, ROOT_ID } from '@dxos/plugin-graph';
+import { memoizeQuery } from '@dxos/plugin-space';
+import { SpaceAction } from '@dxos/plugin-space/types';
 import {
   type Space,
   Filter,
   fullyQualifiedId,
   getSpace,
-  isLiveObject,
   isSpace,
-  Query,
-  type QueryResult,
+  isReactiveObject,
+  parseId,
 } from '@dxos/react-client/echo';
 
 import { ASSISTANT_DIALOG, ASSISTANT_PLUGIN } from '../meta';
 import { AIChatType, AssistantAction, TemplateType } from '../types';
 
-export default (context: PluginContext) =>
+export default (context: PluginsContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
       id: `${ASSISTANT_PLUGIN}/assistant`,
-      actions: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
-            Option.map(() => [
-              {
-                id: `${LayoutAction.UpdateDialog._tag}/assistant/open`,
-                data: async () => {
-                  const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);
-                  const client = context.getCapability(ClientCapabilities.Client);
-                  const layout = context.getCapability(Capabilities.Layout);
-                  const { graph } = context.getCapability(Capabilities.AppGraph);
+      filter: (node): node is Node<null> => node.id === ROOT_ID,
+      actions: () => [
+        {
+          id: `${LayoutAction.UpdateDialog._tag}/assistant/open`,
+          data: async () => {
+            const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
+            const client = context.requestCapability(ClientCapabilities.Client);
+            const layout = context.requestCapability(Capabilities.Layout);
+            const { graph } = context.requestCapability(Capabilities.AppGraph);
 
-                  // TODO(burdon): Get space from workspace.
-                  // TODO(burdon): If need to create chat, then add to dispatch stack below.
-                  let chat: AIChatType | undefined;
-                  if (layout.active.length > 0) {
-                    const node = graph.getNode(layout.active[0]).pipe(Option.getOrNull);
-                    if (node) {
-                      const space = getSpace(node.data);
-                      if (space) {
-                        chat = await getOrCreateChat(dispatch, space);
-                      }
-                    }
-                  } else {
-                    const space = client.spaces.default;
-                    chat = await getOrCreateChat(dispatch, space);
-                  }
+            // TODO(burdon): Get space from workspace.
+            // TODO(burdon): If need to create chat, then add to dispatch stack below.
+            let chat: AIChatType | undefined;
+            if (layout.active.length > 0) {
+              const node = graph.findNode(layout.active[0]);
+              if (node) {
+                const space = getSpace(node.data);
+                if (space) {
+                  chat = await getOrCreateChat(dispatch, space);
+                }
+              }
+            } else {
+              const space = client.spaces.default;
+              chat = await getOrCreateChat(dispatch, space);
+            }
 
-                  if (!chat) {
-                    return;
-                  }
+            if (!chat) {
+              return;
+            }
 
-                  await dispatch(
-                    createIntent(LayoutAction.UpdateDialog, {
-                      part: 'dialog',
-                      subject: ASSISTANT_DIALOG,
-                      options: {
-                        state: true,
-                        blockAlign: 'end',
-                        props: {
-                          chat,
-                        },
-                      },
-                    }),
-                  );
-                },
-                properties: {
-                  label: ['open assistant label', { ns: ASSISTANT_PLUGIN }],
-                  icon: 'ph--sparkle--regular',
-                  disposition: 'pin-end',
-                  position: 'hoist',
-                  keyBinding: {
-                    macos: 'shift+meta+k',
-                    windows: 'shift+ctrl+k',
+            await dispatch(
+              createIntent(LayoutAction.UpdateDialog, {
+                part: 'dialog',
+                subject: ASSISTANT_DIALOG,
+                options: {
+                  state: true,
+                  blockAlign: 'end',
+                  props: {
+                    chat,
                   },
                 },
-              },
-            ]),
-            Option.getOrElse(() => []),
-          ),
-        ),
+              }),
+            );
+          },
+          properties: {
+            label: ['open assistant label', { ns: ASSISTANT_PLUGIN }],
+            icon: 'ph--star-four--regular',
+            disposition: 'pin-end',
+            position: 'hoist',
+            keyBinding: {
+              macos: 'shift+meta+k',
+              windows: 'shift+ctrl+k',
+            },
+          },
+        },
+      ],
+    }),
+
+    createExtension({
+      id: `${ASSISTANT_PLUGIN}/service-registry`,
+      filter: (node): node is Node<null> => node.id === 'root',
+      connector: ({ node }) => {
+        const layout = context.requestCapability(Capabilities.Layout);
+        const client = context.requestCapability(ClientCapabilities.Client);
+        const { spaceId } = parseId(layout.workspace);
+        const space = spaceId ? client.spaces.get(spaceId) : null;
+
+        return [
+          {
+            id: [node.id, 'service-registry'].join(ATTENDABLE_PATH_SEPARATOR),
+            type: DECK_COMPANION_TYPE,
+            data: space,
+            properties: {
+              label: ['service registry label', { ns: ASSISTANT_PLUGIN }],
+              icon: 'ph--plugs--regular',
+              disposition: 'hidden',
+            },
+          },
+        ];
+      },
     }),
 
     createExtension({
       id: `${ASSISTANT_PLUGIN}/object-chat-companion`,
-      // TODO(burdon): Add to all objects?
-      connector: (node) =>
-        Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) =>
-              isLiveObject(node.data) && node.data.assistantChatQueue && node.data.type !== AIChatType.typename
-                ? Option.some(node)
-                : Option.none(),
-            ),
-            Option.map((node) => [
-              {
-                id: [node.id, 'assistant-chat'].join(ATTENDABLE_PATH_SEPARATOR),
-                type: PLANK_COMPANION_TYPE,
-                data: 'assistant-chat',
-                properties: {
-                  label: ['assistant chat label', { ns: ASSISTANT_PLUGIN }],
-                  icon: 'ph--sparkle--regular',
-                  position: 'hoist',
-                },
-              },
-            ]),
-            Option.getOrElse(() => []),
-          ),
-        ),
+      filter: (node): node is Node<AIChatType> =>
+        isReactiveObject(node.data) && node.data.assistantChatQueue && node.data.type !== AIChatType.typename,
+      connector: ({ node }) => [
+        {
+          id: [node.id, 'assistant-chat'].join(ATTENDABLE_PATH_SEPARATOR),
+          type: PLANK_COMPANION_TYPE,
+          data: 'assistant-chat',
+          properties: {
+            label: ['assistant chat label', { ns: ASSISTANT_PLUGIN }],
+            icon: 'ph--star-four--regular',
+            position: 'hoist',
+          },
+        },
+      ],
     }),
 
     createExtension({
       id: `${ASSISTANT_PLUGIN}/root`,
-      connector: (node) => {
-        let query: QueryResult<TemplateType> | undefined;
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) =>
-              node.type === SPACE_TYPE && isSpace(node.data) ? Option.some(node.data) : Option.none(),
-            ),
-            Option.map((space) => {
-              if (!query) {
-                query = space.db.query(Query.type(TemplateType));
-              }
-
-              const templates = get(rxFromQuery(query));
-              return templates.length > 0
-                ? [
-                    {
-                      id: `${ASSISTANT_PLUGIN}/templates`,
-                      type: `${ASSISTANT_PLUGIN}/templates`,
-                      data: null,
-                      properties: {
-                        label: ['templates label', { ns: ASSISTANT_PLUGIN }],
-                        icon: 'ph--file-code--regular',
-                        space,
-                      },
-                    },
-                  ]
-                : [];
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
+      filter: (node): node is Node<Space> => isSpace(node.data),
+      connector: ({ node }) => {
+        const templates = memoizeQuery(node.data, Filter.schema(TemplateType));
+        return templates.length > 0
+          ? [
+              {
+                id: `${ASSISTANT_PLUGIN}/templates`,
+                type: `${ASSISTANT_PLUGIN}/templates`,
+                data: null,
+                properties: {
+                  label: ['templates label', { ns: ASSISTANT_PLUGIN }],
+                  icon: 'ph--file-code--regular',
+                  space: node.data,
+                },
+              },
+            ]
+          : [];
       },
     }),
 
     createExtension({
       id: `${ASSISTANT_PLUGIN}/templates`,
-      connector: (node) => {
-        let query: QueryResult<TemplateType> | undefined;
-        return Rx.make((get) =>
-          pipe(
-            get(node),
-            Option.flatMap((node) =>
-              node.id === `${ASSISTANT_PLUGIN}/templates` && isSpace(node.properties.space)
-                ? Option.some(node.properties.space)
-                : Option.none(),
-            ),
-            Option.map((space) => {
-              if (!query) {
-                query = space.db.query(Query.type(TemplateType));
-              }
-              return get(rxFromQuery(query))
-                .toSorted((a, b) => {
-                  const nameA = a.name ?? '';
-                  const nameB = b.name ?? '';
-                  return nameA.localeCompare(nameB);
-                })
-                .map((template) => ({
-                  id: fullyQualifiedId(template),
-                  type: `${ASSISTANT_PLUGIN}/template`,
-                  data: template,
-                  properties: {
-                    label: template.name ?? ['object placeholder', { ns: ASSISTANT_PLUGIN }],
-                    icon: 'ph--file-code--regular',
-                  },
-                }));
-            }),
-            Option.getOrElse(() => []),
-          ),
-        );
+      filter: (node): node is Node<null, { space: Space }> => node.id === `${ASSISTANT_PLUGIN}/templates`,
+      connector: ({ node }) => {
+        const templates = memoizeQuery(node.properties.space, Filter.schema(TemplateType));
+        return templates
+          .toSorted((a, b) => {
+            const nameA = a.name ?? '';
+            const nameB = b.name ?? '';
+            return nameA.localeCompare(nameB);
+          })
+          .map((template) => ({
+            id: fullyQualifiedId(template),
+            type: `${ASSISTANT_PLUGIN}/template`,
+            data: template,
+            properties: {
+              label: template.name ?? ['template title placeholder', { ns: ASSISTANT_PLUGIN }],
+              icon: 'ph--file-code--regular',
+            },
+          }));
       },
     }),
   ]);
 
 // TODO(burdon): Factor out.
 const getOrCreateChat = async (dispatch: PromiseIntentDispatcher, space: Space): Promise<AIChatType | undefined> => {
-  const { objects } = await space.db.query(Filter.type(AIChatType)).run();
+  const { objects } = await space.db.query(Filter.schema(AIChatType)).run();
   // console.log('objects', JSON.stringify(objects, null, 2));
   if (objects.length > 0) {
     // TODO(burdon): Is this the most recent?

package/src/capabilities/index.ts

@@ -8,6 +8,6 @@ export const AiClient = lazy(() => import('./ai-client'));
 export const AppGraphBuilder = lazy(() => import('./app-graph-builder'));
 export const IntentResolver = lazy(() => import('./intent-resolver'));
 export const ReactSurface = lazy(() => import('./react-surface'));
-export const Settings = lazy(() => import('./settings'));
+export const AssistantSettings = lazy(() => import('./settings'));
 
 export * from './capabilities';

package/src/capabilities/intent-resolver.ts

@@ -3,8 +3,9 @@
 //
 
 import { Capabilities, contributes, createResolver } from '@dxos/app-framework';
-import { createQueueDxn } from '@dxos/echo-schema';
-import { live, refFromDXN } from '@dxos/live-object';
+import { ObjectId } from '@dxos/echo-schema';
+import { DXN, QueueSubspaceTags } from '@dxos/keys';
+import { create, refFromDXN } from '@dxos/live-object';
 
 import { AssistantAction, AIChatType, TemplateType } from '../types';
 
@@ -15,8 +16,10 @@ export default () => [
       intent: AssistantAction.CreateChat,
       resolve: ({ spaceId, name }) => ({
         data: {
-          object: live(AIChatType, {
-            assistantChatQueue: refFromDXN(createQueueDxn(spaceId)),
+          object: create(AIChatType, {
+            assistantChatQueue: refFromDXN(
+              new DXN(DXN.kind.QUEUE, [QueueSubspaceTags.DATA, spaceId, ObjectId.random()]),
+            ),
           }),
         },
       }),
@@ -28,7 +31,7 @@ export default () => [
       intent: AssistantAction.CreateTemplate,
       resolve: ({ name }) => ({
         data: {
-          object: live(TemplateType, { name, kind: { include: 'manual' }, source: '{{! Template }}' }),
+          object: create(TemplateType, { name, kind: { include: 'manual' }, source: '{{! Template }}' }),
         },
       }),
     }),

package/src/capabilities/react-surface.tsx

@@ -5,11 +5,12 @@
 import React, { useMemo } from 'react';
 
 import { Capabilities, contributes, createSurface } from '@dxos/app-framework';
-import { Type } from '@dxos/echo';
+import { isInstanceOf } from '@dxos/echo-schema';
+import { getTypename } from '@dxos/live-object';
 import { SettingsStore } from '@dxos/local-storage';
-import { fullyQualifiedId, getSpace, getTypename, isLiveObject, type SpaceId } from '@dxos/react-client/echo';
+import { fullyQualifiedId, isReactiveObject, isSpace, type Space } from '@dxos/react-client/echo';
 
-import { AssistantDialog, AssistantSettings, ChatContainer, PromptSettings, TemplateContainer } from '../components';
+import { AssistantDialog, AssistantSettings, ChatContainer, ServiceRegistry, TemplateContainer } from '../components';
 import { ASSISTANT_PLUGIN, ASSISTANT_DIALOG } from '../meta';
 import { AIChatType, type AssistantSettingsProps, TemplateType } from '../types';
 
@@ -32,22 +33,19 @@ export default () =>
       id: `${ASSISTANT_PLUGIN}/chat`,
       role: 'article',
       filter: (data): data is { subject: AIChatType; variant: undefined } =>
-        Type.instanceOf(AIChatType, data.subject) && data.variant !== 'assistant-chat',
+        isInstanceOf(AIChatType, data.subject) && data.variant !== 'assistant-chat',
       component: ({ data, role }) => <ChatContainer role={role} chat={data.subject} />,
     }),
     createSurface({
       id: `${ASSISTANT_PLUGIN}/object-chat`,
       role: 'article',
       filter: (data): data is { companionTo: AIChatType; subject: 'assistant-chat' } =>
-        isLiveObject(data.companionTo) &&
-        (data as any).companionTo.assistantChatQueue &&
-        data.subject === 'assistant-chat',
+        isReactiveObject(data.companionTo) && data.companionTo.assistantChatQueue && data.subject === 'assistant-chat',
       component: ({ data, role }) => {
         const associatedArtifact = useMemo(
           () => ({
             id: fullyQualifiedId(data.companionTo),
             typename: getTypename(data.companionTo) ?? 'unknown',
-            spaceId: (getSpace(data.companionTo)?.id ?? 'unknown') as SpaceId,
           }),
           [data.companionTo],
         );
@@ -57,13 +55,13 @@ export default () =>
     createSurface({
       id: `${ASSISTANT_PLUGIN}/template`,
       role: 'article',
-      filter: (data): data is { subject: TemplateType } => Type.instanceOf(TemplateType, data.subject),
+      filter: (data): data is { subject: TemplateType } => isInstanceOf(TemplateType, data.subject),
       component: ({ data, role }) => <TemplateContainer role={role} template={data.subject} />,
     }),
     createSurface({
-      id: `${ASSISTANT_PLUGIN}/prompt-settings`,
-      role: 'object-settings',
-      filter: (data): data is { subject: TemplateType } => Type.instanceOf(TemplateType, data.subject),
-      component: ({ data }) => <PromptSettings template={data.subject} />,
+      id: `${ASSISTANT_PLUGIN}/service-registry`,
+      role: 'deck-companion--service-registry',
+      filter: (data): data is { subject: Space } => isSpace(data.subject),
+      component: ({ data }) => <ServiceRegistry space={data.subject} />,
     }),
   ]);

package/src/capabilities/settings.ts

@@ -3,13 +3,13 @@
 //
 
 import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import { create } from '@dxos/live-object';
 
 import { ASSISTANT_PLUGIN } from '../meta';
 import { type AssistantSettingsProps, AssistantSettingsSchema } from '../types';
 
 export default () => {
-  const settings = live<AssistantSettingsProps>({});
+  const settings = create<AssistantSettingsProps>({});
 
   return contributes(Capabilities.Settings, {
     schema: AssistantSettingsSchema,

package/src/components/AmbientDialog/AmbientDialog.stories.tsx

@@ -69,7 +69,7 @@ const meta: Meta<typeof AmbientDialog> = {
       plugins: [IntentPlugin()],
     }),
     withTheme,
-    withLayout({ fullscreen: true }),
+    withLayout({ fullscreen: true, tooltips: true }),
   ],
   parameters: {
     translations,

package/src/components/AssistantSettings/AssistantSettings.tsx

@@ -9,17 +9,11 @@ import { Input, Select, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
 
 import { ASSISTANT_PLUGIN } from '../../meta';
-import { LLM_PROVIDERS, type AssistantSettingsProps } from '../../types';
+import { type AssistantSettingsProps } from '../../types';
 
-// TODO(burdon): Factor out default Selector.
+// TODO(burdon): Factor out.
 const DEFAULT_VALUE = '__default';
 
-const LLM_PROVIDER_LABELS = {
-  edge: 'DXOS',
-  ollama: 'Ollama',
-  lmstudio: 'LM Studio',
-} as const;
-
 export const AssistantSettings = ({ settings }: { settings: AssistantSettingsProps }) => {
   const { t } = useTranslation(ASSISTANT_PLUGIN);
 
@@ -33,26 +27,10 @@ export const AssistantSettings = ({ settings }: { settings: AssistantSettingsPro
       </DeprecatedFormInput>
 
       <DeprecatedFormInput label={t('settings llm provider label')}>
-        <Select.Root
-          value={settings.llmProvider ?? 'edge'}
-          onValueChange={(value) => {
-            settings.llmProvider = value === DEFAULT_VALUE ? undefined : (value as any);
-          }}
-        >
-          <Select.TriggerButton placeholder={t('settings llm provider label')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                <Select.Option value={DEFAULT_VALUE}>{t('settings default label')}</Select.Option>
-                {LLM_PROVIDERS.map((model) => (
-                  <Select.Option key={model} value={model}>
-                    {LLM_PROVIDER_LABELS[model]}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
+        <Input.Switch
+          checked={settings.llmProvider === 'ollama'}
+          onCheckedChange={(checked) => (settings.llmProvider = checked ? 'ollama' : 'edge')}
+        />
       </DeprecatedFormInput>
 
       <DeprecatedFormInput label={t('settings edge llm model label')}>

package/src/components/ChatContainer.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React from 'react';
 
 import { Capabilities, useCapabilities, useCapability } from '@dxos/app-framework';
 import { type AssociatedArtifact } from '@dxos/artifact';
@@ -13,14 +13,16 @@ import { ThreadContainer } from './Thread';
 import { ASSISTANT_PLUGIN } from '../meta';
 import { type AssistantSettingsProps, type AIChatType } from '../types';
 
-export type ChatContainerProps = {
+// TODO(burdon): Attention.
+export const ChatContainer = ({
+  role,
+  chat,
+  associatedArtifact,
+}: {
   role: string;
   chat: AIChatType;
   associatedArtifact?: AssociatedArtifact;
-};
-
-// TODO(burdon): Attention.
-export const ChatContainer: FC<ChatContainerProps> = ({ role, chat, associatedArtifact }) => {
+}) => {
   const transcription = useCapabilities(TranscriptionCapabilities.Transcriber).length > 0;
   const settings = useCapability(Capabilities.SettingsStore).getStore<AssistantSettingsProps>(ASSISTANT_PLUGIN)?.value;
 

package/src/components/Prompt/Prompt.stories.tsx

@@ -17,7 +17,7 @@ import translations from '../../translations';
 const meta: Meta<typeof Prompt> = {
   title: 'plugins/plugin-automation/Prompt',
   component: Prompt,
-  decorators: [withTheme, withLayout()],
+  decorators: [withTheme, withLayout({ tooltips: true })],
   parameters: {
     layout: 'centered',
     translations,

package/src/components/Prompt/PromptBar.tsx

@@ -7,7 +7,7 @@ import React, { useRef, useState } from 'react';
 import { useVoiceInput } from '@dxos/plugin-transcription';
 import { Icon, IconButton, type ThemedClassName, Tooltip, useTranslation } from '@dxos/react-ui';
 import { Spinner } from '@dxos/react-ui-sfx';
-import { errorText, mx } from '@dxos/react-ui-theme';
+import { errorMessageColors, errorText, mx } from '@dxos/react-ui-theme';
 
 import { Prompt, type PromptController, type PromptProps } from './Prompt';
 import { ASSISTANT_PLUGIN } from '../../meta';
@@ -54,9 +54,17 @@ export const PromptBar = ({
     >
       <div className='flex w-[--rail-action] h-[--rail-action] items-center justify-center'>
         {(error && (
-          <Tooltip.Trigger content={error.message} delayDuration={0}>
-            <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
-          </Tooltip.Trigger>
+          <Tooltip.Root delayDuration={0}>
+            <Tooltip.Trigger>
+              <Icon icon='ph--warning-circle--regular' classNames={errorText} size={5} />
+            </Tooltip.Trigger>
+            <Tooltip.Portal>
+              <Tooltip.Content>
+                <div className={mx('text-sm', errorMessageColors)}>{error.message}</div>
+                <Tooltip.Arrow />
+              </Tooltip.Content>
+            </Tooltip.Portal>
+          </Tooltip.Root>
         )) || <Spinner active={processing} />}
       </div>
       <Prompt

package/src/components/ServiceRegistry/ServiceRegistry.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { useSpace } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { ServiceRegistry } from './ServiceRegistry';
+import { ServiceType } from '../../types';
+
+const meta: Meta<typeof ServiceRegistry> = {
+  title: 'plugins/plugin-automation/ServiceRegistry',
+  component: ServiceRegistry,
+  render: ({ space: _ignore, ...args }) => {
+    const space = useSpace();
+    if (!space) {
+      return <div />;
+    }
+
+    return (
+      <div className='h-full w-[300px] overflow-hidden'>
+        <ServiceRegistry space={space} {...args} />
+      </div>
+    );
+  },
+  decorators: [
+    withClientProvider({
+      createIdentity: true,
+      createSpace: true,
+      types: [ServiceType],
+    }),
+    withLayout({ fullscreen: true, tooltips: true, classNames: 'flex justify-center' }),
+    withTheme,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ServiceRegistry>;
+
+export const Default: Story = {
+  args: {},
+};