@dxos/react-ui-canvas-compute 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

package/dist/lib/browser/index.mjs

@@ -4,10 +4,13 @@ import "@dxos/node-std/globals";
 import * as Effect from "effect/Effect";
 import * as Either from "effect/Either";
 import * as Exit from "effect/Exit";
+import * as Layer from "effect/Layer";
 import * as Scope from "effect/Scope";
 import { Event, synchronized } from "@dxos/async";
 import { GraphExecutor, 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
@@ -147,7 +150,6 @@ import { useMemo } from "react";
 import { ComputeGraphModel, DEFAULT_INPUT, DEFAULT_OUTPUT } from "@dxos/conductor";
 import { Obj, Ref } from "@dxos/echo";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { getSpace } from "@dxos/react-client/echo";
 import { isNonNullable } from "@dxos/util";
 var __dxlog_file2 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/hooks/useGraphMonitor.ts";
 var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
@@ -155,7 +157,7 @@ var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT
   const targetNode = graph.findNode(target);
   invariant2(sourceNode?.node, void 0, {
     F: __dxlog_file2,
-    L: 26,
+    L: 25,
     S: void 0,
     A: [
       "sourceNode?.node",
@@ -164,7 +166,7 @@ var mapEdge = (graph, { source, target, output = DEFAULT_OUTPUT, input = DEFAULT
   });
   invariant2(targetNode?.node, void 0, {
     F: __dxlog_file2,
-    L: 27,
+    L: 26,
     S: void 0,
     A: [
       "targetNode?.node",
@@ -188,7 +190,7 @@ var useGraphMonitor = (model) => {
         }
         invariant2(node.type, void 0, {
           F: __dxlog_file2,
-          L: 52,
+          L: 51,
           S: void 0,
           A: [
             "node.type",
@@ -246,25 +248,27 @@ var linkTriggerToCompute = (graph, computeNode, triggerData) => {
   const functionTrigger = triggerData.functionTrigger?.target;
   invariant2(functionTrigger, void 0, {
     F: __dxlog_file2,
-    L: 115,
+    L: 114,
     S: void 0,
     A: [
       "functionTrigger",
       ""
     ]
   });
-  functionTrigger.function = Ref.make(graph.root);
-  functionTrigger.inputNodeId = computeNode.id;
+  Obj.change(functionTrigger, (t) => {
+    t.function = Ref.make(graph.root);
+    t.inputNodeId = computeNode.id;
+  });
 };
 var deleteTriggerObjects = (computeGraph, deleted) => {
-  const space = getSpace(computeGraph.root);
-  if (!space) {
+  const db = Obj.getDatabase(computeGraph.root);
+  if (!db) {
     return;
   }
   for (const node of deleted.nodes) {
     if (node.type === "trigger") {
       const trigger = node;
-      space.db.remove(trigger.functionTrigger.target);
+      db.remove(trigger.functionTrigger.target);
     }
   }
 };
@@ -301,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
@@ -335,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(),
@@ -359,16 +363,16 @@ var AUTO_TRIGGER_NODES = [
   "switch",
   "constant"
 ];
-var createComputeGraphController = (graph, serviceContainer) => {
+var createComputeGraphController = (graph, computeRuntime) => {
   const computeGraph = createComputeGraph(graph);
-  const controller = new ComputeGraphController(serviceContainer, computeGraph);
+  const controller = new ComputeGraphController(computeRuntime, computeGraph);
   return {
     controller,
     graph
   };
 };
 var ComputeGraphController = class extends Resource {
-  _serviceContainer;
+  _computeRuntime;
   _graph;
   _executor = new GraphExecutor({
     computeNodeResolver: (node) => resolveComputeNode(node)
@@ -388,8 +392,8 @@ var ComputeGraphController = class extends Resource {
   /** Computed result. */
   output = new Event();
   events = new Event();
-  constructor(_serviceContainer, _graph) {
-    super(), this._serviceContainer = _serviceContainer, this._graph = _graph;
+  constructor(_computeRuntime, _graph) {
+    super(), this._computeRuntime = _computeRuntime, this._graph = _graph;
   }
   toJSON() {
     return {
@@ -459,7 +463,7 @@ var ComputeGraphController = class extends Resource {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file4,
-          L: 210,
+          L: 230,
           S: this,
           C: (f, a) => f(...a)
         });
@@ -481,12 +485,11 @@ var ComputeGraphController = class extends Resource {
     for (const [nodeId2, outputs] of Object.entries(this._forcedOutputs)) {
       executor.setOutputs(nodeId2, Effect.succeed(ValueBag.make(outputs)));
     }
-    const serviceLayer = this._serviceContainer.createLayer();
-    await Effect.runPromise(Effect.gen(this, function* () {
+    unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
       const scope = yield* Scope.make();
       const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(nodeId)));
       const computingOutputs = executable.exec != null;
-      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(serviceLayer), Effect.withSpan("test"), Effect.tap((values) => {
+      const effect = (computingOutputs ? executor.computeOutputs(nodeId) : executor.computeInputs(nodeId)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.provide(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.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);
@@ -497,7 +500,7 @@ var ComputeGraphController = class extends Resource {
       }));
       yield* effect;
       yield* Scope.close(scope, Exit.void);
-    }));
+    })));
     this.update.emit();
   }
   /**
@@ -518,13 +521,13 @@ var ComputeGraphController = class extends Resource {
     const allAffectedNodes = [
       ...new Set(triggerNodes.flatMap((node) => executor.getAllDependantNodes(node.id)))
     ];
-    await Effect.runPromise(Effect.gen(this, function* () {
+    unwrapExit(await this._computeRuntime.runPromiseExit(Effect.gen(this, function* () {
       const scope = yield* Scope.make();
       const tasks = [];
       for (const node of allAffectedNodes) {
         const executable = yield* Effect.promise(() => resolveComputeNode(this._graph.getNode(node)));
         const computingOutputs = executable.exec != null;
-        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(this._serviceContainer.createLayer()), Effect.withSpan("test"), Effect.tap((values) => {
+        const effect = (computingOutputs ? executor.computeOutputs(node) : executor.computeInputs(node)).pipe(Effect.withSpan("runGraph"), Scope.extend(scope), Effect.flatMap(computeValueBag), Effect.provide(ComputeEventLogger.layerFromTracing.pipe(Layer.provideMerge(TracingService.layerNoop))), Effect.withSpan("test"), Effect.tap((values) => {
           for (const [key, value] of Object.entries(values)) {
             if (computingOutputs) {
               this._onOutputComputed(node, key, value);
@@ -537,7 +540,7 @@ var ComputeGraphController = class extends Resource {
       }
       yield* Effect.all(tasks);
       yield* Scope.close(scope, Exit.void);
-    }));
+    })));
     this.update.emit();
   }
   _createLogger() {
@@ -553,7 +556,7 @@ var ComputeGraphController = class extends Resource {
       event
     }, {
       F: __dxlog_file4,
-      L: 346,
+      L: 377,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -630,78 +633,71 @@ var computeValueBag = (bag) => {
 import { noteShape } from "@dxos/react-ui-canvas-editor";
 
 // src/shapes/common/Box.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import React, { forwardRef } from "react";
 import { invariant as invariant4 } from "@dxos/invariant";
 import { Icon, IconButton } from "@dxos/react-ui";
 import { useEditorContext, useShapeDef } from "@dxos/react-ui-canvas-editor";
-import { mx } from "@dxos/react-ui-theme";
+import { mx } from "@dxos/ui-theme";
 var __dxlog_file5 = "/__w/dxos/dxos/packages/ui/react-ui-canvas-compute/src/shapes/common/Box.tsx";
 var headerHeight = 32;
 var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    invariant4(shape.type, void 0, {
-      F: __dxlog_file5,
-      L: 30,
-      S: void 0,
-      A: [
-        "shape.type",
-        ""
-      ]
-    });
-    const { icon, name, openable } = useShapeDef(shape.type) ?? {
-      icon: "ph--placeholder--regular"
-    };
-    const { debug } = useEditorContext();
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: forwardedRef,
-      className: "flex flex-col bs-full is-full justify-between"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
-    }, /* @__PURE__ */ React.createElement(Icon, {
-      icon,
-      classNames: "mx-2"
-    }), /* @__PURE__ */ React.createElement("div", {
-      className: "grow text-sm truncate"
-    }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ React.createElement(IconButton, {
-      classNames: "p-1 text-green-500",
-      variant: "ghost",
-      icon: "ph--play--regular",
-      size: 4,
-      label: "run",
-      iconOnly: true,
-      onDoubleClick: (ev) => ev.stopPropagation(),
-      onClick: (ev) => {
-        ev.stopPropagation();
-        onAction?.("run");
-      }
-    })), /* @__PURE__ */ React.createElement("div", {
-      className: mx("flex flex-col bs-full grow overflow-hidden", classNames)
-    }, children), /* @__PURE__ */ React.createElement("div", {
-      className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
-    }, /* @__PURE__ */ React.createElement("div", {
-      className: "grow pli-2 text-sm truncate"
-    }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
-      classNames: "p-1",
-      variant: "ghost",
-      icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
-      size: 4,
-      label: open ? "close" : "open",
-      iconOnly: true,
-      onClick: (ev) => {
-        ev.stopPropagation();
-        onAction?.(open ? "close" : "open");
-      }
-    })));
-  } finally {
-    _effect.f();
-  }
+  invariant4(shape.type, void 0, {
+    F: __dxlog_file5,
+    L: 29,
+    S: void 0,
+    A: [
+      "shape.type",
+      ""
+    ]
+  });
+  const { icon, name, openable } = useShapeDef(shape.type) ?? {
+    icon: "ph--placeholder--regular"
+  };
+  const { debug } = useEditorContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: forwardedRef,
+    className: "flex flex-col h-full w-full justify-between"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    icon,
+    classNames: "mx-2"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "grow text-sm truncate"
+  }, debug ? shape.type : name ?? shape.text ?? title), /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1 text-green-500",
+    variant: "ghost",
+    icon: "ph--play--regular",
+    size: 4,
+    label: "run",
+    iconOnly: true,
+    onDoubleClick: (ev) => ev.stopPropagation(),
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.("run");
+    }
+  })), /* @__PURE__ */ React.createElement("div", {
+    className: mx("flex flex-col h-full grow overflow-hidden", classNames)
+  }, children), /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "grow px-2 text-sm truncate"
+  }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
+    classNames: "p-1",
+    variant: "ghost",
+    icon: open ? "ph--caret-up--regular" : "ph--caret-down--regular",
+    size: 4,
+    label: open ? "close" : "open",
+    iconOnly: true,
+    onClick: (ev) => {
+      ev.stopPropagation();
+      onAction?.(open ? "close" : "open");
+    }
+  })));
 });
 
 // src/shapes/common/FunctionBody.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as SchemaAST2 from "effect/SchemaAST";
 import React2, { useRef, useState as useState3 } from "react";
 import { VoidInput, VoidOutput } from "@dxos/conductor";
