@parallelworks/ui 0.17.0 → 0.19.0

package/dist/{workflow → graph}/index.js

@@ -1,19 +1,19 @@
+import { c as useRunFile, d as useWorkflowEngine, l as useSlots, r as useNavigation, u as useStrings } from "../chunks/Provider-CDYurraE.js";
 import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, DocumentIcon, ErrorIcon, InfoIcon, LoaderIcon, OpenInNewGraphIcon, WarningIcon } from "../icons.js";
-import { c as useRunFile, l as useSlots, r as useNavigation, u as useStrings } from "../chunks/Provider-DHmZ3v9i.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-n9w7Tkt1.js";
-import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { n as modalPanelClasses, t as BareModal } from "../chunks/BareModal-BqroLbZ5.js";
+import { n as TOOLTIP_ID, o as keyedByContent, r as TooltipInfo } from "../chunks/Tooltip-K5HJr4_p.js";
+import { n as modalPanelClasses, t as BareModal } from "../chunks/BareModal-BtRiQezg.js";
 import { t as Indicator } from "../chunks/Indicator-hBSIxOPK.js";
-import { LogViewer } from "../logviewer/index.js";
+import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
+import { t as LogViewer } from "../chunks/logviewer-BTKuQWzw.js";
+import { n as toAbsHumanDuration } from "../chunks/duration-BOv8Phl8.js";
 import cx from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
-import { buildSubworkflowLogPath, collapseMatrixGroupsInLayout, collectExpansionKeys, computeMatrixAggStatus, detectMatrixGroups, dumpYaml, getAllDeps, getStepLabel, isRunActive, toAbsHumanDuration } from "@parallelworks/workflow-parser";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 import { AnimatePresence, motion } from "framer-motion";
-//#region src/workflow/AnnotationBanner.tsx
+//#region src/graph/AnnotationBanner.tsx
 var typeOrder = {
 	error: 0,
 	warning: 1,
@@ -113,7 +113,7 @@ function AnnotationBanner({ executedJobs }) {
 			]
 		}), expanded && /* @__PURE__ */ jsx("div", {
 			className: "divide-y divide-[var(--theme-border)] max-h-[400px] overflow-y-auto",
-			children: annotations.map((annotation, idx) => {
+			children: keyedByContent(annotations, (a) => a.id ?? `${a.type}:${a.title}:${a.message}`).map(({ key, item: annotation }) => {
 				const config = typeConfig[annotation.type] || typeConfig.notice;
 				const Icon = config.icon;
 				return /* @__PURE__ */ jsxs("div", {
@@ -142,13 +142,13 @@ function AnnotationBanner({ executedJobs }) {
 							})
 						]
 					})]
-				}, idx);
+				}, key);
 			})
 		})]
 	});
 }
 //#endregion
-//#region src/workflow/Collapse.tsx
+//#region src/graph/Collapse.tsx
 function Collapse({ expanded, children, releaseOverflow = true }) {
 	const [overflowVisible, setOverflowVisible] = useState(false);
 	return /* @__PURE__ */ jsx(AnimatePresence, {
@@ -185,7 +185,7 @@ function Collapse({ expanded, children, releaseOverflow = true }) {
 	});
 }
 //#endregion
-//#region src/workflow/Reveal.tsx
+//#region src/graph/Reveal.tsx
 var EASE = "cubic-bezier(0.25, 0.1, 0.25, 1)";
 var ROWS_TRANSITION = `grid-template-rows 200ms ${EASE}`;
 var FULL_TRANSITION = `${ROWS_TRANSITION}, width 200ms ${EASE}`;
@@ -239,20 +239,13 @@ function Reveal({ open, children, growWidth = false, onSettled }) {
 	});
 }
 //#endregion
