@dxos/plugin-debug 0.7.5-main.ff8607b → 0.7.5-staging.2ff1350

package/src/components/SpaceGenerator/presets.ts

@@ -0,0 +1,563 @@
+//
+// 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, type TriggerType } from '@dxos/functions/types';
+import { invariant } from '@dxos/invariant';
+import { DXN } 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,
+  createRandom,
+  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',
+  TIMER_TICK_QUEUE = 'timerTick-queue',
+  DISCORD_MESSAGES = 'discord-messages',
+  KANBAN_QUEUE = 'kanban-queue',
+}
+
+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({
+              spaceId: space.id,
+              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(space, 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, computeModel } = createQueueSinkPreset(
+            space,
+            TriggerKind.Subscription,
+            (triggerSpec) => (triggerSpec.filter = { type: 'dxn:type:dxos.org/type/Chess' }),
+            'type',
+          );
+          return addToSpace(PresetName.OBJECT_CHANGE_QUEUE, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.TIMER_TICK_QUEUE,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const { canvasModel, computeModel } = createQueueSinkPreset(
+            space,
+            TriggerKind.Timer,
+            (triggerSpec) => (triggerSpec.cron = '*/5 * * * * *'),
+            'result',
+          );
+          return addToSpace(PresetName.TIMER_TICK_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({
+              spaceId: space.id,
+              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(space, 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({
+              spaceId: space.id,
+              triggerKind: TriggerKind.Email,
+              ...rawPosition({ centerX: -736, centerY: -384, width: 182, height: 192 }),
+            });
+            const trigger = canvasModel.createNode(triggerShape);
+
+            const { queueId } = setupQueue(space, 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>();
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const triggerShape = createTrigger({
+              spaceId: space.id,
+              triggerKind: TriggerKind.Timer,
+              ...position({ x: -10, y: -5 }),
+            });
+            const trigger = canvasModel.createNode(triggerShape);
+            // DXOS dev-null channel.
+            const channelId = canvasModel.createNode(
+              createConstant({ value: '1088569858767212554', ...position({ x: -10, y: 0 }) }),
+            );
+            const queueId = canvasModel.createNode(
+              createConstant({
+                value: new DXN(DXN.kind.QUEUE, ['data', space.id, 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: trigger.id, target: converter.id, input: 'tick' })
+              .createEdge({ source: channelId.id, target: converter.id, input: 'channelId' })
+              .createEdge({ source: queueId.id, target: converter.id, input: 'queueId' })
+              .createEdge({ source: converter.id, target: view.id, output: 'newMessages' })
+              .createEdge({ source: queueId.id, target: queue.id, input: 'input' });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.DISCORD_MESSAGES, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+
+    [
+      PresetName.KANBAN_QUEUE,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const canvasModel = CanvasGraphModel.create<ComputeShape>();
+
+          // TODO(wittjosiah): Integrate directly w/ Kanban.
+          // const results = space.db.query(Filter.schema(KanbanType)).runSync();
+          // const kanban = results.find((r) => r.object?.cardView?.target?.query?.type?.endsWith('Message'));
+          // invariant(kanban, 'Kanban not found.');
+
+          const results = space.db.query(Filter.schema(TableType)).runSync();
+          const messages = results.find((r) => r.object?.view?.target?.query?.type?.endsWith('Message'));
+          invariant(messages, 'Table not found.');
+
+          let functionTrigger: FunctionTrigger | undefined;
+          canvasModel.builder.call((builder) => {
+            const triggerShape = createTrigger({
+              spaceId: space.id,
+              triggerKind: TriggerKind.Queue,
+              ...position({ x: -10, y: -5 }),
+            });
+            const trigger = canvasModel.createNode(triggerShape);
+
+            const tableId = canvasModel.createNode(
+              createConstant({
+                value: DXN.fromLocalObjectId(messages.id).toString(),
+                ...position({ x: -10, y: 5 }),
+              }),
+            );
+            const appendToTable = canvasModel.createNode(createAppend(position({ x: 10, y: 0 })));
+
+            builder
+              .createEdge({ source: tableId.id, target: appendToTable.id, input: 'id' })
+              .createEdge({ source: trigger.id, target: appendToTable.id, input: 'items', output: 'item' });
+
+            functionTrigger = triggerShape.functionTrigger!.target!;
+          });
+
+          const computeModel = createComputeGraph(canvasModel);
+          attachTrigger(functionTrigger, computeModel);
+
+          return addToSpace(PresetName.KANBAN_QUEUE, space, canvasModel, computeModel);
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+  ] as [PresetName, ObjectGenerator<any>][],
+};
+
+const createQueueSinkPreset = <SpecType extends TriggerKind>(
+  space: Space,
+  triggerKind: SpecType,
+  initSpec: (spec: Extract<TriggerType, { type: SpecType }>) => void,
+  triggerOutputName: string,
+) => {
+  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({
+      spaceId: space.id,
+      triggerKind,
+      ...rawPosition({ centerX: -578, centerY: -187, height: 320, width: 320 }),
+    });
+    const trigger = canvasModel.createNode(triggerShape);
+    const { queueId } = setupQueue(space, canvasModel, {
+      queuePosition: { centerX: -80, centerY: 378, width: 320, height: 448 },
+    });
+    const append = canvasModel.createNode(
+      createAppend(rawPosition({ centerX: 320, centerY: 192, width: 128, height: 122 })),
+    );
+    const random = canvasModel.createNode(
+      createRandom(rawPosition({ centerX: -509, centerY: -30, width: 64, height: 64 })),
+    );
+
+    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: triggerOutputName, input: 'type' })
+      .createEdge({
+        source: random.id,
+        target: template.id,
+        input: 'changeId',
+      });
+
+    functionTrigger = triggerShape.functionTrigger!.target!;
+    const triggerSpec = functionTrigger.spec;
+    invariant(triggerSpec && triggerSpec.type === triggerKind, 'No trigger spec.');
+    initSpec(triggerSpec as any);
+  });
+
+  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": "@{{changeId}}"', '}'].join('\n');
+  templateComputeNode.inputSchema = toJsonSchema(S.Struct({ type: S.String, changeId: S.String }));
+
+  attachTrigger(functionTrigger, computeModel);
+
+  return { canvasModel, computeModel };
+};
+
+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 = (
+  space: Space,
+  canvasModel: CanvasGraphModel,
+  args?: { idPosition?: RawPositionInput; queuePosition?: RawPositionInput },
+) => {
+  const queueId = canvasModel.createNode(
+    createConstant({
+      value: new DXN(DXN.kind.QUEUE, ['data', space.id, 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/translations.ts

@@ -31,6 +31,34 @@ export default [
           'Warning: Swapping the storage adapter will make your data unavailable.',
         'settings space fragmentation': 'Enable AM space fragmentation',
         'open debug panel label': 'Show Debug',
+        'client label': 'Client',
+        'config label': 'Config',
+        'storage label': 'Storage',
+        'logs label': 'Logs',
+        'diagnostics label': 'Diagnostics',
+        'tracing label': 'Tracing',
+        'halo label': 'HALO',
+        'identity label': 'Identity',
+        'devices label': 'Devices',
+        'keyring label': 'Keyring',
+        'credentials label': 'Credentials',
+        'echo label': 'ECHO',
+        'spaces label': 'Spaces',
+        'space label': 'Space',
+        'feeds label': 'Feeds',
+        'objects label': 'Objects',
+        'automerge label': 'Automerge',
+        'members label': 'Members',
+        'metadata label': 'Metadata',
+        'mesh label': 'Mesh',
+        'signal label': 'Signal',
+        'swarm label': 'Swarm',
+        'network label': 'Network',
+        'agent label': 'Agent',
+        'dashboard label': 'Dashboard',
+        'search label': 'Search',
+        'edge label': 'Edge',
+        'workflows label': 'Workflows',
       },
     },
   },

package/src/types.ts

@@ -21,10 +21,61 @@ export const DebugContext: Context<DebugContextType> = createContext<DebugContex
 
 export const DebugSettingsSchema = S.mutable(
   S.Struct({
-    devtools: S.optional(S.Boolean),
     debug: S.optional(S.Boolean),
     wireframe: S.optional(S.Boolean),
   }),
 );
 
 export interface DebugSettingsProps extends S.Schema.Type<typeof DebugSettingsSchema> {}
+
+export namespace Devtools {
+  // TODO(wittjosiah): Cannot use slashes in ids until we have a router which decouples ids from url paths.
+  export const id = 'dxos.org.plugin.debug.devtools';
+
+  export namespace Client {
+    export const id = `${Devtools.id}.client`;
+    export const Config = `${Devtools.Client.id}.config`;
+    export const Storage = `${Devtools.Client.id}.storage`;
+    export const Logs = `${Devtools.Client.id}.logs`;
+    export const Diagnostics = `${Devtools.Client.id}.diagnostics`;
+    export const Tracing = `${Devtools.Client.id}.tracing`;
+  }
+
+  export namespace Halo {
+    export const id = `${Devtools.id}.halo`;
+    export const Identity = `${Devtools.Halo.id}.identity`;
+    export const Devices = `${Devtools.Halo.id}.devices`;
+    export const Keyring = `${Devtools.Halo.id}.keyring`;
+    export const Credentials = `${Devtools.Halo.id}.credentials`;
+  }
+
+  export namespace Echo {
+    export const id = `${Devtools.id}.echo`;
+    export const Spaces = `${Devtools.Echo.id}.spaces`;
+    export const Space = `${Devtools.Echo.id}.space`;
+    export const Feeds = `${Devtools.Echo.id}.feeds`;
+    export const Objects = `${Devtools.Echo.id}.objects`;
+    export const Automerge = `${Devtools.Echo.id}.automerge`;
+    export const Members = `${Devtools.Echo.id}.members`;
+    export const Metadata = `${Devtools.Echo.id}.metadata`;
+  }
+
+  export namespace Mesh {
+    export const id = `${Devtools.id}.mesh`;
+    export const Signal = `${Devtools.Mesh.id}.signal`;
+    export const Swarm = `${Devtools.Mesh.id}.swarm`;
+    export const Network = `${Devtools.Mesh.id}.network`;
+  }
+
+  export namespace Agent {
+    export const id = `${Devtools.id}.agent`;
+    export const Dashboard = `${Devtools.Agent.id}.dashboard`;
+    export const Search = `${Devtools.Agent.id}.search`;
+  }
+
+  export namespace Edge {
+    export const id = `${Devtools.id}.edge`;
+    export const Dashboard = `${Devtools.Edge.id}.dashboard`;
+    export const Workflows = `${Devtools.Edge.id}.workflows`;
+  }
+}