@dxos/plugin-debug 0.8.4-main.ae835ea → 0.8.4-main.bcb3aa67d6

package/src/capabilities/settings.ts

@@ -2,18 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes } from '@dxos/app-framework';
-import { live } from '@dxos/live-object';
+import * as Effect from 'effect/Effect';
 
-import { meta } from '../meta';
-import { type DebugSettingsProps, DebugSettingsSchema } from '../types';
+import { Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { createKvsStore } from '@dxos/effect';
 
-export default () => {
-  const settings = live<DebugSettingsProps>({});
+import { meta } from '#meta';
+import { DebugCapabilities, Settings } from '#types';
 
-  return contributes(Capabilities.Settings, {
-    prefix: meta.id,
-    schema: DebugSettingsSchema,
-    value: settings,
-  });
-};
+export default Capability.makeModule(() =>
+  Effect.sync(() => {
+    const settingsAtom = createKvsStore({
+      key: meta.id,
+      schema: Settings.Settings,
+      defaultValue: () => ({}),
+    });
+
+    return [
+      Capability.contributes(DebugCapabilities.Settings, settingsAtom),
+      Capability.contributes(AppCapabilities.Settings, {
+        prefix: meta.id,
+        schema: Settings.Settings,
+        atom: settingsAtom,
+      }),
+    ];
+  }),
+);

package/src/components/DebugSettings/DebugSettings.stories.tsx

@@ -0,0 +1,36 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withClientProvider } from '@dxos/react-client/testing';
+
+import { translations } from '../../translations';
+
+import { DebugSettings } from './DebugSettings';
+
+const meta = {
+  title: 'plugins/plugin-debug/components/DebugSettings',
+  component: DebugSettings,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withClientProvider({ createIdentity: true })],
+  tags: ['settings'],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DebugSettings>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    settings: {
+      wireframe: false,
+    },
+    logBuffer: { serialize: () => '' } as any,
+  },
+};

package/src/components/DebugSettings/DebugSettings.tsx

@@ -0,0 +1,228 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useState } from 'react';
+
+import { AppCapabilities, getPersonalSpace } from '@dxos/app-toolkit';
+import { type SettingsSurfaceProps } from '@dxos/app-toolkit/ui';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
+import { type LogBuffer, log } from '@dxos/log';
+import { useClient } from '@dxos/react-client';
+import { Icon, IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { setDeep } from '@dxos/util';
+
+import { meta } from '#meta';
+import { type Settings } 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 type DebugSettingsProps = SettingsSurfaceProps<
+  Settings.Settings,
+  {
+    logBuffer: LogBuffer;
+    onUpload?: AppCapabilities.FileUploader;
+  }
+>;
+
+export const DebugSettings = ({ settings, onSettingsChange, logBuffer, onUpload }: DebugSettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const [toast, setToast] = useState<Toast>();
+  const download = useFileDownload();
+  const [storageConfig, setStorageConfig] = useState<ConfigProto>({});
+  const client = useClient();
+
+  useEffect(() => {
+    void Storage().then((config) => setStorageConfig(config));
+  }, []);
+
+  const handleToast = useCallback(
+    (toast: Toast) => {
+      setToast(toast);
+      const timer = setTimeout(() => setToast(undefined), 5_000);
+      return () => clearTimeout(timer);
+    },
+    [setToast],
+  );
+
+  const handleDownload = useCallback(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 (onUpload) {
+      const personalSpace = getPersonalSpace(client);
+      if (!personalSpace) {
+        log.error('no personal space available for upload');
+        return;
+      }
+      const info = await onUpload(personalSpace.db, new File([file], fileName));
+      if (!info) {
+        log.error('diagnostics failed to upload to IPFS');
+        return;
+      }
+      handleToast({
+        title: t('settings.uploaded.message'),
+        description: t('settings.uploaded.description'),
+      });
+
+      // 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.message'),
+        description: t('settings.uploaded.description'),
+      });
+      log.info('diagnostics', { url });
+    }
+  }, [client, download, handleToast, onUpload, t]);
+
+  const handleDownloadLogs = useCallback(() => {
+    const ndjson = logBuffer.serialize();
+    const file = new Blob([ndjson], { type: 'application/x-ndjson' });
+    const fileName = `composer-logs-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.ndjson`;
+    download(file, fileName);
+  }, [download, logBuffer]);
+
+  const handleRepair = useCallback(async () => {
+    try {
+      const info = await client.repair();
+      setStorageConfig(await Storage());
+      handleToast({
+        title: t('settings.repair-success.message'),
+        description: JSON.stringify(info, undefined, 2),
+      });
+    } catch (err: any) {
+      handleToast({
+        title: t('settings.repair-failed.message'),
+        description: err.message,
+      });
+    }
+  }, [client, handleToast, t]);
+
+  const handleWireframeChange = useCallback(
+    (checked: boolean) => onSettingsChange?.((s) => ({ ...s, wireframe: !!checked })),
+    [onSettingsChange],
+  );
+
+  const handleStorageAdapterChange = useCallback(
+    (value: string) => {
+      if (confirm(t('settings.storage-adapter.changed-alert.message'))) {
+        updateConfig(
+          storageConfig,
+          setStorageConfig,
+          ['runtime', 'client', 'storage', 'dataStore'],
+          StorageAdapters[value as keyof typeof StorageAdapters],
+        );
+      }
+    },
+    [storageConfig, t],
+  );
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('settings.title', { ns: meta.id })}>
+        <SettingsForm.Item title={t('settings.wireframe.label')} description={t('settings.wireframe.description')}>
+          <Input.Switch
+            disabled={!onSettingsChange}
+            checked={settings.wireframe}
+            onCheckedChange={handleWireframeChange}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-diagnostics.label')}
+          description={t('settings.download-diagnostics.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-diagnostics.label')}
+            onClick={handleDownload}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.download-logs.label')}
+          description={t('settings.download-logs.description')}
+        >
+          <IconButton
+            icon='ph--download-simple--regular'
+            iconOnly
+            label={t('settings.download-logs.label')}
+            onClick={handleDownloadLogs}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('settings.repair.label')} description={t('settings.repair.description')}>
+          <IconButton
+            icon='ph--first-aid-kit--regular'
+            iconOnly
+            label={t('settings.repair.label')}
+            onClick={handleRepair}
+          />
+        </SettingsForm.Item>
+
+        {/* TODO(burdon): Move to layout? */}
+        {toast && (
+          <Toast.Root>
+            <Toast.Body>
+              <Toast.Title>
+                <Icon icon='ph--gift--duotone' classNames='inline mr-1' />
+                <span>{toast.title}</span>
+              </Toast.Title>
+              {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+            </Toast.Body>
+          </Toast.Root>
+        )}
+
+        <SettingsForm.Item
+          title={t('settings.choose-storage-adaptor.label')}
+          description={t('settings.choose-storage-adaptor.description')}
+        >
+          <Select.Root
+            disabled={!onSettingsChange}
+            value={
+              Object.entries(StorageAdapters).find(
+                ([_name, value]) => value === storageConfig?.runtime?.client?.storage?.dataStore,
+              )?.[0]
+            }
+            onValueChange={handleStorageAdapterChange}
+          >
+            <Select.TriggerButton disabled={!onSettingsChange} 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.Arrow />
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </SettingsForm.Item>
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};
+
+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/DebugSettings/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DebugSettings } from './DebugSettings';
+
+export default DebugSettings;

