@dxos/react-ui-canvas-compute 0.8.3 → 0.8.4-main.1c7ec43d41

package/dist/lib/browser/index.mjs

@@ -1,96 +1,27 @@
 import "@dxos/node-std/globals";
 
-// packages/ui/react-ui-canvas-compute/src/graph/controller.ts
-import { Effect, Either, Exit, Scope } from "effect";
+// src/graph/controller.ts
+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 * as Scope from "effect/Scope";
 import { Event, synchronized } from "@dxos/async";
-import { GraphExecutor, isNotExecuted, ValueBag } from "@dxos/conductor";
+import { Trace } from "@dxos/compute";
+import { ComputeBeginEvent, ComputeCustomEvent, ComputeEndEvent, ComputeInputEvent, ComputeNodeContext, ComputeOutputEvent, GraphExecutor, ValueBag, isNotExecuted } from "@dxos/conductor";
 import { Resource } from "@dxos/context";
+import { unwrapExit } from "@dxos/effect";
 import { log } from "@dxos/log";
 
-// packages/ui/react-ui-canvas-compute/src/graph/node-defs.ts
-import { NODE_INPUT, NODE_OUTPUT, registry, getTemplateInputSchema } from "@dxos/conductor";
-import { raise } from "@dxos/debug";
-import { ObjectId, toJsonSchema } from "@dxos/echo-schema";
-import { invariant } from "@dxos/invariant";
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/node-defs.ts";
-var resolveComputeNode = async (node) => {
-  const impl = registry[node.type];
-  invariant(impl, `Unknown node type: ${node.type}`, {
-    F: __dxlog_file,
-    L: 22,
-    S: void 0,
-    A: [
-      "impl",
-      "`Unknown node type: ${node.type}`"
-    ]
-  });
-  return impl;
-};
-var isValidComputeNode = (type) => {
-  return nodeFactory[type] !== void 0;
-};
-var createComputeNode = (shape) => {
-  const type = shape.type ?? raise(new Error("Type not specified"));
-  const factory = nodeFactory[type] ?? raise(new Error(`Unknown shape type: ${type}`));
-  return factory(shape);
-};
-var nodeFactory = {
-  // System.
-  [NODE_INPUT]: () => createNode(NODE_INPUT),
-  [NODE_OUTPUT]: () => createNode(NODE_OUTPUT),
-  // Extensions.
-  ["text-to-image"]: () => createNode("text-to-image"),
-  ["and"]: () => createNode("and"),
-  ["append"]: () => createNode("append"),
-  ["audio"]: () => createNode("audio"),
-  ["beacon"]: () => createNode("beacon"),
-  ["chat"]: () => createNode("chat"),
-  ["constant"]: (shape) => createNode("constant", {
-    value: shape.value
-  }),
-  ["database"]: () => createNode("database"),
-  ["gpt"]: () => createNode("gpt"),
-  ["gpt-realtime"]: () => createNode("gpt-realtime"),
-  ["if"]: () => createNode("if"),
-  ["if-else"]: () => createNode("if-else"),
-  ["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) => {
-    const node = createNode("template", {
-      valueType: shape.valueType,
-      value: shape.text
-    });
-    node.inputSchema = toJsonSchema(getTemplateInputSchema(node));
-    return node;
-  },
-  ["text"]: () => createNode("text"),
-  ["thread"]: () => createNode("thread"),
-  ["trigger"]: () => createNode(NODE_INPUT)
-};
-var createNode = (type, props) => ({
-  id: ObjectId.random(),
-  type,
-  ...props
-});
-
-// packages/ui/react-ui-canvas-compute/src/hooks/compute-context.ts
+// src/hooks/compute-context.ts
 import { createContext, useContext } from "react";
-import { raise as raise2 } from "@dxos/debug";
+import { raise } from "@dxos/debug";
 var ComputeContext = createContext(null);
 var useComputeContext = () => {
-  return useContext(ComputeContext) ?? raise2(new Error("Missing ComputeContext"));
+  return useContext(ComputeContext) ?? raise(new Error("Missing ComputeContext"));
 };
 
-// packages/ui/react-ui-canvas-compute/src/hooks/useComputeGraphController.ts
+// src/hooks/useComputeGraphController.ts
 import { useEffect, useState } from "react";
 var combine = (...cbs) => {
   return () => {
@@ -140,35 +71,19 @@ var useComputeGraphController = ({ controller, graph, editorRef }) => {
   ]);
 };
 
-// packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts
-import { Schema } from "effect";
+// src/hooks/useComputeNodeState.ts
+import * as Schema from "effect/Schema";
 import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
