@dxos/plugin-debug 0.6.8-main.046e6cf

package/package.json

@@ -0,0 +1,92 @@
+{
+  "name": "@dxos/plugin-debug",
+  "version": "0.6.8-main.046e6cf",
+  "description": "DXOS Surface plugin for testing.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "types": "./dist/types/src/meta.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@preact/signals-core": "^1.6.0",
+    "@tldraw/tldraw": "^2.3.0",
+    "date-fns": "^3.3.1",
+    "lodash.get": "^4.4.2",
+    "react-json-tree": "^0.18.0",
+    "react-resize-detector": "^11.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/client-services": "0.6.8-main.046e6cf",
+    "@dxos/config": "0.6.8-main.046e6cf",
+    "@dxos/echo-generator": "0.6.8-main.046e6cf",
+    "@dxos/automerge": "0.6.8-main.046e6cf",
+    "@dxos/devtools": "0.6.8-main.046e6cf",
+    "@dxos/echo-pipeline": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/keys": "0.6.8-main.046e6cf",
+    "@dxos/invariant": "0.6.8-main.046e6cf",
+    "@dxos/local-storage": "0.6.8-main.046e6cf",
+    "@dxos/log": "0.6.8-main.046e6cf",
+    "@dxos/plugin-graph": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/plugin-markdown": "0.6.8-main.046e6cf",
+    "@dxos/plugin-settings": "0.6.8-main.046e6cf",
+    "@dxos/plugin-sketch": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/plugin-theme": "0.6.8-main.046e6cf",
+    "@dxos/plugin-status-bar": "0.6.8-main.046e6cf",
+    "@dxos/protocols": "0.6.8-main.046e6cf",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/react-async": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-attention": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-table": "0.6.8-main.046e6cf",
+    "@dxos/util": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/lodash.get": "^4.4.7",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "@types/react-syntax-highlighter": "^15.5.5",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/random": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/DebugPlugin.tsx

@@ -0,0 +1,270 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Bug, Hammer, type IconProps } from '@phosphor-icons/react';
+import React, { type ReactNode, useEffect, useState } from 'react';
+
+import {
+  getPlugin,
+  parseGraphPlugin,
+  parseIntentPlugin,
+  resolvePlugin,
+  type IntentPluginProvides,
+  type Plugin,
+  type PluginDefinition,
+} from '@dxos/app-framework';
+import { Timer } from '@dxos/async';
+import { LocalStorageStore } from '@dxos/local-storage';
+import { type ClientPluginProvides } from '@dxos/plugin-client';
+import { createExtension, Graph, type Node } from '@dxos/plugin-graph';
+import { SpaceAction } from '@dxos/plugin-space';
+import { CollectionType } from '@dxos/plugin-space/types';
+import { type Client } from '@dxos/react-client';
+import { type Space, SpaceState, isSpace } from '@dxos/react-client/echo';
+import { Main } from '@dxos/react-ui';
+import {
+  baseSurface,
+  topbarBlockPaddingStart,
+  fixedInsetFlexLayout,
+  bottombarBlockPaddingEnd,
+} from '@dxos/react-ui-theme';
+
+import { DebugGlobal, DebugSettings, DebugSpace, DebugStatus, DevtoolsMain, Wireframe } from './components';
+import meta, { DEBUG_PLUGIN } from './meta';
+import translations from './translations';
+import { DebugContext, type DebugSettingsProps, type DebugPluginProvides, DebugAction } from './types';
+
+export const SETTINGS_KEY = DEBUG_PLUGIN + '/settings';
+
+export const DebugPlugin = (): PluginDefinition<DebugPluginProvides> => {
+  const settings = new LocalStorageStore<DebugSettingsProps>(DEBUG_PLUGIN, { debug: true, devtools: true });
+  let intentPlugin: Plugin<IntentPluginProvides>;
+
+  return {
+    meta,
+    ready: async (plugins) => {
+      intentPlugin = resolvePlugin(plugins, parseIntentPlugin)!;
+      settings
+        .prop({ key: 'debug', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'devtools', type: LocalStorageStore.bool({ allowUndefined: true }) })
+        .prop({ key: 'wireframe', type: LocalStorageStore.bool({ allowUndefined: true }) });
+
+      // TODO(burdon): Remove hacky dependency on global variable.
+      // Used to test how composer handles breaking protocol changes.
+      const composer = (window as any).composer;
+      composer.changeStorageVersionInMetadata = async (version: number) => {
+        const { changeStorageVersionInMetadata } = await import('@dxos/echo-pipeline/testing');
+        const { createStorageObjects } = await import('@dxos/client-services');
+        const client: Client = (window as any).dxos.client;
+        const config = client.config;
+        await client.destroy();
+        const { storage } = createStorageObjects(config.values?.runtime?.client?.storage ?? {});
+        await changeStorageVersionInMetadata(storage, version);
+        location.pathname = '/';
+      };
+    },
+    unload: async () => {
+      settings.close();
+    },
+    provides: {
+      settings: settings.values,
+      translations,
+      context: ({ children }) => {
+        const [timer, setTimer] = useState<Timer>();
+        useEffect(() => timer?.state.on((value) => !value && setTimer(undefined)), [timer]);
+        useEffect(() => {
+          timer?.stop();
+        }, []);
+
+        return (
+          <DebugContext.Provider
+            value={{
+              running: !!timer,
+              start: (cb, options) => {
+                timer?.stop();
+                setTimer(new Timer(cb).start(options));
+              },
+              stop: () => timer?.stop(),
+            }}
+          >
+            {children}
+          </DebugContext.Provider>
+        );
+      },
+      graph: {
+        builder: (plugins) => {
+          const graphPlugin = resolvePlugin(plugins, parseGraphPlugin);
+
+          // TODO(burdon): Combine nodes into single subtree.
+
+          return [
+            // Devtools node.
+            createExtension({
+              id: 'dxos.org/plugin/debug/devtools',
+              filter: (node): node is Node<null> => !!settings.values.devtools && node.id === 'root',
+              connector: () => [
+                {
+                  // TODO(zan): Removed `/` because it breaks deck layout reload. Fix?
+                  id: 'dxos.org.plugin.debug.devtools',
+                  data: 'devtools',
+                  type: 'dxos.org/plugin/debug/devtools',
+                  properties: {
+                    label: ['devtools label', { ns: DEBUG_PLUGIN }],
+                    icon: (props: IconProps) => <Hammer {...props} />,
+                    iconSymbol: 'ph--hammer--regular',
+                  },
+                },
+              ],
+            }),
+
+            // Debug node.
+            createExtension({
+              id: 'dxos.org/plugin/debug/debug',
+              filter: (node): node is Node<null> => !!settings.values.debug && node.id === 'root',
+              connector: () => [
+                {
+                  id: 'dxos.org/plugin/debug/debug',
+                  type: 'dxos.org/plugin/debug/debug',
+                  data: { graph: graphPlugin?.provides.graph },
+                  properties: {
+                    label: ['debug label', { ns: DEBUG_PLUGIN }],
+                    icon: (props: IconProps) => <Bug {...props} />,
+                    iconSymbol: 'ph--bug--regular',
+                  },
+                },
+              ],
+            }),
+
+            // Space debug nodes.
+            createExtension({
+              id: 'dxos.org/plugin/debug/spaces',
+              filter: (node): node is Node<Space> => !!settings.values.debug && isSpace(node.data),
+              connector: ({ node }) => {
+                const space = node.data;
+                return [
+                  {
+                    id: `${space.id}-debug`,
+                    type: 'dxos.org/plugin/debug/space',
+                    data: { space },
+                    properties: {
+                      label: ['debug label', { ns: DEBUG_PLUGIN }],
+                      icon: (props: IconProps) => <Bug {...props} />,
+                      iconSymbol: 'ph--bug--regular',
+                    },
+                  },
+                ];
+              },
+            }),
+          ];
+        },
+      },
+      intent: {
+        resolver: async (intent, plugins) => {
+          switch (intent.action) {
+            case DebugAction.OPEN_DEVTOOLS: {
+              const clientPlugin = getPlugin<ClientPluginProvides>(plugins, 'dxos.org/plugin/client');
+              const client = clientPlugin.provides.client;
+              const vaultUrl = client.config.values?.runtime?.client?.remoteSource ?? 'https://halo.dxos.org';
+
+              // Check if we're serving devtools locally on the usual port.
+              let devtoolsUrl = 'http://localhost:5174';
+              try {
+                // TODO(burdon): Test header to see if this is actually devtools.
+                await fetch(devtoolsUrl);
+              } catch {
+                // Match devtools to running app.
+                const isDev = window.location.href.includes('.dev.') || window.location.href.includes('localhost');
+                devtoolsUrl = `https://devtools${isDev ? '.dev.' : '.'}dxos.org`;
+              }
+
+              window.open(`${devtoolsUrl}?target=${vaultUrl}`, '_blank');
+              return { data: true };
+            }
+          }
+        },
+      },
+      surface: {
+        component: ({ name, data, role }) => {
+          switch (role) {
+            case 'settings':
+              return data.plugin === meta.id ? <DebugSettings settings={settings.values} /> : null;
+            case 'status':
+              return <DebugStatus />;
+          }
+
+          const primary = data.active ?? data.object;
+          let component: ReactNode;
+          if (role === 'main' || role === 'article') {
+            if (primary === 'devtools' && settings.values.devtools) {
+              component = <DevtoolsMain />;
+            } else if (!primary || typeof primary !== 'object' || !settings.values.debug) {
+              component = null;
+            } else if ('space' in primary && isSpace(primary.space)) {
+              component = (
+                <DebugSpace
+                  space={primary.space}
+                  onAddObjects={(objects) => {
+                    if (!isSpace(primary.space)) {
+                      return;
+                    }
+
+                    const collection =
+                      primary.space.state.get() === SpaceState.SPACE_READY &&
+                      primary.space.properties[CollectionType.typename];
+                    if (!(collection instanceof CollectionType)) {
+                      return;
+                    }
+
+                    void intentPlugin?.provides.intent.dispatch(
+                      objects.map((object) => ({
+                        action: SpaceAction.ADD_OBJECT,
+                        data: { target: collection, object },
+                      })),
+                    );
+                  }}
+                />
+              );
+            } else if ('graph' in primary && primary.graph instanceof Graph) {
+              component = <DebugGlobal graph={primary.graph} />;
+            } else {
+              component = null;
+            }
+          }
+
+          if (!component) {
+            if (settings.values.wireframe) {
+              if (role === 'main' || role === 'article' || role === 'section') {
+                const primary = data.active ?? data.object;
+                if (!(primary instanceof CollectionType)) {
+                  return <Wireframe label={role} data={data} className='row-span-2 overflow-hidden' />;
+                }
+              }
+            }
+
+            return null;
+          }
+
+          switch (role) {
+            case 'article':
+              return (
+                <div role='none' className='row-span-2 rounded-t-md overflow-x-auto'>
+                  {component}
+                </div>
+              );
+            case 'main':
+              return (
+                <Main.Content
+                  classNames={[baseSurface, fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}
+                >
+                  {component}
+                </Main.Content>
+              );
+          }
+
+          return null;
+        },
+      },
+    },
+  };
+};

package/src/components/DebugGlobal.tsx

@@ -0,0 +1,80 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Gauge, Graph as GraphIcon, Gear, Toolbox, Warning } from '@phosphor-icons/react';
+import React, { type FC, useEffect, useState } from 'react';
+
+import { type Graph } from '@dxos/plugin-graph';
+import { useClient, useConfig } from '@dxos/react-client';
+import { Button, ToggleGroup, ToggleGroupItem, useThemeContext } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+
+import { DebugPanel } from './DebugPanel';
+import { Json, Tree } from './Tree';
+
+const DebugGlobal: FC<{ graph: Graph }> = ({ graph }) => {
+  const { themeMode } = useThemeContext();
+  const [view, setView] = useState<'config' | 'diagnostics' | 'graph'>('graph');
+  const [data, setData] = useState<any>({});
+  const client = useClient();
+  const config = useConfig();
+  const handleRefresh = async () => {
+    const data = await client.diagnostics({ truncate: true });
+    setData(data);
+  };
+  useEffect(() => {
+    void handleRefresh();
+  }, []);
+
+  const handleResetClient = async (force = false) => {
+    if (!force && !window.confirm('Reset storage?')) {
+      return;
+    }
+
+    // TODO(burdon): Throws exception.
+    await client.reset();
+    window.location.href = window.location.origin;
+  };
+
+  const handleOpenDevtools = () => {
+    const vaultUrl = config.values?.runtime?.client?.remoteSource;
+    if (vaultUrl) {
+      window.open(`https://devtools.dev.dxos.org/?target=${vaultUrl}`);
+    }
+  };
+
+  return (
+    <DebugPanel
+      menu={
+        <>
+          <ToggleGroup type='single' value={view}>
+            <ToggleGroupItem value={'graph'} onClick={() => setView('graph')} title={'Plugin graph'}>
+              <GraphIcon className={getSize(5)} />
+            </ToggleGroupItem>
+            <ToggleGroupItem value={'diagnostics'} onClick={() => setView('diagnostics')} title={'Diagnostics'}>
+              <Gauge className={getSize(5)} />
+            </ToggleGroupItem>
+            <ToggleGroupItem value={'config'} onClick={() => setView('config')} title={'Config'}>
+              <Gear className={getSize(5)} />
+            </ToggleGroupItem>
+          </ToggleGroup>
+
+          <div className='grow' />
+          <Button onClick={(event) => handleResetClient(event.shiftKey)} title='Reset client'>
+            <Warning className={mx(getSize(5), 'text-red-700')} />
+          </Button>
+          <Button onClick={handleOpenDevtools} title='Open Devtools'>
+            <Toolbox weight='duotone' className={mx(getSize(5), 'text-700')} />
+          </Button>
+        </>
+      }
+    >
+      {view === 'graph' && <Tree data={graph.toJSON()} />}
+      {view === 'config' && <Json theme={themeMode} data={data.diagnostics?.config} />}
+      {view === 'diagnostics' && <Json theme={themeMode} data={data} />}
+    </DebugPanel>
+  );
+};
+
+export default DebugGlobal;

