@dxos/plugin-space 0.8.4-main.a4bbb77 → 0.8.4-main.ae835ea

package/src/components/RecordMain.tsx

@@ -2,42 +2,82 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import React, { useMemo } from 'react';
 
-import { Obj } from '@dxos/echo';
-import { type JsonPath, setValue } from '@dxos/echo-schema';
-import { invariant } from '@dxos/invariant';
-import { getSpace } from '@dxos/react-client/echo';
-import { Form, useRefQueryLookupHandler } from '@dxos/react-ui-form';
+import { Surface } from '@dxos/app-framework';
+import { Filter, type Obj, Ref, Relation } from '@dxos/echo';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { Masonry } from '@dxos/react-ui-masonry';
+import { StackItem } from '@dxos/react-ui-stack';
+import { mx } from '@dxos/react-ui-theme';
+import { isNonNullable } from '@dxos/util';
 
-export const RecordMain = ({ record }: { record: Obj.Any }) => {
+import { meta } from '../meta';
+
+export type RecordMainProps = {
+  record: Obj.Any;
+};
+
+export const RecordMain = ({ record }: RecordMainProps) => {
+  const { t } = useTranslation(meta.id);
   const space = getSpace(record);
-  const schema = Obj.getSchema(record);
-  invariant(schema, 'Record has no schema.');
-
-  const handleRefQueryLookup = useRefQueryLookupHandler({ space });
-
-  const handleSave = useCallback(
-    (values: any, { changed }: { changed: Record<JsonPath, boolean> }) => {
-      const id = values.id;
-      invariant(typeof id === 'string');
-
-      const changedPaths = Object.keys(changed).filter((path) => changed[path as JsonPath]) as JsonPath[];
-      for (const path of changedPaths) {
-        const value = values[path];
-        setValue(record, path, value);
-      }
-    },
-    [record],
-  );
+  const data = useMemo(() => ({ subject: record }), [record]);
+
+  // TODO(wittjosiah): This is a hack. ECHO needs to have a back reference index to easily query for related objects.
+  const objects = useQuery(space, Filter.everything());
+  const related = useMemo(() => {
+    const relations = objects.filter((obj) => Relation.isRelation(obj));
+    const targetObjects = relations
+      .filter((relation) => Relation.getSource(relation) === record)
+      .map((relation) => Relation.getTarget(relation));
+    const sourceObjects = relations
+      .filter((relation) => Relation.getTarget(relation) === record)
+      .map((relation) => Relation.getSource(relation));
+
+    const references = getReferencesFromObject(record);
+    const referencedObjects = references.map((ref) => ref.target).filter(isNonNullable);
+    const referencingObjects = objects.filter((obj) => {
+      const refs = getReferencesFromObject(obj);
+      return refs.some((ref) => ref.target === record);
+    });
+
+    return [...referencedObjects, ...referencingObjects, ...targetObjects, ...sourceObjects];
+  }, [record, objects]);
 
   return (
-    <div role='none' className='container-max-width flex flex-col p-2 gap-1 overflow-y-auto'>
-      <div key={record.id} className='border border-separator rounded'>
-        <Form autoSave schema={schema} values={record} onSave={handleSave} onQueryRefOptions={handleRefQueryLookup} />
+    <StackItem.Content classNames='flex flex-col items-center'>
+      <div role='none' className={mx('flex flex-col gap-4 p-6 is-full overflow-y-auto')}>
+        <div role='none' className={mx('flex flex-col gap-1 card-min-width card-max-width')}>
+          <Surface role='section' data={data} limit={1} />
+        </div>
+
+        {/* TODO(wittjosiah): This should maybe be in a separate stack item. */}
+        {related.length > 0 && (
+          <div role='none' className={mx('flex flex-col gap-1', related.length === 1 ? 'card-max-width' : 'is-full')}>
+            <label className='text-description text-sm mbs-2'>{t('related objects label')}</label>
+            <Masonry.Root<Obj.Any>
+              items={related}
+              render={Card}
+              intrinsicHeight
+              columnCount={related.length === 1 ? 1 : undefined}
+            />
+          </div>
+        )}
       </div>
-    </div>
+    </StackItem.Content>
   );
 };
 
+const Card = ({ data: subject }: { data: Obj.Any }) => {
+  const data = useMemo(() => ({ subject }), [subject]);
+  return <Surface role='card' data={data} limit={1} />;
+};
+
+const getReferencesFromObject = (obj: Obj.Any): Ref.Any[] => {
+  return Object.getOwnPropertyNames(obj)
+    .map((name) => obj[name as keyof Obj.Any])
+    .filter((value) => Ref.isRef(value)) as Ref.Any[];
+};
+
 export default RecordMain;

package/src/components/SchemaContainer.tsx

@@ -41,7 +41,7 @@ export const SchemaContainer = ({ space }: SchemaPanelProps) => {
   const schemas = useQuerySpaceSchemas(space);
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
+    <StackItem.Content scrollable>
       <ControlPage>
         <ControlSection title={t('schema verbose label')} description={t('schema description')}>
           <div role='none' className={controlItemClasses}>

package/src/components/SpacePresence.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 
 import { useAppGraph, useCapability } from '@dxos/app-framework';

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,7 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
 import { LayoutAction, chain, createIntent, useIntentDispatcher } from '@dxos/app-framework';
@@ -69,7 +70,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
       }
       if (properties.archived && !archived) {
         void dispatch(
-          pipe(
+          Function.pipe(
             createIntent(SpaceAction.Close, { space }),
             chain(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: client.spaces.default.id }),
           ),
@@ -162,7 +163,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
   );
 
   return (
-    <StackItem.Content classNames='block overflow-y-auto'>
+    <StackItem.Content scrollable>
       <ControlPage>
         <ControlSection
           title={t('space properties settings verbose label', { ns: meta.id })}

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import React, { useEffect, useState } from 'react';
 
 import { useAppGraph } from '@dxos/app-framework';
@@ -16,12 +16,12 @@ import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attent
 import { usePath } from '../../hooks';
 import { meta } from '../../meta';
 
-const useEdgeStatus = (): EdgeStatus => {
-  const [status, setStatus] = useState(EdgeStatus.NOT_CONNECTED);
+const useEdgeStatus = (): EdgeStatus.ConnectionState => {
+  const [status, setStatus] = useState(EdgeStatus.ConnectionState.NOT_CONNECTED);
   const client = useClient();
   useEffect(() => {
     client.services.services.EdgeAgentService?.queryEdgeStatus().subscribe(({ status }) => {
-      setStatus(status);
+      setStatus(status.state);
     });
   }, [client]);
 
@@ -43,7 +43,7 @@ export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean
   const path = usePath(graph, startOfAttention);
   const containsAttended = !open && !isAttended && id && Option.isSome(path) ? path.value.includes(id) : false;
 
-  const connectedToEdge = useEdgeStatus() === EdgeStatus.CONNECTED;
+  const connectedToEdge = useEdgeStatus() === EdgeStatus.ConnectionState.CONNECTED;
   // TODO(wittjosiah): This is not reactive.
   const edgeSyncEnabled = space.internal.data.edgeReplication === EdgeReplicationSetting.ENABLED;
   const syncState = useSpaceSyncState(space);

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

@@ -4,6 +4,7 @@
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { withClientProvider } from '@dxos/react-client/testing';
 import { withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
@@ -13,10 +14,10 @@ import { SyncStatusIndicator } from './SyncStatus';
 const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  decorators: [withTheme],
+  decorators: [withTheme, withClientProvider({ createIdentity: true })],
   parameters: {
-    translations,
     layout: 'centered',
+    translations,
   },
 } satisfies Meta<typeof SyncStatusIndicator>;
 

package/src/components/SyncStatus/SyncStatus.tsx

@@ -5,9 +5,14 @@
 import React, { useEffect, useState } from 'react';
 
 import { StatusBar } from '@dxos/plugin-status-bar';
+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, useTranslation } from '@dxos/react-ui';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+import { Unit } from '@dxos/util';
 
 import { meta } from '../../meta';
 
@@ -53,7 +58,92 @@ export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap
   }, [offline, needsToUpload, needsToDownload]);
 
   const title = t(`${status} label`);
-  const icon = <Icon icon={getIcon(status)} size={4} classNames={classNames} />;
+  const icon = <Icon icon={getIcon(status)} classNames={classNames} />;
 
-  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <StatusBar.Item title={title}>{icon}</StatusBar.Item>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content>
+          <EdgeConnectionPopover />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};
+
+const useEdgeStatus = (): EdgeStatus | undefined => {
+  const client = useClient();
+  const { status } = useStream(
+    () => client.services.services.EdgeAgentService!.queryEdgeStatus(),
+    {} as QueryEdgeStatusResponse,
+  );
+  return status;
+};
+
+const EdgeConnectionPopover = () => {
+  const status = useEdgeStatus();
+  const { t } = useTranslation(meta.id);
+
+  const isConnected = status?.state === EdgeStatus.ConnectionState.CONNECTED;
+
+  return (
+    <div className='min-is-[240px] p-2'>
+      {/* Connection Status Header */}
+      <div className='flex items-center gap-2 mbe-2'>
+        <Icon
+          icon={isConnected ? 'ph--check-circle--regular' : 'ph--warning-circle--regular'}
+          classNames={mx(isConnected ? 'text-successText' : 'text-errorText animate-pulse')}
+        />
+        <span className='font-medium text-sm'>
+          {isConnected ? t('sync edge connected label') : t('sync edge disconnected label')}
+        </span>
+      </div>
+
+      {/* Connection Details */}
+      {status?.state === EdgeStatus.ConnectionState.NOT_CONNECTED && (
+        <div className='flex items-center gap-2 text-sm text-description'>
+          <Icon icon='ph--cloud-x--regular' />
+          <span>{t('sync no connection label')}</span>
+        </div>
+      )}
+
+      {status?.state === EdgeStatus.ConnectionState.CONNECTED && (
+        <div className='space-y-2'>
+          {/* Latency */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--timer--regular' />
+              <span>{t('sync latency label')}</span>
+            </div>
+            <span className='text-sm font-mono text-subdued'>
+              {status.rtt.toFixed(0)}
+              ms
+            </span>
+          </div>
+
+          {/* Upload Speed */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-up--regular' />
+              <span>{t('sync upload label')}</span>
+            </div>
+            <span className='text-sm font-mono text-subdued'>{Unit.Kilobyte(status.rateBytesUp, 0)}/s</span>
+          </div>
+
+          {/* Download Speed */}
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-down--regular' />
+              <span>{t('sync download label')}</span>
+            </div>
+            <span className='text-sm font-mono text-subdued'>{Unit.Kilobyte(status.rateBytesDown, 0)}/s</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };

package/src/components/ViewEditor.tsx

@@ -5,12 +5,12 @@
 import React, { useCallback } from 'react';
 
 import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
-import { Filter, Query, Type } from '@dxos/echo';
+import { type QueryAST, Type } from '@dxos/echo';
 import { invariant } from '@dxos/invariant';
 import { useClient } from '@dxos/react-client';
 import { getSpace, useSchema } from '@dxos/react-client/echo';
 import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
-import { type DataType, typenameFromQuery } from '@dxos/schema';
+import { type DataType, getTypenameFromQuery } from '@dxos/schema';
 
 import { SpaceAction } from '../types';
 
@@ -20,17 +20,16 @@ export const ViewEditor = ({ view }: ViewEditorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
   const space = getSpace(view);
-  const typename = view.query ? typenameFromQuery(view.query.ast) : undefined;
+  const typename = view.query ? getTypenameFromQuery(view.query.ast) : undefined;
   const schema = useSchema(client, space, typename);
 
   const handleUpdateQuery = useCallback(
-    (typename: string) => {
+    (newQuery: QueryAST.Query) => {
       invariant(schema);
       invariant(Type.isMutable(schema));
 
-      const newQuery = Query.select(Filter.typename(typename));
-      view.query.ast = newQuery.ast;
-      schema.updateTypename(typename);
+      view.query.ast = newQuery;
+      schema.updateTypename(getTypenameFromQuery(newQuery));
     },
     [view, schema],
   );

package/src/components/index.ts

@@ -10,7 +10,6 @@ export * from './CollectionSection';
 export * from './JoinDialog';
 export * from './MembersContainer';
 export * from './MenuFooter';
-export * from './ObjectSettings';
 export * from './PersistenceStatus';
 export * from './PopoverRenameObject';
 export * from './PopoverRenameSpace';
@@ -23,4 +22,5 @@ export * from './ViewEditor';
 
 export const CollectionMain = lazy(() => import('./CollectionMain'));
 export const ObjectDetailsPanel = lazy(() => import('./ObjectDetailsPanel'));
+export const ObjectSettingsContainer = lazy(() => import('./ObjectSettings'));
 export const RecordMain = lazy(() => import('./RecordMain'));

package/src/hooks/index.ts

@@ -5,3 +5,4 @@
 export * from './useActiveSpace';
 export * from './useInputSurfaceLookup';
 export * from './usePath';
+export * from './useTypeOptions';

package/src/hooks/useInputSurfaceLookup.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type Schema } from 'effect';
+import type * as Schema from 'effect/Schema';
 import React, { useCallback } from 'react';
 
 import { Surface, isSurfaceAvailable, usePluginManager } from '@dxos/app-framework';

package/src/hooks/usePath.ts

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Option } from 'effect';
+import * as Option from 'effect/Option';
 import { useEffect, useState } from 'react';
 
 import { type ReadableGraph } from '@dxos/plugin-graph';

package/src/hooks/useTypeOptions.ts

@@ -0,0 +1,59 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { useCapabilities } from '@dxos/app-framework';
+import { Type } from '@dxos/echo';
+import { ClientCapabilities } from '@dxos/plugin-client';
+import { useClient } from '@dxos/react-client';
+import { type Space } from '@dxos/react-client/echo';
+import { useTranslation } from '@dxos/react-ui';
+import { DataType, type TypenameAnnotation, getTypenames } from '@dxos/schema';
+
+import { SpaceCapabilities } from '../capabilities';
+
+const OMIT = [DataType.Collection.typename, Type.getTypename(DataType.QueryCollection)];
+
+export const useTypeOptions = ({ space, annotation }: { space?: Space; annotation: TypenameAnnotation[] }) => {
+  const { t } = useTranslation();
+  const client = useClient();
+
+  const schemaWhitelists = useCapabilities(ClientCapabilities.SchemaWhiteList);
+  const whitelistedTypenames = useMemo(
+    () => new Set(schemaWhitelists.flatMap((typeArray) => typeArray.map((type) => Type.getTypename(type)))),
+    [schemaWhitelists],
+  );
+
+  const objectForms = useCapabilities(SpaceCapabilities.ObjectForm);
+  const objectFormTypenames = useMemo(
+    () =>
+      new Set(
+        objectForms
+          .map((form) => Type.getTypename(form.objectSchema))
+          // TODO(wittjosiah): Remove.
+          .filter((typename) => !OMIT.includes(typename) && !typename.endsWith('View')),
+      ),
+    [objectForms],
+  );
+
+  const typenames = getTypenames({
+    annotation,
+    whitelistedTypenames,
+    objectFormTypenames,
+    space,
+    client,
+  });
+
+  return useMemo(
+    () =>
+      typenames
+        .map((typename) => ({
+          value: typename,
+          label: t('typename label', { ns: typename, defaultValue: typename }),
+        }))
+        .toSorted((a, b) => a.label.localeCompare(b.label)),
+    [t, typenames],
+  );
+};

package/src/meta.ts

@@ -3,9 +3,14 @@
 //
 
 import { type PluginMeta } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
 export const meta: PluginMeta = {
   id: 'dxos.org/plugin/space',
   name: 'Spaces',
+  description: trim`
+    Core workspace container system for organizing and sharing collaborative environments.
+    Create, manage, and share spaces with granular access control and invitation management.
+  `,
   icon: 'ph--planet--regular',
 };

package/src/translations.ts

@@ -3,7 +3,7 @@
 //
 
 import { Type } from '@dxos/echo';
-import { StoredSchema } from '@dxos/echo-schema';
+import { StoredSchema } from '@dxos/echo/internal';
 import { type Resource } from '@dxos/react-ui';
 import { DataType } from '@dxos/schema';
 
@@ -190,10 +190,12 @@ export const translations = [
         'creating in collection label': 'In Collection',
         'clear input label': 'Clear',
         'expose object label': 'Expose in navtree',
+        'add tag label': 'Add tag',
         'advanced settings label': 'Advanced',
         'foreign keys': 'Foreign Keys',
         'add key': 'Add Key',
         'open space settings label': 'Open settings',
+        'related objects label': 'Related',
 
         'row details no selection label': 'No objects selected',
         'companion selected objects label': 'Selected',
@@ -229,6 +231,13 @@ export const translations = [
           'Archiving a space will remove it from the sidebar and stop replicating updates, but will not delete the data. You can unarchive it by enabling archived spaces in the app settings.',
         'archive space label': 'Archive',
         'unarchive space label': 'Unarchive',
+
+        'sync edge connected label': 'Edge connected',
+        'sync edge disconnected label': 'Edge disconnected',
+        'sync no connection label': 'No connection to edge service',
+        'sync latency label': 'Latency',
+        'sync upload label': 'Upload',
+        'sync download label': 'Download',
       },
     },
   },

package/src/types/types.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { type AnyIntentChain } from '@dxos/app-framework';
 import { type Obj, Type } from '@dxos/echo';
-import { type BaseObject, EchoSchema, StoredSchema, type TypedObject } from '@dxos/echo-schema';
+import { type BaseObject, EchoSchema, StoredSchema } from '@dxos/echo/internal';
 import { type PublicKey } from '@dxos/react-client';
 // TODO(wittjosiah): This pulls in full client.
 import { EchoObjectSchema, ReactiveObjectSchema, type Space, SpaceSchema } from '@dxos/react-client/echo';
@@ -106,8 +106,7 @@ export const SpaceForm = Schema.Struct({
 });
 
 export type ObjectForm<T extends BaseObject = BaseObject> = {
-  // TODO(dmaretskyi): Change to Schema.Schema.AnyNoContext
-  objectSchema: TypedObject;
+  objectSchema: Schema.Schema.AnyNoContext;
   formSchema?: Schema.Schema<T, any>;
   hidden?: boolean;
   getIntent: (props: T, options: { space: Space }) => AnyIntentChain;
@@ -231,6 +230,8 @@ export namespace SpaceAction {
     input: Schema.Struct({
       space: SpaceSchema,
       typename: Schema.String,
+      // TODO(wittjosiah): This is leaky.
+      show: Schema.optional(Schema.Boolean),
     }),
     output: Schema.Struct({}),
   }) {}
@@ -244,6 +245,8 @@ export namespace SpaceAction {
       version: Schema.optional(Schema.String),
       // TODO(wittjosiah): Schema for schema?
       schema: Schema.Any,
+      // TODO(wittjosiah): This is leaky.
+      show: Schema.optional(Schema.Boolean),
     }),
     output: Schema.Struct({
       // TODO(wittjosiah): ObjectId.
@@ -325,7 +328,8 @@ export namespace SpaceAction {
 
   export class RemoveObjects extends Schema.TaggedClass<RemoveObjects>()(`${SPACE_ACTION}/remove-objects`, {
     input: Schema.Struct({
-      objects: Schema.Array(EchoObjectSchema),
+      // TODO(wittjosiah): Should be Schema.Union(Type.Obj, Type.Relation).
+      objects: Schema.Array(ReactiveObjectSchema),
       target: Schema.optional(DataType.Collection),
       deletionData: Schema.optional(DeletionData),
     }),