-//#region src/workflow/JobSummary.tsx
+//#region src/graph/JobSummary.tsx
 function UsesIcon({ uses, subworkflow }) {
 	const navigation = useNavigation();
 	const slots = useSlots();
 	const { jobActions } = useStrings();
 	if (!uses || !slots.workflowIcon) return null;
-	const open = () => {
-		if (uses.startsWith("workflow/")) navigation.toWorkflow(uses.split("/")[1] ?? "");
-		else if (subworkflow.sourceUrl) navigation.openExternal(subworkflow.sourceUrl);
-		else if (uses.startsWith("github/")) {
-			const [ownerRepo, ref] = uses.replace("github/", "").split("@");
-			navigation.openExternal("https://github.com/" + ownerRepo + "/tree/" + ref);
-		} else navigation.toMarketItem(uses.split("/")[1] ?? "");
-	};
+	const open = () => navigation.openStepSource(uses, subworkflow.sourceUrl);
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"aria-label": jobActions.openOriginalWorkflow,
@@ -269,6 +262,7 @@ function UsesIcon({ uses, subworkflow }) {
 }
 function Joblist(inputs) {
 	const { jobActions } = useStrings();
+	const engine = useWorkflowEngine();
 	return inputs.jobNames.map((jobName) => {
 		if (inputs.jobs[jobName]?._matrixGroup) return null;
 		const jobStatus = inputs.jobs[jobName]?.status;
@@ -291,7 +285,8 @@ function Joblist(inputs) {
 				children: /* @__PURE__ */ jsx("div", {
 					className: "flex flex-col gap-y-0.5 mt-0.5",
 					children: (inputs.jobs[jobName]?.steps || []).map((step, i) => {
-						const stepLabel = getStepLabel(step, i);
+						const stepLabel = engine.stepLabel(step, i);
+						const stepKey = `${jobName}:${i}`;
 						const subJobs = step.subworkflow?.jobs;
 						const canExpand = !!inputs.renderSubworkflow && !!subJobs && Object.keys(subJobs).length > 0;
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
@@ -302,7 +297,7 @@ function Joblist(inputs) {
 								className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
 								"data-testid": stepLabel,
 								children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
-							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
+							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment$1, { children: [
 								inputs.onStepLogClick && /* @__PURE__ */ jsx("button", {
 									type: "button",
 									"aria-label": jobActions.openSubworkflowLogs,
@@ -332,7 +327,7 @@ function Joblist(inputs) {
 									children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
 								})
 							] })]
-						}), canExpand && inputs.renderSubworkflow?.(jobName, i)] }, "step-" + jobName + "-" + i);
+						}), canExpand && inputs.renderSubworkflow?.(jobName, i)] }, stepKey);
 					})
 				})
 			})]
@@ -340,14 +335,119 @@ function Joblist(inputs) {
 	});
 }
 //#endregion
