@dxos/plugin-space 0.8.2-main.f11618f → 0.8.2-staging.7ac8446

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,180 +2,62 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema as S } from 'effect';
-import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { log } from '@dxos/log';
-import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
-import { useClient } from '@dxos/react-client';
-import { SpaceState, type Space } from '@dxos/react-client/echo';
-import { Button, Input, useMulticastObservable, useTranslation } from '@dxos/react-ui';
-import {
-  Form,
-  type InputComponent,
-  ControlItem,
-  ControlItemInput,
-  ControlSection,
-  ControlPage,
-} from '@dxos/react-ui-form';
-import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
+import { Surface, useCapabilities, useCapability } from '@dxos/app-framework';
+import { type Space } from '@dxos/react-client/echo';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { ControlSectionHeading } from '@dxos/react-ui-form';
+import { Accordion } from '@dxos/react-ui-list';
 import { StackItem } from '@dxos/react-ui-stack';
+import { byPosition } from '@dxos/util';
 
+import { SpaceCapabilities } from '../../capabilities';
 import { SPACE_PLUGIN } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
 
-const FormSchema = SpaceForm.pipe(S.extend(S.Struct({ archived: S.Boolean.annotations({ title: 'Archive space' }) })));
+export const SPACE_SETTINGS_DIALOG = `${SPACE_PLUGIN}/SpaceSettingsDialog`;
+
+export type SpaceSettingsTab = 'members' | 'settings';
 
 export type SpaceSettingsContainerProps = {
   space: Space;
 };
 
-// TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
   const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const client = useClient();
-  const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
-  const [edgeReplication, setEdgeReplication] = useState(
-    space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED,
-  );
-  const toggleEdgeReplication = useCallback(
-    async (next: boolean) => {
-      setEdgeReplication(next);
-      await space?.internal
-        .setEdgeReplicationPreference(next ? EdgeReplicationSetting.ENABLED : EdgeReplicationSetting.DISABLED)
-        .catch((err: unknown) => {
-          log.catch(err);
-          setEdgeReplication(!next);
-        });
-    },
-    [space],
-  );
+  const state = useCapability(SpaceCapabilities.MutableState);
+  const items = useCapabilities(SpaceCapabilities.SettingsSection).toSorted(byPosition);
+  const data = useMemo(() => ({ subject: space }), [space]);
 