package/src/components/DebugPanel.tsx

@@ -0,0 +1,34 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { formatDistance } from 'date-fns';
+import React, { type FC, type PropsWithChildren, type ReactNode } from 'react';
+
+import { useConfig } from '@dxos/react-client';
+import { DensityProvider } from '@dxos/react-ui';
+
+export const DebugPanel: FC<PropsWithChildren<{ menu: ReactNode }>> = ({ menu, children }) => {
+  const config = useConfig();
+  return (
+    <>
+      <div className='flex shrink-0 p-2 space-x-2'>
+        <DensityProvider density='fine'>{menu}</DensityProvider>
+      </div>
+      <div className='flex flex-col grow px-2 overflow-hidden'>
+        <div className='flex flex-col grow overflow-auto'>{children}</div>
+
+        {config.values?.runtime?.app?.build?.timestamp && (
+          <div className='p-2 text-sm font-mono'>
+            {config.values?.runtime?.app?.build?.version} (
+            {formatDistance(new Date(config.values?.runtime?.app?.build?.timestamp), new Date(), {
+              addSuffix: true,
+              includeSeconds: true,
+            })}
+            )
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

package/src/components/DebugSettings.tsx

@@ -0,0 +1,159 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Gift, DownloadSimple, FirstAidKit } from '@phosphor-icons/react';
+import React, { useEffect, useState } from 'react';
+
+import { parseFileManagerPlugin, useResolvePlugin } from '@dxos/app-framework';
+import { type ConfigProto, defs, SaveConfig, Storage } from '@dxos/config';
+import { log } from '@dxos/log';
+import { SettingsValue } from '@dxos/plugin-settings';
+import { useClient } from '@dxos/react-client';
+import { useTranslation, Button, Toast, Input, useFileDownload, Select } from '@dxos/react-ui';
+import { getSize, mx } from '@dxos/react-ui-theme';
+import { setDeep } from '@dxos/util';
+
+import { DEBUG_PLUGIN } from '../meta';
+import { type DebugSettingsProps } from '../types';
+
+type Toast = {
+  title: string;
+  description?: string;
+};
+
+const StorageAdapters = {
+  opfs: defs.Runtime.Client.Storage.StorageDriver.WEBFS,
+  idb: defs.Runtime.Client.Storage.StorageDriver.IDB,
+} as const;
+
+export const DebugSettings = ({ settings }: { settings: DebugSettingsProps }) => {
+  const { t } = useTranslation(DEBUG_PLUGIN);
+  const [toast, setToast] = useState<Toast>();
+  const client = useClient();
+  const download = useFileDownload();
+  // TODO(mykola): Get updates from other places that change Config.
+  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
+  const fileManagerPlugin = useResolvePlugin(parseFileManagerPlugin);
+
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+
+  const handleToast = (toast: Toast) => {
+    setToast(toast);
+    const t = setTimeout(() => setToast(undefined), 5_000);
+    return () => clearTimeout(t);
+  };
+
+  const handleDownload = async () => {
+    const data = await client.diagnostics();
+    const file = new Blob([JSON.stringify(data, undefined, 2)], { type: 'text/plain' });
+    const fileName = `composer-${new Date().toISOString().replace(/\W/g, '-')}.json`;
+    download(file, fileName);
+
+    if (fileManagerPlugin?.provides.file.upload) {
+      const info = await fileManagerPlugin.provides.file.upload(new File([file], fileName), client.spaces.default);
+      if (!info) {
+        log.error('diagnostics failed to upload to IPFS');
+        return;
+      }
+      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+
+      // TODO(nf): move to IpfsPlugin?
+      const url = client.config.values.runtime!.services!.ipfs!.gateway + '/' + info.cid;
+      void navigator.clipboard.writeText(url);
+      handleToast({ title: t('settings uploaded'), description: t('settings uploaded to clipboard') });
+      log.info('diagnostics', { url });
+    }
+  };
+
+  const handleRepair = async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({ title: t('settings repair success'), description: JSON.stringify(info, undefined, 2) });
+    } catch (err: any) {
+      handleToast({ title: t('settings repair failed'), description: err.message });
+    }
+  };
+
+  return (
+    <>
+      <SettingsValue label={t('settings show debug panel')}>
+        <Input.Switch checked={settings.debug} onCheckedChange={(checked) => (settings.debug = !!checked)} />
+      </SettingsValue>
+      <SettingsValue label={t('settings show devtools panel')}>
+        <Input.Switch checked={settings.devtools} onCheckedChange={(checked) => (settings.devtools = !!checked)} />
+      </SettingsValue>
+      <SettingsValue label={t('settings wireframe')}>
+        <Input.Switch checked={settings.wireframe} onCheckedChange={(checked) => (settings.wireframe = !!checked)} />
+      </SettingsValue>
+      <SettingsValue label={t('settings download diagnostics')}>
+        <Button onClick={handleDownload}>
+          <DownloadSimple className={getSize(5)} />
+        </Button>
+      </SettingsValue>
+      <SettingsValue label={t('settings repair')}>
+        <Button onClick={handleRepair}>
+          <FirstAidKit className={getSize(5)} />
+        </Button>
+      </SettingsValue>
+
+      {/* TODO(burdon): Move to layout? */}
+      {toast && (
+        <Toast.Root>
+          <Toast.Body>
+            <Toast.Title>
+              <Gift className={mx(getSize(5), 'inline mr-1')} weight='duotone' />
+              <span>{toast.title}</span>
+            </Toast.Title>
+            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+          </Toast.Body>
+        </Toast.Root>
+      )}
+
+      <SettingsValue label={t('settings choose storage adaptor')}>
+        <Select.Root
+          value={
+            Object.entries(StorageAdapters).find(
+              ([name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+            )?.[0]
+          }
+          onValueChange={(value) => {
+            if (confirm(t('settings storage adapter changed alert'))) {
+              updateConfig(
+                storageConfig,
+                setStorageConfig,
+                ['runtime', 'client', 'storage', 'dataStore'],
+                StorageAdapters[value as keyof typeof StorageAdapters],
+              );
+            }
+          }}
+        >
+          <Select.TriggerButton placeholder={t('settings data store label')} />
+          <Select.Portal>
+            <Select.Content>
+              <Select.Viewport>
+                {Object.keys(StorageAdapters).map((key) => (
+                  <Select.Option key={key} value={key}>
+                    {t(`settings storage adaptor ${key} label`)}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
+      </SettingsValue>
+    </>
+  );
+};
+
+const updateConfig = (config: ConfigProto, setConfig: (newConfig: ConfigProto) => void, path: string[], value: any) => {
+  const storageConfigCopy = JSON.parse(JSON.stringify(config ?? {}));
+  setDeep(storageConfigCopy, path, value);
+  setConfig(storageConfigCopy);
+  queueMicrotask(async () => {
+    await SaveConfig(storageConfigCopy);
+  });
+};

package/src/components/DebugSpace.stories.tsx

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type FC, useEffect } from 'react';
+
+import { createSpaceObjectGenerator } from '@dxos/echo-generator';
+import { useSpaces } from '@dxos/react-client/echo';
+import { ClientRepeater } from '@dxos/react-client/testing';
+
+import DebugSpace from './DebugSpace';
+
+const Story: FC = () => {
+  const [space] = useSpaces();
+  useEffect(() => {
+    if (space) {
+      const generator = createSpaceObjectGenerator(space);
+      generator.addSchemas();
+    }
+  }, [space]);
+
+  if (!space) {
+    return null;
+  }
+
+  return <DebugSpace space={space} />;
+};
+
+export default {
+  title: 'plugin-debug/DebugSpace',
+  component: DebugSpace,
+  render: () => <ClientRepeater component={Story} createSpace />,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Default = {};