@parallelworks/ui 0.12.1 → 0.14.0

package/dist/workflow/index.js

@@ -1,13 +1,13 @@
 import { ArrowLeftIcon, ArrowRightIcon, ChevronDownIcon, ChevronRightIcon, DocumentIcon, ErrorIcon, InfoIcon, LoaderIcon, OpenInNewGraphIcon, WarningIcon } from "../icons.js";
-import { c as useStrings, o as useRunFile, r as useNavigation, s as useSlots } from "../chunks/Provider-CfFV-vc5.js";
-import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-WgbiC_nd.js";
+import { c as useStrings, o as useRunFile, r as useNavigation, s as useSlots } from "../chunks/Provider-CbFVFB7O.js";
+import { n as TOOLTIP_ID, r as TooltipInfo } from "../chunks/Tooltip-n9w7Tkt1.js";
 import { t as Loader } from "../chunks/Loader-BXoXTZGc.js";
-import { n as modalPanelClasses, t as BareModal } from "../chunks/BareModal-DBa84JZO.js";
+import { n as modalPanelClasses, t as BareModal } from "../chunks/BareModal-BqroLbZ5.js";
 import { t as Indicator } from "../chunks/Indicator-hBSIxOPK.js";
 import { LogViewer } from "../logviewer/index.js";
 import cx from "classnames";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
 import { buildSubworkflowLogPath, collapseMatrixGroupsInLayout, collectExpansionKeys, computeMatrixAggStatus, detectMatrixGroups, dumpYaml, getAllDeps, getStepLabel, isRunActive, toAbsHumanDuration } from "@parallelworks/workflow-parser";