-  const handleSave = useCallback(
-    (properties: S.Schema.Type<typeof FormSchema>) => {
-      void toggleEdgeReplication(properties.edgeReplication);
-      if (properties.name !== space.properties.name) {
-        space.properties.name = properties.name;
-      }
-      if (properties.icon !== space.properties.icon) {
-        space.properties.icon = properties.icon;
-      }
-      if (properties.hue !== space.properties.hue) {
-        space.properties.hue = properties.hue;
-      }
-      if (properties.archived && !archived) {
-        void dispatch(
-          pipe(
-            createIntent(SpaceAction.Close, { space }),
-            chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
-          ),
-        );
-      } else if (!properties.archived && archived) {
-        void dispatch(createIntent(SpaceAction.Open, { space }));
-      }
+  const handleOpenSectionChange = useCallback(
+    (sections: string[]) => {
+      state.spaceSettingsOpenSections.splice(0, state.spaceSettingsOpenSections.length, ...sections);
     },
-    [space, toggleEdgeReplication, archived],
-  );
-
-  const values = useMemo(
-    () => ({
-      name: space.properties.name,
-      icon: space.properties.icon,
-      hue: space.properties.hue,
-      edgeReplication,
-      archived,
-    }),
-    [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
-  );
-
-  const customElements: Partial<Record<string, InputComponent>> = useMemo(
-    () => ({
-      name: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(
-          ({ target: { value } }: ChangeEvent<HTMLInputElement>) => onValueChange(type, value),
-          [onValueChange, type],
-        );
-        return (
-          <ControlItemInput title={label} description={t('display name description')}>
-            <Input.TextInput
-              value={getValue()}
-              onChange={handleChange}
-              placeholder={t('display name input placeholder')}
-              classNames='min-is-64'
-            />
-          </ControlItemInput>
-        );
-      },
-      icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
-        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('icon description')}>
-            <IconPicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleEmojiReset}
-              classNames='justify-self-end'
-              iconSize={5}
-            />
-          </ControlItem>
-        );
-      },
-      hue: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
-        return (
-          <ControlItem title={label} description={t('hue description')}>
-            <HuePicker
-              value={getValue()}
-              onChange={handleChange}
-              onReset={handleHueReset}
-              classNames='[--hue-preview-size:1.25rem] justify-self-end'
-            />
-          </ControlItem>
-        );
-      },
-      edgeReplication: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
-        return (
-          <ControlItemInput title={label} description={t('edge replication description')}>
-            <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </ControlItemInput>
-        );
-      },
-      archived: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback(() => onValueChange(type, !getValue()), [onValueChange, type, getValue]);
-        return (
-          <ControlItemInput title={label} description={t('archive space description')}>
-            <Button disabled={space === client.spaces.default} onClick={handleChange}>
-              {getValue() ? t('unarchive space label') : t('archive space label')}
-            </Button>
-          </ControlItemInput>
-        );
-      },
-    }),
-    [t, space],
+    [state],
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto pli-2'>
-      <ControlPage>
-        <ControlSection
-          title={t('space properties settings verbose label', { ns: SPACE_PLUGIN })}
-          description={t('space properties settings description', { ns: SPACE_PLUGIN })}
-        >
-          <Form
-            schema={FormSchema}
-            values={values}
-            autoSave
-            onSave={handleSave}
-            Custom={customElements}
-            classNames='p-0 container-max-width [&_[role="form"]]:grid [&_[role="form"]]:grid-cols-1 md:[&_[role="form"]]:grid-cols-[1fr_min-content] [&_[role="form"]]:gap-4'
-          />
-        </ControlSection>
-      </ControlPage>
+    <StackItem.Content classNames='p-2 block overflow-y-auto'>
+      <Accordion.Root<SpaceCapabilities.SettingsSection>
+        items={items}
+        value={state.spaceSettingsOpenSections}
+        onValueChange={handleOpenSectionChange}
+      >
+        {({ items }) => (
+          <>
+            {items.map((item) => (
+              <Accordion.Item key={item.id} item={item} classNames='container-max-width'>
+                <Accordion.ItemHeader classNames='pie-6' asChild>
+                  <ControlSectionHeading title={toLocalizedString(item.label, t)} />
+                </Accordion.ItemHeader>
+                <Accordion.ItemBody>
+                  <Surface role={`space-settings--${item.id}`} data={data} />
+                </Accordion.ItemBody>
+              </Accordion.Item>
+            ))}
+          </>
+        )}
+      </Accordion.Root>
     </StackItem.Content>
   );
 };

