@parallelworks/ui 0.1.0 → 0.3.0

package/dist/workflow/index.js

@@ -0,0 +1,2331 @@
+import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, DocumentIcon, ErrorIcon, InfoIcon, LoaderIcon, OpenInNewGraphIcon, WarningIcon } from "../icons.js";
+import { c as useStrings, o as useRunFile, r as useNavigation, s as useSlots } from "../chunks/Provider-DvVvScTQ.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
+import { t as Loader } from "../chunks/Loader-DQiZ75fa.js";
+import { t as Modal } from "../chunks/Modal-sOUEwebV.js";
+import { t as Indicator } from "../chunks/Indicator-hBSIxOPK.js";
+import { LogViewer } from "../logviewer/index.js";
+import cx from "classnames";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { buildSubworkflowLogPath, collapseMatrixGroupsInLayout, collectExpansionKeys, computeMatrixAggStatus, detectMatrixGroups, dumpYaml, getAllDeps, getStepLabel, isRunActive, toAbsHumanDuration } from "@parallelworks/workflow-parser";
+import { DateTime } from "luxon";
+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 (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("div", {
+		"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("div", {
+				onClick: () => inputs.onJobClick(jobName),
+				className: cx("flex items-center gap-x-1.5", 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("div", {
+								onClick: () => inputs.onStepClick(jobName, i),
+								className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center"),
+								"data-testid": stepLabel,
+								children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
+							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { 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);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-b border-[var(--theme-border)] last:border-b-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center gap-3 px-5 py-3 transition-colors", 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",
+				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 subworkflowJobs = isSubworkflow ? 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("div", {
+			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors", 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",
+				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",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
+					children: subworkflowJobNames.map((subJobName) => {
+						const subJobKey = `${jobName}:${index}:${subJobName}`;
+						const isSubJobExpanded = expandedJobs.has(subJobKey);
+						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
+							jobName: subJobName,
+							job: subworkflowJobs[subJobName],
+							isExpanded: isSubJobExpanded,
+							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}/`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "border-b border-[var(--theme-border)] last:border-b-0",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cx("flex items-center gap-3 px-5 py-3 transition-colors", 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",
+				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 subworkflowJobs = isSubworkflow ? 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("div", {
+			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors", 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",
+				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",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
+					children: subworkflowJobNames.map((subJobName) => {
+						const subJobKey = `${subworkflowPrefix}${jobName}:${index}:${subJobName}`;
+						const isSubJobExpanded = expandedJobs.has(subJobKey);
+						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
+							jobName: subJobName,
+							job: subworkflowJobs[subJobName],
+							isExpanded: isSubJobExpanded,
+							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) {
+					if (!matrixGroups[matrix.originaljob]) matrixGroups[matrix.originaljob] = {
+						originaljob: matrix.originaljob,
+						members: []
+					};
+					matrixGroups[matrix.originaljob].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];
+					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("div", {
+							className: "flex items-center gap-3 px-5 py-3 cursor-pointer transition-colors",
+							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",
+							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("div", {
+			onClick: onToggle,
+			className: "cursor-pointer flex items-center gap-x-1.5",
+			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],
+		className: "relative m-24",
+		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+		onMouseEnter,
+		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("div", {
+				className: "cursor-pointer",
+				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/DependencyGraph.tsx
+function ViewToggle({ viewMode, setViewMode }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex border border-[var(--theme-border)] rounded overflow-hidden",
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setViewMode("dag"),
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: "DAG"
+		}), /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => setViewMode("tree"),
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: "Tree"
+		})]
+	});
+}
+var addCleanupSteps = ({ jobs }) => {
+	const clonedJobs = structuredClone(jobs);
+	for (const job in jobs) {
+		if (Array.isArray(jobs[job].steps)) jobs[job].steps.slice().reverse().forEach((step, index) => {
+			if (!step.cleanup) return;
+			const linkedName = step.name ? step.name : `Step ${jobs[job].steps.length - index - 1}`;
+			const newStep = {
+				...step,
+				name: `POST ${linkedName}`,
+				run: step.cleanup,
+				linkedStep: `${jobs[job].steps.length - index - 1}`
+			};
+			delete newStep.cleanup;
+			delete clonedJobs[job].steps[index].cleanup;
+			clonedJobs[job].steps.push(newStep);
+		});
+		if (Array.isArray(jobs[job].cleanup)) {
+			jobs[job].cleanup.slice().reverse().forEach((step, index) => {
+				if (!step.cleanup) return;
+				const linkedName = step.name ? step.name : `Cleanup ${jobs[job].cleanup.length - index - 1}`;
+				const newStep = {
+					...step,
+					name: `POST ${linkedName}`,
+					run: step.cleanup,
+					linkedStep: `${jobs[job].cleanup.length - index - 1 + clonedJobs[job].steps.length}`
+				};
+				delete newStep.cleanup;
+				delete clonedJobs[job].cleanup[index].cleanup;
+				clonedJobs[job].cleanup.push(newStep);
+			});
+			for (let i = 0; i < clonedJobs[job].cleanup.length; i++) clonedJobs[job].cleanup[i].linkedStep = ".";
+			clonedJobs[job].steps = [...clonedJobs[job].steps, ...clonedJobs[job].cleanup];
+			delete clonedJobs[job].cleanup;
+		}
+	}
+	return clonedJobs;
+};
+function offsetWithin(el, ancestor) {
+	let x = 0;
+	let y = 0;
+	let cur = el;
+	while (cur && cur !== ancestor) {
+		x += cur.offsetLeft;
+		y += cur.offsetTop;
+		cur = cur.offsetParent;
+	}
+	return {
+		x,
+		y
+	};
+}
+function parsePrefixToPath(prefix) {
+	const parts = prefix.split("/").filter(Boolean);
+	const path = [];
+	for (let i = 0; i + 2 < parts.length; i += 3) if (parts[i] === "subworkflows" && parts[i + 1] && parts[i + 2]?.startsWith("step_")) path.push(parts[i + 1], "steps", Number(parts[i + 2].slice(5)), "subworkflow", "jobs");
+	return path;
+}
+function computeGraphLayout(jobs, matrixGroups) {
+	const visibleJobs = structuredClone(jobs);
+	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName].if === false) delete visibleJobs[jobName];
+	collapseMatrixGroupsInLayout(matrixGroups, visibleJobs);
+	const allDeps = {};
+	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = getAllDeps(jobName, visibleJobs, allDeps);
+	const filteredDeps = {};
+	for (const jobName of Object.keys(visibleJobs)) {
+		const oldNeeds = visibleJobs[jobName]?.needs && Array.isArray(visibleJobs[jobName].needs) ? visibleJobs[jobName].needs : [];
+		filteredDeps[jobName] = oldNeeds.filter((dep) => {
+			return !oldNeeds.some((other) => {
+				if (other === dep) return false;
+				return allDeps[other].has(dep);
+			});
+		}).sort();
+	}
+	const depended_on = {};
+	Object.keys(visibleJobs).map((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) => {
+		if (depended_on[jobName]) depended_on[jobName].sort();
+	});
+	const unfinished = structuredClone(visibleJobs);
+	const deps = [[]];
+	Object.keys(visibleJobs).map((jobName) => {
+		if (filteredDeps[jobName].length === 0) {
+			deps[0].push(jobName);
+			delete unfinished[jobName];
+		}
+	});
+	let prevLen;
+	do {
+		const toAppend = [];
+		const unfinishedArr = Object.keys(unfinished);
+		prevLen = unfinishedArr.length;
+		unfinishedArr.map((jobName) => {
+			if (filteredDeps[jobName].every((dep) => !unfinishedArr.includes(dep))) {
+				toAppend.push(jobName);
+				delete unfinished[jobName];
+			}
+		});
+		if (toAppend.length > 0) deps.push(toAppend);
+	} while (prevLen !== Object.keys(unfinished).length);
+	const finalDeps = [];
+	deps.map((col) => {
+		const toAppend = [];
+		while (col.length > 0) {
+			const grouped = [col[0]];
+			const toRm = [0];
+			col.slice(1).map((jobName, j) => {
+				if (visibleJobs[col[0]]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
+				const depsA = depended_on[col[0]];
+				const depsB = depended_on[jobName];
+				const depsA2 = filteredDeps[col[0]];
+				const depsB2 = filteredDeps[jobName];
+				if (!depsA && !depsB || depsA && depsB && depsA.length === depsB.length) {
+					if (!depsA2 && !depsB2 || depsA2 && depsB2 && depsA2.length === depsB2.length) {
+						if ((!depsA || depsA.every((dep, i) => dep === depsB[i])) && (!depsA2 || depsA2.every((dep, i) => dep === depsB2[i]))) {
+							grouped.push(jobName);
+							toRm.push(j + 1);
+						}
+					}
+				}
+			});
+			col.splice(0, col.length, ...col.filter((_, i) => !toRm.includes(i)));
+			toAppend.push(grouped);
+		}
+		finalDeps.push(toAppend);
+	});
+	while (finalDeps.length > 0 && (finalDeps[0].length === 0 || finalDeps[0][0].length === 0)) {
+		if (finalDeps[0].length === 0) finalDeps.splice(0, 1);
+		while (finalDeps.length > 0 && finalDeps[0].length > 0 && finalDeps[0][0].length === 0) finalDeps[0].splice(0, 1);
+	}
+	const ancestorDists = {};
+	const descendantDists = {};
+	const jobNames = Object.keys(visibleJobs);
+	const reverseDeps = {};
+	for (const [job, depList] of Object.entries(filteredDeps)) for (const dep of depList) {
+		if (!reverseDeps[dep]) reverseDeps[dep] = [];
+		reverseDeps[dep].push(job);
+	}
+	for (const start of jobNames) {
+		const aDist = /* @__PURE__ */ new Map();
+		const q1 = [[start, 0]];
+		while (q1.length > 0) {
+			const [job, d] = q1.shift();
+			for (const dep of filteredDeps[job] ?? []) if (!aDist.has(dep)) {
+				aDist.set(dep, d + 1);
+				q1.push([dep, d + 1]);
+			}
+		}
+		ancestorDists[start] = aDist;
+		const dDist = /* @__PURE__ */ new Map();
+		const q2 = [[start, 0]];
+		while (q2.length > 0) {
+			const [job, d] = q2.shift();
+			for (const child of reverseDeps[job] ?? []) if (!dDist.has(child)) {
+				dDist.set(child, d + 1);
+				q2.push([child, d + 1]);
+			}
+		}
+		descendantDists[start] = dDist;
+	}
+	return {
+		dependencyCols: finalDeps,
+		directDeps: filteredDeps,
+		displayJobs: visibleJobs,
+		ancestorDists,
+		descendantDists
+	};
+}
+function SubworkflowWell({ expanded, onSettled, className, children }) {
+	return /* @__PURE__ */ jsx(Reveal, {
+		open: expanded,
+		growWidth: true,
+		onSettled,
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			style: { zoom: .8 },
+			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 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 hoveredDistances = useMemo(() => {
+		if (!hoveredJob) return null;
+		const dist = /* @__PURE__ */ new Map();
+		dist.set(hoveredJob, 0);
+		const ancestors = ancestorDists[hoveredJob];
+		if (ancestors) for (const [k, v] of ancestors) dist.set(k, v);
+		const descendants = descendantDists[hoveredJob];
+		if (descendants) for (const [k, v] of descendants) dist.set(k, v);
+		return dist;
+	}, [
+		hoveredJob,
+		ancestorDists,
+		descendantDists
+	]);
+	if (hoveredDistances) {
+		lastHoveredDistancesRef.current = hoveredDistances;
+		maxHoveredDistRef.current = Math.max(...hoveredDistances.values());
+	}
+	const activeDists = hoveredDistances ?? lastHoveredDistancesRef.current;
+	useEffect(() => {
+		if (hoveredJob || !lastHoveredDistancesRef.current) return;
+		const maxDelay = maxHoveredDistRef.current * animT + animT;
+		const timer = setTimeout(() => {
+			lastHoveredDistancesRef.current = null;
+			maxHoveredDistRef.current = 0;
+			invalidateConnectors();
+		}, maxDelay * 1e3 + 200);
+		return () => clearTimeout(timer);
+	}, [
+		hoveredJob,
+		invalidateConnectors,
+		animT
+	]);
+	const hoveredRelated = useMemo(() => {
+		if (!hoveredDistances) return null;
+		return new Set(hoveredDistances.keys());
+	}, [hoveredDistances]);
+	useEffect(() => {
+		const raf = requestAnimationFrame(() => {
+			invalidateConnectors();
+			onReady?.();
+		});
+		return () => cancelAnimationFrame(raf);
+	}, [
+		dependencyCols,
+		invalidateConnectors,
+		onReady
+	]);
+	useEffect(() => {
+		const el = wrapperRef.current;
+		if (!el) return;
+		const ro = new ResizeObserver(() => invalidateConnectors());
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, [invalidateConnectors]);
+	const didRevealMountRef = useRef(false);
+	useEffect(() => {
+		if (!didRevealMountRef.current) {
+			didRevealMountRef.current = true;
+			return;
+		}
+		let raf = 0;
+		const start = performance.now();
+		const tick = () => {
+			flushSync(() => invalidateConnectors());
+			if (performance.now() - start < 260) raf = requestAnimationFrame(tick);
+		};
+		raf = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(raf);
+	}, [
+		stepsOpen,
+		matrixOpen,
+		expandedSubworkflows,
+		invalidateConnectors
+	]);
+	const buildBoxLayer = useCallback(() => {
+		const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
+		const onJobClick = (j) => {
+			const status = jobs[j]?.status ?? displayJobs[j]?.status;
+			if (!isStepsOpen(j) && (status === "skipped" || status === "skipped-failed")) return;
+			toggleSteps(pathPrefix + j);
+		};
+		const expandInline = (j, s) => {
+			toggleSubworkflow(`${pathPrefix}${j}:${s}`);
+			requestAnimationFrame(invalidateConnectors);
+		};
+		const openNew = (j, s) => openInNewGraph(pathPrefix, j, s);
+		const onStepClick = (j, s) => {
+			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));
+		};
+		const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+		const onSubworkflowIcon = (j, s) => openNew(j, s);
+		const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
+		const renderSubworkflow = (j, s) => {
+			const sub = jobs[j]?.steps?.[s]?.subworkflow;
+			if (!sub?.jobs) return null;
+			return /* @__PURE__ */ jsx(SubworkflowWell, {
+				expanded: isSubworkflowExpanded(j, s),
+				onSettled: requestFit,
+				className: "my-2 rounded-lg border-4 border-(--theme-border)",
+				children: /* @__PURE__ */ jsx(Subgraph, {
+					jobs: sub.jobs,
+					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
+					depth: depth + 1,
+					preview,
+					animT,
+					expandedSubworkflows,
+					toggleSubworkflow,
+					openInNewGraph,
+					setSublogOpen,
+					invalidateConnectors,
+					requestFit,
+					stepsOpen,
+					toggleSteps,
+					matrixOpen,
+					toggleMatrix
+				})
+			});
+		};
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex relative",
+			children: dependencyCols.map((col) => {
+				return /* @__PURE__ */ jsx("div", { children: col.map((jobNames) => {
+					const matrixGroup = displayJobs[jobNames[0]]?._matrixGroup;
+					if (matrixGroup) return /* @__PURE__ */ jsx(MatrixGroupNode, {
+						matrixGroup,
+						jobNames,
+						idPrefix: pathPrefix,
+						isExpanded: matrixOpen.has(pathPrefix + matrixGroup.originaljob),
+						onToggle: () => toggleMatrix(pathPrefix + matrixGroup.originaljob),
+						jobs,
+						activeDists,
+						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						onMouseLeave: () => setHoveredJob(null),
+						hoveredRelated,
+						animT,
+						zBase,
+						isStepsOpen,
+						onJobClick,
+						onStepClick,
+						onStepLogClick,
+						onSubworkflowIcon,
+						isSubworkflowExpanded,
+						renderSubworkflow,
+						preview
+					}, "node_" + jobNames[0]);
+					return /* @__PURE__ */ jsxs("div", {
+						id: "node_" + pathPrefix + jobNames[0],
+						className: "relative m-24",
+						style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
+						onMouseEnter: () => setHoveredJob(jobNames[0]),
+						onMouseLeave: () => setHoveredJob(null),
+						children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsx("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__ */ jsx(Joblist, {
+								jobs: displayJobs,
+								jobNames,
+								onJobClick,
+								isStepsOpen,
+								onStepClick,
+								onStepLogClick,
+								onSubworkflowIcon,
+								isSubworkflowExpanded,
+								renderSubworkflow,
+								growWidth: true,
+								preview
+							})
+						})]
+					}, "node_" + jobNames[0]);
+				}) }, col[0][0]);
+			})
+		});
+	}, [
+		dependencyCols,
+		displayJobs,
+		jobs,
+		stepsOpen,
+		matrixOpen,
+		expandedSubworkflows,
+		hoveredRelated,
+		activeDists,
+		animT,
+		zBase,
+		preview,
+		pathPrefix,
+		depth,
+		toggleSteps,
+		toggleSubworkflow,
+		toggleMatrix,
+		openInNewGraph,
+		setSublogOpen,
+		invalidateConnectors,
+		requestFit
+	]);
+	const memoizedBoxLayer = useMemo(() => buildBoxLayer(), [buildBoxLayer]);
+	const hasLiveNestedGraph = Array.from(expandedSubworkflows).some((k) => k.startsWith(pathPrefix));
+	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 null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: wrapperRef,
+		className: "relative",
+		children: [(() => {
+			const wrapper = wrapperRef.current;
+			const gid = (name) => document.getElementById("node_" + pathPrefix + name);
+			const ox = (el) => offsetWithin(el, wrapper).x;
+			const nodeConnectorY = (el) => offsetWithin(el, wrapper).y + 37;
+			let colGap = 32;
+			if (dependencyCols.length >= 2) {
+				const col0 = gid(dependencyCols[0][0][0]);
+				const col1 = gid(dependencyCols[1][0][0]);
+				if (col0 && col1) colGap = ox(col1) - (ox(col0) + col0.offsetWidth);
+			}
+			let minAdy = Number.POSITIVE_INFINITY;
+			for (const col of dependencyCols) for (const jobNames of col) for (const dep of directDeps[jobNames[0]] ?? []) {
+				const s = gid(dep);
+				const e = gid(jobNames[0]);
+				if (!s || !e) continue;
+				const dy = Math.abs(nodeConnectorY(e) - nodeConnectorY(s));
+				if (dy > 0 && dy < minAdy) minAdy = dy;
+			}
+			const MAX_ARC_R = 16;
+			const arcR = Math.min(minAdy === Number.POSITIVE_INFINITY ? MAX_ARC_R : minAdy / 4, colGap / 2, MAX_ARC_R);
+			return dependencyCols.map((col) => /* @__PURE__ */ jsx(React.Fragment, { children: col.map((jobNames) => /* @__PURE__ */ jsx(React.Fragment, { children: (directDeps[jobNames[0]] ?? []).map((dep) => {
+				const isHighlighted = hoveredRelated?.has(jobNames[0]) && hoveredRelated?.has(dep);
+				const baseColor = "var(--theme-border)";
+				const depDist = activeDists?.get(dep) ?? 0;
+				const targetDist = activeDists?.get(jobNames[0]) ?? 0;
+				const hopDelay = animT;
+				const closerDist = Math.min(depDist, targetDist);
+				const connectorDelay = closerDist * hopDelay;
+				const retractDelay = (maxHoveredDistRef.current - closerDist) * hopDelay;
+				const drawRightToLeft = targetDist < depDist;
+				const start = gid(dep);
+				const end = gid(jobNames[0]);
+				if (!start || !end) return null;
+				const x1 = ox(start) + start.offsetWidth - 2;
+				const y1 = nodeConnectorY(start);
+				const x2 = ox(end) + 2;
+				const y2 = nodeConnectorY(end);
+				const dy = y2 - y1;
+				const ady = Math.abs(dy);
+				let pathD;
+				let pathLen;
+				let pathDReversed;
+				const r = arcR;
+				if (ady === 0) {
+					pathD = `M ${x1} ${y1} L ${x2} ${y2}`;
+					pathDReversed = `M ${x2} ${y2} L ${x1} ${y1}`;
+					pathLen = x2 - x1;
+				} else {
+					const s = dy > 0 ? 1 : -1;
+					const ax2end = x2 - (colGap / 2 - r);
+					const ax = ax2end - 2 * r;
+					const sw1 = dy > 0 ? 1 : 0;
+					const sw2 = dy > 0 ? 0 : 1;
+					pathD = [
+						`M ${x1} ${y1}`,
+						`L ${ax} ${y1}`,
+						`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y1 + s * r}`,
+						`L ${ax + r} ${y2 - s * r}`,
+						`A ${r} ${r} 0 0 ${sw2} ${ax2end} ${y2}`,
+						`L ${x2} ${y2}`
+					].join(" ");
+					pathDReversed = [
+						`M ${x2} ${y2}`,
+						`L ${ax2end} ${y2}`,
+						`A ${r} ${r} 0 0 ${sw1} ${ax + r} ${y2 - s * r}`,
+						`L ${ax + r} ${y1 + s * r}`,
+						`A ${r} ${r} 0 0 ${sw2} ${ax} ${y1}`,
+						`L ${x1} ${y1}`
+					].join(" ");
+					const arcLen = Math.PI * r / 2;
+					const vSeg = Math.max(0, ady - 2 * r);
+					pathLen = ax - x1 + arcLen + vSeg + arcLen + (x2 - ax2end);
+				}
+				return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+					/* @__PURE__ */ jsxs("svg", {
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: (isHighlighted || activeDists?.has(dep) && activeDists?.has(jobNames[0]) ? 30 : 10) + zBase },
+						children: [
+							/* @__PURE__ */ jsx("rect", {
+								x: x1 - 16,
+								y: y1 - 16,
+								width: 32,
+								height: 32,
+								fill: "var(--theme-panel-bg)"
+							}),
+							/* @__PURE__ */ jsx("rect", {
+								x: x2 - 16,
+								y: y2 - 16,
+								width: 32,
+								height: 32,
+								fill: "var(--theme-panel-bg)"
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: x1,
+								cy: y1,
+								r: "8",
+								fill: isHighlighted ? "#3B82F6" : baseColor,
+								style: {
+									opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+									transition: isHighlighted ? `fill ${animT}s ${depDist * hopDelay}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - depDist) * hopDelay}s, opacity 0s`
+								}
+							}),
+							/* @__PURE__ */ jsx("circle", {
+								cx: x2,
+								cy: y2,
+								r: "8",
+								fill: isHighlighted ? "#3B82F6" : baseColor,
+								style: {
+									opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+									transition: isHighlighted ? `fill ${animT}s ${targetDist * hopDelay}s, opacity 0s` : `fill ${animT}s ${(maxHoveredDistRef.current - targetDist) * hopDelay}s, opacity 0s`
+								}
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs("svg", {
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: (isHighlighted ? 20 : -1) + zBase },
+						children: [/* @__PURE__ */ jsx("path", {
+							d: pathD,
+							stroke: "var(--theme-panel-bg)",
+							strokeWidth: "6",
+							fill: "transparent"
+						}), /* @__PURE__ */ jsx("path", {
+							d: pathD,
+							stroke: baseColor,
+							strokeWidth: "6",
+							fill: "transparent",
+							style: {
+								opacity: hoveredRelated && !isHighlighted ? .3 : 1,
+								transition: `opacity 0s`
+							}
+						})]
+					}),
+					/* @__PURE__ */ jsxs("svg", {
+						overflow: "visible",
+						className: "absolute pointer-events-none",
+						style: { zIndex: 20 + zBase },
+						children: [/* @__PURE__ */ jsx("path", {
+							d: drawRightToLeft ? pathDReversed : pathD,
+							fill: "transparent",
+							style: {
+								stroke: "#3B82F6",
+								strokeWidth: 6,
+								strokeDasharray: `${pathLen} ${pathLen}`,
+								strokeDashoffset: isHighlighted ? 0 : pathLen,
+								opacity: isHighlighted ? 1 : 0,
+								transition: isHighlighted ? `stroke-dashoffset ${animT}s ease ${connectorDelay}s, opacity 0s ease ${connectorDelay}s` : "stroke-dashoffset 0s, opacity 0s"
+							}
+						}), (() => {
+							const connKey = `${dep}→${jobNames[0]}`;
+							if (isHighlighted) retractPathLensRef.current.set(connKey, pathLen);
+							const isRetracting = !isHighlighted && !!activeDists?.has(dep) && !!activeDists?.has(jobNames[0]);
+							if (!isHighlighted && !isRetracting) return null;
+							const frozenLen = retractPathLensRef.current.get(connKey) ?? pathLen;
+							return /* @__PURE__ */ jsx("path", {
+								d: drawRightToLeft ? pathDReversed : pathD,
+								fill: "transparent",
+								style: {
+									stroke: "#3B82F6",
+									strokeWidth: 6,
+									strokeDasharray: `${frozenLen} ${frozenLen}`,
+									strokeDashoffset: isHighlighted ? 0 : frozenLen,
+									opacity: isHighlighted ? 0 : 1,
+									transition: isHighlighted ? "stroke-dashoffset 0s, opacity 0s" : `stroke-dashoffset ${animT}s ease ${retractDelay}s, opacity 0s`
+								}
+							});
+						})()]
+					})
+				] }, dep);
+			}) }, jobNames[0])) }, col[0][0]));
+		})(), hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer]
+	});
+}
+function SidebarWell({ expanded, children }) {
+	return /* @__PURE__ */ jsx(Collapse, {
+		expanded,
+		releaseOverflow: false,
+		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 isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
+	const onJobClick = (j) => {
+		const status = jobs[j]?.status ?? displayJobs[j]?.status;
+		if (!isStepsOpen(j) && (status === "skipped" || status === "skipped-failed")) return;
+		toggleSteps(pathPrefix + j);
+	};
+	const expandInline = (j, s) => toggleSubworkflow(`${pathPrefix}${j}:${s}`);
+	const openNew = (j, s) => openInNewGraph(pathPrefix, j, s);
+	const onStepClick = (j, s) => {
+		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));
+	};
+	const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
+	const onSubworkflowIcon = (j, s) => openNew(j, s);
+	const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
+	const renderSubworkflow = (j, s) => {
+		const sub = jobs[j]?.steps?.[s]?.subworkflow;
+		if (!sub?.jobs) return null;
+		return /* @__PURE__ */ jsx(SidebarWell, {
+			expanded: isSubworkflowExpanded(j, s),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ml-6 mt-0.5 border-l border-(--theme-border) pl-4",
+				children: /* @__PURE__ */ jsx(SidebarJobs, {
+					jobs: sub.jobs,
+					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
+					preview,
+					stepsOpen,
+					toggleSteps,
+					expandedSubworkflows,
+					toggleSubworkflow,
+					matrixOpen,
+					toggleMatrix,
+					openInNewGraph,
+					setSublogOpen
+				})
+			})
+		});
+	};
+	const seenMatrixGroups = /* @__PURE__ */ new Set();
+	return /* @__PURE__ */ jsx(Fragment, { children: 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) => {
+		const mg = displayJobs[jobName]?._matrixGroup;
+		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
+			matrixGroup: mg,
+			status: displayJobs[jobName]?.status,
+			isExpanded: matrixOpen.has(pathPrefix + mg.originaljob),
+			onToggle: () => toggleMatrix(pathPrefix + mg.originaljob),
+			jobs,
+			isStepsOpen,
+			onJobClick,
+			onStepClick,
+			onStepLogClick,
+			onSubworkflowIcon,
+			isSubworkflowExpanded,
+			renderSubworkflow,
+			preview
+		}, "matrix-" + pathPrefix + mg.originaljob);
+		return /* @__PURE__ */ jsx(Joblist, {
+			jobs,
+			jobNames: [jobName],
+			onJobClick,
+			isStepsOpen,
+			onStepClick,
+			onStepLogClick,
+			onSubworkflowIcon,
+			isSubworkflowExpanded,
+			renderSubworkflow,
+			preview
+		}, "job-" + pathPrefix + jobName);
+	}) });
+}
+function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder, viewMode = "dag", setViewMode }) {
+	const animT = .125;
+	const minScale = .2;
+	const maxScale = .6;
+	let jobs = run.executedJobs;
+	const runNumber = run.number;
+	const runSlug = run.slug;
+	const workflowName = run.workflowName;
+	const [sublogOpen, setSublogOpen] = useState("");
+	const [stepsOpen, setStepsOpen] = useState(/* @__PURE__ */ new Set());
+	const [expandedSubworkflows, setExpandedSubworkflows] = useState(/* @__PURE__ */ new Set());
+	const containerRef = useRef(null);
+	const graphContentRef = useRef(null);
+	const transformRef = useRef(null);
+	const [, forceRerender] = useState(0);
+	const invalidateConnectors = useCallback(() => forceRerender((c) => c + 1), []);
+	const [windowSize, setWindowSize] = useState(() => ({
+		w: typeof window !== "undefined" ? window.innerWidth : 800,
+		h: typeof window !== "undefined" ? window.innerHeight : 600
+	}));
+	useEffect(() => {
+		const onResize = () => setWindowSize({
+			w: window.innerWidth,
+			h: window.innerHeight
+		});
+		window.addEventListener("resize", onResize);
+		return () => window.removeEventListener("resize", onResize);
+	}, []);
+	const [topOffset, setTopOffset] = useState(null);
+	const topObserverRef = useRef(null);
+	const setContainerElement = useCallback((el) => {
+		containerRef.current = el;
+		topObserverRef.current?.disconnect();
+		topObserverRef.current = null;
+		if (!el || preview) return;
+		const measure = () => {
+			const cur = containerRef.current;
+			if (!cur) return;
+			setTopOffset((prev) => {
+				const next = cur.getBoundingClientRect().top;
+				return prev === next ? prev : next;
+			});
+		};
+		requestAnimationFrame(measure);
+		const parent = el.parentElement;
+		if (parent) {
+			const ro = new ResizeObserver(measure);
+			ro.observe(parent);
+			topObserverRef.current = ro;
+		}
+	}, [preview]);
+	const containerHeight = topOffset !== null ? Math.max(windowSize.h - topOffset - 16, 160) : null;
+	const { dag: dagStrings } = useStrings();
+	const slots = useSlots();
+	const [executedJobsPath, setExecutedJobsPath] = useState([[]]);
+	const [executedJobsPathIdx, setExecutedJobsPathIdx] = useState(0);
+	const [expandedJobs, setExpandedJobs] = useState(/* @__PURE__ */ new Set());
+	const [matrixOpen, setMatrixOpen] = useState(/* @__PURE__ */ new Set());
+	const isRunFinished = !!run.completedAt || run.status === "completed" || run.status === "error" || run.status === "canceled";
+	const [now, setNow] = useState(() => DateTime.now());
+	useEffect(() => {
+		if (isRunFinished) return;
+		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
+		return () => clearInterval(timer);
+	}, [isRunFinished]);
+	if (executedJobsPath[executedJobsPathIdx].length > 0) executedJobsPath[executedJobsPathIdx].map((prop) => {
+		jobs = jobs[prop];
+	});
+	const resetGraph = useCallback(() => {
+		setSublogOpen("");
+		setStepsOpen(/* @__PURE__ */ new Set());
+		setExpandedSubworkflows(/* @__PURE__ */ new Set());
+		setMatrixOpen(/* @__PURE__ */ new Set());
+	}, []);
+	const openInNewGraph = useCallback((prefix, job, step) => {
+		resetGraph();
+		setExecutedJobsPath((prev) => [[
+			...parsePrefixToPath(prefix),
+			job,
+			"steps",
+			step,
+			"subworkflow",
+			"jobs"
+		], ...prev.slice(executedJobsPathIdx, 10)]);
+		setExecutedJobsPathIdx(0);
+	}, [executedJobsPathIdx, resetGraph]);
+	const toggleSubworkflow = useCallback((key) => {
+		setExpandedSubworkflows((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+	}, []);
+	const toggleSteps = useCallback((key) => {
+		setStepsOpen((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+		requestAnimationFrame(invalidateConnectors);
+	}, [invalidateConnectors]);
+	const toggleMatrix = useCallback((key) => {
+		setMatrixOpen((prev) => {
+			const next = new Set(prev);
+			if (next.has(key)) next.delete(key);
+			else next.add(key);
+			return next;
+		});
+		requestAnimationFrame(invalidateConnectors);
+	}, [invalidateConnectors]);
+	const { data: sublogs, isLoading: sublogsLoading, error: sublogsError } = useRunFile(runSlug, sublogOpen || null, preview ? void 0 : { refreshInterval: 2e3 });
+	const jobAndStep = sublogOpen.split("/").slice(-3, -1);
+	if (jobAndStep.length > 1) jobAndStep[1] = jobAndStep[1].split("_")[1];
+	const logName = jobAndStep.length > 1 ? "Job: " + (jobAndStep[0][0].toUpperCase() + jobAndStep[0].slice(1)).replace(/_/g, " ") + " \nStep: " + (jobs[jobAndStep[0]]?.steps[jobAndStep[1]]?.name || "Step " + jobAndStep[1]) : "";
+	const sublogIsSubworkflow = jobAndStep.length > 1 && jobs[jobAndStep[0]]?.steps[jobAndStep[1]]?.subworkflow;
+	const currentSublog = sublogOpen === "" ? "" : preview ? dumpYaml(jobs[jobAndStep[0]]?.steps[jobAndStep[1]]) : sublogsError || !sublogs ? 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." : "No log found" : sublogs;
+	const matrixGroups = useMemo(() => detectMatrixGroups(jobs), [jobs]);
+	const { dependencyCols } = useMemo(() => computeGraphLayout(jobs, matrixGroups), [jobs, matrixGroups]);
+	const fitGraph = useCallback((animationMs = 0) => {
+		const container = containerRef.current;
+		const content = graphContentRef.current;
+		const transform = transformRef.current;
+		if (!container || !content || !transform) return;
+		const topNodes = content.querySelectorAll(":scope > div > div > div > div[id^=\"node_\"]");
+		const nodes = topNodes.length > 0 ? topNodes : content.querySelectorAll("[id^=\"node_\"]");
+		if (nodes.length === 0) return;
+		let minX = Number.POSITIVE_INFINITY;
+		let minY = Number.POSITIVE_INFINITY;
+		let maxX = 0;
+		let maxY = 0;
+		for (const node of nodes) {
+			const el = node;
+			const pos = offsetWithin(el, content);
+			minX = Math.min(minX, pos.x);
+			minY = Math.min(minY, pos.y);
+			maxX = Math.max(maxX, pos.x + el.offsetWidth);
+			maxY = Math.max(maxY, pos.y + el.offsetHeight);
+		}
+		const graphW = maxX - minX;
+		const graphH = maxY - minY;
+		const containerW = container.clientWidth;
+		const containerH = container.clientHeight;
+		if (graphW === 0 || graphH === 0) return;
+		const margin = Math.min(containerW, containerH) * .05;
+		const scaleW = (containerW - margin * 2) / graphW;
+		const scaleH = (containerH - margin * 2) / graphH;
+		const scale = Math.min(Math.max(Math.min(scaleW, scaleH), minScale), maxScale);
+		const offsetX = margin - minX * scale;
+		const offsetY = margin - minY * scale;
+		if (animationMs > 0) {
+			transform.setTransform(offsetX, offsetY, scale, animationMs, "easeOut");
+			return;
+		}
+		const wrapperEl = container.querySelector(".react-transform-component");
+		if (wrapperEl) wrapperEl.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+		requestAnimationFrame(() => {
+			transform.setTransform(offsetX, offsetY, scale, 0);
+			invalidateConnectors();
+		});
+	}, [invalidateConnectors]);
+	const animatedFit = useCallback(() => fitGraph(FIT_ANIMATION_MS), [fitGraph]);
+	useEffect(() => {
+		if (preview) return;
+		const raf = requestAnimationFrame(() => fitGraph());
+		return () => cancelAnimationFrame(raf);
+	}, [
+		preview,
+		fitGraph,
+		windowSize,
+		executedJobsPathIdx
+	]);
+	const currentPath = executedJobsPath[executedJobsPathIdx];
+	const nestingDepth = currentPath.length / 5;
+	let pathAppend = "";
+	for (let i = 0; i < nestingDepth; i++) pathAppend += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2].toString()}/`;
+	let generalLogPath = "logs.out";
+	if (nestingDepth > 0) {
+		let parentPrefix = "";
+		for (let i = 0; i < nestingDepth - 1; i++) parentPrefix += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2].toString()}/`;
+		const lastJob = currentPath[5 * (nestingDepth - 1)];
+		const lastStep = currentPath[5 * (nestingDepth - 1) + 2];
+		generalLogPath = buildSubworkflowLogPath(parentPrefix, lastJob, lastStep);
+	}
+	const expansionKeys = useMemo(() => collectExpansionKeys(jobs, pathAppend), [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 = () => {
+		if (allExpanded) {
+			setExpandedSubworkflows(/* @__PURE__ */ new Set());
+			setStepsOpen(/* @__PURE__ */ new Set());
+			setMatrixOpen(/* @__PURE__ */ new Set());
+		} else {
+			setExpandedSubworkflows(new Set(expansionKeys.subworkflowKeys));
+			setStepsOpen(new Set(expansionKeys.jobKeys));
+			setMatrixOpen(new Set(expansionKeys.matrixKeys));
+		}
+		requestAnimationFrame(() => {
+			invalidateConnectors();
+			fitGraph();
+		});
+	};
+	const nextStep = useCallback((backward) => {
+		const sublogSplit = sublogOpen.split("/");
+		let job = sublogSplit[sublogSplit.length - 3];
+		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 - 1;
+		}
+		else if (jobs[job].steps.length - 1 > step) step += 1;
+		else {
+			if (idx === jobArr.length - 1) idx = -1;
+			job = jobArr[idx + 1];
+			step = 0;
+		}
+		setSublogOpen(sublogSplit.slice(0, -3).join("/") + `/${job}/step_${step}/` + sublogSplit.slice(-1)[0]);
+	}, [jobs, sublogOpen]);
+	const handleKeyDown = useCallback((e) => {
+		if (e.key === "ArrowRight") nextStep(false);
+		else if (e.key === "ArrowLeft") nextStep(true);
+	}, [nextStep]);
+	useEffect(() => {
+		if ([`${pathAppend}/logs.out`, ""].includes(sublogOpen)) return;
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [
+		handleKeyDown,
+		sublogOpen,
+		pathAppend
+	]);
+	const summarySidebar = useMemo(() => /* @__PURE__ */ jsx(SidebarJobs, {
+		jobs,
+		pathPrefix: pathAppend,
+		preview,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		matrixOpen,
+		toggleMatrix,
+		openInNewGraph,
+		setSublogOpen
+	}), [
+		jobs,
+		pathAppend,
+		preview,
+		stepsOpen,
+		toggleSteps,
+		expandedSubworkflows,
+		toggleSubworkflow,
+		matrixOpen,
+		toggleMatrix,
+		openInNewGraph
+	]);
+	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 notGeneralLogs = `${pathAppend}/logs.out` !== sublogOpen;
+	const additionalBottomLeftBarComponents = notGeneralLogs ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "btn btn-neutral",
+			onClick: () => nextStep(true),
+			children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {}), /* @__PURE__ */ jsx("span", { children: "Prev" })]
+		}),
+		/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "btn btn-neutral",
+			onClick: () => nextStep(false),
+			children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", { children: "Next" })]
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "pt-0.5 whitespace-pre-wrap text-xs",
+			children: logName
+		})
+	] }) : void 0;
+	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogOpen && notGeneralLogs ? /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: "btn btn-neutral",
+		onClick: () => {
+			if (sublogIsSubworkflow) {
+				openInNewGraph(pathAppend, jobAndStep[0], parseInt(jobAndStep[1], 10));
+				setSublogOpen("");
+			} else setSublogOpen(sublogOpen.split("/").slice(-1)[0] === "logs.out" ? [...sublogOpen.split("/").slice(0, -1), "script-unstable.sh"].join("/") : [...sublogOpen.split("/").slice(0, -1), "logs.out"].join("/"));
+		},
+		children: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogOpen.split("/").slice(-1)[0] === "logs.out" ? "Show Script" : "Show Logs" })
+	}) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col lg:flex-row w-full",
+		children: [
+			!preview && /* @__PURE__ */ jsxs("div", {
+				className: "hidden lg:block lg:w-[280px] flex-shrink-0 lg:mr-1",
+				children: [
+					slots.runSessions && /* @__PURE__ */ jsx("div", {
+						className: "mb-4 overflow-y-auto",
+						children: slots.runSessions({
+							runId: run.id,
+							runNumber: run.number,
+							runActive: isRunActive(run.status)
+						})
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "font-bold flex items-center gap-x-2",
+						children: ["Summary", /* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "General log",
+							onClick: () => setSublogOpen(generalLogPath),
+							className: "link",
+							children: /* @__PURE__ */ jsx(DocumentIcon, { className: "w-4 h-4" })
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mx-4 mb-4 overflow-y-auto",
+						children: summarySidebar
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
+				children: [
+					!preview && /* @__PURE__ */ jsxs("div", {
+						className: "panel w-full border rounded-lg px-4 py-2 flex flex-wrap items-center gap-x-16 gap-y-2",
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.workflow
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: workflowName
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.run
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: runNumber
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.status
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: /* @__PURE__ */ jsxs(TooltipInfo, {
+										className: "flex items-center gap-x-1",
+										text: dagStrings.statusReason(run.statusReason) ?? "",
+										children: [/* @__PURE__ */ jsx(Indicator, { status: run.status }), dagStrings.statusLabel(run.status)]
+									})
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.runtime
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: runtime
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "text-xs",
+									children: dagStrings.submitted
+								}), /* @__PURE__ */ jsx("div", {
+									className: "text-sm font-semibold flex items-center gap-x-1",
+									children: startDt ? startDt.toLocaleString(DateTime.DATETIME_SHORT) : ""
+								})]
+							}),
+							/* @__PURE__ */ jsx("div", { className: "flex-1" }),
+							setViewMode && /* @__PURE__ */ jsx(ViewToggle, {
+								viewMode,
+								setViewMode: (mode) => {
+									if (mode === "dag") {
+										setStepsOpen(/* @__PURE__ */ new Set());
+										requestAnimationFrame(fitGraph);
+									}
+									setViewMode?.(mode);
+								}
+							})
+						]
+					}),
+					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: run.executedJobs }),
+					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
+						className: "panel w-full border",
+						children: /* @__PURE__ */ jsx(TreeView, {
+							jobs,
+							workflowName,
+							runNumber,
+							slug: runSlug,
+							expandedJobs,
+							setExpandedJobs
+						})
+					}) : /* @__PURE__ */ jsx("div", {
+						ref: setContainerElement,
+						className: "panel w-full " + (removeBorder ? "border-none" : "border") + " overflow-hidden relative",
+						style: {
+							height: containerHeight !== null ? `${containerHeight}px` : "62vh",
+							minHeight: 160
+						},
+						children: /* @__PURE__ */ jsx(TransformWrapper, {
+							ref: transformRef,
+							minScale,
+							maxScale,
+							initialScale: maxScale,
+							doubleClick: { disabled: true },
+							limitToBounds: false,
+							onInit: () => {
+								setTimeout(invalidateConnectors, 0);
+							},
+							onPanning: invalidateConnectors,
+							onPinch: invalidateConnectors,
+							onTransform: invalidateConnectors,
+							onWheel: invalidateConnectors,
+							onZoom: invalidateConnectors,
+							children: () => /* @__PURE__ */ jsxs(Fragment, { 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", {
+										type: "button",
+										className: "btn btn-info cursor-pointer h-6",
+										onClick: toggleExpandAll,
+										children: allExpanded ? dagStrings.collapseAll : dagStrings.expandAll
+									}),
+									/* @__PURE__ */ jsx("button", {
+										className: "btn btn-info w-21 cursor-pointer h-6",
+										"aria-label": "Reset view",
+										onClick: () => {
+											if (executedJobsPath[executedJobsPathIdx].length > 0) {
+												resetGraph();
+												setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
+												setExecutedJobsPathIdx(0);
+											} else fitGraph(FIT_ANIMATION_MS);
+										},
+										children: "Reset View"
+									}),
+									executedJobsPath.length > 1 && /* @__PURE__ */ jsxs("div", {
+										className: "flex",
+										children: [/* @__PURE__ */ jsx("button", {
+											onClick: () => {
+												if (executedJobsPath.length > executedJobsPathIdx + 1) {
+													resetGraph();
+													setExecutedJobsPathIdx(executedJobsPathIdx + 1);
+												}
+											},
+											className: "btn btn-info mr-1 cursor-pointer w-10 h-6",
+											children: "<"
+										}), /* @__PURE__ */ jsx("button", {
+											onClick: () => {
+												if (executedJobsPathIdx - 1 >= 0) {
+													resetGraph();
+													setExecutedJobsPathIdx(executedJobsPathIdx - 1);
+												}
+											},
+											className: "btn btn-info cursor-pointer w-10 h-6",
+											children: ">"
+										})]
+									})
+								]
+							}), /* @__PURE__ */ jsx(TransformComponent, { children: /* @__PURE__ */ jsx("div", {
+								ref: graphContentRef,
+								className: "flex relative mr-[8000px]",
+								style: { minHeight: 4e3 },
+								children: /* @__PURE__ */ jsx(Subgraph, {
+									jobs,
+									pathPrefix: pathAppend,
+									depth: 0,
+									preview,
+									animT,
+									expandedSubworkflows,
+									toggleSubworkflow,
+									openInNewGraph,
+									setSublogOpen,
+									invalidateConnectors,
+									requestFit: animatedFit,
+									stepsOpen,
+									toggleSteps,
+									matrixOpen,
+									toggleMatrix,
+									onReady: fitGraph
+								}, `sg-${executedJobsPathIdx}-${pathAppend}`)
+							}) })] })
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: sublogOpen !== "",
+				close: () => setSublogOpen(""),
+				fitWidth: true,
+				showButtons: false,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full",
+					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
+						text: "Loading logs",
+						size: 70,
+						textSize: 18
+					}) : preview ? /* @__PURE__ */ jsxs("div", { children: [slots.yamlViewer?.({
+						value: currentSublog,
+						height: window.innerHeight / 1.4,
+						width: window.innerWidth / 1.4,
+						contentKey: "editor_" + sublogOpen
+					}) ?? /* @__PURE__ */ jsx("pre", {
+						className: "h-full overflow-auto text-xs p-4",
+						style: {
+							height: window.innerHeight / 1.4,
+							width: window.innerWidth / 1.4
+						},
+						children: currentSublog
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex theme-panel select-none items-center gap-x-2 p-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "w-full flex flex-row gap-x-2 items-center",
+							children: /* @__PURE__ */ jsx("div", {
+								className: "flex gap-x-2 w-full",
+								children: additionalBottomLeftBarComponents
+							})
+						}), additionalBottomRightBarComponents]
+					})] }) : /* @__PURE__ */ jsx(LogViewer, {
+						log: currentSublog?.length > 1e3 ? currentSublog.slice(-1e5) : currentSublog,
+						height: windowSize.h / 1.2,
+						width: windowSize.w / 1.2,
+						hideExpand: true,
+						additionalBottomLeftBarComponents,
+						additionalBottomRightBarComponents,
+						enableWorkflowCommands: true
+					})
+				})
+			})
+		]
+	});
+}
+function DependencyGraphPreview(inputs) {
+	return /* @__PURE__ */ jsx(DependencyGraph, {
+		run: {
+			executedJobs: addCleanupSteps({ jobs: inputs.yml?.jobs || {} }),
+			number: 0,
+			workflowName: ""
+		},
+		preview: true,
+		initialScale: inputs.initialScale || 1,
+		removeBorder: inputs.removeBorder
+	});
+}
+//#endregion
+export { DependencyGraph, DependencyGraphPreview };