@tangle-network/sandbox-ui 0.94.3 → 0.95.0

package/dist/{WorkflowGraph-4TQFLY3E.js → WorkflowGraph-MPNVC5FE.js}

@@ -2,19 +2,22 @@ import {
   ProviderIcon
 } from "./chunk-GTJ5PSK5.js";
 import {
+  ACTION_OUTPUT_ROWS,
+  AGENT_BODY_ROWS,
   COMPACT_NODE_SIZE,
   COMPACT_TILE,
   OUTPUT_PREVIEW_CHARS,
-  OUTPUT_ROWS,
+  STRUCTURAL_OUTPUT_ROWS,
   buildWorkflowGraph,
   clampPreview,
   fmtCost,
   fmtDuration,
   fmtTokens,
+  isStructuralKind,
   providerLabel,
   shortModel,
   triggerNodeIndex
-} from "./chunk-7QKAVIZX.js";
+} from "./chunk-O7MHUR4U.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -28,7 +31,6 @@ import {
   BaseEdge,
   Controls,
   EdgeLabelRenderer,
-  getNodesBounds,
   getSmoothStepPath,
   getViewportForBounds,
   Handle,
@@ -54,6 +56,12 @@ import {
 // src/workflows/flow-graph.ts
 import { Position } from "@xyflow/react";
 var WF_EDGE_TYPE = "wfEdge";
+var SIDE_POSITION = {
+  left: Position.Left,
+  right: Position.Right,
+  top: Position.Top,
+  bottom: Position.Bottom
+};
 function isNodeStateMap(arg) {
   const values = Object.values(arg);
   return values.length > 0 && values.every(
@@ -62,7 +70,7 @@ function isNodeStateMap(arg) {
 }
 function normalizeFlowGraphOptions(arg) {
   if (!arg) return {};
-  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "edges" in arg) {
+  if ("nodeState" in arg || "direction" in arg || "compact" in arg || "wrap" in arg || "edges" in arg) {
     return arg;
   }
   return isNodeStateMap(arg) ? { nodeState: arg } : {};
@@ -76,6 +84,7 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
     reserveRunState: nodeState !== void 0,
     direction,
     compact,
+    ...options.wrap ? { wrap: true } : {},
     ...options.edges ? { edges: options.edges } : {}
   });
   const isLR = direction === "LR";
@@ -100,8 +109,11 @@ function buildFlowGraph(yaml, optionsOrNodeState) {
         // 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 },
-        sourcePosition,
-        targetPosition,
+        // A folded layout names each node's own sides (a mirrored row, a corner
+        // that leaves downward); a straight one names none and takes the
+        // direction's answer for every node.
+        sourcePosition: n.sourceSide ? SIDE_POSITION[n.sourceSide] : sourcePosition,
+        targetPosition: n.targetSide ? SIDE_POSITION[n.targetSide] : targetPosition,
         data: nodeState?.[n.id] ? { ...n.data, state: nodeState[n.id] } : n.data
       })
     ),
