@dxos/plugin-space 0.10.0 → 0.11.1

package/src/containers/SpaceHomeRecent/SpaceHomeRecent.tsx

@@ -5,12 +5,13 @@
 import * as Option from 'effect/Option';
 import React, { useCallback, useMemo } from 'react';
 
-import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppCapabilities, LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { HomeSection, useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { AppCapabilities, GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { Collection, Filter, Obj, Order, Query, Type } from '@dxos/echo';
+import { useQuery } from '@dxos/echo-react';
 import { HiddenAnnotation, getTypeAnnotation } from '@dxos/echo/Annotation';
 import { Kind as EntityKind } from '@dxos/echo/Entity';
-import { type Space, useQuery } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { Card, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Masonry } from '@dxos/react-ui-masonry';
 import { getStyles } from '@dxos/ui-theme';
@@ -22,6 +23,7 @@ const RECENT_LIMIT = 10;
 
 type SpaceScopedProps = {
   space?: Space;
+  onClose?: () => void;
 };
 
 /**
@@ -30,7 +32,7 @@ type SpaceScopedProps = {
  * tiles. Renders nothing (no heading) when the space has no recent objects — the starter-prompt
  * contributor (plugin-assistant) fills the empty state instead.
  */
-export const SpaceHomeRecent = ({ space }: SpaceScopedProps) => {
+export const SpaceHomeRecent = ({ space, onClose }: SpaceScopedProps) => {
   const { t } = useTranslation(meta.profile.key);
 
   const schemas = useCapabilities(AppCapabilities.Schema);
@@ -59,16 +61,14 @@ export const SpaceHomeRecent = ({ space }: SpaceScopedProps) => {
   }
 
   return (
-    <div className='flex justify-center w-full'>
-      <div className='flex flex-col w-full max-w-[40rem]'>
-        <h2 className='text-sm font-medium text-description'>{t('space-home.recent.heading')}</h2>
-        <Masonry.Root Tile={RecentObjectTile}>
-          <Masonry.Content classNames='pt-trim-sm' padding={false} scrollbars={false}>
-            <Masonry.Viewport items={recent} getId={(object) => object.id} />
-          </Masonry.Content>
-        </Masonry.Root>
-      </div>
-    </div>
+    <HomeSection.Root>
+      <HomeSection.Header title={t('space-home.recent.heading')} onClose={onClose} />
+      <Masonry.Root Tile={RecentObjectTile}>
+        <Masonry.Content padding={false} scrollbars={false}>
+          <Masonry.Viewport items={recent} getId={(object) => object.id} />
+        </Masonry.Content>
+      </Masonry.Root>
+    </HomeSection.Root>
   );
 };
 
@@ -85,7 +85,7 @@ const RecentObjectTile = ({ data }: { data: Obj.Unknown; index: number }) => {
   const iconStyles = iconAnnotation?.hue ? getStyles(iconAnnotation.hue) : undefined;
 
   const handleClick = useCallback(() => {
-    void invokePromise(LayoutOperation.Open, { subject: [Paths.getObjectPathFromObject(data)] });
+    void invokePromise(LayoutOperation.Open, { subject: [GraphPath.getObjectPathFromObject(data)] });
   }, [invokePromise, data]);
 
   return (
@@ -101,3 +101,5 @@ const RecentObjectTile = ({ data }: { data: Obj.Unknown; index: number }) => {
 };
 
 RecentObjectTile.displayName = 'RecentObjectTile';
+
+SpaceHomeRecent.displayName = 'SpaceHomeRecent';

package/src/containers/SpacePresence/SpacePresence.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { IdentityDid, PublicKey } from '@dxos/keys';
-import { HaloSpaceMember, SpaceMember } from '@dxos/react-client/echo';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '#translations';
@@ -15,9 +14,10 @@ import { FullPresence, type Member, type MemberPresenceProps, SmallPresence } fr
 
 const viewers = (n: number, currentlyAttended = true): Member[] =>
   Array.from({ length: n }, () => ({
-    role: HaloSpaceMember.Role.ADMIN,
-    identity: { did: IdentityDid.random(), identityKey: PublicKey.random() },
-    presence: SpaceMember.PresenceState.ONLINE,
+    role: 'admin',
+    did: IdentityDid.random(),
+    identityKey: PublicKey.random().toHex(),
+    online: true,
     lastSeen: Date.now(),
     currentlyAttended,
   }));

package/src/containers/SpacePresence/SpacePresence.tsx

@@ -7,9 +7,10 @@ import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { useAtomCapability } from '@dxos/app-framework/ui';
 import { generateName } from '@dxos/display-name';
 import { type Key, Obj } from '@dxos/echo';
-import { PublicKey } from '@dxos/react-client';
-import { type SpaceMember, useMembers, useSpace } from '@dxos/react-client/echo';
-import { type Identity, useIdentity } from '@dxos/react-client/halo';
+import { type Space } from '@dxos/halo';
+import { useIdentity, useMembers } from '@dxos/halo-react';
+import { PublicKey } from '@dxos/keys';
+import { useSpace } from '@dxos/react-client/echo';
 import {
   Avatar,
   type AvatarContentProps,
@@ -23,7 +24,7 @@ import {
 } from '@dxos/react-ui';
 import { AttentionGlyph, type AttentionGlyphProps, useAttention } from '@dxos/react-ui-attention';
 import { Listbox } from '@dxos/react-ui-list';
-import { ComplexMap, keyToFallback } from '@dxos/util';
+import { ComplexMap, hexToFallback } from '@dxos/util';
 
 import { meta } from '#meta';
 import { type ObjectViewerProps, SpaceCapabilities } from '#types';
@@ -36,7 +37,7 @@ const ACTIVITY_DURATION = 30_000;
 const noViewers = new ComplexMap<PublicKey, ObjectViewerProps>(PublicKey.hash);
 
 // TODO(wittjosiah): Factor out?
-const getName = (identity: Identity) => identity.profile?.displayName ?? generateName(identity.identityKey.toHex());
+const getName = (member: Space.Member) => member.displayName ?? generateName(member.identityKey ?? '0');
 
 export type SpacePresenceProps = {
   object: Obj.Unknown;
@@ -58,9 +59,9 @@ export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
     return () => clearInterval(interval);
   }, []);
 
-  const memberOnline = useCallback((member: SpaceMember) => member.presence === 1, []);
+  const memberOnline = useCallback((member: Space.Member) => member.online, []);
   const memberIsNotSelf = useCallback(
-    (member: SpaceMember) => !identity?.identityKey.equals(member.identity.identityKey),
+    (member: Space.Member) => identity?.identityKey !== member.identityKey,
     [identity?.identityKey],
   );
 
@@ -74,24 +75,27 @@ export const SpacePresence = ({ object, spaceId }: SpacePresenceProps) => {
 
   const membersForObject = spaceMembers
     .filter((member) => memberOnline(member) && memberIsNotSelf(member))
-    .filter((member) => currentObjectViewers.has(member.identity.identityKey))
-    .map((member) => {
-      const objectView = currentObjectViewers.get(member.identity.identityKey);
-      const lastSeen = objectView?.lastSeen ?? -Infinity;
-      const currentlyAttended = objectView?.currentlyAttended ?? false;
-
-      return {
-        ...member,
-        currentlyAttended,
-        lastSeen,
-      };
+    .flatMap((member) => {
+      // Presence viewers are keyed by `PublicKey`; the HALO member carries a hex identity key.
+      const memberKey = member.identityKey ? PublicKey.fromHex(member.identityKey) : undefined;
+      const objectView = memberKey ? currentObjectViewers.get(memberKey) : undefined;
+      if (!objectView) {
+        return [];
+      }
+      return [
+        {
+          ...member,
+          currentlyAttended: objectView.currentlyAttended ?? false,
+          lastSeen: objectView.lastSeen ?? -Infinity,
+        },
+      ];
     })
     .toSorted((a, b) => a.lastSeen - b.lastSeen);
 
   return <FullPresence members={membersForObject} />;
 };
 
-export type Member = SpaceMember & {
+export type Member = Space.Member & {
   /**
    * Last time a member was seen on this object.
    */
@@ -118,13 +122,13 @@ export const FullPresence = (props: MemberPresenceProps) => {
     <div className='dx-avatar-group' data-testid='spacePlugin.presence'>
       {members.slice(0, 3).map((member, i) => (
         <Tooltip.Trigger
-          key={member.identity.identityKey.toHex()}
+          key={member.identityKey}
           side='bottom'
-          content={getName(member.identity)}
+          content={getName(member)}
           className='grid focus:outline-hidden'
         >
           <PresenceAvatar
-            identity={member.identity}
+            member={member}
             match={member.currentlyAttended} // TODO(Zan): Match always true now we're showing 'members viewing current object'.
             index={members.length - i}
             onClick={() => onMemberClick?.(member)}
@@ -154,19 +158,14 @@ export const FullPresence = (props: MemberPresenceProps) => {
                   <Listbox.Content aria-label='members'>
                     {members.map((member) => (
                       <Listbox.Item
-                        key={member.identity.identityKey.toHex()}
-                        id={member.identity.identityKey.toHex()}
+                        key={member.identityKey}
+                        id={member.identityKey ?? ''}
                         classNames='flex gap-2 items-center cursor-pointer mb-2'
                         onClick={() => onMemberClick?.(member)}
                         data-testid='identity-list-item'
                       >
                         {/* TODO(Zan): Match always true now we're showing 'members viewing current object'. */}
-                        <PresenceAvatar
-                          identity={member.identity}
-                          size={size}
-                          showName
-                          match={member.currentlyAttended}
-                        />
+                        <PresenceAvatar member={member} size={size} showName match={member.currentlyAttended} />
                       </Listbox.Item>
                     ))}
                   </Listbox.Content>
@@ -181,7 +180,7 @@ export const FullPresence = (props: MemberPresenceProps) => {
 };
 
 type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
-  identity: Identity;
+  member: Space.Member;
   showName?: boolean;
   match?: boolean;
   index?: number;
@@ -189,23 +188,23 @@ type PresenceAvatarProps = Pick<AvatarContentProps, 'size'> & {
 };
 
 const PresenceAvatar = forwardRef<DxAvatar, PresenceAvatarProps>(
-  ({ identity, showName, match, index, onClick, size }, forwardedRef) => {
+  ({ member, showName, match, index, onClick, size }, forwardedRef) => {
     const status = match ? 'current' : 'active';
-    const fallbackValue = keyToFallback(identity.identityKey);
+    const fallbackValue = hexToFallback(member.identityKey ?? '0');
     return (
       <Avatar.Root>
         <Avatar.Content
           status={status}
-          hue={identity.profile?.data?.hue || fallbackValue.hue}
+          hue={member.data?.hue || fallbackValue.hue}
           data-testid='spacePlugin.presence.member'
           data-status={status}
           size={size}
           {...(index ? { style: { zIndex: index } } : {})}
           onClick={onClick}
-          fallback={identity.profile?.data?.emoji || fallbackValue.emoji}
+          fallback={member.data?.emoji || fallbackValue.emoji}
           ref={forwardedRef}
         />
-        <Avatar.Label classNames={showName ? 'text-sm truncate px-2' : 'sr-only'}>{getName(identity)}</Avatar.Label>
+        <Avatar.Label classNames={showName ? 'text-sm truncate px-2' : 'sr-only'}>{getName(member)}</Avatar.Label>
       </Avatar.Root>
     );
   },
@@ -261,3 +260,5 @@ export const SmallPresence = ({ count = 0, attended, containsAttended }: SmallPr
     </Tooltip.Trigger>
   );
 };
+
+SpacePresence.displayName = 'SpacePresence';

package/src/containers/SpaceSettings/SpaceSettings.tsx

@@ -45,7 +45,7 @@ export const SpaceSettings = ({ spaces, onOpenSpaceSettings, settings, onSetting
               <Listbox.Root>
                 <Listbox.Content aria-label={t('settings.space-list.label')} classNames='w-full gap-trim-sm'>
                   {spaces?.map((space) => (
-                    <Listbox.Item key={space.id} id={space.id} classNames='w-full items-center'>
+                    <Listbox.Item key={space.id} id={space.id} classNames='w-full gap-2 items-center'>
                       {/* TODO(burdon): Should auto center and truncate; NOTE truncate doesn't work with flex grow. */}
                       <Listbox.ItemLabel classNames='min-h-0!'>
                         {toLocalizedString(
@@ -73,3 +73,5 @@ export const SpaceSettings = ({ spaces, onOpenSpaceSettings, settings, onSetting
     </Form.Root>
   );
 };
+
+SpaceSettings.displayName = 'SpaceSettings';

package/src/containers/SpaceSettingsContainer/SpaceSettingsContainer.tsx

@@ -6,7 +6,7 @@ import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
-import { AppSpace, LayoutOperation, Paths } from '@dxos/app-toolkit';
+import { AppSpace, GraphPath, LayoutOperation } from '@dxos/app-toolkit';
 import { AppSurface } from '@dxos/app-toolkit/ui';
 import { Obj } from '@dxos/echo';
 import { log } from '@dxos/log';
@@ -153,6 +153,8 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
     await Promise.all(repairs.map((repair) => repair({ space, isDefault: AppSpace.isPersonalSpace(space) })));
   }, [space, repairs]);
 
+  const handleResetHome = useCallback(() => AppSpace.resetHomeVisibility(space), [space]);
+
   const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
   // Wired to an onClick handler: must resolve (never reject) so it can't trigger an unhandled rejection.
   const handleDelete = useCallback(async () => {
@@ -161,7 +163,7 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
       setDeleteConfirmOpen(false);
       const personalSpace = AppSpace.getPersonalSpace(client);
       if (personalSpace) {
-        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: Paths.getSpacePath(personalSpace.id) });
+        void invokePromise(LayoutOperation.SwitchWorkspace, { subject: GraphPath.getSpacePath(personalSpace.id) });
       }
     } catch (err) {
       log.catch(err, { stage: 'delete: invocation rejected', spaceId: space.id });
@@ -229,6 +231,9 @@ export const SpaceSettingsContainer = ({ space }: AppSurface.SpaceArticleProps)
             <Form.Row label={t('repair-space.title')} description={t('repair-space.description')}>
               <Button onClick={handleRepair}>{t('repair-space.label')}</Button>
             </Form.Row>
+            <Form.Row label={t('reset-home.title')} description={t('reset-home.description')}>
+              <Button onClick={handleResetHome}>{t('reset-home.label')}</Button>
+            </Form.Row>
           </Form.Section>
 
           {!personal && (

package/src/containers/SyncStatus/SyncStatus.stories.tsx

@@ -3,14 +3,43 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { expect, within } from 'storybook/test';
 
+import { SpaceId } from '@dxos/keys';
+import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
+import { type PeerSyncState, type SpaceSyncStateMap } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
+import { STALLED_TIMEOUT } from '#hooks';
 import { translations } from '#translations';
 
 import { SyncStatusIndicator } from './SyncStatus';
 
+const createEdgeStatus = (props: Partial<EdgeStatus> = {}): EdgeStatus => ({
+  state: EdgeStatus.ConnectionState.CONNECTED,
+  rtt: 32,
+  uptime: 60_000,
+  rateBytesUp: 0,
+  rateBytesDown: 0,
+  messagesSent: 128,
+  messagesReceived: 256,
+  ...props,
+});
+
+const createSyncState = (props: Partial<PeerSyncState> = {}): SpaceSyncStateMap => ({
+  [SpaceId.random()]: {
+    missingOnLocal: 0,
+    missingOnRemote: 0,
+    localDocumentCount: 100,
+    remoteDocumentCount: 100,
+    differentDocuments: 0,
+    totalDocumentCount: 100,
+    unsyncedDocumentCount: 0,
+    ...props,
+  },
+});
+
 const meta = {
   title: 'plugins/plugin-space/containers/SyncStatusIndicator',
   component: SyncStatusIndicator,
@@ -27,8 +56,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    state: {},
+    state: createSyncState(),
     saved: true,
+    edgeStatus: createEdgeStatus(),
   },
 };
 
@@ -36,5 +66,54 @@ export const Saving: Story = {
   args: {
     state: {},
     saved: false,
+    edgeStatus: createEdgeStatus(),
+  },
+};
+
+export const Offline: Story = {
+  args: {
+    state: {},
+    saved: true,
+    edgeStatus: createEdgeStatus({ state: EdgeStatus.ConnectionState.NOT_CONNECTED }),
+  },
+};
+
+export const Downloading: Story = {
+  args: {
+    state: createSyncState({ missingOnLocal: 20, unsyncedDocumentCount: 20 }),
+    saved: true,
+    edgeStatus: createEdgeStatus({ rateBytesDown: 4_096 }),
+  },
+};
+
+/**
+ * Outstanding documents with no bytes moving: switches to the warning icon after the stall timeout.
+ */
+export const Stalled: Story = {
+  args: {
+    state: createSyncState({ missingOnLocal: 20, unsyncedDocumentCount: 20 }),
+    saved: true,
+    edgeStatus: createEdgeStatus(),
+  },
+  // The stall is only reported once the timer elapses; wait for it so a capture never lands on the interim state.
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const indicator = await canvas.findByRole(
+      'button',
+      { name: 'Replication stalled' },
+      { timeout: STALLED_TIMEOUT * 2 },
+    );
+    await expect(indicator).toBeVisible();
+  },
+};
+
+/**
+ * Outstanding documents with no connection.
+ */
+export const Disconnected: Story = {
+  args: {
+    state: createSyncState({ missingOnRemote: 20, unsyncedDocumentCount: 20 }),
+    saved: true,
+    edgeStatus: createEdgeStatus({ state: EdgeStatus.ConnectionState.NOT_CONNECTED }),
   },
 };

package/src/containers/SyncStatus/SyncStatus.tsx

@@ -4,73 +4,64 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { log } from '@dxos/log';
 import { StatusBar } from '@dxos/plugin-status-bar/components';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
-import { type QueryEdgeStatusResponse } from '@dxos/protocols/proto/dxos/client/services';
 import { useClient } from '@dxos/react-client';
-import { useStream } from '@dxos/react-client/devtools';
 import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
 import { Icon, IconButton, Popover, useTranslation } from '@dxos/react-ui';
 import { iconSize, mx } from '@dxos/ui-theme';
 import { Unit, type UnitFormat } from '@dxos/util';
 
 import { createClientSaveTracker, getIcon, getStatus } from '#components';
+import { useEdgeStatus, useStalled } from '#hooks';
 import { meta } from '#meta';
 
-const SYNC_STALLED_TIMEOUT = 5_000;
-
 export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
+  const edgeStatus = useEdgeStatus();
   const [saved, setSaved] = useState(true);
   useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
 
-  return <SyncStatusIndicator state={state} saved={saved} />;
+  return <SyncStatusIndicator state={state} saved={saved} edgeStatus={edgeStatus} />;
 };
 
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
+export const SyncStatusIndicator = ({
+  state,
+  saved,
+  edgeStatus,
+}: {
+  state: SpaceSyncStateMap;
+  saved: boolean;
+  edgeStatus: EdgeStatus;
+}) => {
   const { t } = useTranslation(meta.profile.key);
   const summary = getSyncSummary(state);
-  const offline = Object.values(state).length === 0;
+  // Absent peer sync state is indistinguishable from having no connection.
+  const offline = edgeStatus.state !== EdgeStatus.ConnectionState.CONNECTED || Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
   const needsToDownload = summary.differentDocuments > 0 || summary.missingOnLocal > 0;
-  const status = getStatus({ offline, saved, needsToUpload, needsToDownload });
-
-  const [classNames, setClassNames] = useState<string>();
-  useEffect(() => {
-    setClassNames(undefined);
-    if (offline || (!needsToUpload && !needsToDownload)) {
-      return;
-    }
-
-    const t = setTimeout(() => {
-      log.warn('sync stalled', { state });
-      setClassNames('text-error-text');
-    }, SYNC_STALLED_TIMEOUT);
-
-    return () => {
-      clearTimeout(t);
-      setClassNames(undefined);
-    };
-  }, [offline, needsToUpload, needsToDownload]);
+
+  // Documents left to reconcile; a change means replication advanced, so the stall timer restarts.
+  const outstanding = summary.differentDocuments + summary.missingOnLocal + summary.missingOnRemote;
+  // Bytes on the wire prove liveness while the document counts hold steady (e.g. one large document).
+  const transferring = edgeStatus.rateBytesUp + edgeStatus.rateBytesDown > 0;
+  const stalled = useStalled({ active: !offline && outstanding > 0 && !transferring, progress: outstanding });
+
+  const status = getStatus({ offline, saved, stalled, needsToUpload, needsToDownload });
+  const icon = getIcon(status);
 
   return (
     <Popover.Root>
       <Popover.Trigger asChild>
         <StatusBar.Item>
-          <IconButton
-            variant='ghost'
-            icon={getIcon(status)}
-            iconOnly
-            label={t(`${status}.label`)}
-            classNames={classNames}
-          />
+          {/* The icon and label carry the status; the indicator keeps a single colour in every state. */}
+          <IconButton variant='ghost' icon={icon} iconOnly label={t(`${status}.label`)} />
         </StatusBar.Item>
       </Popover.Trigger>
       <Popover.Portal>
-        <Popover.Content side='left' classNames=''>
-          <EdgeConnectionPopover />
+        <Popover.Content side='left'>
+          <EdgeConnectionPopover status={edgeStatus} />
           <Popover.Arrow />
         </Popover.Content>
       </Popover.Portal>
@@ -78,15 +69,12 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   );
 };
 
-const EdgeConnectionPopover = () => {
+const EdgeConnectionPopover = ({ status }: { status: EdgeStatus }) => {
   const { t } = useTranslation(meta.profile.key);
   const client = useClient();
-  const { status } = useStream(
-    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
-    {} as QueryEdgeStatusResponse,
-  );
 
-  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
+  const isConnected = status.state === EdgeStatus.ConnectionState.CONNECTED;
+  const edgeUrl = client.config.get('runtime.services.edge.url');
 
   return (
     <div className='flex flex-col gap-2 w-[240px] p-2' style={iconSize(4)}>
@@ -96,20 +84,20 @@ const EdgeConnectionPopover = () => {
           icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
           classNames={mx(isConnected ? 'text-success-text' : 'text-error-text animate-pulse')}
         />
-        <span className='font-medium text-sm'>
-          {isConnected ? t('sync-edge-connected.label') : t('sync-edge-disconnected.label')}
+        <span className='font-medium text-sm truncate' title={edgeUrl}>
+          {isConnected ? (edgeUrl ?? t('sync-edge-connected.label')) : t('sync-edge-disconnected.label')}
         </span>
       </div>
 
       {/* Connection Details */}
-      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
+      {!isConnected && (
         <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2'>
           <Icon icon='ph--cloud-x--regular' />
           <span className='text-description'>{t('sync-no-connection.label')}</span>
         </div>
       )}
 
-      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
+      {isConnected && (
         <div className='grid grid-cols-[min-content_1fr_min-content_min-content] gap-2 gap-y-1'>
           {/* Latency */}
           <div className='col-span-full grid grid-cols-subgrid gap-2 items-center text-sm'>
@@ -153,3 +141,5 @@ const UnitValue = ({ value: input, format, suffix }: { value: number; format: Un
     </span>
   );
 };
+
+SyncStatus.displayName = 'SyncStatus';