@@ -745,70 +741,65 @@ var createShape = ({ id, ...rest }) => {
 var bodyPadding = 8;
 var expandedHeight = 200;
 var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchema = VoidOutput, ...props }) => {
-  var _effect = _useSignals2();
-  try {
-    const { scale } = useCanvasContext();
-    const rootRef = useRef(null);
-    const [open, setOpen] = useState3(false);
-    const handleAction = (action) => {
-      if (!rootRef.current) {
-        return;
-      }
-      switch (action) {
-        case "open": {
-          const el = getParentShapeElement(rootRef.current, shape.id);
-          const { height } = el.getBoundingClientRect();
-          el.style.height = `${height / scale + expandedHeight}px`;
-          setOpen(true);
-          break;
-        }
-        case "close": {
-          const el = getParentShapeElement(rootRef.current, shape.id);
-          el.style.height = "";
-          setOpen(false);
-          break;
-        }
-      }
-    };
-    const inputs = getProperties(inputSchema.ast);
-    const outputs = getProperties(outputSchema.ast);
-    const columnCount = inputs.length && outputs.length ? 2 : 1;
-    return /* @__PURE__ */ React2.createElement(Box, {
-      ref: rootRef,
-      shape,
-      title: name,
-      classNames: "divide-y divide-separator",
-      open,
-      onAction: handleAction,
-      ...props
-    }, /* @__PURE__ */ React2.createElement("div", {
-      className: `grid grid-cols-${columnCount} items-center`,
-      style: {
-        paddingTop: bodyPadding,
-        paddingBottom: bodyPadding
-      }
-    }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col"
-    }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
-      key: name2,
-      className: "pli-2 truncate text-sm font-mono items-center",
-      style: {
-        height: rowHeight
+  const { scale } = useCanvasContext();
+  const rootRef = useRef(null);
+  const [open, setOpen] = useState3(false);
+  const handleAction = (action) => {
+    if (!rootRef.current) {
+      return;
+    }
+    switch (action) {
+      case "open": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        const { height } = el.getBoundingClientRect();
+        el.style.height = `${height / scale + expandedHeight}px`;
+        setOpen(true);
+        break;
       }
-    }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col"
-    }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
-      key: name2,
-      className: "pli-2 truncate text-sm font-mono items-center text-right",
-      style: {
-        height: rowHeight
+      case "close": {
+        const el = getParentShapeElement(rootRef.current, shape.id);
+        el.style.height = "";
+        setOpen(false);
+        break;
       }
-    }, name2)))), open && /* @__PURE__ */ React2.createElement("div", {
-      className: "flex flex-col grow overflow-hidden"
-    }, content));
-  } finally {
-    _effect.f();
-  }
+    }
+  };
+  const inputs = getProperties(inputSchema.ast);
+  const outputs = getProperties(outputSchema.ast);
+  const columnCount = inputs.length && outputs.length ? 2 : 1;
+  return /* @__PURE__ */ React2.createElement(Box, {
+    ref: rootRef,
+    shape,
+    title: name,
+    classNames: "divide-y divide-separator",
+    open,
+    onAction: handleAction,
+    ...props
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: `grid grid-cols-${columnCount} items-center`,
+    style: {
+      paddingTop: bodyPadding,
+      paddingBottom: bodyPadding
+    }
+  }, (inputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center",
+    style: {
+      height: rowHeight
+    }
+  }, name2))), (outputs?.length ?? 0) > 0 && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col"
+  }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
+    key: name2,
+    className: "px-2 truncate text-sm font-mono items-center text-right",
+    style: {
+      height: rowHeight
+    }
+  }, name2)))), open && /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col grow overflow-hidden"
+  }, content));
 };
 var getHeight = (input) => {
   const properties = SchemaAST2.getPropertySignatures(input.ast);
@@ -829,30 +820,23 @@ var createFunctionAnchors = (shape, input = VoidInput, output = VoidOutput) => {
 };
 
 // src/shapes/common/TypeSelect.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import React3 from "react";
 import { ComputeValueType } from "@dxos/conductor";
 import { Select } from "@dxos/react-ui";
 var TypeSelect = ({ value, onValueChange }) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement(Select.Root, {
-      value,
-      onValueChange
-    }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
-      variant: "ghost",
-      classNames: "is-full !pli-0"
-    }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
-      key: type,
-      value: type
-    }, type))), /* @__PURE__ */ React3.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement(Select.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full px-0!"
+  }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
+    key: type,
+    value: type
+  }, type))), /* @__PURE__ */ React3.createElement(Select.ScrollDownButton, null), /* @__PURE__ */ React3.createElement(Select.Arrow, null))));
 };
 
 // src/shapes/Array.tsx
