@dxos/react-ui-canvas-compute 0.8.0 → 0.8.1-main.013e445

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.8.0",
+  "version": "0.8.1-main.013e445",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -24,33 +24,33 @@
     "@antv/layout": "^1.2.13",
     "@effect/platform": "0.75.1",
     "chess.js": "^1.0.0",
-    "@dxos/app-framework": "0.8.0",
-    "@dxos/assistant": "0.8.0",
-    "@dxos/artifact": "0.8.0",
-    "@dxos/async": "0.8.0",
-    "@dxos/context": "0.8.0",
-    "@dxos/conductor": "0.8.0",
-    "@dxos/debug": "0.8.0",
-    "@dxos/echo-schema": "0.8.0",
-    "@dxos/edge-client": "0.8.0",
-    "@dxos/functions": "0.8.0",
-    "@dxos/invariant": "0.8.0",
-    "@dxos/graph": "0.8.0",
-    "@dxos/keys": "0.8.0",
-    "@dxos/live-object": "0.8.0",
-    "@dxos/log": "0.8.0",
-    "@dxos/react-client": "0.8.0",
-    "@dxos/react-edge-client": "0.8.0",
-    "@dxos/react-ui-canvas": "0.8.0",
-    "@dxos/react-ui-canvas-editor": "0.8.0",
-    "@dxos/react-ui-editor": "0.8.0",
-    "@dxos/react-ui-attention": "0.8.0",
-    "@dxos/react-ui-form": "0.8.0",
-    "@dxos/react-ui-sfx": "0.8.0",
-    "@dxos/react-ui-stack": "0.8.0",
-    "@dxos/schema": "0.8.0",
-    "@dxos/react-ui-syntax-highlighter": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/app-framework": "0.8.1-main.013e445",
+    "@dxos/assistant": "0.8.1-main.013e445",
+    "@dxos/async": "0.8.1-main.013e445",
+    "@dxos/artifact": "0.8.1-main.013e445",
+    "@dxos/conductor": "0.8.1-main.013e445",
+    "@dxos/context": "0.8.1-main.013e445",
+    "@dxos/debug": "0.8.1-main.013e445",
+    "@dxos/echo-schema": "0.8.1-main.013e445",
+    "@dxos/edge-client": "0.8.1-main.013e445",
+    "@dxos/functions": "0.8.1-main.013e445",
+    "@dxos/graph": "0.8.1-main.013e445",
+    "@dxos/invariant": "0.8.1-main.013e445",
+    "@dxos/keys": "0.8.1-main.013e445",
+    "@dxos/live-object": "0.8.1-main.013e445",
+    "@dxos/log": "0.8.1-main.013e445",
+    "@dxos/react-client": "0.8.1-main.013e445",
+    "@dxos/react-edge-client": "0.8.1-main.013e445",
+    "@dxos/react-ui-canvas": "0.8.1-main.013e445",
+    "@dxos/react-ui-attention": "0.8.1-main.013e445",
+    "@dxos/react-ui-canvas-editor": "0.8.1-main.013e445",
+    "@dxos/react-ui-form": "0.8.1-main.013e445",
+    "@dxos/react-ui-editor": "0.8.1-main.013e445",
+    "@dxos/react-ui-sfx": "0.8.1-main.013e445",
+    "@dxos/react-ui-stack": "0.8.1-main.013e445",
+    "@dxos/react-ui-syntax-highlighter": "0.8.1-main.013e445",
+    "@dxos/schema": "0.8.1-main.013e445",
+    "@dxos/util": "0.8.1-main.013e445"
   },
   "devDependencies": {
     "@effect/ai": "0.8.0",
@@ -58,27 +58,26 @@
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "lodash.defaultsdeep": "^4.6.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/app-framework": "0.8.0",
-    "@dxos/artifact-testing": "0.8.0",
-    "@dxos/echo-signals": "0.8.0",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/storybook-utils": "0.8.0",
-    "@dxos/compute": "0.8.0"
+    "@dxos/app-framework": "0.8.1-main.013e445",
+    "@dxos/artifact-testing": "0.8.1-main.013e445",
+    "@dxos/compute": "0.8.1-main.013e445",
+    "@dxos/echo-signals": "0.8.1-main.013e445",
+    "@dxos/random": "0.8.1-main.013e445",
+    "@dxos/react-ui": "0.8.1-main.013e445",
+    "@dxos/react-ui-theme": "0.8.1-main.013e445",
+    "@dxos/storybook-utils": "0.8.1-main.013e445"
   },
   "peerDependencies": {
-    "@effect/schema": "^0.75.5",
-    "effect": "^3.12.3",
+    "effect": "3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/react-ui": "0.8.0"
+    "@dxos/react-ui": "0.8.1-main.013e445",
+    "@dxos/react-ui-theme": "0.8.1-main.013e445"
   },
   "publishConfig": {
     "access": "public"

package/src/compute.stories.tsx

@@ -9,8 +9,8 @@ import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } f
 
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { capabilities, createEdgeServices } from '@dxos/artifact-testing';
-import { type UnsubscribeCallback } from '@dxos/async';
-import { type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
+import { createTestOllamaClient } from '@dxos/assistant/testing';
+import { EdgeGpt, type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Select, Toolbar } from '@dxos/react-ui';
 import { withAttention } from '@dxos/react-ui-attention/testing';
@@ -22,7 +22,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { DiagnosticOverlay } from './components';
 import { ComputeShapeLayout } from './compute-layout';
 import { type ComputeGraphController } from './graph';
-import { ComputeContext, useGraphMonitor } from './hooks';
+import { ComputeContext, useComputeGraphController, useGraphMonitor } from './hooks';
 import { computeShapes } from './registry';
 import { type ComputeShape } from './shapes';
 import {
@@ -42,35 +42,24 @@ import {
 
 const sidebarTypes: NonNullable<RenderProps['sidebar']>[] = ['canvas', 'compute', 'controller', 'selected'] as const;
 
-// TODO(burdon): Move to async/context?
-const combine = (...cbs: UnsubscribeCallback[]) => {
-  return () => {
-    for (const cb of cbs) {
-      cb();
-    }
-  };
-};
-
 type RenderProps = EditorRootProps<ComputeShape> &
   PropsWithChildren<{
     init?: boolean;
     sidebar?: 'canvas' | 'compute' | 'controller' | 'selected';
     computeGraph?: ComputeGraphModel;
-    controller?: ComputeGraphController;
+    controller?: ComputeGraphController | null;
   }>;
 
 const Render = ({
   id = 'test',
   children,
   graph,
-  controller,
+  controller = null,
   init,
   sidebar: _sidebar,
   registry,
   ...props
 }: RenderProps) => {
-  const [, forceUpdate] = useState({});
-
   const editorRef = useRef<EditorController>(null);
 
   // Selection.
@@ -101,41 +90,7 @@ const Render = ({
   }, [graph, controller, sidebar, selected]);
 
   // Controller.
-  useEffect(() => {
-    if (!controller || !graph) {
-      return;
-    }
-
-    void controller.open();
-    const off = combine(
-      controller.update.on(() => {
-        void editorRef.current?.update();
-        forceUpdate({});
-      }),
-
-      // TODO(burdon): Every node is called on every update.
-      controller.output.on(({ nodeId, property, value }) => {
-        if (value.type === 'not-executed') {
-          // If the node didn't execute, don't trigger.
-          return;
-        }
-
-        const edge = graph.edges.find((edge) => {
-          const source = graph.getNode(edge.source);
-          return (source as ComputeShape).node === nodeId && edge.output === property;
-        });
-
-        if (edge) {
-          void editorRef.current?.action?.({ type: 'trigger', edges: [edge] });
-        }
-      }),
-    );
-
-    return () => {
-      void controller.close();
-      off();
-    };
-  }, [graph, controller]);
+  useComputeGraphController({ controller, graph, editorRef });
 
   // Sync monitor.
   const graphMonitor = useGraphMonitor(controller?.graph);
@@ -343,6 +298,20 @@ export const Artifact: Story = {
   },
 };
 
+export const ImageGen: Story = {
+  args: {
+    // debug: true,
+    showGrid: false,
+    snapToGrid: false,
+    // sidebar: 'json',
+    sidebar: 'controller',
+    registry: new ShapeRegistry(computeShapes),
+    ...createComputeGraphController(createGptCircuit({ image: true, artifact: true }), {
+      gpt: new EdgeGpt(createTestOllamaClient()),
+    }),
+  },
+};
+
 export const Audio: Story = {
   args: {
     // debug: true,

package/src/hooks/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './compute-context';
+export * from './useComputeGraphController';
 export * from './useComputeNodeState';
 export * from './useGraphMonitor';

package/src/hooks/useComputeGraphController.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type RefObject, useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type EditorRootProps, type EditorController } from '@dxos/react-ui-canvas-editor';
+
+import { type ComputeGraphController } from '../graph';
+import { type ComputeShape } from '../shapes';
+
+// TODO(burdon): Move to async/context?
+const combine = (...cbs: UnsubscribeCallback[]) => {
+  return () => {
+    for (const cb of cbs) {
+      cb();
+    }
+  };
+};
+
+export type UseComputeGraphControllerOptions = Pick<EditorRootProps<ComputeShape>, 'graph'> & {
+  controller: ComputeGraphController | null;
+  editorRef: RefObject<EditorController>;
+};
+
+export const useComputeGraphController = ({ controller, graph, editorRef }: UseComputeGraphControllerOptions) => {
+  const [, forceUpdate] = useState({});
+
+  useEffect(() => {
+    if (!controller || !graph) {
+      return;
+    }
+
+    void controller.open();
+    const off = combine(
+      controller.update.on(() => {
+        void editorRef.current?.update();
+        forceUpdate({});
+      }),
+
+      // TODO(burdon): Every node is called on every update.
+      controller.output.on(({ nodeId, property, value }) => {
+        if (value.type === 'not-executed') {
+          // If the node didn't execute, don't trigger.
+          return;
+        }
+
+        const edge = graph.edges.find((edge) => {
+          const source = graph.getNode(edge.source);
+          return (source as ComputeShape).node === nodeId && edge.output === property;
+        });
+
+        if (edge) {
+          void editorRef.current?.action?.({ type: 'trigger', edges: [edge] });
+        }
+      }),
+    );
+
+    return () => {
+      void controller.close();
+      off();
+    };
+  }, [graph, controller]);
+};

package/src/shapes/Function.tsx

@@ -5,8 +5,8 @@
 import React, { useCallback, useRef } from 'react';
 
 import { AnyOutput, FunctionInput } from '@dxos/conductor';
-import { getSnapshot, S } from '@dxos/echo-schema';
-import { FunctionType, ScriptType } from '@dxos/functions';
+import { getSnapshot, isInstanceOf, S } from '@dxos/echo-schema';
+import { FunctionType, ScriptType } from '@dxos/functions/types';
 import { useClient } from '@dxos/react-client';
 import { Filter, makeRef, parseId } from '@dxos/react-client/echo';
 import {
@@ -56,7 +56,7 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
 
       const space = client.spaces.get(spaceId);
       const object = space?.db.getObjectById(objectId);
-      if (!space || !(object instanceof ScriptType)) {
+      if (!space || !isInstanceOf(ScriptType, object)) {
         return;
       }
 

package/src/shapes/Trigger.tsx

@@ -22,7 +22,7 @@ import {
   TriggerKind,
   type TriggerType,
   type WebhookTrigger,
-} from '@dxos/functions';
+} from '@dxos/functions/types';
 import { DXN, SpaceId } from '@dxos/keys';
 import { create, makeRef, useSpace } from '@dxos/react-client/echo';
 import { Select, type SelectRootProps } from '@dxos/react-ui';

package/src/shapes/defs.ts

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { AST } from '@effect/schema';
+import { SchemaAST as AST } from 'effect';
 
 import { DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
 import { ObjectId, S } from '@dxos/echo-schema';

package/src/testing/circuits.ts

@@ -37,7 +37,10 @@ import {
   createTemplate,
 } from '../shapes';
 
-export const createComputeGraphController = (graph?: CanvasGraphModel<ComputeShape>, services?: Partial<Services>) => {
+export const createComputeGraphController = (
+  graph = CanvasGraphModel.create<ComputeShape>(),
+  services?: Partial<Services>,
+) => {
   const computeGraph = createComputeGraph(graph);
   const controller = new ComputeGraphController(computeGraph);
   controller.setServices(services ?? {});
@@ -228,6 +231,7 @@ export const createGptCircuit = (options: {
   image?: boolean;
   history?: boolean;
   artifact?: boolean;
+  instructions?: boolean;
 }) => {
   const model = CanvasGraphModel.create<ComputeShape>();
   model.builder.call((builder) => {
@@ -255,18 +259,21 @@ export const createGptCircuit = (options: {
         .createEdge({ source: gpt.id, target: append.id, output: 'messages', input: 'items' });
     }
 
-    if (options.artifact) {
+    if (options.instructions) {
       const prompt = model.createNode(
         createTemplate({
           text: createSystemPrompt(),
           ...position({ x: -18, y: -12, width: 8, height: 10 }),
         }),
       );
+
+      builder.createEdge({ source: prompt.id, target: gpt.id, input: 'systemPrompt' });
+    }
+
+    if (options.artifact) {
       const artifact = model.createNode(createSurface(position({ x: 17, y: -10, width: 14, height: 14 })));
 
-      builder
-        .createEdge({ source: prompt.id, target: gpt.id, input: 'systemPrompt' })
-        .createEdge({ source: gpt.id, target: artifact.id, output: 'artifact' });
+      builder.createEdge({ source: gpt.id, target: artifact.id, output: 'artifact' });
     }
 
     if (options.cot) {