@tangle-network/sandbox-ui 0.91.5 → 0.93.0

package/dist/{WorkflowGraph-GUX7XN7Y.js → WorkflowGraph-TKDBFK3V.js}

@@ -10,8 +10,9 @@ import {
   fmtDuration,
   fmtTokens,
   providerLabel,
-  shortModel
-} from "./chunk-2NS724P4.js";
+  shortModel,
+  triggerNodeIndex
+} from "./chunk-YOSNN3QU.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -22,8 +23,11 @@ import "./chunk-CZ7CSFO4.js";
 // src/workflows/WorkflowGraph.tsx
 import {
   Background,
+  BaseEdge,
   Controls,
+  EdgeLabelRenderer,
   getNodesBounds,
+  getSmoothStepPath,
   getViewportForBounds,
   Handle,
   MarkerType,
@@ -47,6 +51,7 @@ import {
 
 // src/workflows/flow-graph.ts
 import { Position } from "@xyflow/react";
+var WF_EDGE_TYPE = "wfEdge";
 function isNodeStateMap(arg) {
   const values = Object.values(arg);
   return values.length > 0 && values.every(
@@ -55,7 +60,7 @@ function isNodeStateMap(arg) {
 }
 function normalizeFlowGraphOptions(arg) {
   if (!arg) return {};
-  if ("nodeState" in arg || "direction" in arg || "compact" in arg) {
+  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "edges" in arg) {
     return arg;
   }
   return isNodeStateMap(arg) ? { nodeState: arg } : {};
@@ -68,7 +73,8 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
   const graph = buildWorkflowGraph(yaml, {
     reserveRunState: nodeState !== void 0,
     direction,
-    compact
+    compact,
+    ...options.edges ? { edges: options.edges } : {}
   });
   const isLR = direction === "LR";
   const sourcePosition = isLR ? Position.Right : Position.Bottom;
@@ -82,6 +88,13 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
         position: n.position,
         width: n.width,
         height: n.height,
+        // A node is a `do` entry, and removing one is a list edit — never a
+        // canvas gesture. This matters most on an EDITABLE canvas, where the
+        // delete key is armed for edges: React Flow deletes a selected node
+        // together with every edge touching it, so a node left deletable would
+        // vanish from the canvas AND report each of its edges as removed,
+        // asking the host to drop declared edges nobody touched.
+        deletable: false,
         // Fix the DOM box to the laid-out size so the card can't grow past its
         // reserved space and overlap a neighbour (see model.ts nodeHeight).
         style: { width: n.width, height: n.height },
@@ -90,12 +103,20 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
         data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
       })
     ),
-    edges: graph.edges.map((e) => ({
-      id: e.id,
-      source: e.source,
-      target: e.target,
-      type: "smoothstep"
-    }))
+    edges: graph.edges.map((e) => {
+      const decorated = e.whenLabel !== void 0 || e.backEdge === true;
+      return {
+        id: e.id,
+        source: e.source,
+        target: e.target,
+        type: decorated ? WF_EDGE_TYPE : "smoothstep",
+        data: {
+          kind: e.kind,
+          ...e.whenLabel !== void 0 ? { whenLabel: e.whenLabel } : {},
+          ...e.backEdge === true ? { backEdge: true } : {}
+        }
+      };
+    })
   };
 }
 function sameRunState(a, b) {
@@ -248,10 +269,13 @@ import {
   Bell,
   Box,
   Cable,
+  Camera,
   Circle,
   Clock,
+  Code,
   GitBranch,
   Repeat,
+  ScanSearch,
   Sparkles,
   UserCheck,
   Webhook,
@@ -335,7 +359,11 @@ function progressFill(status) {
 }
 var KIND_ICON = {
   schedule: Clock,
+  // Both wake the workflow on an inbound POST, so they share the mark. A
+  // `provider_event` normally shows its provider's LOGO instead and reaches this
+  // glyph only when the connector has none.
   provider_event: Webhook,
+  webhook: Webhook,
   trigger: Zap,
   "agent.run": Sparkles,
   "integration.invoke": Cable,
@@ -343,7 +371,10 @@ var KIND_ICON = {
   parallel: GitBranch,
   foreach: Repeat,
   decision: UserCheck,
-  "sandbox.spawn": Box
+  "sandbox.spawn": Box,
+  "sandbox.snapshot": Camera,
+  "script.run": Code,
+  "trace.analyze": ScanSearch
 };
 function NodeMark({
   kind,
@@ -421,6 +452,15 @@ function useColorMode() {
 }
 var DirectionContext = createContext("LR");
 var DensityContext = createContext(false);
+var SelectedNodeContext = createContext(void 0);
+var SELECTION_OUTLINE = {
+  outline: "2px solid hsl(var(--primary))",
+  outlineOffset: 2
+};
+var ConnectableContext = createContext(false);
+function isEditableEdge(edge) {
+  return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
+}
 function StatusFooter({
   status,
   rounds,
@@ -475,6 +515,7 @@ function StatusPill({ status }) {
   );
 }
 var HANDLE_CLASS = "!h-2 !w-2 !min-w-0 !border-0 !bg-transparent opacity-0";
+var HANDLE_CONNECTABLE_CLASS = "!h-2.5 !w-2.5 !min-w-0 !rounded-full !border !border-border !bg-muted-foreground/70 opacity-100 transition-opacity hover:!bg-primary";
 function compactHandleStyle(position, isLR) {
   const tileLeft = isLR ? (COMPACT_NODE_SIZE.width - COMPACT_TILE) / 2 : 0;
   const center = COMPACT_TILE / 2;
@@ -496,11 +537,14 @@ function compactHandleStyle(position, isLR) {
       return anchor(tileLeft + center, COMPACT_TILE);
   }
 }
-function WorkflowNode({ data }) {
+function WorkflowNode({ id, data }) {
   const d = data;
   const state = d.state;
   const direction = useContext(DirectionContext);
   const compact = useContext(DensityContext);
+  const connectable = useContext(ConnectableContext);
+  const hostSelection = useContext(SelectedNodeContext);
+  const selected = hostSelection !== void 0 && hostSelection === id;
   const isLR = direction === "LR";
   const targetPos = isLR ? Position2.Left : Position2.Top;
   const sourcePos = isLR ? Position2.Right : Position2.Bottom;
@@ -527,13 +571,14 @@ function WorkflowNode({ data }) {
     );
     return shape.kind === "empty" ? null : { shape, tone: source.tone, label: source.label };
   })();
+  const handleClass = connectable ? HANDLE_CONNECTABLE_CLASS : HANDLE_CLASS;
   const handles = /* @__PURE__ */ jsxs2(Fragment, { children: [
     !d.isRoot && /* @__PURE__ */ jsx3(
       Handle,
       {
         type: "target",
         position: targetPos,
-        className: HANDLE_CLASS,
+        className: handleClass,
         style: compact ? compactHandleStyle(targetPos, isLR) : void 0
       }
     ),
@@ -542,7 +587,7 @@ function WorkflowNode({ data }) {
       {
         type: "source",
         position: sourcePos,
-        className: HANDLE_CLASS,
+        className: handleClass,
         style: compact ? compactHandleStyle(sourcePos, isLR) : void 0
       }
     )
@@ -563,7 +608,10 @@ function WorkflowNode({ data }) {
                 height: COMPACT_TILE,
                 ...state ? statusBorder(state.status) : {
                   borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
-                }
+                },
+                // The TILE is the compact node (the name beside it is unboxed), so
+                // the selection ring belongs to it and not to the wider box.
+                ...selected ? SELECTION_OUTLINE : {}
               },
               children: [
                 /* @__PURE__ */ jsx3("span", { className: "wf-node-body-in flex items-center justify-center", children: /* @__PURE__ */ jsx3(
@@ -624,8 +672,11 @@ function WorkflowNode({ data }) {
     "div",
     {
       className: "relative flex h-full w-full flex-col overflow-hidden rounded-xl border bg-card shadow-sm transition-colors",
-      style: state ? statusBorder(state.status) : {
-        borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
+      style: {
+        ...state ? statusBorder(state.status) : {
+          borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
+        },
+        ...selected ? SELECTION_OUTLINE : {}
       },
       children: [
         handles,
@@ -695,22 +746,88 @@ function WorkflowNode({ data }) {
     }
   );
 }
+var EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
+function WfEdgeRenderer({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  data,
+  markerEnd,
+  style
+}) {
+  const [path, labelX, labelY] = getSmoothStepPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  const backEdge = data?.backEdge === true;
+  const whenLabel = data?.whenLabel;
+  const visits = data?.maxNodeVisits;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(BaseEdge, { id, path, markerEnd, style }),
+    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
+        style: {
+          transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`
+        },
+        children: [
+          whenLabel && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              title: whenLabel,
+              className: `${EDGE_CHIP_CLASS} max-w-40 truncate text-muted-foreground`,
+              children: whenLabel
+            }
+          ),
+          backEdge && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              title: visits !== void 0 ? `Loops back \u2014 each node runs at most ${visits} time${visits === 1 ? "" : "s"} per run` : "Loops back to a step that has already run",
+              className: `${EDGE_CHIP_CLASS} shrink-0 text-foreground`,
+              children: visits !== void 0 ? `\u21BA \u2264${visits}` : "\u21BA"
+            }
+          )
+        ]
+      }
+    ) })
+  ] });
+}
 var NODE_TYPES = { wfNode: WorkflowNode };
-function buildStyledEdges(base, nodeState) {
+var EDGE_TYPES = { [WF_EDGE_TYPE]: WfEdgeRenderer };
+function buildStyledEdges(base, nodeState, maxNodeVisits) {
   return base.map((e) => {
     const status = nodeState?.[e.target]?.status;
     const color = edgeColor(nodeState ? status : void 0);
+    const backEdge = e.data?.backEdge === true;
     return {
       ...e,
-      // The active hop flows; everything else is static.
-      animated: status === "running",
-      style: { strokeWidth: 1.75, stroke: color },
+      // The active hop flows; everything else is static. A cycle-closing edge
+      // never flows even into a running target: it is the loop's RETURN path,
+      // and animating it would read as the run travelling backwards.
+      animated: !backEdge && status === "running",
+      style: {
+        strokeWidth: 1.75,
+        stroke: color,
+        // Dashed, so a return path is distinguishable from a forward hop before
+        // its badge is read — and at a zoom where the badge isn't legible.
+        ...backEdge ? { strokeDasharray: "6 3" } : {}
+      },
       markerEnd: {
         type: MarkerType.ArrowClosed,
         width: 15,
         height: 15,
         color
-      }
+      },
+      ...backEdge && maxNodeVisits !== void 0 && e.data ? { data: { ...e.data, maxNodeVisits } } : {}
     };
   });
 }
@@ -721,28 +838,41 @@ function WorkflowGraph({
   defaultCompact = true,
   className,
   nodeState,
-  onNodeClick
+  edges: declaredEdges,
+  maxNodeVisits,
+  selectedNodeId,
+  onNodeClick,
+  onEdgeConnect,
+  onEdgeDelete,
+  onEdgeClick
 }) {
+  const editable = onEdgeConnect !== void 0;
   const colorMode = useColorMode();
   const isPreview = variant === "preview";
   const [userCompact, setUserCompact] = useState(defaultCompact);
   const compact = isPreview || userCompact;
   const [displayCompact, setDisplayCompact] = useState(compact);
-  const rfRef = useRef(null);
+  const rfRef = useRef(
+    null
+  );
   const wrapperRef = useRef(null);
   const hasRunOverlay = nodeState !== void 0;
   const structural = useMemo(
     () => buildFlowGraph(yaml, {
       nodeState: hasRunOverlay ? {} : void 0,
       direction,
-      compact
+      compact,
+      ...declaredEdges ? { edges: declaredEdges } : {}
     }),
-    [yaml, hasRunOverlay, direction, compact]
-  );
-  const styledEdges = useMemo(
-    () => buildStyledEdges(structural.edges, nodeState),
-    [structural.edges, nodeState]
+    [yaml, hasRunOverlay, direction, compact, declaredEdges]
   );
+  const styledEdges = useMemo(() => {
+    const styled = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
+    return styled.map((e) => ({
+      ...e,
+      deletable: editable ? isEditableEdge(e) : false
+    }));
+  }, [structural.edges, nodeState, maxNodeVisits, editable]);
   const [nodes, setNodes, onNodesChange] = useNodesState(structural.nodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(styledEdges);
   const nodesRef = useRef(nodes);
@@ -853,7 +983,7 @@ function WorkflowGraph({
       }
     );
   }
-  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(SelectedNodeContext.Provider, { value: selectedNodeId, children: /* @__PURE__ */ jsx3(ConnectableContext.Provider, { value: editable, children: /* @__PURE__ */ jsx3("div", { ref: wrapperRef, className: `wf-graph ${className ?? ""}`, children: /* @__PURE__ */ jsxs2(
     ReactFlow,
     {
       nodes,
@@ -861,6 +991,7 @@ function WorkflowGraph({
       onNodesChange,
       onEdgesChange,
       nodeTypes: NODE_TYPES,
+      edgeTypes: EDGE_TYPES,
       colorMode,
       onInit: (inst) => {
         rfRef.current = inst;
@@ -870,11 +1001,28 @@ function WorkflowGraph({
       fitViewOptions: { ...FIT_VIEW, maxZoom: fitZoomCeiling(compact) },
       proOptions: { hideAttribution: true },
       nodesDraggable: !isPreview,
-      nodesConnectable: false,
-      deleteKeyCode: null,
+      nodesConnectable: editable,
+      deleteKeyCode: editable ? ["Backspace", "Delete"] : null,
       edgesReconnectable: false,
       elementsSelectable: !isPreview,
-      edgesFocusable: false,
+      edgesFocusable: editable,
+      onConnect: editable ? (connection) => {
+        if (connection.source && connection.target) {
+          onEdgeConnect(connection.source, connection.target);
+        }
+      } : void 0,
+      onEdgesDelete: editable ? (deleted) => {
+        for (const edge of deleted) {
+          if (isEditableEdge(edge)) {
+            onEdgeDelete?.(edge.source, edge.target);
+          }
+        }
+      } : void 0,
+      onEdgeClick: editable ? (_event, edge) => {
+        if (isEditableEdge(edge)) {
+          onEdgeClick?.(edge.source, edge.target);
+        }
+      } : void 0,
       zoomOnScroll: false,
       zoomOnPinch: true,
       zoomOnDoubleClick: !isPreview,
@@ -903,14 +1051,17 @@ function WorkflowGraph({
         ] })
       ]
     }
-  ) }) }) });
+  ) }) }) }) }) });
 }
 export {
+  ConnectableContext,
   DensityContext,
   DirectionContext,
   LAYOUT_TRANSITION_MS,
+  SelectedNodeContext,
   WorkflowGraph,
   WorkflowNode,
   buildStyledEdges,
-  fitZoomCeiling
+  fitZoomCeiling,
+  isEditableEdge
 };

package/dist/chat.js

@@ -19,7 +19,7 @@ import {
   snapHarnessToModel,
   snapModelToHarness,
   validateComposerFiles
-} from "./chunk-QMY3XVH3.js";
+} from "./chunk-GUULFESL.js";
 import "./chunk-TK46XFLM.js";
 import {
   MENTION_PILL_CLASS

package/dist/{chunk-QMY3XVH3.js → chunk-GUULFESL.js}

@@ -1561,17 +1561,19 @@ function AgentComposer({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx4("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: controls ?? /* @__PURE__ */ jsx4(
-              AgentSessionControls,
-              {
-                context,
-                harness,
-                profile,
-                model,
-                reasoning
-              }
-            ) }),
-            trailing && /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 items-center gap-2", children: trailing }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+              controls ?? /* @__PURE__ */ jsx4(
+                AgentSessionControls,
+                {
+                  context,
+                  harness,
+                  profile,
+                  model,
+                  reasoning
+                }
+              ),
+              trailing && /* @__PURE__ */ jsx4("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
+            ] }),
             busy && onCancel ? /* @__PURE__ */ jsx4(
               "button",
               {