@parallelworks/ui 0.20.0 → 0.21.1

package/dist/graph/TreeView.js

@@ -1,33 +1,32 @@
 import { useRunFile, useSlots, useWorkflowEngine } from "../components/Provider.js";
-import { ChevronRightIcon, LoaderIcon } from "../icons.js";
+import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { LoaderIcon } from "../components/StatusIcons.js";
 import { Indicator } from "../components/Indicator.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { toAbsHumanDuration } from "../duration.js";
+import { Collapse } from "./Collapse.js";
+import { jobLabel, toggled } from "./util.js";
 import cx from "classnames";
 import { useCallback, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { DateTime } from "luxon";
 import { AnimatePresence, motion } from "framer-motion";
 //#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 elapsed({ startedAt, completedAt }) {
+	if (!startedAt) return "";
+	const end = completedAt ? DateTime.fromISO(completedAt) : DateTime.now();
+	return toAbsHumanDuration(DateTime.fromISO(startedAt), 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 Chevron({ open, hidden = false }) {
+	return /* @__PURE__ */ jsx(motion.div, {
+		animate: { rotate: open ? 90 : 0 },
+		transition: { duration: .15 },
+		className: cx("flex-shrink-0", hidden ? "invisible" : "text-[var(--theme-muted-text-color)]"),
+		children: /* @__PURE__ */ jsx(LuChevronRight, { className: cx("w-4 h-4", open && "text-[var(--theme-element)]") })
+	});
 }
-function InlineLogViewer({ slug, jobName, stepIndex }) {
-	const logPath = useWorkflowEngine().stepLogPath("", jobName, stepIndex);
+function StepLogs({ slug, prefix, jobName, stepIndex }) {
+	const logPath = useWorkflowEngine().stepLogPath(prefix, 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)]",
@@ -38,7 +37,7 @@ function InlineLogViewer({ slug, jobName, stepIndex }) {
 		children: "No logs available"
 	});
 	return /* @__PURE__ */ jsx("div", {
-		className: "border-t border-[var(--theme-border)] ",
+		className: "border-t border-[var(--theme-border)]",
 		children: /* @__PURE__ */ jsx(LogViewer, {
 			log: logs,
 			width: "100%",
@@ -49,9 +48,10 @@ 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);
+function JobRow({ jobName, job, isExpanded, onToggle, prefix, state }) {
+	const hasSteps = !!job.steps?.length;
+	const dependencies = Array.isArray(job.needs) ? job.needs : [];
+	const duration = elapsed(job);
 	const panelId = useId();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "border-b border-[var(--theme-border)] last:border-b-0",
@@ -62,26 +62,24 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 			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(Chevron, {
+					open: isExpanded,
+					hidden: !hasSteps
 				}),
 				/* @__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", {
+						children: jobLabel(jobName, job)
+					}), 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)
+							children: jobLabel(dep)
 						}, dep))]
 					})]
 				}),
@@ -91,75 +89,37 @@ function JobRow({ jobName, job, isExpanded, onToggle, dependencies, workflowName
 					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);
-					})
+		}), /* @__PURE__ */ jsx(Collapse, {
+			expanded: isExpanded && hasSteps,
+			id: panelId,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ml-[38px] border-l-2 border-[var(--theme-border)]",
+				children: job.steps?.map((step, index) => {
+					const stepKey = `${prefix}${jobName}:${index}`;
+					return /* @__PURE__ */ jsx(StepRow, {
+						step,
+						index,
+						isExpanded: state.expandedSteps.has(stepKey),
+						onToggle: () => state.onStepToggle(stepKey),
+						prefix,
+						jobName,
+						state
+					}, stepKey);
 				})
 			})
 		})]
 	});
 }