package/src/components/SpaceSettings/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './SpacePropertiesForm';
 export * from './SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -5,19 +5,21 @@
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
-import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
+import { QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
-import { type Space, useSpaceSyncState } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
+import { useSpaceSyncState } from './sync-state';
 import { usePath } from '../../hooks';
 import { SPACE_PLUGIN } from '../../meta';
 
-const useEdgeStatus = (): EdgeStatus => {
-  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): QueryEdgeStatusResponse.EdgeStatus => {
+  const [status, setStatus] = useState(QueryEdgeStatusResponse.EdgeStatus.NOT_CONNECTED);
   const client = useClient();
+
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
       setStatus(status);
@@ -42,7 +44,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const path = usePath(graph, startOfAttention);
   const containsAttended = !open && !isAttended && id && path ? path.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === QueryEdgeStatusResponse.EdgeStatus.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);

package/src/components/SyncStatus/Space.tsx

@@ -0,0 +1,133 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { type HTMLAttributes, useEffect, useState } from 'react';
+
+import { useClient } from '@dxos/react-client';
+import { type SpaceId, useSpace } from '@dxos/react-client/echo';
+import { Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+import { type Progress, type PeerSyncState } from './sync-state';
+import { SPACE_PLUGIN } from '../../meta';
+import { getSpaceDisplayName } from '../../util';
+
+export const SYNC_STALLED_TIMEOUT = 5_000;
+
+// TODO(wittjosiah): Define sematic color tokens.
+const styles = {
+  barBg: 'bg-neutral-50 dark:bg-green-900 text-black',
+  barFg: 'bg-neutral-100 bg-green-500',
+  barHover: 'dark:hover:bg-green-500',
+};
+
+const useActive = (count: number) => {
+  const [current, setCurrent] = useState(count);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    let t: NodeJS.Timeout | undefined;
+    if (count !== current) {
+      setActive(true);
+      setCurrent(count);
+      t && clearTimeout(t);
+      t = setTimeout(() => {
+        setActive(false);
+      }, SYNC_STALLED_TIMEOUT);
+    }
+
+    return () => {
+      setActive(false);
+      clearTimeout(t);
+    };
+  }, [count, current]);
+  return active;
+};
+
+export type SpaceRowContainerProps = Omit<SpaceRowProps, 'spaceName'>;
+
+export const SpaceRowContainer = ({ spaceId, state }: SpaceRowContainerProps) => {
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const client = useClient();
+  const space = useSpace(spaceId);
+  if (!space) {
+    return null;
+  }
+
+  const spaceName = toLocalizedString(getSpaceDisplayName(space, { personal: space === client.spaces.default }), t);
+
+  return <SpaceRow spaceId={spaceId} spaceName={spaceName} state={state} />;
+};
+
+export type SpaceRowProps = {
+  spaceId: SpaceId;
+  spaceName: string;
+  state: PeerSyncState;
+};
+
+export const SpaceRow = ({
+  spaceId,
+  spaceName,
+  state: { localDocumentCount, remoteDocumentCount, missingOnLocal, missingOnRemote },
+}: SpaceRowProps) => {
+  const downActive = useActive(localDocumentCount);
+  const upActive = useActive(remoteDocumentCount);
+
+  return (
+    <div
+      className='flex items-center mx-0.5 gap-0.5 cursor-pointer'
+      title={spaceId}
+      onClick={() => {
+        void navigator.clipboard.writeText(spaceId);
+      }}
+    >
+      <span className='is-1/2 truncate'>{spaceName}</span>
+      <Icon
+        icon='ph--arrow-fat-line-left--regular'
+        size={3}
+        classNames={mx(downActive && 'animate-[pulse_1s_infinite]')}
+      />
+      <Candle
+        up={{ count: remoteDocumentCount, total: remoteDocumentCount + missingOnRemote }}
+        down={{ count: localDocumentCount, total: localDocumentCount + missingOnLocal }}
+        title={spaceId}
+      />
+      <Icon
+        icon='ph--arrow-fat-line-right--regular'
+        size={3}
+        classNames={mx(upActive && 'animate-[pulse_1s_step-start_infinite]')}
+      />
+    </div>
+  );
+};
+
+type CandleProps = ThemedClassName<Pick<HTMLAttributes<HTMLDivElement>, 'title'>> & { up: Progress; down: Progress };
+
+const Candle = ({ classNames, up, down }: CandleProps) => {
+  return (
+    <div className={mx('grid grid-cols-[1fr_2rem_1fr] w-full h-3', classNames)}>
+      <Bar classNames='justify-end' {...up} />
+      <div className='relative'>
+        <div className={mx('absolute inset-0 flex items-center justify-center text-xs', styles.barBg)}>{up.total}</div>
+      </div>
+      <Bar {...down} />
+    </div>
+  );
+};
+
+const Bar = ({ classNames, count, total }: ThemedClassName<Progress>) => {
+  let p = (count / total) * 100;
+  if (count < total) {
+    p = Math.min(p, 95);
+  }
+
+  return (
+    <div className={mx('relative flex w-full', styles.barBg, classNames)}>
+      <div className={mx('shrink-0', styles.barFg)} style={{ width: `${p}%` }}></div>
+      {count !== total && (
+        <div className='absolute top-0 bottom-0 flex items-center mx-0.5 text-black text-xs'>{count}</div>
+      )}
+    </div>
+  );
+};

package/src/components/SyncStatus/SyncStatus.tsx