-//#region src/workflow/TreeView.tsx
+//#region src/graph/MatrixGroup.tsx
+/** Matrix group item in the summary sidebar. */
+function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "py-1.5",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": isExpanded,
+			onClick: onToggle,
+			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
+			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
+				className: "font-semibold",
+				children: [
+					"Matrix: ",
+					matrixGroup.originaljob,
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-normal text-sm ml-1",
+						children: [
+							"(",
+							matrixGroup.members.length,
+							" jobs)"
+						]
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsx(Reveal, {
+			open: isExpanded,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ml-3 mt-0.5",
+				children: /* @__PURE__ */ jsx(Joblist, {
+					jobs,
+					jobNames: matrixGroup.members,
+					onJobClick,
+					isStepsOpen,
+					onStepClick,
+					onStepLogClick,
+					onSubworkflowIcon,
+					isSubworkflowExpanded,
+					renderSubworkflow,
+					preview
+				})
+			})
+		})]
+	}, "matrix-" + matrixGroup.originaljob);
+}
+/** Matrix group node in the DAG visualization. */
+function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
+	const matrixName = matrixGroup.originaljob;
+	const matrixMembers = matrixGroup.members;
+	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
+	return /* @__PURE__ */ jsxs("div", {
+		id: "node_" + idPrefix + jobNames[0],
+		role: "none",
+		className: "relative m-24",
+		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+		onMouseEnter,
+		onMouseLeave,
+		onFocus: onMouseEnter,
+		onBlur: onMouseLeave,
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("div", {
+			className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
+			style: {
+				opacity: hoveredRelated && !hoveredRelated.has(jobNames[0]) ? .5 : 1,
+				transition: `opacity ${animT}s`
+			},
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": isExpanded,
+				className: "cursor-pointer w-full text-left",
+				onClick: onToggle,
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "font-semibold text-md p-0.5",
+					children: ["Matrix: ", matrixName.length > 20 ? matrixName.slice(0, 20) + "..." : matrixName]
+				}), !isExpanded && /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
+					children: [/* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: statusLabel })]
+				})]
+			}), /* @__PURE__ */ jsx(Reveal, {
+				open: isExpanded,
+				growWidth: true,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "mt-1 border-t border-(--theme-border) pt-1",
+					children: /* @__PURE__ */ jsx(Joblist, {
+						jobs,
+						jobNames: matrixMembers,
+						onJobClick,
+						isStepsOpen,
+						onStepClick,
+						onStepLogClick,
+						onSubworkflowIcon,
+						isSubworkflowExpanded,
+						renderSubworkflow,
+						growWidth: true,
+						preview
+					})
+				})
+			})]
+		})]
+	}, "node_" + jobNames[0]);
+}
+//#endregion
+//#region src/graph/TreeView.tsx
 function getStepDuration(step) {
 	if (!step.startedAt) return "";
-	return toAbsHumanDuration(DateTime.fromISO(step.startedAt), step.completedAt ? DateTime.fromISO(step.completedAt) : DateTime.now());
+	const start = DateTime.fromISO(step.startedAt);
+	const end = step.completedAt ? DateTime.fromISO(step.completedAt) : DateTime.now();
+	return toAbsHumanDuration(start, end);
 }
 function getJobDuration(job) {
 	if (!job.startedAt) return "";
-	return toAbsHumanDuration(DateTime.fromISO(job.startedAt), job.completedAt ? DateTime.fromISO(job.completedAt) : DateTime.now());
+	const start = DateTime.fromISO(job.startedAt);
+	const end = job.completedAt ? DateTime.fromISO(job.completedAt) : DateTime.now();
+	return toAbsHumanDuration(start, end);
 }
 function formatJobLabel(jobName, job) {
 	const matrix = job?._matrix;
@@ -355,7 +455,8 @@ function formatJobLabel(jobName, job) {
 	return (jobName[0].toUpperCase() + jobName.slice(1)).replace(/_/g, " ");
 }
 function InlineLogViewer({ slug, jobName, stepIndex }) {
-	const { data: logs, isLoading, error } = useRunFile(slug, buildSubworkflowLogPath("", jobName, stepIndex), { refreshInterval: 2e3 });
+	const logPath = useWorkflowEngine().stepLogPath("", jobName, stepIndex);
+	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
 	if (isLoading && !logs) return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2 px-5 py-4 text-sm text-[var(--theme-muted-text-color)]",
 		children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: "Loading logs..." })]
@@ -448,10 +549,11 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
 					children: job.steps.map((step, index) => {
 						const stepKey = `${jobName}:${index}`;
+						const isStepExpanded = expandedSteps.has(stepKey);
 						return /* @__PURE__ */ jsx(StepRow, {
 							step,
 							index,
-							isExpanded: expandedSteps.has(stepKey),
+							isExpanded: isStepExpanded,
 							onToggle: () => onStepToggle(stepKey),
 							workflowName,
 							runNumber,
@@ -461,7 +563,7 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 							onJobToggle,
 							expandedSteps,
 							onStepToggle
-						}, index);
+						}, stepKey);
 					})
 				})
 			})
@@ -469,9 +571,10 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 	});
 }
 function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, slug, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth = 0 }) {
+	const engine = useWorkflowEngine();
 	const slots = useSlots();
 	const duration = getStepDuration(step);
-	const label = getStepLabel(step, index);
+	const label = engine.stepLabel(step, index);
 	const isSubworkflow = !!step.subworkflow;
 	const panelId = useId();
 	const subworkflowJobs = step.subworkflow?.jobs ?? null;
@@ -583,10 +686,11 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 						const subJob = subworkflowJobs?.[subJobName];
 						if (!subJob) return null;
 						const subJobKey = `${jobName}:${index}:${subJobName}`;
+						const isSubJobExpanded = expandedJobs.has(subJobKey);
 						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
 							jobName: subJobName,
 							job: subJob,
-							isExpanded: expandedJobs.has(subJobKey),
+							isExpanded: isSubJobExpanded,
 							onToggle: () => onJobToggle(subJobKey),
 							dependencies: subworkflowDependenciesMap[subJobName],
 							slug,
@@ -677,10 +781,11 @@ function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, s
 					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
 					children: job.steps.map((step, index) => {
 						const stepKey = `${nestedSubworkflowPrefix}${jobName}:${index}`;
+						const isStepExpanded = expandedSteps.has(stepKey);
 						return /* @__PURE__ */ jsx(SubworkflowStepRow, {
 							step,
 							index,
-							isExpanded: expandedSteps.has(stepKey),
+							isExpanded: isStepExpanded,
 							onToggle: () => onStepToggle(stepKey),
 							slug,
 							subworkflowPrefix: nestedSubworkflowPrefix,
@@ -690,7 +795,7 @@ function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, s
 							expandedSteps,
 							onStepToggle,
 							depth
-						}, index);
+						}, stepKey);
 					})
 				})
 			})
