@tangle-network/sandbox-ui 0.73.0 → 0.75.0

package/dist/{chunk-34F66QTV.js → chunk-FNE5QLU3.js}

@@ -15,20 +15,22 @@ function providerLabel(provider) {
 
 // src/workflows/model.ts
 import { parse as parseYaml } from "yaml";
-var BRANCH_X = 300;
-var NODE_GAP = 44;
-var BRANCH_GAP = 24;
-var CARD_CHROME = 20;
-var TITLE_ROW = 22;
+var NODE_W = 244;
+var RANK_SEP = 76;
+var CROSS_SEP = 22;
+var CARD_CHROME = 18;
+var HEADER_ROW = 28;
 var TEXT_ROW = 20;
-var META_ROW = 44;
-var PREVIEW_ROW = 34;
-function estimateNodeHeight(data, withRunState) {
-  let h = CARD_CHROME + TITLE_ROW;
+var META_ROW = 46;
+var OUTPUT_ROW = 44;
+var FOOTER_ROW = 26;
+var COMPACT_NODE_SIZE = { width: 240, height: 64 };
+function nodeHeight(data, withRunState) {
+  let h = CARD_CHROME + HEADER_ROW;
   if (data.subtitle) h += TEXT_ROW;
-  if (withRunState || data.model) h += META_ROW;
-  if (withRunState) h += PREVIEW_ROW;
   if (data.provider) h += TEXT_ROW;
+  if (withRunState || data.model) h += META_ROW;
+  if (withRunState) h += OUTPUT_ROW + FOOTER_ROW;
   return h;
 }
 function asRecord(v) {
@@ -65,7 +67,6 @@ function describeActionBase(action) {
         kind,
         subtitle: str(cfg.template),
         detail: pickDetail(cfg, ["template", "size", "region"]),
-        hasBranches: false,
         isRoot: false,
         tone: "action"
       };
@@ -78,7 +79,6 @@ function describeActionBase(action) {
         path,
         provider: path?.split(".")[0],
         detail: pickDetail(cfg, ["path"]),
-        hasBranches: false,
         isRoot: false,
         tone: "action"
       };
@@ -90,7 +90,6 @@ function describeActionBase(action) {
         kind,
         subtitle: url ? urlHost(url) : void 0,
         detail: pickDetail(cfg, ["url"]),
-        hasBranches: false,
         isRoot: false,
         tone: "action"
       };
@@ -99,7 +98,9 @@ function describeActionBase(action) {
       return {
         title: "Run agent",
         kind,
-        subtitle: str(cfg.model) ?? str(cfg.profile) ?? str(cfg.prompt),
+        // The prompt says what the agent does; the model is shown as its own
+        // chip, so it's not duplicated here.
+        subtitle: str(cfg.prompt) ?? str(cfg.profile),
         model: str(cfg.model),
         detail: pickDetail(cfg, [
           "profile",
@@ -108,7 +109,6 @@ function describeActionBase(action) {
           "size",
           "prompt"
         ]),
-        hasBranches: false,
         isRoot: false,
         tone: "action"
       };
@@ -119,7 +119,6 @@ function describeActionBase(action) {
         kind,
         subtitle: `${branches.length} branch${branches.length === 1 ? "" : "es"}`,
         badge: branches.length > 0 ? `\xD7${branches.length}` : void 0,
-        hasBranches: branches.length > 0,
         isRoot: false,
         tone: "structural"
       };
@@ -131,7 +130,6 @@ function describeActionBase(action) {
         subtitle: typeof cfg.items === "string" ? cfg.items : "list",
         detail: pickDetail(cfg, ["items"]),
         // Only fans out when a `do` template is actually present.
-        hasBranches: Boolean(cfg.do),
         isRoot: false,
         tone: "structural"
       };
@@ -139,7 +137,6 @@ function describeActionBase(action) {
       return {
         title: kind ? kind : "Action",
         kind: kind ?? "action",
-        hasBranches: false,
         isRoot: false,
         tone: "action"
       };
@@ -198,7 +195,6 @@ function describeTrigger(on) {
         kind: "provider_event",
         subtitle,
         provider: connection,
-        hasBranches: false,
         isRoot: true,
         tone: "trigger"
       },
@@ -214,7 +210,6 @@ function describeTrigger(on) {
         title: "Schedule",
         kind: "schedule",
         subtitle: cron ? tz ? `${cron} (${tz})` : cron : void 0,
-        hasBranches: false,
         isRoot: true,
         tone: "trigger"
       },
@@ -226,15 +221,58 @@ function describeTrigger(on) {
     {
       title: "Trigger",
       kind: "trigger",
-      hasBranches: false,
       isRoot: true,
       tone: "trigger"
     },
     asRecord(kind ? rec[kind] : void 0)
   );
 }
+function layoutLayers(nodes, direction) {
+  const isLR = direction === "LR";
+  const mainSize = (n) => isLR ? n.width : n.height;
+  const crossSize = (n) => isLR ? n.height : n.width;
+  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);
+  const mainStart = /* @__PURE__ */ new Map();
+  let cursor = 0;
+  for (const r of ranks) {
+    mainStart.set(r, cursor);
+    cursor += Math.max(...byRank.get(r).map(mainSize)) + RANK_SEP;
+  }
+  const out = [];
+  for (const r of ranks) {
+    const layer = byRank.get(r);
+    const extent = Math.max(...layer.map(mainSize));
+    const span = layer.reduce((s, n) => s + crossSize(n), 0) + CROSS_SEP * (layer.length - 1);
+    let cross = -span / 2;
+    for (const n of layer) {
+      const main = mainStart.get(r) + (extent - mainSize(n)) / 2;
+      out.push({
+        id: n.id,
+        position: isLR ? { x: main, y: cross } : { x: cross, y: main },
+        width: n.width,
+        height: n.height,
+        data: n.data
+      });
+      cross += crossSize(n) + CROSS_SEP;
+    }
+  }
+  const minX = Math.min(...out.map((n) => n.position.x));
+  const minY = Math.min(...out.map((n) => n.position.y));
+  for (const n of out) {
+    n.position = { x: n.position.x - minX, y: n.position.y - minY };
+  }
+  return out;
+}
 function buildWorkflowGraph(yaml, options) {
   const reserveRunState = options?.reserveRunState ?? false;
+  const direction = options?.direction ?? "LR";
+  const measure = options?.measure;
   if (!yaml || yaml.trim() === "") {
     return { nodes: [], edges: [], error: "No definition" };
   }
@@ -249,61 +287,58 @@ function buildWorkflowGraph(yaml, options) {
   if (!def.on && actions.length === 0) {
     return { nodes: [], edges: [], error: "Empty workflow" };
   }
-  const nodes = [];
+  const logical = [];
   const edges = [];
-  let y = 0;
-  let prevId = null;
-  const addEdge = (source, target, branch) => {
-    edges.push({
-      id: `${source}->${target}`,
-      source,
-      target,
-      sourceHandle: branch ? "branch" : "out"
-    });
+  const addNode = (id, data, rank2, withRunState) => {
+    const dims = measure ? measure(data, withRunState) : { width: NODE_W, height: nodeHeight(data, withRunState) };
+    logical.push({ id, data, width: dims.width, height: dims.height, rank: rank2 });
+  };
+  const addEdge = (source, target, kind) => {
+    edges.push({ id: `${source}->${target}`, source, target, kind });
   };
+  let rank = 0;
+  let prevExits = [];
+  const branchLeafIds = /* @__PURE__ */ new Set();
   if (def.on) {
-    const data = describeTrigger(def.on);
-    nodes.push({ id: "trigger", position: { x: 0, y }, data });
-    prevId = "trigger";
-    y += estimateNodeHeight(data, false) + NODE_GAP;
+    addNode("trigger", describeTrigger(def.on), rank, false);
+    prevExits = ["trigger"];
+    rank += 1;
   }
   actions.forEach((action, i) => {
     const id = `a${i}`;
     const data = describeAction(action);
-    nodes.push({ id, position: { x: 0, y }, data });
-    if (prevId) addEdge(prevId, id, false);
-    prevId = id;
-    const spineHeight = estimateNodeHeight(data, reserveRunState);
+    if (i === 0 && !def.on) data.isRoot = true;
+    addNode(id, data, rank, reserveRunState);
+    for (const from of prevExits) {
+      addEdge(from, id, branchLeafIds.has(from) ? "join" : "spine");
+    }
     const rec = asRecord(action);
     const children = "parallel" in rec ? Array.isArray(asRecord(rec.parallel).branches) ? asRecord(rec.parallel).branches : [] : "foreach" in rec ? (
       // A foreach with no `do` template has no child to render.
       [asRecord(rec.foreach).do].filter(Boolean)
     ) : [];
     if (children.length > 0) {
-      let by = y;
-      let branchStackHeight = 0;
+      const branchRank = rank + 1;
+      const branchIds = [];
       children.forEach((child, j) => {
         const cid = `${id}-b${j}`;
-        const childData = describeAction(child);
-        nodes.push({
-          id: cid,
-          position: { x: BRANCH_X, y: by },
-          data: childData
-        });
-        addEdge(id, cid, true);
-        const childHeight = estimateNodeHeight(childData, reserveRunState);
-        by += childHeight + BRANCH_GAP;
-        branchStackHeight += childHeight + BRANCH_GAP;
+        addNode(cid, describeAction(child), branchRank, reserveRunState);
+        addEdge(id, cid, "fork");
+        branchIds.push(cid);
+        branchLeafIds.add(cid);
       });
-      y += Math.max(spineHeight, branchStackHeight) + NODE_GAP;
+      prevExits = branchIds;
+      rank = branchRank + 1;
     } else {
-      y += spineHeight + NODE_GAP;
+      prevExits = [id];
+      rank += 1;
     }
   });
-  return { nodes, edges, error: null };
+  return { nodes: layoutLayers(logical, direction), edges, error: null };
 }
 
 export {
   providerLabel,
+  COMPACT_NODE_SIZE,
   buildWorkflowGraph
 };

package/dist/globals.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -542,6 +543,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +630,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -697,6 +707,9 @@
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -772,12 +785,24 @@
   .h-\[18px\] {
     height: 18px;
   }
+  .h-\[24rem\] {
+    height: 24rem;
+  }
+  .h-\[28rem\] {
+    height: 28rem;
+  }
+  .h-\[32rem\] {
+    height: 32rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
   .h-\[72\%\] {
     height: 72%;
   }
+  .h-\[220px\] {
+    height: 220px;
+  }
   .h-\[380px\] {
     height: 380px;
   }
@@ -1072,9 +1097,6 @@
   .w-\[88\%\] {
     width: 88%;
   }
-  .w-\[240px\] {
-    width: 240px;
-  }
   .w-\[268px\] {
     width: 268px;
   }
@@ -1114,6 +1136,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[1000px\] {
+    width: 1000px;
+  }
   .w-\[min\(88vw\,24rem\)\] {
     width: min(88vw, 24rem);
   }
@@ -1171,6 +1196,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1907,6 +1935,12 @@
   .border-border {
     border-color: var(--color-border);
   }
+  .border-border\/60 {
+    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    }
+  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1994,12 +2028,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
     }
   }
-  .border-primary\/60 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -2952,6 +2980,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3277,6 +3309,12 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
+  .text-red-400\/80 {
+    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
+  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }
@@ -5116,6 +5154,11 @@
       grid-column: span 8 / span 8;
     }
   }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

package/dist/styles.css

@@ -75,6 +75,7 @@
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
     --leading-tight: 1.25;
+    --leading-snug: 1.375;
     --leading-relaxed: 1.625;
     --radius-sm: 0.25rem;
     --radius-md: 0.375rem;
@@ -542,6 +543,9 @@
   .mt-6 {
     margin-top: calc(var(--spacing) * 6);
   }
+  .mt-auto {
+    margin-top: auto;
+  }
   .mr-1 {
     margin-right: calc(var(--spacing) * 1);
   }
@@ -626,6 +630,12 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
   .block {
     display: block;
   }
@@ -697,6 +707,9 @@
   .\!h-2 {
     height: calc(var(--spacing) * 2) !important;
   }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
   .h-1 {
     height: calc(var(--spacing) * 1);
   }
@@ -772,12 +785,24 @@
   .h-\[18px\] {
     height: 18px;
   }
+  .h-\[24rem\] {
+    height: 24rem;
+  }
+  .h-\[28rem\] {
+    height: 28rem;
+  }
+  .h-\[32rem\] {
+    height: 32rem;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
   .h-\[72\%\] {
     height: 72%;
   }
+  .h-\[220px\] {
+    height: 220px;
+  }
   .h-\[380px\] {
     height: 380px;
   }
@@ -1072,9 +1097,6 @@
   .w-\[88\%\] {
     width: 88%;
   }
-  .w-\[240px\] {
-    width: 240px;
-  }
   .w-\[268px\] {
     width: 268px;
   }
@@ -1114,6 +1136,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[1000px\] {
+    width: 1000px;
+  }
   .w-\[min\(88vw\,24rem\)\] {
     width: min(88vw, 24rem);
   }
@@ -1171,6 +1196,9 @@
   .max-w-\[14rem\] {
     max-width: 14rem;
   }
+  .max-w-\[45\%\] {
+    max-width: 45%;
+  }
   .max-w-\[75\%\] {
     max-width: 75%;
   }
@@ -1907,6 +1935,12 @@
   .border-border {
     border-color: var(--color-border);
   }
+  .border-border\/60 {
+    border-color: color-mix(in srgb, hsl(var(--border)) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-border) 60%, transparent);
+    }
+  }
   .border-destructive\/20 {
     border-color: color-mix(in srgb, hsl(var(--destructive)) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1994,12 +2028,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
     }
   }
-  .border-primary\/60 {
-    border-color: color-mix(in srgb, hsl(var(--primary)) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .border-red-500 {
     border-color: var(--color-red-500);
   }
@@ -2952,6 +2980,10 @@
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
   }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -3277,6 +3309,12 @@
   .text-red-400 {
     color: var(--color-red-400);
   }
+  .text-red-400\/80 {
+    color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-red-400) 80%, transparent);
+    }
+  }
   .text-secondary-foreground {
     color: var(--color-secondary-foreground);
   }