-import { useSignals as _useSignals4 } from "@preact-signals/safe-react/tracking";
 import * as Schema3 from "effect/Schema";
 import React4 from "react";
 import { ReducerInput, ReducerOutput } from "@dxos/conductor";
@@ -860,16 +844,11 @@ var ReducerShape = Schema3.extend(ComputeShape, Schema3.Struct({
   type: Schema3.Literal("reducer")
 }));
 var ReducerComponent = ({ shape }) => {
-  var _effect = _useSignals4();
-  try {
-    return /* @__PURE__ */ React4.createElement(FunctionBody, {
-      shape,
-      inputSchema: ReducerInput,
-      outputSchema: ReducerOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React4.createElement(FunctionBody, {
+    shape,
+    inputSchema: ReducerInput,
+    outputSchema: ReducerOutput
+  });
 };
 var createReducer = ({ id, size = {
   width: 192,
@@ -889,7 +868,6 @@ var reducerShape = {
 };
 
 // src/shapes/Append.tsx
-import { useSignals as _useSignals5 } from "@preact-signals/safe-react/tracking";
 import * as Schema4 from "effect/Schema";
 import React5 from "react";
 import { AppendInput } from "@dxos/conductor";
@@ -905,15 +883,10 @@ var createAppend = (props) => createShape({
   ...props
 });
 var AppendComponent = ({ shape }) => {
-  var _effect = _useSignals5();
-  try {
-    return /* @__PURE__ */ React5.createElement(FunctionBody, {
-      shape,
-      inputSchema: AppendInput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React5.createElement(FunctionBody, {
+    shape,
+    inputSchema: AppendInput
+  });
 };
 var appendShape = {
   type: "append",
@@ -925,7 +898,6 @@ var appendShape = {
 };
 
 // src/shapes/Audio.tsx
-import { useSignals as _useSignals6 } from "@preact-signals/safe-react/tracking";
 import * as Schema5 from "effect/Schema";
 import React6, { useEffect as useEffect3, useState as useState4 } from "react";
 import { Icon as Icon2 } from "@dxos/react-ui";
@@ -942,29 +914,24 @@ var createAudio = (props) => createShape({
   ...props
 });
 var AudioComponent = ({ shape }) => {
-  var _effect = _useSignals6();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const [active, setActive] = useState4(false);
-    useEffect3(() => {
-      node.value = active;
-    }, [
-      active
-    ]);
-    return /* @__PURE__ */ React6.createElement("div", {
-      className: "flex is-full justify-center items-center"
-    }, /* @__PURE__ */ React6.createElement(Icon2, {
-      icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
-      classNames: [
-        "transition opacity-20 duration-1000",
-        active && "opacity-100 text-red-500"
-      ],
-      size: 8,
-      onClick: () => setActive(!active)
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { node } = useComputeNodeState(shape);
+  const [active, setActive] = useState4(false);
+  useEffect3(() => {
+    node.value = active;
+  }, [
+    active
+  ]);
+  return /* @__PURE__ */ React6.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React6.createElement(Icon2, {
+    icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
+    classNames: [
+      "transition opacity-20 duration-1000",
+      active && "opacity-100 text-error-text"
+    ],
+    size: 8,
+    onClick: () => setActive(!active)
+  }));
 };
 var audioShape = {
   type: "audio",
@@ -981,7 +948,6 @@ var audioShape = {
 };
 
 // src/shapes/Beacon.tsx
-import { useSignals as _useSignals7 } from "@preact-signals/safe-react/tracking";
 import * as Schema6 from "effect/Schema";
 import React7 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT3, isTruthy } from "@dxos/conductor";
@@ -999,24 +965,19 @@ var createBeacon = (props) => createShape({
   ...props
 });
 var BeaconComponent = ({ shape }) => {
-  var _effect = _useSignals7();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT3];
-    const value = input?.type === "executed" ? input.value : false;
-    return /* @__PURE__ */ React7.createElement("div", {
-      className: "flex is-full justify-center items-center"
-    }, /* @__PURE__ */ React7.createElement(Icon3, {
-      icon: "ph--sun--regular",
-      classNames: [
-        "transition opacity-20 duration-1000",
-        isTruthy(value) && "opacity-100 text-yellow-500"
-      ],
-      size: 8
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT3];
+  const value = input?.type === "executed" ? input.value : false;
+  return /* @__PURE__ */ React7.createElement("div", {
+    className: "flex w-full justify-center items-center"
+  }, /* @__PURE__ */ React7.createElement(Icon3, {
+    icon: "ph--sun--regular",
+    classNames: [
+      "transition opacity-20 duration-1000",
+      isTruthy(value) && "opacity-100 text-yellow-500"
+    ],
+    size: 8
+  }));
 };
 var beaconShape = {
   type: "beacon",
@@ -1057,7 +1018,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,
@@ -1084,7 +1045,7 @@ var createSymbol = (pathConstructor, inputs) => ({
   });
   return /* @__PURE__ */ React8.createElement("svg", {
     viewBox: `0 0 ${width} ${height}`,
-    className: "is-full bs-full"
+    className: "w-full h-full"
   }, getAnchorPoints({
     x: 0,
     y: centerY
@@ -1206,7 +1167,6 @@ var notShape = defineShape({
 });
 
 // src/shapes/Chat.tsx
-import { useSignals as _useSignals8 } from "@preact-signals/safe-react/tracking";
 import * as Schema8 from "effect/Schema";
 import React9, { useRef as useRef2 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT3 } from "@dxos/conductor";
@@ -1216,28 +1176,23 @@ var ChatShape = Schema8.extend(ComputeShape, Schema8.Struct({
   type: Schema8.Literal("chat")
 }));
 var TextInputComponent = ({ shape, title, ...props }) => {
-  var _effect = _useSignals8();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const inputRef = useRef2(null);
-    const handleEnter = (text) => {
-      const value = text.trim();
-      if (value.length) {
-        runtime.setOutput(DEFAULT_OUTPUT3, value);
-        inputRef.current?.setText("");
-      }
-    };
-    return /* @__PURE__ */ React9.createElement(Box, {
-      shape,
-      title
-    }, /* @__PURE__ */ React9.createElement(TextBox, {
-      ref: inputRef,
-      onEnter: handleEnter,
-      ...props
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const inputRef = useRef2(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      runtime.setOutput(DEFAULT_OUTPUT3, value);
+      inputRef.current?.setText("");
+    }
+  };
+  return /* @__PURE__ */ React9.createElement(Box, {
+    shape,
+    title
+  }, /* @__PURE__ */ React9.createElement(TextBox, {
+    ref: inputRef,
+    onEnter: handleEnter,
+    ...props
+  }));
 };
 var createChat = (props) => createShape({
   type: "chat",
@@ -1267,7 +1222,6 @@ var chatShape = {
 };
 
 // src/shapes/Constant.tsx
-import { useSignals as _useSignals9 } from "@preact-signals/safe-react/tracking";
 import * as Schema9 from "effect/Schema";
 import React10, { useCallback as useCallback2, useRef as useRef3, useState as useState5 } from "react";
 import { ComputeValueType as ComputeValueType2 } from "@dxos/conductor";
@@ -1291,57 +1245,52 @@ var inferType = (value) => {
   }
 };
 var ConstantComponent = ({ shape, title, chat, ...props }) => {
-  var _effect = _useSignals9();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const [type, setType] = useState5(inferType(node.value) ?? ComputeValueType2.literals[0]);
-    const inputRef = useRef3(null);
-    const handleEnter = useCallback2((text) => {
-      const value = text.trim();
-      if (value.length) {
-        if (type === "number") {
-          const floatValue = parseFloat(value);
-          if (!isNaN(floatValue)) {
-            node.value = floatValue;
-          }
-        } else if (type === "object") {
-          node.value = safeParseJson(value, {});
-        } else {
-          node.value = value;
+  const { node } = useComputeNodeState(shape);
+  const [type, setType] = useState5(inferType(node.value) ?? ComputeValueType2.literals[0]);
+  const inputRef = useRef3(null);
+  const handleEnter = useCallback2((text) => {
+    const value = text.trim();
+    if (value.length) {
+      if (type === "number") {
+        const floatValue = parseFloat(value);
+        if (!isNaN(floatValue)) {
+          node.value = floatValue;
         }
-        inputRef.current?.focus();
-      }
-    }, [
-      type
-    ]);
-    return /* @__PURE__ */ React10.createElement(Box, {
-      shape,
-      title,
-      status: /* @__PURE__ */ React10.createElement(TypeSelect, {
-        value: type,
-        onValueChange: setType
-      })
-    }, (type === "string" || type === "number") && /* @__PURE__ */ React10.createElement(TextBox2, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      onEnter: handleEnter
-    }), type === "object" && /* @__PURE__ */ React10.createElement(TextBox2, {
-      ...props,
-      ref: inputRef,
-      value: JSON.stringify(node.value, null, 2),
-      language: "json"
-    }), type === "boolean" && /* @__PURE__ */ React10.createElement("div", {
-      className: "flex grow justify-center items-center"
-    }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
-      checked: node.value,
-      onCheckedChange: (value) => {
+      } else if (type === "object") {
+        node.value = safeParseJson(value, {});
+      } else {
         node.value = value;
       }
-    }))));
-  } finally {
-    _effect.f();
-  }
+      inputRef.current?.focus();
+    }
+  }, [
+    type
+  ]);
+  return /* @__PURE__ */ React10.createElement(Box, {
+    shape,
+    title,
+    status: /* @__PURE__ */ React10.createElement(TypeSelect, {
+      value: type,
+      onValueChange: setType
+    })
+  }, (type === "string" || type === "number") && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    onEnter: handleEnter
+  }), type === "object" && /* @__PURE__ */ React10.createElement(TextBox2, {
+    ...props,
+    ref: inputRef,
+    value: JSON.stringify(node.value, null, 2),
+    language: "json"
+  }), type === "boolean" && /* @__PURE__ */ React10.createElement("div", {
+    className: "flex grow justify-center items-center"
+  }, /* @__PURE__ */ React10.createElement(Input.Root, null, /* @__PURE__ */ React10.createElement(Input.Switch, {
+    checked: node.value,
+    onCheckedChange: (value) => {
+      node.value = value;
+    }
+  }))));
 };
 var createConstant = (props) => createShape({
   type: "constant",
@@ -1370,7 +1319,6 @@ var constantShape = {
 };
 
 // src/shapes/Database.tsx
-import { useSignals as _useSignals10 } from "@preact-signals/safe-react/tracking";
 import * as Schema10 from "effect/Schema";
 import React11 from "react";
 import { createAnchorMap as createAnchorMap5 } from "@dxos/react-ui-canvas-editor";
@@ -1386,14 +1334,9 @@ var createDatabase = (props) => createShape({
   ...props
 });
 var DatabaseComponent = ({ shape }) => {
-  var _effect = _useSignals10();
-  try {
-    return /* @__PURE__ */ React11.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React11.createElement(Box, {
+    shape
+  });
 };
 var databaseShape = {
   type: "database",
@@ -1410,7 +1353,6 @@ var databaseShape = {
 };
 
 // src/shapes/Function.tsx
-import { useSignals as _useSignals11 } from "@preact-signals/safe-react/tracking";
 import * as Schema11 from "effect/Schema";
 import React12, { useCallback as useCallback3, useRef as useRef4 } from "react";
 import { AnyOutput, FunctionInput } from "@dxos/conductor";
@@ -1431,59 +1373,54 @@ var createFunction = (props) => createShape({
   ...props
 });
 var TextInputComponent2 = ({ shape, title, ...props }) => {
-  var _effect = _useSignals11();
-  try {
-    const client = useClient();
-    const { node, runtime } = useComputeNodeState(shape);
-    const inputRef = useRef4(null);
-    const handleEnter = useCallback3(async (text) => {
-      const value = text.trim();
-      const { spaceId, objectId } = parseId(value);
-      if (!spaceId || !objectId) {
-        return;
-      }
-      const space = client.spaces.get(spaceId);
-      const object = space?.db.getObjectById(objectId);
-      if (!space || !isInstanceOf(Script.Script, object)) {
-        return;
-      }
-      const { objects: [fn] } = await space.db.query(Filter.type(Function.Function, {
-        source: Ref2.make(object)
-      })).run();
-      if (!fn) {
-        return;
-      }
-      node.value = value;
-      node.function = Ref2.make(fn);
-      node.inputSchema = getSnapshot(fn.inputSchema);
-      node.outputSchema = getSnapshot(fn.outputSchema);
-    }, [
-      client,
-      node
-    ]);
-    const handleAction = useCallback3((action) => {
-      if (action !== "run") {
-        return;
-      }
-      runtime.evalNode();
-    }, [
-      runtime
-    ]);
-    return /* @__PURE__ */ React12.createElement(Box, {
-      shape,
-      title: "Function",
-      onAction: handleAction
-    }, /* @__PURE__ */ React12.createElement(TextBox3, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      language: node.valueType === "object" ? "json" : void 0,
-      onBlur: handleEnter,
-      onEnter: handleEnter
-    }));
-  } finally {
-    _effect.f();
-  }
+  const client = useClient();
+  const { node, runtime } = useComputeNodeState(shape);
+  const inputRef = useRef4(null);
+  const handleEnter = useCallback3(async (text) => {
+    const value = text.trim();
+    const { spaceId, objectId } = parseId(value);
+    if (!spaceId || !objectId) {
+      return;
+    }
+    const space = client.spaces.get(spaceId);
+    const object = space?.db.getObjectById(objectId);
+    if (!space || !isInstanceOf(Script.Script, object)) {
+      return;
+    }
+    const [fn] = await space.db.query(Filter.type(Function.Function, {
+      source: Ref2.make(object)
+    })).run();
+    if (!fn) {
+      return;
+    }
+    node.value = value;
+    node.function = Ref2.make(fn);
+    node.inputSchema = fn.inputSchema ? getSnapshot(fn.inputSchema) : void 0;
+    node.outputSchema = fn.outputSchema ? getSnapshot(fn.outputSchema) : void 0;
+  }, [
+    client,
+    node
+  ]);
+  const handleAction = useCallback3((action) => {
+    if (action !== "run") {
+      return;
+    }
+    runtime.evalNode();
+  }, [
+    runtime
+  ]);
+  return /* @__PURE__ */ React12.createElement(Box, {
+    shape,
+    title: "Function",
+    onAction: handleAction
+  }, /* @__PURE__ */ React12.createElement(TextBox3, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
 };
 var functionShape = {
   type: "function",
@@ -1495,10 +1432,10 @@ var functionShape = {
 };
 
 // src/shapes/Gpt.tsx
-import { useSignals as _useSignals12 } from "@preact-signals/safe-react/tracking";
 import * as Schema12 from "effect/Schema";
 import React13, { 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")
 }));
@@ -1511,54 +1448,50 @@ var createGpt = (props) => createShape({
   ...props
 });
 var GptComponent = ({ shape }) => {
-  var _effect = _useSignals12();
-  try {
-    const { meta, runtime } = useComputeNodeState(shape);
-    const [text, setText] = useState6("");
-    const [tokens, setTokens] = useState6(0);
-    useEffect4(() => {
-      return runtime.subscribeToEventLog((ev) => {
-        switch (ev.type) {
-          case "begin-compute": {
-            setText("");
-            break;
-          }
-          case "custom": {
-            const token = ev.event;
-            switch (token.type) {
-              case "content_block_delta":
-                switch (token.delta.type) {
-                  case "text_delta": {
-                    const delta = token.delta.text;
-                    setText((prev) => {
-                      const text2 = prev + delta;
-                      setTokens(text2.split(" ").length);
-                      return text2;
-                    });
-                    break;
-                  }
+  const { meta, runtime } = useComputeNodeState(shape);
+  const [text, setText] = useState6("");
+  const [tokens, setTokens] = useState6(0);
+  useEffect4(() => {
+    return runtime.subscribeToEventLog((ev) => {
+      switch (ev.type) {
+        case "begin-compute": {
+          setText("");
+          break;
+        }
+        case "custom": {
+          const token = ev.event;
+          switch (token.type) {
+            case "content_block_delta":
+              switch (token.delta.type) {
+                case "text_delta": {
+                  const delta = token.delta.text;
+                  setText((prev) => {
+                    const text2 = prev + delta;
+                    setTokens(text2.split(" ").length);
+                    return text2;
+                  });
+                  break;
                 }
-                break;
-            }
-            break;
+              }
+              break;
           }
+          break;
         }
-      });
-    }, [
-      runtime?.subscribeToEventLog
-    ]);
-    return /* @__PURE__ */ React13.createElement(FunctionBody, {
-      shape,
-      content: /* @__PURE__ */ React13.createElement("div", {
-        className: "pli-2 plb-1 overflow-y-auto"
-      }, text),
-      status: `${tokens} tokens`,
-      inputSchema: meta.input,
-      outputSchema: meta.output
+      }
     });
-  } finally {
-    _effect.f();
-  }
+  }, [
+    runtime?.subscribeToEventLog
+  ]);
+  return /* @__PURE__ */ React13.createElement(FunctionBody, {
+    shape,
+    content: /* @__PURE__ */ React13.createElement(ScrollArea.Root, {
+      orientation: "vertical",
+      thin: true
+    }, /* @__PURE__ */ React13.createElement(ScrollArea.Viewport, null, text)),
+    status: `${tokens} tokens`,
+    inputSchema: meta.input,
+    outputSchema: meta.output
+  });
 };
 var gptShape = {
   type: "gpt",
@@ -1571,7 +1504,6 @@ var gptShape = {
 };
 
 // src/shapes/Json.tsx
-import { useSignals as _useSignals13 } from "@preact-signals/safe-react/tracking";
 import * as Schema13 from "effect/Schema";
 import React14 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT4, DefaultOutput, JsonTransformInput } from "@dxos/conductor";
@@ -1584,30 +1516,20 @@ var JsonTransformShape = Schema13.extend(ComputeShape, Schema13.Struct({
   type: Schema13.Literal("json-transform")
 }));
 var JsonComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT4];
-    const value = input?.type === "executed" ? input.value : void 0;
-    return /* @__PURE__ */ React14.createElement(Box, {
-      shape
-    }, /* @__PURE__ */ React14.createElement(JsonFilter, {
-      data: value,
-      classNames: "text-xs"
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT4];
+  const value = input?.type === "executed" ? input.value : void 0;
+  return /* @__PURE__ */ React14.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React14.createElement(JsonFilter, {
+    data: value,
+    classNames: "text-xs"
+  }));
 };
 var JsonTransformComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals13();
-  try {
-    return /* @__PURE__ */ React14.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React14.createElement(Box, {
+    shape
+  });
 };
 var createJson = (props) => createShape({
   type: "json",
@@ -1654,7 +1576,6 @@ var jsonTransformShape = {
 };
 
 // src/shapes/Logic.tsx
-import { useSignals as _useSignals14 } from "@preact-signals/safe-react/tracking";
 import * as Schema14 from "effect/Schema";
 import React15 from "react";
 import { IfElseInput, IfElseOutput, IfInput, IfOutput } from "@dxos/conductor";
@@ -1665,28 +1586,18 @@ var IfElseShape = Schema14.extend(ComputeShape, Schema14.Struct({
   type: Schema14.Literal("if-else")
 }));
 var IfComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals14();
-  try {
-    return /* @__PURE__ */ React15.createElement(FunctionBody, {
-      shape,
-      inputSchema: IfInput,
-      outputSchema: IfOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfInput,
+    outputSchema: IfOutput
+  });
 };
 var IfElseComponent = ({ shape, ...props }) => {
-  var _effect = _useSignals14();
-  try {
-    return /* @__PURE__ */ React15.createElement(FunctionBody, {
-      shape,
-      inputSchema: IfElseInput,
-      outputSchema: IfElseOutput
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React15.createElement(FunctionBody, {
+    shape,
+    inputSchema: IfElseInput,
+    outputSchema: IfElseOutput
+  });
 };
 var createIf = (props) => createShape({
   type: "if",
@@ -1722,11 +1633,11 @@ var ifElseShape = {
 };
 
 // src/shapes/Queue.tsx
-import { useSignals as _useSignals15 } from "@preact-signals/safe-react/tracking";
 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/react-ui-theme";
+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")
 }));
@@ -1739,50 +1650,42 @@ var createQueue = (props) => createShape({
   ...props
 });
 var QueueComponent = ({ shape }) => {
-  var _effect = _useSignals15();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const items = runtime.outputs[DEFAULT_OUTPUT4]?.type === "executed" ? runtime.outputs[DEFAULT_OUTPUT4].value : [];
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React16.createElement(Box, {
-      shape,
-      status: `${items.length} items`,
-      onAction: handleAction
-    }, /* @__PURE__ */ React16.createElement("div", {
-      className: "flex flex-col 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
-    }))));
-  } finally {
-    _effect.f();
-  }
+  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 }) => {
-  var _effect = _useSignals15();
-  try {
-    if (typeof item !== "object") {
-      return /* @__PURE__ */ React16.createElement("div", {
-        className: mx2(classNames, "whitespace-pre-wrap")
-      }, item);
-    }
+  if (typeof item !== "object") {
     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)))));
-  } finally {
-    _effect.f();
+      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",
@@ -1795,7 +1698,6 @@ var queueShape = {
 };
 
 // src/shapes/RNG.tsx
-import { useSignals as _useSignals16 } from "@preact-signals/safe-react/tracking";
 import * as Schema16 from "effect/Schema";
 import React17, { useEffect as useEffect5, useState as useState7 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT5 } from "@dxos/conductor";
@@ -1824,42 +1726,37 @@ var icons = [
 ];
 var pickIcon = () => icons[Math.floor(Math.random() * icons.length)];
 var RandomComponent = ({ shape }) => {
-  var _effect = _useSignals16();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const [spin, setSpin] = useState7(false);
-    const [icon, setIcon] = useState7(pickIcon());
-    useEffect5(() => {
-      if (!spin) {
-        return;
-      }
-      const i = setInterval(() => setIcon(pickIcon()), 250);
-      const t1 = setTimeout(() => clearInterval(i), 900);
-      const t2 = setTimeout(() => setSpin(false), 1100);
-      return () => {
-        clearInterval(i);
-        clearTimeout(t1);
-        clearTimeout(t2);
-      };
-    }, [
-      spin
-    ]);
-    const handleClick = (ev) => {
-      ev.stopPropagation();
-      runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
-      setSpin(true);
+  const { runtime } = useComputeNodeState(shape);
+  const [spin, setSpin] = useState7(false);
+  const [icon, setIcon] = useState7(pickIcon());
+  useEffect5(() => {
+    if (!spin) {
+      return;
+    }
+    const i = setInterval(() => setIcon(pickIcon()), 250);
+    const t1 = setTimeout(() => clearInterval(i), 900);
+    const t2 = setTimeout(() => setSpin(false), 1100);
+    return () => {
+      clearInterval(i);
+      clearTimeout(t1);
+      clearTimeout(t2);
     };
-    return /* @__PURE__ */ React17.createElement("div", {
-      className: "flex grow items-center justify-center"
-    }, /* @__PURE__ */ React17.createElement(Icon4, {
-      icon,
-      classNames: spin && "animate-[spin_1s]",
-      size: 10,
-      onClick: handleClick
-    }));
-  } finally {
-    _effect.f();
-  }
+  }, [
+    spin
+  ]);
+  const handleClick = (ev) => {
+    ev.stopPropagation();
+    runtime.setOutput(DEFAULT_OUTPUT5, Math.random());
+    setSpin(true);
+  };
+  return /* @__PURE__ */ React17.createElement("div", {
+    className: "flex grow items-center justify-center"
+  }, /* @__PURE__ */ React17.createElement(Icon4, {
+    icon,
+    classNames: spin && "animate-[spin_1s]",
+    size: 10,
+    onClick: handleClick
+  }));
 };
 var randomShape = {
   type: "rng",
@@ -1876,7 +1773,6 @@ var randomShape = {
 };
 
 // src/shapes/Scope.tsx
-import { useSignals as _useSignals17 } from "@preact-signals/safe-react/tracking";
 import * as Schema17 from "effect/Schema";
 import React18 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT5 } from "@dxos/conductor";
@@ -1895,25 +1791,20 @@ var createScope = (props) => createShape({
   ...props
 });
 var ScopeComponent = ({ shape }) => {
-  var _effect = _useSignals17();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT5];
-    const active = input?.type === "executed" ? input.value : false;
-    const { getAverage } = useAudioStream(active);
-    return /* @__PURE__ */ React18.createElement("div", {
-      className: "flex is-full justify-center items-center bg-black"
-    }, /* @__PURE__ */ React18.createElement(Chaos, {
-      active,
-      getValue: getAverage,
-      options: {
-        ...shaderPresets.heptapod,
-        zoom: 1.2
-      }
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT5];
+  const active = input?.type === "executed" ? input.value : false;
+  const { getAverage } = useAudioStream(active);
+  return /* @__PURE__ */ React18.createElement("div", {
+    className: "flex w-full justify-center items-center bg-black"
+  }, /* @__PURE__ */ React18.createElement(Chaos, {
+    active,
+    getValue: getAverage,
+    options: {
+      ...shaderPresets.heptapod,
+      zoom: 1.2
+    }
+  }));
 };
 var scopeShape = {
   type: "scope",
@@ -1930,11 +1821,11 @@ var scopeShape = {
 };
 
 // src/shapes/Surface.tsx
-import { useSignals as _useSignals18 } from "@preact-signals/safe-react/tracking";
 import * as Schema18 from "effect/Schema";
 import React19 from "react";
-import { Surface } from "@dxos/app-framework/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")
@@ -1948,29 +1839,24 @@ var createSurface = (props) => createShape({
   ...props
 });
 var SurfaceComponent = ({ shape }) => {
-  var _effect = _useSignals18();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT6];
-    const value = input?.type === "executed" ? input.value : null;
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React19.createElement(Box, {
-      shape,
-      onAction: handleAction
-    }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
-      role: "card--extrinsic",
-      data: {
-        value
-      },
-      limit: 1
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT6];
+  const value = input?.type === "executed" ? input.value : null;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React19.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, /* @__PURE__ */ React19.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React19.createElement(Surface.Surface, {
+    role: "card--content",
+    data: {
+      value
+    },
+    limit: 1
+  })));
 };
 var surfaceShape = {
   type: "surface",
@@ -1988,7 +1874,6 @@ var surfaceShape = {
 };
 
 // src/shapes/Switch.tsx
-import { useSignals as _useSignals19 } from "@preact-signals/safe-react/tracking";
 import * as Schema19 from "effect/Schema";
 import React20, { useEffect as useEffect6, useState as useState8 } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT6 } from "@dxos/conductor";
@@ -2006,25 +1891,20 @@ var createSwitch = (props) => createShape({
   ...props
 });
 var SwitchComponent = ({ shape }) => {
-  var _effect = _useSignals19();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const [value, setValue] = useState8(false);
-    useEffect6(() => {
-      runtime.setOutput(DEFAULT_OUTPUT6, value);
-    }, [
-      value
-    ]);
-    return /* @__PURE__ */ React20.createElement("div", {
-      className: "flex is-full justify-center items-center",
-      onClick: (ev) => ev.stopPropagation()
-    }, /* @__PURE__ */ React20.createElement(Input2.Root, null, /* @__PURE__ */ React20.createElement(Input2.Switch, {
-      checked: value,
-      onCheckedChange: (value2) => setValue(value2)
-    })));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const [value, setValue] = useState8(false);
+  useEffect6(() => {
+    runtime.setOutput(DEFAULT_OUTPUT6, value);
+  }, [
+    value
+  ]);
+  return /* @__PURE__ */ React20.createElement("div", {
+    className: "flex w-full justify-center items-center",
+    onClick: (ev) => ev.stopPropagation()
+  }, /* @__PURE__ */ React20.createElement(Input2.Root, null, /* @__PURE__ */ React20.createElement(Input2.Switch, {
+    checked: value,
+    onCheckedChange: (value2) => setValue(value2)
+  })));
 };
 var switchShape = {
   type: "switch",
@@ -2041,7 +1921,6 @@ var switchShape = {
 };
 
 // src/shapes/Table.tsx
-import { useSignals as _useSignals20 } from "@preact-signals/safe-react/tracking";
 import * as Schema20 from "effect/Schema";
 import React21 from "react";
 import { createInputSchema, createOutputSchema } from "@dxos/conductor";
@@ -2060,14 +1939,9 @@ var createTable = (props) => createShape({
   ...props
 });
 var TableComponent = ({ shape }) => {
-  var _effect = _useSignals20();
-  try {
-    return /* @__PURE__ */ React21.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React21.createElement(Box, {
+    shape
+  });
 };
 var tableShape = {
   type: "table",
@@ -2080,7 +1954,6 @@ var tableShape = {
 };
 
 // src/shapes/Template.tsx
-import { useSignals as _useSignals21 } from "@preact-signals/safe-react/tracking";
 import * as Schema21 from "effect/Schema";
 import React22, { useRef as useRef5 } from "react";
 import { ComputeValueType as ComputeValueType3, TemplateOutput, VoidInput as VoidInput2, getTemplateInputSchema as getTemplateInputSchema2 } from "@dxos/conductor";
@@ -2093,49 +1966,44 @@ var TemplateShape = Schema21.extend(ComputeShape, Schema21.Struct({
   valueType: Schema21.optional(ComputeValueType3)
 }));
 var TextInputComponent3 = ({ shape, title, ...props }) => {
-  var _effect = _useSignals21();
-  try {
-    const { node } = useComputeNodeState(shape);
-    const inputRef = useRef5(null);
-    const handleEnter = (text) => {
-      const value = text.trim();
-      if (value.length) {
-        const schema = getTemplateInputSchema2(node);
-        node.value = value;
-        node.inputSchema = toJsonSchema(schema);
-      }
-    };
-    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'"
-        ]
-      });
-      node.valueType = newType;
-      node.inputSchema = toJsonSchema(getTemplateInputSchema2(node));
-    };
-    return /* @__PURE__ */ React22.createElement(Box, {
-      shape,
-      title: "Template",
-      status: /* @__PURE__ */ React22.createElement(TypeSelect, {
-        value: node.valueType ?? "string",
-        onValueChange: handleTypeChange
-      })
-    }, /* @__PURE__ */ React22.createElement(TextBox4, {
-      ...props,
-      ref: inputRef,
-      value: node.value,
-      language: node.valueType === "object" ? "json" : void 0,
-      onBlur: handleEnter,
-      onEnter: handleEnter
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { node } = useComputeNodeState(shape);
+  const inputRef = useRef5(null);
+  const handleEnter = (text) => {
+    const value = text.trim();
+    if (value.length) {
+      const schema = getTemplateInputSchema2(node);
+      node.value = value;
+      node.inputSchema = toJsonSchema(schema);
+    }
+  };
+  const handleTypeChange = (newType) => {
+    invariant5(Schema21.is(ComputeValueType3)(newType), "Invalid type", {
+      F: __dxlog_file6,
+      L: 59,
+      S: void 0,
+      A: [
+        "Schema.is(ComputeValueType)(newType)",
+        "'Invalid type'"
+      ]
+    });
+    node.valueType = newType;
+    node.inputSchema = toJsonSchema(getTemplateInputSchema2(node));
+  };
+  return /* @__PURE__ */ React22.createElement(Box, {
+    shape,
+    title: "Template",
+    status: /* @__PURE__ */ React22.createElement(TypeSelect, {
+      value: node.valueType ?? "string",
+      onValueChange: handleTypeChange
+    })
+  }, /* @__PURE__ */ React22.createElement(TextBox4, {
+    ...props,
+    ref: inputRef,
+    value: node.value,
+    language: node.valueType === "object" ? "json" : void 0,
+    onBlur: handleEnter,
+    onEnter: handleEnter
+  }));
 };
 var createTemplate = (props) => createShape({
   type: "template",
@@ -2159,7 +2027,6 @@ var templateShape = {
 };
 
 // src/shapes/Text.tsx
-import { useSignals as _useSignals22 } from "@preact-signals/safe-react/tracking";
 import * as Schema22 from "effect/Schema";
 import React23 from "react";
 import { DEFAULT_INPUT as DEFAULT_INPUT7 } from "@dxos/conductor";
@@ -2177,25 +2044,20 @@ var createText = (props) => createShape({
   ...props
 });
 var TextComponent = ({ shape }) => {
-  var _effect = _useSignals22();
-  try {
-    const { runtime } = useComputeNodeState(shape);
-    const input = runtime.inputs[DEFAULT_INPUT7];
-    const value = input?.type === "executed" ? input.value : 0;
-    const handleAction = (action) => {
-      if (action === "run") {
-        runtime.evalNode();
-      }
-    };
-    return /* @__PURE__ */ React23.createElement(Box, {
-      shape,
-      onAction: handleAction
-    }, /* @__PURE__ */ React23.createElement(TextBox5, {
-      value
-    }));
-  } finally {
-    _effect.f();
-  }
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT7];
+  const value = input?.type === "executed" ? input.value : 0;
+  const handleAction = (action) => {
+    if (action === "run") {
+      runtime.evalNode();
+    }
+  };
+  return /* @__PURE__ */ React23.createElement(Box, {
+    shape,
+    onAction: handleAction
+  }, /* @__PURE__ */ React23.createElement(TextBox5, {
+    value
+  }));
 };
 var textShape = {
   type: "text",
@@ -2213,12 +2075,12 @@ var textShape = {
 };
 
 // src/shapes/Thread.tsx
-import { useSignals as _useSignals23 } from "@preact-signals/safe-react/tracking";
 import * as Schema23 from "effect/Schema";
 import React24, { useEffect as useEffect7, useRef as useRef6 } from "react";
 import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2 } from "@dxos/conductor";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+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({
@@ -2233,49 +2095,42 @@ var createThread = (props) => createShape({
   ...props
 });
 var ThreadComponent = ({ shape }) => {
-  var _effect = _useSignals23();
-  try {
-    const items = [];
-    const scrollRef = useRef6(null);
-    useEffect7(() => {
-      if (scrollRef.current) {
-        scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-      }
-    }, [
-      items
-    ]);
-    return /* @__PURE__ */ React24.createElement(Box, {
-      shape
-    }, /* @__PURE__ */ React24.createElement("div", {
-      ref: scrollRef,
-      className: "flex flex-col is-full overflow-y-auto gap-2 p-2"
-    }, [
-      ...items
-    ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
-      key: i,
-      item
-    }))));
-  } finally {
-    _effect.f();
-  }
+  const items = [];
+  const scrollRef = useRef6(null);
+  useEffect7(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [
+    items
+  ]);
+  return /* @__PURE__ */ React24.createElement(Box, {
+    shape
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Viewport, {
+    classNames: "gap-2 p-2",
+    ref: scrollRef
+  }, [
+    ...items
+  ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
+    key: i,
+    item
+  })))));
 };
 var ThreadItem = ({ classNames, item }) => {
-  var _effect = _useSignals23();
-  try {
-    if (typeof item !== "object") {
-      return /* @__PURE__ */ React24.createElement("div", {
-        className: mx3(classNames)
-      }, item);
-    }
-    const { role, message } = item;
+  if (typeof item !== "object") {
     return /* @__PURE__ */ React24.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")
-    }, message));
-  } finally {
-    _effect.f();
+      role: "none",
+      className: mx3(classNames)
+    }, item);
   }
+  const { role, message } = item;
+  return /* @__PURE__ */ React24.createElement("div", {
+    className: mx3("flex", classNames, role === "user" && "justify-end")
+  }, /* @__PURE__ */ React24.createElement("div", {
+    className: mx3("block rounded-md p-1 px-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
+  }, message));
 };
 var threadShape = {
   type: "thread",
@@ -2288,7 +2143,6 @@ var threadShape = {
 };
 
 // src/shapes/TextToImage.tsx
-import { useSignals as _useSignals24 } from "@preact-signals/safe-react/tracking";
 import * as Schema24 from "effect/Schema";
 import React25 from "react";
 import { createAnchorMap as createAnchorMap12 } from "@dxos/react-ui-canvas-editor";
@@ -2304,14 +2158,9 @@ var createTextToImage = (props) => createShape({
   ...props
 });
 var TextToImageComponent = ({ shape }) => {
-  var _effect = _useSignals24();
-  try {
-    return /* @__PURE__ */ React25.createElement(Box, {
-      shape
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React25.createElement(Box, {
+    shape
+  });
 };
 var textToImageShape = {
   type: "text-to-image",
@@ -2328,18 +2177,17 @@ var textToImageShape = {
 };
 
 // src/shapes/Trigger.tsx
-import { useSignals as _useSignals25 } from "@preact-signals/safe-react/tracking";
 import * as Schema25 from "effect/Schema";
 import React26, { 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 { 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))
+  functionTrigger: Schema25.optional(Ref3.Ref(Trigger.Trigger))
 }));
 var createTrigger = (props) => {
   const functionTrigger = Trigger.make({
@@ -2357,66 +2205,60 @@ var createTrigger = (props) => {
   });
 };
 var TriggerComponent = ({ shape }) => {
-  var _effect = _useSignals25();
-  try {
-    const space = useSpace();
-    const functionTrigger = shape.functionTrigger?.target;
-    useEffect8(() => {
-      if (functionTrigger && !functionTrigger.spec) {
-        functionTrigger.spec = createTriggerSpec({
+  const space = useSpace();
+  const functionTrigger = shape.functionTrigger?.target;
+  useEffect8(() => {
+    if (functionTrigger && !functionTrigger.spec) {
+      Obj4.change(functionTrigger, (t) => {
+        t.spec = createTriggerSpec({
           triggerKind: "email",
           spaceId: space?.id
         });
-      }
-    }, [
-      functionTrigger,
-      functionTrigger?.spec
-    ]);
-    useEffect8(() => {
-      shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.kind ?? "email"));
-    }, [
-      functionTrigger?.spec?.kind
-    ]);
-    const setKind = (kind) => {
-      if (functionTrigger?.spec?.kind !== kind) {
-        functionTrigger.spec = createTriggerSpec({
+      });
+    }
+  }, [
+    functionTrigger,
+    functionTrigger?.spec
+  ]);
+  useEffect8(() => {
+    shape.size.height = getHeight(getOutputSchema(functionTrigger?.spec?.kind ?? "email"));
+  }, [
+    functionTrigger?.spec?.kind
+  ]);
+  const setKind = (kind) => {
+    if (functionTrigger?.spec?.kind !== kind) {
+      Obj4.change(functionTrigger, (t) => {
+        t.spec = createTriggerSpec({
           triggerKind: kind,
           spaceId: space?.id
         });
-      }
-    };
-    if (!functionTrigger?.spec) {
-      return;
+      });
     }
-    return /* @__PURE__ */ React26.createElement(FunctionBody, {
-      shape,
-      status: /* @__PURE__ */ React26.createElement(TriggerKindSelect, {
-        value: functionTrigger.spec?.kind,
-        onValueChange: (kind) => setKind(kind)
-      }),
-      inputSchema: VoidInput3,
-      outputSchema: getOutputSchema(functionTrigger.spec.kind)
-    });
-  } finally {
-    _effect.f();
+  };
+  if (!functionTrigger?.spec) {
+    return;
   }
+  return /* @__PURE__ */ React26.createElement(FunctionBody, {
+    shape,
+    status: /* @__PURE__ */ React26.createElement(TriggerKindSelect, {
+      value: functionTrigger.spec?.kind,
+      onValueChange: (kind) => setKind(kind)
+    }),
+    inputSchema: VoidInput3,
+    outputSchema: getOutputSchema(functionTrigger.spec.kind)
+  });
 };
 var TriggerKindSelect = ({ value, onValueChange }) => {
-  var _effect = _useSignals25();
-  try {
-    return /* @__PURE__ */ React26.createElement(Select2.Root, {
-      value,
-      onValueChange
-    }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
-      variant: "ghost",
-      classNames: "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, {
-      key: kind,
-      value: kind
-    }, kind))), /* @__PURE__ */ React26.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React26.createElement(Select2.Arrow, null))));
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React26.createElement(Select2.Root, {
+    value,
+    onValueChange
+  }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
+    variant: "ghost",
+    classNames: "w-full px-0!"
+  }), /* @__PURE__ */ React26.createElement(Select2.Portal, null, /* @__PURE__ */ React26.createElement(Select2.Content, null, /* @__PURE__ */ React26.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React26.createElement(Select2.Viewport, null, Trigger.Kinds.map((kind) => /* @__PURE__ */ React26.createElement(Select2.Option, {
+    key: kind,
+    value: kind
+  }, kind))), /* @__PURE__ */ React26.createElement(Select2.ScrollDownButton, null), /* @__PURE__ */ React26.createElement(Select2.Arrow, null))));
 };
 var createTriggerSpec = (props) => {
   const kind = props.triggerKind ?? "email";
@@ -2475,7 +2317,6 @@ var triggerShape = {
 };
 
 // src/shapes/GptRealtime.tsx
-import { useSignals as _useSignals26 } from "@preact-signals/safe-react/tracking";
 import * as Schema26 from "effect/Schema";
 import React27, { useState as useState9 } from "react";
 import { log as log2 } from "@dxos/log";
@@ -2494,105 +2335,100 @@ var createGptRealtime = (props) => createShape({
   ...props
 });
 var GptRealtimeComponent = ({ shape }) => {
-  var _effect = _useSignals26();
-  try {
-    const [isLive, setIsLive] = useState9(false);
-    const [isReady, setIsReady] = useState9(false);
-    const config = useConfig();
-    const start = async () => {
-      setIsLive(true);
-      try {
-        const peerConnection = new RTCPeerConnection();
-        peerConnection.ontrack = (event) => {
-          const audioElement = document.createElement("audio");
-          audioElement.srcObject = event.streams[0];
-          audioElement.autoplay = true;
-          audioElement.controls = false;
-          audioElement.style.display = "none";
-          document.body.appendChild(audioElement);
-          setIsReady(true);
-        };
-        const stream = await navigator.mediaDevices.getUserMedia({
-          audio: true
+  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)
         });
-        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 event = {
+          type: "session.update",
+          session: {
+            modalities: [
+              "text",
+              "audio"
+            ],
+            // Provide the tools. Note they match the keys in the `fns` object above
+            tools: []
           }
-        });
-        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
+        dataChannel.send(JSON.stringify(event));
+      };
+      dataChannel.addEventListener("open", (ev) => {
+        log2.info("Opening data channel", {
+          ev
         }, {
           F: __dxlog_file7,
-          L: 140,
+          L: 100,
           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
-    }));
-  } finally {
-    _effect.f();
-  }
+        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",