@dxos/react-ui-canvas-compute 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/dist/lib/browser/index.mjs

@@ -10,7 +10,7 @@ import { Event, synchronized } from "@dxos/async";
 import { GraphExecutor, ValueBag, isNotExecuted } from "@dxos/conductor";
 import { Resource } from "@dxos/context";
 import { unwrapExit } from "@dxos/effect";
-import { ComputeEventLogger, TracingService } from "@dxos/functions";
+import { ComputeEventLogger, Trace, TracingService } from "@dxos/functions";
 import { log } from "@dxos/log";
 
 // src/hooks/compute-context.ts
@@ -80,7 +80,7 @@ var useComputeNodeState = (shape) => {
   const { controller } = useComputeContext();
   invariant(controller, void 0, {
     F: __dxlog_file,
-    L: 34,
+    L: 33,
     S: void 0,
     A: [
       "controller",
@@ -93,7 +93,7 @@ var useComputeNodeState = (shape) => {
     queueMicrotask(async () => {
       invariant(shape.node, "Node not specified", {
         F: __dxlog_file,
-        L: 40,
+        L: 39,
         S: void 0,
         A: [
           "shape.node",
@@ -255,9 +255,9 @@ var linkTriggerToCompute = (graph, computeNode, triggerData) => {
       ""
     ]
   });
-  Obj.change(functionTrigger, (t) => {
-    t.function = Ref.make(graph.root);
-    t.inputNodeId = computeNode.id;
+  Obj.change(functionTrigger, (functionTrigger2) => {
+    functionTrigger2.function = Ref.make(graph.root);
+    functionTrigger2.inputNodeId = computeNode.id;
   });
 };
 var deleteTriggerObjects = (computeGraph, deleted) => {
@@ -305,33 +305,33 @@ var nodeFactory = {
   [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", {
+  "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) => {
+  "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
@@ -339,9 +339,9 @@ var nodeFactory = {
     node.inputSchema = JsonSchema.toJsonSchema(getTemplateInputSchema(node));
     return node;
   },
-  ["text"]: () => createNode("text"),
-  ["thread"]: () => createNode("thread"),
-  ["trigger"]: () => createNode(NODE_INPUT)
+  text: () => createNode("text"),
+  thread: () => createNode("thread"),
+  trigger: () => createNode(NODE_INPUT)
 };
 var createNode = (type, props) => ({
   id: Obj2.ID.random(),
@@ -463,7 +463,7 @@ var ComputeGraphController = class extends Resource {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file4,
-          L: 229,
+          L: 230,
           S: this,
           C: (f, a) => f(...a)
         });
@@ -489,7 +489,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(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.layerNoop), Layer.provideMerge(Trace.writerLayerNoop))), 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 +527,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(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.layerNoop), Layer.provideMerge(Trace.writerLayerNoop))), Effect.withSpan("test"), Effect.tap((values) => {
           for (const [key, value] of Object.entries(values)) {
             if (computingOutputs) {
               this._onOutputComputed(node, key, value);
@@ -556,7 +556,7 @@ var ComputeGraphController = class extends Resource {
       event
     }, {
       F: __dxlog_file4,
-      L: 376,
+      L: 379,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -644,7 +644,7 @@ var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
   invariant4(shape.type, void 0, {
     F: __dxlog_file5,
-    L: 30,
+    L: 29,
     S: void 0,
     A: [
       "shape.type",
@@ -657,9 +657,9 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
   const { debug } = useEditorContext();
   return /* @__PURE__ */ React.createElement("div", {
     ref: forwardedRef,
-    className: "flex flex-col bs-full is-full justify-between"
+    className: "flex flex-col h-full w-full justify-between"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
   }, /* @__PURE__ */ React.createElement(Icon, {
     icon,
     classNames: "mx-2"
@@ -669,7 +669,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(),
@@ -678,16 +677,15 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
       onAction?.("run");
     }
   })), /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex flex-col bs-full grow overflow-hidden", classNames)
+    className: mx("flex flex-col h-full grow overflow-hidden", classNames)
   }, children), /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "grow pli-2 text-sm truncate"
+    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) => {
@@ -785,7 +783,7 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
     className: "flex flex-col"
   }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
     key: name2,
-    className: "pli-2 truncate text-sm font-mono items-center",
+    className: "px-2 truncate text-sm font-mono items-center",
     style: {
       height: rowHeight
     }
@@ -793,7 +791,7 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
     className: "flex flex-col"
   }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
     key: name2,
-    className: "pli-2 truncate text-sm font-mono items-center text-right",
+    className: "px-2 truncate text-sm font-mono items-center text-right",
     style: {
       height: rowHeight
     }
@@ -829,7 +827,7 @@ var TypeSelect = ({ value, onValueChange }) => {
     onValueChange
   }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
     variant: "ghost",
-    classNames: "is-full !pli-0"
+    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
@@ -922,12 +920,12 @@ var AudioComponent = ({ shape }) => {
     active
   ]);
   return /* @__PURE__ */ React6.createElement("div", {
-    className: "flex is-full justify-center items-center"
+    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"
+      active && "opacity-100 text-error-text"
     ],
     size: 8,
     onClick: () => setActive(!active)
@@ -969,7 +967,7 @@ var BeaconComponent = ({ shape }) => {
   const input = runtime.inputs[DEFAULT_INPUT3];
   const value = input?.type === "executed" ? input.value : false;
   return /* @__PURE__ */ React7.createElement("div", {
-    className: "flex is-full justify-center items-center"
+    className: "flex w-full justify-center items-center"
   }, /* @__PURE__ */ React7.createElement(Icon3, {
     icon: "ph--sun--regular",
     classNames: [
@@ -1018,7 +1016,7 @@ var defineShape = ({ type, name, icon, symbol: Symbol, createShape: createShape2
   // Be careful not to name component factories with a capital letter.
   component: () => {
     return /* @__PURE__ */ React8.createElement("div", {
-      className: "flex is-full justify-center items-center"
+      className: "flex w-full justify-center items-center"
     }, /* @__PURE__ */ React8.createElement(Symbol, null));
   },
   createShape: createShape2,
@@ -1045,7 +1043,7 @@ var createSymbol = (pathConstructor, inputs) => ({
   });
   return /* @__PURE__ */ React8.createElement("svg", {
     viewBox: `0 0 ${width} ${height}`,
-    className: "is-full bs-full"
+    className: "h-full w-full"
   }, getAnchorPoints({
     x: 0,
     y: centerY
@@ -1352,17 +1350,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 { AnyOutput, FunctionInput } from "@dxos/conductor";
 import { Ref as Ref2, getSnapshot, isInstanceOf } from "@dxos/echo/internal";
-import { Function, Script } from "@dxos/functions";
+import { Script } from "@dxos/functions";
+import { Operation } from "@dxos/operation";
 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 +1451,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 +1473,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,11 +1496,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";
-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",
@@ -1481,11 +1546,12 @@ var GptComponent = ({ shape }) => {
   }, [
     runtime?.subscribeToEventLog
   ]);
-  return /* @__PURE__ */ React13.createElement(FunctionBody, {
+  return /* @__PURE__ */ React14.createElement(FunctionBody, {
     shape,
-    content: /* @__PURE__ */ React13.createElement("div", {
-      className: "pli-2 plb-1 overflow-y-auto"
-    }, text),
+    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
@@ -1501,31 +1567,160 @@ 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, {
+          F: __dxlog_file6,
+          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_file6,
+          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_file6,
+        L: 140,
+        S: void 0,
+        C: (f, a) => f(...a)
+      });
+      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 { Json } 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(Json.Root, {
+    data: value
+  }, /* @__PURE__ */ React16.createElement(Json.Content, null, /* @__PURE__ */ React16.createElement(Json.Filter, null), /* @__PURE__ */ React16.createElement(Json.Data, {
     classNames: "text-xs"
-  }));
+  }))));
 };
 var JsonTransformComponent = ({ shape, ...props }) => {
-  return /* @__PURE__ */ React14.createElement(Box, {
+  return /* @__PURE__ */ React16.createElement(Box, {
     shape
   });
 };
@@ -1541,7 +1736,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")]: {
@@ -1567,31 +1762,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
@@ -1609,7 +1804,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)
 };
@@ -1625,83 +1820,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 { 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("div", {
-    className: "flex flex-col is-full overflow-y-auto divide-y divide-separator"
-  }, [
-    ...items
-  ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
-    key: i,
-    classNames: "p-1 pli-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",
@@ -1722,8 +1855,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;
@@ -1744,9 +1877,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,
@@ -1768,13 +1901,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",
@@ -1790,9 +1923,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", {
-    className: "flex is-full justify-center items-center bg-black"
-  }, /* @__PURE__ */ React18.createElement(Chaos, {
+  return /* @__PURE__ */ React19.createElement("div", {
+    className: "flex w-full justify-center items-center bg-black"
+  }, /* @__PURE__ */ React19.createElement(Chaos, {
     active,
     getValue: getAverage,
     options: {
@@ -1816,13 +1949,14 @@ var scopeShape = {
 };
 
 // src/shapes/Surface.tsx
-import * as Schema18 from "effect/Schema";
-import React19 from "react";
-import { Surface } from "@dxos/app-framework/react";
+import * as Schema19 from "effect/Schema";
+import React20 from "react";
+import { Surface } from "@dxos/app-framework/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",
@@ -1841,16 +1975,16 @@ var SurfaceComponent = ({ shape }) => {
       runtime.evalNode();
     }
   };
-  return /* @__PURE__ */ React19.createElement(Box, {
+  return /* @__PURE__ */ React20.createElement(Box, {
     shape,
     onAction: handleAction
-  }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
-    role: "card--extrinsic",
+  }, /* @__PURE__ */ React20.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React20.createElement(Surface.Surface, {
+    role: "card--content",
     data: {
       value
     },
     limit: 1
-  }));
+  })));
 };
 var surfaceShape = {
   type: "surface",
@@ -1868,13 +2002,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",
@@ -1886,16 +2020,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", {
-    className: "flex is-full justify-center items-center",
+  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)
   })));
@@ -1915,14 +2049,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",
@@ -1933,7 +2067,7 @@ var createTable = (props) => createShape({
   ...props
 });
 var TableComponent = ({ shape }) => {
-  return /* @__PURE__ */ React21.createElement(Box, {
+  return /* @__PURE__ */ React22.createElement(Box, {
     shape
   });
 };
@@ -1948,16 +2082,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);
@@ -1971,9 +2105,9 @@ var TextInputComponent3 = ({ shape, title, ...props }) => {
     }
   };
   const handleTypeChange = (newType) => {
-    invariant5(Schema21.is(ComputeValueType3)(newType), "Invalid type", {
-      F: __dxlog_file6,
-      L: 59,
+    invariant5(Schema22.is(ComputeValueType3)(newType), "Invalid type", {
+      F: __dxlog_file7,
+      L: 58,
       S: void 0,
       A: [
         "Schema.is(ComputeValueType)(newType)",
@@ -1983,14 +2117,14 @@ var TextInputComponent3 = ({ shape, title, ...props }) => {
     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,
@@ -2011,7 +2145,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"
   }),
@@ -2021,13 +2155,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",
@@ -2046,10 +2180,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
   }));
 };
@@ -2069,15 +2203,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",
@@ -2097,29 +2232,32 @@ var ThreadComponent = ({ shape }) => {
   }, [
     items
   ]);
-  return /* @__PURE__ */ React24.createElement(Box, {
+  return /* @__PURE__ */ React25.createElement(Box, {
     shape
-  }, /* @__PURE__ */ React24.createElement("div", {
-    ref: scrollRef,
-    className: "flex flex-col is-full overflow-y-auto gap-2 p-2"
+  }, /* @__PURE__ */ React25.createElement(ScrollArea3.Root, {
+    orientation: "vertical"
+  }, /* @__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", {
+    return /* @__PURE__ */ React25.createElement("div", {
+      role: "none",
       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", {
-    className: mx3("block rounded-md p-1 pli-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")
+  }, /* @__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 = {
@@ -2133,11 +2271,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",
@@ -2148,7 +2286,7 @@ var createTextToImage = (props) => createShape({
   ...props
 });
 var TextToImageComponent = ({ shape }) => {
-  return /* @__PURE__ */ React25.createElement(Box, {
+  return /* @__PURE__ */ React26.createElement(Box, {
     shape
   });
 };
@@ -2167,17 +2305,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 { VoidInput as VoidInput3 } from "@dxos/conductor";
-import { Filter as Filter2, Obj as Obj4, Query, Ref as Ref3, Type } from "@dxos/echo";
+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(Type.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({
@@ -2195,12 +2333,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.change(functionTrigger, (functionTrigger2) => {
+        functionTrigger2.spec = createTriggerSpec({
           triggerKind: "email",
           spaceId: space?.id
         });
@@ -2217,8 +2355,8 @@ var TriggerComponent = ({ shape }) => {
   ]);
   const setKind = (kind) => {
     if (functionTrigger?.spec?.kind !== kind) {
-      Obj4.change(functionTrigger, (t) => {
-        t.spec = createTriggerSpec({
+      Obj4.change(functionTrigger, (obj) => {
+        obj.spec = createTriggerSpec({
           triggerKind: kind,
           spaceId: space?.id
         });
@@ -2228,9 +2366,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)
     }),
@@ -2239,16 +2377,16 @@ 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: "is-full !pli-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, {
+    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__ */ 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";
@@ -2306,134 +2444,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 is-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 = [
   {
@@ -2479,7 +2489,7 @@ var computeShapes = [
     shapes: [
       //
       jsonShape,
-      queueShape,
+      feedShape,
       threadShape,
       textShape,
       surfaceShape,
@@ -2538,6 +2548,9 @@ export {
   ConstantShape,
   DatabaseComponent,
   DatabaseShape,
+  FeedComponent,
+  FeedItem,
+  FeedShape,
   FunctionBody,
   FunctionShape,
   GptComponent,
@@ -2555,9 +2568,6 @@ export {
   JsonTransformShape,
   NotShape,
   OrShape,
-  QueueComponent,
-  QueueItem,
-  QueueShape,
   RandomComponent,
   RandomShape,
   ReducerComponent,
@@ -2600,6 +2610,7 @@ export {
   createComputeNode,
   createConstant,
   createDatabase,
+  createFeed,
   createFunction,
   createFunctionAnchors,
   createGpt,
@@ -2610,7 +2621,6 @@ export {
   createJsonTransform,
   createNot,
   createOr,
-  createQueue,
   createRandom,
   createReducer,
   createScope,
@@ -2624,6 +2634,7 @@ export {
   createThread,
   createTrigger,
   databaseShape,
+  feedShape,
   footerHeight,
   functionShape,
   getHeight,
@@ -2640,7 +2651,6 @@ export {
   notShape,
   orShape,
   parseAnchorId,
-  queueShape,
   randomShape,
   reducerShape,
   resolveComputeNode,