@@ -246,13 +246,15 @@ function UsesIcon({ uses, subworkflow }) {
 	const { jobActions } = useStrings();
 	if (!uses || !slots.workflowIcon) return null;
 	const open = () => {
-		if (uses.startsWith("workflow/")) navigation.toWorkflow(uses.split("/")[1]);
+		if (uses.startsWith("workflow/")) navigation.toWorkflow(uses.split("/")[1] ?? "");
 		else if (uses.startsWith("github/")) {
 			const [ownerRepo, ref] = uses.replace("github/", "").split("@");
 			navigation.openExternal("https://github.com/" + ownerRepo + "/tree/" + ref);
-		} else navigation.toMarketItem(uses.split("/")[1]);
+		} else navigation.toMarketItem(uses.split("/")[1] ?? "");
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": jobActions.openOriginalWorkflow,
 		"data-tooltip-id": TOOLTIP_ID,
 		"data-tooltip-content": jobActions.openOriginalWorkflow,
 		onClick: open,
@@ -273,9 +275,11 @@ function Joblist(inputs) {
 		const jobLabel = matrixMeta?.originaljob ? `${matrixMeta.originaljob[0].toUpperCase() + matrixMeta.originaljob.slice(1)} (${(matrixMeta.index ?? 0) + 1}/${matrixMeta.totalingroup ?? "?"})` : (jobName[0].toUpperCase() + jobName.slice(1)).replace(/_/g, " ");
 		return /* @__PURE__ */ jsxs("div", {
 			className: "py-1 select-none",
-			children: [/* @__PURE__ */ jsxs("div", {
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				"aria-expanded": inputs.isStepsOpen(jobName),
 				onClick: () => inputs.onJobClick(jobName),
-				className: cx("flex items-center gap-x-1.5", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
+				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
@@ -291,9 +295,10 @@ function Joblist(inputs) {
 						const canExpand = !!inputs.renderSubworkflow && !!subJobs && Object.keys(subJobs).length > 0;
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-							children: [/* @__PURE__ */ jsxs("div", {
+							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"),
+								className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
 								"data-testid": stepLabel,
 								children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(Indicator, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
 							}), step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -373,10 +378,14 @@ function InlineLogViewer({ slug, jobName, stepIndex }) {
 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("div", {
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
+		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, {
@@ -433,6 +442,7 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 					]
 				},
 				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) => {
@@ -462,20 +472,24 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 	const duration = getStepDuration(step);
 	const label = getStepLabel(step, index);
 	const isSubworkflow = !!step.subworkflow;
-	const subworkflowJobs = isSubworkflow ? step.subworkflow.jobs : null;
-	const subworkflowJobNames = subworkflowJobs ? Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name].if !== false) : [];
+	const 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;
+			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[subJobName] = job.needs;
 		}
 		return map;
 	}, [subworkflowJobs, subworkflowJobNames]);
 	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
+		/* @__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, {
@@ -486,8 +500,8 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 				}),
 				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
 				isSubworkflow && slots.workflowIcon?.({
-					image: step.subworkflow.image,
-					type: step.subworkflow.type,
+					image: step.subworkflow?.image,
+					type: step.subworkflow?.type,
 					className: "h-4 w-4 flex-shrink-0"
 				}),
 				/* @__PURE__ */ jsxs("span", {
@@ -528,6 +542,7 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 					]
 				},
 				className: "overflow-hidden",
+				id: panelId,
 				children: /* @__PURE__ */ jsx(InlineLogViewer, {
 					slug,
 					jobName,
@@ -560,15 +575,17 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 					]
 				},
 				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: subworkflowJobs[subJobName],
-							isExpanded: isSubJobExpanded,
+							job: subJob,
+							isExpanded: expandedJobs.has(subJobKey),
 							onToggle: () => onJobToggle(subJobKey),
 							dependencies: subworkflowDependenciesMap[subJobName],
 							slug,
@@ -590,10 +607,14 @@ function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, s
 	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("div", {
-			className: cx("flex items-center gap-3 px-5 py-3 transition-colors", job.status === "skipped" || job.status === "skipped-failed" ? "cursor-default" : "cursor-pointer", isExpanded && "bg-[var(--theme-panel-bg)]"),
+		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, {
@@ -650,6 +671,7 @@ function SubworkflowJobRow({ jobName, job, isExpanded, onToggle, dependencies, s
 					]
 				},
 				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) => {
@@ -679,20 +701,24 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 	const duration = getStepDuration(step);
 	const label = getStepLabel(step, index);
 	const isSubworkflow = !!step.subworkflow;
-	const subworkflowJobs = isSubworkflow ? step.subworkflow.jobs : null;
-	const subworkflowJobNames = subworkflowJobs ? Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name].if !== false) : [];
+	const 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;
+			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[subJobName] = job.needs;
 		}
 		return map;
 	}, [subworkflowJobs, subworkflowJobNames]);
 	return /* @__PURE__ */ jsxs("div", { children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center gap-3 px-5 py-2.5 cursor-pointer transition-colors", isExpanded ? "" : "hover:bg-[var(--theme-hover)]"),
+		/* @__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, {
@@ -703,8 +729,8 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 				}),
 				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
 				isSubworkflow && slots.workflowIcon?.({
-					image: step.subworkflow.image,
-					type: step.subworkflow.type,
+					image: step.subworkflow?.image,
+					type: step.subworkflow?.type,
 					className: "h-4 w-4 flex-shrink-0"
 				}),
 				/* @__PURE__ */ jsxs("span", {
@@ -745,6 +771,7 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 					]
 				},
 				className: "overflow-hidden",
+				id: panelId,
 				children: /* @__PURE__ */ jsx(SubworkflowInlineLogViewer, {
 					slug,
 					subworkflowPrefix,
@@ -778,15 +805,17 @@ function SubworkflowStepRow({ step, index, isExpanded, onToggle, slug, subworkfl
 					]
 				},
 				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: subworkflowJobs[subJobName],
-							isExpanded: isSubJobExpanded,
+							job: subJob,
+							isExpanded: expandedJobs.has(subJobKey),
 							onToggle: () => onJobToggle(subJobKey),
 							dependencies: subworkflowDependenciesMap[subJobName],
 							slug,
@@ -829,7 +858,7 @@ function SubworkflowInlineLogViewer({ slug, subworkflowPrefix, jobName, stepInde
 }
 function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpandedJobs }) {
 	const visibleJobNames = useMemo(() => {
-		return Object.keys(jobs).filter((jobName) => jobs[jobName].if !== false);
+		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());
@@ -876,7 +905,7 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 		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;
+			if (job?.needs && Array.isArray(job.needs) && job.needs.length > 0) map[jobName] = job.needs;
 		}
 		return map;
 	}, [jobs, visibleJobNames]);
@@ -894,13 +923,10 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 			const matrixGroups = {};
 			for (const jobName of visibleJobNames) {
 				const matrix = jobs[jobName]?._matrix;
-				if (matrix?.originaljob) {
-					if (!matrixGroups[matrix.originaljob]) matrixGroups[matrix.originaljob] = {
-						originaljob: matrix.originaljob,
-						members: []
-					};
-					matrixGroups[matrix.originaljob].members.push(jobName);
-				}
+				if (matrix?.originaljob) (matrixGroups[matrix.originaljob] ??= {
+					originaljob: matrix.originaljob,
+					members: []
+				}).members.push(jobName);
 			}
 			for (const group of Object.values(matrixGroups)) group.members.sort((a, b) => (jobs[a]?._matrix?.index ?? 0) - (jobs[b]?._matrix?.index ?? 0));
 			const rendered = [];
@@ -911,12 +937,16 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 					if (seenMatrixGroups.has(matrixOrigin)) continue;
 					seenMatrixGroups.add(matrixOrigin);
 					const group = matrixGroups[matrixOrigin];
+					if (!group) continue;
 					const isGroupExpanded = expandedJobs.has(`matrix:${matrixOrigin}`);
 					const { aggStatus } = computeMatrixAggStatus(group.members.map((m) => jobs[m]?.status));
 					rendered.push(/* @__PURE__ */ jsxs("div", {
 						className: "border-b border-[var(--theme-border)]",
-						children: [/* @__PURE__ */ jsxs("div", {
-							className: "flex items-center gap-3 px-5 py-3 cursor-pointer transition-colors",
+						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, {
@@ -952,6 +982,7 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 							},
 							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],
@@ -993,9 +1024,11 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, isStepsOpen, onJobClick, onStepClick, onStepLogClick, onSubworkflowIcon, isSubworkflowExpanded, renderSubworkflow, preview }) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
-		children: [/* @__PURE__ */ jsxs("div", {
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": isExpanded,
 			onClick: onToggle,
-			className: "cursor-pointer flex items-center gap-x-1.5",
+			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: [
@@ -1038,18 +1071,23 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 	const { aggStatus, statusLabel } = computeMatrixAggStatus(matrixMembers.map((m) => jobs[m]?.status));
 	return /* @__PURE__ */ jsxs("div", {
 		id: "node_" + idPrefix + jobNames[0],
+		role: "none",
 		className: "relative m-24",
 		style: { zIndex: (activeDists?.has(jobNames[0]) ? 25 : 1) + zBase },
 		onMouseEnter,
 		onMouseLeave,
+		onFocus: onMouseEnter,
+		onBlur: onMouseLeave,
 		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-0 rounded-2xl bg-(--theme-panel-bg)" }), /* @__PURE__ */ jsxs("div", {
 			className: "relative border-solid shadow py-4 px-8 rounded-xl border-4 whitespace-nowrap bg-(--theme-panel-bg) text-2xl",
 			style: {
 				opacity: hoveredRelated && !hoveredRelated.has(jobNames[0]) ? .5 : 1,
 				transition: `opacity ${animT}s`
 			},
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "cursor-pointer",
+			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",
@@ -1086,6 +1124,11 @@ function MatrixGroupNode({ matrixGroup, jobNames, idPrefix, isExpanded, onToggle
 	}, "node_" + jobNames[0]);
 }
 //#endregion
+//#region src/workflow/types.ts
+function isJobRecord(value) {
+	return typeof value === "object" && value !== null;
+}
+//#endregion
 //#region src/workflow/DependencyGraph.tsx
 function ViewToggle({ viewMode, setViewMode }) {
 	return /* @__PURE__ */ jsxs("div", {
@@ -1106,36 +1149,46 @@ function ViewToggle({ viewMode, setViewMode }) {
 var addCleanupSteps = ({ jobs }) => {
 	const clonedJobs = structuredClone(jobs);
 	for (const job in jobs) {
-		if (Array.isArray(jobs[job].steps)) jobs[job].steps.slice().reverse().forEach((step, index) => {
-			if (!step.cleanup) return;
-			const linkedName = step.name ? step.name : `Step ${jobs[job].steps.length - index - 1}`;
-			const newStep = {
-				...step,
-				name: `POST ${linkedName}`,
-				run: step.cleanup,
-				linkedStep: `${jobs[job].steps.length - index - 1}`
-			};
-			delete newStep.cleanup;
-			delete clonedJobs[job].steps[index].cleanup;
-			clonedJobs[job].steps.push(newStep);
-		});
-		if (Array.isArray(jobs[job].cleanup)) {
-			jobs[job].cleanup.slice().reverse().forEach((step, index) => {
+		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 : `Cleanup ${jobs[job].cleanup.length - index - 1}`;
+				const linkedName = step.name ? step.name : `Step ${sourceSteps.length - index - 1}`;
 				const newStep = {
 					...step,
 					name: `POST ${linkedName}`,
 					run: step.cleanup,
-					linkedStep: `${jobs[job].cleanup.length - index - 1 + clonedJobs[job].steps.length}`
+					linkedStep: `${sourceSteps.length - index - 1}`
 				};
 				delete newStep.cleanup;
-				delete clonedJobs[job].cleanup[index].cleanup;
-				clonedJobs[job].cleanup.push(newStep);
+				const clonedStep = cloned.steps[index];
+				if (clonedStep) delete clonedStep.cleanup;
+				cloned.steps.push(newStep);
 			});
-			for (let i = 0; i < clonedJobs[job].cleanup.length; i++) clonedJobs[job].cleanup[i].linkedStep = ".";
-			clonedJobs[job].steps = [...clonedJobs[job].steps, ...clonedJobs[job].cleanup];
-			delete clonedJobs[job].cleanup;
+		}
+		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;
@@ -1157,22 +1210,27 @@ function offsetWithin(el, ancestor) {
 function parsePrefixToPath(prefix) {
 	const parts = prefix.split("/").filter(Boolean);
 	const path = [];
-	for (let i = 0; i + 2 < parts.length; i += 3) if (parts[i] === "subworkflows" && parts[i + 1] && parts[i + 2]?.startsWith("step_")) path.push(parts[i + 1], "steps", Number(parts[i + 2].slice(5)), "subworkflow", "jobs");
+	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(jobs, matrixGroups) {
 	const visibleJobs = structuredClone(jobs);
-	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName].if === false) delete visibleJobs[jobName];
+	for (const jobName of Object.keys(jobs ?? {})) if (jobs[jobName]?.if === false) delete visibleJobs[jobName];
 	collapseMatrixGroupsInLayout(matrixGroups, visibleJobs);
 	const allDeps = {};
 	for (const jobName of Object.keys(visibleJobs)) allDeps[jobName] = getAllDeps(jobName, visibleJobs, allDeps);
 	const filteredDeps = {};
 	for (const jobName of Object.keys(visibleJobs)) {
-		const oldNeeds = visibleJobs[jobName]?.needs && Array.isArray(visibleJobs[jobName].needs) ? visibleJobs[jobName].needs : [];
+		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);
+				return allDeps[other]?.has(dep) === true;
 			});
 		}).sort();
 	}
@@ -1187,10 +1245,11 @@ function computeGraphLayout(jobs, matrixGroups) {
 		if (depended_on[jobName]) depended_on[jobName].sort();
 	});
 	const unfinished = structuredClone(visibleJobs);
-	const deps = [[]];
+	const rootLevel = [];
+	const deps = [rootLevel];
 	Object.keys(visibleJobs).map((jobName) => {
-		if (filteredDeps[jobName].length === 0) {
-			deps[0].push(jobName);
+		if (filteredDeps[jobName]?.length === 0) {
+			rootLevel.push(jobName);
 			delete unfinished[jobName];
 		}
 	});
@@ -1200,7 +1259,7 @@ function computeGraphLayout(jobs, matrixGroups) {
 		const unfinishedArr = Object.keys(unfinished);
 		prevLen = unfinishedArr.length;
 		unfinishedArr.map((jobName) => {
-			if (filteredDeps[jobName].every((dep) => !unfinishedArr.includes(dep))) {
+			if ((filteredDeps[jobName] ?? []).every((dep) => !unfinishedArr.includes(dep))) {
 				toAppend.push(jobName);
 				delete unfinished[jobName];
 			}
@@ -1211,17 +1270,19 @@ function computeGraphLayout(jobs, matrixGroups) {
 	deps.map((col) => {
 		const toAppend = [];
 		while (col.length > 0) {
-			const grouped = [col[0]];
+			const head = col[0];
+			if (head === void 0) break;
+			const grouped = [head];
 			const toRm = [0];
 			col.slice(1).map((jobName, j) => {
-				if (visibleJobs[col[0]]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
-				const depsA = depended_on[col[0]];
+				if (visibleJobs[head]?._matrixGroup || visibleJobs[jobName]?._matrixGroup) return;
+				const depsA = depended_on[head];
 				const depsB = depended_on[jobName];
-				const depsA2 = filteredDeps[col[0]];
+				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]))) {
+						if ((!depsA || depsA.every((dep, i) => dep === depsB?.[i])) && (!depsA2 || depsA2.every((dep, i) => dep === depsB2?.[i]))) {
 							grouped.push(jobName);
 							toRm.push(j + 1);
 						}
@@ -1233,9 +1294,15 @@ function computeGraphLayout(jobs, matrixGroups) {
 		}
 		finalDeps.push(toAppend);
 	});
-	while (finalDeps.length > 0 && (finalDeps[0].length === 0 || finalDeps[0][0].length === 0)) {
-		if (finalDeps[0].length === 0) finalDeps.splice(0, 1);
-		while (finalDeps.length > 0 && finalDeps[0].length > 0 && finalDeps[0][0].length === 0) finalDeps[0].splice(0, 1);
+	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 = {};
@@ -1388,21 +1455,21 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 		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);
+			if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
 			else setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
 		};
 		const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
 		const onSubworkflowIcon = (j, s) => openNew(j, s);
 		const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
 		const renderSubworkflow = (j, s) => {
-			const sub = jobs[j]?.steps?.[s]?.subworkflow;
-			if (!sub?.jobs) return null;
+			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(Subgraph, {
-					jobs: sub.jobs,
+					jobs: subJobs,
 					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
 					depth: depth + 1,
 					preview,
@@ -1449,10 +1516,13 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 					}, "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: {
@@ -1474,7 +1544,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 							})
 						})]
 					}, "node_" + jobNames[0]);
-				}) }, col[0][0]);
+				}) }, col[0]?.[0]);
 			})
 		});
 	}, [
@@ -1512,8 +1582,8 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 			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]);
+				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;
@@ -1581,6 +1651,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 				}
 				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 },
@@ -1622,6 +1693,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						]
 					}),
 					/* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
 						overflow: "visible",
 						className: "absolute pointer-events-none",
 						style: { zIndex: (isHighlighted ? 20 : -1) + zBase },
@@ -1642,6 +1714,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						})]
 					}),
 					/* @__PURE__ */ jsxs("svg", {
+						"aria-hidden": "true",
 						overflow: "visible",
 						className: "absolute pointer-events-none",
 						style: { zIndex: 20 + zBase },
@@ -1677,7 +1750,7 @@ function Subgraph({ jobs, pathPrefix, depth, preview, animT, expandedSubworkflow
 						})()]
 					})
 				] }, dep);
