@dxos/plugin-space 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/SpaceSettings/SpaceSettingsContainer.tsx

@@ -2,31 +2,29 @@
 // Copyright 2024 DXOS.org
 //
 
-import { pipe, Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React, { type ChangeEvent, useCallback, useMemo, useState } from 'react';
 
-import { chain, createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Obj } from '@dxos/echo';
 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 { type Space, SpaceState } from '@dxos/react-client/echo';
+import { Button, Input, useFileDownload, useMulticastObservable, useTranslation } from '@dxos/react-ui';
+import { Form, type FormFieldMap, Settings } from '@dxos/react-ui-form';
 import { HuePicker, IconPicker } from '@dxos/react-ui-pickers';
-import { StackItem } from '@dxos/react-ui-stack';
 
-import { SPACE_PLUGIN } from '../../meta';
-import { SpaceAction, SpaceForm } from '../../types';
+import { meta } from '../../meta';
+import { SpaceCapabilities, SpaceForm, SpaceOperation } from '../../types';
 
-const FormSchema = SpaceForm.pipe(
-  Schema.extend(Schema.Struct({ archived: Schema.Boolean.annotations({ title: 'Archive space' }) })),
+const SpaceFormSchema = SpaceForm.pipe(
+  Schema.extend(
+    Schema.Struct({
+      archived: Schema.Boolean.annotations({ title: 'Archive Space' }),
+    }),
+  ),
 );
 
 export type SpaceSettingsContainerProps = {
@@ -35,8 +33,8 @@ export type SpaceSettingsContainerProps = {
 
 // TODO(wittjosiah): Handle space migrations here?
 export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { t } = useTranslation(meta.id);
+  const { invokePromise } = useOperationInvoker();
   const client = useClient();
   const archived = useMulticastObservable(space.state) === SpaceState.SPACE_INACTIVE;
   const [edgeReplication, setEdgeReplication] = useState(
@@ -55,30 +53,39 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
     [space],
   );
 
-  const handleSave = useCallback(
-    (properties: Schema.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;
+  const handleValuesChanged = useCallback(
+    (newValues: Partial<Schema.Schema.Type<typeof SpaceFormSchema>>, meta: { changed?: Record<string, boolean> }) => {
+      const changed = meta.changed ?? {};
+      if (changed['edgeReplication']) {
+        void toggleEdgeReplication(newValues.edgeReplication ?? false);
       }
-      if (properties.hue !== space.properties.hue) {
-        space.properties.hue = properties.hue;
+
+      if (changed['name'] || changed['icon'] || changed['hue']) {
+        Obj.change(space.properties, (p) => {
+          if (changed['name'] && newValues.name !== undefined) {
+            p.name = newValues.name;
+          }
+          if (changed['icon']) {
+            p.icon = newValues.icon;
+          }
+          if (changed['hue']) {
+            p.hue = newValues.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 }));
+
+      if (changed['archived']) {
+        if (newValues.archived && !archived) {
+          void invokePromise(SpaceOperation.Close, { space });
+          void invokePromise(LayoutOperation.SwitchWorkspace, {
+            subject: client.spaces.default.id,
+          });
+        } else if (!newValues.archived && archived) {
+          void invokePromise(SpaceOperation.Open, { space });
+        }
       }
     },
-    [space, toggleEdgeReplication, archived],
+    [space, client, archived, invokePromise, toggleEdgeReplication],
   );
 
   const values = useMemo(
@@ -92,7 +99,7 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
     [space.properties.name, space.properties.icon, space.properties.hue, edgeReplication, archived],
   );
 
-  const customElements: Partial<Record<string, InputComponent>> = useMemo(
+  const fieldMap = useMemo<FormFieldMap>(
     () => ({
       name: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback(
@@ -100,85 +107,96 @@ export const SpaceSettingsContainer = ({ space }: SpaceSettingsContainerProps) =
           [onValueChange, type],
         );
         return (
-          <ControlItemInput title={label} description={t('display name description')}>
+          <Settings.ItemInput title={label} description={t('display name description')}>
             <Input.TextInput
               value={getValue()}
               onChange={handleChange}
               placeholder={t('display name input placeholder')}
               classNames='min-is-64'
             />
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
       icon: ({ type, label, getValue, onValueChange }) => {
-        const handleChange = useCallback((nextEmoji: string) => onValueChange(type, nextEmoji), [onValueChange, type]);
-        const handleEmojiReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        const handleChange = useCallback((icon: string) => onValueChange(type, icon), [onValueChange, type]);
+        const handleReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
         return (
-          <ControlItem title={label} description={t('icon description')}>
+          <Settings.Item title={label} description={t('icon description')}>
             <IconPicker
               value={getValue()}
               onChange={handleChange}
-              onReset={handleEmojiReset}
+              onReset={handleReset}
               classNames='justify-self-end'
-              iconSize={5}
             />
-          </ControlItem>
+          </Settings.Item>
         );
       },
       hue: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((nextHue: string) => onValueChange(type, nextHue), [onValueChange, type]);
-        const handleHueReset = useCallback(() => onValueChange(type, undefined), [onValueChange, type]);
+        const handleReset = 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>
+          <Settings.Item title={label} description={t('hue description')}>
+            <HuePicker value={getValue()} onChange={handleChange} onReset={handleReset} classNames='justify-self-end' />
+          </Settings.Item>
         );
       },
       edgeReplication: ({ type, label, getValue, onValueChange }) => {
         const handleChange = useCallback((checked: boolean) => onValueChange(type, checked), [onValueChange, type]);
         return (
-          <ControlItemInput title={label} description={t('edge replication description')}>
+          <Settings.ItemInput title={label} description={t('edge replication description')}>
             <Input.Switch checked={getValue()} onCheckedChange={handleChange} classNames='justify-self-end' />
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
       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}>
+          <Settings.ItemInput title={label} description={t('archive space description')}>
+            <Button
+              disabled={space === client.spaces.default}
+              variant={getValue() ? 'default' : 'destructive'}
+              onClick={handleChange}
+            >
               {getValue() ? t('unarchive space label') : t('archive space label')}
             </Button>
-          </ControlItemInput>
+          </Settings.ItemInput>
         );
       },
     }),
-    [t, space],
+    [t, space, client],
   );
 
+  const download = useFileDownload();
+  const handleBackup = useCallback(async () => {
+    const archive = await space.internal.export();
+    download(new Blob([archive.contents as Uint8Array<ArrayBuffer>]), archive.filename);
+  }, [space, download]);
+
+  const repairs = useCapabilities(SpaceCapabilities.Repair);
+  const handleRepair = useCallback(async () => {
+    await Promise.all(repairs.map((repair) => repair({ space, isDefault: client.spaces.default === space })));
+  }, [client, space, repairs]);
+
   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}
-            outerSpacing={false}
-            classNames='container-max-width grid grid-cols-1 md:grid-cols-[1fr_min-content] gap-4'
-          />
-        </ControlSection>
-      </ControlPage>
-    </StackItem.Content>
+    <Settings.Root>
+      <Settings.Section
+        title={t('space properties settings verbose label')}
+        description={t('space properties settings description', { ns: meta.id })}
+      >
+        <Form.Root fieldMap={fieldMap} schema={SpaceFormSchema} values={values} onValuesChanged={handleValuesChanged}>
+          <Form.FieldSet classNames='space-y-trimMd' />
+        </Form.Root>
+      </Settings.Section>
+      <Settings.Section title={t('space controls title')} description={t('space controls description')}>
+        <Settings.ItemInput title={t('backup space title')} description={t('backup space description')}>
+          <Button onClick={handleBackup}>{t('download backup label')}</Button>
+        </Settings.ItemInput>
+        <Settings.ItemInput title={t('repair space title')} description={t('repair space description')}>
+          <Button onClick={handleRepair}>{t('repair space label')}</Button>
+        </Settings.ItemInput>
+      </Settings.Section>
+    </Settings.Root>
   );
 };
+
+SpaceSettingsContainer.displayName = 'SpaceSettingsContainer';

package/src/components/SyncStatus/InlineSyncStatus.tsx

@@ -2,10 +2,10 @@
 // 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';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { EdgeStatus } from '@dxos/protocols/proto/dxos/client/services';
 import { EdgeReplicationSetting } from '@dxos/protocols/proto/dxos/echo/metadata';
 import { useClient } from '@dxos/react-client';
@@ -14,14 +14,14 @@ import { Tooltip, useTranslation } from '@dxos/react-ui';
 import { AttentionGlyph, useAttended, useAttention } from '@dxos/react-ui-attention';
 
 import { usePath } from '../../hooks';
-import { SPACE_PLUGIN } from '../../meta';
+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]);
 
@@ -29,7 +29,7 @@ const useEdgeStatus = (): EdgeStatus => {
 };
 
 export const InlineSyncStatus = ({ space, open }: { space: Space; open?: boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const id = space.id;
   const { hasAttention, isAncestor, isRelated } = useAttention(id);
   const isAttended = hasAttention || isAncestor || isRelated;
@@ -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

@@ -2,35 +2,28 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
-import { type Meta, type StoryObj } from '@storybook/react';
-import React from 'react';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { translations } from '../../translations';
 
 import { SyncStatusIndicator } from './SyncStatus';
-import translations from '../../translations';
-
-const DefaultStory = (props: any) => {
-  return (
-    <div className='flex flex-col-reverse p-4'>
-      <SyncStatusIndicator {...props} />
-    </div>
-  );
-};
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-space/SyncStatusIndicator',
   component: SyncStatusIndicator,
-  render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: { translations },
-};
+  decorators: [withTheme(), withClientProvider({ createIdentity: true })],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof SyncStatusIndicator>;
 
 export default meta;
 
-type Story = StoryObj<typeof SyncStatusIndicator>;
+type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {

package/src/components/SyncStatus/SyncStatus.tsx

@@ -5,13 +5,19 @@
 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 { getSyncSummary, type SpaceSyncStateMap, useSyncState } from '@dxos/react-client/echo';
-import { Icon, useTranslation } from '@dxos/react-ui';
+import { useStream } from '@dxos/react-client/devtools';
+import { type SpaceSyncStateMap, getSyncSummary, useSyncState } from '@dxos/react-client/echo';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { Unit, type UnitFormat } from '@dxos/util';
+
+import { meta } from '../../meta';
 
 import { createClientSaveTracker } from './save-tracker';
 import { getIcon, getStatus } from './status';
-import { SPACE_PLUGIN } from '../../meta';
 
 const SYNC_STALLED_TIMEOUT = 5_000;
 
@@ -19,18 +25,13 @@ export const SyncStatus = () => {
   const client = useClient();
   const state = useSyncState();
   const [saved, setSaved] = useState(true);
-
-  useEffect(() => {
-    return createClientSaveTracker(client, (state) => {
-      setSaved(state === 'saved');
-    });
-  }, []);
+  useEffect(() => createClientSaveTracker(client, (state) => setSaved(state === 'saved')), []);
 
   return <SyncStatusIndicator state={state} saved={saved} />;
 };
 
-export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: Boolean }) => {
-  const { t } = useTranslation(SPACE_PLUGIN);
+export const SyncStatusIndicator = ({ state, saved }: { state: SpaceSyncStateMap; saved: boolean }) => {
+  const { t } = useTranslation(meta.id);
   const summary = getSyncSummary(state);
   const offline = Object.values(state).length === 0;
   const needsToUpload = summary.differentDocuments > 0 || summary.missingOnRemote > 0;
@@ -52,7 +53,103 @@ 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 (
+    <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 text-sm'>
+            <div className='flex items-center gap-2 text-description'>
+              <Icon icon='ph--timer--regular' />
+              <span>{t('sync latency label')}</span>
+            </div>
+            <UnitValue value={status.rtt} format={Unit.Millisecond} />
+          </div>
+
+          {/* Upload Speed */}
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-description'>
+              <Icon icon='ph--arrow-up--regular' />
+              <span>{t('sync upload label')}</span>
+            </div>
+            <UnitValue value={status.rateBytesUp} format={Unit.Kilobyte} suffix='/s' />
+          </div>
+
+          {/* Download Speed */}
+          <div className='flex items-center justify-between text-sm'>
+            <div className='flex items-center gap-2 text-sm text-description'>
+              <Icon icon='ph--arrow-down--regular' />
+              <span>{t('sync download label')}</span>
+            </div>
+            <UnitValue value={status.rateBytesDown} format={Unit.Kilobyte} suffix='/s' />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
 
-  return <StatusBar.Item title={title}>{icon}</StatusBar.Item>;
+// TODO(burdon): Factor out.
+const UnitValue = ({ value: input, format, suffix }: { value: number; format: UnitFormat; suffix?: string }) => {
+  const { formattedValue, unit } = format(input);
+  return (
+    <span className='font-mono'>
+      {formattedValue}
+      <span className='mis-1 text-subdued'>
+        {unit.symbol}
+        {suffix}
+      </span>
+    </span>
+  );
 };

package/src/components/SyncStatus/save-tracker.ts

@@ -46,15 +46,15 @@ const createSpaceSaveTracker = (space: Space, cb: (state: 'saved' | 'saving') =>
 
     let hasUnsavedChanges = false;
     let lastFlushPromise: Promise<void> | undefined;
-    space.crud.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
+    space.internal.db.saveStateChanged.on(ctx, ({ unsavedDocuments }) => {
       hasUnsavedChanges = unsavedDocuments.length > 0;
     });
-    space.crud.saveStateChanged.debounce(500).on(ctx, () => {
+    space.internal.db.saveStateChanged.debounce(500).on(ctx, () => {
       if (hasUnsavedChanges) {
         lastFlushPromise = undefined;
         cb('saving');
       } else {
-        const flushPromise = space.crud.flush();
+        const flushPromise = space.db.flush();
         lastFlushPromise = flushPromise;
         void flushPromise.then(() => {
           if (lastFlushPromise === flushPromise) {

package/src/components/SyncStatus/status.ts

@@ -10,10 +10,10 @@ export const getStatus = ({
   needsToUpload,
   needsToDownload,
 }: {
-  offline: Boolean;
-  saved: Boolean;
-  needsToUpload: Boolean;
-  needsToDownload: Boolean;
+  offline: boolean;
+  saved: boolean;
+  needsToUpload: boolean;
+  needsToDownload: boolean;
 }): Status => {
   if (!saved) {
     return 'saving locally';

package/src/components/ViewEditor.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+import React, { useCallback, useState } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { DXN, Filter, Obj, Query, type QueryAST, Tag, Type } from '@dxos/echo';
+import { type Mutable } from '@dxos/echo/internal';
+import { useClient } from '@dxos/react-client';
+import { getSpace, useQuery } from '@dxos/react-client/echo';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { ViewEditor as NaturalViewEditor } from '@dxos/react-ui-form';
+import { View } from '@dxos/schema';
+
+import { resolveSchemaWithRegistry } from '../helpers';
+import { useTypeOptions } from '../hooks';
+import { SpaceOperation } from '../types';
+
+export type ViewEditorProps = { view: View.View };
+
+export const ViewEditor = ({ view }: ViewEditorProps) => {
+  const { invokePromise } = useOperationInvoker();
+  const client = useClient();
+  const space = getSpace(view);
+  const [schema, setSchema] = useState<Schema.Schema.AnyNoContext>(() => Schema.Struct({}));
+  const tags = useQuery(space?.db, Filter.type(Tag.Tag));
+  const types = useTypeOptions({
+    space,
+    annotation: {
+      location: ['database', 'runtime'],
+      kind: ['user'],
+      registered: ['registered'],
+    },
+  });
+
+  useAsyncEffect(async () => {
+    if (!view?.query || !space) {
+      return;
+    }
+
+    const foundSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, view.query.ast);
+    if (foundSchema && foundSchema !== schema) {
+      setSchema(() => foundSchema);
+    }
+  }, [client, space, view, schema]);
+
+  const handleQueryChanged = useCallback(
+    async (newQuery: QueryAST.Query, target?: string) => {
+      if (!view || !space) {
+        return;
+      }
+
+      const queue = target && DXN.tryParse(target) ? target : undefined;
+      const query = queue ? Query.fromAst(newQuery).options({ queues: [queue] }) : Query.fromAst(newQuery);
+      Obj.change(view, (v) => {
+        v.query.ast = query.ast as Mutable<typeof query.ast>;
+      });
+      const newSchema = await resolveSchemaWithRegistry(space.db.schemaRegistry, query.ast);
+      if (!newSchema) {
+        return;
+      }
+
+      const newView = View.make({
+        query,
+        jsonSchema: Type.toJsonSchema(newSchema),
+      });
+      Obj.change(view, (v) => {
+        v.projection = Obj.getSnapshot(newView).projection as Mutable<typeof v.projection>;
+      });
+
+      setSchema(() => newSchema);
+    },
+    [view, schema],
+  );
+
+  const handleDelete = useCallback(
+    (fieldId: string) => {
+      void invokePromise(SpaceOperation.DeleteField, { view, fieldId });
+    },
+    [invokePromise, view],
+  );
+
+  if (!space || !schema) {
+    return null;
+  }
+
+  return (
+    <NaturalViewEditor
+      registry={space.db.schemaRegistry}
+      schema={schema}
+      view={view}
+      mode='tag'
+      tags={tags}
+      types={types}
+      onQueryChanged={handleQueryChanged}
+      onDelete={Type.isMutable(schema) ? handleDelete : undefined}
+    />
+  );
+};