@@ -5116,6 +5154,11 @@
       grid-column: span 8 / span 8;
     }
   }
+  .xl\:grid-cols-2 {
+    @media (width >= 80rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .xl\:grid-cols-4 {
     @media (width >= 80rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

package/dist/workflows.d.ts

@@ -40,6 +40,9 @@ interface WfNodeState {
     /** Input/output token usage, when known. */
     inputTokens?: number;
     outputTokens?: number;
+    /** Agent iteration count (agent.run only) — the number of reasoning/tool
+     *  rounds the agent has taken, surfaced on the node's progress strip. */
+    rounds?: number;
 }
 interface WfNodeData extends Record<string, unknown> {
     /** Headline for the node, e.g. "Run agent". */
@@ -70,8 +73,6 @@ interface WfNodeData extends Record<string, unknown> {
     provider?: string;
     /** Small corner tag, e.g. "×3" for a parallel fan-out. */
     badge?: string;
-    /** Whether this node fans out to branch leaves (renders a right handle). */
-    hasBranches: boolean;
     /** Whether this node is the spine root (no incoming/target handle). */
     isRoot: boolean;
     tone: WfNodeTone;
@@ -84,14 +85,21 @@ interface WfNode {
         x: number;
         y: number;
     };
+    /** Authoritative rendered size (px). The card renders at exactly this box
+     *  (`h-full`/`w-full`) so the layout — which spaces nodes by these dims — is
+     *  collision-free by construction, with no measure-then-reflow pass. */
+    width: number;
+    height: number;
     data: WfNodeData;
 }
+type WfEdgeKind = "spine" | "fork" | "join";
 interface WfEdge {
     id: string;
     source: string;
     target: string;
-    /** "out" for spine edges (bottom handle), "branch" for fan-out (right). */
-    sourceHandle: "out" | "branch";
+    /** Spine = trigger→action→action; fork = fan-out into a branch leaf; join =
+     *  a branch leaf reconverging onto the next spine node. Drives edge styling. */
+    kind: WfEdgeKind;
 }
 interface WfGraph {
     nodes: WfNode[];
@@ -99,21 +107,33 @@ interface WfGraph {
     /** Set when the YAML couldn't be parsed into a renderable graph. */
     error: string | null;
 }
+/** Main-axis flow direction: "LR" (left-to-right, default) suits the wide/short
+ *  run-detail panel; "TB" (top-to-bottom) suits a narrow column. */
+type WfDirection = "LR" | "TB";
 /** Options for {@link buildWorkflowGraph}. */
 interface BuildWorkflowGraphOptions {
     /**
-     * Reserve vertical space for the rows live run state adds to a spine node (the
-     * meta-chip row + the output/error preview), so the RUN view's spine never
-     * overlaps once a node starts or terminates. The static/preview layout (no run
-     * overlay) leaves this off to stay compact. Defaults to `false`.
+     * Reserve space for the rows live run state adds to a node (the meta-chip row +
+     * the output/error preview), so the RUN view never overlaps once a node starts
+     * or terminates. The static/preview layout (no run overlay) leaves this off to
+     * stay compact. Defaults to `false`.
      */
     reserveRunState?: boolean;
+    /** Flow direction. Defaults to "LR". */
+    direction?: WfDirection;
+    /** Override the node dimensions the layout spaces by (and the card renders at).
+     *  Defaults to a fixed width + {@link nodeHeight}. A caller with a different node
+     *  design supplies its own sizing so the layout stays collision-free. */
+    measure?: (data: WfNodeData, withRunState: boolean) => {
+        width: number;
+        height: number;
+    };
 }
 /** Build a positioned graph from a workflow YAML string. Never throws —
  *  malformed YAML or an empty definition returns an `error` the UI can fall
- *  back on (e.g. show the raw YAML while authoring). Pass
- *  `{ reserveRunState: true }` for the run view so the spine leaves room for the
- *  rows live run state adds (see {@link estimateNodeHeight}). */
+ *  back on (e.g. show the raw YAML while authoring). `reserveRunState` leaves
+ *  room for the rows live run state adds (see {@link nodeHeight}); `direction`
+ *  picks the flow axis (default "LR"). */
 declare function buildWorkflowGraph(yaml: string, options?: BuildWorkflowGraphOptions): WfGraph;
 
 interface WorkflowGraphProps {
@@ -121,6 +141,13 @@ interface WorkflowGraphProps {
     yaml: string;
     /** "full" = interactive (pan/zoom/drag + controls); "preview" = static fit. */
     variant?: "full" | "preview";
+    /** 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. The full variant
+     *  exposes a toggle to switch densities; the preview variant is always compact.
+     *  Defaults to `false` (expanded). */
+    defaultCompact?: boolean;
     /** Sizing for the wrapper; the caller controls height. */
     className?: string;
     /**