-			}) }, jobNames[0])) }, col[0][0]));
+			}) }, jobNames[0])) }, col[0]?.[0]));
 		})(), hasLiveNestedGraph ? buildBoxLayer() : memoizedBoxLayer]
 	});
 }
@@ -1702,21 +1775,21 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 	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);
+		if (jobs[j]?.steps[+s]?.subworkflow) expandInline(j, +s);
 		else setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
 	};
 	const onStepLogClick = (j, s) => setSublogOpen(buildSubworkflowLogPath(pathPrefix, j, s));
 	const onSubworkflowIcon = (j, s) => openNew(j, s);
 	const isSubworkflowExpanded = (j, s) => expandedSubworkflows.has(`${pathPrefix}${j}:${s}`);
 	const renderSubworkflow = (j, s) => {
-		const sub = jobs[j]?.steps?.[s]?.subworkflow;
-		if (!sub?.jobs) return null;
+		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: sub.jobs,
+					jobs: subJobs,
 					pathPrefix: `${pathPrefix}subworkflows/${j}/step_${s}/`,
 					preview,
 					stepsOpen,
@@ -1742,7 +1815,7 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		const mg = displayJobs[jobName]?._matrixGroup;
 		if (mg) return /* @__PURE__ */ jsx(MatrixGroupSummaryItem, {
 			matrixGroup: mg,
-			status: displayJobs[jobName]?.status,
+			status: displayJobs[jobName]?.status ?? "",
 			isExpanded: matrixOpen.has(pathPrefix + mg.originaljob),
 			onToggle: () => toggleMatrix(pathPrefix + mg.originaljob),
 			jobs,
@@ -1769,14 +1842,39 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		}, "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 animT = .125;
 	const minScale = .2;
 	const maxScale = .6;
-	let jobs = run.executedJobs;
-	const runNumber = run.number;
-	const runSlug = run.slug;
-	const workflowName = run.workflowName;
+	const 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());
@@ -1834,9 +1932,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
 		return () => clearInterval(timer);
 	}, [isRunFinished]);
