@dxos/plugin-space 0.7.4 → 0.7.5-main.9cb18ac

package/src/components/AwaitingObject.tsx

@@ -3,15 +3,22 @@
 //
 
 import { CheckCircle, CircleDashed, CircleNotch } from '@phosphor-icons/react';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import { parseIntentPlugin, useResolvePlugin, parseNavigationPlugin, NavigationAction } from '@dxos/app-framework';
+import {
+  useResolvePlugin,
+  parseNavigationPlugin,
+  NavigationAction,
+  useIntentDispatcher,
+  createIntent,
+} from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
 import { Filter, fullyQualifiedId, useQuery } from '@dxos/react-client/echo';
 import { Button, Toast, useTranslation } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 
-import { SpaceAction, SPACE_PLUGIN } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
 
 const WAIT_FOR_OBJECT_TIMEOUT = 180e3; // 3 minutes
 const TOAST_TIMEOUT = 240e3; // 4 minutes
@@ -21,7 +28,7 @@ export const AwaitingObject = ({ id }: { id: string }) => {
   const [waiting, setWaiting] = useState(true);
   const [found, setFound] = useState(false);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const intentPlugin = useResolvePlugin(parseIntentPlugin);
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
 
   const client = useClient();
@@ -47,22 +54,17 @@ export const AwaitingObject = ({ id }: { id: string }) => {
         setOpen(false);
       }
     }
-  }, [id, objects, intentPlugin]);
+  }, [id, objects, navigationPlugin]);
 
-  const handleClose = async () =>
-    intentPlugin?.provides.intent.dispatch({
-      plugin: SPACE_PLUGIN,
-      action: SpaceAction.WAIT_FOR_OBJECT,
-      data: { id: undefined },
-    });
+  const handleClose = useCallback(
+    async () => dispatch(createIntent(SpaceAction.WaitForObject, { id: undefined })),
+    [dispatch],
+  );
 
-  const handleNavigate = () => {
-    void intentPlugin?.provides.intent.dispatch({
-      action: NavigationAction.OPEN,
-      data: { activeParts: { main: [id] } },
-    });
+  const handleNavigate = useCallback(() => {
+    void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [id] } }));
     void handleClose();
