@dxos/plugin-space 0.8.1-staging.391c573 → 0.8.1-staging.97aedb1

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

@@ -46,8 +46,8 @@ export default (context: PluginsContext) =>
       inputType: CollectionType.typename,
       outputType: DIRECTORY_TYPE,
       serialize: (node) => ({
-        name: node.data.name ?? translations[0]['en-US'][SPACE_PLUGIN]['unnamed collection label'],
-        data: node.data.name ?? translations[0]['en-US'][SPACE_PLUGIN]['unnamed collection label'],
+        name: node.data.name ?? translations[0]['en-US'][CollectionType.typename]['object name placeholder'],
+        data: node.data.name ?? translations[0]['en-US'][CollectionType.typename]['object name placeholder'],
         type: DIRECTORY_TYPE,
       }),
       deserialize: async (data, ancestors) => {

package/src/capabilities/capabilities.ts

@@ -3,7 +3,7 @@
 //
 
 import { defineCapability, type Label } from '@dxos/app-framework';
-import { type DeepReadonly } from '@dxos/util';
+import { type Position, type DeepReadonly } from '@dxos/util';
 
 import { SPACE_PLUGIN } from '../meta';
 import { type ObjectForm, type PluginState } from '../types';
@@ -12,8 +12,8 @@ export namespace SpaceCapabilities {
   export const State = defineCapability<DeepReadonly<PluginState>>(`${SPACE_PLUGIN}/capability/state`);
   export const MutableState = defineCapability<PluginState>(`${SPACE_PLUGIN}/capability/state`);
 
-  export type SpaceSettingsPanel = { id: string; label: Label };
-  export const SettingsPanel = defineCapability<SpaceSettingsPanel>(`${SPACE_PLUGIN}/capability/settings-panel`);
+  export type SettingsSection = { id: string; label: Label; position?: Position };
+  export const SettingsSection = defineCapability<SettingsSection>(`${SPACE_PLUGIN}/capability/settings-section`);
 
   export const ObjectForm = defineCapability<ObjectForm<any>>(`${SPACE_PLUGIN}/capability/object-form`);
 }

package/src/capabilities/intent-resolver.ts

@@ -2,8 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
+import { pipe } from 'effect';
+
 import {
   Capabilities,
+  chain,
   contributes,
   createIntent,
   createResolver,
@@ -14,8 +17,8 @@ import { type Expando, getTypename, type HasId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
 import { Migrations } from '@dxos/migrations';
-import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { ClientCapabilities } from '@dxos/plugin-client';
+import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { isSpace, getSpace, SpaceState, type Space, fullyQualifiedId, isEchoObject } from '@dxos/react-client/echo';
@@ -24,8 +27,6 @@ import { SpaceCapabilities } from './capabilities';
 import {
   CREATE_SPACE_DIALOG,
   JOIN_DIALOG,
-  SPACE_SETTINGS_DIALOG,
-  type SpaceSettingsDialogProps,
   type JoinDialogProps,
   POPOVER_RENAME_SPACE,
   CREATE_OBJECT_DIALOG,
@@ -41,12 +42,11 @@ import { cloneObject, COMPOSER_SPACE_LOCK, getNestedObjects } from '../util';
 const SPACE_MAX_OBJECTS = 500;
 
 type IntentResolverOptions = {
-  createInvitationUrl: (invitationCode: string) => string;
   context: PluginsContext;
   observability?: boolean;
 };
 
-export default ({ createInvitationUrl, context, observability }: IntentResolverOptions) => {
+export default ({ context, observability }: IntentResolverOptions) => {
   const resolve = (typename: string) =>
     context.requestCapabilities(Capabilities.Metadata).find(({ id }) => id === typename)?.metadata ?? {};
 
@@ -104,7 +104,7 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
     }),
     createResolver({
       intent: SpaceAction.Join,
-      resolve: ({ invitationCode }) => ({
+      resolve: ({ invitationCode, onDone }) => ({
         intents: [
           createIntent(LayoutAction.UpdateDialog, {
             part: 'dialog',
@@ -113,6 +113,7 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
               blockAlign: 'start',
               props: {
                 initialInvitationCode: invitationCode,
+                onDone,
               } satisfies Partial<JoinDialogProps>,
             },
           }),
@@ -123,31 +124,40 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
       intent: SpaceAction.Share,
       filter: (data): data is { space: Space } => !data.space.properties[COMPOSER_SPACE_LOCK],
       resolve: ({ space }) => {
-        const attention = context.requestCapability(AttentionCapabilities.Attention);
-        const current = attention.current.at(-1);
-        const target = current?.startsWith(space.id) ? current : undefined;
+        const layout = context.requestCapability(Capabilities.Layout);
+        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}members`;
+        if (layout.active.includes(id)) {
+          return {
+            intents: [
+              createIntent(LayoutAction.ScrollIntoView, {
+                part: 'current',
+                subject: id,
+              }),
+            ],
+          };
+        }
 
         return {
           intents: [
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              subject: SPACE_SETTINGS_DIALOG,
-              options: {
-                blockAlign: 'start',
-                props: {
-                  space,
-                  target,
-                  initialTab: 'members',
-                  createInvitationUrl,
-                } satisfies Partial<SpaceSettingsDialogProps>,
-              },
-            }),
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: space.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [space.id],
+                options: {
+                  variant: 'members',
+                },
+              }),
+            ),
             ...(observability
               ? [
                   createIntent(ObservabilityAction.SendEvent, {
                     name: 'space.share',
                     properties: {
-                      space: space.id,
+                      spaceId: space.id,
                     },
                   }),
                 ]
@@ -233,20 +243,34 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
     createResolver({
       intent: SpaceAction.OpenSettings,
       resolve: ({ space }) => {
+        const layout = context.requestCapability(Capabilities.Layout);
+        const id = `${space.id}${ATTENDABLE_PATH_SEPARATOR}settings`;
+        if (layout.active.includes(id)) {
+          return {
+            intents: [
+              createIntent(LayoutAction.ScrollIntoView, {
+                part: 'current',
+                subject: id,
+              }),
+            ],
+          };
+        }
+
         return {
           intents: [
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              subject: SPACE_SETTINGS_DIALOG,
-              options: {
-                blockAlign: 'start',
-                props: {
-                  space,
-                  initialTab: 'settings',
-                  createInvitationUrl,
-                } satisfies Partial<SpaceSettingsDialogProps>,
-              },
-            }),
+            pipe(
+              createIntent(LayoutAction.SwitchWorkspace, {
+                part: 'workspace',
+                subject: space.id,
+              }),
+              chain(LayoutAction.Open, {
+                part: 'main',
+                subject: [space.id],
+                options: {
+                  variant: 'settings',
+                },
+              }),
+            ),
           ],
         };
       },
@@ -265,7 +289,7 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
     }),
     createResolver({
       intent: SpaceAction.Migrate,
-      resolve: async ({ space, version }) => {
+      resolve: async ({ space, version: targetVersion }) => {
         const state = context.requestCapability(SpaceCapabilities.MutableState);
 
         if (space.state.get() === SpaceState.SPACE_REQUIRES_MIGRATION) {
@@ -273,7 +297,8 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
           await space.internal.migrate();
           state.sdkMigrationRunning[space.id] = false;
         }
-        const result = await Migrations.migrate(space, version);
+        const result = await Migrations.migrate(space, targetVersion);
+        const version = Migrations.versionProperty ? space.properties[Migrations.versionProperty] : undefined;
         return {
           data: result,
           intents: [
@@ -283,6 +308,7 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
                     name: 'space.migrate',
                     properties: {
                       spaceId: space.id,
+                      targetVersion,
                       version,
                     },
                   }),
@@ -318,7 +344,7 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
     }),
     createResolver({
       intent: SpaceAction.AddObject,
-      resolve: async ({ target, object }) => {
+      resolve: async ({ target, object, hidden }) => {
         const space = isSpace(target) ? target : getSpace(target);
         invariant(space, 'Space not found.');
 
@@ -356,6 +382,8 @@ export default ({ createInvitationUrl, context, observability }: IntentResolverO
 
         if (target instanceof CollectionType) {
           target.objects.push(makeRef(object as HasId));
+        } else if (isSpace(target) && hidden) {
+          space.db.add(object);
         } else if (isSpace(target)) {
           const collection = space.properties[CollectionType.typename]?.target;
           if (collection instanceof CollectionType) {

package/src/capabilities/react-surface.tsx

@@ -5,6 +5,7 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface, Surface, useCapability } from '@dxos/app-framework';
+import { isInstanceOf } from '@dxos/echo-schema';
 import { SettingsStore } from '@dxos/local-storage';
 import {
   getSpace,
@@ -19,8 +20,6 @@ import { type JoinPanelProps } from '@dxos/shell/react';
 
 import { SpaceCapabilities } from './capabilities';
 import {
-  AdvancedObjectSettings,
-  BaseObjectSettings,
   CollectionMain,
   CollectionSection,
   CREATE_OBJECT_DIALOG,
@@ -36,16 +35,16 @@ import {
   PopoverRenameObject,
   PopoverRenameSpace,
   SmallPresenceLive,
-  SPACE_SETTINGS_DIALOG,
   SpacePluginSettings,
   SpacePresence,
-  SpaceSettingsDialog,
-  SpaceSettingsPanel,
   SyncStatus,
   type CreateObjectDialogProps,
-  type SpaceSettingsDialogProps,
   POPOVER_ADD_SPACE,
   PopoverAddSpace,
+  SpaceSettingsContainer,
+  SpacePropertiesForm,
+  MembersContainer,
+  ObjectSettingsContainer,
 } from '../components';
 import { SPACE_PLUGIN } from '../meta';
 import { CollectionType, type SpaceSettingsProps } from '../types';
@@ -74,35 +73,37 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
       id: `${SPACE_PLUGIN}/collection-fallback`,
       role: 'article',
       position: 'fallback',
-      filter: (data): data is { subject: CollectionType } => data.subject instanceof CollectionType,
+      filter: (data): data is { subject: CollectionType } => isInstanceOf(CollectionType, data.subject),
       component: ({ data }) => <CollectionMain collection={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/settings-panel`,
-      // TODO(burdon): Add role name syntax to minimal plugin docs.
-      role: 'complementary--settings',
-      filter: (data): data is { subject: Space } => isSpace(data.subject),
-      component: ({ data }) => <SpaceSettingsPanel space={data.subject} />,
+      id: `${SPACE_PLUGIN}/members`,
+      role: 'article',
+      position: 'hoist',
+      filter: (data): data is { subject: Space; variant: 'members' } =>
+        isSpace(data.subject) && data.variant === 'members',
+      component: ({ data }) => <MembersContainer space={data.subject} createInvitationUrl={createInvitationUrl} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/object-settings-base-panel`,
-      role: 'complementary--settings',
+      id: `${SPACE_PLUGIN}/settings`,
+      role: 'article',
       position: 'hoist',
-      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <BaseObjectSettings object={data.subject} />,
+      filter: (data): data is { subject: Space; variant: 'settings' } =>
+        isSpace(data.subject) && data.variant === 'settings',
+      component: ({ data }) => <SpaceSettingsContainer space={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/object-settings-advanced-panel`,
-      role: 'complementary--settings',
-      position: 'fallback',
-      filter: (data): data is { subject: ReactiveEchoObject<any> } => isEchoObject(data.subject),
-      component: ({ data }) => <AdvancedObjectSettings object={data.subject} />,
+      id: `${SPACE_PLUGIN}/companion/object-settings`,
+      role: 'article',
+      filter: (data): data is { companionTo: ReactiveEchoObject<any> } =>
+        isEchoObject(data.companionTo) && data.subject === 'settings',
+      component: ({ data, role }) => <ObjectSettingsContainer object={data.companionTo} role={role} />,
     }),
     createSurface({
-      id: SPACE_SETTINGS_DIALOG,
-      role: 'dialog',
-      filter: (data): data is { props: SpaceSettingsDialogProps } => data.component === SPACE_SETTINGS_DIALOG,
-      component: ({ data }) => <SpaceSettingsDialog {...data.props} createInvitationUrl={createInvitationUrl} />,
+      id: `${SPACE_PLUGIN}/space-settings--properties`,
+      role: 'space-settings--properties',
+      filter: (data): data is { subject: Space } => isSpace(data.subject),
+      component: ({ data }) => <SpacePropertiesForm space={data.subject} />,
     }),
     createSurface({
       id: JOIN_DIALOG,
@@ -152,14 +153,15 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
         return <SmallPresenceLive id={data.id} open={data.open} viewers={state.viewersByObject[data.id]} />;
       },
     }),
+    // TODO(wittjosiah): Attention glyph for non-echo items should be handled elsewhere.
     createSurface({
-      // TODO(wittjosiah): Attention glyph for non-echo items should be handled elsewhere.
       id: `${SPACE_PLUGIN}/navtree-presence-fallback`,
       role: 'navtree-item-end',
       position: 'fallback',
       filter: (data): data is { id: string; open?: boolean } => typeof data.id === 'string',
       component: ({ data }) => <SmallPresenceLive id={data.id} open={data.open} />,
     }),
+    // TODO(wittjosiah): Broken?
     createSurface({
       id: `${SPACE_PLUGIN}/navtree-sync-status`,
       role: 'navtree-item-end',
@@ -186,11 +188,11 @@ export default ({ createInvitationUrl }: ReactSurfaceOptions) =>
     createSurface({
       id: `${SPACE_PLUGIN}/collection-section`,
       role: 'section',
-      filter: (data): data is { subject: CollectionType } => data.subject instanceof CollectionType,
+      filter: (data): data is { subject: CollectionType } => isInstanceOf(CollectionType, data.subject),
       component: ({ data }) => <CollectionSection collection={data.subject} />,
     }),
     createSurface({
-      id: `${SPACE_PLUGIN}/settings`,
+      id: `${SPACE_PLUGIN}/plugin-settings`,
       role: 'article',
       filter: (data): data is { subject: SettingsStore<SpaceSettingsProps> } =>
         data.subject instanceof SettingsStore && data.subject.prefix === SPACE_PLUGIN,

package/src/capabilities/schema-tools.ts

@@ -10,7 +10,7 @@ import { type Space } from '@dxos/client/echo';
 import { FormatEnum, FormatEnums, S, SelectOptionSchema, GeoPoint, toJsonSchema } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { hues } from '@dxos/react-ui-theme';
-import { echoSchemaFromPropertyDefinitions } from '@dxos/schema';
+import { getSchemaFromPropertyDefinitions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
 declare global {
@@ -115,7 +115,7 @@ export default () =>
         invariant(extensions?.space, 'No space.');
         const space = extensions.space;
 
-        const schema = echoSchemaFromPropertyDefinitions(typename, properties);
+        const schema = getSchemaFromPropertyDefinitions(typename, properties);
         const [registeredSchema] = await space.db.schemaRegistry.register([schema]);
 
         return ToolResult.Success(registeredSchema);

package/src/capabilities/spaces-ready.ts

@@ -3,7 +3,7 @@
 //
 
 import { contributes, createIntent, type PluginsContext, Capabilities, LayoutAction } from '@dxos/app-framework';
-import { EventSubscriptions } from '@dxos/async';
+import { SubscriptionList } from '@dxos/async';
 import { Expando } from '@dxos/echo-schema';
 import { scheduledEffect } from '@dxos/echo-signals/core';
 import { create } from '@dxos/live-object';
@@ -24,8 +24,8 @@ const ACTIVE_NODE_BROADCAST_INTERVAL = 30_000;
 const WAIT_FOR_OBJECT_TIMEOUT = 1000;
 
 export default async (context: PluginsContext) => {
-  const subscriptions = new EventSubscriptions();
-  const spaceSubscriptions = new EventSubscriptions();
+  const subscriptions = new SubscriptionList();
+  const spaceSubscriptions = new SubscriptionList();
 
   const { dispatchPromise: dispatch } = context.requestCapability(Capabilities.IntentDispatcher);
   const { graph } = context.requestCapability(Capabilities.AppGraph);

package/src/capabilities/state.ts

@@ -14,9 +14,11 @@ import { SPACE_PLUGIN } from '../meta';
 import { type PluginState } from '../types';
 
 export default (context: PluginsContext) => {
+  const sections = context.requestCapabilities(SpaceCapabilities.SettingsSection);
   const state = new LocalStorageStore<PluginState>(SPACE_PLUGIN, {
     awaiting: undefined,
     spaceNames: {},
+    spaceSettingsOpenSections: sections.map((section) => section.id),
     viewersByObject: {},
     // TODO(wittjosiah): Stop using (Complex)Map inside reactive object.
     viewersByIdentity: new ComplexMap(PublicKey.hash),

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -22,7 +22,7 @@ import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
 import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
-import { CollectionType, type ObjectForm, SpaceAction } from '../../types';
+import { type ObjectForm, SpaceAction } from '../../types';
 
 export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
@@ -53,16 +53,13 @@ export const CreateObjectDialog = ({
   const handleCreateObject = useCallback(
     async ({
       form,
-      target: _target,
+      target,
       data = {},
     }: {
       form: ObjectForm;
       target: CreateObjectPanelProps['target'];
       data?: Record<string, any>;
     }) => {
-      const target = isSpace(_target)
-        ? (_target.properties[CollectionType.typename]?.target as CollectionType | undefined)
-        : _target;
       if (!target) {
         // TODO(wittjosiah): UI feedback.
         return;
@@ -76,7 +73,7 @@ export const CreateObjectDialog = ({
       const result = await dispatch(form.getIntent(data, { space }));
       const object = result.data?.object;
       if (isReactiveObject(object)) {
-        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object });
+        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object, hidden: form.hidden });
         const shouldNavigate = _shouldNavigate ?? (() => true);
         if (shouldNavigate(object)) {
           await dispatch(pipe(addObjectIntent, chain(LayoutAction.Open, { part: 'main' })));

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';
-import { getObjectAnnotation, type ObjectAnnotation, type S } from '@dxos/echo-schema';
+import { getTypeAnnotation, type TypeAnnotation, type S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 import { type SpaceId, type Space } from '@dxos/react-client/echo';
 import { Icon, type ThemedClassName, toLocalizedString, useTranslation } from '@dxos/react-ui';
@@ -69,9 +69,9 @@ export const CreateObjectPanel = ({
   const { t } = useTranslation(SPACE_PLUGIN);
   const [typename, setTypename] = useState<string | undefined>(initialTypename);
   const [target, setTarget] = useState<Space | CollectionType | undefined>(initialTarget);
-  const form = forms.find((form) => getObjectAnnotation(form.objectSchema)?.typename === typename);
-  const options: ObjectAnnotation[] = forms
-    .map((form) => getObjectAnnotation(form.objectSchema))
+  const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
+  const options: TypeAnnotation[] = forms
+    .map((form) => getTypeAnnotation(form.objectSchema))
     .filter(isNonNullable)
     .sort((a, b) => {
       const nameA = t('typename label', { ns: a.typename, defaultValue: a.typename });
@@ -92,7 +92,7 @@ export const CreateObjectPanel = ({
   const handleSetTypename = useCallback(
     async (typename: string) => {
       invariant(target, 'target is required');
-      const form = forms.find((form) => getObjectAnnotation(form.objectSchema)?.typename === typename);
+      const form = forms.find((form) => getTypeAnnotation(form.objectSchema)?.typename === typename);
       if (form && !form.formSchema) {
         await onCreateObject?.({ form, target });
       } else {
@@ -170,7 +170,7 @@ const SelectSchema = ({
   resolve,
   onChange,
 }: {
-  options: ObjectAnnotation[];
+  options: TypeAnnotation[];
   onChange: (type: string) => void;
 } & Pick<CreateObjectPanelProps, 'resolve'>) => {
   const { t } = useTranslation(SPACE_PLUGIN);

package/src/components/JoinDialog.tsx

@@ -5,9 +5,10 @@
 import React, { useCallback } from 'react';
 
 import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { log } from '@dxos/log';
+import { Trigger } from '@dxos/async';
 import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
 import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
@@ -28,34 +29,44 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
 
   const handleDone = useCallback(
     async (result: InvitationResult | null) => {
-      if (result?.spaceKey) {
-        await Promise.all([
-          dispatch(
-            createIntent(LayoutAction.AddToast, {
-              part: 'toast',
-              subject: {
-                id: `${SPACE_PLUGIN}/join-success`,
-                duration: 5_000,
-                title: ['join success label', { ns: SPACE_PLUGIN }],
-                closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
-              },
-            }),
-          ),
-          dispatch(
-            createIntent(LayoutAction.UpdateDialog, {
-              part: 'dialog',
-              options: {
-                state: false,
-              },
-            }),
-          ),
-        ]);
+      const spaceKey = result?.spaceKey;
+      if (!spaceKey) {
+        return;
       }
 
-      const space = result?.spaceKey ? client.spaces.get(result.spaceKey) : undefined;
+      await Promise.all([
+        dispatch(
+          createIntent(LayoutAction.AddToast, {
+            part: 'toast',
+            subject: {
+              id: `${SPACE_PLUGIN}/join-success`,
+              duration: 5_000,
+              title: ['join success label', { ns: SPACE_PLUGIN }],
+              closeLabel: ['dismiss label', { ns: SPACE_PLUGIN }],
+            },
+          }),
+        ),
+        dispatch(
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            options: {
+              state: false,
+            },
+          }),
+        ),
+      ]);
+
+      let space = client.spaces.get(spaceKey);
       if (!space) {
-        log.warn('Space not found', result?.spaceKey);
-        return;
+        // TODO(wittjosiah): Add api to wait for a space.
+        const trigger = new Trigger<Space>();
+        client.spaces.subscribe(() => {
+          const space = client.spaces.get(spaceKey);
+          if (space) {
+            trigger.wake(space);
+          }
+        });
+        space = await trigger.wait();
       }
 
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: space.id }));
@@ -78,7 +89,12 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
 
       if (space) {
         await dispatch(
-          createIntent(ObservabilityAction.SendEvent, { name: 'space.join', properties: { spaceId: space.id } }),
+          createIntent(ObservabilityAction.SendEvent, {
+            name: 'space.join',
+            properties: {
+              spaceId: space.id,
+            },
+          }),
         );
       }
     },

package/src/components/MembersContainer.stories.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type StoryObj, type Meta } from '@storybook/react';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { osTranslations } from '@dxos/shell/react';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { MembersContainer } from './MembersContainer';
+import translations from '../translations';
+
+const meta: Meta = {
+  title: 'plugins/plugin-space/MembersContainer',
+  component: MembersContainer,
+  decorators: [
+    withClientProvider({ createIdentity: true, createSpace: true }),
+    withTheme,
+    withLayout({ tooltips: true }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations: [...translations, osTranslations],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof MembersContainer>;
+
+export const Default: Story = {};