@@ -698,9 +803,10 @@ function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, s
 	});
 }
 function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkflowPrefix, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth }) {
+	const engine = useWorkflowEngine();
 	const slots = useSlots();
 	const duration = getStepDuration(step);
-	const label = getStepLabel(step, index);
+	const label = engine.stepLabel(step, index);
 	const isSubworkflow = !!step.subworkflow;
 	const panelId = useId();
 	const subworkflowJobs = step.subworkflow?.jobs ?? null;
@@ -813,10 +919,11 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 						const subJob = subworkflowJobs?.[subJobName];
 						if (!subJob) return null;
 						const subJobKey = `${subworkflowPrefix}${jobName}:${index}:${subJobName}`;
+						const isSubJobExpanded = expandedJobs.has(subJobKey);
 						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
 							jobName: subJobName,
 							job: subJob,
-							isExpanded: expandedJobs.has(subJobKey),
+							isExpanded: isSubJobExpanded,
 							onToggle: () => onJobToggle(subJobKey),
 							dependencies: subworkflowDependenciesMap[subJobName],
 							slug,
@@ -836,7 +943,8 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 	] });
 }
 function SubworkflowInlineLogViewer({ slug, subworkflowPrefix, jobName, stepIndex }) {
-	const { data: logs, isLoading, error } = useRunFile(slug, buildSubworkflowLogPath(subworkflowPrefix, jobName, stepIndex), { refreshInterval: 2e3 });
+	const logPath = useWorkflowEngine().stepLogPath(subworkflowPrefix, jobName, stepIndex);
+	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
 	if (isLoading && !logs) return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2 px-5 py-4 text-sm text-[var(--theme-muted-text-color)]",
 		children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: "Loading logs..." })]
@@ -858,6 +966,7 @@ function SubworkflowInlineLogViewer({ slug, subworkflowPrefix, jobName, stepInde
 	});
 }
 function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpandedJobs }) {
+	const engine = useWorkflowEngine();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
 	}, [jobs]);
@@ -924,10 +1033,17 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 			const matrixGroups = {};
 			for (const jobName of visibleJobNames) {
 				const matrix = jobs[jobName]?._matrix;
-				if (matrix?.originaljob) (matrixGroups[matrix.originaljob] ??= {
-					originaljob: matrix.originaljob,
-					members: []
-				}).members.push(jobName);
+				if (matrix?.originaljob) {
+					let group = matrixGroups[matrix.originaljob];
+					if (!group) {
+						group = {
+							originaljob: matrix.originaljob,
+							members: []
+						};
+						matrixGroups[matrix.originaljob] = group;
+					}
+					group.members.push(jobName);
+				}
 			}
 			for (const group of Object.values(matrixGroups)) group.members.sort((a, b) => (jobs[a]?._matrix?.index ?? 0) - (jobs[b]?._matrix?.index ?? 0));
 			const rendered = [];
@@ -940,7 +1056,7 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 					const group = matrixGroups[matrixOrigin];
 					if (!group) continue;
 					const isGroupExpanded = expandedJobs.has(`matrix:${matrixOrigin}`);
