@dxos/plugin-debug 0.8.4-main.7996785055 → 0.8.4-main.8baae0fced

package/src/components/DebugSettings/DebugSettings.tsx

@@ -0,0 +1,262 @@
+//
+// 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 { Icon, 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.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,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { DebugSettings as default } from './DebugSettings';

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -4,23 +4,22 @@
 
 import type * as Schema from 'effect/Schema';
 
-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, 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 { Sketch } from '@dxos/plugin-sketch/types';
-import { SpaceOperation } from '@dxos/plugin-space/operations';
-import { faker } from '@dxos/random';
+import { DXN, Filter, Key, type 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 { getTypenameFromQuery } 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;
 
 const findViewByTypename = async (views: View.View[], typename: string) => {
   return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
@@ -57,8 +56,8 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
       const objects = range(n).map(() => {
         return space.db.add(
           Markdown.make({
-            name: faker.commerce.productName(),
-            content: faker.lorem.sentences(5),
+            name: random.commerce.productName(),
+            content: random.lorem.sentences(5),
           }),
         );
       });
@@ -71,7 +70,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     Sketch.Sketch.typename,
     async (space, n, cb) => {
       const objects = range(n).map(() => {
-        const obj = space.db.add(Sketch.make({ name: faker.commerce.productName() }));
+        const obj = space.db.add(Sketch.make({ name: random.commerce.productName() }));
         return obj;
       });
 
@@ -107,7 +106,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
           Sheet.make({
-            name: faker.commerce.productName(),
+            name: random.commerce.productName(),
             cells,
           }),
         );

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

@@ -15,7 +15,7 @@ import {
 } from '@antv/layout';
 import { type Editor, type SerializedStore, type TLRecord, createBindingId, createShapeId } from '@tldraw/tldraw';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
@@ -32,10 +32,10 @@ import { isTruthy, 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) {
@@ -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/presets.ts

@@ -4,16 +4,14 @@
 
 import * as Schema from 'effect/Schema';
 
-import { AgentPrompt, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
-import { Prompt } from '@dxos/blueprints';
+import { AgentPrompt, WebSearchBlueprint } from '@dxos/assistant-toolkit';
+import { Routine, Trigger, Operation } from '@dxos/compute';
 import { type ComputeGraphModel, NODE_INPUT } from '@dxos/conductor';
 import { DXN, Feed, Filter, JsonSchema, Key, Obj, Query, type QueryAST, Ref, Tag } from '@dxos/echo';
-import { Trigger } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
-import { Operation } from '@dxos/operation';
 import { InboxOperation } from '@dxos/plugin-inbox';
-import { Mailbox } from '@dxos/plugin-inbox/types';
-import { Markdown } from '@dxos/plugin-markdown/types';
+import { Mailbox } from '@dxos/plugin-inbox';
+import { Markdown } from '@dxos/plugin-markdown';
 import { type Space } from '@dxos/react-client/echo';
 import {
   type ComputeShape,
@@ -21,9 +19,9 @@ import {
   createChat,
   createComputeGraph,
   createConstant,
+  createFeed,
   createFunction,
   createGpt,
-  createQueue,
   createRandom,
   createSurface,
   createTemplate,
@@ -73,9 +71,9 @@ export const generator = () => ({
           );
 
           const tag = space.db.add(Tag.make({ label: 'Investor' }));
-          const tagDxn = Obj.getDXN(tag).toString();
-          Obj.change(doc, (obj) => {
-            Obj.getMeta(obj).tags = [tagDxn];
+          const tagDXN = Obj.getDXN(tag).toString();
+          Obj.update(doc, (doc) => {
+            Obj.getMeta(doc).tags = [tagDXN];
           });
 
           // space.db.add(
@@ -87,7 +85,7 @@ export const generator = () => ({
           // );
 
           space.db.add(
-            Obj.make(Person.Person, { [Obj.Meta]: { tags: [tagDxn] }, fullName: 'Rich', organization: Ref.make(org) }),
+            Obj.make(Person.Person, { [Obj.Meta]: { tags: [tagDXN] }, fullName: 'Rich', organization: Ref.make(org) }),
           );
           space.db.add(
             Obj.make(Person.Person, {
@@ -122,23 +120,20 @@ export const generator = () => ({
         invariant(mailbox, 'Mailbox not found');
         const mailboxFeed = await mailbox.feed?.tryLoad();
         invariant(mailboxFeed, 'Mailbox missing feed reference');
-        const queueDxn = Feed.getQueueDxn(mailboxFeed)?.toString();
-        invariant(queueDxn, 'Mailbox feed missing queue DXN key');
+        const feedDXN = Feed.getQueueDxn(mailboxFeed)?.toString();
+        invariant(feedDXN, 'Mailbox feed missing DXN');
         const tag = await space.db.query(Filter.type(Tag.Tag, { label: 'Investor' })).first();
-        const tagDxn = Obj.getDXN(tag).toString();
+        const tagDXN = Obj.getDXN(tag).toString();
 
         const objects = range(n, () => {
-          const contactsQuery = Query.select(Filter.type(Person.Person)).select(Filter.tag(tagDxn));
-          const organizationsQuery = Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagDxn));
-          const notesQuery = Query.select(Filter.type(Markdown.Document)).select(Filter.tag(tagDxn));
+          const contactsQuery = Query.select(Filter.type(Person.Person)).select(Filter.tag(tagDXN));
+          const organizationsQuery = Query.select(Filter.type(Organization.Organization)).select(Filter.tag(tagDXN));
+          const notesQuery = Query.select(Filter.type(Markdown.Document)).select(Filter.tag(tagDXN));
 
           space.db.add(
             Trigger.make({
               enabled: true,
-              spec: {
-                kind: 'timer',
-                cron: '* * * * *', // Every minute.
-              },
+              spec: Trigger.specTimer('* * * * *'), // Every minute.
               function: Ref.make(Operation.serialize(InboxOperation.GoogleMailSync)),
               input: {
                 mailbox: Ref.make(mailbox),
@@ -146,23 +141,8 @@ export const generator = () => ({
             }),
           );
 
-          space.db.add(
-            Trigger.make({
-              enabled: true,
-              // TODO(wittjosiah): Queue trigger doesn't support matching query of the column.
-              spec: {
-                kind: 'queue',
-                queue: queueDxn,
-              },
-              function: Ref.make(Operation.serialize(EntityExtraction)),
-              input: {
-                source: '{{event.item}}',
-              },
-            }),
-          );
-
           const researchPrompt = space.db.add(
-            Prompt.make({
+            Routine.make({
               name: 'Research',
               description: 'Research organization',
               input: Schema.Struct({
@@ -177,19 +157,14 @@ export const generator = () => ({
                 Create a research note for it at the end.
                 NOTE: Do mocked reseach (set mockSearch to true).
               `,
-              blueprints: [Ref.make(ResearchBlueprint.make())],
+              blueprints: [Ref.make(WebSearchBlueprint.make())],
             }),
           );
 
           space.db.add(
             Trigger.make({
               enabled: true,
-              spec: {
-                kind: 'subscription',
-                query: {
-                  ast: organizationsQuery.ast,
-                },
-              },
+              spec: Trigger.specSubscription(organizationsQuery),
               function: Ref.make(Operation.serialize(AgentPrompt)),
               input: {
                 prompt: Ref.make(researchPrompt),
@@ -204,7 +179,7 @@ export const generator = () => ({
                 properties: { labels: Filter.contains('investor') },
               }),
             ).from({
-              queues: [queueDxn],
+              feeds: [feedDXN],
             }),
             jsonSchema: JsonSchema.toJsonSchema(Message.Message),
           });
@@ -618,7 +593,7 @@ export const generator = () => ({
             );
             const converter = canvasModel.createNode(createFunction(position({ x: 0, y: 0 })));
             const view = canvasModel.createNode(createText(position({ x: 12, y: 0 })));
-            const queue = canvasModel.createNode(createQueue(position({ x: 0, y: 12 })));
+            const queue = canvasModel.createNode(createFeed(position({ x: 0, y: 12 })));
 
             builder
               .createEdge({
@@ -763,8 +738,8 @@ const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
     functionTrigger = triggerShape.functionTrigger!.target!;
     const triggerSpec = functionTrigger.spec;
     invariant(triggerSpec && triggerSpec.kind === triggerKind, 'No trigger spec.');
-    Obj.change(functionTrigger, (ft) => {
-      initSpec(ft.spec as any);
+    Obj.update(functionTrigger, (functionTrigger) => {
+      initSpec(functionTrigger.spec as any);
     });
   });
 
@@ -804,7 +779,7 @@ const setupQueue = (
     }),
   );
   const queue = canvasModel.createNode(
-    createQueue(
+    createFeed(
       args?.queuePosition ? rawPosition(args.queuePosition) : position({ x: -3, y: 3, width: 14, height: 10 }),
     ),
   );
@@ -815,9 +790,9 @@ const setupQueue = (
 const attachTrigger = (functionTrigger: Trigger.Trigger | undefined, computeModel: ComputeGraphModel) => {
   invariant(functionTrigger);
   const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
-  Obj.change(functionTrigger, (obj) => {
-    obj.function = Ref.make(computeModel.root);
-    obj.inputNodeId = inputNode.id;
+  Obj.update(functionTrigger, (functionTrigger) => {
+    functionTrigger.function = Ref.make(computeModel.root);
+    functionTrigger.inputNodeId = inputNode.id;
   });
 };
 

package/src/components/index.ts

@@ -2,5 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
+import { type ComponentType, lazy } from 'react';
+
+export const DebugSettings: ComponentType<any> = lazy(() => import('./DebugSettings'));
+
 export * from './SchemaTable';
 export * from './SpaceGenerator';

package/src/containers/DebugGraph/DebugGraph.tsx

@@ -2,12 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC } from 'react';
+import React from 'react';
 
 import { Tree } from '@dxos/devtools';
 import { Graph } from '@dxos/plugin-graph';
 
 export type DebugGraphProps = { graph: Graph.Graph; root: string };
-export const DebugGraph: FC<DebugGraphProps> = ({ graph, root }) => {
+
+export const DebugGraph = ({ graph, root }: DebugGraphProps) => {
   return <Tree data={Graph.toJSON(graph, root)} />;
 };

package/src/containers/DebugGraph/index.ts

@@ -2,6 +2,4 @@
 // Copyright 2023 DXOS.org
 //
 
-import { DebugGraph } from './DebugGraph';
-
-export default DebugGraph;
+export { DebugGraph as default } from './DebugGraph';