@@ -2,19 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { useClient } from '@dxos/react-client';
-import { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { type SpaceId } from '@dxos/react-client/echo';
+import { Icon, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
+import { mx } from '@dxos/react-ui-theme';
 
+import { SpaceRowContainer, SYNC_STALLED_TIMEOUT } from './Space';
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
+import { type PeerSyncState, type SpaceSyncStateMap, getSyncSummary, useSyncState } from './sync-state';
 import { SPACE_PLUGIN } from '../../meta';
 
-const SYNC_STALLED_TIMEOUT = 5_000;
-
 export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
@@ -54,5 +57,65 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   const title = t(`${status} label`);
   const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
 
-  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+  if (offline) {
+    return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+  } else {
+    return (
+      <Popover.Root>
+        <Popover.Trigger asChild>
+          <StatusBar.Button title={title}>{icon}</StatusBar.Button>
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content>
+            <SyncStatusDetail state={state} summary={summary} debug={false} />
+            <Popover.Arrow />
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    );
+  }
+};
+
+export type SyncStatusDetailProps = ThemedClassName<{
+  state: SpaceSyncStateMap;
+  summary: PeerSyncState;
+  debug?: boolean;
+}>;
+
+// TODO(wittjosiah): This currently does not show `differentDocuments` at all.
+export const SyncStatusDetail = ({ classNames, state, summary, debug }: SyncStatusDetailProps) => {
+  const [showAll, setShowAll] = useState(false);
+  const { t } = useTranslation(SPACE_PLUGIN);
+  const entries = Object.entries(state)
+    .filter(([_, value]) => showAll || value.missingOnLocal + value.missingOnRemote > 0)
+    .toSorted(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0));
+
+  const handleCheckedChange = useCallback((state: boolean) => setShowAll(state), [setShowAll]);
+
+  // TODO(burdon): Normalize to max document count?
+  return (
+    <div className={mx('flex flex-col gap-3 p-2 text-xs min-w-[400px]', classNames)}>
+      <div role='none' className='flex items-center'>
+        <h1 className='flex-1'>{t('sync status title')}</h1>
+        <div className='flex items-center gap-2'>
+          <Input.Root>
+            <Input.Label classNames='text-xs'>{t('show all label')}</Input.Label>
+            <Input.Checkbox checked={showAll} onCheckedChange={handleCheckedChange} />
+          </Input.Root>
+        </div>
+      </div>
+      <div className='flex flex-col gap-2'>
+        {entries.length === 0 && (
+          <div role='none' className='flex justify-center'>
+            {/* TODO(wittjosiah): This text should be updated once status includes different documents. */}
+            {t('no sync status label')}
+          </div>
+        )}
+        {entries.map(([spaceId, state]) => (
+          <SpaceRowContainer key={spaceId} spaceId={spaceId as SpaceId} state={state} />
+        ))}
+      </div>
+      {debug && <SyntaxHighlighter language='json'>{JSON.stringify(summary, null, 2)}</SyntaxHighlighter>}
+    </div>
+  );
 };

package/src/components/SyncStatus/SyncStatusDetail.stories.tsx

