@dxos/plugin-debug 0.8.4-main.5acf9ea → 0.8.4-main.66e292d

package/src/components/DebugStatus.tsx

@@ -59,7 +59,7 @@ const _timer = (cb: (err?: Error) => void, options?: { min?: number; max?: numbe
 // TODO(burdon): Integrate with Sentry?
 const ErrorIndicator = () => {
   const [, forceUpdate] = useState({});
-  const errorRef = useRef<Error>();
+  const errorRef = useRef<Error>(null);
   useEffect(() => {
     const errorListener = (event: any) => {
       const error: Error = event.error ?? event.reason;
@@ -83,7 +83,7 @@ const ErrorIndicator = () => {
   }, []);
 
   const handleReset = () => {
-    errorRef.current = undefined;
+    errorRef.current = null;
     forceUpdate({});
   };
 

package/src/components/DevtoolsOverviewContainer.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { Surface } from '@dxos/app-framework';
+import { Surface } from '@dxos/app-framework/react';
 import { StatsPanel, useStats } from '@dxos/devtools';
 
 export const DevtoolsOverviewContainer = () => {

package/src/components/SpaceGenerator/ObjectGenerator.tsx

@@ -2,47 +2,46 @@
 // Copyright 2024 DXOS.org
 //
 
-import { createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
+import { type PromiseIntentDispatcher, createIntent } from '@dxos/app-framework';
 import { addressToA1Notation } from '@dxos/compute';
 import { ComputeGraph, ComputeGraphModel, DEFAULT_OUTPUT, NODE_INPUT, NODE_OUTPUT } from '@dxos/conductor';
-import { DXN, Filter, Key, Obj, Ref, Type } from '@dxos/echo';
-import { type TypedObject } from '@dxos/echo-schema';
+import { DXN, Filter, Key, type Obj, Type } from '@dxos/echo';
+import { type TypedObject } from '@dxos/echo/internal';
 import { Markdown } 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 { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { SpaceAction } from '@dxos/plugin-space/types';
 import { faker } from '@dxos/random';
 import { type Client } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
-import { DataType } from '@dxos/schema';
-import { createAsyncGenerator, type ValueGenerator } from '@dxos/schema/testing';
+import { View, getTypenameFromQuery } from '@dxos/schema';
+import { type ValueGenerator, createAsyncGenerator } from '@dxos/schema/testing';
 import { range } from '@dxos/util';
 
 const generator: ValueGenerator = faker as any;
 
-export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
-
-const findViewByTypename = async (views: DataType.View[], typename: string) => {
-  return views.find((view) => view.query.typename === typename);
+const findViewByTypename = async (views: View.View[], typename: string) => {
+  return views.find((view) => getTypenameFromQuery(view.query.ast) === typename);
 };
 
+export type ObjectGenerator<T extends Obj.Any> = (space: Space, n: number, cb?: (objects: T[]) => void) => Promise<T[]>;
+
 export const createGenerator = <T extends Obj.Any>(
   client: Client,
   dispatch: PromiseIntentDispatcher,
   schema: TypedObject<T>,
 ): ObjectGenerator<T> => {
-  return async (space: Space, n: number, cb?: (objects: T[]) => void): Promise<T[]> => {
+  return async (space: Space, n: number): Promise<T[]> => {
     const typename = schema.typename;
 
     // Find or create table and view.
-    const { objects: views } = await space.db.query(Filter.type(DataType.View)).run();
+    const { objects: views } = await space.db.query(Filter.type(View.View)).run();
     const view = await findViewByTypename(views, typename);
     const staticSchema = client?.graph.schemaRegistry.schemas.find((schema) => Type.getTypename(schema) === typename);
     if (!view && !staticSchema) {
-      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema }));
+      await dispatch(createIntent(SpaceAction.AddSchema, { space, schema, show: false }));
     } else if (!view && staticSchema) {
-      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename }));
+      await dispatch(createIntent(SpaceAction.UseStaticSchema, { space, typename, show: false }));
     }
 
     // Create objects.
@@ -57,7 +56,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     async (space, n, cb) => {
       const objects = range(n).map(() => {
         return space.db.add(
-          Markdown.makeDocument({
+          Markdown.make({
             name: faker.commerce.productName(),
             content: faker.lorem.sentences(5),
           }),
@@ -69,16 +68,11 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
     },
   ],
   [
-    DiagramType.typename,
+    Diagram.Diagram.typename,
     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(Diagram.make({ name: faker.commerce.productName() }));
 
         return obj;
       });
@@ -89,10 +83,10 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
   ],
   // TODO(burdon): Create unit tests.
   [
-    SheetType.typename,
+    Sheet.Sheet.typename,
     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;
@@ -114,7 +108,7 @@ export const staticGenerators = new Map<string, ObjectGenerator<any>>([
         // TODO(burdon): Set width.
         // TODO(burdon): Set formatting for columns.
         return space.db.add(
-          createSheet({
+          Sheet.make({
             name: faker.commerce.productName(),
             cells,
           }),

package/src/components/SpaceGenerator/SchemaTable.tsx

@@ -19,8 +19,8 @@ export const SchemaTable = ({ types, objects = {}, label, onClick }: SchemaTable
       <h2 className='p-2'>{label}</h2>
       {types.map((type) => (
         <div key={type.typename} className='grid grid-cols-subgrid col-span-3 items-center'>
-          <div className='px-2 text-sm font-mono text-subdued'>{type.typename}</div>
-          <div className='px-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
+          <div className='pli-2 text-sm font-mono text-subdued'>{type.typename}</div>
+          <div className='pli-2 text-right font-mono'>{objects[type.typename] ?? 0}</div>
           <IconButton
             variant='ghost'
             icon='ph--plus--regular'

package/src/components/SpaceGenerator/SpaceGenerator.stories.tsx

@@ -2,16 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IntentPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { ClientPlugin } from '@dxos/plugin-client';
 import { useSpaces } from '@dxos/react-client/echo';
-import { render, withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
+import { render } from '@dxos/storybook-utils';
 
 import { SpaceGenerator } from './SpaceGenerator';
 
@@ -24,29 +23,30 @@ const DefaultStory = () => {
   return <SpaceGenerator space={space} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-debug/SpaceGenerator',
-  component: SpaceGenerator,
+  component: SpaceGenerator as any,
   render: render(DefaultStory),
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [
         ClientPlugin({
-          onClientInitialized: async (_, client) => {
+          onClientInitialized: async ({ client }) => {
             await client.halo.createIdentity();
           },
         }),
         IntentPlugin(),
       ],
     }),
-    withLayout(),
-    withTheme,
   ],
   parameters: {
     layout: 'fullscreen',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/SpaceGenerator/SpaceGenerator.tsx

@@ -4,22 +4,22 @@
 
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { useIntentDispatcher } from '@dxos/app-framework/react';
 import { ComputeGraph } from '@dxos/conductor';
-import { Filter, type Obj } from '@dxos/echo';
+import { Filter, Obj } from '@dxos/echo';
 import { Markdown } from '@dxos/plugin-markdown/types';
-import { SheetType } from '@dxos/plugin-sheet/types';
-import { DiagramType } from '@dxos/plugin-sketch/types';
+import { Sheet } from '@dxos/plugin-sheet/types';
+import { Diagram } from '@dxos/plugin-sketch/types';
 import { useClient } from '@dxos/react-client';
-import { getTypename, type Space } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
 import { IconButton, Input, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
-import { DataType } from '@dxos/schema';
+import { Organization, Person, Task } from '@dxos/types';
 import { jsonKeyReplacer, sortKeys } from '@dxos/util';
 
-import { createGenerator, staticGenerators, type ObjectGenerator } from './ObjectGenerator';
-import { SchemaTable } from './SchemaTable';
+import { type ObjectGenerator, createGenerator, staticGenerators } from './ObjectGenerator';
 import { generator } from './presets';
+import { SchemaTable } from './SchemaTable';
 
 export type SpaceGeneratorProps = {
   space: Space;
@@ -29,8 +29,8 @@ export type SpaceGeneratorProps = {
 export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const client = useClient();
-  const staticTypes = [Markdown.Document, DiagramType, SheetType, ComputeGraph]; // TODO(burdon): Make extensible.
-  const recordTypes = [DataType.Organization, DataType.Project, DataType.Person, DataType.Message];
+  const staticTypes = [Markdown.Document, Diagram.Diagram, Sheet.Sheet, ComputeGraph]; // TODO(burdon): Make extensible.
+  const recordTypes = [Organization.Organization, Person.Person, Task.Task];
   const [count, setCount] = useState(1);
   const [info, setInfo] = useState<any>({});
   const presets = useMemo(() => generator(), []);
@@ -55,7 +55,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
     const { objects } = await space.db.query(Filter.everything()).run();
     const objectMap = sortKeys(
       objects.reduce<Record<string, number>>((map, obj) => {
-        const type = getTypename(obj);
+        const type = Obj.getTypename(obj);
         if (type) {
           const count = map[type] ?? 0;
           map[type] = count + 1;
@@ -112,7 +112,7 @@ export const SpaceGenerator = ({ space, onCreateObjects }: SpaceGeneratorProps)
         <SchemaTable types={presets.types} objects={info.objects} label='Presets' onClick={handleCreateData} />
 
         <div>
-          <SyntaxHighlighter classNames='flex text-xs' language='json'>
+          <SyntaxHighlighter language='json' classNames='text-xs'>
             {JSON.stringify({ space, ...info }, jsonKeyReplacer({ truncate: true }), 2)}
           </SyntaxHighlighter>
         </div>

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 { isTruthy, range } from '@dxos/util';
 
 // TODO(burdon): Graph layout:
 //  - https://www.npmjs.com/package/@antv/layout (uses d3)
@@ -67,7 +67,7 @@ export const generateGraph = (): Graph<PlainObject, PlainObject> => {
         }
         return target;
       })
-      .filter(isNotFalsy);
+      .filter(isTruthy);
 
     for (const target of targets) {
       traverse(target);

package/src/components/SpaceGenerator/presets.ts

@@ -2,12 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
+import { Agent, EntityExtraction, ResearchBlueprint } from '@dxos/assistant-toolkit';
+import { Prompt } from '@dxos/blueprints';
 import { type ComputeGraphModel, NODE_INPUT } from '@dxos/conductor';
-import { DXN, Key, Obj, Ref, Type } from '@dxos/echo';
-import { FunctionTrigger, TriggerKind, type TriggerType } from '@dxos/functions';
+import { DXN, Filter, Key, Obj, Query, Ref, Tag, Type } from '@dxos/echo';
+import { Trigger, serializeFunction } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
+import { gmail } from '@dxos/plugin-inbox';
+import { Mailbox } from '@dxos/plugin-inbox/types';
+import { Markdown } from '@dxos/plugin-markdown/types';
 import { type Space } from '@dxos/react-client/echo';
 import {
   type ComputeShape,
@@ -18,8 +23,8 @@ import {
   createFunction,
   createGpt,
   createQueue,
-  createSurface,
   createRandom,
+  createSurface,
   createTemplate,
   createText,
   createTrigger,
@@ -31,38 +36,209 @@ import {
   pointsToRect,
   rectToPoints,
 } from '@dxos/react-ui-canvas-editor';
-import { range } from '@dxos/util';
+import { View } from '@dxos/schema';
+import { Message, Organization, Person, Project } from '@dxos/types';
+import { range, trim } from '@dxos/util';
 
 import { type ObjectGenerator } from './ObjectGenerator';
 
 export enum PresetName {
+  DXOS_TEAM = 'dxos-team',
+  ORG_RESEARCH_PROJECT = 'org-research-project',
   // 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',
+  FOREX_FUNCTION_CALL = 'forex-function-call',
   DISCORD_MESSAGES = 'discord-messages',
   // KANBAN_QUEUE = 'kanban-queue',
 }
 
 export const generator = () => ({
-  schemas: [CanvasBoardType, FunctionTrigger],
+  schemas: [CanvasBoardType, Trigger.Trigger],
   types: Object.values(PresetName).map((name) => ({ typename: name })),
   items: [
+    [
+      PresetName.DXOS_TEAM,
+      async (space, n, cb) => {
+        const objects = range(n, () => {
+          const org = space.db.add(Obj.make(Organization.Organization, { name: 'DXOS', website: 'https://dxos.org' }));
+          const doc = space.db.add(
+            Markdown.make({
+              name: 'DXOS Research',
+              content: 'DXOS builds Composer, an open-source AI-powered malleable application.',
+            }),
+          );
+
+          const tag = space.db.add(Tag.make({ label: 'Investor' }));
+          const tagDxn = Obj.getDXN(tag).toString();
+          Obj.getMeta(doc).tags = [tagDxn];
+
+          // space.db.add(
+          //   Relation.make(HasSubject, {
+          //     [Relation.Source]: doc,
+          //     [Relation.Target]: org,
+          //     completedAt: new Date().toISOString(),
+          //   }),
+          // );
+
+          space.db.add(Obj.make(Person.Person, { fullName: 'Rich', organization: Ref.make(org) }, { tags: [tagDxn] }));
+          space.db.add(Obj.make(Person.Person, { fullName: 'Josiah', organization: Ref.make(org) }));
+          space.db.add(Obj.make(Person.Person, { fullName: 'Dima', organization: Ref.make(org) }));
+          space.db.add(Obj.make(Person.Person, { fullName: 'Mykola', organization: Ref.make(org) }));
+
+          return doc;
+        });
+        cb?.(objects);
+        return objects;
+      },
+    ],
+    [
+      PresetName.ORG_RESEARCH_PROJECT,
+      async (space, n, cb) => {
+        const mailbox = await space.db.query(Filter.type(Mailbox.Mailbox)).first();
+        const tag = await space.db.query(Filter.type(Tag.Tag, { label: 'Investor' })).first();
+        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));
+
+          space.db.add(
+            Trigger.make({
+              enabled: true,
+              spec: {
+                kind: 'timer',
+                cron: '* * * * *', // Every minute.
+              },
+              function: Ref.make(serializeFunction(gmail.sync)),
+              input: {
+                mailboxId: Obj.getDXN(mailbox).toString(),
+              },
+            }),
+          );
+
+          space.db.add(
+            Trigger.make({
+              enabled: true,
+              // TODO(wittjosiah): Queue trigger doesn't support matching query of the column.
+              spec: {
+                kind: 'queue',
+                queue: mailbox.queue.dxn.toString(),
+              },
+              function: Ref.make(serializeFunction(EntityExtraction.extract)),
+              input: {
+                source: '{{event.item}}',
+              },
+            }),
+          );
+
+          const researchPrompt = space.db.add(
+            Prompt.make({
+              name: 'Research',
+              description: 'Research organization',
+              input: Schema.Struct({
+                org: Schema.Any,
+              }),
+              output: Schema.Any,
+
+              // TODO(dmaretskyi): This mocks research (returns pre-baked result), the actual research might take compute minutes.
+              // Remove the mock prompt to do the actual research.
+              instructions: trim`
+                Research the organization provided as input.
+                Create a research note for it at the end.
+                NOTE: Do mocked reseach (set mockSearch to true).
+              `,
+              blueprints: [Ref.make(ResearchBlueprint)],
+            }),
+          );
+
+          space.db.add(
+            Trigger.make({
+              enabled: true,
+              spec: {
+                kind: 'subscription',
+                query: {
+                  ast: organizationsQuery.ast,
+                },
+              },
+              function: Ref.make(serializeFunction(Agent.prompt)),
+              input: {
+                prompt: Ref.make(researchPrompt),
+                input: '{{event.subject}}',
+              },
+            }),
+          );
+
+          const mailboxView = View.make({
+            query: Query.select(
+              Filter.type(Message.Message, { properties: { labels: Filter.contains('investor') } }),
+            ).options({
+              queues: [mailbox.queue.dxn.toString()],
+            }),
+            jsonSchema: Type.toJsonSchema(Message.Message),
+          });
+          const contactsView = View.make({
+            query: contactsQuery,
+            jsonSchema: Type.toJsonSchema(Person.Person),
+          });
+          const organizationsView = View.make({
+            query: organizationsQuery,
+            jsonSchema: Type.toJsonSchema(Organization.Organization),
+          });
+          const notesView = View.make({
+            query: notesQuery,
+            jsonSchema: Type.toJsonSchema(Markdown.Document),
+          });
+
+          return space.db.add(
+            Project.make({
+              name: 'Investor Research',
+              columns: [
+                {
+                  name: 'Mailbox',
+                  view: Ref.make(mailboxView),
+                  order: [],
+                },
+                {
+                  name: 'Contacts',
+                  view: Ref.make(contactsView),
+                  order: [],
+                },
+                {
+                  name: 'Organizations',
+                  view: Ref.make(organizationsView),
+                  order: [],
+                },
+                {
+                  name: 'Notes',
+                  view: Ref.make(notesView),
+                  order: [],
+                },
+              ],
+            }),
+          );
+        });
+
+        cb?.(objects.flat());
+        return objects.flat();
+      },
+    ],
     [
       PresetName.GPT_QUEUE,
       async (space, n, cb) => {
         const objects = range(n, () => {
           const canvasModel = CanvasGraphModel.create<ComputeShape>();
 
-          let functionTrigger: FunctionTrigger | undefined;
+          let functionTrigger: Trigger.Trigger | undefined;
           canvasModel.builder.call((builder) => {
             const gpt = canvasModel.createNode(createGpt(position({ x: 0, y: -14 })));
             const triggerShape = createTrigger({
               spaceId: space.id,
-              triggerKind: TriggerKind.Webhook,
+              triggerKind: 'webhook',
               ...position({ x: -18, y: -2 }),
             });
             const trigger = canvasModel.createNode(triggerShape);
@@ -96,8 +272,11 @@ export const generator = () => ({
         const objects = range(n, () => {
           const { canvasModel, computeModel } = createQueueSinkPreset(
             space,
-            TriggerKind.Subscription,
-            (triggerSpec) => (triggerSpec.filter = { type: 'dxn:type:dxos.org/type/Chess' }),
+            'subscription',
+            (triggerSpec) =>
+              (triggerSpec.query = {
+                ast: Query.select(Filter.typename('dxos.org/type/Chess')).ast,
+              }),
             'type',
           );
           return addToSpace(PresetName.OBJECT_CHANGE_QUEUE, space, canvasModel, computeModel);
@@ -113,7 +292,7 @@ export const generator = () => ({
         const objects = range(n, () => {
           const { canvasModel, computeModel } = createQueueSinkPreset(
             space,
-            TriggerKind.Timer,
+            'timer',
             (triggerSpec) => (triggerSpec.cron = '*/5 * * * * *'),
             'result',
           );
@@ -147,7 +326,7 @@ export const generator = () => ({
     //       canvasModel.builder.call((builder) => {
     //         const triggerShape = createTrigger({
     //           spaceId: space.id,
-    //           triggerKind: TriggerKind.Email,
+    //           triggerKind: 'email',
     //           ...position({ x: -18, y: -2 }),
     //         });
     //         const trigger = canvasModel.createNode(triggerShape);
@@ -254,7 +433,7 @@ export const generator = () => ({
     //         );
     //         const triggerShape = createTrigger({
     //           spaceId: space.id,
-    //           triggerKind: TriggerKind.Email,
+    //           triggerKind: 'email',
     //           ...rawPosition({ centerX: -736, centerY: -384, width: 182, height: 192 }),
     //         });
     //         const trigger = canvasModel.createNode(triggerShape);
@@ -354,11 +533,11 @@ export const generator = () => ({
         const objects = range(n, () => {
           const canvasModel = CanvasGraphModel.create<ComputeShape>();
 
-          let functionTrigger: FunctionTrigger | undefined;
+          let functionTrigger: Trigger.Trigger | undefined;
           canvasModel.builder.call((builder) => {
             const triggerShape = createTrigger({
               spaceId: space.id,
-              triggerKind: TriggerKind.Timer,
+              triggerKind: 'timer',
               ...position({ x: -10, y: -5 }),
             });
             const trigger = canvasModel.createNode(triggerShape);
@@ -416,7 +595,7 @@ export const generator = () => ({
     //       canvasModel.builder.call((builder) => {
     //         const triggerShape = createTrigger({
     //           spaceId: space.id,
-    //           triggerKind: TriggerKind.Queue,
+    //           triggerKind: 'queue',
     //           ...position({ x: -10, y: -5 }),
     //         });
     //         const trigger = canvasModel.createNode(triggerShape);
@@ -448,10 +627,10 @@ export const generator = () => ({
   ] as [PresetName, ObjectGenerator<any>][],
 });
 
-const createQueueSinkPreset = <SpecType extends TriggerKind>(
+const createQueueSinkPreset = <SpecType extends Trigger.Kind>(
   space: Space,
   triggerKind: SpecType,
-  initSpec: (spec: Extract<TriggerType, { kind: SpecType }>) => void,
+  initSpec: (spec: Extract<Trigger.Spec, { kind: SpecType }>) => void,
   triggerOutputName: string,
 ) => {
   const canvasModel = CanvasGraphModel.create<ComputeShape>();
@@ -463,7 +642,7 @@ const createQueueSinkPreset = <SpecType extends TriggerKind>(
     }),
   );
 
-  let functionTrigger: FunctionTrigger | undefined;
+  let functionTrigger: Trigger.Trigger | undefined;
   canvasModel.builder.call((builder) => {
     const triggerShape = createTrigger({
       spaceId: space.id,
@@ -538,7 +717,7 @@ const setupQueue = (
   return { queue, queueId };
 };
 
-const attachTrigger = (functionTrigger: FunctionTrigger | undefined, computeModel: ComputeGraphModel) => {
+const attachTrigger = (functionTrigger: Trigger.Trigger | undefined, computeModel: ComputeGraphModel) => {
   invariant(functionTrigger);
   functionTrigger.function = Ref.make(computeModel.root);
   const inputNode = computeModel.nodes.find((node) => node.type === NODE_INPUT)!;

package/src/components/Wireframe.tsx

@@ -5,8 +5,7 @@
 import React from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { type Obj } from '@dxos/echo';
-import { fullyQualifiedId } from '@dxos/react-client/echo';
+import { Obj } from '@dxos/echo';
 import { type ThemedClassName } from '@dxos/react-ui';
 import { useAttentionAttributes } from '@dxos/react-ui-attention';
 import { SyntaxHighlighter } from '@dxos/react-ui-syntax-highlighter';
@@ -20,8 +19,9 @@ export type WireframeProps = ThemedClassName<{
 
 // TODO(burdon): Make focusable and attendable with input.
 export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
-  const attentionAttrs = useAttentionAttributes(fullyQualifiedId(object));
+  const attentionAttrs = useAttentionAttributes(Obj.getDXN(object).toString());
   const { width, height, ref } = useResizeDetector();
+
   return (
     <div ref={ref} className={mx('relative grow min-bs-96', classNames)} {...attentionAttrs}>
       <div className='absolute inset-2 flex flex-col gap-2 overflow-hidden font-mono'>
@@ -30,7 +30,7 @@ export const Wireframe = ({ classNames, label, object }: WireframeProps) => {
           <div>{`[${width}x${height}]`}</div>
         </div>
         {object && (
-          <SyntaxHighlighter language='json' classNames='flex w-full text-xs opacity-75 rounded'>
+          <SyntaxHighlighter language='json' classNames='text-xs opacity-75 rounded'>
             {JSON.stringify(object, undefined, 2)}
           </SyntaxHighlighter>
         )}