@dxos/react-ui-canvas-compute 0.8.4-main.d05673bc65 → 0.8.4-main.dfabb4ec29

package/dist/lib/browser/index.mjs

@@ -7,10 +7,10 @@ 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, ValueBag, isNotExecuted } 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 { ComputeEventLogger, TracingService } from "@dxos/functions";
 import { log } from "@dxos/log";
 
 // src/hooks/compute-context.ts
@@ -78,28 +78,12 @@ 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();
-  invariant(controller, void 0, {
-    F: __dxlog_file,
-    L: 34,
-    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 () => {
-      invariant(shape.node, "Node not specified", {
-        F: __dxlog_file,
-        L: 40,
-        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) {
@@ -155,24 +139,8 @@ var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hook
 var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
   const sourceNode = graph.findNode(source);
   const targetNode = graph.findNode(target);
-  invariant2(sourceNode?.node, void 0, {
-    F: __dxlog_file2,
-    L: 25,
-    S: void 0,
-    A: [
-      "sourceNode?.node",
-      ""
-    ]
-  });
-  invariant2(targetNode?.node, void 0, {
-    F: __dxlog_file2,
-    L: 26,
-    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: Obj.ID.random(),
     source: sourceNode.node,
@@ -188,15 +156,7 @@ var useGraphMonitor = (model) => {
         if (!model) {
           return;
         }
-        invariant2(node.type, void 0, {
-          F: __dxlog_file2,
-          L: 51,
-          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;
         }
@@ -246,18 +206,10 @@ var createComputeGraph = (graph) => {
 };
 var linkTriggerToCompute = (graph, computeNode, triggerData) => {
   const functionTrigger = triggerData.functionTrigger?.target;
-  invariant2(functionTrigger, void 0, {
-    F: __dxlog_file2,
-    L: 114,
-    S: void 0,
-    A: [
-      "functionTrigger",
-      ""
-    ]
-  });
-  Obj.change(functionTrigger, (t) => {
-    t.function = Ref.make(graph.root);
-    t.inputNodeId = computeNode.id;
+  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;
   });
 };
 var deleteTriggerObjects = (computeGraph, deleted) => {
@@ -281,15 +233,7 @@ 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}`, {
-    F: __dxlog_file3,
-    L: 22,
-    S: void 0,
-    A: [
-      "impl",
-      "`Unknown node type: ${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) => {
@@ -350,13 +294,13 @@ var createNode = (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 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/graph/controller.ts";
 var InvalidStateError = Error;
 var AUTO_TRIGGER_NODES = [
   "chat",
@@ -461,12 +405,7 @@ var ComputeGraphController = class extends Resource {
       try {
         await this.exec(nodeId);
       } catch (err) {
-        log.catch(err, void 0, {
-          F: __dxlog_file4,
-          L: 230,
-          S: this,
-          C: (f, a) => f(...a)
-        });
+        log.catch(err, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file4, L: 128, S: this });
       }
     });
   }
@@ -489,7 +428,7 @@ var ComputeGraphController = class extends Resource {
       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.provide(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.layerNoop))), Effect.flatMap(computeValueBag), 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);
@@ -527,7 +466,7 @@ var ComputeGraphController = class extends Resource {
       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(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.layerNoop))), 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);
@@ -543,23 +482,20 @@ var ComputeGraphController = class extends Resource {
     })));
     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: 377,
-      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, {
@@ -598,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)) {
@@ -642,15 +609,7 @@ var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shap
 var headerHeight = 32;
 var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
-  invariant4(shape.type, void 0, {
-    F: __dxlog_file5,
-    L: 29,
-    S: void 0,
-    A: [
-      "shape.type",
-      ""
-    ]
-  });
+  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"
   };
@@ -669,7 +628,6 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
     classNames: "p-1 text-green-500",
     variant: "ghost",
     icon: "ph--play--regular",
-    size: 4,
     label: "run",
     iconOnly: true,
     onDoubleClick: (ev) => ev.stopPropagation(),
@@ -687,7 +645,6 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
     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) => {
@@ -1045,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
@@ -1352,17 +1309,83 @@ var databaseShape = {
   })
 };
 