@@ -0,0 +1,89 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+
+import { type Client } from '@dxos/client';
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withTheme, withLayout } from '@dxos/storybook-utils';
+
+import { SyncStatusDetail } from './SyncStatus';
+import { getSyncSummary, type SpaceSyncStateMap } from './sync-state';
+import translations from '../../translations';
+
+const random = ({ min, max }: { min: number; max: number }) => min + Math.floor(Math.random() * (max - min));
+
+const createSpaceSyncStateMap = async (client: Client): Promise<SpaceSyncStateMap> => {
+  const spaces = await Promise.all(
+    Array.from({ length: 10 }).map(() => client.spaces.create({ name: faker.company.name() })),
+  );
+
+  return spaces.reduce<SpaceSyncStateMap>((map, space, i) => {
+    if (i > 4) {
+      const total = random({ min: 10, max: 500 });
+      map[space.id] = {
+        localDocumentCount: total,
+        remoteDocumentCount: total,
+        missingOnLocal: 0,
+        missingOnRemote: 0,
+        differentDocuments: 0,
+      };
+      return map;
+    }
+
+    const total = random({ min: 10, max: 500 });
+    const haveLocal = random({ min: 0, max: total });
+    const haveRemote = random({ min: 0, max: total });
+    map[space.id] = {
+      localDocumentCount: haveLocal,
+      remoteDocumentCount: haveRemote,
+      missingOnLocal: total - haveLocal,
+      missingOnRemote: total - haveRemote,
+      differentDocuments: 0,
+    };
+
+    return map;
+  }, {});
+};
+
+const meta: Meta<typeof SyncStatusDetail> = {
+  title: 'plugins/plugin-space/SyncStatusDetail',
+  component: SyncStatusDetail,
+  decorators: [withTheme, withLayout(), withClientProvider({ createIdentity: true })],
+  parameters: {
+    translations,
+    layout: 'centered',
+  },
+  args: {
+    classNames: 'm-2 border border-separator rounded-md',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SyncStatusDetail>;
+
+export const Default: Story = {
+  render: (args) => {
+    return <SyncStatusDetail {...args} state={{}} />;
+  },
+};
+
+export const Sync: Story = {
+  render: (args) => {
+    const client = useClient();
+    const [state, setState] = useState<SpaceSyncStateMap>({});
+    useAsyncEffect(async () => {
+      setState(await createSpaceSyncStateMap(client));
+    });
+
+    return <SyncStatusDetail {...args} state={state} summary={getSyncSummary(state)} />;
+  },
+};

package/src/components/SyncStatus/sync-state.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+import { type Space, type SpaceId, type SpaceSyncState } from '@dxos/client/echo';
+import { Context } from '@dxos/context';
+import { EdgeService } from '@dxos/protocols';
+import { useClient } from '@dxos/react-client';
+
+export type Progress = { count: number; total: number };
+
+export type PeerSyncState = Omit<SpaceSyncState.PeerState, 'peerId'>;
+
+export type SpaceSyncStateMap = Record<SpaceId, PeerSyncState>;
+
+export const createEmptyEdgeSyncState = (): PeerSyncState => ({
+  missingOnLocal: 0,
+  missingOnRemote: 0,
+  localDocumentCount: 0,
+  remoteDocumentCount: 0,
+  differentDocuments: 0,
+});
+
+export const getSyncSummary = (syncMap: SpaceSyncStateMap): PeerSyncState => {
+  return Object.entries(syncMap).reduce<PeerSyncState>((summary, [_spaceId, peerState]) => {
+    summary.missingOnLocal += peerState.missingOnLocal;
+    summary.missingOnRemote += peerState.missingOnRemote;
+    summary.localDocumentCount += peerState.localDocumentCount;
+    summary.remoteDocumentCount += peerState.remoteDocumentCount;
+    summary.differentDocuments += peerState.differentDocuments;
+    return summary;
+  }, createEmptyEdgeSyncState());
+};
+
+const isEdgePeerId = (peerId: string, spaceId: SpaceId) =>
+  peerId.startsWith(`${EdgeService.AUTOMERGE_REPLICATOR}:${spaceId}`);
+
+/**
+ * Hook Subscribes to sync state for each space.
+ */
+export const useSyncState = (): SpaceSyncStateMap => {
+  const client = useClient();
+  const [spaceState, setSpaceState] = useState<SpaceSyncStateMap>({});
+
+  useEffect(() => {
+    const ctx = new Context();
+    const createSubscriptions = (spaces: Space[]) => {
+      for (const space of spaces) {
+        if (spaceState[space.id]) {
+          continue;
+        }
+
+        ctx.onDispose(
+          space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+            const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
+            if (syncState) {
+              setSpaceState((spaceState) => ({ ...spaceState, [space.id]: syncState }));
+            }
+          }),
+        );
+      }
+    };
+
+    createSubscriptions(client.spaces.get());
+    client.spaces.subscribe((spaces) => {
+      createSubscriptions(spaces);
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [client]);
+
+  return spaceState;
+};
+
+/**
+ * Hook Subscribes to sync state for a single space.
+ */
+// TODO(wittjosiah): Reconcile w/ useSyncState.
+export const useSpaceSyncState = (space: Space): PeerSyncState | undefined => {
+  const [spaceState, setSpaceState] = useState<PeerSyncState>();
+
+  useEffect(() => {
+    const ctx = new Context();
+    space.crud.subscribeToSyncState(ctx, ({ peers = [] }) => {
+      const syncState = peers.find((state) => isEdgePeerId(state.peerId, space.id));
+      if (syncState) {
+        setSpaceState(syncState);
+      }
+    });
+
+    return () => {
+      void ctx.dispose();
+    };
+  }, [space]);
+
+  return spaceState;
+};