@@ -203,19 +215,23 @@ function classifyOutput(preview, condenseMarkdown = false) {
 var CLAMP_BY_ROWS = {
   1: "truncate",
   2: "line-clamp-2",
-  3: "line-clamp-3"
+  3: "line-clamp-3",
+  4: "line-clamp-4",
+  5: "line-clamp-5",
+  6: "line-clamp-6"
 };
 function NodeOutputBody({
   shape,
   rows = 2,
   tone = "default"
 }) {
-  const clampClass = CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
+  const unclamped = rows === "none";
+  const clampClass = unclamped ? "" : CLAMP_BY_ROWS[rows] ?? "line-clamp-2";
   const codeWrap = rows === 1 ? "" : "whitespace-pre-wrap break-all";
   if (shape.kind === "empty") return null;
   if (shape.kind === "json") {
-    const overflow = shape.truncated || shape.entries.length > rows;
-    const visible = shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
+    const overflow = unclamped ? shape.truncated : shape.truncated || shape.entries.length > rows;
+    const visible = unclamped ? shape.entries : shape.entries.slice(0, overflow ? Math.max(0, rows - 1) : rows);
     const isError = tone === "error";
     const keyStyle = isError ? ERROR_TEXT : void 0;
     const keyClass = isError ? "" : "text-muted-foreground";
@@ -283,7 +299,8 @@ import {
   Webhook,
   Zap
 } from "lucide-react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
 var TONE_ACCENT = {
   trigger: "hsl(var(--primary))",
   structural: "var(--surface-warning-text)",
@@ -378,6 +395,62 @@ var KIND_ICON = {
   "script.run": Code,
   "trace.analyze": ScanSearch
 };
+function StatusPill({ status }) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      className: "shrink-0 whitespace-nowrap rounded-full border px-2 py-[1px] font-medium text-[10px]",
+      style: STATUS_PILL[status],
+      children: STATUS_LABEL[status]
+    }
+  );
+}
+function StatusFooter({
+  status,
+  rounds,
+  cost,
+  tokens,
+  elapsed
+}) {
+  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
+  const caption = [roundsLabel, cost, tokens].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        className: "h-1 w-full overflow-hidden",
+        style: { background: MUTED_TRACK },
+        children: /* @__PURE__ */ jsx2(
+          "div",
+          {
+            "data-testid": "wf-node-progress",
+            className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
+            style: {
+              width: progressFill(status),
+              background: STATUS_COLOR[status]
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]", children: [
+      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] truncate tabular-nums", children: caption }),
+      /* @__PURE__ */ jsx2("span", { className: "min-h-[15px] shrink-0 tabular-nums", children: elapsed ?? "" })
+    ] })
+  ] });
+}
+function emptySlotLabel(status) {
+  switch (status) {
+    case "queued":
+      return "Not run yet";
+    case "succeeded":
+      return "No output";
+    case "failed":
+      return "No error reported";
+    default:
+      return void 0;
+  }
+}
 function NodeMark({
   kind,
   provider,
@@ -425,12 +498,44 @@ function NodeMark({
 }
 
 // src/workflows/WorkflowGraph.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var MUTED_TRACK = "color-mix(in srgb, hsl(var(--muted-foreground)) 22%, transparent)";
-var FIT_VIEW = { padding: 0.16, minZoom: 0.55 };
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var FIT_VIEW = { padding: 0.16 };
 function fitZoomCeiling(compact) {
   return compact ? 1.5 : 1;
 }
+function fitZoomFloor(compact) {
+  return compact ? 0.55 : 0.35;
+}
+function layoutBounds(nodes) {
+  if (nodes.length === 0) return { x: 0, y: 0, width: 0, height: 0 };
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x);
+    minY = Math.min(minY, node.position.y);
+    maxX = Math.max(maxX, node.position.x + (node.width ?? 0));
+    maxY = Math.max(maxY, node.position.y + (node.height ?? 0));
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function framingViewport(bounds, width, height, compact) {
+  const fit = getViewportForBounds(
+    bounds,
+    width,
+    height,
+    fitZoomFloor(compact),
+    fitZoomCeiling(compact),
+    FIT_VIEW.padding
+  );
+  const anchored = (offset, origin) => offset + Math.max(0, -(offset + origin * fit.zoom));
+  return {
+    zoom: fit.zoom,
+    x: anchored(fit.x, bounds.x),
+    y: anchored(fit.y, bounds.y)
+  };
+}
 var LAYOUT_TRANSITION_MS = 220;
 var DENSITY_FLIP_AT = { grow: 0.12, shrink: 0.75 };
 function motionAllowed() {
@@ -455,6 +560,7 @@ function useColorMode() {
 var DirectionContext = createContext("LR");
 var DensityContext = createContext(false);
 var SelectedNodeContext = createContext(void 0);
+var RunModeContext = createContext(false);
 var SELECTION_OUTLINE = {
   outline: "2px solid hsl(var(--primary))",
   outlineOffset: 2
@@ -463,59 +569,6 @@ var ConnectableContext = createContext(false);
 function isEditableEdge(edge) {
   return edge.data?.kind !== "fork" && triggerNodeIndex(edge.source) === null;
 }
-function StatusFooter({
-  status,
-  rounds,
-  elapsed
-}) {
-  const roundsLabel = rounds !== void 0 ? `${rounds} round${rounds === 1 ? "" : "s"}` : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in mt-auto border-border border-t", children: [
-    /* @__PURE__ */ jsx3(
-      "div",
-      {
-        className: "h-1 w-full overflow-hidden",
-        style: { background: MUTED_TRACK },
-        children: /* @__PURE__ */ jsx3(
-          "div",
-          {
-            "data-testid": "wf-node-progress",
-            className: `h-full ${status === "running" ? "animate-pulse" : ""}`,
-            style: {
-              width: progressFill(status),
-              background: STATUS_COLOR[status]
-            }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between gap-2 px-3.5 py-1 text-[10px] text-muted-foreground leading-[15px]", children: [
-      /* @__PURE__ */ jsx3("span", { className: "min-h-[15px] truncate", children: roundsLabel ?? "" }),
-      /* @__PURE__ */ jsx3("span", { className: "min-h-[15px] shrink-0 tabular-nums", children: elapsed ?? "" })
-    ] })
-  ] });
-}
-function emptySlotLabel(status) {
-  switch (status) {
-    case "queued":
-      return "Not run yet";
-    case "succeeded":
-      return "No output";
-    case "failed":
-      return "No error reported";
-    default:
-      return void 0;
-  }
-}
-function StatusPill({ status }) {
-  return /* @__PURE__ */ jsx3(
-    "span",
-    {
-      className: "shrink-0 rounded-full border px-2 py-[1px] font-medium text-[10px]",
-      style: STATUS_PILL[status],
-      children: STATUS_LABEL[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) {
@@ -539,22 +592,32 @@ function compactHandleStyle(position, isLR) {
       return anchor(tileLeft + center, COMPACT_TILE);
   }
 }
-function WorkflowNode({ id, data }) {
+function WorkflowNode({
+  id,
+  data,
+  // Set only where the LAYOUT decides a node's own sides — a folded row that
+  // runs right-to-left, or the step that turns the corner and leaves downward.
+  // A straight layer flow leaves them to the direction, below.
+  sourcePosition,
+  targetPosition
+}) {
   const d = data;
   const state = d.state;
   const direction = useContext(DirectionContext);
   const compact = useContext(DensityContext);
+  const runMode = useContext(RunModeContext);
   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;
+  const targetPos = targetPosition ?? (isLR ? Position2.Left : Position2.Top);
+  const sourcePos = sourcePosition ?? (isLR ? Position2.Right : Position2.Bottom);
   const accent = TONE_ACCENT[d.tone];
   const isAgent = d.kind === "agent.run";
   const subtitle = isAgent && state?.model ? shortModel(state.model) : d.subtitle;
   const markModel = isAgent && state?.model ? state.model : d.model;
-  const runBands = state !== void 0 && d.tone !== "trigger";
+  const runBands = runMode && d.tone !== "trigger";
+  const runStatus = runBands ? state?.status ?? "queued" : state?.status;
   const duration = fmtDuration(state?.durationMs);
   const cost = fmtCost(state?.costUsd);
   const tokens = isAgent ? fmtTokens(state?.inputTokens, state?.outputTokens) : void 0;
@@ -574,7 +637,7 @@ function WorkflowNode({ id, 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: [
+  const handles = /* @__PURE__ */ jsxs3(Fragment, { children: [
     !d.isRoot && /* @__PURE__ */ jsx3(
       Handle,
       {
@@ -595,13 +658,13 @@ function WorkflowNode({ id, data }) {
     )
   ] });
   if (compact) {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: `relative flex h-full w-full ${isLR ? "flex-col items-center" : "flex-row items-center"}`,
         children: [
           handles,
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "span",
             {
               className: "relative flex items-center justify-center rounded-xl border bg-card shadow-sm transition-colors",
@@ -641,7 +704,7 @@ function WorkflowNode({ id, data }) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsxs3(
             "div",
             {
               className: `wf-node-body-in min-w-0 ${isLR ? "mt-2 w-full px-1 text-center" : "ml-2 flex-1 text-left"}`,
@@ -670,82 +733,250 @@ function WorkflowNode({ id, data }) {
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
+  const cardShell = (children) => /* @__PURE__ */ jsxs3(
     "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) : {
+        ...runStatus ? statusBorder(runStatus) : {
           borderColor: `color-mix(in srgb, ${accent} 40%, hsl(var(--border)))`
         },
         ...selected ? SELECTION_OUTLINE : {}
       },
       children: [
         handles,
-        /* @__PURE__ */ jsxs2("div", { className: "wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2", children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center gap-2.5", children: [
-            /* @__PURE__ */ jsx3(
-              NodeMark,
+        children
+      ]
+    }
+  );
+  const identityRow = /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-2.5", children: [
+    /* @__PURE__ */ jsx3(
+      NodeMark,
+      {
+        kind: d.kind,
+        provider: d.provider,
+        model: markModel,
+        accent,
+        tile: 34
+      }
+    ),
+    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+          title: d.title,
+          children: d.title
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "truncate text-[11px] text-muted-foreground leading-tight",
+          title: subtitle,
+          children: subtitle
+        }
+      )
+    ] }),
+    runStatus ? /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge })
+  ] });
+  const footer = runStatus ? /* @__PURE__ */ jsx3(
+    StatusFooter,
+    {
+      status: runStatus,
+      rounds: isAgent ? state?.rounds : void 0,
+      cost,
+      tokens,
+      elapsed: duration
+    }
+  ) : null;
+  const descriptionBand = (emphasized) => d.description ? /* @__PURE__ */ jsx3(
+    "p",
+    {
+      className: `mt-2 line-clamp-2 shrink-0 text-[11px] leading-snug ${emphasized ? "text-foreground" : "text-muted-foreground"}`,
+      title: d.description,
+      children: d.description
+    }
+  ) : null;
+  const emptySlot = runStatus && !runOutput && emptySlotLabel(runStatus) ? /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(runStatus) }) : null;
+  const outputWell = (rows) => runOutput ? /* @__PURE__ */ jsxs3("div", { className: "mt-2 min-h-0 grow shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5", children: [
+    /* @__PURE__ */ jsx3("div", { className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]", children: runOutput.label }),
+    /* @__PURE__ */ jsx3(
+      NodeOutputBody,
+      {
+        shape: runOutput.shape,
+        tone: runOutput.tone,
+        rows
+      }
+    )
+  ] }) : emptySlot;
+  const body = (children, justify = "") => (
+    /* The content region owns its overflow: each band is `shrink-0`, so a band
+       that renders taller than its reservation (a consumer's font metrics) is
+       CLIPPED here rather than squeezed — a squeezed band cuts a line of text
+       in half, and pushes the pinned footer off the card. Fades in when the
+       density swap lands mid layout-morph; the card's border/surface (the
+       root) stays opaque so the node never blinks out. */
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: `wf-node-body-in flex min-h-0 flex-1 flex-col overflow-hidden px-3.5 pt-2.5 pb-2 ${justify}`,
+        children
+      }
+    )
+  );
+  if (!runBands) {
+    return cardShell(body(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        identityRow,
+        descriptionBand(false)
+      ] })
+    ));
+  }
+  if (d.kind === "decision") {
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-start gap-2.5", children: [
+              /* @__PURE__ */ jsx3(
+                NodeMark,
+                {
+                  kind: d.kind,
+                  provider: d.provider,
+                  model: markModel,
+                  accent,
+                  tile: 34
+                }
+              ),
+              /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ jsx3(
+                  "div",
+                  {
+                    className: "truncate font-semibold text-[13px] text-foreground leading-tight",
+                    title: d.title,
+                    children: d.title
+                  }
+                ),
+                /* @__PURE__ */ jsxs3("div", { className: "mt-0.5 flex items-center gap-2", children: [
+                  subtitle && /* @__PURE__ */ jsx3(
+                    "span",
+                    {
+                      className: "truncate text-[11px] text-muted-foreground leading-tight",
+                      title: subtitle,
+                      children: subtitle
+                    }
+                  ),
+                  runStatus && /* @__PURE__ */ jsx3("span", { className: "ml-auto shrink-0", children: /* @__PURE__ */ jsx3(StatusPill, { status: runStatus }) })
+                ] })
+              ] })
+            ] }),
+            runOutput && runStatus === "failed" ? /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 shrink-0", children: /* @__PURE__ */ jsx3(
+              NodeOutputBody,
               {
-                kind: d.kind,
-                provider: d.provider,
-                model: markModel,
-                accent,
-                tile: 34
+                shape: runOutput.shape,
+                tone: runOutput.tone,
+                rows: 2
               }