-function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, slug, jobName, expandedJobs, onJobToggle, expandedSteps, onStepToggle, depth = 0 }) {
+function StepRow({ step, index, isExpanded, onToggle, prefix, jobName, state }) {
 	const engine = useWorkflowEngine();
 	const slots = useSlots();
-	const duration = getStepDuration(step);
+	const duration = elapsed(step);
 	const label = engine.stepLabel(step, index);
-	const isSubworkflow = !!step.subworkflow;
+	const subworkflow = 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]);
+	const subworkflowJobs = subworkflow?.jobs ?? {};
+	const subworkflowJobNames = Object.keys(subworkflowJobs).filter((name) => subworkflowJobs[name]?.if !== false);
+	const subworkflowPrefix = `${prefix}subworkflows/${jobName}/step_${index}/`;
 	return /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsxs("button", {
 			type: "button",
@@ -168,21 +128,16 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 			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(Chevron, { open: isExpanded }),
 				/* @__PURE__ */ jsx(Indicator, { status: step.status }),
-				isSubworkflow && slots.workflowIcon?.({
-					image: step.subworkflow?.image,
-					type: step.subworkflow?.type,
+				subworkflow && slots.workflowIcon?.({
+					image: subworkflow.image,
+					type: 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", {
+					children: [label, subworkflow && /* @__PURE__ */ jsx("span", {
 						className: "ml-2 text-xs text-[var(--theme-muted-text-color)]",
 						children: "(subworkflow)"
 					})]
@@ -193,351 +148,39 @@ function StepRow({ step, index, isExpanded, onToggle, workflowName, runNumber, s
 				})
 			]
 		}),
-		/* @__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(Collapse, {
+			expanded: isExpanded && !subworkflow,
+			id: panelId,
+			children: /* @__PURE__ */ jsx(StepLogs, {
+				slug: state.slug,
+				prefix,
+				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);
-					})
+		/* @__PURE__ */ jsx(Collapse, {
+			expanded: isExpanded && !!subworkflow && subworkflowJobNames.length > 0,
+			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 = `${prefix}${jobName}:${index}:${subJobName}`;
+					return /* @__PURE__ */ jsx(JobRow, {
+						jobName: subJobName,
+						job: subJob,
+						isExpanded: state.expandedJobs.has(subJobKey),
+						onToggle: () => state.onJobToggle(subJobKey),
+						prefix: subworkflowPrefix,
+						state
+					}, 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 }) {
+function TreeView({ jobs, slug, expandedJobs, setExpandedJobs }) {
 	const engine = useWorkflowEngine();
 	const visibleJobNames = useMemo(() => {
 		return Object.keys(jobs).filter((jobName) => jobs[jobName]?.if !== false);
@@ -558,22 +201,13 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 		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 rowState = {
+		slug,
+		expandedJobs: expandedSubworkflowJobs,
+		onJobToggle: (jobKey) => setExpandedSubworkflowJobs((prev) => toggled(prev, jobKey)),
+		expandedSteps,
+		onStepToggle: (stepKey) => setExpandedSteps((prev) => toggled(prev, stepKey))
+	};
 	const expandAll = useCallback(() => {
 		setExpandedJobs(new Set(visibleJobNames));
 	}, [visibleJobNames, setExpandedJobs]);
@@ -583,14 +217,6 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 		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", {
@@ -621,7 +247,9 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 			const rendered = [];
 			const seenMatrixGroups = /* @__PURE__ */ new Set();
 			for (const jobName of visibleJobNames) {
-				const matrixOrigin = jobs[jobName]?._matrix?.originaljob;
+				const job = jobs[jobName];
+				if (!job) continue;
+				const matrixOrigin = job._matrix?.originaljob;
 				if (matrixOrigin) {
 					if (seenMatrixGroups.has(matrixOrigin)) continue;
 					seenMatrixGroups.add(matrixOrigin);
@@ -638,12 +266,7 @@ function TreeView({ jobs, workflowName, runNumber, slug, expandedJobs, setExpand
 							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(Chevron, { open: isGroupExpanded }),
 								/* @__PURE__ */ jsx(Indicator, { status: aggStatus }),
 								/* @__PURE__ */ jsxs("span", {
 									className: "font-mono text-sm text-[var(--theme-app)]",
@@ -672,35 +295,26 @@ 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],
-								isExpanded: expandedJobs.has(memberName),
-								onToggle: () => toggleJob(memberName),
-								dependencies: dependenciesMap[memberName],
-								workflowName,
-								runNumber,
-								slug,
-								expandedJobs: expandedSubworkflowJobs,
-								onJobToggle: toggleSubworkflowJob,
-								expandedSteps,
-								onStepToggle: toggleStep
-							}, memberName))
+							children: group.members.map((memberName) => {
+								const member = jobs[memberName];
+								return member ? /* @__PURE__ */ jsx(JobRow, {
+									jobName: memberName,
+									job: member,
+									isExpanded: expandedJobs.has(memberName),
+									onToggle: () => toggleJob(memberName),
+									prefix: "",
+									state: rowState
+								}, memberName) : null;
+							})
 						}) })]
 					}, `matrix-${matrixOrigin}`));
 				} else rendered.push(/* @__PURE__ */ jsx(JobRow, {
 					jobName,
-					job: jobs[jobName],
+					job,
 					isExpanded: expandedJobs.has(jobName),
 					onToggle: () => toggleJob(jobName),
-					dependencies: dependenciesMap[jobName],
-					workflowName,
-					runNumber,
-					slug,
-					expandedJobs: expandedSubworkflowJobs,
-					onJobToggle: toggleSubworkflowJob,
-					expandedSteps,
-					onStepToggle: toggleStep
+					prefix: "",
+					state: rowState
 				}, jobName));
 			}
 			return rendered;