-					const { aggStatus } = computeMatrixAggStatus(group.members.map((m) => jobs[m]?.status));
+					const { aggStatus } = engine.matrixStatus(group.members.map((m) => jobs[m]?.status));
 					rendered.push(/* @__PURE__ */ jsxs("div", {
 						className: "border-b border-[var(--theme-border)]",
 						children: [/* @__PURE__ */ jsxs("button", {
@@ -1020,117 +1136,12 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 	});
 }
 //#endregion
-//#region src/workflow/MatrixGroup.tsx
-/** Matrix group item in the summary sidebar. */
-function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "py-1.5",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			onClick: onToggle,
-			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
-			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
-				className: "font-semibold",
-				children: [
-					"Matrix: ",
-					matrixGroup.originaljob,
-					/* @__PURE__ */ jsxs("span", {
-						className: "font-normal text-sm ml-1",
-						children: [
-							"(",
-							matrixGroup.members.length,
-							" jobs)"
-						]
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsx(Reveal, {
-			open: isExpanded,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "ml-3 mt-0.5",
-				children: /* @__PURE__ */ jsx(Joblist, {
-					jobs,
-					jobNames: matrixGroup.members,
-					onJobClick,
-					isStepsOpen,
-					onStepClick,
-					onStepLogClick,
-					onSubworkflowIcon,
-					isSubworkflowExpanded,
-					renderSubworkflow,
-					preview
-				})
-			})
-		})]
-	}, "matrix-" + matrixGroup.originaljob);
-}
-/** Matrix group node in the DAG visualization. */
-function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
-	const matrixName = matrixGroup.originaljob;
-	const matrixMembers = matrixGroup.members;
-	const { aggStatus, statusLabel } = computeMatrixAggStatus(matrixMembers.map((m) => jobs[m]?.status));
-	return /* @__PURE__ */ jsxs("div", {
-		id: "node_" + idPrefix + jobNames[0],
-		role: "none",
-		className: "relative m-24",
-		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
-		onMouseEnter,
-		onMouseLeave,
-		onFocus: onMouseEnter,
-		onBlur: onMouseLeave,
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("div", {
-			className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
-			style: {
-				opacity: hoveredRelated && !hoveredRelated.has(jobNames[0]) ? .5 : 1,
-				transition: `opacity ${animT}s`
-			},
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": isExpanded,
-				className: "cursor-pointer w-full text-left",
-				onClick: onToggle,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "font-semibold text-md p-0.5",
-					children: [
-						"Matrix:",
-						" ",
-						matrixName.length > 20 ? matrixName.slice(0, 20) + "..." : matrixName
-					]
-				}), !isExpanded && /* @__PURE__ */ jsxs("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
-					children: [/* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: statusLabel })]
-				})]
-			}), /* @__PURE__ */ jsx(Reveal, {
-				open: isExpanded,
-				growWidth: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1",
-					children: /* @__PURE__ */ jsx(Joblist, {
-						jobs,
-						jobNames: matrixMembers,
-						onJobClick,
-						isStepsOpen,
-						onStepClick,
-						onStepLogClick,
-						onSubworkflowIcon,
-						isSubworkflowExpanded,
-						renderSubworkflow,
-						growWidth: true,
-						preview
-					})
-				})
-			})]
-		})]
-	}, "node_" + jobNames[0]);
-}
-//#endregion
-//#region src/workflow/types.ts
+//#region src/graph/types.ts
 function isJobRecord(value) {
 	return typeof value === "object" && value !== null;
 }
 //#endregion
-//#region src/workflow/DependencyGraph.tsx
+//#region src/graph/DependencyGraph.tsx
 function ViewToggle({ viewMode, setViewMode }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex border border-[var(--theme-border)] rounded overflow-hidden",
@@ -1235,12 +1246,12 @@ function parsePrefixToPath(prefix) {
 	}
 	return path;
 }
