@dxos/plugin-debug 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/src/components/DebugStatus.tsx

@@ -4,15 +4,14 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 
-import { Capabilities, firstIdInPart, useCapability } from '@dxos/app-framework';
+import { useAppGraph, useLayout } from '@dxos/app-framework';
 import { TimeoutError } from '@dxos/async';
 import { StatsPanel, useStats } from '@dxos/devtools';
 import { getActiveSpace } from '@dxos/plugin-space';
 import { StatusBar } from '@dxos/plugin-status-bar';
 import { ConnectionState } from '@dxos/protocols/proto/dxos/client/services';
 import { useNetworkStatus } from '@dxos/react-client/mesh';
-import { Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { Icon, Popover } from '@dxos/react-ui';
 
 const styles = {
   success: 'text-sky-300 dark:text-green-700',
@@ -136,9 +135,9 @@ const SwarmIndicator = () => {
 // TODO(burdon): Merge with SaveStatus.
 const SavingIndicator = () => {
   const [state, _setState] = useState(0);
-  const location = useCapability(Capabilities.Location);
-  const { graph } = useCapability(Capabilities.AppGraph);
-  const _space = location && graph ? getActiveSpace(graph, firstIdInPart(location.active, 'main')) : undefined;
+  const layout = useLayout();
+  const { graph } = useAppGraph();
+  const _space = graph ? getActiveSpace(graph, layout.active[0]) : undefined;
   // TODO(dmaretskyi): Fix this when we have save status for automerge.
   // useEffect(() => {
   //   if (!space) {
@@ -186,22 +185,19 @@ const PerformanceIndicator = () => {
   const [stats, refreshStats] = useStats();
 
   return (
-    <>
-      <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
-        <Icon icon='ph--chart-bar--regular' size={4} />
-      </StatusBar.Button>
-      {visible && (
-        <div
-          className={mx(
-            'z-20 absolute bottom-[--statusbar-size] right-4 w-[450px]',
-            'overflow-x-hidden overflow-y-auto scrollbar-thin',
-            'border-x border-y border-separator',
-          )}
-        >
+    <Popover.Root open={visible} onOpenChange={setVisible}>
+      <Popover.Trigger asChild>
+        <StatusBar.Button onClick={() => setVisible((visible) => !visible)} title='Performance panels'>
+          <Icon icon='ph--chart-bar--regular' size={4} />
+        </StatusBar.Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content classNames='max-is-[min(var(--radix-popover-content-available-width),300px)] max-bs-[--radix-popover-content-available-height]'>
           <StatsPanel stats={stats} onRefresh={refreshStats} />
-        </div>
-      )}
-    </>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
 };
 

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -5,8 +5,6 @@
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
 import { ObjectId, type BaseObject, type TypedObject } from '@dxos/echo-schema';
-import { type FunctionTrigger, TriggerKind } from '@dxos/functions/types';
-import { invariant } from '@dxos/invariant';
 import { DXN, SpaceId } from '@dxos/keys';
 import { create, makeRef, type ReactiveObject } from '@dxos/live-object';
 import { DocumentType } from '@dxos/plugin-markdown/types';
@@ -15,23 +13,6 @@ import { SheetType, type CellValue } from '@dxos/plugin-sheet/types';
 import { CanvasType, DiagramType } from '@dxos/plugin-sketch/types';
 import { faker } from '@dxos/random';
 import { Filter, type Space } from '@dxos/react-client/echo';
-import {
-  type ComputeShape,
-  createAppend,
-  createComputeGraph,
-  createConstant,
-  createGpt,
-  createQueue,
-  createText,
-  createTrigger,
-} from '@dxos/react-ui-canvas-compute';
-import {
-  pointMultiply,
-  pointsToRect,
-  rectToPoints,
-  CanvasBoardType,
-  CanvasGraphModel,
-} from '@dxos/react-ui-canvas-editor';
 import { TableType } from '@dxos/react-ui-table';
 import { createView, TextType } from '@dxos/schema';
 import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
@@ -155,70 +136,8 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
       return objects;
     },
   ],
-  [
-    CanvasBoardType.typename,
-    async (space, n, cb) => {
-      const objects = range(n, () => {
-        const canvasModel = CanvasGraphModel.create<ComputeShape>();
-
-        let functionTrigger: FunctionTrigger | undefined;
-        canvasModel.builder.call((builder) => {
-          const gpt = canvasModel.createNode(createGpt(position({ x: 0, y: -14 })));
-          const triggerShape = createTrigger({ triggerKind: TriggerKind.Webhook, ...position({ x: -18, y: -2 }) });
-          const trigger = canvasModel.createNode(triggerShape);
-          const text = canvasModel.createNode(createText(position({ x: 19, y: 3, width: 10, height: 10 })));
-          const queueId = canvasModel.createNode(
-            createConstant({
-              value: new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString(),
-              ...position({ x: -18, y: 5, width: 8, height: 6 }),
-            }),
-          );
-          const queue = canvasModel.createNode(createQueue(position({ x: -3, y: 3, width: 14, height: 10 })));
-          const append = canvasModel.createNode(createAppend(position({ x: 10, y: 6 })));
-
-          builder
-            .createEdge({ source: trigger.id, target: gpt.id, input: 'prompt', output: 'bodyText' })
-            .createEdge({ source: gpt.id, target: text.id, output: 'text' })
-            .createEdge({ source: queueId.id, target: queue.id })
-            .createEdge({ source: queueId.id, target: append.id, input: 'id' })
-            .createEdge({ source: gpt.id, target: append.id, output: 'messages', input: 'items' });
-
-          functionTrigger = triggerShape.functionTrigger!.target!;
-        });
-
-        const computeModel = createComputeGraph(canvasModel);
-        const computeGraph = computeModel.root;
-
-        invariant(functionTrigger);
-        functionTrigger.function = DXN.fromLocalObjectId(computeGraph.id).toString();
-        functionTrigger.meta ??= {};
-        const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
-        functionTrigger.meta.computeNodeId = inputNode.id;
-
-        return space.db.add(
-          create(CanvasBoardType, {
-            computeGraph: makeRef(computeGraph),
-            layout: canvasModel.graph,
-          }),
-        );
-      });
-      cb?.(objects);
-      return objects;
-    },
-  ],
 ]);
 
-const position = (rect: { x: number; y: number; width?: number; height?: number }) => {
-  const snap = 32;
-  const [center, size] = rectToPoints({ width: 0, height: 0, ...rect });
-  const { x, y, width, height } = pointsToRect([pointMultiply(center, snap), pointMultiply(size, snap)]);
-  if (width && height) {
-    return { center: { x, y }, size: width && height ? { width, height } : undefined };
-  } else {
-    return { center: { x, y } };
-  }
-};
-
 export const createGenerator = <T extends BaseObject>(type: TypedObject<T>): ObjectGenerator<T> => {
   return async (
     space: Space,

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -12,13 +12,13 @@ import { DiagramType } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
 import { getTypename, type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { CanvasBoardType } from '@dxos/react-ui-canvas-editor';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
 import { Testing } from '@dxos/schema/testing';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
 import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
 import { SchemaTable } from './SchemaTable';
+import { presets } from './presets';
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -27,19 +27,19 @@ export type SpaceGeneratorProps = {
 
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
   const client = useClient();
-  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph, CanvasBoardType]; // TODO(burdon): Make extensible.
-  const mutableTypes = [Testing.OrgType, Testing.ProjectType, Testing.ContactType];
+  const staticTypes = [DocumentType, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
+  const mutableTypes = [Testing.OrgType, Testing.ProjectType, Testing.ContactType, Testing.EmailType];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
 
   // Create type generators.
   const typeMap = useMemo(() => {
-    client.addTypes(staticTypes);
+    client.addTypes([...staticTypes, ...presets.schemas]);
     const mutableGenerators = new Map<string, ObjectGenerator<any>>(
-      mutableTypes.map((type) => [type.typename, createGenerator(type)]),
+      mutableTypes.map((type) => [type.typename, createGenerator(type as any)]),
     );
 
-    return new Map([...staticGenerators, ...mutableGenerators]);
+    return new Map([...staticGenerators, ...presets.items, ...mutableGenerators]);
   }, [client, mutableTypes]);
 
   // Query space to get info.
@@ -106,6 +106,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
 
       <SchemaTable types={staticTypes} objects={info.objects} label='Static Types' onClick={handleCreateData} />
       <SchemaTable types={mutableTypes} objects={info.objects} label='Mutable Types' onClick={handleCreateData} />
+      <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
 
       <SyntaxHighlighter classNames='flex text-xs' language='json'>
         {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}

package/src/components/SpaceGenerator/presets.ts

@@ -0,0 +1,453 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type ComputeGraphModel, EmailTriggerOutput, NODE_INPUT } from '@dxos/conductor';
+import { AST, ObjectId, S, toJsonSchema } from '@dxos/echo-schema';
+import { FunctionTrigger, TriggerKind } from '@dxos/functions/types';
+import { invariant } from '@dxos/invariant';
+import { DXN, SpaceId } from '@dxos/keys';
+import { create, makeRef } from '@dxos/live-object';
+import { Filter, type Space } from '@dxos/react-client/echo';
+import {
+  type ComputeShape,
+  createAppend,
+  createChat,
+  createComputeGraph,
+  createConstant,
+  createFunction,
+  createGpt,
+  createQueue,
+  createSurface,
+  createTemplate,
+  createText,
+  createTrigger,
+} from '@dxos/react-ui-canvas-compute';
+import {
+  CanvasBoardType,
+  CanvasGraphModel,
+  pointMultiply,
+  pointsToRect,
+  rectToPoints,
+} from '@dxos/react-ui-canvas-editor';
+import { TableType } from '@dxos/react-ui-table';
+import { range } from '@dxos/util';
+
+import { type ObjectGenerator } from './ObjectGenerator';
+
+export enum PresetName {
+  EMAIL_TABLE = 'email-table',
+  GPT_QUEUE = 'webhook-gpt-queue',
+  CHAT_GPT = 'chat-gpt-text',
+  EMAIL_WITH_SUMMARY = 'email-gptSummary-table',
+  OBJECT_CHANGE_QUEUE = 'objectChange-queue',
+  FOREX_FUNCTION_CALL = 'forex-function-call',
+  DISCORD_MESSAGES = 'discord-messages',
+}
+
+export const presets = {
+  schemas: [CanvasBoardType, FunctionTrigger],
+  types: Object.values(PresetName).map((name) => ({ typename: name })),
+  items: [
+    [
+      PresetName.GPT_QUEUE,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const gpt = canvasModel.createNode(createGpt(position({ x: 0, y: -14 })));
+            const triggerShape = createTrigger({ triggerKind: TriggerKind.Webhook, ...position({ x: -18, y: -2 }) });
+            const trigger = canvasModel.createNode(triggerShape);
+            const text = canvasModel.createNode(createText(position({ x: 19, y: 3, width: 10, height: 10 })));
+            const { queueId } = setupQueue(canvasModel);
+            const append = canvasModel.createNode(createAppend(position({ x: 10, y: 6 })));
+
+            builder
+              .createEdge({ source: trigger.id, target: gpt.id, input: 'prompt', output: 'bodyText' })
+              .createEdge({ source: gpt.id, target: text.id, output: 'text' })
+              .createEdge({ source: queueId.id, target: append.id, input: 'id' })
+              .createEdge({ source: gpt.id, target: append.id, output: 'messages', input: 'items' });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.GPT_QUEUE, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.OBJECT_CHANGE_QUEUE,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          const template = canvasModel.createNode(
+            createTemplate({
+              valueType: 'object',
+              ...rawPosition({ centerX: -64, centerY: -79, width: 320, height: 320 }),
+            }),
+          );
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const triggerShape = createTrigger({
+              triggerKind: TriggerKind.Subscription,
+              ...position({ x: -18, y: -2 }),
+            });
+            const trigger = canvasModel.createNode(triggerShape);
+            const { queueId } = setupQueue(canvasModel, {
+              queuePosition: { centerX: -80, centerY: 378, width: 320, height: 448 },
+            });
+            const append = canvasModel.createNode(
+              createAppend(rawPosition({ centerX: 320, centerY: 192, width: 128, height: 122 })),
+            );
+
+            builder
+              .createEdge({ source: queueId.id, target: append.id, input: 'id' })
+              .createEdge({ source: template.id, target: append.id, input: 'items' })
+              .createEdge({ source: trigger.id, target: template.id, output: 'type', input: 'type' })
+              .createEdge({
+                source: trigger.id,
+                target: template.id,
+                output: 'changedObjectId',
+                input: 'changedObjectId',
+              });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+            const triggerSpec = functionTrigger.spec;
+            invariant(triggerSpec && triggerSpec.type === TriggerKind.Subscription, 'No trigger spec.');
+            triggerSpec.filter = { type: 'dxn:type:dxos.org/type/Chess' };
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          const templateComputeNode = computeModel.nodes.find((n) => n.id === template.node);
+          invariant(templateComputeNode, 'Template compute node was not created.');
+          templateComputeNode.value = ['{', '  "@type": "{{type}}",', '  "id": "{{changedObjectId}}"', '}'].join('\n');
+          templateComputeNode.inputSchema = toJsonSchema(S.Struct({ type: S.String, changedObjectId: S.String }));
+
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.OBJECT_CHANGE_QUEUE, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.EMAIL_TABLE,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          const results = space.db.query(Filter.schema(TableType)).runSync();
+          const emailTable = results.find((r) => r.object?.view?.target?.query?.type?.endsWith('Email'));
+          invariant(emailTable, 'Email table not found.');
+
+          const template = canvasModel.createNode(
+            createTemplate({
+              valueType: 'object',
+              ...rawPosition({ centerX: -80, centerY: -64, width: 320, height: 320 }),
+            }),
+          );
+          const templateContent = ['{'];
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const triggerShape = createTrigger({ triggerKind: TriggerKind.Email, ...position({ x: -18, y: -2 }) });
+            const trigger = canvasModel.createNode(triggerShape);
+
+            const tableId = canvasModel.createNode(
+              createConstant({
+                value: DXN.fromLocalObjectId(emailTable.id).toString(),
+                ...position({ x: -18, y: 5, width: 8, height: 6 }),
+              }),
+            );
+
+            const appendToTable = canvasModel.createNode(createAppend(position({ x: 10, y: 6 })));
+
+            const properties = AST.getPropertySignatures(EmailTriggerOutput.ast);
+            for (let i = 0; i < properties.length; i++) {
+              const propName = properties[i].name.toString();
+              builder.createEdge({ source: trigger.id, target: template.id, input: propName, output: propName });
+              templateContent.push(`  "${propName}": "{{${propName}}}"` + (i === properties.length - 1 ? '' : ','));
+            }
+            templateContent.push('}');
+
+            builder
+              .createEdge({ source: tableId.id, target: appendToTable.id, input: 'id' })
+              .createEdge({ source: template.id, target: appendToTable.id, input: 'items' });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          const templateComputeNode = computeModel.nodes.find((n) => n.id === template.node);
+          invariant(templateComputeNode, 'Template compute node was not created.');
+          templateComputeNode.value = templateContent.join('\n');
+          templateComputeNode.inputSchema = toJsonSchema(EmailTriggerOutput);
+
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.EMAIL_TABLE, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.CHAT_GPT,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          canvasModel.builder.call((builder) => {
+            const gpt = canvasModel.createNode(createGpt(position({ x: 0, y: -14 })));
+            const chat = canvasModel.createNode(createChat(position({ x: -18, y: -2 })));
+            const text = canvasModel.createNode(createText(position({ x: 19, y: 3, width: 10, height: 10 })));
+            const { queueId } = setupQueue(canvasModel);
+
+            const append = canvasModel.createNode(createAppend(position({ x: 10, y: 6 })));
+
+            builder
+              .createEdge({ source: chat.id, target: gpt.id, input: 'prompt' })
+              .createEdge({ source: gpt.id, target: text.id, output: 'text' })
+              .createEdge({ source: queueId.id, target: append.id, input: 'id' })
+              .createEdge({ source: gpt.id, target: append.id, output: 'messages', input: 'items' });
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          return addToSpace(PresetName.CHAT_GPT, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.EMAIL_WITH_SUMMARY,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          const results = space.db.query(Filter.schema(TableType)).runSync();
+          const emailTable = results.find((r) => r.object?.view?.target?.query?.type?.endsWith('Email'));
+          invariant(emailTable, 'Email table not found.');
+
+          const template = canvasModel.createNode(
+            createTemplate({
+              valueType: 'object',
+              ...rawPosition({ centerX: 192, centerY: -176, width: 320, height: 320 }),
+            }),
+          );
+          const templateContent = ['{'];
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const gpt = canvasModel.createNode(
+              createGpt(rawPosition({ centerX: -400, centerY: -112, width: 256, height: 202 })),
+            );
+            const systemPrompt = canvasModel.createNode(
+              createConstant({
+                value: "use one word to describe content category. don't write anything else",
+                ...rawPosition({ centerX: -800, centerY: -160, width: 192, height: 128 }),
+              }),
+            );
+            const triggerShape = createTrigger({
+              triggerKind: TriggerKind.Email,
+              ...rawPosition({ centerX: -736, centerY: -384, width: 182, height: 192 }),
+            });
+            const trigger = canvasModel.createNode(triggerShape);
+
+            const { queueId } = setupQueue(canvasModel, {
+              idPosition: { centerX: -720, centerY: 224, width: 192, height: 256 },
+              queuePosition: { centerX: -144, centerY: 416, width: 320, height: 448 },
+            });
+            const appendToQueue = canvasModel.createNode(
+              createAppend(rawPosition({ centerX: -80, centerY: 96, width: 122, height: 128 })),
+            );
+
+            const tableId = canvasModel.createNode(
+              createConstant({
+                value: DXN.fromLocalObjectId(emailTable.id).toString(),
+                ...rawPosition({ centerX: -112, centerY: -544, width: 192, height: 256 }),
+              }),
+            );
+
+            const appendToTable = canvasModel.createNode(
+              createAppend(rawPosition({ centerX: 560, centerY: -416, width: 128, height: 122 })),
+            );
+
+            templateContent.push('  "category": "{{text}}",');
+            builder.createEdge({ source: gpt.id, target: template.id, input: 'text', output: 'text' });
+
+            const properties = AST.getPropertySignatures(EmailTriggerOutput.ast);
+            for (let i = 0; i < properties.length; i++) {
+              const propName = properties[i].name.toString();
+              builder.createEdge({ source: trigger.id, target: template.id, input: propName, output: propName });
+              templateContent.push(`  "${propName}": "{{${propName}}}"` + (i === properties.length - 1 ? '' : ','));
+            }
+            templateContent.push('}');
+
+            builder
+              .createEdge({ source: tableId.id, target: appendToTable.id, input: 'id' })
+              .createEdge({ source: queueId.id, target: appendToQueue.id, input: 'id' })
+              .createEdge({ source: gpt.id, target: appendToQueue.id, output: 'messages', input: 'items' })
+              .createEdge({ source: systemPrompt.id, target: gpt.id, input: 'systemPrompt' })
+              .createEdge({ source: trigger.id, target: gpt.id, input: 'prompt', output: 'body' })
+              .createEdge({ source: template.id, target: appendToTable.id, input: 'items' });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          const templateComputeNode = computeModel.nodes.find((n) => n.id === template.node);
+          invariant(templateComputeNode, 'Template compute node was not created.');
+          templateComputeNode.value = templateContent.join('\n');
+          const extendedSchema = S.extend(EmailTriggerOutput, S.Struct({ text: S.String }));
+          templateComputeNode.inputSchema = toJsonSchema(extendedSchema);
+
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.EMAIL_WITH_SUMMARY, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+    [
+      PresetName.FOREX_FUNCTION_CALL,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          canvasModel.builder.call((builder) => {
+            const sourceCurrency = canvasModel.createNode(
+              createConstant({ value: 'USD', ...position({ x: -10, y: -5 }) }),
+            );
+            const targetCurrency = canvasModel.createNode(
+              createConstant({ value: 'EUR', ...position({ x: -10, y: 5 }) }),
+            );
+            const converter = canvasModel.createNode(createFunction(position({ x: 0, y: 0 })));
+            const view = canvasModel.createNode(createSurface(position({ x: 12, y: 0 })));
+
+            builder
+              .createEdge({ source: sourceCurrency.id, target: converter.id, input: 'from' })
+              .createEdge({ source: targetCurrency.id, target: converter.id, input: 'to' })
+              .createEdge({ source: converter.id, target: view.id, output: 'rate' });
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          return addToSpace(PresetName.FOREX_FUNCTION_CALL, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+    [
+      PresetName.DISCORD_MESSAGES,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          canvasModel.builder.call((builder) => {
+            // DXOS general channel.
+            const channelId = canvasModel.createNode(
+              createConstant({ value: '837138313172353098', ...position({ x: -10, y: -5 }) }),
+            );
+            const queueId = canvasModel.createNode(
+              createConstant({
+                value: new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString(),
+                ...position({ x: -10, y: 5 }),
+              }),
+            );
+            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 })));
+
+            builder
+              .createEdge({ source: queueId.id, target: converter.id, input: 'queueId' })
+              .createEdge({ source: channelId.id, target: converter.id, input: 'channelId' })
+              .createEdge({ source: converter.id, target: view.id, output: 'newMessages' })
+              .createEdge({ source: queueId.id, target: queue.id, input: 'input' });
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+
+          return addToSpace(PresetName.DISCORD_MESSAGES, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+  ] as [PresetName, ObjectGenerator<any>][],
+};
+
+const addToSpace = (name: string, space: Space, canvas: CanvasGraphModel, compute: ComputeGraphModel) => {
+  return space.db.add(
+    create(CanvasBoardType, {
+      name,
+      computeGraph: makeRef(compute.root),
+      layout: canvas.graph,
+    }),
+  );
+};
+
+const setupQueue = (
+  canvasModel: CanvasGraphModel,
+  args?: { idPosition?: RawPositionInput; queuePosition?: RawPositionInput },
+) => {
+  const queueId = canvasModel.createNode(
+    createConstant({
+      value: new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString(),
+      ...(args?.idPosition ? rawPosition(args.idPosition) : position({ x: -18, y: 5, width: 8, height: 6 })),
+    }),
+  );
+  const queue = canvasModel.createNode(
+    createQueue(
+      args?.queuePosition ? rawPosition(args.queuePosition) : position({ x: -3, y: 3, width: 14, height: 10 }),
+    ),
+  );
+  canvasModel.createEdge({ source: queueId.id, target: queue.id });
+  return { queue, queueId };
+};
+
+const attachTrigger = (functionTrigger: FunctionTrigger | undefined, computeModel: ComputeGraphModel) => {
+  invariant(functionTrigger);
+  functionTrigger.function = DXN.fromLocalObjectId(computeModel.root.id).toString();
+  functionTrigger.meta ??= {};
+  const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;
+  functionTrigger.meta.computeNodeId = inputNode.id;
+};
+
+type RawPositionInput = { centerX: number; centerY: number; width: number; height: number };
+
+const rawPosition = (args: RawPositionInput) => {
+  return { center: { x: args.centerX, y: args.centerY }, size: { width: args.width, height: args.height } };
+};
+
+const position = (rect: { x: number; y: number; width?: number; height?: number }) => {
+  const snap = 32;
+  const [center, size] = rectToPoints({ width: 0, height: 0, ...rect });
+  const { x, y, width, height } = pointsToRect([pointMultiply(center, snap), pointMultiply(size, snap)]);
+  if (width && height) {
+    return { center: { x, y }, size: width && height ? { width, height } : undefined };
+  } else {
+    return { center: { x, y } };
+  }
+};

package/src/meta.ts

@@ -9,8 +9,10 @@ export const DEBUG_PLUGIN = 'dxos.org/plugin/debug';
 export const meta = {
   id: DEBUG_PLUGIN,
   name: 'Debug',
-  description: 'DXOS debugging tools.',
+  description:
+    'The debug plugin is useful for troubleshooting inside of Composer. You can also use the Debug plugin to create test data inside of sheets or tables or explore pre-built automations. Non-technical users will likely not spend much time here, but this plugin is invaluable for developers and technical users.',
   icon: 'ph--bug--regular',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-debug',
   tags: ['experimental'],
+  screenshots: ['https://dxos.network/plugin-details-debug-dark.png'],
 } satisfies PluginMeta;