@dxos/react-ui-canvas-compute 0.8.4-main.c85a9c8dae → 0.8.4-main.d9fc60f731

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-canvas-compute",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d9fc60f731",
   "description": "A compute graph extension for the canvas editor component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,7 +8,7 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
   "exports": {
@@ -20,9 +20,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -30,65 +27,67 @@
   "dependencies": {
     "@antv/graphlib": "^2.0.4",
     "@antv/layout": "^1.2.13",
-    "@effect/platform": "0.94.4",
+    "@effect/platform": "0.96.1",
     "chess.js": "^1.0.0",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/assistant": "0.8.4-main.c85a9c8dae",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/blueprints": "0.8.4-main.c85a9c8dae",
-    "@dxos/conductor": "0.8.4-main.c85a9c8dae",
-    "@dxos/context": "0.8.4-main.c85a9c8dae",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/echo": "0.8.4-main.c85a9c8dae",
-    "@dxos/edge-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/effect": "0.8.4-main.c85a9c8dae",
-    "@dxos/functions": "0.8.4-main.c85a9c8dae",
-    "@dxos/functions-runtime": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/keys": "0.8.4-main.c85a9c8dae",
-    "@dxos/graph": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-attention": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-edge-client": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-canvas": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-canvas-editor": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-editor": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-mosaic": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-form": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-sfx": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.c85a9c8dae",
-    "@dxos/schema": "0.8.4-main.c85a9c8dae",
-    "@dxos/types": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui-stack": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/ai": "0.8.4-main.c85a9c8dae"
+    "workerize-loader": "^2.0.2",
+    "@dxos/ai": "0.8.4-main.d9fc60f731",
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/app-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/async": "0.8.4-main.d9fc60f731",
+    "@dxos/compute": "0.8.4-main.d9fc60f731",
+    "@dxos/compute-runtime": "0.8.4-main.d9fc60f731",
+    "@dxos/assistant": "0.8.4-main.d9fc60f731",
+    "@dxos/conductor": "0.8.4-main.d9fc60f731",
+    "@dxos/debug": "0.8.4-main.d9fc60f731",
+    "@dxos/context": "0.8.4-main.d9fc60f731",
+    "@dxos/effect": "0.8.4-main.d9fc60f731",
+    "@dxos/edge-client": "0.8.4-main.d9fc60f731",
+    "@dxos/echo": "0.8.4-main.d9fc60f731",
+    "@dxos/functions-runtime": "0.8.4-main.d9fc60f731",
+    "@dxos/functions": "0.8.4-main.d9fc60f731",
+    "@dxos/graph": "0.8.4-main.d9fc60f731",
+    "@dxos/keys": "0.8.4-main.d9fc60f731",
+    "@dxos/invariant": "0.8.4-main.d9fc60f731",
+    "@dxos/log": "0.8.4-main.d9fc60f731",
+    "@dxos/react-client": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-attention": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-canvas": "0.8.4-main.d9fc60f731",
+    "@dxos/react-edge-client": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-form": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-mosaic": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-sfx": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-stack": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.d9fc60f731",
+    "@dxos/schema": "0.8.4-main.d9fc60f731",
+    "@dxos/types": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui-canvas-editor": "0.8.4-main.d9fc60f731",
+    "@dxos/util": "0.8.4-main.d9fc60f731"
   },
   "devDependencies": {
-    "@effect/ai": "0.33.2",
-    "@effect/experimental": "0.58.0",
+    "@effect/ai": "0.35.0",
+    "@effect/experimental": "0.60.0",
     "@types/lodash.defaultsdeep": "^4.6.6",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "lodash.defaultsdeep": "^4.6.1",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/assistant-toolkit": "0.8.4-main.c85a9c8dae",
-    "@dxos/app-framework": "0.8.4-main.c85a9c8dae",
-    "@dxos/compute": "0.8.4-main.c85a9c8dae",
-    "@dxos/random": "0.8.4-main.c85a9c8dae",
-    "@dxos/storybook-utils": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "vite": "^8.0.14",
+    "@dxos/app-framework": "0.8.4-main.d9fc60f731",
+    "@dxos/assistant-toolkit": "0.8.4-main.d9fc60f731",
+    "@dxos/random": "0.8.4-main.d9fc60f731",
+    "@dxos/storybook-utils": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731",
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731"
   },
   "peerDependencies": {
-    "effect": "3.19.16",
+    "effect": "3.21.2",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/react-ui": "0.8.4-main.d9fc60f731",
+    "@dxos/ui-theme": "0.8.4-main.d9fc60f731"
   },
   "publishConfig": {
     "access": "public"

package/src/compute.stories.tsx

@@ -3,6 +3,7 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
 import * as Layer from 'effect/Layer';
 import * as ManagedRuntime from 'effect/ManagedRuntime';
 import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } from 'react';
@@ -10,19 +11,19 @@ import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } f
 import { AiServiceTestingPreset } from '@dxos/ai/testing';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { capabilities } from '@dxos/assistant-toolkit/testing';
