@tangle-network/sandbox-ui 0.72.0 → 0.74.0

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

@@ -15,19 +15,21 @@ 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 = 22;
+var HEADER_ROW = 30;
 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 PREVIEW_ROW = 36;
+var PROGRESS_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 (withRunState) h += PREVIEW_ROW + PROGRESS_ROW;
   if (data.provider) h += TEXT_ROW;
   return h;
 }
@@ -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

@@ -697,6 +697,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 +775,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 +1087,6 @@
   .w-\[88\%\] {
     width: 88%;
   }
-  .w-\[240px\] {
-    width: 240px;
-  }
   .w-\[268px\] {
     width: 268px;
   }
@@ -1114,6 +1126,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[1000px\] {
+    width: 1000px;
+  }
   .w-\[min\(88vw\,24rem\)\] {
     width: min(88vw, 24rem);
   }
@@ -1994,12 +2009,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);
   }
@@ -5116,6 +5125,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));
@@ -5991,6 +6005,91 @@
 [data-sandbox-theme="vault"] .glow-primary:hover {
   box-shadow: none;
 }
+.tangle-prose {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+.tangle-prose :where(p, ul, ol) {
+  margin: 0;
+}
+.tangle-prose > * + * {
+  margin-top: 0.85em;
+}
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: var(--text-primary);
+}
+.tangle-prose h1 {
+  font-size: 1.4em;
+}
+.tangle-prose h2 {
+  font-size: 1.25em;
+}
+.tangle-prose h3 {
+  font-size: 1.1em;
+}
+.tangle-prose ul, .tangle-prose ol {
+  padding-left: 1.4em;
+}
+.tangle-prose li {
+  margin: 0.25em 0;
+}
+.tangle-prose li > ul, .tangle-prose li > ol {
+  margin-top: 0.25em;
+}
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: var(--text-muted);
+}
+.tangle-prose hr {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: 1.2em 0;
+}
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre {
+  margin: 0.85em 0;
+}
+.tangle-prose table {
+  width: 100%;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+}
+.tangle-prose thead {
+  border-bottom: 1px solid var(--border-default);
+}
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/styles.css

@@ -697,6 +697,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 +775,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 +1087,6 @@
   .w-\[88\%\] {
     width: 88%;
   }
-  .w-\[240px\] {
-    width: 240px;
-  }
   .w-\[268px\] {
     width: 268px;
   }
@@ -1114,6 +1126,9 @@
   .w-\[900px\] {
     width: 900px;
   }
+  .w-\[1000px\] {
+    width: 1000px;
+  }
   .w-\[min\(88vw\,24rem\)\] {
     width: min(88vw, 24rem);
   }
@@ -1994,12 +2009,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);
   }
@@ -5116,6 +5125,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));
@@ -5991,6 +6005,91 @@
 [data-sandbox-theme="vault"] .glow-primary:hover {
   box-shadow: none;
 }
+.tangle-prose {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+.tangle-prose :where(p, ul, ol) {
+  margin: 0;
+}
+.tangle-prose > * + * {
+  margin-top: 0.85em;
+}
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: var(--text-primary);
+}
+.tangle-prose h1 {
+  font-size: 1.4em;
+}
+.tangle-prose h2 {
+  font-size: 1.25em;
+}
+.tangle-prose h3 {
+  font-size: 1.1em;
+}
+.tangle-prose ul, .tangle-prose ol {
+  padding-left: 1.4em;
+}
+.tangle-prose li {
+  margin: 0.25em 0;
+}
+.tangle-prose li > ul, .tangle-prose li > ol {
+  margin-top: 0.25em;
+}
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: var(--text-muted);
+}
+.tangle-prose hr {
+  border: 0;
+  border-top: 1px solid var(--border-subtle);
+  margin: 1.2em 0;
+}
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre {
+  margin: 0.85em 0;
+}
+.tangle-prose table {
+  width: 100%;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+}
+.tangle-prose thead {
+  border-bottom: 1px solid var(--border-default);
+}
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

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;
     /**