-// src/shapes/Function.tsx
+// src/shapes/Feed.tsx
 import * as Schema11 from "effect/Schema";
-import React12, { useCallback as useCallback3, useRef as useRef4 } from "react";
+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 { Ref as Ref2, getSnapshot, isInstanceOf } from "@dxos/echo/internal";
-import { Function, Script } from "@dxos/functions";
 import { useClient } from "@dxos/react-client";
 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",
@@ -1387,7 +1410,7 @@ var TextInputComponent2 = ({ shape, title, ...props }) => {
     if (!space || !isInstanceOf(Script.Script, object)) {
       return;
     }
-    const [fn] = await space.db.query(Filter.type(Function.Function, {
+    const [fn] = await space.db.query(Filter.type(Operation.PersistentOperation, {
       source: Ref2.make(object)
     })).run();
     if (!fn) {
@@ -1409,11 +1432,11 @@ var TextInputComponent2 = ({ shape, title, ...props }) => {
   }, [
     runtime
   ]);
-  return /* @__PURE__ */ React12.createElement(Box, {
+  return /* @__PURE__ */ React13.createElement(Box, {
     shape,
     title: "Function",
     onAction: handleAction
-  }, /* @__PURE__ */ React12.createElement(TextBox3, {
+  }, /* @__PURE__ */ React13.createElement(TextBox3, {
     ...props,
     ref: inputRef,
     value: node.value,
@@ -1432,12 +1455,12 @@ var functionShape = {
 };
 
 // src/shapes/Gpt.tsx
-import * as Schema12 from "effect/Schema";
-import React13, { useEffect as useEffect4, useState as useState6 } from "react";
+import * as Schema13 from "effect/Schema";
+import React14, { useEffect as useEffect4, useState as useState6 } from "react";
 import { GptInput, GptOutput } from "@dxos/conductor";
-import { ScrollArea } from "@dxos/react-ui";
-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",
@@ -1482,12 +1505,12 @@ var GptComponent = ({ shape }) => {
   }, [
     runtime?.subscribeToEventLog
   ]);
-  return /* @__PURE__ */ React13.createElement(FunctionBody, {
+  return /* @__PURE__ */ React14.createElement(FunctionBody, {
     shape,
-    content: /* @__PURE__ */ React13.createElement(ScrollArea.Root, {
+    content: /* @__PURE__ */ React14.createElement(ScrollArea2.Root, {
       orientation: "vertical",
       thin: true
-    }, /* @__PURE__ */ React13.createElement(ScrollArea.Viewport, null, text)),
+    }, /* @__PURE__ */ React14.createElement(ScrollArea2.Viewport, null, text)),
     status: `${tokens} tokens`,
     inputSchema: meta.input,
     outputSchema: meta.output
@@ -1503,31 +1526,145 @@ var gptShape = {
   openable: true
 };
 
+// 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 Schema13 from "effect/Schema";
-import React14 from "react";
+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 }) => {
   const { runtime } = useComputeNodeState(shape);
   const input = runtime.inputs[DEFAULT_INPUT4];
   const value = input?.type === "executed" ? input.value : void 0;
-  return /* @__PURE__ */ React14.createElement(Box, {
+  return /* @__PURE__ */ React16.createElement(Box, {
     shape
-  }, /* @__PURE__ */ React14.createElement(JsonFilter, {
-    data: value,
+  }, /* @__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 }) => {
-  return /* @__PURE__ */ React14.createElement(Box, {
+  return /* @__PURE__ */ React16.createElement(Box, {
     shape
   });
 };
@@ -1543,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")]: {
@@ -1569,31 +1706,31 @@ 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
 };
 
 // src/shapes/Logic.tsx
-import * as Schema14 from "effect/Schema";
-import React15 from "react";
+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 }) => {
-  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+  return /* @__PURE__ */ React17.createElement(FunctionBody, {
     shape,
     inputSchema: IfInput,
     outputSchema: IfOutput
   });
 };
 var IfElseComponent = ({ shape, ...props }) => {
-  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+  return /* @__PURE__ */ React17.createElement(FunctionBody, {
     shape,
     inputSchema: IfElseInput,
     outputSchema: IfElseOutput
@@ -1611,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)
 };
@@ -1627,86 +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)
 };
 
-// src/shapes/Queue.tsx
-import * as Schema15 from "effect/Schema";
-import React16, { Fragment } from "react";
-import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
-import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/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 }) => {
-  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(ScrollArea2.Root, {
-    orientation: "vertical"
-  }, /* @__PURE__ */ React16.createElement(ScrollArea2.Viewport, {
-    classNames: "divide-y divide-separator"
-  }, [
-    ...items
-  ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
-    key: i,
-    classNames: "p-1 px-2",
-    item
-  })))));
-};
-var QueueItem = ({ classNames, item }) => {
-  if (typeof item !== "object") {
-    return /* @__PURE__ */ React16.createElement("div", {
-      className: mx2(classNames, "whitespace-pre-wrap")
-    }, item);
-  }
-  return /* @__PURE__ */ React16.createElement("div", {
-    className: mx2("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)))));
-};
-var queueShape = {
-  type: "queue",
-  name: "Queue",
-  icon: "ph--queue--regular",
-  component: QueueComponent,
-  createShape: createQueue,
-  getAnchors: (shape) => createFunctionAnchors(shape, QueueInput, QueueOutput),
-  resizable: true
-};
-
 // src/shapes/RNG.tsx
-import * as Schema16 from "effect/Schema";
-import React17, { useEffect as useEffect5, useState as useState7 } from "react";
+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";
-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",
@@ -1727,8 +1799,8 @@ var icons = [
 var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
 var RandomComponent = ({ shape }) => {
   const { runtime } = useComputeNodeState(shape);
-  const [spin, setSpin] = useState7(false);
-  const [icon, setIcon] = useState7(pickIcon());
+  const [spin, setSpin] = useState8(false);
+  const [icon, setIcon] = useState8(pickIcon());
   useEffect5(() => {
     if (!spin) {
       return;
@@ -1749,9 +1821,9 @@ var RandomComponent = ({ shape }) => {
     runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
     setSpin(true);
   };
-  return /* @__PURE__ */ React17.createElement("div", {
+  return /* @__PURE__ */ React18.createElement("div", {
     className: "flex grow items-center justify-center"
-  }, /* @__PURE__ */ React17.createElement(Icon4, {
+  }, /* @__PURE__ */ React18.createElement(Icon5, {
     icon,
     classNames: spin && "animate-[spin_1s]",
     size: 10,
@@ -1773,13 +1845,13 @@ var randomShape = {
 };
 
 // src/shapes/Scope.tsx
-import * as Schema17 from "effect/Schema";
-import React18 from "react";
+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 { Chaos, shaderPresets, useAudioStream } from "@dxos/react-ui-sfx";
-var ScopeShape = Schema17.extend(ComputeShape, Schema17.Struct({
-  type: Schema17.Literal("scope")
+var ScopeShape = Schema18.extend(ComputeShape, Schema18.Struct({
+  type: Schema18.Literal("scope")
 }));
 var createScope = (props) => createShape({
   type: "scope",
@@ -1795,9 +1867,9 @@ var ScopeComponent = ({ shape }) => {
   const input = runtime.inputs[DEFAULT_INPUT5];
   const active = input?.type === "executed" ? input.value : false;
   const { getAverage } = useAudioStream(active);
-  return /* @__PURE__ */ React18.createElement("div", {
+  return /* @__PURE__ */ React19.createElement("div", {
     className: "flex w-full justify-center items-center bg-black"
-  }, /* @__PURE__ */ React18.createElement(Chaos, {
+  }, /* @__PURE__ */ React19.createElement(Chaos, {
     active,
     getValue: getAverage,
     options: {
@@ -1821,14 +1893,15 @@ var scopeShape = {
 };
 
 // src/shapes/Surface.tsx
-import * as Schema18 from "effect/Schema";
-import React19 from "react";
+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",
@@ -1847,13 +1920,13 @@ var SurfaceComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ React19.createElement(Box, {
+  return /* @__PURE__ */ React20.createElement(Box, {
     shape,
     onAction: handleAction
-  }, /* @__PURE__ */ React19.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React19.createElement(Surface.Surface, {
-    role: "card--content",
+  }, /* @__PURE__ */ React20.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React20.createElement(Surface.Surface, {
+    type: AppSurface.Card,
     data: {
-      value
+      subject: value
     },
     limit: 1
   })));
@@ -1874,13 +1947,13 @@ var surfaceShape = {
 };
 
 // src/shapes/Switch.tsx
-import * as Schema19 from "effect/Schema";
-import React20, { useEffect as useEffect6, useState as useState8 } from "react";
+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",
@@ -1892,16 +1965,16 @@ var createSwitch = (props) => createShape({
 });
 var SwitchComponent = ({ shape }) => {
   const { runtime } = useComputeNodeState(shape);
-  const [value, setValue] = useState8(false);
+  const [value, setValue] = useState9(false);
   useEffect6(() => {
     runtime.setOutput(DEFAULT_OUTPUT6, value);
   }, [
     value
   ]);
-  return /* @__PURE__ */ React20.createElement("div", {
+  return /* @__PURE__ */ React21.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, {
+  }, /* @__PURE__ */ React21.createElement(Input2.Root, null, /* @__PURE__ */ React21.createElement(Input2.Switch, {
     checked: value,
     onCheckedChange: (value2) => setValue(value2)
   })));
@@ -1921,14 +1994,14 @@ var switchShape = {
 };
 
 // src/shapes/Table.tsx
-import * as Schema20 from "effect/Schema";
-import React21 from "react";
+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(Schema20.mutable(Schema20.Array(Message.Message)));
-var TableShape = Schema20.extend(ComputeShape, Schema20.Struct({
-  type: Schema20.Literal("table")
+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",
@@ -1939,7 +2012,7 @@ var createTable = (props) => createShape({
   ...props
 });
 var TableComponent = ({ shape }) => {
-  return /* @__PURE__ */ React21.createElement(Box, {
+  return /* @__PURE__ */ React22.createElement(Box, {
     shape
   });
 };
@@ -1954,16 +2027,16 @@ var tableShape = {
 };
 
 // src/shapes/Template.tsx
-import * as Schema21 from "effect/Schema";
-import React22, { useRef as useRef5 } from "react";
+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 = "/__w/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 }) => {
   const { node } = useComputeNodeState(shape);
@@ -1977,26 +2050,18 @@ var TextInputComponent3 = ({ shape, title, ...props }) => {
     }
   };
   const handleTypeChange = (newType) => {
-    invariant5(Schema21.is(ComputeValueType3)(newType), "Invalid type", {
-      F: __dxlog_file6,
-      L: 59,
-      S: void 0,
-      A: [
-        "Schema.is(ComputeValueType)(newType)",
-        "'Invalid type'"
-      ]
-    });
+    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__ */ React22.createElement(Box, {
+  return /* @__PURE__ */ React23.createElement(Box, {
     shape,
     title: "Template",
-    status: /* @__PURE__ */ React22.createElement(TypeSelect, {
+    status: /* @__PURE__ */ React23.createElement(TypeSelect, {
       value: node.valueType ?? "string",
       onValueChange: handleTypeChange
     })
-  }, /* @__PURE__ */ React22.createElement(TextBox4, {
+  }, /* @__PURE__ */ React23.createElement(TextBox4, {
     ...props,
     ref: inputRef,
     value: node.value,
@@ -2017,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"
   }),
@@ -2027,13 +2092,13 @@ var templateShape = {
 };
 
 // src/shapes/Text.tsx
-import * as Schema22 from "effect/Schema";
-import React23 from "react";
+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",
@@ -2052,10 +2117,10 @@ var TextComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ React23.createElement(Box, {
+  return /* @__PURE__ */ React24.createElement(Box, {
     shape,
     onAction: handleAction
-  }, /* @__PURE__ */ React23.createElement(TextBox5, {
+  }, /* @__PURE__ */ React24.createElement(TextBox5, {
     value
   }));
 };
@@ -2075,16 +2140,16 @@ var textShape = {
 };
 
 // src/shapes/Thread.tsx
-import * as Schema23 from "effect/Schema";
-import React24, { useEffect as useEffect7, useRef as useRef6 } from "react";
+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(Schema23.mutable(Schema23.Array(Message2.Message)));
-var ThreadShape = Schema23.extend(ComputeShape, Schema23.Struct({
-  type: Schema23.Literal("thread")
+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",
@@ -2104,31 +2169,30 @@ var ThreadComponent = ({ shape }) => {
   }, [
     items
   ]);
-  return /* @__PURE__ */ React24.createElement(Box, {
+  return /* @__PURE__ */ React25.createElement(Box, {
     shape
-  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Root, {
+  }, /* @__PURE__ */ React25.createElement(ScrollArea3.Root, {
     orientation: "vertical"
-  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Viewport, {
+  }, /* @__PURE__ */ React25.createElement(ScrollArea3.Viewport, {
     classNames: "gap-2 p-2",
     ref: scrollRef
   }, [
     ...items
-  ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
+  ].map((item, i) => /* @__PURE__ */ React25.createElement(ThreadItem, {
     key: i,
     item
   })))));
 };
 var ThreadItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
-    return /* @__PURE__ */ React24.createElement("div", {
-      role: "none",
+    return /* @__PURE__ */ React25.createElement("div", {
       className: mx3(classNames)
     }, item);
   }
   const { role, message } = item;
-  return /* @__PURE__ */ React24.createElement("div", {
+  return /* @__PURE__ */ React25.createElement("div", {
     className: mx3("flex", classNames, role === "user" && "justify-end")
-  }, /* @__PURE__ */ React24.createElement("div", {
+  }, /* @__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));
 };
@@ -2143,11 +2207,11 @@ var threadShape = {
 };
 
 // src/shapes/TextToImage.tsx
-import * as Schema24 from "effect/Schema";
-import React25 from "react";
+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",
@@ -2158,7 +2222,7 @@ var createTextToImage = (props) => createShape({
   ...props
 });
 var TextToImageComponent = ({ shape }) => {
-  return /* @__PURE__ */ React25.createElement(Box, {
+  return /* @__PURE__ */ React26.createElement(Box, {
     shape
   });
 };
@@ -2177,17 +2241,17 @@ var textToImageShape = {
 };
 
 // src/shapes/Trigger.tsx
-import * as Schema25 from "effect/Schema";
-import React26, { useEffect as useEffect8 } from "react";
+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 { Filter as Filter2, Obj as Obj4, Query, Ref as Ref3 } from "@dxos/echo";
-import { Trigger, TriggerEvent } from "@dxos/functions";
 import { DXN, SpaceId } from "@dxos/keys";
-import { 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.Ref(Trigger.Trigger))
+var TriggerShape = Schema26.extend(ComputeShape, Schema26.Struct({
+  type: Schema26.Literal("trigger"),
+  functionTrigger: Schema26.optional(Ref3.Ref(Trigger.Trigger))
 }));
 var createTrigger = (props) => {
   const functionTrigger = Trigger.make({
@@ -2205,12 +2269,12 @@ var createTrigger = (props) => {
   });
 };
 var TriggerComponent = ({ shape }) => {
-  const space = useSpace();
+  const [space] = useSpaces();
   const functionTrigger = shape.functionTrigger?.target;
   useEffect8(() => {
     if (functionTrigger && !functionTrigger.spec) {
-      Obj4.change(functionTrigger, (t) => {
-        t.spec = createTriggerSpec({
+      Obj4.update(functionTrigger, (functionTrigger2) => {
+        functionTrigger2.spec = createTriggerSpec({
           triggerKind: "email",
           spaceId: space?.id
         });
@@ -2227,8 +2291,8 @@ var TriggerComponent = ({ shape }) => {
   ]);
   const setKind = (kind) => {
     if (functionTrigger?.spec?.kind !== kind) {
-      Obj4.change(functionTrigger, (t) => {
-        t.spec = createTriggerSpec({
+      Obj4.update(functionTrigger, (obj) => {
+        obj.spec = createTriggerSpec({
           triggerKind: kind,
           spaceId: space?.id
         });
@@ -2238,9 +2302,9 @@ var TriggerComponent = ({ shape }) => {
   if (!functionTrigger?.spec) {
     return;
   }
-  return /* @__PURE__ */ React26.createElement(FunctionBody, {
+  return /* @__PURE__ */ React27.createElement(FunctionBody, {
     shape,
-    status: /* @__PURE__ */ React26.createElement(TriggerKindSelect, {
+    status: /* @__PURE__ */ React27.createElement(TriggerKindSelect, {
       value: functionTrigger.spec?.kind,
       onValueChange: (kind) => setKind(kind)
     }),
@@ -2249,51 +2313,37 @@ var TriggerComponent = ({ shape }) => {
   });
 };
 var TriggerKindSelect = ({ value, onValueChange }) => {
-  return /* @__PURE__ */ React26.createElement(Select2.Root, {
+  return /* @__PURE__ */ React27.createElement(Select2.Root, {
     value,
     onValueChange
-  }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
+  }, /* @__PURE__ */ React27.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, Trigger.Kinds.map((kind) => /* @__PURE__ */ React26.createElement(Select2.Option, {
+  }), /* @__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__ */ React26.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React26.createElement(Select2.Arrow, null))));
+  }, kind))), /* @__PURE__ */ React27.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React27.createElement(Select2.Arrow, null))));
 };
 var createTriggerSpec = (props) => {
   const kind = props.triggerKind ?? "email";
   switch (kind) {
     case "timer":
-      return {
-        kind: "timer",
-        cron: "*/10 * * * * *"
-      };
+      return Trigger.specTimer("*/10 * * * * *");
     case "webhook":
-      return {
-        kind: "webhook",
+      return Trigger.specWebhook({
         method: "POST"
-      };
+      });
     case "subscription":
-      return {
-        kind: "subscription",
-        query: {
-          ast: Query.select(Filter2.nothing()).ast
-        }
-      };
+      return Trigger.specSubscription(Query.select(Filter2.nothing()));
     case "email":
-      return {
-        kind: "email"
-      };
+      return Trigger.specEmail();
     case "queue": {
       const dxn = new DXN(DXN.kind.QUEUE, [
         "data",
         props.spaceId ?? SpaceId.random(),
         Obj4.ID.random()
       ]).toString();
-      return {
-        kind: "queue",
-        queue: dxn
-      };
+      return Trigger.specQueue(dxn);
     }
   }
 };
@@ -2316,134 +2366,6 @@ var triggerShape = {
   getAnchors: (shape) => createFunctionAnchors(shape, VoidInput3, getOutputSchema(shape.functionTrigger?.target?.spec?.kind ?? "email"))
 };
 
-// src/shapes/GptRealtime.tsx
-import * as Schema26 from "effect/Schema";
-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 = "/__w/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 }) => {
-  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
-  }));
-};
-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";
-
 // src/registry.ts
 var computeShapes = [
   {
@@ -2489,7 +2411,7 @@ var computeShapes = [
     shapes: [
       //
       jsonShape,
-      queueShape,
+      feedShape,
       threadShape,
       textShape,
       surfaceShape,
@@ -2548,6 +2470,9 @@ export {
   ConstantShape,
   DatabaseComponent,
   DatabaseShape,
+  FeedComponent,
+  FeedItem,
+  FeedShape,
   FunctionBody,
   FunctionShape,
   GptComponent,
@@ -2565,9 +2490,6 @@ export {
   JsonTransformShape,
   NotShape,
   OrShape,
-  QueueComponent,
-  QueueItem,
-  QueueShape,
   RandomComponent,
   RandomShape,
   ReducerComponent,
@@ -2610,6 +2532,7 @@ export {
   createComputeNode,
   createConstant,
   createDatabase,
+  createFeed,
   createFunction,
   createFunctionAnchors,
   createGpt,
@@ -2620,7 +2543,6 @@ export {
   createJsonTransform,
   createNot,
   createOr,
-  createQueue,
   createRandom,
   createReducer,
   createScope,
@@ -2634,6 +2556,7 @@ export {
   createThread,
   createTrigger,
   databaseShape,
+  feedShape,
   footerHeight,
   functionShape,
   getHeight,
@@ -2650,7 +2573,6 @@ export {
   notShape,
   orShape,
   parseAnchorId,
-  queueShape,
   randomShape,
   reducerShape,
   resolveComputeNode,