+import { Operation, OperationRegistry } 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 { CredentialsService, TracingService } from '@dxos/functions';
-import { FunctionInvocationServiceLayerTest } from '@dxos/functions-runtime';
-import { TestDatabaseLayer } from '@dxos/functions-runtime/testing';
+import { configuredCredentialsLayer } from '@dxos/functions';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Select, Toolbar } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withAttention } from '@dxos/react-ui-attention/testing';
 import { Editor, type EditorController, type EditorRootProps, ShapeRegistry } from '@dxos/react-ui-canvas-editor';
 import { Container, useSelection } from '@dxos/react-ui-canvas-editor/testing';
 import { Form } from '@dxos/react-ui-form';
-import { JsonFilter } from '@dxos/react-ui-syntax-highlighter';
+import { Syntax } from '@dxos/react-ui-syntax-highlighter';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { DiagnosticOverlay } from './components';
 import { ComputeShapeLayout } from './compute-layout';
@@ -123,7 +124,7 @@ const DefaultStory = ({
   }
 
   return (
-    <div className='grid grid-cols-[1fr_360px] w-full h-full'>
+    <div className='grid grid-cols-[1fr_360px] h-full w-full'>
       <ComputeContext.Provider value={{ controller }}>
         <Container id={id} classNames={['flex grow overflow-hidden', !sidebar && 'col-span-2']}>
           <Editor.Root<ComputeShape>
@@ -178,7 +179,14 @@ const DefaultStory = ({
                 </Form.Viewport>
               </Form.Root>
             )}
-            <JsonFilter data={json} />
+            <Syntax.Root data={json}>
+              <Syntax.Content>
+                <Syntax.Filter />
+                <Syntax.Viewport>
+                  <Syntax.Code />
+                </Syntax.Viewport>
+              </Syntax.Content>
+            </Syntax.Root>
           </div>
         </Container>
       )}