-import { invariant as invariant2 } from "@dxos/invariant";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
+import { invariant } from "@dxos/invariant";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useComputeNodeState.ts";
 var useComputeNodeState = (shape) => {
   const { controller } = useComputeContext();
-  invariant2(controller, void 0, {
-    F: __dxlog_file2,
-    L: 32,
-    S: void 0,
-    A: [
-      "controller",
-      ""
-    ]
-  });
+  invariant(controller, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 12, S: void 0, A: ["controller", ""] });
   const [meta, setMeta] = useState2();
   useEffect2(() => {
     let disposed = false;
     queueMicrotask(async () => {
-      invariant2(shape.node, "Node not specified", {
-        F: __dxlog_file2,
-        L: 38,
-        S: void 0,
-        A: [
-          "shape.node",
-          "'Node not specified'"
-        ]
-      });
+      invariant(shape.node, "Node not specified", { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 17, S: void 0, A: ["shape.node", "'Node not specified'"] });
       const node = controller.getComputeNode(shape.node);
       const meta2 = await controller.getMeta(node);
       if (disposed) {
@@ -214,37 +129,20 @@ var useComputeNodeState = (shape) => {
   };
 };
 
-// packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts
+// src/hooks/useGraphMonitor.ts
 import { useMemo } from "react";
 import { ComputeGraphModel, DEFAULT_INPUT, DEFAULT_OUTPUT } from "@dxos/conductor";
-import { ObjectId as ObjectId2, Ref } from "@dxos/echo-schema";
-import { invariant as invariant3 } from "@dxos/invariant";
-import { getSpace } from "@dxos/react-client/echo";
+import { Obj, Ref } from "@dxos/echo";
+import { invariant as invariant2 } from "@dxos/invariant";
 import { isNonNullable } from "@dxos/util";
-var __dxlog_file3 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
+var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
 var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
   const sourceNode = graph.findNode(source);
   const targetNode = graph.findNode(target);
-  invariant3(sourceNode?.node, void 0, {
-    F: __dxlog_file3,
-    L: 26,
-    S: void 0,
-    A: [
-      "sourceNode?.node",
-      ""
-    ]
-  });
-  invariant3(targetNode?.node, void 0, {
-    F: __dxlog_file3,
-    L: 27,
-    S: void 0,
-    A: [
-      "targetNode?.node",
-      ""
-    ]
-  });
+  invariant2(sourceNode?.node, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 15, S: void 0, A: ["sourceNode?.node", ""] });
+  invariant2(targetNode?.node, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 16, S: void 0, A: ["targetNode?.node", ""] });
   return {
-    id: ObjectId2.random(),
+    id: Obj.ID.random(),
     source: sourceNode.node,
     target: targetNode.node,
     output,
@@ -258,15 +156,7 @@ var useGraphMonitor = (model) => {
         if (!model) {
           return;
         }
-        invariant3(node.type, void 0, {
-          F: __dxlog_file3,
-          L: 52,
-          S: void 0,
-          A: [
-            "node.type",
-            ""
-          ]
-        });
+        invariant2(node.type, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 37, S: void 0, A: ["node.type", ""] });
         if (!isValidComputeNode(node.type)) {
           return;
         }
@@ -316,58 +206,138 @@ var createComputeGraph = (graph) => {
 };
 var linkTriggerToCompute = (graph, computeNode, triggerData) => {
   const functionTrigger = triggerData.functionTrigger?.target;
-  invariant3(functionTrigger, void 0, {
-    F: __dxlog_file3,
-    L: 115,
-    S: void 0,
-    A: [
-      "functionTrigger",
-      ""
-    ]
+  invariant2(functionTrigger, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 88, S: void 0, A: ["functionTrigger", ""] });
+  Obj.update(functionTrigger, (functionTrigger2) => {
+    functionTrigger2.function = Ref.make(graph.root);
+    functionTrigger2.inputNodeId = computeNode.id;
   });
-  functionTrigger.function = Ref.make(graph.root);
-  functionTrigger.inputNodeId = computeNode.id;
 };
 var deleteTriggerObjects = (computeGraph, deleted) => {
-  const space = getSpace(computeGraph.root);
-  if (!space) {
+  const db = Obj.getDatabase(computeGraph.root);
+  if (!db) {
     return;
   }
   for (const node of deleted.nodes) {
     if (node.type === "trigger") {
       const trigger = node;
-      space.db.remove(trigger.functionTrigger.target);
+      db.remove(trigger.functionTrigger.target);
     }
   }
 };
 
-// packages/ui/react-ui-canvas-compute/src/graph/controller.ts
+// src/graph/node-defs.ts
+import { NODE_INPUT, NODE_OUTPUT, getTemplateInputSchema, registry } from "@dxos/conductor";
+import { raise as raise2 } from "@dxos/debug";
+import { JsonSchema, Obj as Obj2 } from "@dxos/echo";
+import { invariant as invariant3 } from "@dxos/invariant";
+var __dxlog_file3 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/node-defs.ts";
+var resolveComputeNode = async (node) => {
+  const impl = registry[node.type];
+  invariant3(impl, `Unknown node type: ${node.type}`, { "~LogMeta": "~LogMeta", F: __dxlog_file3, L: 10, S: void 0, A: ["impl", "`Unknown node type: ${node.type}`"] });
+  return impl;
+};
+var isValidComputeNode = (type) => {
+  return nodeFactory[type] !== void 0;
+};
+var createComputeNode = (shape) => {
+  const type = shape.type ?? raise2(new Error("Type not specified"));
+  const factory = nodeFactory[type] ?? raise2(new Error(`Unknown shape type: ${type}`));
+  return factory(shape);
+};
+var nodeFactory = {
+  // System.
+  [NODE_INPUT]: () => createNode(NODE_INPUT),
+  [NODE_OUTPUT]: () => createNode(NODE_OUTPUT),
+  // Extensions.
+  "text-to-image": () => createNode("text-to-image"),
+  and: () => createNode("and"),
+  append: () => createNode("append"),
+  audio: () => createNode("audio"),
+  beacon: () => createNode("beacon"),
+  chat: () => createNode("chat"),
+  constant: (shape) => createNode("constant", {
+    value: shape.value
+  }),
+  "make-queue": () => createNode("make-queue"),
+  database: () => createNode("database"),
+  gpt: () => createNode("gpt"),
+  "gpt-realtime": () => createNode("gpt-realtime"),
+  if: () => createNode("if"),
+  "if-else": () => createNode("if-else"),
+  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) => {
+    const node = createNode("template", {
+      valueType: shape.valueType,
+      value: shape.text
+    });
+    node.inputSchema = JsonSchema.toJsonSchema(getTemplateInputSchema(node));
+    return node;
+  },
+  text: () => createNode("text"),
+  thread: () => createNode("thread"),
+  trigger: () => createNode(NODE_INPUT)
+};
+var createNode = (type, props) => ({
+  id: Obj2.ID.random(),
+  type,
+  ...props
+});
+
+// src/graph/controller.ts
+var __dxlog_file4 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/controller.ts";
 function _ts_decorate(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
-var __dxlog_file4 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/controller.ts";
 var InvalidStateError = Error;
 var AUTO_TRIGGER_NODES = [
   "chat",
   "switch",
   "constant"
 ];
-var createComputeGraphController = (graph, serviceContainer) => {
+var createComputeGraphController = (graph, computeRuntime) => {
   const computeGraph = createComputeGraph(graph);
-  const controller = new ComputeGraphController(serviceContainer, computeGraph);
+  const controller = new ComputeGraphController(computeRuntime, computeGraph);
   return {
     controller,
     graph
   };
 };
 var ComputeGraphController = class extends Resource {
-  constructor(_serviceContainer, _graph) {
-    super(), this._serviceContainer = _serviceContainer, this._graph = _graph, this._executor = new GraphExecutor({
-      computeNodeResolver: (node) => resolveComputeNode(node)
-    }), this._diagnostics = [], this._forcedOutputs = {}, this._runtimeStateInputs = {}, this._runtimeStateOutputs = {}, this.update = new Event(), this.output = new Event(), this.events = new Event();
+  _computeRuntime;
+  _graph;
+  _executor = new GraphExecutor({
+    computeNodeResolver: (node) => resolveComputeNode(node)
+  });
+  _diagnostics = [];
+  /**
+  * Canvas force-sets outputs of those nodes.
+  */
+  _forcedOutputs = {};
+  /**
+  * Runtime state of the execution graph.
+  */
+  _runtimeStateInputs = {};
+  _runtimeStateOutputs = {};
+  // TODO(burdon): Remove? Make state reactive?
+  update = new Event();
+  /** Computed result. */
+  output = new Event();
+  events = new Event();
+  constructor(_computeRuntime, _graph) {
+    super(), this._computeRuntime = _computeRuntime, this._graph = _graph;
   }
   toJSON() {
     return {
@@ -435,12 +405,7 @@ var ComputeGraphController = class extends Resource {
       try {
         await this.exec(nodeId);
       } catch (err) {
-        log.catch(err, void 0, {
-          F: __dxlog_file4,
-          L: 199,
-          S: this,
-          C: (f, a) => f(...a)
-        });
+        log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 128, S: this });
       }
     });
   }
@@ -459,12 +424,11 @@ var ComputeGraphController = class extends Resource {
     for (const [nodeId2, outputs] of Object.entries(this._forcedOutputs)) {
       executor.setOutputs(nodeId2, Effect.succeed(ValueBag.make(outputs)));
     }
-    const serviceLayer = this._serviceContainer.createLayer();
-    await Effect.runPromise(Effect.gen(this, function* () {
+    unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
       const scope = yield* Scope.make();
       const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(nodeId)));
       const computingOutputs = executable.exec != null;
-      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(serviceLayer), Effect.withSpan("test"), Effect.tap((values) => {
+      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.provide(Layer.mergeAll(Layer.succeed(Trace.TraceService, this._createTraceWriter()), ComputeNodeContext.layerNoop)), Effect.flatMap(computeValueBag), Effect.withSpan("test"), Effect.tap((values) => {
         for (const [key, value] of Object.entries(values)) {
           if (computingOutputs) {
             this._onOutputComputed(nodeId, key, value);
@@ -475,7 +439,7 @@ var ComputeGraphController = class extends Resource {
       }));
       yield* effect;
       yield* Scope.close(scope, Exit.void);
-    }));
+    })));
     this.update.emit();
   }
   /**
@@ -496,13 +460,13 @@ var ComputeGraphController = class extends Resource {
     const allAffectedNodes = [
       ...new Set(triggerNodes.flatMap((node) => executor.getAllDependantNodes(node.id)))
     ];
-    await Effect.runPromise(Effect.gen(this, function* () {
+    unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
       const scope = yield* Scope.make();
       const tasks = [];
       for (const node of allAffectedNodes) {
         const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(node)));
         const computingOutputs = executable.exec != null;
-        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(this._serviceContainer.createLayer()), Effect.withSpan("test"), Effect.tap((values) => {
+        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(Layer.mergeAll(Layer.succeed(Trace.TraceService, this._createTraceWriter()), ComputeNodeContext.layerNoop)), Effect.withSpan("test"), Effect.tap((values) => {
           for (const [key, value] of Object.entries(values)) {
             if (computingOutputs) {
               this._onOutputComputed(node, key, value);
@@ -515,26 +479,23 @@ var ComputeGraphController = class extends Resource {
       }
       yield* Effect.all(tasks);
       yield* Scope.close(scope, Exit.void);
-    }));
+    })));
     this.update.emit();
   }
-  _createLogger() {
+  _createTraceWriter() {
     return {
-      log: (event) => {
-        this._handleEvent(event);
-      },
-      nodeId: void 0
+      write: (eventType, payload) => {
+        const event = traceEventToComputeEvent(eventType.key, payload);
+        if (event) {
+          this._handleEvent(event);
+        }
+      }
     };
   }
   _handleEvent(event) {
     log("handleEvent", {
       event
-    }, {
-      F: __dxlog_file4,
-      L: 335,
-      S: this,
-      C: (f, a) => f(...a)
-    });
+    }, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 223, S: this });
     switch (event.type) {
       case "compute-input": {
         this._onInputComputed(event.nodeId, event.property, {
@@ -573,6 +534,37 @@ _ts_decorate([
 _ts_decorate([
   synchronized
 ], ComputeGraphController.prototype, "exec", null);
+var traceEventToComputeEvent = (key, payload) => {
+  switch (key) {
+    case ComputeBeginEvent.key:
+      return {
+        type: "begin-compute",
+        ...payload
+      };
+    case ComputeEndEvent.key:
+      return {
+        type: "end-compute",
+        ...payload
+      };
+    case ComputeInputEvent.key:
+      return {
+        type: "compute-input",
+        ...payload
+      };
+    case ComputeOutputEvent.key:
+      return {
+        type: "compute-output",
+        ...payload
+      };
+    case ComputeCustomEvent.key:
+      return {
+        type: "custom",
+        ...payload
+      };
+    default:
+      return void 0;
+  }
+};
 var computeValueBag = (bag) => {
   return Effect.all(Object.entries(bag.values).map(([key, eff]) => Effect.either(eff).pipe(Effect.map((value) => {
     if (Either.isLeft(value)) {
@@ -604,92 +596,76 @@ var computeValueBag = (bag) => {
   })))).pipe(Effect.map((entries) => Object.fromEntries(entries)));
 };
 
-// packages/ui/react-ui-canvas-compute/src/registry.ts
+// src/registry.ts
 import { noteShape } from "@dxos/react-ui-canvas-editor";
 
-// packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
+// src/shapes/common/Box.tsx
 import React, { forwardRef } from "react";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { Icon, IconButton } from "@dxos/react-ui";
 import { useEditorContext, useShapeDef } from "@dxos/react-ui-canvas-editor";
-import { mx } from "@dxos/react-ui-theme";
-var __dxlog_file5 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx";
+import { mx } from "@dxos/ui-theme";
+var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx";
 var headerHeight = 32;
 var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    invariant4(shape.type, void 0, {
-      F: __dxlog_file5,
-      L: 30,
-      S: void 0,
-      A: [
-        "shape.type",
-        ""
-      ]
-    });
-    const { icon, name, openable } = useShapeDef(shape.type) ?? {
-      icon: "ph--placeholder--regular"
-    };
-    const { debug } = useEditorContext();
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: forwardedRef,
-      className: "flex flex-col h-full w-full justify-between"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
-    }, /* @__PURE__ */ React.createElement(Icon, {
-      icon,
-      classNames: "mx-2"
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: "grow text-sm truncate"
-    }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ React.createElement(IconButton, {
-      classNames: "p-1 text-green-500",
-      variant: "ghost",
-      icon: "ph--play--regular",
-      size: 4,
-      label: "run",
-      iconOnly: true,
-      onDoubleClick: (ev) => ev.stopPropagation(),
-      onClick: (ev) => {
-        ev.stopPropagation();
-        onAction?.("run");
-      }
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: mx("flex flex-col h-full grow overflow-hidden", classNames)
-    }, children), /* @__PURE__ */ React.createElement("div", {
-      className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-hoverSurface"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "grow px-2 text-sm truncate"
-    }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
-      classNames: "p-1",
-      variant: "ghost",
-      icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
-      size: 4,
-      label: open ? "close" : "open",
-      iconOnly: true,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        onAction?.(open ? "close" : "open");
-      }
-    })));
-  } finally {
-    _effect.f();
-  }
+  invariant4(shape.type, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file5, L: 12, S: void 0, A: ["shape.type", ""] });
+  const { icon, name, openable } = useShapeDef(shape.type) ?? {
+    icon: "ph--placeholder--regular"
+  };
+  const { debug } = useEditorContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: forwardedRef,
+    className: "flex flex-col h-full w-full justify-between"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon,
+    classNames: "mx-2"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "grow text-sm truncate"
+  }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1 text-green-500",
+    variant: "ghost",
+    icon: "ph--play--regular",
+    label: "run",
+    iconOnly: true,
+    onDoubleClick: (ev) => ev.stopPropagation(),
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.("run");
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex flex-col h-full grow overflow-hidden", classNames)
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "grow px-2 text-sm truncate"
+  }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1",
+    variant: "ghost",
+    icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
+    label: open ? "close" : "open",
+    iconOnly: true,
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.(open ? "close" : "open");
+    }
+  })));
 });
 
-// packages/ui/react-ui-canvas-compute/src/shapes/common/FunctionBody.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import { SchemaAST as SchemaAST2 } from "effect";
+// src/shapes/common/FunctionBody.tsx
+import * as SchemaAST2 from "effect/SchemaAST";
 import React2, { useRef, useState as useState3 } from "react";
 import { VoidInput, VoidOutput } from "@dxos/conductor";
 import { useCanvasContext } from "@dxos/react-ui-canvas";
-import { getParentShapeElement, createAnchors, rowHeight } from "@dxos/react-ui-canvas-editor";
+import { createAnchors, getParentShapeElement, rowHeight } from "@dxos/react-ui-canvas-editor";
 
-// packages/ui/react-ui-canvas-compute/src/shapes/defs.ts
-import { Schema as Schema2, SchemaAST } from "effect";
+// src/shapes/defs.ts
+import * as Schema2 from "effect/Schema";
+import * as SchemaAST from "effect/SchemaAST";
 import { DEFAULT_INPUT as DEFAULT_INPUT2, DEFAULT_OUTPUT as DEFAULT_OUTPUT2 } from "@dxos/conductor";
