@dxos/react-ui-canvas-compute 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -27,68 +27,67 @@
   "dependencies": {
     "@antv/graphlib": "^2.0.4",
     "@antv/layout": "^1.2.13",
-    "@effect/platform": "0.96.1",
+    "@effect/platform": "0.96.2",
     "chess.js": "^1.0.0",
     "workerize-loader": "^2.0.2",
-    "@dxos/ai": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/assistant": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute": "0.9.1-main.c7dcc2e112",
-    "@dxos/async": "0.9.1-main.c7dcc2e112",
-    "@dxos/conductor": "0.9.1-main.c7dcc2e112",
-    "@dxos/debug": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/functions": "0.9.1-main.c7dcc2e112",
-    "@dxos/graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/edge-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/functions-runtime": "0.9.1-main.c7dcc2e112",
-    "@dxos/invariant": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-edge-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-audio": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-canvas": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute-runtime": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-canvas-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-editor": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-form": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-syntax-highlighter": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-stack": "0.9.1-main.c7dcc2e112",
-    "@dxos/types": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-experimental": "0.9.1-main.c7dcc2e112"
+    "@dxos/ai": "0.10.0",
+    "@dxos/app-toolkit": "0.10.0",
+    "@dxos/app-framework": "0.10.0",
+    "@dxos/compute": "0.10.0",
+    "@dxos/compute-runtime": "0.10.0",
+    "@dxos/async": "0.10.0",
+    "@dxos/conductor": "0.10.0",
+    "@dxos/context": "0.10.0",
+    "@dxos/echo": "0.10.0",
+    "@dxos/edge-client": "0.10.0",
+    "@dxos/effect": "0.10.0",
+    "@dxos/functions": "0.10.0",
+    "@dxos/assistant": "0.10.0",
+    "@dxos/invariant": "0.10.0",
+    "@dxos/functions-runtime": "0.10.0",
+    "@dxos/graph": "0.10.0",
+    "@dxos/keys": "0.10.0",
+    "@dxos/log": "0.10.0",
+    "@dxos/react-edge-client": "0.10.0",
+    "@dxos/react-client": "0.10.0",
+    "@dxos/react-ui-attention": "0.10.0",
+    "@dxos/react-ui-audio": "0.10.0",
+    "@dxos/react-ui-canvas": "0.10.0",
+    "@dxos/react-ui-canvas-editor": "0.10.0",
+    "@dxos/react-ui-editor": "0.10.0",
+    "@dxos/react-ui-form": "0.10.0",
+    "@dxos/react-ui-experimental": "0.10.0",
+    "@dxos/react-ui-mosaic": "0.10.0",
+    "@dxos/react-ui-syntax-highlighter": "0.10.0",
+    "@dxos/schema": "0.10.0",
+    "@dxos/types": "0.10.0",
+    "@dxos/util": "0.10.0",
+    "@dxos/debug": "0.10.0"
   },
   "devDependencies": {
     "@effect/ai": "0.36.0",
     "@effect/experimental": "0.60.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
+    "effect": "3.21.4",
     "lodash.defaultsdeep": "^4.6.1",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/assistant-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/random": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-framework": "0.10.0",
+    "@dxos/assistant-toolkit": "0.10.0",
+    "@dxos/random": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "peerDependencies": {
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/compute.stories.tsx

@@ -14,7 +14,6 @@ import { capabilities } from '@dxos/assistant-toolkit/testing';
 import { Operation } from '@dxos/compute';
 import { TestDatabaseLayer } from '@dxos/compute-runtime/testing';
 import { type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
-import { Feed } from '@dxos/echo';
 import { registryLayerNoop } from '@dxos/echo/testing';
 import { configuredCredentialsLayer } from '@dxos/functions';
 import { withClientProvider } from '@dxos/react-client/testing';
@@ -38,8 +37,8 @@ import {
   createBasicCircuit,
   createControlCircuit,
   createEmptyCircuit,
-  createGPTRealtimeCircuit,
   createGptCircuit,
+  createGPTRealtimeCircuit,
   createLogicCircuit,
   createTemplateCircuit,
   createTransformCircuit,
@@ -236,12 +235,7 @@ const ServiceLayer = Layer.empty.pipe(
     ),
   ),
   Layer.provideMerge(
-    Layer.mergeAll(
-      AiServiceTestingPreset('direct'),
-      TestDatabaseLayer(),
-      configuredCredentialsLayer([]),
-      Feed.notAvailable,
-    ),
+    Layer.mergeAll(AiServiceTestingPreset('direct'), TestDatabaseLayer(), configuredCredentialsLayer([])),
   ),
   Layer.orDie,
 );

package/src/graph/controller.ts

@@ -14,14 +14,14 @@ import { type Credential, type Operation, Trace } from '@dxos/compute';
 import {
   ComputeBeginEvent,
   ComputeCustomEvent,
-  ComputeEndEvent,
-  ComputeInputEvent,
-  ComputeNodeContext,
-  ComputeOutputEvent,
   type ComputeEdge,
+  ComputeEndEvent,
   type ComputeGraphModel,
+  ComputeInputEvent,
   type ComputeNode,
+  ComputeNodeContext,
   type ComputeNodeMeta,
+  ComputeOutputEvent,
   type GptInput,
   type GptOutput,
   type GraphDiagnostic,
@@ -30,7 +30,7 @@ import {
   isNotExecuted,
 } from '@dxos/conductor';
 import { Resource } from '@dxos/context';
-import type { Database, Feed, Registry } from '@dxos/echo';
+import type { Database, Registry } from '@dxos/echo';
 import { EffectEx } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { type CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
@@ -93,7 +93,6 @@ export type ComputeEvent =
 export type ComputeServices =
   | AiService.AiService
   | Database.Service
-  | Feed.FeedService
   | Credential.CredentialsService
   | Operation.Service
   | Registry.Service;

package/src/graph/createComputeGraph.test.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { DEFAULT_INPUT } from '@dxos/conductor';
+
+import { createComputeGraph } from '../hooks';
+import {
+  createArtifactCircuit,
+  createAudioCircuit,
+  createBasicCircuit,
+  createControlCircuit,
+  createGptCircuit,
+  createGPTRealtimeCircuit,
+  createLogicCircuit,
+  createTemplateCircuit,
+  createTransformCircuit,
+} from '../testing';
+
+// Each canvas shape is mapped to a compute node and added to a single ECHO-backed `ComputeGraphModel`.
+// Nodes carry nested records (e.g. a template's `inputSchema`); these must be owned independently per node,
+// otherwise adding a second node that embeds a shared record reassigns ECHO ownership and throws.
+const circuits: [string, () => any][] = [
+  ['empty/basic', createBasicCircuit],
+  ['transform', createTransformCircuit],
+  ['logic', createLogicCircuit],
+  ['control', createControlCircuit],
+  ['template', createTemplateCircuit],
+  ['gpt', () => createGptCircuit({ history: true })],
+  ['gpt (plugins)', () => createGptCircuit({ history: true, image: true, artifact: true })],
+  ['gpt (instructions)', () => createGptCircuit({ instructions: true })],
+  ['artifact', createArtifactCircuit],
+  ['audio', createAudioCircuit],
+  ['voice', createGPTRealtimeCircuit],
+];
+
+describe('createComputeGraph', () => {
+  for (const [name, build] of circuits) {
+    test(`builds the ${name} circuit without ECHO ownership errors`, ({ expect }) => {
+      const model = createComputeGraph(build());
+      expect(model.nodes.length).toBeGreaterThanOrEqual(0);
+    });
+  }
+
+  test('wires Template + Chat into GPT and GPT into the output', ({ expect }) => {
+    const model = createComputeGraph(createTemplateCircuit());
+
+    const gpt = model.nodes.find((node) => node.type === 'gpt');
+    expect(gpt).toBeDefined();
+
+    const incoming = model.edges.filter((edge) => edge.target === gpt!.id);
+    const outgoing = model.edges.filter((edge) => edge.source === gpt!.id);
+
+    // Chat feeds the prompt; the template feeds the system prompt.
+    expect(incoming.map((edge) => edge.input).sort()).toEqual(['prompt', 'systemPrompt']);
+    // GPT output flows downstream (to the text node).
+    expect(outgoing.some((edge) => edge.output === 'text')).toBe(true);
+    expect(outgoing.every((edge) => edge.input === DEFAULT_INPUT)).toBe(true);
+  });
+});

package/src/graph/node-defs.ts

@@ -40,40 +40,42 @@ const nodeFactory: Record<NodeType | 'trigger', (shape: ComputeShape) => Compute
 
   // Extensions.
   'text-to-image': () => createNode('text-to-image'), // TODO(burdon): Rename ai-impage-tool
-  and: () => createNode('and'),
-  append: () => createNode('append'),
-  audio: () => createNode('audio'),
-  beacon: () => createNode('beacon'),
-  chat: () => createNode('chat'),
-  constant: (shape) =>
+  'and': () => createNode('and'),
+  'append': () => createNode('append'),
+  'audio': () => createNode('audio'),
+  'beacon': () => createNode('beacon'),
+  'chat': () => createNode('chat'),
+  'constant': (shape) =>
     createNode('constant', {
       value: (shape as ConstantShape).value,
     }),
   'make-queue': () => createNode('make-queue'),
-  database: () => createNode('database'),
-  gpt: () => createNode('gpt'),
+  'database': () => createNode('database'),
+  'gpt': () => createNode('gpt'),
   'gpt-realtime': () => createNode('gpt-realtime'),
-  if: () => createNode('if'),
+  'if': () => createNode('if'),
   'if-else': () => createNode('if-else'),
-  function: () => createNode('function'),
-  json: () => createNode('json'),
+  'function': () => createNode('function'),
+  'json': () => createNode('json'),
   'json-transform': () => createNode('json-transform'),
-  not: () => createNode('not'),
-  or: () => createNode('or'),
-  queue: () => createNode('queue'),
-  rng: () => createNode('rng'),
-  reducer: () => createNode('reducer'),
-  scope: () => createNode('scope'),
-  surface: () => createNode('surface'),
-  switch: () => createNode('switch'),
-  template: (shape) => {
+  'not': () => createNode('not'),
+  'or': () => createNode('or'),
+  'queue': () => createNode('queue'),
+  'rng': () => createNode('rng'),
+  'reducer': () => createNode('reducer'),
+  'scope': () => createNode('scope'),
+  'surface': () => createNode('surface'),
+  'switch': () => createNode('switch'),
+  'template': (shape) => {
     const node = createNode('template', { valueType: (shape as TemplateShape).valueType, value: shape.text });
-    node.inputSchema = JsonSchema.toJsonSchema(getTemplateInputSchema(node));
+    // `toJsonSchema` reuses cached fragments (e.g. the `Schema.Any` JSON form) across calls; deep-copy so each
+    // ECHO node owns its own schema record rather than reassigning ownership of a shared one.
+    node.inputSchema = structuredClone(JsonSchema.toJsonSchema(getTemplateInputSchema(node)));
     return node;
   },
-  text: () => createNode('text'),
-  thread: () => createNode('thread'),
-  trigger: () => createNode(NODE_INPUT),
+  'text': () => createNode('text'),
+  'thread': () => createNode('thread'),
+  'trigger': () => createNode(NODE_INPUT),
 };
 
 const createNode = (type: string, props?: Partial<ComputeNode>): ComputeNode => ({

package/src/hooks/useGraphMonitor.ts

@@ -113,7 +113,8 @@ const linkTriggerToCompute = (graph: ComputeGraphModel, computeNode: ComputeNode
   const functionTrigger = triggerData.functionTrigger?.target;
   invariant(functionTrigger);
   Obj.update(functionTrigger, (functionTrigger) => {
-    functionTrigger.function = Ref.make(graph.root);
+    // TODO(wittjosiah): Widen Runnable union to include ComputeGraph and remove cast.
+    functionTrigger.runnable = Ref.make(graph.root) as any;
     functionTrigger.inputNodeId = computeNode.id;
   });
 };

package/src/registry.ts

@@ -13,6 +13,7 @@ import {
   chatShape,
   constantShape,
   databaseShape,
+  feedShape,
   functionShape,
   gptRealtimeShape,
   gptShape,
@@ -22,7 +23,6 @@ import {
   jsonTransformShape,
   notShape,
   orShape,
-  feedShape,
   randomShape,
   reducerShape,
   scopeShape,

package/src/shapes/Audio.tsx

@@ -5,6 +5,7 @@
 import * as Schema from 'effect/Schema';
 import React, { useEffect, useState } from 'react';
 
+import { DEFAULT_OUTPUT } from '@dxos/conductor';
 import { Icon } from '@dxos/react-ui';
 import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
 
@@ -26,10 +27,10 @@ export const createAudio = (props: CreateAudioProps) =>
   createShape<AudioShape>({ type: 'audio', size: { width: 64, height: 64 }, ...props });
 
 export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
-  const { node } = useComputeNodeState(shape);
+  const { runtime } = useComputeNodeState(shape);
   const [active, setActive] = useState(false);
   useEffect(() => {
-    node.value = active;
+    runtime.setOutput(DEFAULT_OUTPUT, active);
   }, [active]);
 
   // https://docs.pmnd.rs/react-three-fiber/api/canvas#render-props

package/src/shapes/Feed.tsx

@@ -74,7 +74,8 @@ export const FeedItem = ({ classNames, item }: ThemedClassName<{ item: any }>) =
 };
 
 export const feedShape: ShapeDef<FeedShape> = {
-  type: 'feed',
+  // Must match the shape's `type` literal ('queue') so the registry resolves it; the registry is keyed by this.
+  type: 'queue',
   name: 'Feed',
   icon: 'ph--queue--regular',
   component: FeedComponent,

package/src/testing/circuits.ts

@@ -16,6 +16,7 @@ import {
   createChat,
   createConstant,
   createDatabase,
+  createFeed,
   createGpt,
   createGptRealtime,
   createIf,
@@ -24,7 +25,6 @@ import {
   createJsonTransform,
   createNot,
   createOr,
-  createFeed,
   createRandom,
   createScope,
   createSurface,