@parallelworks/ui 0.18.0 → 0.19.1

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

@@ -1,1136 +1,25 @@
-import { c as useRunFile, l as useSlots, r as useNavigation, u as useStrings } from "../chunks/Provider-Ghua9PkN.js";
-import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, DocumentIcon, ErrorIcon, InfoIcon, LoaderIcon, OpenInNewGraphIcon, WarningIcon } from "../icons.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-Crxo_eU_.js";
-import { t as Loader } from "../chunks/Loader-BXoXTZGc.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 { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
+import { ArrowLeftIcon, ArrowRightIcon, DocumentIcon } from "../icons.js";
+import { TooltipInfo } from "../components/Tooltip.js";
+import { BareModal, modalPanelClasses } from "../components/BareModal.js";
+import { Indicator } from "../components/Indicator.js";
+import Loader from "../components/Loader.js";
+import { LogViewer } from "../logviewer/LogViewer.js";
+import { toAbsHumanDuration } from "../duration.js";
+import { AnnotationBanner } from "./AnnotationBanner.js";
+import { Collapse } from "./Collapse.js";
+import { Reveal } from "./Reveal.js";
+import { Joblist } from "./JobSummary.js";
+import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
+import TreeView from "./TreeView.js";
+import { isJobRecord } from "./types.js";
 import cx from "classnames";
