@tangle-network/sandbox-ui 0.134.12 → 0.136.0

package/dist/globals.css

@@ -283,6 +283,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!fixed {
+    position: fixed !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -298,6 +301,9 @@
   .sticky {
     position: sticky;
   }
+  .\!inset-3 {
+    inset: calc(var(--spacing) * 3) !important;
+  }
   .inset-0 {
     inset: 0px;
   }
@@ -433,6 +439,9 @@
   .\!z-10 {
     z-index: 10 !important;
   }
+  .\!z-40 {
+    z-index: 40 !important;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -712,6 +721,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 6;
   }
+  .\!hidden {
+    display: none !important;
+  }
   .block {
     display: block;
   }
@@ -826,6 +838,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .\!h-auto {
+    height: auto !important;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -940,6 +955,9 @@
   .h-\[34rem\] {
     height: 34rem;
   }
+  .h-\[36rem\] {
+    height: 36rem;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -1186,6 +1204,9 @@
   .\!w-2\.5 {
     width: calc(var(--spacing) * 2.5) !important;
   }
+  .\!w-auto {
+    width: auto !important;
+  }
   .w-0 {
     width: 0px;
   }
@@ -1348,6 +1369,9 @@
   .w-\[268px\] {
     width: 268px;
   }
+  .w-\[358px\] {
+    width: 358px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1381,6 +1405,9 @@
   .w-\[1000px\] {
     width: 1000px;
   }
+  .w-\[1100px\] {
+    width: 1100px;
+  }
   .w-\[calc\(100vw-32px\)\] {
     width: calc(100vw - 32px);
   }
@@ -2976,6 +3003,12 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
+  .bg-primary\/\[0\.04\] {
+    background-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--primary)) 4%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -3963,6 +3996,12 @@
       color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
+  .text-primary\/80 {
+    color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+    }
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -4065,6 +4104,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5572,6 +5615,9 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
     }
+    .sm\:\!block {
+      display: block !important;
+    }
     .sm\:flex {
       display: flex;
     }

package/dist/{node-output-CHlf3tni.js → node-output-fuk0NV0V.js}

@@ -767,10 +767,56 @@ function withConfig(base, cfg) {
 * neither — dropping the envelope would leave the two indistinguishable in the
 * detail view, which is the one place that promises every field.
 */
+/**
+* Title a step by the id its author gave it, when that names it better than
+* its kind does. A graph of a real workflow is mostly the same few kinds — a
+* factory is nine "GitHub" steps and a handful of decisions whose own titles
+* are run-time templates — so titling by kind makes every node look like its
+* neighbour. The author's id ("open-pr", "ship-gate", "monitor-note") is the
+* one name that says what each is FOR.
+*
+* An agent keeps its profile's role ("Factory reviewer"), which already says
+* that; it takes the id only when it has no readable role. A decision keeps a
+* title its author wrote as plain text, and takes the id when that title is a
+* template the graph would show with its `${...}` unresolved. Every other
+* kind takes the id, and what the kind does moves to the subtitle, where the
+* provider's logo still marks it.
+*/
+/** An id the editor minted rather than an author chose: the kind's own slug
+*  (`agent-run`, `integration-invoke-2`) or a positional `step-N`. Titling by
+*  one would only restate the kind, worse. */
+function isMachineStepId(id, kind) {
+	if (/^step-\d+$/.test(id)) return true;
+	if (!kind) return false;
+	const slug = kind.toLowerCase().replace(/[^a-z0-9]+/g, "-");
+	return id === slug || new RegExp(`^${slug}-\\d+$`).test(id);
+}
+function titledByStep(base, rec) {
+	const id = str(rec.id);
+	if (!id || isMachineStepId(id, base.kind)) return base;
+	const role = humanizeIdentifier(id);
+	if (base.kind === "agent.run") return base.title === "AI Agent" ? {
+		...base,
+		title: role
+	} : base;
+	if (base.kind === "decision") {
+		const authored = str(asRecord(rec.decision).title);
+		return authored && !authored.includes("${") ? base : {
+			...base,
+			title: role
+		};
+	}
+	const what = [base.title, base.subtitle].filter(Boolean).join(" · ");
+	return {
+		...base,
+		title: role,
+		...what ? { subtitle: what } : {}
+	};
+}
 function describeAction(action) {
 	const rec = asRecord(action);
 	const kind = actionKind(rec);
-	const base = describeActionBase(action);
+	const base = titledByStep(describeActionBase(action), rec);
 	const config = toJsonSafe(asRecord(kind ? rec[kind] : {}));
 	for (const key of CONTROL_FLOW_KEYS) if (rec[key] !== void 0) config[key] = toJsonSafe(rec[key]);
 	return Object.keys(config).length > 0 ? {
@@ -1199,13 +1245,18 @@ function buildWorkflowGraph(yaml, options) {
 		addNode(id, data, rank, reserveRunState);
 		if (!declared) 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 ? [asRecord(rec.foreach).do].filter(Boolean) : [];
+		const children = "parallel" in rec ? Array.isArray(asRecord(rec.parallel).branches) ? asRecord(rec.parallel).branches : [] : "foreach" in rec ? Array.from({ length: asRecord(rec.foreach).do ? Math.max(1, options?.itemCounts?.[i] ?? 1) : 0 }, () => asRecord(rec.foreach).do) : [];
 		if (children.length > 0) {
 			const branchRank = rank + 1;
 			const branchIds = [];
+			const items = "foreach" in rec && children.length > 1;
 			children.forEach((child, j) => {
 				const cid = branchNodeId(i, j);
-				addNode(cid, describeAction(child), branchRank, reserveRunState);
+				const data = describeAction(child);
+				addNode(cid, items ? {
+					...data,
+					subtitle: `Item ${j + 1} of ${children.length}`
+				} : data, branchRank, reserveRunState);
 				addEdge(id, cid, "fork");
 				branchIds.push(cid);
 				branchLeafIds.add(cid);
@@ -1228,7 +1279,8 @@ function buildWorkflowGraph(yaml, options) {
 			};
 			addEdge(spec.from, spec.to, "spine", spec.whenLabel);
 		}
-		const rootward = new Set(edges.map((e) => e.target));
+		const loopBack = classifyBackEdges(logical.map((n) => n.id), edges);
+		const rootward = new Set(edges.filter((e) => !loopBack.has(e.id)).map((e) => e.target));
 		for (const n of logical) {
 			if (triggerNodeIndex(n.id) !== null) continue;
 			if (rootward.has(n.id)) continue;
@@ -1252,7 +1304,11 @@ function buildWorkflowGraph(yaml, options) {
 	return {
 		nodes: (options?.wrap && direction === "LR" && !labelled ? layoutSerpentine(logical, edges, rankSep, geo.crossSep) : null) ?? layoutLayers(logical, direction, rankSep, geo.crossSep),
 		edges,
-		error: null
+		error: null,
+		spacing: {
+			rank: rankSep,
+			cross: geo.crossSep
+		}
 	};
 }
 //#endregion
@@ -1328,7 +1384,8 @@ const STATUS_COLOR = {
 	running: STATUS_RUNNING,
 	waiting: STATUS_WAITING,
 	succeeded: STATUS_DONE,
-	failed: STATUS_FAILED
+	failed: STATUS_FAILED,
+	skipped: STATUS_QUEUED
 };
 /** An edge reads by the status of the node it points AT — with the 2026-10-09
 *  fix: SETTLED edges go quiet. A succeeded run used to paint every edge green
@@ -1346,7 +1403,8 @@ const STATUS_LABEL = {
 	running: "Running",
 	waiting: "Waiting on you",
 	succeeded: "Done",
-	failed: "Failed"
+	failed: "Failed",
+	skipped: "Not taken"
 };
 /** @deprecated `StatusPill` now renders ui's StatusPill from `STATUS_TONE`;
 *  kept for consumers that styled their own pill from it.
@@ -1378,6 +1436,11 @@ const STATUS_PILL = {
 		background: "var(--surface-danger-bg)",
 		color: "var(--surface-danger-text)",
 		borderColor: "var(--surface-danger-border)"
+	},
+	skipped: {
+		background: "transparent",
+		color: "hsl(var(--muted-foreground))",
+		borderColor: "color-mix(in srgb, hsl(var(--muted-foreground)) 28%, transparent)"
 	}
 };
 /** The card's border + ring once a node has live run state. The emphasis
@@ -1403,6 +1466,11 @@ function statusBorder(status) {
 			};
 		}
 		case "queued": return { borderColor: "hsl(var(--border))" };
+		case "skipped": return {
+			borderColor: "hsl(var(--muted-foreground) / 0.45)",
+			borderStyle: "dashed",
+			opacity: .5
+		};
 		case "succeeded": return {
 			borderColor: RESTING_BORDER,
 			boxShadow: RESTING_SHADOW
@@ -1560,7 +1628,8 @@ const STATUS_TONE = {
 	running: "running",
 	waiting: "warning",
 	succeeded: "neutral",
-	failed: "danger"
+	failed: "danger",
+	skipped: "neutral"
 };
 /** The status pill in a card's header — the one place the run state is spelled
 *  out in words. ui's `StatusPill`, so a node's state carries the same glyph,
@@ -1642,6 +1711,7 @@ function emptySlotLabel(status) {
 		case "queued": return "Not run yet";
 		case "succeeded": return "No output";
 		case "failed": return "No error reported";
+		case "skipped": return "Not taken this run";
 		default: return;
 	}
 }

package/dist/styles.css

@@ -283,6 +283,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!fixed {
+    position: fixed !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -298,6 +301,9 @@
   .sticky {
     position: sticky;
   }
+  .\!inset-3 {
+    inset: calc(var(--spacing) * 3) !important;
+  }
   .inset-0 {
     inset: 0px;
   }
@@ -433,6 +439,9 @@
   .\!z-10 {
     z-index: 10 !important;
   }
+  .\!z-40 {
+    z-index: 40 !important;
+  }
   .z-0 {
     z-index: 0;
   }
@@ -712,6 +721,9 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 6;
   }
+  .\!hidden {
+    display: none !important;
+  }
   .block {
     display: block;
   }
@@ -826,6 +838,9 @@
   .\!h-2\.5 {
     height: calc(var(--spacing) * 2.5) !important;
   }
+  .\!h-auto {
+    height: auto !important;
+  }
   .h-0\.5 {
     height: calc(var(--spacing) * 0.5);
   }
@@ -940,6 +955,9 @@
   .h-\[34rem\] {
     height: 34rem;
   }
+  .h-\[36rem\] {
+    height: 36rem;
+  }
   .h-\[72\%\] {
     height: 72%;
   }
@@ -1186,6 +1204,9 @@
   .\!w-2\.5 {
     width: calc(var(--spacing) * 2.5) !important;
   }
+  .\!w-auto {
+    width: auto !important;
+  }
   .w-0 {
     width: 0px;
   }
@@ -1348,6 +1369,9 @@
   .w-\[268px\] {
     width: 268px;
   }
+  .w-\[358px\] {
+    width: 358px;
+  }
   .w-\[360px\] {
     width: 360px;
   }
@@ -1381,6 +1405,9 @@
   .w-\[1000px\] {
     width: 1000px;
   }
+  .w-\[1100px\] {
+    width: 1100px;
+  }
   .w-\[calc\(100vw-32px\)\] {
     width: calc(100vw - 32px);
   }
@@ -2976,6 +3003,12 @@
       background-color: color-mix(in oklab, hsl(var(--primary)) 20%, transparent);
     }
   }
+  .bg-primary\/\[0\.04\] {
+    background-color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, hsl(var(--primary)) 4%, transparent);
+    }
+  }
   .bg-red-500 {
     background-color: var(--color-red-500);
   }
@@ -3963,6 +3996,12 @@
       color: color-mix(in oklab, hsl(var(--primary)) 70%, transparent);
     }
   }
+  .text-primary\/80 {
+    color: hsl(var(--primary));
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, hsl(var(--primary)) 80%, transparent);
+    }
+  }
   .text-red-400 {
     color: var(--color-red-400);
   }
@@ -4065,6 +4104,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-2xl {
+    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -5572,6 +5615,9 @@
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 3;
     }
+    .sm\:\!block {
+      display: block !important;
+    }
     .sm\:flex {
       display: flex;
     }

package/dist/workflows.d.ts

@@ -24,7 +24,11 @@ type WfNodeTone = "trigger" | "structural" | "action";
  * working when in fact it is blocked on THEM — so it gets its own colour, its own
  * label, and a progress bar that does not move.
  */
-type WfNodeStatus = "queued" | "running" | "waiting" | "succeeded" | "failed";
+type WfNodeStatus = "queued" | "running" | "waiting" | "succeeded" | "failed" |
+/** The run went another way: a guard or `when` left this step out. Drawn
+ *  dimmed and dashed, so the path the run took stands out from the one it
+ *  did not, and never confused with a step that is still to come. */
+"skipped";
 /**
  * Live RUN state for one node, supplied by the host (keyed by node id) and
  * merged onto {@link WfNodeData.state} at render time. Absent ⇒ the graph shows
@@ -256,6 +260,15 @@ interface WfGraph {
   edges: WfEdge[];
   /** Set when the YAML couldn't be parsed into a renderable graph. */
   error: string | null;
+  /** The separators this layout pitched its layers and lanes at, so a second
+   *  layouter (see `elk-layout.ts`) keeps the same density. Absent on an error. */
+  spacing?: WfSpacing;
+}
+/** Gaps between layers (`rank`, along the flow) and between nodes stacked in
+ *  one layer (`cross`). */
+interface WfSpacing {
+  rank: number;
+  cross: number;
 }
 /** Main-axis flow direction: "LR" (left-to-right, default) suits the wide/short
  *  run-detail panel; "TB" (top-to-bottom) suits a narrow column. */
@@ -307,6 +320,13 @@ interface BuildWorkflowGraphOptions {
    * measured afterwards. Defaults to `false`.
    */
   reserveEdgeInsert?: boolean;
+  /**
+   * How many items a settled `foreach` ran, by its action index. A foreach
+   * is one template step until it has run; then each item is a node of its
+   * own, so a fan-out over fourteen issues reads as fourteen lanes with their
+   * own status and cost rather than one tile with a count.
+   */
+  itemCounts?: Readonly<Record<number, 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
@@ -322,8 +342,9 @@ 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. */
+  /** Flow direction: "LR" reads left-to-right — best for the wide/short
+   *  run-detail panel; "TB" is a vertical column. Unset, it follows the
+   *  canvas: "LR" in a panel, "TB" in a portrait canvas such as a phone's. */
   direction?: WfDirection;
   /**
    * Start collapsed (compact icon tiles) rather than expanded.

package/dist/workflows.js

@@ -1,5 +1,5 @@
 import { i as modelBrandFor, t as ModelBrandStack } from "./model-brand-BSr9on8C.js";
-import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-CHlf3tni.js";
+import { A as triggerNodeIndex, D as buildWorkflowGraph, E as branchNodeId, F as parseActionPath, I as shortModel, N as actionPathLabel, P as humanizeIdentifier, T as actionNodeId, a as NodeMark, d as STATUS_LABEL, f as STATUS_PILL, h as StatusPill, i as KIND_ICON, k as triggerNodeId, n as classifyOutput, p as STATUS_TONE, r as condenseText, t as NodeOutputBody, u as STATUS_COLOR, w as TRIGGER_NODE_ID } from "./node-output-fuk0NV0V.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Component, Suspense, lazy, useMemo, useState } from "react";
 //#region src/workflows/WorkflowGraphLazy.tsx
@@ -30,7 +30,7 @@ function retryImport(factory, retries = 2, delayMs = 350) {
 	});
 }
 function lazyWorkflowGraph() {
-	return lazy(() => retryImport(() => import("./WorkflowGraph-Dz6aA2Mp.js").then((m) => ({ default: m.WorkflowGraph }))));
+	return lazy(() => retryImport(() => import("./WorkflowGraph-Cfm0Ub4F.js").then((m) => ({ default: m.WorkflowGraph }))));
 }
 var GraphErrorBoundary = class extends Component {
 	state = { hasError: false };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.134.12",
+  "version": "0.136.0",
   "license": "MIT",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
@@ -146,6 +146,7 @@
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.0.0",
+    "elkjs": "^0.12.0",
     "pdfjs-dist": ">=6.0.0 <7.0.0",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
@@ -191,6 +192,9 @@
     "@xyflow/react": {
       "optional": true
     },
+    "elkjs": {
+      "optional": true
+    },
     "pdfjs-dist": {
       "optional": true
     },
@@ -244,6 +248,7 @@
     "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "@xyflow/react": "^12.12.0",
+    "elkjs": "0.12.0",
     "jsdom": "^30.1.1",
     "pdfjs-dist": "^6.4.299",
     "playwright": "^1.63.0",