-	if (executedJobsPath[executedJobsPathIdx].length > 0) executedJobsPath[executedJobsPathIdx].map((prop) => {
-		jobs = jobs[prop];
-	});
+	const jobs = walkJobPath(rootJobs, executedJobsPath[executedJobsPathIdx] ?? []);
 	const resetGraph = useCallback(() => {
 		setSublogOpen("");
 		setStepsOpen(/* @__PURE__ */ new Set());
@@ -1891,10 +1987,10 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		sublogsLoading
 	]);
 	const jobAndStep = sublogOpen.split("/").slice(-3, -1);
-	if (jobAndStep.length > 1) jobAndStep[1] = jobAndStep[1].split("_")[1];
-	const logName = jobAndStep.length > 1 ? "Job: " + (jobAndStep[0][0].toUpperCase() + jobAndStep[0].slice(1)).replace(/_/g, " ") + " \nStep: " + (jobs[jobAndStep[0]]?.steps[jobAndStep[1]]?.name || "Step " + jobAndStep[1]) : "";
-	const sublogIsSubworkflow = jobAndStep.length > 1 && jobs[jobAndStep[0]]?.steps[jobAndStep[1]]?.subworkflow;
-	const currentSublog = sublogOpen === "" ? "" : preview ? dumpYaml(jobs[jobAndStep[0]]?.steps[jobAndStep[1]]) : sublogsError || !sublogs ? sublogIsSubworkflow ? "Subworkflows generally have no logs/scripts at this level.\nClick on the \"Open in new graph\" icon on the subworkflow step to open the subworkflow graph." : "No log found" : sublogs;
+	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(() => detectMatrixGroups(jobs), [jobs]);
 	const { dependencyCols } = useMemo(() => computeGraphLayout(jobs, matrixGroups), [jobs, matrixGroups]);
 	const fitGraph = useCallback((animationMs = 0) => {
@@ -1950,18 +2046,20 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		windowSize,
 		executedJobsPathIdx
 	]);