-            ),
-            /* @__PURE__ */ jsxs2("div", { className: "min-w-0 flex-1", children: [
+            ) }) : descriptionBand(true)
+          ] })
+        ),
+        footer
+      ] })
+    );
+  }
+  if (isStructuralKind(d.kind)) {
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            identityRow,
+            /* @__PURE__ */ jsx3("div", { className: "mt-1.5 min-h-0 shrink-0", children: runOutput && /* @__PURE__ */ jsx3(
+              NodeOutputBody,
+              {
+                shape: runOutput.shape,
+                tone: runOutput.tone,
+                rows: STRUCTURAL_OUTPUT_ROWS
+              }
+            ) })
+          ] }),
+          // Centered, because the failure slot is empty on every run that does
+          // NOT fail — which is most of them. Reserved space it cannot give back
+          // (the layout is fixed before the run) reads as a gap under a
+          // top-aligned row, and as breathing room around a centered one.
+          "justify-center"
+        ),
+        footer
+      ] })
+    );
+  }
+  if (isAgent) {
+    const strip = [d.title, subtitle].filter(Boolean).join(" \xB7 ");
+    return cardShell(
+      /* @__PURE__ */ jsxs3(Fragment, { children: [
+        body(
+          /* @__PURE__ */ jsxs3(Fragment, { children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1.5", children: [
               /* @__PURE__ */ jsx3(
-                "div",
+                NodeMark,
                 {
-                  className: "truncate font-semibold text-[13px] text-foreground leading-tight",
-                  title: d.title,
-                  children: d.title
+                  kind: d.kind,
+                  provider: d.provider,
+                  model: markModel,
+                  accent,
+                  tile: 18
                 }
               ),
-              subtitle && /* @__PURE__ */ jsx3(
-                "div",
+              /* @__PURE__ */ jsx3(
+                "span",
                 {
-                  className: "truncate text-[11px] text-muted-foreground leading-tight",
-                  title: subtitle,
-                  children: subtitle
+                  className: "truncate font-medium text-[11px] text-muted-foreground",
+                  title: strip,
+                  children: strip
                 }
-              )
+              ),
+              /* @__PURE__ */ jsx3("span", { className: "flex-1" }),
+              runStatus && /* @__PURE__ */ jsx3(StatusPill, { status: runStatus })
             ] }),
-            state ? /* @__PURE__ */ jsx3(StatusPill, { status: state.status }) : d.badge && /* @__PURE__ */ jsx3("span", { className: "shrink-0 rounded-full border border-border bg-surface-container-high px-2 py-[1px] font-medium text-[10px] text-muted-foreground", children: d.badge })
-          ] }),
-          d.description && /* @__PURE__ */ jsx3(
-            "p",
-            {
-              className: "mt-2 line-clamp-2 shrink-0 text-[11px] text-muted-foreground leading-snug",
-              title: d.description,
-              children: d.description
-            }
-          ),
-          runBands && (cost || tokens) && /* @__PURE__ */ jsx3("div", { className: "mt-2 shrink-0 truncate text-[11px] text-muted-foreground tabular-nums", children: [cost, tokens].filter(Boolean).join(" \xB7 ") }),
-          runBands && runOutput && /* @__PURE__ */ jsxs2("div", { className: "mt-2 min-h-0 shrink-0 rounded-lg border border-border bg-surface-container-high/60 px-2 py-1.5", children: [
-            /* @__PURE__ */ jsx3("div", { className: "mb-1 font-semibold text-[9px] text-muted-foreground uppercase tracking-[0.09em]", children: runOutput.label }),
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx3("div", { className: "mt-2 min-h-0 flex-1 text-foreground leading-snug", children: runOutput ? /* @__PURE__ */ jsx3(
               NodeOutputBody,
               {
                 shape: runOutput.shape,
                 tone: runOutput.tone,
-                rows: OUTPUT_ROWS
+                rows: AGENT_BODY_ROWS
               }
-            )
-          ] }),
-          runBands && state && !runOutput && emptySlotLabel(state.status) && /* @__PURE__ */ jsx3("div", { className: "mt-2 flex flex-1 items-center text-[11px] text-muted-foreground italic", children: emptySlotLabel(state.status) })
-        ] }),
-        runBands && state && /* @__PURE__ */ jsx3(
-          StatusFooter,
-          {
-            status: state.status,
-            rounds: isAgent ? state.rounds : void 0,
-            elapsed: duration
-          }
-        )
-      ]
-    }
+            ) : runStatus && runStatus !== "succeeded" && runStatus !== "failed" && d.description ? (
+              // What it is ABOUT to do, in the muted token — the answer, when it
+              // arrives, is the thing set in the foreground.
+              //
+              // Only while the node is still going to produce one. A FINISHED
+              // node that produced nothing must say so: showing its prompt
+              // there reads as the result it never returned.
+              /* @__PURE__ */ jsx3(
+                "p",
+                {
+                  className: "line-clamp-5 text-[11px] text-muted-foreground leading-snug",
+                  title: d.description,
+                  children: d.description
+                }
+              )
+            ) : runStatus && /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground italic", children: emptySlotLabel(runStatus) }) })
+          ] })
+        ),
+        footer
+      ] })
+    );
+  }
+  return cardShell(
+    /* @__PURE__ */ jsxs3(Fragment, { children: [
+      body(
+        /* @__PURE__ */ jsxs3(Fragment, { children: [
+          identityRow,
+          outputWell(ACTION_OUTPUT_ROWS)
+        ] })
+      ),
+      footer
+    ] })
   );
 }
 var EDGE_CHIP_CLASS = "rounded-full border border-border bg-card/90 px-1.5 py-[1px] text-[10px] leading-tight backdrop-blur";