-  };
+  }, [id, handleClose, dispatch]);
 
   return (
     <Toast.Root open={open} duration={TOAST_TIMEOUT} onOpenChange={setOpen}>

package/src/components/CreateDialog/CreateObjectDialog.tsx

@@ -2,20 +2,30 @@
 // Copyright 2024 DXOS.org
 //
 
+import { pipe } from 'effect';
 import React, { useCallback, useRef } from 'react';
 
-import { type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { chain, createIntent, type MetadataResolver, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useClient } from '@dxos/react-client';
-import { type AbstractTypedObject, getSpace, isReactiveObject, isSpace, useSpaces } from '@dxos/react-client/echo';
+import {
+  getSpace,
+  isReactiveObject,
+  isSpace,
+  type ReactiveObject,
+  type TypedObject,
+  useSpaces,
+} from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 
 import { CreateObjectPanel, type CreateObjectPanelProps } from './CreateObjectPanel';
-import { SPACE_PLUGIN, SpaceAction } from '../../meta';
-import { CollectionType } from '../../types';
+import { SPACE_PLUGIN } from '../../meta';
+import { CollectionType, SpaceAction } from '../../types';
+
+export const CREATE_OBJECT_DIALOG = `${SPACE_PLUGIN}/CreateObjectDialog`;
 
 export type CreateObjectDialogProps = Pick<CreateObjectPanelProps, 'schemas' | 'target' | 'typename' | 'name'> & {
   resolve?: MetadataResolver;
-  navigableCollections?: boolean;
+  shouldNavigate?: (object: ReactiveObject<any>) => boolean;
 };
 
 export const CreateObjectDialog = ({
@@ -23,14 +33,14 @@ export const CreateObjectDialog = ({
   target,
   typename,
   name,
-  navigableCollections,
+  shouldNavigate: _shouldNavigate,
   resolve,
 }: CreateObjectDialogProps) => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
   const client = useClient();
   const spaces = useSpaces();
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleCreateObject = useCallback(
     async ({
@@ -38,13 +48,15 @@ export const CreateObjectDialog = ({
       target: _target,
       name,
     }: {
-      schema: AbstractTypedObject;
+      schema: TypedObject;
       target: CreateObjectPanelProps['target'];
       name?: string;
     }) => {
-      const target = isSpace(_target) ? (_target.properties[CollectionType.typename] as CollectionType) : _target;
-      const createObjectAction = resolve?.(schema.typename)?.createObject;
-      if (!createObjectAction || !target) {
+      const target = isSpace(_target)
+        ? (_target.properties[CollectionType.typename]?.target as CollectionType | undefined)
+        : _target;
+      const createObjectIntent = resolve?.(schema.typename)?.createObject;
+      if (!createObjectIntent || !target) {
         // TODO(wittjosiah): UI feedback.
         return;
       }
@@ -53,17 +65,16 @@ export const CreateObjectDialog = ({
       closeRef.current?.click();
 
       const space = isSpace(target) ? target : getSpace(target);
-      const result = await dispatch({ action: createObjectAction, data: { name, space } });
-      const object = result?.data;
+      const result = await dispatch(createObjectIntent({ name, space }));
+      const object = result.data?.object;
       if (isReactiveObject(object)) {
-        await dispatch([
-          {
-            plugin: SPACE_PLUGIN,
-            action: SpaceAction.ADD_OBJECT,
-            data: { target, object },
-          },
-          ...(!(object instanceof CollectionType) || navigableCollections ? [{ action: NavigationAction.OPEN }] : []),
-        ]);
+        const addObjectIntent = createIntent(SpaceAction.AddObject, { target, object });
+        const shouldNavigate = _shouldNavigate ?? (() => true);
+        if (shouldNavigate(object)) {
+          await dispatch(pipe(addObjectIntent, chain(NavigationAction.Open, {})));
+        } else {
+          await dispatch(addObjectIntent);
+        }
       }
     },
     [dispatch, resolve],
@@ -73,7 +84,7 @@ export const CreateObjectDialog = ({
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create object dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>

package/src/components/CreateDialog/CreateObjectPanel.tsx

@@ -5,7 +5,7 @@
 import React, { useCallback, useState } from 'react';
 
 import { type MetadataResolver } from '@dxos/app-framework';
-import { type AbstractTypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
+import { type TypedObject, getObjectAnnotation, S } from '@dxos/echo-schema';
 import { type SpaceId, type Space, isSpace } from '@dxos/react-client/echo';
 import { Icon, IconButton, Input, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Form, InputHeader } from '@dxos/react-ui-form';
@@ -17,7 +17,7 @@ import { type CollectionType } from '../../types';
 import { getSpaceDisplayName } from '../../util';
 
 export type CreateObjectPanelProps = {
-  schemas: AbstractTypedObject[];
+  schemas: TypedObject[];
   spaces: Space[];
   typename?: string;
   target?: Space | CollectionType;
@@ -25,7 +25,7 @@ export type CreateObjectPanelProps = {
   defaultSpaceId?: SpaceId;
   resolve?: MetadataResolver;
   onCreateObject?: (params: {
-    schema: AbstractTypedObject;
+    schema: TypedObject;
     target: Space | CollectionType;
     name?: string;
   }) => MaybePromise<void>;
@@ -63,7 +63,7 @@ export const CreateObjectPanel = ({
 
   // TODO(wittjosiah): All of these inputs should be rolled into a `Form` once it supports the necessary variants.
   const schemaInput = (
-    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+    <SearchList.Root label={t('schema input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.schema-input'
@@ -89,7 +89,7 @@ export const CreateObjectPanel = ({
   );
 
   const spaceInput = (
-    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden my-2 px-2'>
+    <SearchList.Root label={t('space input label')} classNames='flex flex-col grow overflow-hidden'>
       <SearchList.Input
         autoFocus
         data-testid='create-object-form.space-input'
@@ -126,7 +126,7 @@ export const CreateObjectPanel = ({
   return (
     <div role='form' className='flex flex-col gap-2'>
       {target && (
-        <div role='none' className='px-2'>
+        <div role='none'>
           <Input.Root>
             <InputHeader>
               <Input.Label>
@@ -148,7 +148,7 @@ export const CreateObjectPanel = ({
         </div>
       )}
       {schema && (
-        <div role='none' className='px-2'>
+        <div role='none'>
           <Input.Root>
             <InputHeader>
               <Input.Label>{t('creating object type label')}</Input.Label>

package/src/components/CreateDialog/CreateSpaceDialog.tsx

@@ -4,13 +4,15 @@
 
 import React, { useCallback, useRef } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type S } from '@dxos/echo-schema';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { Form } from '@dxos/react-ui-form';
 
-import { SPACE_PLUGIN, SpaceAction } from '../../meta';
-import { SpaceForm } from '../../types';
+import { SPACE_PLUGIN } from '../../meta';
+import { SpaceAction, SpaceForm } from '../../types';
+
+export const CREATE_SPACE_DIALOG = `${SPACE_PLUGIN}/CreateSpaceDialog`;
 
 type FormValues = S.Schema.Type<typeof SpaceForm>;
 const initialValues: FormValues = { edgeReplication: true };
@@ -18,20 +20,14 @@ const initialValues: FormValues = { edgeReplication: true };
 export const CreateSpaceDialog = () => {
   const closeRef = useRef<HTMLButtonElement | null>(null);
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const handleCreateSpace = useCallback(
     async (data: FormValues) => {
-      const result = await dispatch({
-        action: SpaceAction.CREATE,
-        data,
-      });
-      const target = result?.data.space;
+      const result = await dispatch(createIntent(SpaceAction.Create, data));
+      const target = result.data?.space;
       if (target) {
-        await dispatch({
-          action: SpaceAction.OPEN_CREATE_OBJECT,
-          data: { target },
-        });
+        await dispatch(createIntent(SpaceAction.OpenCreateObject, { target }));
       }
     },
     [dispatch],
@@ -41,7 +37,7 @@ export const CreateSpaceDialog = () => {
     // TODO(wittjosiah): The tablist dialog pattern is copied from @dxos/plugin-manager.
     //  Consider factoring it out to the tabs package.
     <Dialog.Content classNames='p-0 bs-content min-bs-[15rem] max-bs-full md:max-is-[40rem] overflow-hidden'>
-      <div role='none' className='flex justify-between pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5'>
+      <div role='none' className='flex justify-between pbs-2 pis-2 pie-2 @md:pbs-4 @md:pis-4 @md:pie-4'>
         <Dialog.Title>{t('create space dialog title')}</Dialog.Title>
         <Dialog.Close asChild>
           <Button ref={closeRef} density='fine' variant='ghost' autoFocus>

package/src/components/JoinDialog.tsx

@@ -4,9 +4,9 @@
 
 import React, { useCallback } from 'react';
 
-import { LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher } from '@dxos/app-framework';
 import { useGraph } from '@dxos/plugin-graph';
-import { ObservabilityAction } from '@dxos/plugin-observability/meta';
+import { ObservabilityAction } from '@dxos/plugin-observability/types';
 import { useSpaces } from '@dxos/react-client/echo';
 import { type InvitationResult } from '@dxos/react-client/invitations';
 import { Dialog, useTranslation } from '@dxos/react-ui';
@@ -14,13 +14,15 @@ import { JoinPanel, type JoinPanelProps } from '@dxos/shell/react';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const JOIN_DIALOG = `${SPACE_PLUGIN}/JoinDialog`;
+
 export type JoinDialogProps = JoinPanelProps & {
   navigableCollections?: boolean;
 };
 
 export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialogProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const spaces = useSpaces();
   const { graph } = useGraph();
 
@@ -28,9 +30,8 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
     async (result: InvitationResult | null) => {
       if (result?.spaceKey) {
         await Promise.all([
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
+          dispatch(
+            createIntent(LayoutAction.SetLayout, {
               element: 'toast',
               subject: {
                 id: `${SPACE_PLUGIN}/join-success`,
@@ -38,15 +39,14 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
                 title: t('join success label'),
                 closeLabel: t('dismiss label'),
               },
-            },
-          }),
-          dispatch({
-            action: LayoutAction.SET_LAYOUT,
-            data: {
+            }),
+          ),
+          dispatch(
+            createIntent(LayoutAction.SetLayout, {
               element: 'dialog',
               state: false,
-            },
-          }),
+            }),
+          ),
         ]);
       }
 
@@ -60,33 +60,17 @@ export const JoinDialog = ({ navigableCollections, onDone, ...props }: JoinDialo
         // If the target has not yet replicated, this will trigger a loading toast.
         await graph.waitForPath({ target }).catch(() => {});
         await Promise.all([
-          dispatch({
-            action: NavigationAction.OPEN,
-            data: {
-              activeParts: { main: [target] },
-            },
-          }),
-          dispatch({
-            action: NavigationAction.EXPOSE,
-            data: {
-              id: target,
-            },
-          }),
+          dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [target] } })),
+          dispatch(createIntent(NavigationAction.Expose, { id: target })),
         ]);
       }
 
       await onDone?.(result);
 
       if (space) {
-        await dispatch({
-          action: ObservabilityAction.SEND_EVENT,
-          data: {
-            name: 'space.join',
-            properties: {
-              spaceId: space.id,
-            },
-          },
-        });
+        await dispatch(
+          createIntent(ObservabilityAction.SendEvent, { name: 'space.join', properties: { spaceId: space.id } }),
+        );
       }
     },
     [dispatch, spaces],

package/src/components/PersistenceStatus.tsx

@@ -76,7 +76,7 @@ export const PersistenceStatus = ({ db }: { db: EchoDatabase }) => {
             )}
           </Tooltip.Trigger>
           <Tooltip.Portal>
-            <Tooltip.Content classNames='z-10'>
+            <Tooltip.Content>
               {t('persisted locally message')}
               <Tooltip.Arrow />
             </Tooltip.Content>

package/src/components/PopoverRenameObject.tsx

@@ -10,6 +10,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_OBJECT = `${SPACE_PLUGIN}/PopoverRenameObject`;
+
 export const PopoverRenameObject = ({ object: obj }: { object: ReactiveObject<any> }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/PopoverRenameSpace.tsx

@@ -9,6 +9,8 @@ import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 
 import { SPACE_PLUGIN } from '../meta';
 
+export const POPOVER_RENAME_SPACE = `${SPACE_PLUGIN}/PopoverRenameSpace`;
+
 export const PopoverRenameSpace = ({ space }: { space: Space }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
   const doneButton = useRef<HTMLButtonElement>(null);

package/src/components/ShareSpaceButton.tsx

@@ -4,16 +4,17 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { type Space } from '@dxos/react-client/echo';
 import { IconButton, useTranslation } from '@dxos/react-ui';
 
-import { SPACE_PLUGIN, SpaceAction } from '../meta';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction } from '../types';
 
 export const ShareSpaceButton = ({ space }: { space: Space }) => {
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
-  return <ShareSpaceButtonImpl onClick={() => dispatch({ action: SpaceAction.SHARE, data: { space } })} />;
+  return <ShareSpaceButtonImpl onClick={() => dispatch(createIntent(SpaceAction.Share, { space }))} />;
 };
 
 // TODO(wittjosiah): Better way to name pure/impure components?

package/src/components/SpacePluginSettings.tsx

@@ -4,29 +4,23 @@
 
 import React from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { Input, useTranslation } from '@dxos/react-ui';
 import { DeprecatedFormInput } from '@dxos/react-ui-form';
 
-import { SpaceAction, SPACE_PLUGIN } from '../meta';
-import { type SpaceSettingsProps } from '../types';
+import { SPACE_PLUGIN } from '../meta';
+import { SpaceAction, type SpaceSettingsProps } from '../types';
 
 export const SpacePluginSettings = ({ settings }: { settings: SpaceSettingsProps }) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   return (
     <>
       <DeprecatedFormInput label={t('show hidden spaces label')}>
         <Input.Switch
           checked={settings.showHidden}
-          onCheckedChange={(checked) =>
-            dispatch({
-              plugin: SPACE_PLUGIN,
-              action: SpaceAction.TOGGLE_HIDDEN,
-              data: { state: !!checked },
-            })
-          }
+          onCheckedChange={(checked) => dispatch(createIntent(SpaceAction.ToggleHidden, { state: !!checked }))}
         />
       </DeprecatedFormInput>
     </>

package/src/components/SpacePresence.stories.tsx

@@ -61,30 +61,38 @@ export const Full = (props: MemberPresenceProps) => {
   );
 };
 
-export const Small = (props: MemberPresenceProps) => {
-  const p: MemberPresenceProps = {
-    ...props,
-  };
-
+export const Small = () => {
   return (
     <div className='p-4'>
-      <div className='p-3'>
-        <SmallPresence count={0} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={0} />
+        <SmallPresence count={0} attended />
+        <SmallPresence count={0} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={1} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={1} />
+        <SmallPresence count={1} attended />
+        <SmallPresence count={1} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={2} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={2} />
+        <SmallPresence count={2} attended />
+        <SmallPresence count={2} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={3} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={3} />
+        <SmallPresence count={3} attended />
+        <SmallPresence count={3} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={4} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={4} />
+        <SmallPresence count={4} attended />
+        <SmallPresence count={4} containsAttended />
       </div>
-      <div className='p-3'>
-        <SmallPresence count={5} {...p} />
+      <div className='flex gap-3 p-3'>
+        <SmallPresence count={5} />
+        <SmallPresence count={5} attended />
+        <SmallPresence count={5} containsAttended />
       </div>
     </div>
   );

package/src/components/SpacePresence.tsx

@@ -7,6 +7,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { usePlugin } from '@dxos/app-framework';
 import { generateName } from '@dxos/display-name';
 import { type Expando } from '@dxos/echo-schema';
+import { useGraph } from '@dxos/plugin-graph';
 import { PublicKey, useClient } from '@dxos/react-client';
 import { getSpace, useMembers, type SpaceMember, fullyQualifiedId } from '@dxos/react-client/echo';
 import { type Identity, useIdentity } from '@dxos/react-client/halo';
@@ -22,9 +23,10 @@ import {
   ListItem,
   useDefaultValue,
 } from '@dxos/react-ui';
-import { AttentionGlyph, useAttention } from '@dxos/react-ui-attention';
+import { AttentionGlyph, useAttended, useAttention, type AttentionGlyphProps } from '@dxos/react-ui-attention';
 import { ComplexMap, keyToFallback } from '@dxos/util';
 
+import { usePath } from '../hooks';
 import { SPACE_PLUGIN } from '../meta';
 import type { ObjectViewerProps, SpacePluginProvides } from '../types';
 
@@ -194,16 +196,30 @@ const PrensenceAvatar = ({ identity, showName, match, group, index, onClick }: P
   );
 };
 
-export const SmallPresenceLive = ({
-  id,
-  viewers,
-}: {
+export type SmallPresenceLiveProps = {
   id?: string;
+  open?: boolean;
   viewers?: ComplexMap<PublicKey, ObjectViewerProps>;
-}) => {
+};
+
+export const SmallPresenceLive = ({ id, open, viewers }: SmallPresenceLiveProps) => {
+  const { hasAttention, isAncestor, isRelated } = useAttention(id);
+  const isAttended = hasAttention || isAncestor || isRelated;
+
+  // TODO(wittjosiah): If the attended node is deep in the graph and the graph is not fully loaded
+  //   this will result in an empty path until the graph is connected.
+  // TODO(wittjosiah): Consider using this indicator for all open nodes instead of just attended.
+  const { graph } = useGraph();
+  const attended = useAttended();
+  const startOfAttention = attended.at(-1);
+  const path = usePath(graph, startOfAttention);
+  const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
+
   const getActiveViewers = (viewers: ComplexMap<PublicKey, ObjectViewerProps>): ObjectViewerProps[] => {
     const moment = Date.now();
-    return Array.from(viewers.values()).filter(({ lastSeen }) => moment - lastSeen < ACTIVITY_DURATION);
+    return Array.from<ObjectViewerProps>(viewers.values()).filter(
+      (viewer) => moment - viewer.lastSeen < ACTIVITY_DURATION,
+    );
   };
 
   const [activeViewers, setActiveViewers] = useState(viewers ? getActiveViewers(viewers) : []);
@@ -218,24 +234,28 @@ export const SmallPresenceLive = ({
     }
   }, [viewers]);
 
-  return <SmallPresence id={id} count={activeViewers.length} />;
+  return <SmallPresence count={activeViewers.length} attended={isAttended} containsAttended={containsAttended} />;
 };
 
-export const SmallPresence = ({ id, count }: { id?: string; count: number }) => {
+export type SmallPresenceProps = {
+  count?: number;
+} & Pick<AttentionGlyphProps, 'attended' | 'containsAttended'>;
+
+export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPresenceProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { hasAttention, isAncestor, isRelated } = useAttention(id);
-  const attention = hasAttention || isAncestor || isRelated;
 
   return (
     <Tooltip.Root>
       <Tooltip.Trigger asChild>
-        {/* TODO(wittjosiah): Don't depend on data attribute just pass prop to AttentionGlyph. */}
-        <div role='none' className='flex' data-attention={attention}>
-          <AttentionGlyph presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'} classNames='self-center mie-1' />
-        </div>
+        <AttentionGlyph
+          attended={attended}
+          containsAttended={containsAttended}
+          presence={count > 1 ? 'many' : count === 1 ? 'one' : 'none'}
+          classNames='self-center mie-1'
+        />
       </Tooltip.Trigger>
       <Tooltip.Portal>
-        <Tooltip.Content side='bottom' classNames='z-[70]'>
+        <Tooltip.Content side='bottom'>
           <span>{t('presence label', { count })}</span>
           <Tooltip.Arrow />
         </Tooltip.Content>

package/src/components/SpaceSettings/SpaceSettingsDialog.stories.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
-import { useStoryClientData, withClientProvider } from '@dxos/react-client/testing';
+import { useClientProvider, withClientProvider } from '@dxos/react-client/testing';
 import { Dialog } from '@dxos/react-ui';
 import { osTranslations } from '@dxos/shell/react';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -16,8 +16,7 @@ import { SpaceSettingsDialog, type SpaceSettingsDialogProps } from './SpaceSetti
 import translations from '../../translations';
 
 const Story = (args: Partial<SpaceSettingsDialogProps>) => {
-  const { space } = useStoryClientData();
-
+  const { space } = useClientProvider();
   return (
     <Dialog.Root open>
       <Dialog.Overlay blockAlign='start'>