-function computeGraphLayout(jobs, matrixGroups) {
+function computeGraphLayout(engine, jobs, matrixGroups) {
 	const visibleJobs = structuredClone(jobs);
 	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
-	collapseMatrixGroupsInLayout(matrixGroups, visibleJobs);
+	engine.collapseMatrixGroups(matrixGroups, visibleJobs);
 	const allDeps = {};
-	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = getAllDeps(jobName, visibleJobs, allDeps);
+	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = engine.jobDependencies(jobName, visibleJobs, allDeps);
 	const filteredDeps = {};
 	for (const jobName of Object.keys(visibleJobs)) {
 		const needs = visibleJobs[jobName]?.needs;
@@ -1253,19 +1264,19 @@ function computeGraphLayout(jobs, matrixGroups) {
 		}).sort();
 	}
 	const depended_on = {};
-	Object.keys(visibleJobs).map((jobName) => {
+	Object.keys(visibleJobs).forEach((jobName) => {
 		if (filteredDeps[jobName] && Array.isArray(filteredDeps[jobName])) filteredDeps[jobName].forEach((dep) => {
 			if (depended_on[dep]) depended_on[dep].push(jobName);
 			else depended_on[dep] = [jobName];
 		});
 	});
-	Object.keys(visibleJobs).map((jobName) => {
+	Object.keys(visibleJobs).forEach((jobName) => {
 		if (depended_on[jobName]) depended_on[jobName].sort();
 	});
 	const unfinished = structuredClone(visibleJobs);
 	const rootLevel = [];
 	const deps = [rootLevel];
-	Object.keys(visibleJobs).map((jobName) => {
+	Object.keys(visibleJobs).forEach((jobName) => {
 		if (filteredDeps[jobName]?.length === 0) {
 			rootLevel.push(jobName);
 			delete unfinished[jobName];
@@ -1276,7 +1287,7 @@ function computeGraphLayout(jobs, matrixGroups) {
 		const toAppend = [];
 		const unfinishedArr = Object.keys(unfinished);
 		prevLen = unfinishedArr.length;
-		unfinishedArr.map((jobName) => {
+		unfinishedArr.forEach((jobName) => {
 			if ((filteredDeps[jobName] ?? []).every((dep) => !unfinishedArr.includes(dep))) {
 				toAppend.push(jobName);
 				delete unfinished[jobName];
@@ -1285,14 +1296,14 @@ function computeGraphLayout(jobs, matrixGroups) {
 		if (toAppend.length > 0) deps.push(toAppend);
 	} while (prevLen !== Object.keys(unfinished).length);
 	const finalDeps = [];
-	deps.map((col) => {
+	deps.forEach((col) => {
 		const toAppend = [];
 		while (col.length > 0) {
 			const head = col[0];
 			if (head === void 0) break;
 			const grouped = [head];
 			const toRm = [0];
-			col.slice(1).map((jobName, j) => {
+			col.slice(1).forEach((jobName, j) => {
 				if (visibleJobs[head]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
 				const depsA = depended_on[head];
 				const depsB = depended_on[jobName];
@@ -1375,14 +1386,19 @@ function SubworkflowWell({ expanded, onSettled, className, children }) {
 var SUBGRAPH_Z_STEP = 100;
 var FIT_ANIMATION_MS = 300;
 function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflows, toggleSubworkflow, openInNewGraph, setSublogOpen, invalidateConnectors, requestFit, stepsOpen, toggleSteps, matrixOpen, toggleMatrix, onReady }) {
+	const engine = useWorkflowEngine();
 	const wrapperRef = useRef(null);
 	const zBase = depth * SUBGRAPH_Z_STEP;
 	const [hoveredJob, setHoveredJob] = useState(null);
 	const lastHoveredDistancesRef = useRef(null);
 	const maxHoveredDistRef = useRef(0);
 	const retractPathLensRef = useRef(/* @__PURE__ */ new Map());
-	const matrixGroups = useMemo(() => detectMatrixGroups(jobs), [jobs]);
-	const { dependencyCols, directDeps, displayJobs, ancestorDists, descendantDists } = useMemo(() => computeGraphLayout(jobs, matrixGroups), [jobs, matrixGroups]);
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { dependencyCols, directDeps, displayJobs, ancestorDists, descendantDists } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
 	const hoveredDistances = useMemo(() => {
 		if (!hoveredJob) return null;
 		const dist = /* @__PURE__ */ new Map();
@@ -1474,9 +1490,9 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 			const stepStatus = jobs[j]?.steps?.[+s]?.status;
 			if (stepStatus === "skipped" || stepStatus === "skipped-failed") return;
 			if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
-			else setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+			else setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
 		};
-		const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+		const onStepLogClick = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
 		const onSubworkflowIcon = (j, s) => openNew(j, s);
 		const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
 		const renderSubworkflow = (j, s) => {
@@ -1486,7 +1502,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 				expanded: isSubworkflowExpanded(j, s),
 				onSettled: requestFit,
 				className: "my-2 rounded-lg border-4 border-(--theme-border)",
-				children: /* @__PURE__ */ jsx(Subgraph, {
+				children: /* @__PURE__ */ jsx(NestedSubgraph, {
 					jobs: subJobs,
 					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
 					depth: depth + 1,
@@ -1584,6 +1600,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		toggleMatrix,
 		openInNewGraph,
 		setSublogOpen,
+		engine,
 		invalidateConnectors,
 		requestFit
 	]);
@@ -1772,6 +1789,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		})(), hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer]
 	});
 }
+var NestedSubgraph = Subgraph;
 function SidebarWell({ expanded, children }) {
 	return /* @__PURE__ */ jsx(Collapse, {
 		expanded,
@@ -1780,8 +1798,13 @@ function SidebarWell({ expanded, children }) {
 	});
 }
 function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expandedSubworkflows, toggleSubworkflow, matrixOpen, toggleMatrix, openInNewGraph, setSublogOpen }) {
-	const matrixGroups = useMemo(() => detectMatrixGroups(jobs), [jobs]);
-	const { displayJobs } = useMemo(() => computeGraphLayout(jobs, matrixGroups), [jobs, matrixGroups]);
+	const engine = useWorkflowEngine();
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { displayJobs } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
 	const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
 	const onJobClick = (j) => {
 		const status = jobs[j]?.status ?? displayJobs[j]?.status;
@@ -1794,9 +1817,9 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		const stepStatus = jobs[j]?.steps?.[+s]?.status;
 		if (stepStatus === "skipped" || stepStatus === "skipped-failed") return;
 		if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
-		else setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+		else setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
 	};
-	const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+	const onStepLogClick = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
 	const onSubworkflowIcon = (j, s) => openNew(j, s);
 	const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
 	const renderSubworkflow = (j, s) => {
@@ -1823,13 +1846,14 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		});
 	};
 	const seenMatrixGroups = /* @__PURE__ */ new Set();
-	return /* @__PURE__ */ jsx(Fragment, { children: Object.keys(jobs).flatMap((jobName) => {
+	const orderedKeys = Object.keys(jobs).flatMap((jobName) => {
 		const originaljob = jobs[jobName]?._matrix?.originaljob;
 		if (!originaljob) return [jobName];
 		if (seenMatrixGroups.has(originaljob)) return [];
 		seenMatrixGroups.add(originaljob);
 		return [originaljob];
-	}).map((jobName) => {
+	});
+	return /* @__PURE__ */ jsx(Fragment$1, { children: orderedKeys.map((jobName) => {
 		const mg = displayJobs[jobName]?._matrixGroup;
 		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
 			matrixGroup: mg,
@@ -1885,6 +1909,7 @@ function walkJobPath(root, path) {
 	return isJobRecord(cursor) ? cursor : {};
 }
 function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder, viewMode = "dag", setViewMode }) {
+	const engine = useWorkflowEngine();
 	const animT = .125;
 	const minScale = .2;
 	const maxScale = .6;
@@ -2039,8 +2064,12 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	const sublogIsStep = jobAndStep.length > 1;
 	const logName = jobAndStep.length > 1 ? "Job: " + (jobAndStep[0][0].toUpperCase() + jobAndStep[0].slice(1)).replace(/_/g, " ") + " \nStep: " + (jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]?.name || "Step " + jobAndStep[1]) : "";
 	const sublogIsSubworkflow = jobAndStep.length > 1 && jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]?.subworkflow;
-	const matrixGroups = useMemo(() => detectMatrixGroups(jobs), [jobs]);
-	const { dependencyCols } = useMemo(() => computeGraphLayout(jobs, matrixGroups), [jobs, matrixGroups]);
+	const matrixGroups = useMemo(() => engine.matrixGroups(jobs), [engine, jobs]);
+	const { dependencyCols } = useMemo(() => computeGraphLayout(engine, jobs, matrixGroups), [
+		engine,
+		jobs,
+		matrixGroups
+	]);
 	const fitGraph = useCallback((animationMs = 0) => {
 		const container = containerRef.current;
 		const content = graphContentRef.current;
@@ -2104,11 +2133,15 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		for (let i = 0; i < nestingDepth - 1; i++) parentPrefix += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]?.toString()}/`;
 		const lastJob = String(currentPath[5 * (nestingDepth - 1)] ?? "");
 		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
-		generalLogPath = buildSubworkflowLogPath(parentPrefix, lastJob, lastStep);
+		generalLogPath = engine.stepLogPath(parentPrefix, lastJob, lastStep);
 	}
 	const missingLogText = sublogIsSubworkflow ? "Subworkflows generally have no logs/scripts at this level.\nClick on the \"Open in new graph\" icon on the subworkflow step to open the subworkflow graph." : sublogsError ? dagStrings.logLoadFailed : (sublogOpen === generalLogPath ? dagStrings.statusReason(run.statusReason) : void 0) ?? dagStrings.noLogFound;
-	const currentSublog = sublogOpen === "" ? "" : preview ? dumpYaml(jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]) : sublogsError || !sublogs ? missingLogText : sublogs;
-	const expansionKeys = useMemo(() => collectExpansionKeys(jobs, pathAppend), [jobs, pathAppend]);
+	const currentSublog = sublogOpen === "" ? "" : preview ? engine.toYaml(jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]) : sublogsError || !sublogs ? missingLogText : sublogs;
+	const expansionKeys = useMemo(() => engine.expansionKeys(jobs, pathAppend), [
+		engine,
+		jobs,
+		pathAppend
+	]);
 	const hasExpandable = expansionKeys.subworkflowKeys.length > 0 || expansionKeys.matrixKeys.length > 0;
 	const allExpanded = hasExpandable && expansionKeys.subworkflowKeys.every((k) => expandedSubworkflows.has(k)) && expansionKeys.matrixKeys.every((k) => matrixOpen.has(k));
 	const toggleExpandAll = () => {
@@ -2132,13 +2165,14 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		let step = parseInt(sublogSplit[sublogSplit.length - 2].slice(5), 10);
 		const jobArr = Object.keys(jobs);
 		let idx = jobArr.indexOf(job);
-		if (backward) if (0 < step) step -= 1;
-		else {
-			if (idx === 0) idx = jobArr.length;
-			job = jobArr[idx - 1] ?? "";
-			step = (jobs[job]?.steps.length ?? 0) - 1;
-		}
-		else if ((jobs[job]?.steps.length ?? 0) - 1 > step) step += 1;
+		if (backward) {
+			if (0 < step) step -= 1;
+			else {
+				if (idx === 0) idx = jobArr.length;
+				job = jobArr[idx - 1] ?? "";
+				step = (jobs[job]?.steps.length ?? 0) - 1;
+			}
+		} else if ((jobs[job]?.steps.length ?? 0) - 1 > step) step += 1;
 		else {
 			if (idx === jobArr.length - 1) idx = -1;
 			job = jobArr[idx + 1] ?? "";
@@ -2181,8 +2215,9 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	]);
 	if (!Array.isArray(dependencyCols) || dependencyCols.length === 0 || !Array.isArray(dependencyCols[0]) || dependencyCols[0].length === 0 || !Array.isArray(dependencyCols[0][0]) || dependencyCols[0][0].length === 0) return;
 	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : now;
-	const runtime = toAbsHumanDuration(startDt, run.completedAt ? DateTime.fromISO(run.completedAt) : now);
-	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
+	const endDt = run.completedAt ? DateTime.fromISO(run.completedAt) : now;
+	const runtime = toAbsHumanDuration(startDt, endDt);
+	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "btn btn-neutral",
@@ -2222,7 +2257,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 						children: slots.runSessions({
 							runId: run.id ?? "",
 							runNumber,
-							runActive: isRunActive(run.status),
+							runActive: engine.isRunActive(run.status),
 							links: run.links
 						})
 					}),
@@ -2348,7 +2383,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 							onTransform: invalidateConnectors,
 							onWheel: invalidateConnectors,
 							onZoom: invalidateConnectors,
-							children: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+							children: () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
 								className: "absolute z-10 top-2 right-2 flex flex-col items-end gap-y-1",
 								children: [
 									hasExpandable && /* @__PURE__ */ jsx("button", {