-import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, 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
-var typeOrder = {
-	error: 0,
-	warning: 1,
-	notice: 2
-};
-var typeConfig = {
-	error: {
-		icon: ErrorIcon,
-		label: "Error",
-		accentClass: "text-red-500",
-		bgClass: "bg-red-500/5 dark:bg-red-500/10",
-		countBg: "bg-red-500/15 text-red-700 dark:text-red-400"
-	},
-	warning: {
-		icon: WarningIcon,
-		label: "Warning",
-		accentClass: "text-yellow-500",
-		bgClass: "bg-yellow-500/5 dark:bg-yellow-500/10",
-		countBg: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
-	},
-	notice: {
-		icon: InfoIcon,
-		label: "Notice",
-		accentClass: "text-blue-500",
-		bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
-		countBg: "bg-blue-500/15 text-blue-700 dark:text-blue-400"
-	}
-};
-function collectAnnotations(executedJobs, parentPath) {
-	const annotations = [];
-	for (const [jobName, job] of Object.entries(executedJobs)) {
-		const fullJobName = parentPath ? `${parentPath} > ${jobName}` : jobName;
-		const steps = job?.steps;
-		if (!Array.isArray(steps)) continue;
-		for (let stepIndex = 0; stepIndex < steps.length; stepIndex++) {
-			const step = steps[stepIndex];
-			const stepAnnotations = step?.annotations;
-			if (Array.isArray(stepAnnotations)) {
-				for (const annotation of stepAnnotations) if (annotation?.message) annotations.push({
-					type: annotation.type || "notice",
-					message: annotation.message,
-					title: annotation.title,
-					file: annotation.file,
-					line: annotation.line,
-					jobName: fullJobName,
-					stepName: step?.name,
-					stepIndex
-				});
-			}
-			const subJobs = step?.subworkflow?.jobs;
-			if (subJobs && typeof subJobs === "object") annotations.push(...collectAnnotations(subJobs, fullJobName));
-		}
-	}
-	annotations.sort((a, b) => (typeOrder[a.type] ?? 2) - (typeOrder[b.type] ?? 2));
-	return annotations;
-}
-function AnnotationBanner({ executedJobs }) {
-	const [expanded, setExpanded] = useState(false);
-	if (!executedJobs) return null;
-	const annotations = collectAnnotations(executedJobs);
-	if (annotations.length === 0) return null;
-	const counts = {
-		error: 0,
-		warning: 0,
-		notice: 0
-	};
-	for (const a of annotations) counts[a.type]++;
-	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: () => setExpanded((prev) => !prev),
-			className: cx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
-			children: [
-				/* @__PURE__ */ jsx(ChevronIcon, { className: "w-3.5 h-3.5 text-[var(--theme-muted-text-color)] shrink-0" }),
-				/* @__PURE__ */ jsx("span", {
-					className: "text-sm font-medium text-[var(--theme-panel-color)]",
-					children: "Annotations"
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex items-center gap-1.5",
-					children: [
-						"error",
-						"warning",
-						"notice"
-					].map((type) => {
-						if (!counts[type]) return null;
-						const config = typeConfig[type];
-						const Icon = config.icon;
-						return /* @__PURE__ */ jsxs("span", {
-							className: cx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
-							children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), counts[type]]
-						}, type);
-					})
-				})
-			]
-		}), expanded && /* @__PURE__ */ jsx("div", {
-			className: "divide-y divide-[var(--theme-border)] max-h-[400px] overflow-y-auto",
-			children: annotations.map((annotation, idx) => {
-				const config = typeConfig[annotation.type] || typeConfig.notice;
-				const Icon = config.icon;
-				return /* @__PURE__ */ jsxs("div", {
-					className: cx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
-					children: [/* @__PURE__ */ jsx(Icon, { className: cx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
-						className: "flex-1 min-w-0",
-						children: [
-							/* @__PURE__ */ jsxs("span", {
-								className: cx("font-medium", config.accentClass),
-								children: [annotation.title || config.label, ":"]
-							}),
-							" ",
-							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--theme-panel-color)]",
-								children: annotation.message
-							}),
-							/* @__PURE__ */ jsxs("span", {
-								className: "text-[var(--theme-muted-text-color)] ml-2 text-xs",
-								children: [
-									"in ",
-									annotation.jobName,
-									" →",
-									" ",
-									annotation.stepName || `step ${annotation.stepIndex}`
-								]
-							})
-						]
-					})]
-				}, idx);
-			})
-		})]
-	});
-}
-//#endregion
-//#region src/workflow/Collapse.tsx
-function Collapse({ expanded, children, releaseOverflow = true }) {
-	const [overflowVisible, setOverflowVisible] = useState(false);
-	return /* @__PURE__ */ jsx(AnimatePresence, {
-		initial: false,
-		children: expanded && /* @__PURE__ */ jsx(motion.div, {
-			initial: {
-				height: 0,
-				opacity: 0
-			},
-			animate: {
-				height: "auto",
-				opacity: 1
-			},
-			exit: {
-				height: 0,
-				opacity: 0
-			},
-			transition: {
-				duration: .2,
-				ease: [
-					.25,
-					.1,
-					.25,
-					1
-				]
-			},
-			style: { overflow: overflowVisible ? "visible" : "hidden" },
-			onAnimationStart: () => setOverflowVisible(false),
-			onAnimationComplete: () => {
-				if (expanded && releaseOverflow) setOverflowVisible(true);
-			},
-			children
-		}, "collapse")
-	});
-}
-//#endregion
-//#region src/workflow/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}`;
-function Reveal({ open, children, growWidth = false, onSettled }) {
-	const contentRef = useRef(null);
-	const [width, setWidth] = useState(0);
-	const [prevOpen, setPrevOpen] = useState(open);
-	const [clipped, setClipped] = useState(!open);
-	const [toggling, setToggling] = useState(false);
-	const [renderChildren, setRenderChildren] = useState(open);
-	if (open && !renderChildren) setRenderChildren(true);
-	if (prevOpen !== open) {
-		setPrevOpen(open);
-		setToggling(true);
-		setClipped(true);
-	}
-	useLayoutEffect(() => {
-		if (!growWidth || !renderChildren) return;
-		const el = contentRef.current;
-		if (!el) return;
-		const measure = () => setWidth(el.offsetWidth);
-		measure();
-		const ro = new ResizeObserver(measure);
-		ro.observe(el);
-		return () => ro.disconnect();
-	}, [growWidth, renderChildren]);
-	return /* @__PURE__ */ jsx("div", {
-		className: "grid",
-		style: {
-			gridTemplateRows: open ? "1fr" : "0fr",
-			overflow: clipped ? "hidden" : "visible",
-			...growWidth ? {
-				width: open ? width : 0,
-				transition: toggling ? FULL_TRANSITION : ROWS_TRANSITION
-			} : { transition: ROWS_TRANSITION }
-		},
-		onTransitionEnd: (e) => {
-			if (e.target === e.currentTarget && e.propertyName === "grid-template-rows") {
-				setToggling(false);
-				setClipped(!open);
-				if (!open) setRenderChildren(false);
-				onSettled?.();
-			}
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			ref: contentRef,
-			className: "min-h-0",
-			...growWidth ? { style: { width: "max-content" } } : {},
-			children: renderChildren ? children : null
-		})
-	});
-}
-//#endregion
-//#region src/workflow/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] ?? "");
-	};
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": jobActions.openOriginalWorkflow,
-		"data-tooltip-id": TOOLTIP_ID,
-		"data-tooltip-content": jobActions.openOriginalWorkflow,
-		onClick: open,
-		className: "cursor-pointer",
-		children: slots.workflowIcon({
-			image: subworkflow.image,
-			type: subworkflow.type,
-			className: "ml-1.5 h-[1.2em] w-[1.2em]"
-		})
-	});
-}
-function Joblist(inputs) {
-	const { jobActions } = useStrings();
-	return inputs.jobNames.map((jobName) => {
-		if (inputs.jobs[jobName]?._matrixGroup) return null;
-		const jobStatus = inputs.jobs[jobName]?.status;
-		const matrixMeta = inputs.jobs[jobName]?._matrix;
-		const jobLabel = matrixMeta?.originaljob ? `${matrixMeta.originaljob[0].toUpperCase() + matrixMeta.originaljob.slice(1)} (${(matrixMeta.index ?? 0) + 1}/${matrixMeta.totalingroup ?? "?"})` : (jobName[0].toUpperCase() + jobName.slice(1)).replace(/_/g, " ");
-		return /* @__PURE__ */ jsxs("div", {
-			className: "py-1 select-none",
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": inputs.isStepsOpen(jobName),
-				onClick: () => inputs.onJobClick(jobName),
-				className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-				children: [!inputs.preview && /* @__PURE__ */ jsx(Indicator, { status: inputs.jobs[jobName]?.status }), /* @__PURE__ */ jsx("div", {
-					className: "font-medium",
-					children: jobLabel
-				})]
-			}), /* @__PURE__ */ jsx(Reveal, {
-				open: inputs.isStepsOpen(jobName),
-				growWidth: inputs.growWidth ?? false,
-				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 subJobs = step.subworkflow?.jobs;
-						const canExpand = !!inputs.renderSubworkflow && !!subJobs && Object.keys(subJobs).length > 0;
-						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-							children: [/* @__PURE__ */ jsxs("button", {
-								type: "button",
-								onClick: () => inputs.onStepClick(jobName, i),
-								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$1, { children: [
-								inputs.onStepLogClick && /* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": jobActions.openSubworkflowLogs,
-									"data-tooltip-id": "global-tooltip",
-									"data-tooltip-content": jobActions.openSubworkflowLogs,
-									onClick: (e) => {
-										e.stopPropagation();
-										inputs.onStepLogClick?.(jobName, i);
-									},
-									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(DocumentIcon, { className: "w-[1.2em] h-[1.2em]" })
-								}),
-								/* @__PURE__ */ jsx(UsesIcon, {
-									uses: step.uses,
-									subworkflow: step.subworkflow
-								}),
-								inputs.onSubworkflowIcon && /* @__PURE__ */ jsx("button", {
-									type: "button",
-									"aria-label": jobActions.openInNewGraph,
-									"data-tooltip-id": "global-tooltip",
-									"data-tooltip-content": jobActions.openInNewGraph,
-									onClick: (e) => {
-										e.stopPropagation();
-										inputs.onSubworkflowIcon?.(jobName, i);
-									},
-									className: "link ml-1",
-									children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
-								})
-							] })]
-						}), canExpand && inputs.renderSubworkflow?.(jobName, i)] }, "step-" + jobName + "-" + i);
-					})
-				})
-			})]
-		}, "job-" + jobName);
-	});
-}
-//#endregion
-//#region src/workflow/TreeView.tsx
-function getStepDuration(step) {
-	if (!step.startedAt) return "";
-	return toAbsHumanDuration(DateTime.fromISO(step.startedAt), step.completedAt ? DateTime.fromISO(step.completedAt) : DateTime.now());
-}
-function getJobDuration(job) {
-	if (!job.startedAt) return "";
-	return toAbsHumanDuration(DateTime.fromISO(job.startedAt), job.completedAt ? DateTime.fromISO(job.completedAt) : DateTime.now());
-}
-function formatJobLabel(jobName, job) {
-	const matrix = job?._matrix;
-	if (matrix?.originaljob) return `${matrix.originaljob[0].toUpperCase() + matrix.originaljob.slice(1)} (${(matrix.index ?? 0) + 1}/${matrix.totalingroup ?? "?"})`;
-	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 });
-	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..." })]
-	});
-	if (error || !logs) return /* @__PURE__ */ jsx("div", {
-		className: "px-5 py-4 text-sm text-[var(--theme-muted-text-color)] italic",
-		children: "No logs available"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-[var(--theme-border)] ",
-		children: /* @__PURE__ */ jsx(LogViewer, {
-			log: logs,
-			width: "100%",
-			height: "unset",
-			inline: true,
-			contentClassName: "bg-[var(--theme-app-bg)]",
-			enableWorkflowCommands: true
-		})
-	});
-}
-function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName, runNumber, slug, expandedJobs, onJobToggle, expandedSteps, onStepToggle }) {
-	const hasSteps = job.steps && job.steps.length > 0;
-	const duration = getJobDuration(job);
-	const panelId = useId();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "border-b border-[var(--theme-border)] last:border-b-0",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			"aria-controls": hasSteps ? panelId : void 0,
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx(motion.div, {
-					animate: { rotate: isExpanded ? 90 : 0 },
-					transition: { duration: .15 },
-					className: cx("flex-shrink-0", hasSteps ? "text-[var(--theme-muted-text-color)]" : "invisible"),
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", isExpanded && "text-[var(--theme-element)]") })
-				}),
-				/* @__PURE__ */ jsx(Indicator, { status: job.status }),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1 min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-mono text-sm text-[var(--theme-app)] truncate",
-						children: formatJobLabel(jobName, job)
-					}), dependencies && dependencies.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-[10px] text-[var(--theme-muted-text-color)]",
-							children: "depends on:"
-						}), dependencies.map((dep) => /* @__PURE__ */ jsx("span", {
-							className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]",
-							children: formatJobLabel(dep)
-						}, dep))]
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
-				})
-			]
-		}), /* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && hasSteps && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
-					children: job.steps.map((step, index) => {
-						const stepKey = `${jobName}:${index}`;
-						return /* @__PURE__ */ jsx(StepRow, {
-							step,
-							index,
-							isExpanded: expandedSteps.has(stepKey),
-							onToggle: () => onStepToggle(stepKey),
-							workflowName,
-							runNumber,
-							slug,
-							jobName,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle
-						}, index);
-					})
-				})
-			})
-		})]
-	});
-}
-function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, slug, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth = 0 }) {
-	const slots = useSlots();
-	const duration = getStepDuration(step);
-	const label = getStepLabel(step, index);
-	const isSubworkflow = !!step.subworkflow;
-	const panelId = useId();
-	const subworkflowJobs = step.subworkflow?.jobs ?? null;
-	const subworkflowJobNames = subworkflowJobs ? Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false) : [];
-	const subworkflowDependenciesMap = useMemo(() => {
-		if (!subworkflowJobs) return {};
-		const map = {};
-		for (const subJobName of subworkflowJobNames) {
-			const job = subworkflowJobs[subJobName];
-			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[subJobName] = job.needs;
-		}
-		return map;
-	}, [subworkflowJobs, subworkflowJobNames]);
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			"aria-controls": panelId,
-			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx(motion.div, {
-					animate: { rotate: isExpanded ? 90 : 0 },
-					transition: { duration: .15 },
-					className: "flex-shrink-0 text-[var(--theme-muted-text-color)]",
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", isExpanded && "text-[var(--theme-element)]") })
-				}),
-				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
-				isSubworkflow && slots.workflowIcon?.({
-					image: step.subworkflow?.image,
-					type: step.subworkflow?.type,
-					className: "h-4 w-4 flex-shrink-0"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-sm text-[var(--theme-app)] truncate flex-1",
-					children: [label, isSubworkflow && /* @__PURE__ */ jsx("span", {
-						className: "ml-2 text-xs text-[var(--theme-muted-text-color)]",
-						children: "(subworkflow)"
-					})]
-				}),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && !isSubworkflow && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx(InlineLogViewer, {
-					slug,
-					jobName,
-					stepIndex: index
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && isSubworkflow && subworkflowJobNames.length > 0 && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
-					children: subworkflowJobNames.map((subJobName) => {
-						const subJob = subworkflowJobs?.[subJobName];
-						if (!subJob) return null;
-						const subJobKey = `${jobName}:${index}:${subJobName}`;
-						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
-							jobName: subJobName,
-							job: subJob,
-							isExpanded: expandedJobs.has(subJobKey),
-							onToggle: () => onJobToggle(subJobKey),
-							dependencies: subworkflowDependenciesMap[subJobName],
-							slug,
-							parentJobName: jobName,
-							parentStepIndex: index,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle,
-							depth: depth + 1
-						}, subJobName);
-					})
-				})
-			})
-		})
-	] });
-}
-function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, slug, parentJobName, parentStepIndex, subworkflowPrefix, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth }) {
-	const hasSteps = job.steps && job.steps.length > 0;
-	const duration = getJobDuration(job);
-	const nestedSubworkflowPrefix = `${subworkflowPrefix || ""}subworkflows/${parentJobName}/step_${parentStepIndex}/`;
-	const panelId = useId();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "border-b border-[var(--theme-border)] last:border-b-0",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			"aria-controls": hasSteps ? panelId : void 0,
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors w-full text-left", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx(motion.div, {
-					animate: { rotate: isExpanded ? 90 : 0 },
-					transition: { duration: .15 },
-					className: cx("flex-shrink-0", hasSteps ? "text-[var(--theme-muted-text-color)]" : "invisible"),
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", isExpanded && "text-[var(--theme-element)]") })
-				}),
-				/* @__PURE__ */ jsx(Indicator, { status: job.status }),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex flex-col gap-1 min-w-0 flex-1",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "font-mono text-sm text-[var(--theme-app)] truncate",
-						children: formatJobLabel(jobName, job)
-					}), dependencies && dependencies.length > 0 && /* @__PURE__ */ jsxs("div", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-[10px] text-[var(--theme-muted-text-color)]",
-							children: "depends on:"
-						}), dependencies.map((dep) => /* @__PURE__ */ jsx("span", {
-							className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--theme-muted-panel-bg)] text-[var(--theme-muted-text-color)]",
-							children: formatJobLabel(dep)
-						}, dep))]
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", { className: "flex-1" }),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
-				})
-			]
-		}), /* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && hasSteps && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
-					children: job.steps.map((step, index) => {
-						const stepKey = `${nestedSubworkflowPrefix}${jobName}:${index}`;
-						return /* @__PURE__ */ jsx(SubworkflowStepRow, {
-							step,
-							index,
-							isExpanded: expandedSteps.has(stepKey),
-							onToggle: () => onStepToggle(stepKey),
-							slug,
-							subworkflowPrefix: nestedSubworkflowPrefix,
-							jobName,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle,
-							depth
-						}, index);
-					})
-				})
-			})
-		})]
-	});
-}
-function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkflowPrefix, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth }) {
-	const slots = useSlots();
-	const duration = getStepDuration(step);
-	const label = getStepLabel(step, index);
-	const isSubworkflow = !!step.subworkflow;
-	const panelId = useId();
-	const subworkflowJobs = step.subworkflow?.jobs ?? null;
-	const subworkflowJobNames = subworkflowJobs ? Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false) : [];
-	const subworkflowDependenciesMap = useMemo(() => {
-		if (!subworkflowJobs) return {};
-		const map = {};
-		for (const subJobName of subworkflowJobNames) {
-			const job = subworkflowJobs[subJobName];
-			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[subJobName] = job.needs;
-		}
-		return map;
-	}, [subworkflowJobs, subworkflowJobNames]);
-	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			"aria-controls": panelId,
-			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors w-full text-left", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
-			onClick: onToggle,
-			children: [
-				/* @__PURE__ */ jsx(motion.div, {
-					animate: { rotate: isExpanded ? 90 : 0 },
-					transition: { duration: .15 },
-					className: "flex-shrink-0 text-[var(--theme-muted-text-color)]",
-					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", isExpanded && "text-[var(--theme-element)]") })
-				}),
-				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
-				isSubworkflow && slots.workflowIcon?.({
-					image: step.subworkflow?.image,
-					type: step.subworkflow?.type,
-					className: "h-4 w-4 flex-shrink-0"
-				}),
-				/* @__PURE__ */ jsxs("span", {
-					className: "font-mono text-sm text-[var(--theme-app)] truncate flex-1",
-					children: [label, isSubworkflow && /* @__PURE__ */ jsx("span", {
-						className: "ml-2 text-xs text-[var(--theme-muted-text-color)]",
-						children: "(subworkflow)"
-					})]
-				}),
-				duration && /* @__PURE__ */ jsx("span", {
-					className: "font-mono text-xs text-[var(--theme-muted-text-color)] flex-shrink-0",
-					children: duration
-				})
-			]
-		}),
-		/* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && !isSubworkflow && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx(SubworkflowInlineLogViewer, {
-					slug,
-					subworkflowPrefix,
-					jobName,
-					stepIndex: index
-				})
-			})
-		}),
-		/* @__PURE__ */ jsx(AnimatePresence, {
-			initial: false,
-			children: isExpanded && isSubworkflow && subworkflowJobNames.length > 0 && /* @__PURE__ */ jsx(motion.div, {
-				initial: {
-					height: 0,
-					opacity: 0
-				},
-				animate: {
-					height: "auto",
-					opacity: 1
-				},
-				exit: {
-					height: 0,
-					opacity: 0
-				},
-				transition: {
-					duration: .2,
-					ease: [
-						.25,
-						.1,
-						.25,
-						1
-					]
-				},
-				className: "overflow-hidden",
-				id: panelId,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
-					children: subworkflowJobNames.map((subJobName) => {
-						const subJob = subworkflowJobs?.[subJobName];
-						if (!subJob) return null;
-						const subJobKey = `${subworkflowPrefix}${jobName}:${index}:${subJobName}`;
-						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
-							jobName: subJobName,
-							job: subJob,
-							isExpanded: expandedJobs.has(subJobKey),
-							onToggle: () => onJobToggle(subJobKey),
-							dependencies: subworkflowDependenciesMap[subJobName],
-							slug,
-							parentJobName: jobName,
-							parentStepIndex: index,
-							subworkflowPrefix,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle,
-							depth: depth + 1
-						}, subJobName);
-					})
-				})
-			})
-		})
-	] });
-}
-function SubworkflowInlineLogViewer({ slug, subworkflowPrefix, jobName, stepIndex }) {
-	const { data: logs, isLoading, error } = useRunFile(slug, buildSubworkflowLogPath(subworkflowPrefix, jobName, stepIndex), { 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..." })]
-	});
-	if (error || !logs) return /* @__PURE__ */ jsx("div", {
-		className: "px-5 py-4 text-sm text-[var(--theme-muted-text-color)] italic",
-		children: "No logs available"
-	});
-	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-[var(--theme-border)]",
-		children: /* @__PURE__ */ jsx(LogViewer, {
-			log: logs,
-			width: "100%",
-			height: "unset",
-			inline: true,
-			contentClassName: "bg-[var(--theme-app-bg)]",
-			enableWorkflowCommands: true
-		})
-	});
-}
-function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpandedJobs }) {
-	const visibleJobNames = useMemo(() => {
-		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
-	}, [jobs]);
-	const [expandedSteps, setExpandedSteps] = useState(/* @__PURE__ */ new Set());
-	const [expandedSubworkflowJobs, setExpandedSubworkflowJobs] = useState(/* @__PURE__ */ new Set());
-	const toggleJob = useCallback((jobName) => {
-		const newExpanded = new Set(expandedJobs);
-		if (newExpanded.has(jobName)) newExpanded.delete(jobName);
-		else {
-			const status = jobs[jobName]?.status;
-			if (status === "skipped" || status === "skipped-failed") return;
-			newExpanded.add(jobName);
-		}
-		setExpandedJobs(newExpanded);
-	}, [
-		expandedJobs,
-		setExpandedJobs,
-		jobs
-	]);
-	const toggleSubworkflowJob = useCallback((jobKey) => {
-		setExpandedSubworkflowJobs((prev) => {
-			const newSet = new Set(prev);
-			if (newSet.has(jobKey)) newSet.delete(jobKey);
-			else newSet.add(jobKey);
-			return newSet;
-		});
-	}, []);
-	const toggleStep = useCallback((stepKey) => {
-		setExpandedSteps((prev) => {
-			const newSet = new Set(prev);
-			if (newSet.has(stepKey)) newSet.delete(stepKey);
-			else newSet.add(stepKey);
-			return newSet;
-		});
-	}, []);
-	const expandAll = useCallback(() => {
-		setExpandedJobs(new Set(visibleJobNames));
-	}, [visibleJobNames, setExpandedJobs]);
-	const collapseAll = useCallback(() => {
-		setExpandedJobs(/* @__PURE__ */ new Set());
-		setExpandedSteps(/* @__PURE__ */ new Set());
-		setExpandedSubworkflowJobs(/* @__PURE__ */ new Set());
-	}, [setExpandedJobs]);
-	const allExpanded = expandedJobs.size === visibleJobNames.length;
-	const dependenciesMap = useMemo(() => {
-		const map = {};
-		for (const jobName of visibleJobNames) {
-			const job = jobs[jobName];
-			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[jobName] = job.needs;
-		}
-		return map;
-	}, [jobs, visibleJobNames]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "flex justify-end px-4 py-2 border-b border-[var(--theme-border)]",
-			children: /* @__PURE__ */ jsx("button", {
-				type: "button",
-				onClick: allExpanded ? collapseAll : expandAll,
-				className: "text-xs font-mono text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] transition-colors px-3 py-1.5 border border-[var(--theme-border)] rounded",
-				children: allExpanded ? "Collapse all" : "Expand all"
-			})
-		}), /* @__PURE__ */ jsx("div", { children: (() => {
-			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);
-			}
-			for (const group of Object.values(matrixGroups)) group.members.sort((a, b) => (jobs[a]?._matrix?.index ?? 0) - (jobs[b]?._matrix?.index ?? 0));
-			const rendered = [];
-			const seenMatrixGroups = /* @__PURE__ */ new Set();
-			for (const jobName of visibleJobNames) {
-				const matrixOrigin = jobs[jobName]?._matrix?.originaljob;
-				if (matrixOrigin) {
-					if (seenMatrixGroups.has(matrixOrigin)) continue;
-					seenMatrixGroups.add(matrixOrigin);
-					const group = matrixGroups[matrixOrigin];
-					if (!group) continue;
-					const isGroupExpanded = expandedJobs.has(`matrix:${matrixOrigin}`);
-					const { aggStatus } = computeMatrixAggStatus(group.members.map((m) => jobs[m]?.status));
-					rendered.push(/* @__PURE__ */ jsxs("div", {
-						className: "border-b border-[var(--theme-border)]",
-						children: [/* @__PURE__ */ jsxs("button", {
-							type: "button",
-							"aria-expanded": isGroupExpanded,
-							"aria-controls": `matrix-panel-${matrixOrigin}`,
-							className: "flex items-center gap-3 px-5 py-3 cursor-pointer transition-colors w-full text-left",
-							onClick: () => toggleJob(`matrix:${matrixOrigin}`),
-							children: [
-								/* @__PURE__ */ jsx(motion.div, {
-									animate: { rotate: isGroupExpanded ? 90 : 0 },
-									transition: { duration: .15 },
-									className: "flex-shrink-0 text-[var(--theme-muted-text-color)]",
-									children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: cx("w-4 h-4", isGroupExpanded && "text-[var(--theme-element)]") })
-								}),
-								/* @__PURE__ */ jsx(Indicator, { status: aggStatus }),
-								/* @__PURE__ */ jsxs("span", {
-									className: "font-mono text-sm text-[var(--theme-app)]",
-									children: [
-										"Matrix: ",
-										matrixOrigin,
-										" (",
-										group.members.length,
-										" jobs)"
-									]
-								})
-							]
-						}), /* @__PURE__ */ jsx(AnimatePresence, { children: isGroupExpanded && /* @__PURE__ */ jsx(motion.div, {
-							initial: {
-								height: 0,
-								opacity: 0
-							},
-							animate: {
-								height: "auto",
-								opacity: 1
-							},
-							exit: {
-								height: 0,
-								opacity: 0
-							},
-							transition: { duration: .15 },
-							className: "overflow-hidden pl-4",
-							id: `matrix-panel-${matrixOrigin}`,
-							children: group.members.map((memberName) => /* @__PURE__ */ jsx(JobRow, {
-								jobName: memberName,
-								job: jobs[memberName],
-								isExpanded: expandedJobs.has(memberName),
-								onToggle: () => toggleJob(memberName),
-								dependencies: dependenciesMap[memberName],
-								workflowName,
-								runNumber,
-								slug,
-								expandedJobs: expandedSubworkflowJobs,
-								onJobToggle: toggleSubworkflowJob,
-								expandedSteps,
-								onStepToggle: toggleStep
-							}, memberName))
-						}) })]
-					}, `matrix-${matrixOrigin}`));
-				} else rendered.push(/* @__PURE__ */ jsx(JobRow, {
-					jobName,
-					job: jobs[jobName],
-					isExpanded: expandedJobs.has(jobName),
-					onToggle: () => toggleJob(jobName),
-					dependencies: dependenciesMap[jobName],
-					workflowName,
-					runNumber,
-					slug,
-					expandedJobs: expandedSubworkflowJobs,
-					onJobToggle: toggleSubworkflowJob,
-					expandedSteps,
-					onStepToggle: toggleStep
-				}, jobName));
-			}
-			return rendered;
-		})() })]
-	});
-}
-//#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
-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 +124,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 +142,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 +165,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 +174,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 +264,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 +368,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 +380,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 +478,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		toggleMatrix,
 		openInNewGraph,
 		setSublogOpen,
+		engine,
 		invalidateConnectors,
 		requestFit
 	]);
@@ -1772,6 +667,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 +676,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 +695,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 +724,14 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		});
 	};
 	const seenMatrixGroups = /* @__PURE__ */ new Set();
-	return /* @__PURE__ */ jsx(Fragment$1, { 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 +787,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 +942,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 +1011,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 +1043,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,7 +1093,8 @@ 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 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",
@@ -2222,7 +1135,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
 						})
 					}),
@@ -2482,4 +1395,4 @@ function DependencyGraphPreview(inputs) {
 	});
 }
 //#endregion
-export { DependencyGraph, DependencyGraphPreview };
+export { DependencyGraphPreview, DependencyGraph as default };