@parallelworks/ui 0.19.0 → 0.20.0

package/dist/graph/index.js

@@ -1,2520 +1,2 @@
-import { c as useRunFile, d as useWorkflowEngine, l as useSlots, r as useNavigation, u as useStrings } from "../chunks/Provider-CDYurraE.js";
-import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, DocumentIcon, ErrorIcon, InfoIcon, LoaderIcon, OpenInNewGraphIcon, WarningIcon } from "../icons.js";
-import { n as TOOLTIP_ID, o as keyedByContent, r as TooltipInfo } from "../chunks/Tooltip-K5HJr4_p.js";
-import { n as modalPanelClasses, t as BareModal } from "../chunks/BareModal-BtRiQezg.js";
-import { t as Indicator } from "../chunks/Indicator-hBSIxOPK.js";
-import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { t as LogViewer } from "../chunks/logviewer-BTKuQWzw.js";
-import { n as toAbsHumanDuration } from "../chunks/duration-BOv8Phl8.js";
-import cx from "classnames";
-import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { flushSync } from "react-dom";
-import { DateTime } from "luxon";
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
-import { AnimatePresence, motion } from "framer-motion";
-//#region src/graph/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: keyedByContent(annotations, (a) => a.id ?? `${a.type}:${a.title}:${a.message}`).map(({ key, item: annotation }) => {
-				const config = typeConfig[annotation.type] || typeConfig.notice;
-				const Icon = config.icon;
-				return /* @__PURE__ */ jsxs("div", {
-					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}`
-								]
-							})
-						]
-					})]
-				}, key);
-			})
-		})]
-	});
-}
-//#endregion
-//#region src/graph/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/graph/Reveal.tsx
-var EASE = "cubic-bezier(0.25, 0.1, 0.25, 1)";
-var ROWS_TRANSITION = `grid-template-rows 200ms ${EASE}`;
-var FULL_TRANSITION = `${ROWS_TRANSITION}, width 200ms ${EASE}`;
-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/graph/JobSummary.tsx
-function UsesIcon({ uses, subworkflow }) {
-	const navigation = useNavigation();
-	const slots = useSlots();
-	const { jobActions } = useStrings();
-	if (!uses || !slots.workflowIcon) return null;
-	const open = () => navigation.openStepSource(uses, subworkflow.sourceUrl);
-	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();
-	const engine = useWorkflowEngine();
-	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 = engine.stepLabel(step, i);
-						const stepKey = `${jobName}:${i}`;
-						const subJobs = step.subworkflow?.jobs;
-						const canExpand = !!inputs.renderSubworkflow && !!subJobs && Object.keys(subJobs).length > 0;
-						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
-							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)] }, stepKey);
-					})
-				})
-			})]
-		}, "job-" + jobName);
-	});
-}
-//#endregion
-//#region src/graph/MatrixGroup.tsx
-/** Matrix group item in the summary sidebar. */
-function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "py-1.5",
-		children: [/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			"aria-expanded": isExpanded,
-			onClick: onToggle,
-			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
-			children: [/* @__PURE__ */ jsx(Indicator, { status }), /* @__PURE__ */ jsxs("div", {
-				className: "font-semibold",
-				children: [
-					"Matrix: ",
-					matrixGroup.originaljob,
-					/* @__PURE__ */ jsxs("span", {
-						className: "font-normal text-sm ml-1",
-						children: [
-							"(",
-							matrixGroup.members.length,
-							" jobs)"
-						]
-					})
-				]
-			})]
-		}), /* @__PURE__ */ jsx(Reveal, {
-			open: isExpanded,
-			children: /* @__PURE__ */ jsx("div", {
-				className: "ml-3 mt-0.5",
-				children: /* @__PURE__ */ jsx(Joblist, {
-					jobs,
-					jobNames: matrixGroup.members,
-					onJobClick,
-					isStepsOpen,
-					onStepClick,
-					onStepLogClick,
-					onSubworkflowIcon,
-					isSubworkflowExpanded,
-					renderSubworkflow,
-					preview
-				})
-			})
-		})]
-	}, "matrix-" + matrixGroup.originaljob);
-}
-/** Matrix group node in the DAG visualization. */
-function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle, jobs, activeDists, onMouseEnter, onMouseLeave, hoveredRelated, animT, zBase, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
-	const matrixName = matrixGroup.originaljob;
-	const matrixMembers = matrixGroup.members;
-	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
-	return /* @__PURE__ */ jsxs("div", {
-		id: "node_" + idPrefix + jobNames[0],
-		role: "none",
-		className: "relative m-24",
-		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
-		onMouseEnter,
-		onMouseLeave,
-		onFocus: onMouseEnter,
-		onBlur: onMouseLeave,
-		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("div", {
-			className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
-			style: {
-				opacity: hoveredRelated && !hoveredRelated.has(jobNames[0]) ? .5 : 1,
-				transition: `opacity ${animT}s`
-			},
-			children: [/* @__PURE__ */ jsxs("button", {
-				type: "button",
-				"aria-expanded": isExpanded,
-				className: "cursor-pointer w-full text-left",
-				onClick: onToggle,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: "font-semibold text-md p-0.5",
-					children: ["Matrix: ", matrixName.length > 20 ? matrixName.slice(0, 20) + "..." : matrixName]
-				}), !isExpanded && /* @__PURE__ */ jsxs("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
-					children: [/* @__PURE__ */ jsx(Indicator, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: statusLabel })]
-				})]
-			}), /* @__PURE__ */ jsx(Reveal, {
-				open: isExpanded,
-				growWidth: true,
-				children: /* @__PURE__ */ jsx("div", {
-					className: "mt-1 border-t border-(--theme-border) pt-1",
-					children: /* @__PURE__ */ jsx(Joblist, {
-						jobs,
-						jobNames: matrixMembers,
-						onJobClick,
-						isStepsOpen,
-						onStepClick,
-						onStepLogClick,
-						onSubworkflowIcon,
-						isSubworkflowExpanded,
-						renderSubworkflow,
-						growWidth: true,
-						preview
-					})
-				})
-			})]
-		})]
-	}, "node_" + jobNames[0]);
-}
-//#endregion
-//#region src/graph/TreeView.tsx
-function getStepDuration(step) {
-	if (!step.startedAt) return "";
-	const start = DateTime.fromISO(step.startedAt);
-	const end = step.completedAt ? DateTime.fromISO(step.completedAt) : DateTime.now();
-	return toAbsHumanDuration(start, end);
-}
-function getJobDuration(job) {
-	if (!job.startedAt) return "";
-	const start = DateTime.fromISO(job.startedAt);
-	const end = job.completedAt ? DateTime.fromISO(job.completedAt) : DateTime.now();
-	return toAbsHumanDuration(start, end);
-}
-function formatJobLabel(jobName, job) {
-	const matrix = job?._matrix;
-	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 logPath = useWorkflowEngine().stepLogPath("", jobName, stepIndex);
-	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
-	if (isLoading && !logs) return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 px-5 py-4 text-sm text-[var(--theme-muted-text-color)]",
-		children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: "Loading logs..." })]
-	});
-	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}`;
-						const isStepExpanded = expandedSteps.has(stepKey);
-						return /* @__PURE__ */ jsx(StepRow, {
-							step,
-							index,
-							isExpanded: isStepExpanded,
-							onToggle: () => onStepToggle(stepKey),
-							workflowName,
-							runNumber,
-							slug,
-							jobName,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle
-						}, stepKey);
-					})
-				})
-			})
-		})]
-	});
-}
-function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, slug, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth = 0 }) {
-	const engine = useWorkflowEngine();
-	const slots = useSlots();
-	const duration = getStepDuration(step);
-	const label = engine.stepLabel(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}`;
-						const isSubJobExpanded = expandedJobs.has(subJobKey);
-						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
-							jobName: subJobName,
-							job: subJob,
-							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}/`;
-	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}`;
-						const isStepExpanded = expandedSteps.has(stepKey);
-						return /* @__PURE__ */ jsx(SubworkflowStepRow, {
-							step,
-							index,
-							isExpanded: isStepExpanded,
-							onToggle: () => onStepToggle(stepKey),
-							slug,
-							subworkflowPrefix: nestedSubworkflowPrefix,
-							jobName,
-							expandedJobs,
-							onJobToggle,
-							expandedSteps,
-							onStepToggle,
-							depth
-						}, stepKey);
-					})
-				})
-			})
-		})]
-	});
-}
-function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkflowPrefix, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth }) {
-	const engine = useWorkflowEngine();
-	const slots = useSlots();
-	const duration = getStepDuration(step);
-	const label = engine.stepLabel(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}`;
-						const isSubJobExpanded = expandedJobs.has(subJobKey);
-						return /* @__PURE__ */ jsx(SubworkflowJobRow, {
-							jobName: subJobName,
-							job: subJob,
-							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 logPath = useWorkflowEngine().stepLogPath(subworkflowPrefix, jobName, stepIndex);
-	const { data: logs, isLoading, error } = useRunFile(slug, logPath, { refreshInterval: 2e3 });
-	if (isLoading && !logs) return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-2 px-5 py-4 text-sm text-[var(--theme-muted-text-color)]",
-		children: [/* @__PURE__ */ jsx(LoaderIcon, { className: "w-4 h-4" }), /* @__PURE__ */ jsx("span", { children: "Loading logs..." })]
-	});
-	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 engine = useWorkflowEngine();
-	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) {
-					let group = matrixGroups[matrix.originaljob];
-					if (!group) {
-						group = {
-							originaljob: matrix.originaljob,
-							members: []
-						};
-						matrixGroups[matrix.originaljob] = group;
-					}
-					group.members.push(jobName);
-				}
-			}
-			for (const group of Object.values(matrixGroups)) group.members.sort((a, b) => (jobs[a]?._matrix?.index ?? 0) - (jobs[b]?._matrix?.index ?? 0));
-			const rendered = [];
-			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 } = engine.matrixStatus(group.members.map((m) => jobs[m]?.status));
-					rendered.push(/* @__PURE__ */ jsxs("div", {
-						className: "border-b border-[var(--theme-border)]",
-						children: [/* @__PURE__ */ jsxs("button", {
-							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/graph/types.ts
-function isJobRecord(value) {
-	return typeof value === "object" && value !== null;
-}
-//#endregion
-//#region src/graph/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) {
-		const source = jobs[job];
-		const cloned = clonedJobs[job];
-		if (!source || !cloned) continue;
-		if (Array.isArray(source.steps)) {
-			const sourceSteps = source.steps;
-			sourceSteps.slice().reverse().forEach((step, index) => {
-				if (!step.cleanup) return;
-				const linkedName = step.name ? step.name : `Step ${sourceSteps.length - index - 1}`;
-				const newStep = {
-					...step,
-					name: `POST ${linkedName}`,
-					run: step.cleanup,
-					linkedStep: `${sourceSteps.length - index - 1}`
-				};
-				delete newStep.cleanup;
-				const clonedStep = cloned.steps[index];
-				if (clonedStep) delete clonedStep.cleanup;
-				cloned.steps.push(newStep);
-			});
-		}
-		const sourceCleanup = source.cleanup;
-		const clonedCleanup = cloned.cleanup;
-		if (Array.isArray(sourceCleanup) && clonedCleanup) {
-			sourceCleanup.slice().reverse().forEach((step, index) => {
-				if (!step.cleanup) return;
-				const linkedName = step.name ? step.name : `Cleanup ${sourceCleanup.length - index - 1}`;
-				const newStep = {
-					...step,
-					name: `POST ${linkedName}`,
-					run: step.cleanup,
-					linkedStep: `${sourceCleanup.length - index - 1 + cloned.steps.length}`
-				};
-				delete newStep.cleanup;
-				const clonedStep = clonedCleanup[index];
-				if (clonedStep) delete clonedStep.cleanup;
-				clonedCleanup.push(newStep);
-			});
-			for (const clonedStep of clonedCleanup) clonedStep.linkedStep = ".";
-			cloned.steps = [...cloned.steps, ...clonedCleanup];
-			delete cloned.cleanup;
-		}
-	}
-	return clonedJobs;
-};
-var PREVIEW_PADDING = 24;
-function measurePreviewHeight(content, viewRef) {
-	const nodes = content?.querySelectorAll("[id^=\"node_\"]");
-	const transform = content?.parentElement ? getComputedStyle(content.parentElement).transform : "none";
-	if (!content || !nodes?.length || transform === "none") return null;
-	if (!viewRef.current) {
-		const view = new DOMMatrixReadOnly(transform);
-		viewRef.current = {
-			scale: view.a,
-			offsetY: view.f
-		};
-	}
-	const { scale, offsetY } = viewRef.current;
-	let bottom = 0;
-	for (const node of nodes) bottom = Math.max(bottom, offsetWithin(node, content).y + node.offsetHeight);
-	return Math.ceil(bottom * scale + offsetY + PREVIEW_PADDING);
-}
-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) {
-		const name = parts[i + 1];
-		const step = parts[i + 2];
-		if (parts[i] === "subworkflows" && name && step?.startsWith("step_")) path.push(name, "steps", Number(step.slice(5)), "subworkflow", "jobs");
-	}
-	return path;
-}
-function computeGraphLayout(engine, jobs, matrixGroups) {
-	const visibleJobs = structuredClone(jobs);
-	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
-	engine.collapseMatrixGroups(matrixGroups, visibleJobs);
-	const 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;
-		const oldNeeds = Array.isArray(needs) ? needs : [];
-		filteredDeps[jobName] = oldNeeds.filter((dep) => {
-			return !oldNeeds.some((other) => {
-				if (other === dep) return false;
-				return allDeps[other]?.has(dep) === true;
-			});
-		}).sort();
-	}
-	const depended_on = {};
-	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).forEach((jobName) => {
-		if (depended_on[jobName]) depended_on[jobName].sort();
-	});
-	const unfinished = structuredClone(visibleJobs);
-	const rootLevel = [];
-	const deps = [rootLevel];
-	Object.keys(visibleJobs).forEach((jobName) => {
-		if (filteredDeps[jobName]?.length === 0) {
-			rootLevel.push(jobName);
-			delete unfinished[jobName];
-		}
-	});
-	let prevLen;
-	do {
-		const toAppend = [];
-		const unfinishedArr = Object.keys(unfinished);
-		prevLen = unfinishedArr.length;
-		unfinishedArr.forEach((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.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).forEach((jobName, j) => {
-				if (visibleJobs[head]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
-				const depsA = depended_on[head];
-				const depsB = depended_on[jobName];
-				const depsA2 = filteredDeps[head];
-				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) {
-		const first = finalDeps[0];
-		if (!first) break;
-		if (first.length === 0) {
-			finalDeps.splice(0, 1);
-			continue;
-		}
-		if (first[0]?.length !== 0) break;
-		while (first.length > 0 && first[0]?.length === 0) first.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 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(() => 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();
-		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(engine.stepLogPath(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) => {
-			const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
-			if (!subJobs) 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(NestedSubgraph, {
-					jobs: subJobs,
-					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],
-						role: "none",
-						className: "relative m-24",
-						style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
-						onMouseEnter: () => setHoveredJob(jobNames[0]),
-						onMouseLeave: () => setHoveredJob(null),
-						onFocus: () => setHoveredJob(jobNames[0]),
-						onBlur: () => 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,
-		engine,
-		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", {
-						"aria-hidden": "true",
-						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", {
-						"aria-hidden": "true",
-						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", {
-						"aria-hidden": "true",
-						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]
-	});
-}
-var NestedSubgraph = Subgraph;
-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 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;
-		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(engine.stepLogPath(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) => {
-		const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
-		if (!subJobs) 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: subJobs,
-					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
-					preview,
-					stepsOpen,
-					toggleSteps,
-					expandedSubworkflows,
-					toggleSubworkflow,
-					matrixOpen,
-					toggleMatrix,
-					openInNewGraph,
-					setSublogOpen
-				})
-			})
-		});
-	};
-	const seenMatrixGroups = /* @__PURE__ */ new Set();
-	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];
-	});
-	return /* @__PURE__ */ jsx(Fragment$1, { children: orderedKeys.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);
-	}) });
-}
-var RUN_STATUSES = [
-	"started",
-	"running",
-	"completed",
-	"error",
-	"failed",
-	"canceled",
-	"skipped",
-	"faulted",
-	"canceling",
-	"skipped-failed",
-	""
-];
-function toStatus(value) {
-	return RUN_STATUSES.find((status) => status === value) ?? "";
-}
-function walkJobPath(root, path) {
-	let cursor = root;
-	for (const key of path) {
-		if (typeof cursor !== "object" || cursor === null) return {};
-		cursor = Object.getOwnPropertyDescriptor(cursor, String(key))?.value;
-	}
-	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;
-	const rootJobs = isJobRecord(run.executedJobs) ? run.executedJobs : {};
-	const runNumber = run.number ?? 0;
-	const runSlug = run.slug ?? "";
-	const workflowName = run.workflowName ?? "";
-	const runStatus = toStatus(run.status);
-	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 [previewHeight, setPreviewHeight] = useState(null);
-	const previewViewRef = useRef(null);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!preview || !container) return;
-		let raf = 0;
-		let attempts = 0;
-		const measure = () => {
-			cancelAnimationFrame(raf);
-			raf = requestAnimationFrame(() => {
-				const next = measurePreviewHeight(graphContentRef.current, previewViewRef);
-				if (next === null) {
-					if (attempts++ < 120) measure();
-					return;
-				}
-				attempts = 0;
-				setPreviewHeight((prev) => prev === next ? prev : next);
-			});
-		};
-		measure();
-		const observer = new MutationObserver(measure);
-		observer.observe(container, {
-			childList: true,
-			subtree: true
-		});
-		return () => {
-			observer.disconnect();
-			cancelAnimationFrame(raf);
-		};
-	}, [preview]);
-	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]);
-	const jobs = walkJobPath(rootJobs, executedJobsPath[executedJobsPathIdx] ?? []);
-	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 });
-	useEffect(() => {
-		if (sublogOpen.endsWith("/script-unstable-redacted.sh") && !sublogsLoading && (sublogsError || !sublogs)) setSublogOpen(sublogOpen.replace(/script-unstable-redacted\.sh$/, "script-unstable.sh"));
-	}, [
-		sublogOpen,
-		sublogs,
-		sublogsError,
-		sublogsLoading
-	]);
-	const jobAndStep = sublogOpen.split("/").slice(-3, -1);
-	if (jobAndStep.length > 1) jobAndStep[1] = jobAndStep[1].split("_")[1] ?? "";
-	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(() => 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;
-		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 = String(currentPath[5 * (nestingDepth - 1)] ?? "");
-		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
-		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 ? 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 = () => {
-		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 ?? 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] ?? "";
-			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 (!sublogIsStep) return;
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [handleKeyDown, sublogIsStep]);
-	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 endDt = run.completedAt ? DateTime.fromISO(run.completedAt) : now;
-	const runtime = toAbsHumanDuration(startDt, endDt);
-	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
-		/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "btn btn-neutral",
-			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 && sublogIsStep ? /* @__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-redacted.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,
-							runActive: engine.isRunActive(run.status),
-							links: run.links
-						})
-					}),
-					/* @__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: runStatus }), dagStrings.statusLabel(runStatus)]
-									})
-								})]
-							}),
-							/* @__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: jobs }),
-					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` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh",
-							minHeight: previewHeight !== null ? 0 : 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$1, { children: [/* @__PURE__ */ jsxs("div", {
-								className: "absolute z-10 top-2 right-2 flex flex-col items-end gap-y-1",
-								children: [
-									hasExpandable && /* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: "btn btn-info cursor-pointer h-6",
-										onClick: toggleExpandAll,
-										children: allExpanded ? dagStrings.collapseAll : dagStrings.expandAll
-									}),
-									/* @__PURE__ */ jsx("button", {
-										type: "button",
-										className: "btn btn-info w-21 cursor-pointer h-6",
-										"aria-label": "Reset view",
-										onClick: () => {
-											if ((executedJobsPath[executedJobsPathIdx]?.length ?? 0) > 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", {
-											type: "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", {
-											type: "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(BareModal, {
-				open: sublogOpen !== "",
-				onClose: () => setSublogOpen(""),
-				align: "center",
-				className: cx(modalPanelClasses, "max-h-full overflow-y-auto p-4 sm:p-6"),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex w-full",
-					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
-						text: dagStrings.loadingLogs,
-						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) {
-	const ymlJobs = inputs.yml?.["jobs"];
-	return /* @__PURE__ */ jsx(DependencyGraph, {
-		run: {
-			executedJobs: addCleanupSteps({ jobs: isJobRecord(ymlJobs) ? ymlJobs : {} }),
-			number: 0,
-			workflowName: ""
-		},
-		preview: true,
-		initialScale: inputs.initialScale || 1,
-		removeBorder: inputs.removeBorder
-	});
-}
-//#endregion
+import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 export { DependencyGraph, DependencyGraphPreview };