@parallelworks/ui 0.19.0 → 0.19.1

package/dist/graph/TreeView.js

@@ -0,0 +1,711 @@
+import { useRunFile, useSlots, useWorkflowEngine } from "../components/Provider.js";
+import { ChevronRightIcon, LoaderIcon } from "../icons.js";
+import { Indicator } from "../components/Indicator.js";
+import { LogViewer } from "../logviewer/LogViewer.js";
+import { toAbsHumanDuration } from "../duration.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 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
+export { TreeView as default };