@@ -216,13 +224,21 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 const ServiceLayer = Layer.empty.pipe(
-  Layer.provideMerge(FunctionInvocationServiceLayerTest()),
+  Layer.provideMerge(
+    Layer.mergeAll(
+      Layer.succeed(Operation.Service, {
+        invoke: () => Effect.die('Operation.Service not available in test.'),
+        schedule: () => Effect.die('Operation.Service not available in test.'),
+        invokePromise: async () => ({ error: new Error('Not available') }),
+      } as any),
+      Layer.succeed(OperationRegistry.Service, { resolve: () => Effect.succeed(undefined) } as any),
+    ),
+  ),
   Layer.provideMerge(
     Layer.mergeAll(
       AiServiceTestingPreset('direct'),
       TestDatabaseLayer(),
-      CredentialsService.configuredLayer([]),
-      TracingService.layerNoop,
+      configuredCredentialsLayer([]),
       Feed.notAvailable,
     ),
   ),

package/src/graph/controller.ts

@@ -2,17 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import type * as Context from 'effect/Context';
 import * as Effect from 'effect/Effect';
 import * as Either from 'effect/Either';
 import * as Exit from 'effect/Exit';
 import * as Layer from 'effect/Layer';
-import type * as ManagedRuntime from 'effect/ManagedRuntime';
 import * as Scope from 'effect/Scope';
 
 import type { AiService } from '@dxos/ai';
 import { Event, synchronized } from '@dxos/async';
+import { type Credential, type Operation, type OperationRegistry, Trace } from '@dxos/compute';
 import {
+  ComputeBeginEvent,
+  ComputeCustomEvent,
+  ComputeEndEvent,
+  ComputeInputEvent,
+  ComputeNodeContext,
+  ComputeOutputEvent,
   type ComputeEdge,
   type ComputeGraphModel,
   type ComputeNode,
@@ -27,21 +32,12 @@ import {
 import { Resource } from '@dxos/context';
 import type { Database, Feed } from '@dxos/echo';
 import { unwrapExit } from '@dxos/effect';
-import {
-  ComputeEventLogger,
-  type ComputeEventPayload,
-  type CredentialsService,
-  type FunctionInvocationService,
-  type QueueService,
-  TracingService,
-} from '@dxos/functions';
 import { log } from '@dxos/log';
 import { type CanvasGraphModel } from '@dxos/react-ui-canvas-editor';
 import { type ContentBlock } from '@dxos/types';
 
 import { createComputeGraph } from '../hooks';
 import { type ComputeShape } from '../shapes';
-
 import { resolveComputeNode } from './node-defs';
 
 // TODO(burdon): API package for conductor.
@@ -83,23 +79,43 @@ type ComputeOutputEvent = {
   value: RuntimeValue;
 };
 
+/**
+ * Event emitted by the compute graph during execution.
+ */
+export type ComputeEvent =
+  | { type: 'begin-compute'; nodeId: string; inputs: ReadonlyArray<string> }
+  | { type: 'end-compute'; nodeId: string; outputs: ReadonlyArray<string> }
+  | { type: 'compute-input'; nodeId: string; property: string; value: any }
+  | { type: 'compute-output'; nodeId: string; property: string; value: any }
+  | { type: 'custom'; nodeId: string; event: any };
+
 // TODO(dmaretskyi): Re-use function servies definition.
 export type ComputeServices =
   | AiService.AiService
   | Database.Service
-  | Feed.Service
-  | QueueService
-  | CredentialsService
-  | FunctionInvocationService;
+  | Feed.FeedService
+  | Credential.CredentialsService
+  | Operation.Service
+  | OperationRegistry.Service;
 
 /**
  * Nodes that will automatically trigger the execution of the graph on startup.
  */
 const AUTO_TRIGGER_NODES = ['chat', 'switch', 'constant'];
 
+/**
+ * Minimal runtime interface required by the {@link ComputeGraphController}.
+ *
+ * Satisfied by both `effect/ManagedRuntime.ManagedRuntime` and ad-hoc adapters
+ * built on top of the app-framework `ProcessManagerRuntime`.
+ */
+export interface ComputeGraphRuntime {
+  runPromiseExit<A, E>(effect: Effect.Effect<A, E, ComputeServices>): Promise<Exit.Exit<A, E>>;
+}
+
 export const createComputeGraphController = (
   graph: CanvasGraphModel<ComputeShape>,
-  computeRuntime: ManagedRuntime.ManagedRuntime<ComputeServices, never>,
+  computeRuntime: ComputeGraphRuntime,
 ) => {
   const computeGraph = createComputeGraph(graph);
   const controller = new ComputeGraphController(computeRuntime, computeGraph);
@@ -134,10 +150,10 @@ export class ComputeGraphController extends Resource {
   /** Computed result. */
   public readonly output = new Event<ComputeOutputEvent>();
 
-  public readonly events = new Event<ComputeEventPayload>();
+  public readonly events = new Event<ComputeEvent>();
 
   constructor(
-    private readonly _computeRuntime: ManagedRuntime.ManagedRuntime<ComputeServices, never>,
+    private readonly _computeRuntime: ComputeGraphRuntime,
     /** Persistent compute graph. */
     private readonly _graph: ComputeGraphModel,
   ) {
@@ -265,8 +281,9 @@ export class ComputeGraphController extends Resource {
             Effect.withSpan('runGraph'),
             Scope.extend(scope),
             Effect.provide(
-              ComputeEventLogger.layerFromTracing.pipe(
-                Layer.provideMerge(TracingService.layerNoop), // TODO(dmaretskyi): Plug-in tracing events to visual feedback in the compute graph editor.
+              Layer.mergeAll(
+                Layer.succeed(Trace.TraceService, this._createTraceWriter()),
+                ComputeNodeContext.layerNoop,
               ),
             ),
             Effect.flatMap(computeValueBag),
@@ -332,8 +349,9 @@ export class ComputeGraphController extends Resource {
               Scope.extend(scope),
               Effect.flatMap(computeValueBag),
               Effect.provide(
-                ComputeEventLogger.layerFromTracing.pipe(
-                  Layer.provideMerge(TracingService.layerNoop), // TODO(dmaretskyi): Plug-in tracing events to visual feedback in the compute graph editor.
+                Layer.mergeAll(
+                  Layer.succeed(Trace.TraceService, this._createTraceWriter()),
+                  ComputeNodeContext.layerNoop,
                 ),
               ),
 
@@ -364,16 +382,18 @@ export class ComputeGraphController extends Resource {
     this.update.emit();
   }
 
-  private _createLogger(): Context.Tag.Service<ComputeEventLogger> {
+  private _createTraceWriter(): Trace.TraceWriter {
     return {
-      log: (event) => {
-        this._handleEvent(event);
+      write: (eventType, payload) => {
+        const event = traceEventToComputeEvent(eventType.key, payload);
+        if (event) {
+          this._handleEvent(event);
+        }
       },
-      nodeId: undefined, // Not in a context of a specific node.
     };
   }
 
-  private _handleEvent(event: ComputeEventPayload): void {
+  private _handleEvent(event: ComputeEvent): void {
     log('handleEvent', { event });
     switch (event.type) {
       case 'compute-input': {
@@ -403,6 +423,23 @@ export class ComputeGraphController extends Resource {
   }
 }
 
+const traceEventToComputeEvent = (key: string, payload: unknown): ComputeEvent | undefined => {
+  switch (key) {
+    case ComputeBeginEvent.key:
+      return { type: 'begin-compute', ...(payload as { nodeId: string; inputs: ReadonlyArray<string> }) };
+    case ComputeEndEvent.key:
+      return { type: 'end-compute', ...(payload as { nodeId: string; outputs: ReadonlyArray<string> }) };
+    case ComputeInputEvent.key:
+      return { type: 'compute-input', ...(payload as { nodeId: string; property: string; value: any }) };
+    case ComputeOutputEvent.key:
+      return { type: 'compute-output', ...(payload as { nodeId: string; property: string; value: any }) };
+    case ComputeCustomEvent.key:
+      return { type: 'custom', ...(payload as { nodeId: string; event: any }) };
+    default:
+      return undefined;
+  }
+};
+
 /**
  * Waits for all effects in the bag to complete and returns the `RuntimeValue` for each property.
  */

package/src/hooks/useComputeNodeState.ts

@@ -6,12 +6,10 @@ import * as Schema from 'effect/Schema';
 import { useCallback, useEffect, useState } from 'react';
 
 import type { ComputeNode, ComputeNodeMeta } from '@dxos/conductor';
-import type { ComputeEventPayload } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 
-import { type RuntimeValue } from '../graph';
+import { type ComputeEvent, type RuntimeValue } from '../graph';
 import { type ComputeShape } from '../shapes';
-
 import { useComputeContext } from './compute-context';
 
 export type ComputeNodeState = {
@@ -22,7 +20,7 @@ export type ComputeNodeState = {
     outputs: Record<string, RuntimeValue>;
     setOutput: (property: string, value: any) => void;
     evalNode: () => void;
-    subscribeToEventLog: (cb: (event: ComputeEventPayload) => void) => void;
+    subscribeToEventLog: (cb: (event: ComputeEvent) => void) => () => void;
   };
 };
 
@@ -57,7 +55,7 @@ export const useComputeNodeState = (shape: ComputeShape): ComputeNodeState => {
   }, [shape.node]);
 
   const subscribeToEventLog = useCallback(
-    (cb: (event: ComputeEventPayload) => void) => {
+    (cb: (event: ComputeEvent) => void): (() => void) => {
       return controller.events.on((ev) => {
         if (ev.nodeId === shape.node) {
           cb(ev);

package/src/hooks/useGraphMonitor.ts

@@ -112,9 +112,9 @@ export const createComputeGraph = (graph?: CanvasGraphModel<ComputeShape>) => {
 const linkTriggerToCompute = (graph: ComputeGraphModel, computeNode: ComputeNode, triggerData: TriggerShape) => {
   const functionTrigger = triggerData.functionTrigger?.target;
   invariant(functionTrigger);
-  Obj.change(functionTrigger, (t) => {
-    t.function = Ref.make(graph.root);
-    t.inputNodeId = computeNode.id;
+  Obj.update(functionTrigger, (functionTrigger) => {
+    functionTrigger.function = Ref.make(graph.root);
+    functionTrigger.inputNodeId = computeNode.id;
   });
 };
 

package/src/registry.ts

@@ -22,7 +22,7 @@ import {
   jsonTransformShape,
   notShape,
   orShape,
-  queueShape,
+  feedShape,
   randomShape,
   reducerShape,
   scopeShape,
@@ -82,7 +82,7 @@ export const computeShapes: { title: string; shapes: ShapeDef[] }[] = [
     shapes: [
       //
       jsonShape,
-      queueShape,
+      feedShape,
       threadShape,
       textShape,
       surfaceShape,

package/src/shapes/Audio.tsx

@@ -9,7 +9,6 @@ import { Icon } from '@dxos/react-ui';
 import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-
 import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
 
 export const AudioShape = Schema.extend(
@@ -38,7 +37,7 @@ export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
     <div className='flex w-full justify-center items-center'>
       <Icon
         icon={active ? 'ph--microphone--regular' : 'ph--microphone-slash--regular'}
-        classNames={['transition opacity-20 duration-1000', active && 'opacity-100 text-red-500']}
+        classNames={['transition opacity-20 duration-1000', active && 'opacity-100 text-error-text']}
         size={8}
         onClick={() => setActive(!active)}
       />

package/src/shapes/Beacon.tsx

@@ -10,7 +10,6 @@ import { Icon } from '@dxos/react-ui';
 import { type ShapeComponentProps, type ShapeDef, createAnchorMap } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-
 import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
 
 export const BeaconShape = Schema.extend(

package/src/shapes/Boolean.tsx

@@ -95,7 +95,7 @@ const createSymbol =
     const paths = pathConstructor({ startX, endX, height });
 
     return (
-      <svg viewBox={`0 0 ${width} ${height}`} className='w-full h-full'>
+      <svg viewBox={`0 0 ${width} ${height}`} className='h-full w-full'>
         {/* Input line. */}
         {getAnchorPoints({ x: 0, y: centerY }, inputs).map(({ x, y }, i) => (
           <line key={i} x1={x} y1={y} x2={startX * 1.3} y2={y} strokeWidth={strokeWidth} className={className} />

package/src/shapes/Chat.tsx

@@ -16,7 +16,6 @@ import {
 import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-
 import { Box } from './common';
 import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
 

package/src/shapes/Constant.tsx

@@ -18,7 +18,6 @@ import { createAnchorMap } from '@dxos/react-ui-canvas-editor';
 import { safeParseJson } from '@dxos/util';
 
 import { useComputeNodeState } from '../hooks';
-
 import { Box, TypeSelect } from './common';
 import { ComputeShape, type CreateShapeProps, createAnchorId, createShape } from './defs';
 

package/src/shapes/{Queue.tsx → Feed.tsx}

@@ -11,30 +11,29 @@ import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-e
 import { mx } from '@dxos/ui-theme';
 
 import { useComputeNodeState } from '../hooks';
-
 import { createFunctionAnchors } from './common';
 import { Box, type BoxActionHandler } from './common';
 import { ComputeShape, type CreateShapeProps, createShape } from './defs';
 
-export const QueueShape = Schema.extend(
+export const FeedShape = Schema.extend(
   ComputeShape,
   Schema.Struct({
     type: Schema.Literal('queue'),
   }),
 );
 
-export type QueueShape = Schema.Schema.Type<typeof QueueShape>;
+export type FeedShape = Schema.Schema.Type<typeof FeedShape>;
 
-export type CreateQueueProps = CreateShapeProps<QueueShape>;
+export type CreateFeedProps = CreateShapeProps<FeedShape>;
 
-export const createQueue = (props: CreateQueueProps) =>
-  createShape<QueueShape>({
+export const createFeed = (props: CreateFeedProps) =>
+  createShape<FeedShape>({
     type: 'queue',
     size: { width: 256, height: 512 },
     ...props,
   });
 
-export const QueueComponent = ({ shape }: ShapeComponentProps<QueueShape>) => {
+export const FeedComponent = ({ shape }: ShapeComponentProps<FeedShape>) => {
   const { runtime } = useComputeNodeState(shape);
   const items = runtime.outputs[DEFAULT_OUTPUT]?.type === 'executed' ? runtime.outputs[DEFAULT_OUTPUT].value : [];
 
@@ -49,7 +48,7 @@ export const QueueComponent = ({ shape }: ShapeComponentProps<QueueShape>) => {
       <ScrollArea.Root orientation='vertical'>
         <ScrollArea.Viewport classNames='divide-y divide-separator'>
           {[...items].map((item, i) => (
-            <QueueItem key={i} classNames='p-1 px-2' item={item} />
+            <FeedItem key={i} classNames='p-1 px-2' item={item} />
           ))}
         </ScrollArea.Viewport>
       </ScrollArea.Root>
@@ -57,7 +56,7 @@ export const QueueComponent = ({ shape }: ShapeComponentProps<QueueShape>) => {
   );
 };
 
-export const QueueItem = ({ classNames, item }: ThemedClassName<{ item: any }>) => {
+export const FeedItem = ({ classNames, item }: ThemedClassName<{ item: any }>) => {
   if (typeof item !== 'object') {
     return <div className={mx(classNames, 'whitespace-pre-wrap')}>{item}</div>;
   }
@@ -74,12 +73,12 @@ export const QueueItem = ({ classNames, item }: ThemedClassName<{ item: any }>)
   );
 };
 
-export const queueShape: ShapeDef<QueueShape> = {
-  type: 'queue',
-  name: 'Queue',
+export const feedShape: ShapeDef<FeedShape> = {
+  type: 'feed',
+  name: 'Feed',
   icon: 'ph--queue--regular',
-  component: QueueComponent,
-  createShape: createQueue,
+  component: FeedComponent,
+  createShape: createFeed,
   getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
   resizable: true,
 };

package/src/shapes/Function.tsx

@@ -5,11 +5,13 @@
 import * as Schema from 'effect/Schema';
 import React, { useCallback, useRef } from 'react';
 
+import { Script } from '@dxos/compute';
+import { Operation } from '@dxos/compute';
 import { AnyOutput, FunctionInput } from '@dxos/conductor';
+import { Filter } from '@dxos/echo';
 import { Ref, getSnapshot, isInstanceOf } from '@dxos/echo/internal';
-import { Function, Script } from '@dxos/functions';
+import { parseId } from '@dxos/keys';
 import { useClient } from '@dxos/react-client';
-import { Filter, parseId } from '@dxos/react-client/echo';
 import {
   type ShapeComponentProps,
   type ShapeDef,
@@ -19,7 +21,6 @@ import {
 } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-
 import { Box, createFunctionAnchors } from './common';
 import { ComputeShape, type CreateShapeProps, createShape } from './defs';
 
@@ -66,7 +67,7 @@ const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps)
         return;
       }
 
-      const [fn] = await space.db.query(Filter.type(Function.Function, { source: Ref.make(object) })).run();
+      const [fn] = await space.db.query(Filter.type(Operation.PersistentOperation, { source: Ref.make(object) })).run();
       if (!fn) {
         return;
       }

package/src/shapes/Gpt.tsx

@@ -10,7 +10,6 @@ import { ScrollArea } from '@dxos/react-ui';
 import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
 import { useComputeNodeState } from '../hooks';
-
 import { FunctionBody, createFunctionAnchors, getHeight } from './common';
 import { ComputeShape, type CreateShapeProps, createShape } from './defs';