package/src/components/SchemaTable/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './SchemaTable';

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -2,46 +2,46 @@
 // Copyright 2024 DXOS.org
 //
 
-import { type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
+import type * as Schema from 'effect/Schema';
+
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, type Obj, Type } from '@dxos/echo';
-import { type TypedObject } from '@dxos/echo/internal';
+import { DXN, Filter, Key, type Type } from '@dxos/echo';
+import { View } from '@dxos/echo';
+import { type OperationInvoker } from '@dxos/operation';
 import { Markdown } from '@dxos/plugin-markdown/types';
 import { Sheet } from '@dxos/plugin-sheet/types';
-import { Diagram } from '@dxos/plugin-sketch/types';
-import { SpaceAction } from '@dxos/plugin-space/types';
+import { Sketch } from '@dxos/plugin-sketch/types';
+import { SpaceOperation } from '@dxos/plugin-space/operations';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DataType, getTypenameFromQuery } from '@dxos/schema';
+import { getTypenameFromQuery } from '@dxos/schema';
 import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-const findViewByTypename = async (views: DataType.View[], typename: string) => {
+const findViewByTypename = async (views: View.View[], typename: string) => {
   return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
 };
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
 
-export const createGenerator = <T extends Obj.Any>(
+export const createGenerator = <S extends Type.AnyObj>(
   client: Client,
-  dispatch: PromiseIntentDispatcher,
-  schema: TypedObject<T>,
-): ObjectGenerator<T> => {
-  return async (space: Space, n: number): Promise<T[]> => {
+  invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
+  schema: S,
+): ObjectGenerator<Schema.Schema.Type<S>> => {
+  return async (space: Space, n: number): Promise<Schema.Schema.Type<S>[]> => {
     const typename = schema.typename;
 
     // Find or create table and view.
-    const { objects: views } = await space.db.query(Filter.type(DataType.View)).run();
+    const views = await space.db.query(Filter.type(View.View)).run();
     const view = await findViewByTypename(views, typename);
-    const staticSchema = client?.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
+    const staticSchema = client?.graph.schemaRegistry.query({ typename }).runSync()[0];
     if (!view && !staticSchema) {
-      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema, show: false }));
-    } else if (!view && staticSchema) {
-      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename, show: false }));
+      await invokePromise(SpaceOperation.AddSchema, { db: space.db, schema, show: false });
     }
 
     // Create objects.
@@ -56,7 +56,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         return space.db.add(
-          Markdown.makeDocument({
+          Markdown.make({
             name: faker.commerce.productName(),
             content: faker.lorem.sentences(5),
           }),
@@ -68,12 +68,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    Diagram.Diagram.typename,
+    Sketch.Sketch.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        // TODO(burdon): Generate diagram.
-        const obj = space.db.add(Diagram.make({ name: faker.commerce.productName() }));
-
+        const obj = space.db.add(Sketch.make({ name: faker.commerce.productName() }));
         return obj;
       });
 

package/src/components/SpaceGenerator/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-import { SpaceGenerator } from './SpaceGenerator';
-
-export default SpaceGenerator;
+export * from './presets';
+export * from './ObjectGenerator';