@dxos/plugin-debug 0.8.4-main.f9ba587 → 0.8.4-staging.60fe92afc8

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 { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/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,
+    },
+    logStore: { export: async () => '' } as any,
+  },
+};

package/src/components/DebugSettings/DebugSettings.tsx

@@ -0,0 +1,259 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { AppCapabilities, getPersonalSpace } from '@dxos/app-toolkit';
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { type ConfigProto, SaveConfig, Storage, defs } from '@dxos/config';
+import { log } from '@dxos/log';
+import { type IdbLogStore } from '@dxos/log-store-idb';
+import { useClient } from '@dxos/react-client';
+import { IconButton, Input, Select, Toast, useFileDownload, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+import { TRACE_ALL_KEY } from '@dxos/tracing';
+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 = AppSurface.SettingsArticleProps<
+  Settings.Settings,
+  {
+    logStore: IdbLogStore;
+    onUpload?: AppCapabilities.FileUploader;
+  }
+>;
+
+export const DebugSettings = ({ settings, onSettingsChange, logStore, 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(async () => {
+    const ndjson = await logStore.export();
+    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, logStore]);
+
+  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 traceAll = useMemo(
+    () => settings.traceAll ?? (typeof localStorage !== 'undefined' && localStorage.getItem(TRACE_ALL_KEY) === 'true'),
+    [settings.traceAll],
+  );
+
+  const handleTraceAllChange = useCallback(
+    (checked: boolean) => {
+      const value = !!checked;
+      localStorage.setItem(TRACE_ALL_KEY, String(value));
+      onSettingsChange?.((s) => ({ ...s, traceAll: value }));
+    },
+    [onSettingsChange],
+  );
+
+  const handleOpenTracingPanel = useCallback(() => {
+    window.open('about:blank', '_blank');
+  }, []);
+
+  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.trace-all.label')} description={t('settings.trace-all.description')}>
+          <Input.Switch disabled={!onSettingsChange} checked={traceAll} onCheckedChange={handleTraceAllChange} />
+        </SettingsForm.Item>
+        <SettingsForm.Item
+          title={t('settings.tracing-panel.label')}
+          description={t('settings.tracing-panel.description')}
+        >
+          <IconButton
+            icon='ph--arrow-square-out--regular'
+            iconOnly
+            label={t('settings.tracing-panel.label')}
+            onClick={handleOpenTracingPanel}
+          />
+        </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.Title icon='ph--gift--duotone'>
+              <span>{toast.title}</span>
+            </Toast.Title>
+            {toast.description && <Toast.Description>{toast.description}</Toast.Description>}
+          </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,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { DebugSettings as default } from './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,58 +2,65 @@
 // Copyright 2024 DXOS.org
 //
 
-import { addressToA1Notation } from '@dxos/compute';
+import { addressToA1Notation } from '@dxos/compute-hyperformula';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Ref } from '@dxos/echo';
-import { type TypedObject } from '@dxos/echo-schema';
-import { DocumentType } from '@dxos/plugin-markdown/types';
-import { createSheet } from '@dxos/plugin-sheet/types';
-import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
-import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
-import { faker } from '@dxos/random';
+import { EID, Filter, Key, Type, View } from '@dxos/echo';
+import { OperationInvoker } from '@dxos/operation';
+import { Markdown } from '@dxos/plugin-markdown';
+import { Sheet } from '@dxos/plugin-sheet';
+import { Sketch } from '@dxos/plugin-sketch';
+import { SpaceOperation } from '@dxos/plugin-space';
+import { random } from '@dxos/random';
+import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { TableType } from '@dxos/react-ui-table';
-import { createView, DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { getTypeURIFromQuery } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
-const generator: ValueGenerator = faker as any;
+const generator: ValueGenerator = random as any;
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+const findViewByTypeUri = async (views: View.View[], typeUri: string) => {
+  return views.find((view) => getTypeURIFromQuery(view.query.ast) === typeUri);
+};
 
-export const createGenerator = <T extends Obj.Any>(type: TypedObject<T>): ObjectGenerator<T> => {
-  return async (space: Space, n: number, cb?: (objects: T[]) => void): Promise<T[]> => {
-    // Find or create mutable schema.
-    const schema =
-      (await space.db.schemaRegistry.query({ typename: type.typename }).firstOrUndefined()) ??
-      (await space.db.schemaRegistry.register([type]))[0];
+export type ObjectGenerator<T> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
 
-    // Create objects.
-    const generate = createAsyncGenerator(generator, schema.snapshot, { db: space.db });
-    const objects = await generate.createObjects(n);
+export const createGenerator = <S extends Type.AnyObj>(
+  client: Client,
+  invokePromise: OperationInvoker.OperationInvoker['invokePromise'],
+  schema: S,
+): ObjectGenerator<Type.InstanceType<S>> => {
+  return async (space: Space, n: number): Promise<Type.InstanceType<S>[]> => {
+    const typename = Type.getTypename(schema);
 
     // Find or create table and view.
-    const { objects: tables } = await space.db.query(Filter.type(TableType)).run();
-    const table = tables.find((table) => table.view?.target?.query?.typename === type.typename);
-    if (!table) {
-      const name = type.typename.split('/').pop() ?? type.typename;
-      const view = createView({ name, typename: type.typename, jsonSchema: schema.jsonSchema });
-      space.db.add(Obj.make(TableType, { name, view: Ref.make(view) }));
+    const views = await space.db.query(Filter.type(View.View)).run();
+    const view = await findViewByTypeUri(views, Type.getURI(schema));
+    const staticSchema = client
+      ? client.graph.registry
+          .list()
+          .filter(Type.isType)
+          .find((s) => Type.getTypename(s) === typename)
+      : undefined;
+    if (!view && !staticSchema) {
+      await invokePromise(SpaceOperation.AddType, { db: space.db, type: schema, show: false });
     }
 
-    return objects;
+    // Create objects.
+    const generate = createAsyncGenerator(generator, schema, { db: space.db });
+    return generate.createObjects(n);
   };
 };
 
 export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   [
-    DocumentType.typename,
+    Type.getTypename(Markdown.Document),
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         return space.db.add(
-          Obj.make(DocumentType, {
-            name: faker.commerce.productName(),
-            content: Ref.make(Obj.make(DataType.Text, { content: faker.lorem.sentences(5) })),
+          Markdown.make({
+            name: random.commerce.productName(),
+            content: random.lorem.sentences(5),
           }),
         );
       });
@@ -63,17 +70,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    DiagramType.typename,
+    Type.getTypename(Sketch.Sketch),
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        // TODO(burdon): Generate diagram.
-        const obj = space.db.add(
-          Obj.make(DiagramType, {
-            name: faker.commerce.productName(),
-            canvas: Ref.make(Obj.make(CanvasType, { content: {} })),
-          }),
-        );
-
+        const obj = space.db.add(Sketch.make({ name: random.commerce.productName() }));
         return obj;
       });
 
@@ -83,10 +83,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   ],
   // TODO(burdon): Create unit tests.
   [
-    SheetType.typename,
+    Type.getTypename(Sheet.Sheet),
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const cells: Record<string, CellValue> = {};
+        const cells: Record<string, Sheet.CellValue> = {};
         const year = new Date().getFullYear();
         const cols = 4;
         const rows = 16;
@@ -108,8 +108,8 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set width.
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
-          createSheet({
-            name: faker.commerce.productName(),
+          Sheet.make({
+            name: random.commerce.productName(),
             cells,
           }),
         );
@@ -120,7 +120,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    ComputeGraph.typename,
+    Type.getTypename(ComputeGraph),
     async (space, n, cb) => {
       const objects = range(n, () => {
         const model = ComputeGraphModel.create();
@@ -130,7 +130,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
           .createNode({
             id: 'gpt-QUEUE_ID',
             type: 'constant',
-            value: new DXN(DXN.kind.QUEUE, ['data', space.id, Key.ObjectId.random()]).toString(),
+            value: EID.make({ spaceId: space.id, entityId: Key.EntityId.random() }),
           })
           .createNode({ id: 'gpt-APPEND', type: 'append' })
           .createNode({ id: 'gpt-OUTPUT', type: NODE_OUTPUT })

package/src/components/SpaceGenerator/draw-util.ts

@@ -3,20 +3,20 @@
 //
 
 // TODO(burdon): workerize-loader dep.
-import { Graph, type Edge, type PlainObject } from '@antv/graphlib';
+import { type Edge, Graph, type PlainObject } from '@antv/graphlib';
 import {
-  type Layout,
   D3ForceLayout,
   type D3ForceLayoutOptions,
   GridLayout,
   type GridLayoutOptions,
+  type Layout,
   RadialLayout,
   type RadialLayoutOptions,
 } from '@antv/layout';
-import { createBindingId, createShapeId, type Editor, type SerializedStore, type TLRecord } from '@tldraw/tldraw';
+import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
-import { faker } from '@dxos/random';
-import { isNotFalsy, range } from '@dxos/util';
+import { random } from '@dxos/random';
+import { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
 //  - https://www.npmjs.com/package/@antv/layout (uses d3)
@@ -32,10 +32,10 @@ import { isNotFalsy, range } from '@dxos/util';
 // TODO(burdon): Factor out.
 // TODO(burdon): Map ECHO to Graph.
 export const generateGraph = (): Graph<PlainObject, PlainObject> => {
-  const nodes = range(faker.number.int({ min: 8, max: 32 })).map(() => ({
-    id: faker.string.uuid(),
+  const nodes = range(random.number.int({ min: 8, max: 32 })).map(() => ({
+    id: random.string.uuid(),
     data: {
-      label: faker.lorem
+      label: random.lorem
         .words(2)
         .split(' ')
         .map((word) => word.charAt(0).toUpperCase())
@@ -46,7 +46,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
   const unlinked = new Set(nodes.map((node) => node.id));
   const pop = () => {
     if (unlinked.size) {
-      const id = faker.helpers.arrayElement(Array.from(unlinked));
+      const id = random.helpers.arrayElement(Array.from(unlinked));
       unlinked.delete(id);
       return id;
     }
@@ -54,12 +54,12 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
 
   const edges: Edge<PlainObject>[] = [];
   const link = (source: string, target: string) => {
-    edges.push({ id: faker.string.uuid(), source, target, data: {} });
+    edges.push({ id: random.string.uuid(), source, target, data: {} });
   };
 
   const branching = 3;
   const traverse = (source: string) => {
-    const targets = range(faker.number.int({ min: 1, max: branching }))
+    const targets = range(random.number.int({ min: 1, max: branching }))
       .map(() => {
         const target = pop();
         if (target) {
@@ -67,7 +67,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
         }
         return target;
       })
-      .filter(isNotFalsy);
+      .filter(isTruthy);
 
     for (const target of targets) {
       traverse(target);
@@ -106,7 +106,7 @@ export const drawGraph = async (
     preventOverlap: true,
   };
 
-  const layoutType = faker.helpers.arrayElement(['d3force', 'grid', 'radial']);
+  const layoutType = random.helpers.arrayElement(['d3force', 'grid', 'radial']);
   let layout: Layout<any>;
   switch (layoutType) {
     case 'd3force': {

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';