@dxos/react-ui-canvas-compute 0.7.5-labs.071a3e2

package/dist/types/src/testing/circuits.d.ts

@@ -0,0 +1,193 @@
+import { CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
+import { ComputeGraphController, type Services } from '../graph';
+import { type ComputeShape } from '../shapes';
+export declare const createComputeGraphController: (graph?: CanvasGraphModel<ComputeShape>, services?: Partial<Services>) => {
+    controller: ComputeGraphController;
+    graph: CanvasGraphModel<{
+        id: string;
+        data?: any;
+        type: string;
+        text?: string | undefined;
+        guide?: boolean | undefined;
+        classNames?: string | undefined;
+        center: {
+            readonly x: number;
+            readonly y: number;
+        };
+        size: {
+            width: number;
+            height: number;
+        };
+    } & {
+        node?: string | undefined;
+    }> | undefined;
+};
+export declare const createBasicCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createTransformCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createLogicCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createControlCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createTemplateCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createArtifactCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createGptCircuit: (options: {
+    db?: boolean;
+    cot?: boolean;
+    image?: boolean;
+    history?: boolean;
+    artifact?: boolean;
+}) => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createGPTRealtimeCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+export declare const createAudioCircuit: () => CanvasGraphModel<{
+    id: string;
+    data?: any;
+    type: string;
+    text?: string | undefined;
+    guide?: boolean | undefined;
+    classNames?: string | undefined;
+    center: {
+        readonly x: number;
+        readonly y: number;
+    };
+    size: {
+        width: number;
+        height: number;
+    };
+} & {
+    node?: string | undefined;
+}>;
+//# sourceMappingURL=circuits.d.ts.map

package/dist/types/src/testing/circuits.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circuits.d.ts","sourceRoot":"","sources":["../../../../src/testing/circuits.ts"],"names":[],"mappings":"AAQA,OAAO,EAAyD,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEvH,OAAO,EAAE,sBAAsB,EAAE,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEjE,OAAO,EACL,KAAK,YAAY,EAwBlB,MAAM,WAAW,CAAC;AAEnB,eAAO,MAAM,4BAA4B,WAAY,gBAAgB,CAAC,YAAY,CAAC,aAAa,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;CAKhH,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;EAa9B,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;EAiBlC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;EAmB9B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;EA2BhC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;EAiEjC,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;EAqBjC,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa;IACxC,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;;;;;;;;;;;;;;;;;EA0DA,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;EAIpC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;EAS9B,CAAC"}

package/dist/types/src/testing/index.d.ts

@@ -0,0 +1,2 @@
+export * from './circuits';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/testing/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@dxos/react-ui-canvas-compute",
+  "version": "0.7.5-labs.071a3e2",
+  "description": "A compute graph extension for the canvas editor component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs",
+      "node": "./dist/lib/node-esm/index.mjs"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@antv/graphlib": "^2.0.4",
+    "@antv/layout": "^1.2.13",
+    "chess.js": "^1.0.0",
+    "@dxos/artifact": "0.7.5-labs.071a3e2",
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/context": "0.7.5-labs.071a3e2",
+    "@dxos/conductor": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/debug": "0.7.5-labs.071a3e2",
+    "@dxos/assistant": "0.7.5-labs.071a3e2",
+    "@dxos/edge-client": "0.7.5-labs.071a3e2",
+    "@dxos/graph": "0.7.5-labs.071a3e2",
+    "@dxos/functions": "0.7.5-labs.071a3e2",
+    "@dxos/invariant": "0.7.5-labs.071a3e2",
+    "@dxos/keys": "0.7.5-labs.071a3e2",
+    "@dxos/node-std": "0.7.5-labs.071a3e2",
+    "@dxos/live-object": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/log": "0.7.5-labs.071a3e2",
+    "@dxos/react-edge-client": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-attention": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-canvas": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-form": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-editor": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-sfx": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-canvas-editor": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-stack": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-syntax-highlighter": "0.7.5-labs.071a3e2",
+    "@dxos/schema": "0.7.5-labs.071a3e2",
+    "@dxos/util": "0.7.5-labs.071a3e2"
+  },
+  "devDependencies": {
+    "@effect/ai": "^0.5.1",
+    "@effect/platform": "^0.72.1",
+    "@types/lodash.defaultsdeep": "^4.6.6",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "effect": "^3.12.3",
+    "lodash.defaultsdeep": "^4.6.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "5.4.7",
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/artifact-testing": "0.7.5-labs.071a3e2",
+    "@dxos/compute": "0.7.5-labs.071a3e2",
+    "@dxos/random": "0.7.5-labs.071a3e2",
+    "@dxos/echo-signals": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
+  },
+  "peerDependencies": {
+    "@effect/schema": "^0.75.5",
+    "effect": "^3.12.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/README.md

@@ -0,0 +1,47 @@
+# Compute
+
+- This folder represents a "compute plugin" for the Canvas component.
+- It defines a set of Shapes that implement a state machine.
+
+### Notes (burdon)
+
+- [x] Text/markdown view (parse cot, etc.)
+- [x] Surface view
+- [ ] Prompt with handlebar variables (dynamic schema)
+- [ ] Artifact tool (find artifact defintions AND instances); conext (e.g., current game).
+  - [ ] Chess plugin defines artifact to generate and process FEN?
+  - [ ] Deploy funciton to play game.
+- [ ] Function node (call script)
+- [ ] Group nodes (sub-graph)
+- [ ] Markdown surface node (parse COT)
+- [ ] Auto layout graphs
+
+### Notes (dmaretskyi)
+
+- Consider how different types of edges affect computations:
+  - Being able to provide values by reference
+    - e.g. GPT gets connected to a vector index that is represented by a separate node that can be queried
+    - history node can be provided by reference (as a mutable Thread object) that GPT mutates without requiring a back reference
+  - Consider separating purely functional inputs from imperative ones
+    - This is what UnrealEngine does - functional inputs trigger computations when the data changes, imperative inputs can trigger computations with the same or no data
+    - imperative inputs can represent events or streams of data
+    - functional inputs represent values
+
+- persisting compute graph and canvas in ECHO
+  - (Canvas)-[.nodes]->(CanvasNode)-[.node]->(ComputeNode)<-[.nodes]-(ComputeGraph), (Canvas)-[.computeGraph]->(ComputeGraph)
+
+  - Computations can operate purely on the ComputeGraph
+  - Computations return an ExecutionTrace that is streamable
+  - Canvas graph doesn't directly interact with the compute graph, but reads the execution trace
+
+  - ExecutionTrace
+    - has an execution trace id -- one graph can have multiple independent parallel traces
+    - series of events - each event is associated with a particular node in a particular graph
+    - events include:
+      - inputs/outputs being updated
+      - logs associated with a node or a graph
+      - node state updates (can a node have internal state separate from inputs/outputs)
+      - timestep? - to correlate events that happen during a single execution time
+
+
+

package/src/components/DiagnosticOverlay.tsx

@@ -0,0 +1,23 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import type { GraphDiagnostic } from '@dxos/conductor';
+
+export type DiagnosticOverlayProps = {
+  diagnostics: GraphDiagnostic[];
+};
+
+export const DiagnosticOverlay = ({ diagnostics }: DiagnosticOverlayProps) => {
+  return (
+    <div className='absolute inset-0 pointer-events-none'>
+      {diagnostics.map((diagnostic, index) => (
+        <div key={index} className='absolute inset-0 pointer-events-none'>
+          {diagnostic.message}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './DiagnosticOverlay';

package/src/compute-layout.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DefaultInput, DefaultOutput } from '@dxos/conductor';
+import { toEffectSchema } from '@dxos/echo-schema';
+import { type Anchor, ShapeLayout, type ShapeRegistry } from '@dxos/react-ui-canvas-editor';
+
+import { type ComputeGraphController } from './graph';
+import { type ComputeShape, createFunctionAnchors } from './shapes';
+
+// TODO(burdon): Customize layout. Specialize ComputeShapeDef and registry.
+export class ComputeShapeLayout extends ShapeLayout {
+  constructor(
+    private _controller: ComputeGraphController,
+    registry: ShapeRegistry,
+  ) {
+    super(registry);
+  }
+
+  // TODO(burdon): Doesn't update.
+  override getAnchors(shape: ComputeShape): Record<string, Anchor> {
+    const shapeDef = this._registry.getShapeDef(shape.type);
+    let anchors = shapeDef?.getAnchors?.(shape) ?? {};
+    if (shape.node) {
+      const node = this._controller.graph.getNode(shape.node);
+      if (node.inputSchema || node.outputSchema) {
+        // TODO(burdon): Requires that component defined input and output types.
+        const inputSchema = node.inputSchema ? toEffectSchema(node.inputSchema) : DefaultInput;
+        const outputSchema = node.outputSchema ? toEffectSchema(node.outputSchema) : DefaultOutput;
+        anchors = createFunctionAnchors(shape, inputSchema, outputSchema);
+      }
+    }
+
+    return anchors;
+  }
+}