-	const currentPath = executedJobsPath[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()}/`;
+	for (let i = 0; i < nestingDepth; i++) pathAppend += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]?.toString()}/`;
 	let generalLogPath = "logs.out";
 	if (nestingDepth > 0) {
 		let parentPrefix = "";
-		for (let i = 0; i < nestingDepth - 1; i++) parentPrefix += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2].toString()}/`;
-		const lastJob = currentPath[5 * (nestingDepth - 1)];
-		const lastStep = currentPath[5 * (nestingDepth - 1) + 2];
+		for (let i = 0; i < nestingDepth - 1; i++) parentPrefix += `subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]?.toString()}/`;
+		const lastJob = String(currentPath[5 * (nestingDepth - 1)] ?? "");
+		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
 		generalLogPath = buildSubworkflowLogPath(parentPrefix, lastJob, lastStep);
 	}
+	const missingLogText = sublogIsSubworkflow ? "Subworkflows generally have no logs/scripts at this level.\nClick on the \"Open in new graph\" icon on the subworkflow step to open the subworkflow graph." : sublogsError ? dagStrings.logLoadFailed : (sublogOpen === generalLogPath ? dagStrings.statusReason(run.statusReason) : void 0) ?? dagStrings.noLogFound;
+	const currentSublog = sublogOpen === "" ? "" : preview ? dumpYaml(jobs[jobAndStep[0]]?.steps[Number(jobAndStep[1])]) : sublogsError || !sublogs ? missingLogText : sublogs;
 	const expansionKeys = useMemo(() => collectExpansionKeys(jobs, pathAppend), [jobs, pathAppend]);
 	const 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));
@@ -1982,20 +2080,20 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	};
 	const nextStep = useCallback((backward) => {
 		const sublogSplit = sublogOpen.split("/");
-		let job = sublogSplit[sublogSplit.length - 3];
+		let job = sublogSplit[sublogSplit.length - 3] ?? "";
 		let step = parseInt(sublogSplit[sublogSplit.length - 2].slice(5), 10);
 		const jobArr = Object.keys(jobs);
 		let idx = jobArr.indexOf(job);
 		if (backward) if (0 < step) step -= 1;
 		else {
 			if (idx === 0) idx = jobArr.length;
-			job = jobArr[idx - 1];
-			step = jobs[job].steps.length - 1;
+			job = jobArr[idx - 1] ?? "";
+			step = (jobs[job]?.steps.length ?? 0) - 1;
 		}
-		else if (jobs[job].steps.length - 1 > step) step += 1;
+		else if ((jobs[job]?.steps.length ?? 0) - 1 > step) step += 1;
 		else {
 			if (idx === jobArr.length - 1) idx = -1;
-			job = jobArr[idx + 1];
+			job = jobArr[idx + 1] ?? "";
 			step = 0;
 		}
 		setSublogOpen(sublogSplit.slice(0, -3).join("/") + `/${job}/step_${step}/` + sublogSplit.slice(-1)[0]);
@@ -2005,14 +2103,10 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 		else if (e.key === "ArrowLeft") nextStep(true);
 	}, [nextStep]);
 	useEffect(() => {
-		if ([`${pathAppend}/logs.out`, ""].includes(sublogOpen)) return;
+		if (!sublogIsStep) return;
 		window.addEventListener("keydown", handleKeyDown);
 		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [
-		handleKeyDown,
-		sublogOpen,
-		pathAppend
-	]);
+	}, [handleKeyDown, sublogIsStep]);
 	const summarySidebar = useMemo(() => /* @__PURE__ */ jsx(SidebarJobs, {
 		jobs,
 		pathPrefix: pathAppend,
@@ -2040,8 +2134,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	if (!Array.isArray(dependencyCols) || dependencyCols.length === 0 || !Array.isArray(dependencyCols[0]) || dependencyCols[0].length === 0 || !Array.isArray(dependencyCols[0][0]) || dependencyCols[0][0].length === 0) return;
 	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : now;
 	const runtime = toAbsHumanDuration(startDt, run.completedAt ? DateTime.fromISO(run.completedAt) : now);
-	const notGeneralLogs = `${pathAppend}/logs.out` !== sublogOpen;
-	const additionalBottomLeftBarComponents = notGeneralLogs ? /* @__PURE__ */ jsxs(Fragment, { children: [
+	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
 			className: "btn btn-neutral",
@@ -2059,7 +2152,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 			children: logName
 		})
 	] }) : void 0;
-	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogOpen && notGeneralLogs ? /* @__PURE__ */ jsx("button", {
+	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogOpen && sublogIsStep ? /* @__PURE__ */ jsx("button", {
 		type: "button",
 		className: "btn btn-neutral",
 		onClick: () => {
@@ -2079,8 +2172,8 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 					slots.runSessions && /* @__PURE__ */ jsx("div", {
 						className: "mb-4 overflow-y-auto",
 						children: slots.runSessions({
-							runId: run.id,
-							runNumber: run.number,
+							runId: run.id ?? "",
+							runNumber,
 							runActive: isRunActive(run.status)
 						})
 					}),
@@ -2136,7 +2229,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 									children: /* @__PURE__ */ jsxs(TooltipInfo, {
 										className: "flex items-center gap-x-1",
 										text: dagStrings.statusReason(run.statusReason) ?? "",
-										children: [/* @__PURE__ */ jsx(Indicator, { status: run.status }), dagStrings.statusLabel(run.status)]
+										children: [/* @__PURE__ */ jsx(Indicator, { status: runStatus }), dagStrings.statusLabel(runStatus)]
 									})
 								})]
 							}),
@@ -2173,7 +2266,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 							})
 						]
 					}),
-					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: run.executedJobs }),
+					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: jobs }),
 					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
 						className: "panel w-full border",
 						children: /* @__PURE__ */ jsx(TreeView, {
@@ -2216,10 +2309,11 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 										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) {
+											if ((executedJobsPath[executedJobsPathIdx]?.length ?? 0) > 0) {
 												resetGraph();
 												setExecutedJobsPath([[], ...executedJobsPath.slice(executedJobsPathIdx, 10)]);
 												setExecutedJobsPathIdx(0);
@@ -2230,6 +2324,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 									executedJobsPath.length > 1 && /* @__PURE__ */ jsxs("div", {
 										className: "flex",
 										children: [/* @__PURE__ */ jsx("button", {
+											type: "button",
 											onClick: () => {
 												if (executedJobsPath.length > executedJobsPathIdx + 1) {
 													resetGraph();
@@ -2239,6 +2334,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 											className: "btn btn-info mr-1 cursor-pointer w-10 h-6",
 											children: "<"
 										}), /* @__PURE__ */ jsx("button", {
+											type: "button",
 											onClick: () => {
 												if (executedJobsPathIdx - 1 >= 0) {
 													resetGraph();
@@ -2285,7 +2381,7 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 				children: /* @__PURE__ */ jsx("div", {
 					className: "flex w-full",
 					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
-						text: "Loading logs",
+						text: dagStrings.loadingLogs,
 						size: 70,
 						textSize: 18
 					}) : preview ? /* @__PURE__ */ jsxs("div", { children: [slots.yamlViewer?.({
@@ -2324,9 +2420,10 @@ function DependencyGraph({ run, preview = false, initialScale = 1, removeBorder,
 	});
 }
 function DependencyGraphPreview(inputs) {
+	const ymlJobs = inputs.yml?.["jobs"];
 	return /* @__PURE__ */ jsx(DependencyGraph, {
 		run: {
-			executedJobs: addCleanupSteps({ jobs: inputs.yml?.jobs || {} }),
+			executedJobs: addCleanupSteps({ jobs: isJobRecord(ymlJobs) ? ymlJobs : {} }),
 			number: 0,
 			workflowName: ""
 		},