@@ -772,9 +1003,9 @@ function WfEdgeRenderer({
   const backEdge = data?.backEdge === true;
   const whenLabel = data?.whenLabel;
   const visits = data?.maxNodeVisits;
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
     /* @__PURE__ */ jsx3(BaseEdge, { id, path, markerEnd, style }),
-    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs2(
+    /* @__PURE__ */ jsx3(EdgeLabelRenderer, { children: /* @__PURE__ */ jsxs3(
       "div",
       {
         className: "nodrag nopan absolute flex flex-col items-center gap-0.5",
@@ -837,8 +1068,9 @@ function WorkflowGraph({
   yaml,
   variant = "full",
   direction = "LR",
-  defaultCompact = true,
+  defaultCompact,
   className,
+  wrap = false,
   nodeState,
   edges: declaredEdges,
   maxNodeVisits,
@@ -851,22 +1083,27 @@ function WorkflowGraph({
   const editable = onEdgeConnect !== void 0;
   const colorMode = useColorMode();
   const isPreview = variant === "preview";
-  const [userCompact, setUserCompact] = useState(defaultCompact);
+  const [userCompact, setUserCompact] = useState(
+    defaultCompact ?? nodeState === void 0
+  );
   const compact = isPreview || userCompact;
   const [displayCompact, setDisplayCompact] = useState(compact);
   const rfRef = useRef(
     null
   );
   const wrapperRef = useRef(null);
+  const framedRef = useRef(false);
+  const [framingCue, setFramingCue] = useState(0);
   const hasRunOverlay = nodeState !== void 0;
   const structural = useMemo(
     () => buildFlowGraph(yaml, {
       nodeState: hasRunOverlay ? {} : void 0,
       direction,
       compact,
+      wrap,
       ...declaredEdges ? { edges: declaredEdges } : {}
     }),
-    [yaml, hasRunOverlay, direction, compact, declaredEdges]
+    [yaml, hasRunOverlay, direction, compact, wrap, declaredEdges]
   );
   const styledEdges = useMemo(() => {
     const styled = buildStyledEdges(structural.edges, nodeState, maxNodeVisits);
@@ -910,14 +1147,13 @@ function WorkflowGraph({
       setDisplayCompact(compact);
       return;
     }
-    const endViewport = getViewportForBounds(
-      getNodesBounds(structural.nodes),
+    const endViewport = framingViewport(
+      layoutBounds(structural.nodes),
       frame.width,
       frame.height,
-      FIT_VIEW.minZoom,
-      fitZoomCeiling(compact),
-      FIT_VIEW.padding
+      compact
     );
+    framedRef.current = true;
     const prev = nodesRef.current;
     const prevById = new Map(prev.map((n) => [n.id, n]));
     const sameNodeSet = prev.length === structural.nodes.length && structural.nodes.every((n) => prevById.has(n.id));
@@ -970,6 +1206,34 @@ function WorkflowGraph({
       clearTimeout(flipTimer);
     };
   }, [structural, compact, setNodes]);
+  useEffect(() => {
+    if (framedRef.current) return;
+    const inst = rfRef.current;
+    const frame = wrapperRef.current?.getBoundingClientRect();
+    if (!inst || !frame || frame.width === 0 || frame.height === 0) return;
+    inst.setViewport(
+      framingViewport(
+        layoutBounds(structural.nodes),
+        frame.width,
+        frame.height,
+        compact
+      )
+    );
+    framedRef.current = true;
+  }, [framingCue, structural, compact]);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => {
+      if (framedRef.current) {
+        observer.disconnect();
+        return;
+      }
+      setFramingCue((cue) => cue + 1);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
   const handleNodeClick = useCallback(
     (_event, node) => {
       onNodeClick?.(node.id, node.data);
@@ -999,7 +1263,7 @@ function WorkflowGraph({
       }
     );
   }
-  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(
+  return /* @__PURE__ */ jsx3(DirectionContext.Provider, { value: direction, children: /* @__PURE__ */ jsx3(DensityContext.Provider, { value: displayCompact, children: /* @__PURE__ */ jsx3(RunModeContext.Provider, { value: hasRunOverlay, 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__ */ jsxs3(
     ReactFlow,
     {
       nodes,
@@ -1011,11 +1275,16 @@ function WorkflowGraph({
       colorMode,
       onInit: (inst) => {
         rfRef.current = inst;
+        if (!framedRef.current) setFramingCue((cue) => cue + 1);
       },
       onNodeClick: onNodeClick ? handleNodeClick : void 0,
       onKeyDown: onNodeClick ? handleNodeKeyDown : void 0,
       fitView: true,
-      fitViewOptions: { ...FIT_VIEW, maxZoom: fitZoomCeiling(compact) },
+      fitViewOptions: {
+        ...FIT_VIEW,
+        minZoom: fitZoomFloor(compact),
+        maxZoom: fitZoomCeiling(compact)
+      },
       proOptions: { hideAttribution: true },
       nodesDraggable: !isPreview,
       nodesConnectable: editable,
@@ -1049,9 +1318,9 @@ function WorkflowGraph({
       maxZoom: 1.5,
       children: [
         /* @__PURE__ */ jsx3(Background, { gap: 18 }),
-        !isPreview && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        !isPreview && /* @__PURE__ */ jsxs3(Fragment, { children: [
           /* @__PURE__ */ jsx3(Controls, { showInteractive: false, position: "bottom-right" }),
-          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs2(
+          /* @__PURE__ */ jsx3(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
@@ -1068,17 +1337,22 @@ function WorkflowGraph({
         ] })
       ]
     }
-  ) }) }) }) }) });
+  ) }) }) }) }) }) });
 }
 export {
   ConnectableContext,
   DensityContext,
   DirectionContext,
+  FIT_VIEW,
   LAYOUT_TRANSITION_MS,
+  RunModeContext,
   SelectedNodeContext,
   WorkflowGraph,
   WorkflowNode,
   buildStyledEdges,
   fitZoomCeiling,
-  isEditableEdge
+  fitZoomFloor,
+  framingViewport,
+  isEditableEdge,
+  layoutBounds
 };

package/dist/{chunk-7QKAVIZX.js → chunk-O7MHUR4U.js}

@@ -237,9 +237,29 @@ var EDGE_LABEL_LANE = 180;
 var CARD_CHROME = 20;
 var HEADER_ROW = 34;
 var DESCRIPTION_ROW = 40;
-var META_ROW = 27;
-var OUTPUT_ROWS = 3;
-var OUTPUT_ROW = 89;
+var AGENT_BODY_ROWS = 5;
+var ACTION_OUTPUT_ROWS = 3;
+var STRUCTURAL_OUTPUT_ROWS = 1;
+var WELL_PROSE_LINE = 15.125;
+var WELL_JSON_LINE = 14.4375;
+var WELL_JSON_GAP = 2;
+var WELL_CHROME = 39.5;
+function wellRow(rows) {
+  const body = Math.max(
+    rows * WELL_PROSE_LINE,
+    rows * WELL_JSON_LINE + (rows - 1) * WELL_JSON_GAP
+  );
+  return Math.ceil(WELL_CHROME + body) + 3;
+}
+var SLIM_HEADER_ROW = 22;
+var BODY_LINE = 15.125;
+var AGENT_BODY_ROW = Math.ceil(8 + AGENT_BODY_ROWS * BODY_LINE);
+var CHIP_SLOT_ROW = 22;
+var DECISION_HEADER_ROW = 45;
+var STRUCTURAL_KINDS = /* @__PURE__ */ new Set(["parallel", "foreach"]);
+function isStructuralKind(kind) {
+  return kind !== void 0 && STRUCTURAL_KINDS.has(kind);
+}
 var OUTPUT_PREVIEW_CHARS = 240;
 var FOOTER_ROW = 28;
 var COMPACT_TILE = 76;
@@ -258,10 +278,19 @@ var COMPACT_NODE_SIZE_TB = {
   height: COMPACT_TILE
 };
 function nodeHeight(data, withRunState) {
-  let h = CARD_CHROME + HEADER_ROW;
-  if (data.description) h += DESCRIPTION_ROW;
-  if (withRunState) h += META_ROW + OUTPUT_ROW + FOOTER_ROW;
-  return h;
+  if (!withRunState || data.tone === "trigger") {
+    return CARD_CHROME + HEADER_ROW + (data.description ? DESCRIPTION_ROW : 0);
+  }
+  if (data.kind === "decision") {
+    return CARD_CHROME + DECISION_HEADER_ROW + DESCRIPTION_ROW + FOOTER_ROW;
+  }
+  if (isStructuralKind(data.kind)) {
+    return CARD_CHROME + HEADER_ROW + CHIP_SLOT_ROW + FOOTER_ROW;
+  }
+  if (data.kind === "agent.run") {
+    return CARD_CHROME + SLIM_HEADER_ROW + AGENT_BODY_ROW + FOOTER_ROW;
+  }
+  return CARD_CHROME + HEADER_ROW + wellRow(ACTION_OUTPUT_ROWS) + FOOTER_ROW;
 }
 function geometry(compact, runMode, direction) {
   if (compact) {
@@ -552,6 +581,75 @@ function describeTrigger(on) {
     asRecord(kind ? rec[kind] : void 0)
   );
 }
+var WRAP_TARGET_ASPECT = 742 / 480;
+var WRAP_ASPECT_TRIGGER = 4.2;
+var WRAP_ROW_GAP = 28;
+function foldColumns(count, cellW, cellH, colSep, rowSep) {
+  let best = count;
+  let bestError = Number.POSITIVE_INFINITY;
+  for (let cols = 1; cols <= count; cols++) {
+    const rows = Math.ceil(count / cols);
+    const width = cols * cellW + (cols - 1) * colSep;
+    const height = rows * cellH + (rows - 1) * rowSep;
+    const error = Math.abs(Math.log(width / height / WRAP_TARGET_ASPECT));
+    if (error < bestError) {
+      bestError = error;
+      best = cols;
+    }
+  }
+  return best;
+}
+function layoutSerpentine(nodes, edges, colSep, laneSep) {
+  const rowSep = Math.max(laneSep, WRAP_ROW_GAP);
+  const byRank = /* @__PURE__ */ new Map();
+  for (const n of nodes) {
+    const arr = byRank.get(n.rank);
+    if (arr) arr.push(n);
+    else byRank.set(n.rank, [n]);
+  }
+  const ranks = [...byRank.keys()].sort((a, b) => a - b);
+  if (ranks.some((r) => byRank.get(r).length !== 1)) return null;
+  const rankOf = new Map(nodes.map((n) => [n.id, n.rank]));
+  const joinsNextLayer = (e) => {
+    const from = rankOf.get(e.source);
+    const to = rankOf.get(e.target);
+    return from !== void 0 && to !== void 0 && to === from + 1;
+  };
+  if (!edges.every(joinsNextLayer)) return null;
+  const ordered = ranks.map((r) => byRank.get(r)[0]);
+  const count = ordered.length;
+  const cellW = Math.max(...ordered.map((n) => n.width));
+  const cellH = Math.max(...ordered.map((n) => n.height));
+  const lineAspect = (count * cellW + (count - 1) * colSep) / cellH;
+  if (lineAspect <= WRAP_TARGET_ASPECT * WRAP_ASPECT_TRIGGER) return null;
+  const cols = foldColumns(count, cellW, cellH, colSep, rowSep);
+  if (cols >= count) return null;
+  return ordered.map((node, i) => {
+    const row = Math.floor(i / cols);
+    const indexInRow = i % cols;
+    const leftToRight = row % 2 === 0;
+    const col = leftToRight ? indexInRow : cols - 1 - indexInRow;
+    return {
+      id: node.id,
+      position: {
+        x: col * (cellW + colSep) + (cellW - node.width) / 2,
+        y: row * (cellH + rowSep) + (cellH - node.height) / 2
+      },
+      width: node.width,
+      height: node.height,
+      data: node.data,
+      // Every node leaves the way its row travels and is entered from behind —
+      // including the one that turns the corner. Mirroring puts the last cell
+      // of a row directly above the first cell of the next, so a turn is
+      // source-right into target-right (or left into left): the renderer draws
+      // it as a bracket in the margin beside the column. Routing it through the
+      // BOTTOM instead would have to start below the name that sits under the
+      // tile, leaving the arrow floating clear of the node it comes from.
+      targetSide: leftToRight ? "left" : "right",
+      sourceSide: leftToRight ? "right" : "left"
+    };
+  });
+}
 function layoutLayers(nodes, direction, rankSep, crossSep) {
   const isLR = direction === "LR";
   const mainSize = (n) => isLR ? n.width : n.height;
@@ -778,8 +876,9 @@ function buildWorkflowGraph(yaml, options) {
     (e) => e.whenLabel !== void 0 || e.backEdge === true
   );
   const rankSep = labelled ? Math.max(geo.rankSep, EDGE_LABEL_LANE) : geo.rankSep;
+  const folded = options?.wrap && direction === "LR" && !labelled ? layoutSerpentine(logical, edges, rankSep, geo.crossSep) : null;
   return {
-    nodes: layoutLayers(logical, direction, rankSep, geo.crossSep),
+    nodes: folded ?? layoutLayers(logical, direction, rankSep, geo.crossSep),
     edges,
     error: null
   };
@@ -797,7 +896,10 @@ export {
   triggerNodeIndex,
   actionNodeId,
   branchNodeId,
-  OUTPUT_ROWS,
+  AGENT_BODY_ROWS,
+  ACTION_OUTPUT_ROWS,
+  STRUCTURAL_OUTPUT_ROWS,
+  isStructuralKind,
   OUTPUT_PREVIEW_CHARS,
   COMPACT_TILE,
   COMPACT_NODE_SIZE,

package/dist/globals.css

@@ -643,6 +643,24 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+  .line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+  .line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
+  .line-clamp-6 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+  }
   .block {
     display: block;
   }
@@ -805,6 +823,9 @@
   .h-\[28rem\] {
     height: 28rem;
   }
+  .h-\[30rem\] {
+    height: 30rem;
+  }
   .h-\[32rem\] {
     height: 32rem;
   }

package/dist/styles.css

@@ -643,6 +643,24 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
   }
+  .line-clamp-4 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+  }
+  .line-clamp-5 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 5;
+  }
+  .line-clamp-6 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+  }
   .block {
     display: block;
   }
@@ -805,6 +823,9 @@
   .h-\[28rem\] {
     height: 28rem;
   }
+  .h-\[30rem\] {
+    height: 30rem;
+  }
   .h-\[32rem\] {
     height: 32rem;
   }

package/dist/workflows.d.ts

@@ -106,6 +106,9 @@ interface WfNodeData extends Record<string, unknown> {
     /** Live run state, merged in by the host at render time (never from YAML). */
     state?: WfNodeState;
 }
+/** Which edge of a node box an edge attaches to. Named in plain compass terms
+ *  rather than React Flow's `Position` so the layouter stays free of it. */
+type WfSide = "left" | "right" | "top" | "bottom";
 interface WfNode {
     id: string;
     position: {
@@ -118,6 +121,15 @@ interface WfNode {
     width: number;
     height: number;
     data: WfNodeData;
+    /**
+     * Where this node's edges attach, when the LAYOUT decides rather than the
+     * flow direction. A straight layer flow has one answer for every node (edges
+     * enter the leading edge and leave the trailing one, per `direction`), so it
+     * sets neither and the renderer derives both. A folded layout does not — a row
+     * that runs right-to-left mirrors them. Absent ⇒ derive from `direction`.
+     */
+    sourceSide?: WfSide;
+    targetSide?: WfSide;
 }
 /**
  * Node ids are PUBLIC contract, not an internal detail. A host keys its live
@@ -217,6 +229,13 @@ interface BuildWorkflowGraphOptions {
     /** Collapse every node to the fixed icon-tile size, and pitch the layers for
      *  it. Defaults to `false` (the full, expanded card). */
     compact?: boolean;
+    /**
+     * Fold a long single-file pipeline into rows instead of one unbounded line,
+     * so it occupies both axes of the panel rather than running off one edge.
+     * Only a straight chain folds — a graph with any fan-out keeps its layered
+     * flow, whose branches need the cross axis. "LR" only. Defaults to `false`.
+     */
+    wrap?: boolean;
     /**
      * The graph's DECLARED topology. Omit — the default — and edges are inferred
      * from `do`-list order: a linear spine, which is exactly right for a workflow
@@ -250,14 +269,25 @@ interface WorkflowGraphProps {
     /** Flow direction: "LR" (default) reads left-to-right — best for the wide/short
      *  run-detail panel; "TB" is a vertical column. */
     direction?: WfDirection;
-    /** Start collapsed (compact icon tiles) rather than expanded. Defaults to
-     *  `true`: a graph is read structure-first, and the tiles are what make the
-     *  shape of the run legible at a glance — the per-node detail is one density
-     *  toggle (or one node click) away. The full variant exposes the toggle; the
-     *  preview variant is always compact. */
+    /**
+     * Start collapsed (compact icon tiles) rather than expanded.
+     *
+     * Defaults to whether the graph has a RUN: a definition is read
+     * structure-first, so it opens as tiles, while a run is read result-first and
+     * opens as cards — the answers are the reason the reader opened it. Passing
+     * the prop pins the density either way; the full variant still exposes the
+     * toggle, and the preview variant is always compact.
+     */
     defaultCompact?: boolean;
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;
+    /**
+     * Fold a long single-file pipeline into rows instead of one unbounded line,
+     * so it uses both axes of the panel rather than running off one edge. Only a
+     * straight chain folds; anything with fan-out keeps its layered flow. "LR"
+     * only. Defaults to `false`.
+     */
+    wrap?: boolean;
     /**
      * Live per-node run state, keyed by graph node id (`trigger`, `a0`, `a0-b1`).
      * Absent ⇒ the static definition view (the proposal-card preview passes

package/dist/workflows.js

@@ -5,7 +5,7 @@ import {
   buildWorkflowGraph,
   triggerNodeId,
   triggerNodeIndex
-} from "./chunk-7QKAVIZX.js";
+} from "./chunk-O7MHUR4U.js";
 import {
   ModelBrandStack,
   modelBrandFor
@@ -36,7 +36,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 function lazyWorkflowGraph() {
   return lazy(
     () => retryImport(
-      () => import("./WorkflowGraph-4TQFLY3E.js").then((m) => ({ default: m.WorkflowGraph }))
+      () => import("./WorkflowGraph-MPNVC5FE.js").then((m) => ({ default: m.WorkflowGraph }))
     )
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.94.3",
+  "version": "0.95.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",