-import { ObjectId as ObjectId3 } from "@dxos/echo-schema";
+import { Obj as Obj3 } from "@dxos/echo";
 import { Polygon } from "@dxos/react-ui-canvas-editor";
 var getProperties = (ast) => SchemaAST.getPropertySignatures(ast).map(({ name }) => ({
   name: name.toString()
@@ -707,85 +683,80 @@ var parseAnchorId = (id) => {
 };
 var ComputeShape = Schema2.extend(Polygon, Schema2.Struct({
   // TODO(burdon): Rename computeNode?
-  node: Schema2.optional(ObjectId3.annotations({
+  node: Schema2.optional(Obj3.ID.annotations({
     description: "Compute node id"
   }))
 }).pipe(Schema2.mutable));
 var createShape = ({ id, ...rest }) => {
   return {
-    id: id ?? ObjectId3.random(),
+    id: id ?? Obj3.ID.random(),
     ...rest
   };
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/common/FunctionBody.tsx
+// src/shapes/common/FunctionBody.tsx
 var bodyPadding = 8;
 var expandedHeight = 200;
 var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchema = VoidOutput, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    const { scale } = useCanvasContext();
-    const rootRef = useRef(null);
-    const [open, setOpen] = useState3(false);
-    const handleAction = (action) => {
-      if (!rootRef.current) {
-        return;
-      }
-      switch (action) {
-        case "open": {
-          const el = getParentShapeElement(rootRef.current, shape.id);
-          const { height } = el.getBoundingClientRect();
-          el.style.height = `${height / scale + expandedHeight}px`;
-          setOpen(true);
-          break;
-        }
-        case "close": {
-          const el = getParentShapeElement(rootRef.current, shape.id);
-          el.style.height = "";
-          setOpen(false);
-          break;
-        }
-      }
-    };
-    const inputs = getProperties(inputSchema.ast);
-    const outputs = getProperties(outputSchema.ast);
-    const columnCount = inputs.length && outputs.length ? 2 : 1;
-    return /* @__PURE__ */ React2.createElement(Box, {
-      ref: rootRef,
-      shape,
-      title: name,
-      classNames: "divide-y divide-separator",
-      open,
-      onAction: handleAction,
-      ...props
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: `grid grid-cols-${columnCount} items-center`,
-      style: {
-        paddingTop: bodyPadding,
-        paddingBottom: bodyPadding
-      }
-    }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col"
-    }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
-      key: name2,
-      className: "px-2 truncate text-sm font-mono items-center",
-      style: {
-        height: rowHeight
+  const { scale } = useCanvasContext();
+  const rootRef = useRef(null);
+  const [open, setOpen] = useState3(false);
+  const handleAction = (action) => {
+    if (!rootRef.current) {
+      return;
+    }
+    switch (action) {
+      case "open": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        const { height } = el.getBoundingClientRect();
+        el.style.height = `${height / scale + expandedHeight}px`;
+        setOpen(true);
+        break;
       }
-    }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col"
-    }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
-      key: name2,
-      className: "px-2 truncate text-sm font-mono items-center text-right",
-      style: {
-        height: rowHeight
+      case "close": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        el.style.height = "";
+        setOpen(false);
+        break;
       }
-    }, name2)))), open && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col grow overflow-hidden"
-    }, content));
-  } finally {
-    _effect.f();
-  }
+    }
+  };
+  const inputs = getProperties(inputSchema.ast);
+  const outputs = getProperties(outputSchema.ast);
+  const columnCount = inputs.length && outputs.length ? 2 : 1;
+  return /* @__PURE__ */ React2.createElement(Box, {
+    ref: rootRef,
+    shape,
+    title: name,
+    classNames: "divide-y divide-separator",
+    open,
+    onAction: handleAction,
+    ...props
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: `grid grid-cols-${columnCount} items-center`,
+    style: {
+      paddingTop: bodyPadding,
+      paddingBottom: bodyPadding
+    }
+  }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center",
+    style: {
+      height: rowHeight
+    }
+  }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center text-right",
+    style: {
+      height: rowHeight
+    }
+  }, name2)))), open && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col grow overflow-hidden"
+  }, content));
 };
 var getHeight = (input) => {
   const properties = SchemaAST2.getPropertySignatures(input.ast);
@@ -805,48 +776,36 @@ var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
   });
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/common/TypeSelect.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+// src/shapes/common/TypeSelect.tsx
 import React3 from "react";
 import { ComputeValueType } from "@dxos/conductor";
 import { Select } from "@dxos/react-ui";
 var TypeSelect = ({ value, onValueChange }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(Select.Root, {
-      value,
-      onValueChange
-    }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
-      variant: "ghost",
-      classNames: "w-full !px-0"
-    }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
-      key: type,
-      value: type
-    }, type))), /* @__PURE__ */ React3.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement(Select.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full px-0!"
+  }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
+    key: type,
+    value: type
+  }, type))), /* @__PURE__ */ React3.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select.Arrow, null))));
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Array.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema3 } from "effect";
+// src/shapes/Array.tsx
+import * as Schema3 from "effect/Schema";
 import React4 from "react";
 import { ReducerInput, ReducerOutput } from "@dxos/conductor";
 var ReducerShape = Schema3.extend(ComputeShape, Schema3.Struct({
   type: Schema3.Literal("reducer")
 }));
 var ReducerComponent = ({ shape }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(FunctionBody, {
-      shape,
-      inputSchema: ReducerInput,
-      outputSchema: ReducerOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React4.createElement(FunctionBody, {
+    shape,
+    inputSchema: ReducerInput,
+    outputSchema: ReducerOutput
+  });
 };
 var createReducer = ({ id, size = {
   width: 192,
@@ -865,9 +824,8 @@ var reducerShape = {
   getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput)
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Append.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema4 } from "effect";
+// src/shapes/Append.tsx
+import * as Schema4 from "effect/Schema";
 import React5 from "react";
 import { AppendInput } from "@dxos/conductor";
 var AppendShape = Schema4.extend(ComputeShape, Schema4.Struct({
@@ -882,15 +840,10 @@ var createAppend = (props) => createShape({
   ...props
 });
 var AppendComponent = ({ shape }) => {
-  var _effect = _useSignals5();
-  try {
-    return /* @__PURE__ */ React5.createElement(FunctionBody, {
-      shape,
-      inputSchema: AppendInput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React5.createElement(FunctionBody, {
+    shape,
+    inputSchema: AppendInput
+  });
 };
 var appendShape = {
   type: "append",
@@ -901,9 +854,8 @@ var appendShape = {
   getAnchors: (shape) => createFunctionAnchors(shape, AppendInput)
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Audio.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema5 } from "effect";
+// src/shapes/Audio.tsx
+import * as Schema5 from "effect/Schema";
 import React6, { useEffect as useEffect3, useState as useState4 } from "react";
 import { Icon as Icon2 } from "@dxos/react-ui";
 import { createAnchorMap } from "@dxos/react-ui-canvas-editor";
@@ -919,29 +871,24 @@ var createAudio = (props) => createShape({
   ...props
 });
 var AudioComponent = ({ shape }) => {
-  var _effect = _useSignals6();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const [active, setActive] = useState4(false);
-    useEffect3(() => {
-      node.value = active;
-    }, [
-      active
-    ]);
-    return /* @__PURE__ */ React6.createElement("div", {
-      className: "flex w-full justify-center items-center"
-    }, /* @__PURE__ */ React6.createElement(Icon2, {
-      icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
-      classNames: [
-        "transition opacity-20 duration-1000",
-        active && "opacity-100 text-red-500"
-      ],
-      size: 8,
-      onClick: () => setActive(!active)
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { node } = useComputeNodeState(shape);
+  const [active, setActive] = useState4(false);
+  useEffect3(() => {
+    node.value = active;
+  }, [
+    active
+  ]);
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React6.createElement(Icon2, {
+    icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
+    classNames: [
+      "transition opacity-20 duration-1000",
+      active && "opacity-100 text-error-text"
+    ],
+    size: 8,
+    onClick: () => setActive(!active)
+  }));
 };
 var audioShape = {
   type: "audio",
@@ -957,14 +904,12 @@ var audioShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Beacon.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema6 } from "effect";
+// src/shapes/Beacon.tsx
+import * as Schema6 from "effect/Schema";
 import React7 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT3, isTruthy } from "@dxos/conductor";
 import { Icon as Icon3 } from "@dxos/react-ui";
 import { createAnchorMap as createAnchorMap2 } from "@dxos/react-ui-canvas-editor";
-import { mx as mx2 } from "@dxos/react-ui-theme";
 var BeaconShape = Schema6.extend(ComputeShape, Schema6.Struct({
   type: Schema6.Literal("beacon")
 }));
@@ -977,21 +922,19 @@ var createBeacon = (props) => createShape({
   ...props
 });
 var BeaconComponent = ({ shape }) => {
-  var _effect = _useSignals7();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT3];
-    const value = input?.type === "executed" ? input.value : false;
-    return /* @__PURE__ */ React7.createElement("div", {
-      className: "flex w-full justify-center items-center"
-    }, /* @__PURE__ */ React7.createElement(Icon3, {
-      icon: "ph--sun--regular",
-      classNames: mx2("transition opacity-20 duration-1000", isTruthy(value) && "opacity-100 text-yellow-500"),
-      size: 8
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT3];
+  const value = input?.type === "executed" ? input.value : false;
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React7.createElement(Icon3, {
+    icon: "ph--sun--regular",
+    classNames: [
+      "transition opacity-20 duration-1000",
+      isTruthy(value) && "opacity-100 text-yellow-500"
+    ],
+    size: 8
+  }));
 };
 var beaconShape = {
   type: "beacon",
@@ -1007,8 +950,8 @@ var beaconShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Boolean.tsx
-import { Schema as Schema7 } from "effect";
+// src/shapes/Boolean.tsx
+import * as Schema7 from "effect/Schema";
 import React8 from "react";
 import { getAnchorPoints } from "@dxos/react-ui-canvas-editor";
 import { createAnchors as createAnchors2 } from "@dxos/react-ui-canvas-editor";
@@ -1059,7 +1002,7 @@ var createSymbol = (pathConstructor, inputs) => ({
   });
   return /* @__PURE__ */ React8.createElement("svg", {
     viewBox: `0 0 ${width} ${height}`,
-    className: "w-full h-full"
+    className: "h-full w-full"
   }, getAnchorPoints({
     x: 0,
     y: centerY
@@ -1180,9 +1123,8 @@ var notShape = defineShape({
   ]
 });
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Chat.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema8 } from "effect";
+// src/shapes/Chat.tsx
+import * as Schema8 from "effect/Schema";
 import React9, { useRef as useRef2 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT3 } from "@dxos/conductor";
 import { TextBox } from "@dxos/react-ui-canvas-editor";
@@ -1191,28 +1133,23 @@ var ChatShape = Schema8.extend(ComputeShape, Schema8.Struct({
   type: Schema8.Literal("chat")
 }));
 var TextInputComponent = ({ shape, title, ...props }) => {
-  var _effect = _useSignals8();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const inputRef = useRef2(null);
-    const handleEnter = (text) => {
-      const value = text.trim();
-      if (value.length) {
-        runtime.setOutput(DEFAULT_OUTPUT3, value);
-        inputRef.current?.setText("");
-      }
-    };
-    return /* @__PURE__ */ React9.createElement(Box, {
-      shape,
-      title
-    }, /* @__PURE__ */ React9.createElement(TextBox, {
-      ref: inputRef,
-      onEnter: handleEnter,
-      ...props
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const inputRef = useRef2(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      runtime.setOutput(DEFAULT_OUTPUT3, value);
+      inputRef.current?.setText("");
+    }
+  };
+  return /* @__PURE__ */ React9.createElement(Box, {
+    shape,
+    title
+  }, /* @__PURE__ */ React9.createElement(TextBox, {
+    ref: inputRef,
+    onEnter: handleEnter,
+    ...props
+  }));
 };
 var createChat = (props) => createShape({
   type: "chat",
@@ -1241,9 +1178,8 @@ var chatShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Constant.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema9 } from "effect";
+// src/shapes/Constant.tsx
+import * as Schema9 from "effect/Schema";
 import React10, { useCallback as useCallback2, useRef as useRef3, useState as useState5 } from "react";
 import { ComputeValueType as ComputeValueType2 } from "@dxos/conductor";
 import { Input } from "@dxos/react-ui";
@@ -1266,57 +1202,52 @@ var inferType = (value) => {
   }
 };
 var ConstantComponent = ({ shape, title, chat, ...props }) => {
-  var _effect = _useSignals9();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const [type, setType] = useState5(inferType(node.value) ?? ComputeValueType2.literals[0]);
-    const inputRef = useRef3(null);
-    const handleEnter = useCallback2((text) => {
-      const value = text.trim();
-      if (value.length) {
-        if (type === "number") {
-          const floatValue = parseFloat(value);
-          if (!isNaN(floatValue)) {
-            node.value = floatValue;
-          }
-        } else if (type === "object") {
-          node.value = safeParseJson(value, {});
-        } else {
-          node.value = value;
+  const { node } = useComputeNodeState(shape);
+  const [type, setType] = useState5(inferType(node.value) ?? ComputeValueType2.literals[0]);
+  const inputRef = useRef3(null);
+  const handleEnter = useCallback2((text) => {
+    const value = text.trim();
+    if (value.length) {
+      if (type === "number") {
+        const floatValue = parseFloat(value);
+        if (!isNaN(floatValue)) {
+          node.value = floatValue;
         }
-        inputRef.current?.focus();
-      }
-    }, [
-      type
-    ]);
-    return /* @__PURE__ */ React10.createElement(Box, {
-      shape,
-      title,
-      status: /* @__PURE__ */ React10.createElement(TypeSelect, {
-        value: type,
-        onValueChange: setType
-      })
-    }, (type === "string" || type === "number") && /* @__PURE__ */ React10.createElement(TextBox2, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      onEnter: handleEnter
-    }), type === "object" && /* @__PURE__ */ React10.createElement(TextBox2, {
-      ...props,
-      ref: inputRef,
-      value: JSON.stringify(node.value, null, 2),
-      language: "json"
-    }), type === "boolean" && /* @__PURE__ */ React10.createElement("div", {
-      className: "flex grow justify-center items-center"
-    }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-      checked: node.value,
-      onCheckedChange: (value) => {
+      } else if (type === "object") {
+        node.value = safeParseJson(value, {});
+      } else {
         node.value = value;
       }
-    }))));
-  } finally {
-    _effect.f();
-  }
+      inputRef.current?.focus();
+    }
+  }, [
+    type
+  ]);
+  return /* @__PURE__ */ React10.createElement(Box, {
+    shape,
+    title,
+    status: /* @__PURE__ */ React10.createElement(TypeSelect, {
+      value: type,
+      onValueChange: setType
+    })
+  }, (type === "string" || type === "number") && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    onEnter: handleEnter
+  }), type === "object" && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: JSON.stringify(node.value, null, 2),
+    language: "json"
+  }), type === "boolean" && /* @__PURE__ */ React10.createElement("div", {
+    className: "flex grow justify-center items-center"
+  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
+    checked: node.value,
+    onCheckedChange: (value) => {
+      node.value = value;
+    }
+  }))));
 };
 var createConstant = (props) => createShape({
   type: "constant",
@@ -1344,9 +1275,8 @@ var constantShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Database.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema10 } from "effect";
+// src/shapes/Database.tsx
+import * as Schema10 from "effect/Schema";
 import React11 from "react";
 import { createAnchorMap as createAnchorMap5 } from "@dxos/react-ui-canvas-editor";
 var DatabaseShape = Schema10.extend(ComputeShape, Schema10.Struct({
@@ -1361,14 +1291,9 @@ var createDatabase = (props) => createShape({
   ...props
 });
 var DatabaseComponent = ({ shape }) => {
-  var _effect = _useSignals10();
-  try {
-    return /* @__PURE__ */ React11.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React11.createElement(Box, {
+    shape
+  });
 };
 var databaseShape = {
   type: "database",
@@ -1384,18 +1309,83 @@ var databaseShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Function.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema11 } from "effect";
-import React12, { useCallback as useCallback3, useRef as useRef4 } from "react";
+// src/shapes/Feed.tsx
+import * as Schema11 from "effect/Schema";
+import React12, { Fragment } from "react";
+import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
+import { ScrollArea } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+var FeedShape = Schema11.extend(ComputeShape, Schema11.Struct({
+  type: Schema11.Literal("queue")
+}));
+var createFeed = (props) => createShape({
+  type: "queue",
+  size: {
+    width: 256,
+    height: 512
+  },
+  ...props
+});
+var FeedComponent = ({ shape }) => {
+  const { runtime } = useComputeNodeState(shape);
+  const items = runtime.outputs[DEFAULT_OUTPUT4]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT4].value : [];
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React12.createElement(Box, {
+    shape,
+    status: `${items.length} items`,
+    onAction: handleAction
+  }, /* @__PURE__ */ React12.createElement(ScrollArea.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React12.createElement(ScrollArea.Viewport, {
+    classNames: "divide-y divide-separator"
+  }, [
+    ...items
+  ].map((item, i) => /* @__PURE__ */ React12.createElement(FeedItem, {
+    key: i,
+    classNames: "p-1 px-2",
+    item
+  })))));
+};
+var FeedItem = ({ classNames, item }) => {
+  if (typeof item !== "object") {
+    return /* @__PURE__ */ React12.createElement("div", {
+      className: mx2(classNames, "whitespace-pre-wrap")
+    }, item);
+  }
+  return /* @__PURE__ */ React12.createElement("div", {
+    className: mx2("grid grid-cols-[80px_1fr]", classNames)
+  }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ React12.createElement(Fragment, {
+    key
+  }, /* @__PURE__ */ React12.createElement("div", {
+    className: "p-1 text-xs text-subdued"
+  }, key), /* @__PURE__ */ React12.createElement("div", null, typeof value === "string" ? value : JSON.stringify(value)))));
+};
+var feedShape = {
+  type: "feed",
+  name: "Feed",
+  icon: "ph--queue--regular",
+  component: FeedComponent,
+  createShape: createFeed,
+  getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
+  resizable: true
+};
+
+// src/shapes/Function.tsx
+import * as Schema12 from "effect/Schema";
+import React13, { useCallback as useCallback3, useRef as useRef4 } from "react";
+import { Script } from "@dxos/compute";
+import { Operation } from "@dxos/compute";
 import { AnyOutput, FunctionInput } from "@dxos/conductor";
-import { getSnapshot, isInstanceOf, Ref as Ref2 } from "@dxos/echo-schema";
-import { FunctionType, ScriptType } from "@dxos/functions";
+import { Ref as Ref2, getSnapshot, isInstanceOf } from "@dxos/echo/internal";
 import { useClient } from "@dxos/react-client";
-import { Filter, makeRef, parseId } from "@dxos/react-client/echo";
+import { Filter, parseId } from "@dxos/react-client/echo";
 import { TextBox as TextBox3 } from "@dxos/react-ui-canvas-editor";
-var FunctionShape = Schema11.extend(ComputeShape, Schema11.Struct({
-  type: Schema11.Literal("function")
+var FunctionShape = Schema12.extend(ComputeShape, Schema12.Struct({
+  type: Schema12.Literal("function")
 }));
 var createFunction = (props) => createShape({
   type: "function",
@@ -1406,59 +1396,54 @@ var createFunction = (props) => createShape({
   ...props
 });
 var TextInputComponent2 = ({ shape, title, ...props }) => {
-  var _effect = _useSignals11();
-  try {
-    const client = useClient();
-    const { node, runtime } = useComputeNodeState(shape);
-    const inputRef = useRef4(null);
-    const handleEnter = useCallback3(async (text) => {
-      const value = text.trim();
-      const { spaceId, objectId } = parseId(value);
-      if (!spaceId || !objectId) {
-        return;
-      }
-      const space = client.spaces.get(spaceId);
-      const object = space?.db.getObjectById(objectId);
-      if (!space || !isInstanceOf(ScriptType, object)) {
-        return;
-      }
-      const { objects: [fn] } = await space.db.query(Filter.type(FunctionType, {
-        source: Ref2.make(object)
-      })).run();
-      if (!fn) {
-        return;
-      }
-      node.value = value;
-      node.function = makeRef(fn);
-      node.inputSchema = getSnapshot(fn.inputSchema);
-      node.outputSchema = getSnapshot(fn.outputSchema);
-    }, [
-      client,
-      node
-    ]);
-    const handleAction = useCallback3((action) => {
-      if (action !== "run") {
-        return;
-      }
-      runtime.evalNode();
-    }, [
-      runtime
-    ]);
-    return /* @__PURE__ */ React12.createElement(Box, {
-      shape,
-      title: "Function",
-      onAction: handleAction
-    }, /* @__PURE__ */ React12.createElement(TextBox3, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      language: node.valueType === "object" ? "json" : void 0,
-      onBlur: handleEnter,
-      onEnter: handleEnter
-    }));
-  } finally {
-    _effect.f();
-  }
+  const client = useClient();
+  const { node, runtime } = useComputeNodeState(shape);
+  const inputRef = useRef4(null);
+  const handleEnter = useCallback3(async (text) => {
+    const value = text.trim();
+    const { spaceId, objectId } = parseId(value);
+    if (!spaceId || !objectId) {
+      return;
+    }
+    const space = client.spaces.get(spaceId);
+    const object = space?.db.getObjectById(objectId);
+    if (!space || !isInstanceOf(Script.Script, object)) {
+      return;
+    }
+    const [fn] = await space.db.query(Filter.type(Operation.PersistentOperation, {
+      source: Ref2.make(object)
+    })).run();
+    if (!fn) {
+      return;
+    }
+    node.value = value;
+    node.function = Ref2.make(fn);
+    node.inputSchema = fn.inputSchema ? getSnapshot(fn.inputSchema) : void 0;
+    node.outputSchema = fn.outputSchema ? getSnapshot(fn.outputSchema) : void 0;
+  }, [
+    client,
+    node
+  ]);
+  const handleAction = useCallback3((action) => {
+    if (action !== "run") {
+      return;
+    }
+    runtime.evalNode();
+  }, [
+    runtime
+  ]);
+  return /* @__PURE__ */ React13.createElement(Box, {
+    shape,
+    title: "Function",
+    onAction: handleAction
+  }, /* @__PURE__ */ React13.createElement(TextBox3, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
 };
 var functionShape = {
   type: "function",
@@ -1469,13 +1454,13 @@ var functionShape = {
   getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput)
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Gpt.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema12 } from "effect";
-import React13, { useEffect as useEffect4, useState as useState6 } from "react";
+// src/shapes/Gpt.tsx
+import * as Schema13 from "effect/Schema";
+import React14, { useEffect as useEffect4, useState as useState6 } from "react";
 import { GptInput, GptOutput } from "@dxos/conductor";
-var GptShape = Schema12.extend(ComputeShape, Schema12.Struct({
-  type: Schema12.Literal("gpt")
+import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
+var GptShape = Schema13.extend(ComputeShape, Schema13.Struct({
+  type: Schema13.Literal("gpt")
 }));
 var createGpt = (props) => createShape({
   type: "gpt",
@@ -1486,54 +1471,50 @@ var createGpt = (props) => createShape({
   ...props
 });
 var GptComponent = ({ shape }) => {
-  var _effect = _useSignals12();
-  try {
-    const { meta, runtime } = useComputeNodeState(shape);
-    const [text, setText] = useState6("");
-    const [tokens, setTokens] = useState6(0);
-    useEffect4(() => {
-      return runtime.subscribeToEventLog((ev) => {
-        switch (ev.type) {
-          case "begin-compute": {
-            setText("");
-            break;
-          }
-          case "custom": {
-            const token = ev.event;
-            switch (token.type) {
-              case "content_block_delta":
-                switch (token.delta.type) {
-                  case "text_delta": {
-                    const delta = token.delta.text;
-                    setText((prev) => {
-                      const text2 = prev + delta;
-                      setTokens(text2.split(" ").length);
-                      return text2;
-                    });
-                    break;
-                  }
+  const { meta, runtime } = useComputeNodeState(shape);
+  const [text, setText] = useState6("");
+  const [tokens, setTokens] = useState6(0);
+  useEffect4(() => {
+    return runtime.subscribeToEventLog((ev) => {
+      switch (ev.type) {
+        case "begin-compute": {
+          setText("");
+          break;
+        }
+        case "custom": {
+          const token = ev.event;
+          switch (token.type) {
+            case "content_block_delta":
+              switch (token.delta.type) {
+                case "text_delta": {
+                  const delta = token.delta.text;
+                  setText((prev) => {
+                    const text2 = prev + delta;
+                    setTokens(text2.split(" ").length);
+                    return text2;
+                  });
+                  break;
                 }
-                break;
-            }
-            break;
+              }
+              break;
           }
+          break;
         }
-      });
-    }, [
-      runtime?.subscribeToEventLog
-    ]);
-    return /* @__PURE__ */ React13.createElement(FunctionBody, {
-      shape,
-      content: /* @__PURE__ */ React13.createElement("div", {
-        className: "px-2 py-1 overflow-y-scroll"
-      }, text),
-      status: `${tokens} tokens`,
-      inputSchema: meta.input,
-      outputSchema: meta.output
+      }
     });
-  } finally {
-    _effect.f();
-  }
+  }, [
+    runtime?.subscribeToEventLog
+  ]);
+  return /* @__PURE__ */ React14.createElement(FunctionBody, {
+    shape,
+    content: /* @__PURE__ */ React14.createElement(ScrollArea2.Root, {
+      orientation: "vertical",
+      thin: true
+    }, /* @__PURE__ */ React14.createElement(ScrollArea2.Viewport, null, text)),
+    status: `${tokens} tokens`,
+    inputSchema: meta.input,
+    outputSchema: meta.output
+  });
 };
 var gptShape = {
   type: "gpt",
@@ -1545,44 +1526,147 @@ var gptShape = {
   openable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Json.tsx
-import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema13 } from "effect";
-import React14 from "react";
+// src/shapes/GptRealtime.tsx
+import * as Schema14 from "effect/Schema";
+import React15, { useState as useState7 } from "react";
+import { log as log2 } from "@dxos/log";
+import { useConfig } from "@dxos/react-client";
+import { Icon as Icon4 } from "@dxos/react-ui";
+var __dxlog_file6 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx";
+var GptRealtimeShape = Schema14.extend(ComputeShape, Schema14.Struct({
+  type: Schema14.Literal("gpt-realtime")
+}));
+var createGptRealtime = (props) => createShape({
+  type: "gpt-realtime",
+  size: {
+    width: 256,
+    height: 256
+  },
+  ...props
+});
+var GptRealtimeComponent = ({ shape }) => {
+  const [isLive, setIsLive] = useState7(false);
+  const [isReady, setIsReady] = useState7(false);
+  const config = useConfig();
+  const start = async () => {
+    setIsLive(true);
+    try {
+      const peerConnection = new RTCPeerConnection();
+      peerConnection.ontrack = (event) => {
+        const audioElement = document.createElement("audio");
+        audioElement.srcObject = event.streams[0];
+        audioElement.autoplay = true;
+        audioElement.controls = false;
+        audioElement.style.display = "none";
+        document.body.appendChild(audioElement);
+        setIsReady(true);
+      };
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: true
+      });
+      stream.getTracks().forEach((track) => peerConnection.addTransceiver(track, {
+        direction: "sendrecv"
+      }));
+      const offer = await peerConnection.createOffer();
+      await peerConnection.setLocalDescription(offer);
+      const AiServiceUrl = new URL("/rtc-connect", config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL);
+      const response = await fetch(AiServiceUrl, {
+        method: "POST",
+        body: offer.sdp,
+        headers: {
+          "Content-Type": "application/sdp"
+        }
+      });
+      const answer = await response.text();
+      await peerConnection.setRemoteDescription({
+        sdp: answer,
+        type: "answer"
+      });
+      const dataChannel = peerConnection.createDataChannel("response");
+      const configureData = () => {
+        log2.info("Configuring data channel", void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 69, S: void 0 });
+        const event = {
+          type: "session.update",
+          session: {
+            modalities: [
+              "text",
+              "audio"
+            ],
+            // Provide the tools. Note they match the keys in the `fns` object above
+            tools: []
+          }
+        };
+        dataChannel.send(JSON.stringify(event));
+      };
+      dataChannel.addEventListener("open", (ev) => {
+        log2.info("Opening data channel", {
+          ev
+        }, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 84, S: void 0 });
+        configureData();
+      });
+      dataChannel.addEventListener("message", async (ev) => {
+        const msg = JSON.parse(ev.data);
+        if (msg.type === "response.function_call_arguments.done") {
+        }
+      });
+    } catch (error) {
+      log2.error("Error in realtime session:", {
+        error
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file6, L: 124, S: void 0 });
+      throw error;
+    }
+  };
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React15.createElement(Icon4, {
+    icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
+    size: 16,
+    classNames: !isLive && "cursor-pointer",
+    onClick: start
+  }));
+};
+var gptRealtimeShape = {
+  type: "gpt-realtime",
+  name: "GPT Realtime",
+  icon: "ph--pulse--regular",
+  component: GptRealtimeComponent,
+  createShape: createGptRealtime,
+  // TODO(dmaretskyi): Can we fetch the schema dynamically?
+  getAnchors: (shape) => createFunctionAnchors(shape, Schema14.Struct({
+    audio: Schema14.Any
+  }), Schema14.Struct({})),
+  resizable: true
+};
+var DEFAULT_AI_SERVICE_URL = "http://localhost:8788";
+
+// src/shapes/Json.tsx
+import * as Schema15 from "effect/Schema";
+import React16 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT4, DefaultOutput, JsonTransformInput } from "@dxos/conductor";
 import { createAnchorMap as createAnchorMap6 } from "@dxos/react-ui-canvas-editor";
-import { JsonFilter } from "@dxos/react-ui-syntax-highlighter";
-var JsonShape = Schema13.extend(ComputeShape, Schema13.Struct({
-  type: Schema13.Literal("json")
+import { Syntax } from "@dxos/react-ui-syntax-highlighter";
+var JsonShape = Schema15.extend(ComputeShape, Schema15.Struct({
+  type: Schema15.Literal("json")
 }));
-var JsonTransformShape = Schema13.extend(ComputeShape, Schema13.Struct({
-  type: Schema13.Literal("json-transform")
+var JsonTransformShape = Schema15.extend(ComputeShape, Schema15.Struct({
+  type: Schema15.Literal("json-transform")
 }));
 var JsonComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT4];
-    const value = input?.type === "executed" ? input.value : void 0;
-    return /* @__PURE__ */ React14.createElement(Box, {
-      shape
-    }, /* @__PURE__ */ React14.createElement(JsonFilter, {
-      data: value,
-      classNames: "text-xs"
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT4];
+  const value = input?.type === "executed" ? input.value : void 0;
+  return /* @__PURE__ */ React16.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React16.createElement(Syntax.Root, {
+    data: value
+  }, /* @__PURE__ */ React16.createElement(Syntax.Content, null, /* @__PURE__ */ React16.createElement(Syntax.Filter, null), /* @__PURE__ */ React16.createElement(Syntax.Viewport, null, /* @__PURE__ */ React16.createElement(Syntax.Code, {
+    classNames: "text-xs"
+  })))));
 };
 var JsonTransformComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    return /* @__PURE__ */ React14.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React16.createElement(Box, {
+    shape
+  });
 };
 var createJson = (props) => createShape({
   type: "json",
@@ -1596,7 +1680,7 @@ var jsonShape = {
   type: "json",
   name: "JSON",
   icon: "ph--code--regular",
-  component: (props) => /* @__PURE__ */ React14.createElement(JsonComponent, props),
+  component: (props) => /* @__PURE__ */ React16.createElement(JsonComponent, props),
   createShape: createJson,
   getAnchors: (shape) => createAnchorMap6(shape, {
     [createAnchorId("input")]: {
@@ -1622,46 +1706,35 @@ var jsonTransformShape = {
   type: "json-transform",
   name: "Transform",
   icon: "ph--shuffle-simple--regular",
-  component: (props) => /* @__PURE__ */ React14.createElement(JsonTransformComponent, props),
+  component: (props) => /* @__PURE__ */ React16.createElement(JsonTransformComponent, props),
   createShape: createJsonTransform,
   getAnchors: (shape) => createFunctionAnchors(shape, JsonTransformInput, DefaultOutput),
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Logic.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema14 } from "effect";
-import React15 from "react";
+// src/shapes/Logic.tsx
+import * as Schema16 from "effect/Schema";
+import React17 from "react";
 import { IfElseInput, IfElseOutput, IfInput, IfOutput } from "@dxos/conductor";
-var IfShape = Schema14.extend(ComputeShape, Schema14.Struct({
-  type: Schema14.Literal("if")
+var IfShape = Schema16.extend(ComputeShape, Schema16.Struct({
+  type: Schema16.Literal("if")
 }));
-var IfElseShape = Schema14.extend(ComputeShape, Schema14.Struct({
-  type: Schema14.Literal("if-else")
+var IfElseShape = Schema16.extend(ComputeShape, Schema16.Struct({
+  type: Schema16.Literal("if-else")
 }));
 var IfComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals14();
-  try {
-    return /* @__PURE__ */ React15.createElement(FunctionBody, {
-      shape,
-      inputSchema: IfInput,
-      outputSchema: IfOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React17.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfInput,
+    outputSchema: IfOutput
+  });
 };
 var IfElseComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals14();
-  try {
-    return /* @__PURE__ */ React15.createElement(FunctionBody, {
-      shape,
-      inputSchema: IfElseInput,
-      outputSchema: IfElseOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React17.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfElseInput,
+    outputSchema: IfElseOutput
+  });
 };
 var createIf = (props) => createShape({
   type: "if",
@@ -1675,7 +1748,7 @@ var ifShape = {
   type: "if",
   name: "IF",
   icon: "ph--arrows-split--regular",
-  component: (props) => /* @__PURE__ */ React15.createElement(IfComponent, props),
+  component: (props) => /* @__PURE__ */ React17.createElement(IfComponent, props),
   createShape: createIf,
   getAnchors: (shape) => createFunctionAnchors(shape, IfInput, IfOutput)
 };
@@ -1691,96 +1764,21 @@ var ifElseShape = {
   type: "if-else",
   name: "IF/ELSE",
   icon: "ph--arrows-merge--regular",
-  component: (props) => /* @__PURE__ */ React15.createElement(IfElseComponent, props),
+  component: (props) => /* @__PURE__ */ React17.createElement(IfElseComponent, props),
   createShape: createIfElse,
   getAnchors: (shape) => createFunctionAnchors(shape, IfElseInput, IfElseOutput)
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Queue.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema15 } from "effect";
-import React16, { Fragment } from "react";
-import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var QueueShape = Schema15.extend(ComputeShape, Schema15.Struct({
-  type: Schema15.Literal("queue")
-}));
-var createQueue = (props) => createShape({
-  type: "queue",
-  size: {
-    width: 256,
-    height: 512
-  },
-  ...props
-});
-var QueueComponent = ({ shape }) => {
-  var _effect = _useSignals15();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const items = runtime.outputs[DEFAULT_OUTPUT4]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT4].value : [];
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React16.createElement(Box, {
-      shape,
-      status: `${items.length} items`,
-      onAction: handleAction
-    }, /* @__PURE__ */ React16.createElement("div", {
-      className: "flex flex-col w-full overflow-y-scroll divide-y divide-separator"
-    }, [
-      ...items
-    ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
-      key: i,
-      classNames: "p-1 px-2",
-      item
-    }))));
-  } finally {
-    _effect.f();
-  }
-};
-var QueueItem = ({ classNames, item }) => {
-  var _effect = _useSignals15();
-  try {
-    if (typeof item !== "object") {
-      return /* @__PURE__ */ React16.createElement("div", {
-        className: mx3(classNames, "whitespace-pre-wrap")
-      }, item);
-    }
-    return /* @__PURE__ */ React16.createElement("div", {
-      className: mx3("grid grid-cols-[80px,1fr]", classNames)
-    }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ React16.createElement(Fragment, {
-      key
-    }, /* @__PURE__ */ React16.createElement("div", {
-      className: "p-1 text-xs text-subdued"
-    }, key), /* @__PURE__ */ React16.createElement("div", null, typeof value === "string" ? value : JSON.stringify(value)))));
-  } finally {
-    _effect.f();
-  }
-};
-var queueShape = {
-  type: "queue",
-  name: "Queue",
-  icon: "ph--queue--regular",
-  component: QueueComponent,
-  createShape: createQueue,
-  getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
-  resizable: true
-};
-
-// packages/ui/react-ui-canvas-compute/src/shapes/RNG.tsx
-import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema16 } from "effect";
-import React17, { useEffect as useEffect5, useState as useState7 } from "react";
+// src/shapes/RNG.tsx
+import * as Schema17 from "effect/Schema";
+import React18, { useEffect as useEffect5, useState as useState8 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT5 } from "@dxos/conductor";
-import { Icon as Icon4 } from "@dxos/react-ui";
+import { Icon as Icon5 } from "@dxos/react-ui";
 import { createAnchorMap as createAnchorMap7 } from "@dxos/react-ui-canvas-editor";
-import { mx as mx4 } from "@dxos/react-ui-theme";
-var RandomShape = Schema16.extend(ComputeShape, Schema16.Struct({
-  type: Schema16.Literal("rng"),
-  min: Schema16.optional(Schema16.Number),
-  max: Schema16.optional(Schema16.Number)
+var RandomShape = Schema17.extend(ComputeShape, Schema17.Struct({
+  type: Schema17.Literal("rng"),
+  min: Schema17.optional(Schema17.Number),
+  max: Schema17.optional(Schema17.Number)
 }));
 var createRandom = (props) => createShape({
   type: "rng",
@@ -1800,42 +1798,37 @@ var icons = [
 ];
 var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
 var RandomComponent = ({ shape }) => {
-  var _effect = _useSignals16();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const [spin, setSpin] = useState7(false);
-    const [icon, setIcon] = useState7(pickIcon());
-    useEffect5(() => {
-      if (!spin) {
-        return;
-      }
-      const i = setInterval(() => setIcon(pickIcon()), 250);
-      const t1 = setTimeout(() => clearInterval(i), 900);
-      const t2 = setTimeout(() => setSpin(false), 1100);
-      return () => {
-        clearInterval(i);
-        clearTimeout(t1);
-        clearTimeout(t2);
-      };
-    }, [
-      spin
-    ]);
-    const handleClick = (ev) => {
-      ev.stopPropagation();
-      runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
-      setSpin(true);
+  const { runtime } = useComputeNodeState(shape);
+  const [spin, setSpin] = useState8(false);
+  const [icon, setIcon] = useState8(pickIcon());
+  useEffect5(() => {
+    if (!spin) {
+      return;
+    }
+    const i = setInterval(() => setIcon(pickIcon()), 250);
+    const t1 = setTimeout(() => clearInterval(i), 900);
+    const t2 = setTimeout(() => setSpin(false), 1100);
+    return () => {
+      clearInterval(i);
+      clearTimeout(t1);
+      clearTimeout(t2);
     };
-    return /* @__PURE__ */ React17.createElement("div", {
-      className: "flex grow items-center justify-center"
-    }, /* @__PURE__ */ React17.createElement(Icon4, {
-      icon,
-      classNames: mx4(spin && "animate-[spin_1s]"),
-      size: 10,
-      onClick: handleClick
-    }));
-  } finally {
-    _effect.f();
-  }
+  }, [
+    spin
+  ]);
+  const handleClick = (ev) => {
+    ev.stopPropagation();
+    runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
+    setSpin(true);
+  };
+  return /* @__PURE__ */ React18.createElement("div", {
+    className: "flex grow items-center justify-center"
+  }, /* @__PURE__ */ React18.createElement(Icon5, {
+    icon,
+    classNames: spin && "animate-[spin_1s]",
+    size: 10,
+    onClick: handleClick
+  }));
 };
 var randomShape = {
   type: "rng",
@@ -1851,15 +1844,14 @@ var randomShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Scope.tsx
-import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema17 } from "effect";
-import React18 from "react";
+// src/shapes/Scope.tsx
+import * as Schema18 from "effect/Schema";
+import React19 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT5 } from "@dxos/conductor";
 import { createAnchorMap as createAnchorMap8 } from "@dxos/react-ui-canvas-editor";
-import { useAudioStream, Chaos, shaderPresets } from "@dxos/react-ui-sfx";
-var ScopeShape = Schema17.extend(ComputeShape, Schema17.Struct({
-  type: Schema17.Literal("scope")
+import { Chaos, shaderPresets, useAudioStream } from "@dxos/react-ui-sfx";
+var ScopeShape = Schema18.extend(ComputeShape, Schema18.Struct({
+  type: Schema18.Literal("scope")
 }));
 var createScope = (props) => createShape({
   type: "scope",
@@ -1871,25 +1863,20 @@ var createScope = (props) => createShape({
   ...props
 });
 var ScopeComponent = ({ shape }) => {
-  var _effect = _useSignals17();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT5];
-    const active = input?.type === "executed" ? input.value : false;
-    const { getAverage } = useAudioStream(active);
-    return /* @__PURE__ */ React18.createElement("div", {
-      className: "flex w-full justify-center items-center bg-black"
-    }, /* @__PURE__ */ React18.createElement(Chaos, {
-      active,
-      getValue: getAverage,
-      options: {
-        ...shaderPresets.heptapod,
-        zoom: 1.2
-      }
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT5];
+  const active = input?.type === "executed" ? input.value : false;
+  const { getAverage } = useAudioStream(active);
+  return /* @__PURE__ */ React19.createElement("div", {
+    className: "flex w-full justify-center items-center bg-black"
+  }, /* @__PURE__ */ React19.createElement(Chaos, {
+    active,
+    getValue: getAverage,
+    options: {
+      ...shaderPresets.heptapod,
+      zoom: 1.2
+    }
+  }));
 };
 var scopeShape = {
   type: "scope",
@@ -1905,15 +1892,16 @@ var scopeShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Surface.tsx
-import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema18 } from "effect";
-import React19 from "react";
-import { Surface } from "@dxos/app-framework";
+// src/shapes/Surface.tsx
+import * as Schema19 from "effect/Schema";
+import React20 from "react";
+import { Surface } from "@dxos/app-framework/ui";
+import { AppSurface } from "@dxos/app-toolkit/ui";
 import { DEFAULT_INPUT as DEFAULT_INPUT6 } from "@dxos/conductor";
+import { Card } from "@dxos/react-ui";
 import { createAnchorMap as createAnchorMap9 } from "@dxos/react-ui-canvas-editor";
-var SurfaceShape = Schema18.extend(ComputeShape, Schema18.Struct({
-  type: Schema18.Literal("surface")
+var SurfaceShape = Schema19.extend(ComputeShape, Schema19.Struct({
+  type: Schema19.Literal("surface")
 }));
 var createSurface = (props) => createShape({
   type: "surface",
@@ -1924,29 +1912,24 @@ var createSurface = (props) => createShape({
   ...props
 });
 var SurfaceComponent = ({ shape }) => {
-  var _effect = _useSignals18();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT6];
-    const value = input?.type === "executed" ? input.value : null;
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React19.createElement(Box, {
-      shape,
-      onAction: handleAction
-    }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
-      role: "canvas-node",
-      data: {
-        value
-      },
-      limit: 1
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT6];
+  const value = input?.type === "executed" ? input.value : null;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React20.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, /* @__PURE__ */ React20.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React20.createElement(Surface.Surface, {
+    type: AppSurface.Card,
+    data: {
+      subject: value
+    },
+    limit: 1
+  })));
 };
 var surfaceShape = {
   type: "surface",
@@ -1963,15 +1946,14 @@ var surfaceShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Switch.tsx
-import { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema19 } from "effect";
-import React20, { useEffect as useEffect6, useState as useState8 } from "react";
+// src/shapes/Switch.tsx
+import * as Schema20 from "effect/Schema";
+import React21, { useEffect as useEffect6, useState as useState9 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT6 } from "@dxos/conductor";
 import { Input as Input2 } from "@dxos/react-ui";
 import { createAnchorMap as createAnchorMap10 } from "@dxos/react-ui-canvas-editor";
-var SwitchShape = Schema19.extend(ComputeShape, Schema19.Struct({
-  type: Schema19.Literal("switch")
+var SwitchShape = Schema20.extend(ComputeShape, Schema20.Struct({
+  type: Schema20.Literal("switch")
 }));
 var createSwitch = (props) => createShape({
   type: "switch",
@@ -1982,25 +1964,20 @@ var createSwitch = (props) => createShape({
   ...props
 });
 var SwitchComponent = ({ shape }) => {
-  var _effect = _useSignals19();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const [value, setValue] = useState8(false);
-    useEffect6(() => {
-      runtime.setOutput(DEFAULT_OUTPUT6, value);
-    }, [
-      value
-    ]);
-    return /* @__PURE__ */ React20.createElement("div", {
-      className: "flex w-full justify-center items-center",
-      onClick: (ev) => ev.stopPropagation()
-    }, /* @__PURE__ */ React20.createElement(Input2.Root, null, /* @__PURE__ */ React20.createElement(Input2.Switch, {
-      checked: value,
-      onCheckedChange: (value2) => setValue(value2)
-    })));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const [value, setValue] = useState9(false);
+  useEffect6(() => {
+    runtime.setOutput(DEFAULT_OUTPUT6, value);
+  }, [
+    value
+  ]);
+  return /* @__PURE__ */ React21.createElement("div", {
+    className: "flex w-full justify-center items-center",
+    onClick: (ev) => ev.stopPropagation()
+  }, /* @__PURE__ */ React21.createElement(Input2.Root, null, /* @__PURE__ */ React21.createElement(Input2.Switch, {
+    checked: value,
+    onCheckedChange: (value2) => setValue(value2)
+  })));
 };
 var switchShape = {
   type: "switch",
@@ -2016,15 +1993,15 @@ var switchShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Table.tsx
-import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema20 } from "effect";
-import React21 from "react";
-import { createInputSchema, createOutputSchema, GptMessage } from "@dxos/conductor";
-var InputSchema = createInputSchema(GptMessage);
-var OutputSchema = createOutputSchema(Schema20.mutable(Schema20.Array(GptMessage)));
-var TableShape = Schema20.extend(ComputeShape, Schema20.Struct({
-  type: Schema20.Literal("table")
+// src/shapes/Table.tsx
+import * as Schema21 from "effect/Schema";
+import React22 from "react";
+import { createInputSchema, createOutputSchema } from "@dxos/conductor";
+import { Message } from "@dxos/types";
+var InputSchema = createInputSchema(Message.Message);
+var OutputSchema = createOutputSchema(Schema21.mutable(Schema21.Array(Message.Message)));
+var TableShape = Schema21.extend(ComputeShape, Schema21.Struct({
+  type: Schema21.Literal("table")
 }));
 var createTable = (props) => createShape({
   type: "table",
@@ -2035,14 +2012,9 @@ var createTable = (props) => createShape({
   ...props
 });
 var TableComponent = ({ shape }) => {
-  var _effect = _useSignals20();
-  try {
-    return /* @__PURE__ */ React21.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React22.createElement(Box, {
+    shape
+  });
 };
 var tableShape = {
   type: "table",
@@ -2054,63 +2026,49 @@ var tableShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx
-import { useSignals as _useSignals21 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema21 } from "effect";
-import React22, { useRef as useRef5 } from "react";
-import { ComputeValueType as ComputeValueType3, getTemplateInputSchema as getTemplateInputSchema2, TemplateOutput, VoidInput as VoidInput2 } from "@dxos/conductor";
-import { toJsonSchema as toJsonSchema2 } from "@dxos/echo-schema";
+// src/shapes/Template.tsx
+import * as Schema22 from "effect/Schema";
+import React23, { useRef as useRef5 } from "react";
+import { ComputeValueType as ComputeValueType3, TemplateOutput, VoidInput as VoidInput2, getTemplateInputSchema as getTemplateInputSchema2 } from "@dxos/conductor";
+import { toJsonSchema } from "@dxos/echo/internal";
 import { invariant as invariant5 } from "@dxos/invariant";
 import { TextBox as TextBox4 } from "@dxos/react-ui-canvas-editor";
-var __dxlog_file6 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx";
-var TemplateShape = Schema21.extend(ComputeShape, Schema21.Struct({
-  type: Schema21.Literal("template"),
-  valueType: Schema21.optional(ComputeValueType3)
+var __dxlog_file7 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/Template.tsx";
+var TemplateShape = Schema22.extend(ComputeShape, Schema22.Struct({
+  type: Schema22.Literal("template"),
+  valueType: Schema22.optional(ComputeValueType3)
 }));
 var TextInputComponent3 = ({ shape, title, ...props }) => {
-  var _effect = _useSignals21();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const inputRef = useRef5(null);
-    const handleEnter = (text) => {
-      const value = text.trim();
-      if (value.length) {
-        const schema = getTemplateInputSchema2(node);
-        node.value = value;
-        node.inputSchema = toJsonSchema2(schema);
-      }
-    };
-    const handleTypeChange = (newType) => {
-      invariant5(Schema21.is(ComputeValueType3)(newType), "Invalid type", {
-        F: __dxlog_file6,
-        L: 58,
-        S: void 0,
-        A: [
-          "Schema.is(ComputeValueType)(newType)",
-          "'Invalid type'"
-        ]
-      });
-      node.valueType = newType;
-      node.inputSchema = toJsonSchema2(getTemplateInputSchema2(node));
-    };
-    return /* @__PURE__ */ React22.createElement(Box, {
-      shape,
-      title: "Template",
-      status: /* @__PURE__ */ React22.createElement(TypeSelect, {
-        value: node.valueType ?? "string",
-        onValueChange: handleTypeChange
-      })
-    }, /* @__PURE__ */ React22.createElement(TextBox4, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      language: node.valueType === "object" ? "json" : void 0,
-      onBlur: handleEnter,
-      onEnter: handleEnter
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { node } = useComputeNodeState(shape);
+  const inputRef = useRef5(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      const schema = getTemplateInputSchema2(node);
+      node.value = value;
+      node.inputSchema = toJsonSchema(schema);
+    }
+  };
+  const handleTypeChange = (newType) => {
+    invariant5(Schema22.is(ComputeValueType3)(newType), "Invalid type", { "~LogMeta": "~LogMeta", F: __dxlog_file7, L: 32, S: void 0, A: ["Schema.is(ComputeValueType)(newType)", "'Invalid type'"] });
+    node.valueType = newType;
+    node.inputSchema = toJsonSchema(getTemplateInputSchema2(node));
+  };
+  return /* @__PURE__ */ React23.createElement(Box, {
+    shape,
+    title: "Template",
+    status: /* @__PURE__ */ React23.createElement(TypeSelect, {
+      value: node.valueType ?? "string",
+      onValueChange: handleTypeChange
+    })
+  }, /* @__PURE__ */ React23.createElement(TextBox4, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
 };
 var createTemplate = (props) => createShape({
   type: "template",
@@ -2124,7 +2082,7 @@ var templateShape = {
   type: "template",
   name: "Template",
   icon: "ph--article--regular",
-  component: (props) => /* @__PURE__ */ React22.createElement(TextInputComponent3, {
+  component: (props) => /* @__PURE__ */ React23.createElement(TextInputComponent3, {
     ...props,
     placeholder: "Prompt"
   }),
@@ -2133,15 +2091,14 @@ var templateShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Text.tsx
-import { useSignals as _useSignals22 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema22 } from "effect";
-import React23 from "react";
+// src/shapes/Text.tsx
+import * as Schema23 from "effect/Schema";
+import React24 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT7 } from "@dxos/conductor";
 import { TextBox as TextBox5 } from "@dxos/react-ui-canvas-editor";
 import { createAnchorMap as createAnchorMap11 } from "@dxos/react-ui-canvas-editor";
-var TextShape = Schema22.extend(ComputeShape, Schema22.Struct({
-  type: Schema22.Literal("text")
+var TextShape = Schema23.extend(ComputeShape, Schema23.Struct({
+  type: Schema23.Literal("text")
 }));
 var createText = (props) => createShape({
   type: "text",
@@ -2152,25 +2109,20 @@ var createText = (props) => createShape({
   ...props
 });
 var TextComponent = ({ shape }) => {
-  var _effect = _useSignals22();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT7];
-    const value = input?.type === "executed" ? input.value : 0;
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React23.createElement(Box, {
-      shape,
-      onAction: handleAction
-    }, /* @__PURE__ */ React23.createElement(TextBox5, {
-      value
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT7];
+  const value = input?.type === "executed" ? input.value : 0;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React24.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, /* @__PURE__ */ React24.createElement(TextBox5, {
+    value
+  }));
 };
 var textShape = {
   type: "text",
@@ -2187,16 +2139,17 @@ var textShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Thread.tsx
-import { useSignals as _useSignals23 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema23 } from "effect";
-import React24, { useEffect as useEffect7, useRef as useRef6 } from "react";
-import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2, GptMessage as GptMessage2 } from "@dxos/conductor";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var InputSchema2 = createInputSchema2(GptMessage2);
-var OutputSchema2 = createOutputSchema2(Schema23.mutable(Schema23.Array(GptMessage2)));
-var ThreadShape = Schema23.extend(ComputeShape, Schema23.Struct({
-  type: Schema23.Literal("thread")
+// src/shapes/Thread.tsx
+import * as Schema24 from "effect/Schema";
+import React25, { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2 } from "@dxos/conductor";
+import { ScrollArea as ScrollArea3 } from "@dxos/react-ui";
+import { Message as Message2 } from "@dxos/types";
+import { mx as mx3 } from "@dxos/ui-theme";
+var InputSchema2 = createInputSchema2(Message2.Message);
+var OutputSchema2 = createOutputSchema2(Schema24.mutable(Schema24.Array(Message2.Message)));
+var ThreadShape = Schema24.extend(ComputeShape, Schema24.Struct({
+  type: Schema24.Literal("thread")
 }));
 var createThread = (props) => createShape({
   type: "thread",
@@ -2207,49 +2160,42 @@ var createThread = (props) => createShape({
   ...props
 });
 var ThreadComponent = ({ shape }) => {
-  var _effect = _useSignals23();
-  try {
-    const items = [];
-    const scrollRef = useRef6(null);
-    useEffect7(() => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-      }
-    }, [
-      items
-    ]);
-    return /* @__PURE__ */ React24.createElement(Box, {
-      shape
-    }, /* @__PURE__ */ React24.createElement("div", {
-      ref: scrollRef,
-      className: "flex flex-col w-full overflow-y-scroll gap-2 p-2"
-    }, [
-      ...items
-    ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
-      key: i,
-      item
-    }))));
-  } finally {
-    _effect.f();
-  }
+  const items = [];
+  const scrollRef = useRef6(null);
+  useEffect7(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ React25.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React25.createElement(ScrollArea3.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React25.createElement(ScrollArea3.Viewport, {
+    classNames: "gap-2 p-2",
+    ref: scrollRef
+  }, [
+    ...items
+  ].map((item, i) => /* @__PURE__ */ React25.createElement(ThreadItem, {
+    key: i,
+    item
+  })))));
 };
 var ThreadItem = ({ classNames, item }) => {
-  var _effect = _useSignals23();
-  try {
-    if (typeof item !== "object") {
-      return /* @__PURE__ */ React24.createElement("div", {
-        className: mx5(classNames)
-      }, item);
-    }
-    const { role, message } = item;
-    return /* @__PURE__ */ React24.createElement("div", {
-      className: mx5("flex", classNames, role === "user" && "justify-end")
-    }, /* @__PURE__ */ React24.createElement("div", {
-      className: mx5("block rounded-md p-1 px-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
-    }, message));
-  } finally {
-    _effect.f();
+  if (typeof item !== "object") {
+    return /* @__PURE__ */ React25.createElement("div", {
+      role: "none",
+      className: mx3(classNames)
+    }, item);
   }
+  const { role, message } = item;
+  return /* @__PURE__ */ React25.createElement("div", {
+    className: mx3("flex", classNames, role === "user" && "justify-end")
+  }, /* @__PURE__ */ React25.createElement("div", {
+    className: mx3("block rounded-md p-1 px-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
+  }, message));
 };
 var threadShape = {
   type: "thread",
@@ -2261,13 +2207,12 @@ var threadShape = {
   resizable: true
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/TextToImage.tsx
-import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema24 } from "effect";
-import React25 from "react";
+// src/shapes/TextToImage.tsx
+import * as Schema25 from "effect/Schema";
+import React26 from "react";
 import { createAnchorMap as createAnchorMap12 } from "@dxos/react-ui-canvas-editor";
-var TextToImageShape = Schema24.extend(ComputeShape, Schema24.Struct({
-  type: Schema24.Literal("text-to-image")
+var TextToImageShape = Schema25.extend(ComputeShape, Schema25.Struct({
+  type: Schema25.Literal("text-to-image")
 }));
 var createTextToImage = (props) => createShape({
   type: "text-to-image",
@@ -2278,14 +2223,9 @@ var createTextToImage = (props) => createShape({
   ...props
 });
 var TextToImageComponent = ({ shape }) => {
-  var _effect = _useSignals24();
-  try {
-    return /* @__PURE__ */ React25.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React26.createElement(Box, {
+    shape
+  });
 };
 var textToImageShape = {
   type: "text-to-image",
@@ -2301,139 +2241,120 @@ var textToImageShape = {
   })
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/Trigger.tsx
-import { useSignals as _useSignals25 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema25 } from "effect";
-import React26, { useEffect as useEffect8 } from "react";
+// src/shapes/Trigger.tsx
+import * as Schema26 from "effect/Schema";
+import React27, { useEffect as useEffect8 } from "react";
+import { Trigger, TriggerEvent } from "@dxos/compute";
 import { VoidInput as VoidInput3 } from "@dxos/conductor";
-import { ObjectId as ObjectId4, Ref as Ref3 } from "@dxos/echo-schema";
-import { FunctionTrigger, TriggerKind, EmailTriggerOutput, QueueTriggerOutput, SubscriptionTriggerOutput, TimerTriggerOutput, WebhookTriggerOutput } from "@dxos/functions";
+import { Filter as Filter2, Obj as Obj4, Query, Ref as Ref3 } from "@dxos/echo";
 import { DXN, SpaceId } from "@dxos/keys";
-import { live, makeRef as makeRef2, useSpace } from "@dxos/react-client/echo";
+import { useSpaces } from "@dxos/react-client/echo";
 import { Select as Select2 } from "@dxos/react-ui";
-var TriggerShape = Schema25.extend(ComputeShape, Schema25.Struct({
-  type: Schema25.Literal("trigger"),
-  functionTrigger: Schema25.optional(Ref3(FunctionTrigger))
+var TriggerShape = Schema26.extend(ComputeShape, Schema26.Struct({
+  type: Schema26.Literal("trigger"),
+  functionTrigger: Schema26.optional(Ref3.Ref(Trigger.Trigger))
 }));
 var createTrigger = (props) => {
-  const functionTrigger = live(FunctionTrigger, {
+  const functionTrigger = Trigger.make({
     enabled: true,
     spec: createTriggerSpec(props)
   });
   return createShape({
     type: "trigger",
-    functionTrigger: makeRef2(functionTrigger),
+    functionTrigger: Ref3.make(functionTrigger),
     size: {
       width: 192,
-      height: getHeight(EmailTriggerOutput)
+      height: getHeight(TriggerEvent.EmailEvent)
     },
     ...props
   });
 };
 var TriggerComponent = ({ shape }) => {
-  var _effect = _useSignals25();
-  try {
-    const space = useSpace();
-    const functionTrigger = shape.functionTrigger?.target;
-    useEffect8(() => {
-      if (functionTrigger && !functionTrigger.spec) {
-        functionTrigger.spec = createTriggerSpec({
-          triggerKind: TriggerKind.Email,
+  const [space] = useSpaces();
+  const functionTrigger = shape.functionTrigger?.target;
+  useEffect8(() => {
+    if (functionTrigger && !functionTrigger.spec) {
+      Obj4.update(functionTrigger, (functionTrigger2) => {
+        functionTrigger2.spec = createTriggerSpec({
+          triggerKind: "email",
           spaceId: space?.id
         });
-      }
-    }, [
-      functionTrigger,
-      functionTrigger?.spec
-    ]);
-    useEffect8(() => {
-      shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.kind ?? TriggerKind.Email));
-    }, [
-      functionTrigger?.spec?.kind
-    ]);
-    const setKind = (kind) => {
-      if (functionTrigger?.spec?.kind !== kind) {
-        functionTrigger.spec = createTriggerSpec({
+      });
+    }
+  }, [
+    functionTrigger,
+    functionTrigger?.spec
+  ]);
+  useEffect8(() => {
+    shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.kind ?? "email"));
+  }, [
+    functionTrigger?.spec?.kind
+  ]);
+  const setKind = (kind) => {
+    if (functionTrigger?.spec?.kind !== kind) {
+      Obj4.update(functionTrigger, (obj) => {
+        obj.spec = createTriggerSpec({
           triggerKind: kind,
           spaceId: space?.id
         });
-      }
-    };
-    if (!functionTrigger?.spec) {
-      return;
+      });
     }
-    return /* @__PURE__ */ React26.createElement(FunctionBody, {
-      shape,
-      status: /* @__PURE__ */ React26.createElement(TriggerKindSelect, {
-        value: functionTrigger.spec?.kind,
-        onValueChange: (kind) => setKind(kind)
-      }),
-      inputSchema: VoidInput3,
-      outputSchema: getOutputSchema(functionTrigger.spec.kind)
-    });
-  } finally {
-    _effect.f();
+  };
+  if (!functionTrigger?.spec) {
+    return;
   }
+  return /* @__PURE__ */ React27.createElement(FunctionBody, {
+    shape,
+    status: /* @__PURE__ */ React27.createElement(TriggerKindSelect, {
+      value: functionTrigger.spec?.kind,
+      onValueChange: (kind) => setKind(kind)
+    }),
+    inputSchema: VoidInput3,
+    outputSchema: getOutputSchema(functionTrigger.spec.kind)
+  });
 };
 var TriggerKindSelect = ({ value, onValueChange }) => {
-  var _effect = _useSignals25();
-  try {
-    return /* @__PURE__ */ React26.createElement(Select2.Root, {
-      value,
-      onValueChange
-    }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
-      variant: "ghost",
-      classNames: "w-full !px-0"
-    }), /* @__PURE__ */ React26.createElement(Select2.Portal, null, /* @__PURE__ */ React26.createElement(Select2.Content, null, /* @__PURE__ */ React26.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React26.createElement(Select2.Viewport, null, Object.values(TriggerKind).map((kind) => /* @__PURE__ */ React26.createElement(Select2.Option, {
-      key: kind,
-      value: kind
-    }, kind))), /* @__PURE__ */ React26.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React26.createElement(Select2.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React27.createElement(Select2.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React27.createElement(Select2.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full px-0!"
+  }), /* @__PURE__ */ React27.createElement(Select2.Portal, null, /* @__PURE__ */ React27.createElement(Select2.Content, null, /* @__PURE__ */ React27.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React27.createElement(Select2.Viewport, null, Trigger.Kinds.map((kind) => /* @__PURE__ */ React27.createElement(Select2.Option, {
+    key: kind,
+    value: kind
+  }, kind))), /* @__PURE__ */ React27.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React27.createElement(Select2.Arrow, null))));
 };
 var createTriggerSpec = (props) => {
-  const kind = props.triggerKind ?? TriggerKind.Email;
+  const kind = props.triggerKind ?? "email";
   switch (kind) {
-    case TriggerKind.Timer:
-      return {
-        kind: TriggerKind.Timer,
-        cron: "*/10 * * * * *"
-      };
-    case TriggerKind.Webhook:
-      return {
-        kind: TriggerKind.Webhook,
+    case "timer":
+      return Trigger.specTimer("*/10 * * * * *");
+    case "webhook":
+      return Trigger.specWebhook({
         method: "POST"
-      };
-    case TriggerKind.Subscription:
-      return {
-        kind: TriggerKind.Subscription,
-        filter: {}
-      };
-    case TriggerKind.Email:
-      return {
-        kind: TriggerKind.Email
-      };
-    case TriggerKind.Queue: {
+      });
+    case "subscription":
+      return Trigger.specSubscription(Query.select(Filter2.nothing()));
+    case "email":
+      return Trigger.specEmail();
+    case "queue": {
       const dxn = new DXN(DXN.kind.QUEUE, [
         "data",
         props.spaceId ?? SpaceId.random(),
-        ObjectId4.random()
+        Obj4.ID.random()
       ]).toString();
-      return {
-        kind: TriggerKind.Queue,
-        queue: dxn
-      };
+      return Trigger.specQueue(dxn);
     }
   }
 };
 var getOutputSchema = (kind) => {
   const kindToSchema = {
-    [TriggerKind.Email]: EmailTriggerOutput,
-    [TriggerKind.Subscription]: SubscriptionTriggerOutput,
-    [TriggerKind.Timer]: TimerTriggerOutput,
-    [TriggerKind.Webhook]: WebhookTriggerOutput,
-    [TriggerKind.Queue]: QueueTriggerOutput
+    ["email"]: TriggerEvent.EmailEvent,
+    ["subscription"]: TriggerEvent.SubscriptionEvent,
+    ["timer"]: TriggerEvent.TimerEvent,
+    ["webhook"]: TriggerEvent.WebhookEvent,
+    ["queue"]: TriggerEvent.QueueEvent
   };
   return kindToSchema[kind];
 };
@@ -2443,144 +2364,10 @@ var triggerShape = {
   icon: "ph--lightning--regular",
   component: TriggerComponent,
   createShape: createTrigger,
-  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput3, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? TriggerKind.Email))
+  getAnchors: (shape) => createFunctionAnchors(shape, VoidInput3, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? "email"))
 };
 
-// packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx
-import { useSignals as _useSignals26 } from "@preact-signals/safe-react/tracking";
-import { Schema as Schema26 } from "effect";
-import React27, { useState as useState9 } from "react";
-import { log as log2 } from "@dxos/log";
-import { useConfig } from "@dxos/react-client";
-import { Icon as Icon5 } from "@dxos/react-ui";
-var __dxlog_file7 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/GptRealtime.tsx";
-var GptRealtimeShape = Schema26.extend(ComputeShape, Schema26.Struct({
-  type: Schema26.Literal("gpt-realtime")
-}));
-var createGptRealtime = (props) => createShape({
-  type: "gpt-realtime",
-  size: {
-    width: 256,
-    height: 256
-  },
-  ...props
-});
-var GptRealtimeComponent = ({ shape }) => {
-  var _effect = _useSignals26();
-  try {
-    const [isLive, setIsLive] = useState9(false);
-    const [isReady, setIsReady] = useState9(false);
-    const config = useConfig();
-    const start = async () => {
-      setIsLive(true);
-      try {
-        const peerConnection = new RTCPeerConnection();
-        peerConnection.ontrack = (event) => {
-          const audioElement = document.createElement("audio");
-          audioElement.srcObject = event.streams[0];
-          audioElement.autoplay = true;
-          audioElement.controls = false;
-          audioElement.style.display = "none";
-          document.body.appendChild(audioElement);
-          setIsReady(true);
-        };
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: true
-        });
-        stream.getTracks().forEach((track) => peerConnection.addTransceiver(track, {
-          direction: "sendrecv"
-        }));
-        const offer = await peerConnection.createOffer();
-        await peerConnection.setLocalDescription(offer);
-        const AiServiceUrl = new URL("/rtc-connect", config.values.runtime?.services?.ai?.server ?? DEFAULT_AI_SERVICE_URL);
-        const response = await fetch(AiServiceUrl, {
-          method: "POST",
-          body: offer.sdp,
-          headers: {
-            "Content-Type": "application/sdp"
-          }
-        });
-        const answer = await response.text();
-        await peerConnection.setRemoteDescription({
-          sdp: answer,
-          type: "answer"
-        });
-        const dataChannel = peerConnection.createDataChannel("response");
-        const configureData = () => {
-          log2.info("Configuring data channel", void 0, {
-            F: __dxlog_file7,
-            L: 87,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          const event = {
-            type: "session.update",
-            session: {
-              modalities: [
-                "text",
-                "audio"
-              ],
-              // Provide the tools. Note they match the keys in the `fns` object above
-              tools: []
-            }
-          };
-          dataChannel.send(JSON.stringify(event));
-        };
-        dataChannel.addEventListener("open", (ev) => {
-          log2.info("Opening data channel", {
-            ev
-          }, {
-            F: __dxlog_file7,
-            L: 100,
-            S: void 0,
-            C: (f, a) => f(...a)
-          });
-          configureData();
-        });
-        dataChannel.addEventListener("message", async (ev) => {
-          const msg = JSON.parse(ev.data);
-          if (msg.type === "response.function_call_arguments.done") {
-          }
-        });
-      } catch (error) {
-        log2.error("Error in realtime session:", {
-          error
-        }, {
-          F: __dxlog_file7,
-          L: 140,
-          S: void 0,
-          C: (f, a) => f(...a)
-        });
-        throw error;
-      }
-    };
-    return /* @__PURE__ */ React27.createElement("div", {
-      className: "flex w-full justify-center items-center"
-    }, /* @__PURE__ */ React27.createElement(Icon5, {
-      icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
-      size: 16,
-      classNames: !isLive && "cursor-pointer",
-      onClick: start
-    }));
-  } finally {
-    _effect.f();
-  }
-};
-var gptRealtimeShape = {
-  type: "gpt-realtime",
-  name: "GPT Realtime",
-  icon: "ph--pulse--regular",
-  component: GptRealtimeComponent,
-  createShape: createGptRealtime,
-  // TODO(dmaretskyi): Can we fetch the schema dynamically?
-  getAnchors: (shape) => createFunctionAnchors(shape, Schema26.Struct({
-    audio: Schema26.Any
-  }), Schema26.Struct({})),
-  resizable: true
-};
-var DEFAULT_AI_SERVICE_URL = "http://localhost:8788";
-
-// packages/ui/react-ui-canvas-compute/src/registry.ts
+// src/registry.ts
 var computeShapes = [
   {
     title: "Inputs",
@@ -2625,7 +2412,7 @@ var computeShapes = [
     shapes: [
       //
       jsonShape,
-      queueShape,
+      feedShape,
       threadShape,
       textShape,
       surfaceShape,
@@ -2642,11 +2429,12 @@ var computeShapes = [
   }
 ];
 
-// packages/ui/react-ui-canvas-compute/src/compute-layout.ts
+// src/compute-layout.ts
 import { DefaultInput, DefaultOutput as DefaultOutput2 } from "@dxos/conductor";
-import { toEffectSchema } from "@dxos/echo-schema";
+import { toEffectSchema } from "@dxos/echo/internal";
 import { ShapeLayout } from "@dxos/react-ui-canvas-editor";
 var ComputeShapeLayout = class extends ShapeLayout {
+  _controller;
   constructor(_controller, registry2) {
     super(registry2), this._controller = _controller;
   }
@@ -2683,6 +2471,9 @@ export {
   ConstantShape,
   DatabaseComponent,
   DatabaseShape,
+  FeedComponent,
+  FeedItem,
+  FeedShape,
   FunctionBody,
   FunctionShape,
   GptComponent,
@@ -2700,9 +2491,6 @@ export {
   JsonTransformShape,
   NotShape,
   OrShape,
-  QueueComponent,
-  QueueItem,
-  QueueShape,
   RandomComponent,
   RandomShape,
   ReducerComponent,
@@ -2745,6 +2533,7 @@ export {
   createComputeNode,
   createConstant,
   createDatabase,
+  createFeed,
   createFunction,
   createFunctionAnchors,
   createGpt,
@@ -2755,7 +2544,6 @@ export {
   createJsonTransform,
   createNot,
   createOr,
-  createQueue,
   createRandom,
   createReducer,
   createScope,
@@ -2769,6 +2557,7 @@ export {
   createThread,
   createTrigger,
   databaseShape,
+  feedShape,
   footerHeight,
   functionShape,
   getHeight,
@@ -2785,7 +2574,6 @@ export {
   notShape,
   orShape,
   parseAnchorId,
-  queueShape,
   randomShape,
   reducerShape,
   resolveComputeNode,