@parallelworks/ui 0.57.0 → 0.59.0

package/dist/components/stickyTop.js

@@ -0,0 +1,93 @@
+import { useLayoutEffect } from "react";
+//#region src/components/stickyTop.ts
+/** Pins a bar to the top of its scroller, over what scrolls under it.
+*  `useStickyTop` moves it below whatever else is pinned there. */
+var stickyClasses = "sticky top-0 z-(--layer-sticky) bg-(--theme-app-bg)";
+var scrolls = (style) => /auto|scroll|hidden|overlay/.test(`${style.overflow} ${style.overflowX} ${style.overflowY}`);
+/** The box a sticky element sticks to: its nearest ancestor that scrolls, or
+*  the document's when none does. */
+function scrollContainer(el) {
+	const root = el.ownerDocument.documentElement;
+	for (let node = el.parentElement; node && node !== root; node = node.parentElement) if (scrolls(getComputedStyle(node))) return node;
+	return root;
+}
+/** Elements laid out as children of `parent`'s box: its children, with those
+*  of a `display: contents` child (such as a tab row's root) in its place. */
+function boxChildren(nodes, into) {
+	for (const node of nodes) {
+		into.push(node);
+		if (getComputedStyle(node).display === "contents") boxChildren(node.children, into);
+	}
+}
+function chromeAbove(el, scroller) {
+	const above = {
+		chrome: [],
+		parents: [],
+		siblings: []
+	};
+	for (let node = el; node !== scroller && node.parentElement;) {
+		const parent = node.parentElement;
+		const earlier = [];
+		for (let sib = node.previousElementSibling; sib; sib = sib.previousElementSibling) earlier.push(sib);
+		const laidOut = [];
+		boxChildren(earlier, laidOut);
+		for (const sib of laidOut) {
+			above.siblings.push(sib);
+			const style = getComputedStyle(sib);
+			if (style.display === "contents") above.parents.push(sib);
+			if (style.position === "sticky" && style.top !== "auto" && sib instanceof HTMLElement) above.chrome.push(sib);
+		}
+		above.parents.push(parent);
+		node = parent;
+	}
+	return above;
+}
+/** Where `chrome`'s bottom edge sits, below the scroller's top, while it's pinned. */
+function pinnedBottom(chrome) {
+	const height = chrome.getBoundingClientRect().height;
+	return height > 0 ? (Number.parseFloat(getComputedStyle(chrome).top) || 0) + height : 0;
+}
+/**
+* Pins a `sticky` element just below whatever its scroller already pins at
+* the top, such as a page header, a toolbar and a tab row, rather than at
+* `top: 0` behind them. It finds them in the page, so neither they nor the
+* host declare anything, and it follows them as they change height (a toolbar
+* wrapping on a narrow screen), move, or come and go, before the browser
+* paints. Chrome that uses it stacks: each piece pins under the ones before
+* it, and its own `top` moving is a change the pieces after it follow.
+* In a box that scrolls on its own, nothing sits above, so it pins at 0.
+*/
+function useStickyTop(el, enabled) {
+	useLayoutEffect(() => {
+		if (!enabled || !el) return;
+		let chrome = [];
+		const place = () => {
+			const top = `${Math.max(0, ...chrome.map(pinnedBottom))}px`;
+			if (el.style.top !== top) el.style.top = top;
+		};
+		const resizes = new ResizeObserver(place);
+		const changes = new MutationObserver(gather);
+		function gather() {
+			if (!el) return;
+			const above = chromeAbove(el, scrollContainer(el));
+			chrome = above.chrome;
+			resizes.disconnect();
+			changes.disconnect();
+			for (const node of chrome) resizes.observe(node);
+			for (const parent of above.parents) changes.observe(parent, { childList: true });
+			for (const sib of above.siblings) changes.observe(sib, {
+				attributes: true,
+				attributeFilter: ["class", "style"]
+			});
+			place();
+		}
+		gather();
+		return () => {
+			resizes.disconnect();
+			changes.disconnect();
+			el.style.top = "";
+		};
+	}, [el, enabled]);
+}
+//#endregion
+export { stickyClasses, useStickyTop };

package/dist/file-explorer/FileExplorer.js

@@ -1,6 +1,6 @@
 import { cx } from "../cx.js";
 import { buttonClasses } from "../components/buttonClasses.js";
-import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
+import { AccessIcon, ChevronDownIcon, ChevronRightIcon, CollapseIcon, DownloadIcon, FileIcon, FileTextIcon, FolderIcon, FolderTreeIcon, LinkIcon, PreviewIcon, ShareIcon, TrashIcon, UploadIcon } from "../icons.js";
 import { MenuItem, MenuPopup, MenuSeparator } from "../components/Menu.js";
 import { safeUrl } from "../safeUrl.js";
 import { Loader } from "../components/Loader.js";
@@ -676,24 +676,30 @@ function FileExplorer({ storages, onRefresh, refreshKey, onOpenFile, showUserHie
 			...open,
 			onClick: () => handleSelectTreeItem(node.path, node)
 		}];
-		const uriExtras = uris.map((value) => ({
-			label: `${getUriScheme(value).toUpperCase()} URI`,
-			value,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
-		}));
-		const pageUrl = absoluteUrl(href);
-		if (pageUrl) uriExtras.unshift({
-			label: t.preview.link,
-			value: pageUrl,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
+		const copy = copySubmenu({
+			name: isFile ? node.name : void 0,
+			extra: [
+				{
+					label: t.preview.path,
+					value: node.root ? void 0 : getObjectKeyFromNode(node).replace(/\/$/, ""),
+					icon: /* @__PURE__ */ jsx(FolderTreeIcon, {})
+				},
+				{
+					label: t.preview.link,
+					value: absoluteUrl(href),
+					icon: /* @__PURE__ */ jsx(LinkIcon, {})
+				},
+				...uris.map((value) => ({
+					label: `${getUriScheme(value).toUpperCase()} URI`,
+					value,
+					icon: /* @__PURE__ */ jsx(LinkIcon, {})
+				}))
+			]
 		});
 		return assembleRowMenu({
 			lead,
 			actions,
-			copy: uriExtras.length > 0 ? copySubmenu({
-				name: isFile ? node.name : void 0,
-				extra: uriExtras
-			}) : void 0
+			copy: copy.items.length > 0 ? copy : void 0
 		});
 	};
 	const openNodeContextMenu = (e, node) => {

package/dist/graph/DependencyGraph.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from 'react';
 import type { GraphLayout } from '../editing.js';
 import type { DependencyGraphEditor } from './editorApi.js';
 import { type RunLink, type WorkflowJob } from './types.js';
@@ -17,7 +18,7 @@ interface GraphRun {
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
 }
-export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop, children, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
@@ -30,6 +31,18 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     /** The workflow as written, for what the editor's expressions can read. */
     workflow?: Record<string, unknown> | undefined;
     fixedHeight?: string | undefined;
+    /** A step to open; `prefix` is its `subworkflows/<job>/step_<n>/` chain when it runs inside a subworkflow. */
+    openStep?: {
+        job: string;
+        step: number;
+        prefix?: string | undefined;
+    } | undefined;
+    /** Called when the log dialog closes, so a host can forget the step it asked to open. */
+    onCloseLog?: (() => void) | undefined;
+    /** Pins the job list this many pixels below the top of the page's scroll area, under the host's own pinned bars. */
+    sidebarStickyTop?: number | undefined;
+    /** Shown under the annotations, above the graph. */
+    children?: ReactNode;
 }): import("react").JSX.Element | undefined;
 export declare function DependencyGraphPreview(inputs: {
     yml?: Record<string, unknown>;

package/dist/graph/DependencyGraph.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, FileTextIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
+import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, CloseIcon, FileTextIcon, ZoomInIcon, ZoomOutIcon } from "../icons.js";
 import { Loader } from "../components/Loader.js";
 import { useRunFile, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { Button } from "../components/Button.js";
@@ -10,6 +10,7 @@ import { DisclosurePanel } from "../components/Disclosure.js";
 import { formatDateTime } from "../format.js";
 import { Elapsed } from "../components/relativeTime.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
+import { Tabs } from "../components/Tabs.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { initializeValues } from "../form/lib.js";
 import { AnnotationBanner } from "./AnnotationBanner.js";
@@ -27,6 +28,7 @@ import { routeConnectors, sameBoxes } from "./connectorGeometry.js";
 import { isJobRecord } from "./types.js";
 import { computeGraphLayout, displayJobsOf, hopDistances, positionsOf } from "./graphLayout.js";
 import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
+import { StepSummary } from "./StepSummary.js";
 import TreeView from "./TreeView.js";
 import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -35,6 +37,12 @@ import { flushSync } from "react-dom";
 import { DateTime } from "luxon";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 //#region src/graph/DependencyGraph.tsx
+var stepTabFiles = {
+	summary: "summary.md",
+	logs: "logs.out",
+	script: "script-unstable-redacted.sh"
+};
+var fileBeside = (path, file) => path.slice(0, path.lastIndexOf("/") + 1) + file;
 function ViewToggle({ viewMode, setViewMode }) {
 	const { dag: t } = useStrings();
 	return /* @__PURE__ */ jsxs("div", {
@@ -193,6 +201,11 @@ function offsetWithin(el, ancestor) {
 		y
 	};
 }
+function unscrolledTop(el) {
+	let top = el.getBoundingClientRect().top;
+	for (let cur = el.parentElement; cur; cur = cur.parentElement) top += cur.scrollTop;
+	return top;
+}
 function parsePrefixToPath(prefix) {
 	const parts = prefix.split("/").filter(Boolean);
 	const path = [];
@@ -683,7 +696,7 @@ function graphBounds(content) {
 	}
 	return bounds;
 }
-function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop, children }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const rootJobs = isJobRecord(run.executedJobs) ? run.executedJobs : {};
@@ -724,7 +737,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			const cur = containerRef.current;
 			if (!cur) return;
 			setTopOffset((prev) => {
-				const next = cur.getBoundingClientRect().top;
+				const next = unscrolledTop(cur);
 				return prev === next ? prev : next;
 			});
 		};
@@ -768,6 +781,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		};
 	}, [preview, fixedHeight]);
 	const { common, dag: dagStrings } = useStrings();
+	const stepHeaderRef = useRef(null);
 	const slots = useSlots();
 	const [executedJobsPath, setExecutedJobsPath] = useState([[]]);
 	const [executedJobsPathIdx, setExecutedJobsPathIdx] = useState(0);
@@ -827,7 +841,44 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		setMatrixOpen((prev) => toggled(prev, key));
 		requestAnimationFrame(invalidateConnectors);
 	}, [invalidateConnectors]);
-	const { data: sublogs, isLoading: sublogsLoading, error: sublogsError } = useRunFile(runSlug, sublogOpen || null, preview ? void 0 : { refreshInterval: 2e3 });
+	const nestingDepth = currentPath.length / 5;
+	const levelPrefixes = [];
+	for (let i = 0; i < nestingDepth; i++) levelPrefixes.push(`subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]}/`);
+	const pathAppend = levelPrefixes.join("");
+	let generalLogPath = "logs.out";
+	if (nestingDepth > 0) {
+		const lastJob = String(currentPath[5 * (nestingDepth - 1)] ?? "");
+		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
+		generalLogPath = engine.stepLogPath(levelPrefixes.slice(0, -1).join(""), lastJob, lastStep);
+	}
+	const openJob = openStep?.job;
+	const openStepIndex = openStep?.step;
+	const openPrefix = openStep?.prefix ?? "";
+	useEffect(() => {
+		if (openJob !== void 0 && openStepIndex !== void 0) setSublogOpen(fileBeside(engine.stepLogPath(openPrefix, openJob, openStepIndex), "summary.md"));
+	}, [
+		engine,
+		openJob,
+		openStepIndex,
+		openPrefix
+	]);
+	const [sublogJob = "", sublogStepDir] = sublogOpen.split("/").slice(-3, -1);
+	const sublogStep = sublogStepDir === void 0 ? void 0 : sublogStepDir.split("_")[1] ?? "";
+	const sublogIsStep = sublogStep !== void 0;
+	const sublogJobs = sublogOpen === generalLogPath ? jobs : walkJobPath(rootJobs, parsePrefixToPath(sublogOpen.split("/").slice(0, -4).join("/")));
+	const sublogStepData = sublogIsStep ? sublogJobs[sublogJob]?.steps[Number(sublogStep)] : void 0;
+	const stepTitle = sublogIsStep ? `${jobLabel(sublogJob, sublogJobs[sublogJob])} › ${engine.stepLabel(sublogStepData ?? {}, Number(sublogStep))}` : "";
+	const sublogIsSubworkflow = !!sublogStepData?.subworkflow;
+	const sublogDir = sublogOpen.slice(0, sublogOpen.lastIndexOf("/") + 1);
+	const sublogFile = sublogOpen.slice(sublogDir.length);
+	const sublogHasSummary = !preview && !!sublogStepData?.summary;
+	const sublogTab = sublogFile === "summary.md" && sublogHasSummary ? "summary" : sublogFile === "logs.out" || sublogFile === "summary.md" ? "logs" : "script";
+	const stepTabs = !sublogIsStep || preview || sublogIsSubworkflow ? [] : sublogHasSummary ? [
+		"summary",
+		"logs",
+		"script"
+	] : ["logs", "script"];
+	const { data: sublogs, isLoading: sublogsLoading, error: sublogsError } = useRunFile(runSlug, sublogOpen === "" || sublogTab === "summary" ? null : sublogFile === "summary.md" ? `${sublogDir}logs.out` : sublogOpen, preview ? void 0 : { refreshInterval: 2e3 });
 	useEffect(() => {
 		if (sublogOpen.endsWith("/script-unstable-redacted.sh") && !sublogsLoading && (sublogsError || !sublogs)) setSublogOpen(sublogOpen.replace(/script-unstable-redacted\.sh$/, "script-unstable.sh"));
 	}, [
@@ -836,14 +887,6 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		sublogsError,
 		sublogsLoading
 	]);
-	const [sublogJob = "", sublogStepDir] = sublogOpen.split("/").slice(-3, -1);
-	const sublogStep = sublogStepDir === void 0 ? void 0 : sublogStepDir.split("_")[1] ?? "";
-	const sublogIsStep = sublogStep !== void 0;
-	const sublogStepData = sublogIsStep ? jobs[sublogJob]?.steps[Number(sublogStep)] : void 0;
-	const logName = sublogIsStep ? `Job: ${jobLabel(sublogJob)} \nStep: ${sublogStepData?.name || `Step ${sublogStep}`}` : "";
-	const sublogIsSubworkflow = !!sublogStepData?.subworkflow;
-	const sublogFileStart = sublogOpen.lastIndexOf("/") + 1;
-	const sublogShowsLog = sublogOpen.slice(sublogFileStart) === "logs.out";
 	const rootGraph = useMemo(() => computeGraphLayout(engine, jobs, engine.matrixGroups(jobs), placed), [
 		engine,
 		jobs,
@@ -1022,16 +1065,6 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		windowSize,
 		executedJobsPathIdx
 	]);
-	const nestingDepth = currentPath.length / 5;
-	const levelPrefixes = [];
-	for (let i = 0; i < nestingDepth; i++) levelPrefixes.push(`subworkflows/${currentPath[5 * i]}/step_${currentPath[5 * i + 2]}/`);
-	const pathAppend = levelPrefixes.join("");
-	let generalLogPath = "logs.out";
-	if (nestingDepth > 0) {
-		const lastJob = String(currentPath[5 * (nestingDepth - 1)] ?? "");
-		const lastStep = currentPath[5 * (nestingDepth - 1) + 2] ?? "";
-		generalLogPath = engine.stepLogPath(levelPrefixes.slice(0, -1).join(""), lastJob, lastStep);
-	}
 	const missingLogText = sublogIsSubworkflow ? "Subworkflows generally have no logs/scripts at this level.\nClick on the \"Open in new graph\" icon on the subworkflow step to open the subworkflow graph." : sublogsError ? dagStrings.logLoadFailed : (sublogOpen === generalLogPath ? dagStrings.statusReason(run.statusReason) : void 0) ?? dagStrings.noLogFound;
 	const currentSublog = sublogOpen === "" ? "" : preview ? engine.toYaml(sublogStepData) : sublogsError || !sublogs ? missingLogText : sublogs;
 	const expansionKeys = useMemo(() => engine.expansionKeys(jobs, pathAppend), [
@@ -1087,6 +1120,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		setSublogOpen(`${sublogSplit.slice(0, -3).join("/")}/${job}/step_${step}/${sublogSplit.slice(-1)[0]}`);
 	}, [jobs, sublogOpen]);
 	const handleKeyDown = useCallback((e) => {
+		const target = e.target instanceof Element ? e.target : null;
+		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || e.shiftKey || target?.closest("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"], [role=\"tablist\"], [role=\"listbox\"], [role=\"menu\"], [role=\"slider\"], [role=\"radiogroup\"]")) return;
 		if (e.key === "ArrowRight") nextStep(false);
 		else if (e.key === "ArrowLeft") nextStep(true);
 	}, [nextStep]);
@@ -1129,40 +1164,99 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		})
 	}) : void 0;
 	const startDt = run.createdAt ? DateTime.fromISO(run.createdAt) : shownAt;
-	const additionalBottomLeftBarComponents = sublogIsStep ? /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(IconButton, {
-			variant: "outline",
+	const jobNames = Object.keys(jobs);
+	const stepCount = jobNames.reduce((n, name) => n + (jobs[name]?.steps.length ?? 0), 0);
+	const stepPosition = jobNames.slice(0, Math.max(0, jobNames.indexOf(sublogJob))).reduce((n, name) => n + (jobs[name]?.steps.length ?? 0), 0) + Number(sublogStep ?? 0) + 1;
+	const stepPager = sublogIsStep ? /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 items-center",
+		children: [/* @__PURE__ */ jsx(IconButton, {
 			icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
 			label: dagStrings.previousStep,
 			onClick: () => nextStep(true)
-		}),
-		/* @__PURE__ */ jsx(IconButton, {
-			variant: "outline",
+		}), /* @__PURE__ */ jsx(IconButton, {
 			icon: /* @__PURE__ */ jsx(ArrowRightIcon, {}),
 			label: dagStrings.nextStep,
 			onClick: () => nextStep(false)
-		}),
-		/* @__PURE__ */ jsx("span", {
-			className: "pt-0.5 whitespace-pre-wrap text-xs",
-			children: logName
-		})
-	] }) : void 0;
-	const additionalBottomRightBarComponents = (!preview || sublogIsSubworkflow) && sublogIsStep ? /* @__PURE__ */ jsx(Button, {
-		variant: "secondary",
-		size: "sm",
-		onClick: () => {
-			if (sublogIsSubworkflow) {
-				openInNewGraph(pathAppend, sublogJob, parseInt(sublogStep ?? "", 10));
-				setSublogOpen("");
-			} else setSublogOpen(sublogOpen.slice(0, sublogFileStart) + (sublogShowsLog ? "script-unstable-redacted.sh" : "logs.out"));
-		},
-		children: sublogIsSubworkflow ? "Open Subworkflow" : sublogShowsLog ? "Show Script" : "Show Logs"
+		})]
+	}) : void 0;
+	const stepCounter = sublogIsStep && sublogJobs === jobs ? dagStrings.stepOf(stepPosition, stepCount) : void 0;
+	const stepTabLabels = {
+		summary: dagStrings.summaryTab,
+		logs: dagStrings.logsTab,
+		script: dagStrings.scriptTab
+	};
+	const closeLog = () => {
+		setSublogOpen("");
+		onCloseLog?.();
+	};
+	const narrowDialog = windowSize.w < 640;
+	const stepHeader = sublogIsStep ? /* @__PURE__ */ jsxs("div", {
+		ref: stepHeaderRef,
+		className: "grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-2 border-b border-(--theme-border) px-2 py-2 sm:flex sm:gap-x-3",
+		children: [
+			stepPager,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-baseline gap-x-2.5 sm:flex-1",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "min-w-0 truncate font-semibold",
+					title: stepTitle,
+					children: stepTitle
+				}), stepCounter && /* @__PURE__ */ jsx("span", {
+					className: "hidden shrink-0 text-xs tabular-nums theme-muted-text sm:inline",
+					children: stepCounter
+				})]
+			}),
+			sublogIsSubworkflow && /* @__PURE__ */ jsx(Button, {
+				className: narrowDialog ? "col-span-3 row-start-2 justify-self-start" : void 0,
+				variant: "secondary",
+				size: "sm",
+				onClick: () => {
+					openInNewGraph(pathAppend, sublogJob, parseInt(sublogStep ?? "", 10));
+					setSublogOpen("");
+				},
+				children: dagStrings.openSubworkflow
+			}),
+			stepTabs.length > 0 && /* @__PURE__ */ jsx(Tabs, {
+				className: narrowDialog ? "col-span-3 row-start-2 [&>[role=tablist]]:flex-1" : void 0,
+				label: stepTitle,
+				variant: "segmented",
+				fill: narrowDialog,
+				items: stepTabs.map((tab) => ({
+					value: tab,
+					label: stepTabLabels[tab]
+				})),
+				value: sublogTab,
+				onValueChange: (tab) => setSublogOpen(sublogDir + stepTabFiles[tab])
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				className: "col-start-3 row-start-1",
+				icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+				label: common.close,
+				onClick: closeLog
+			})
+		]
 	}) : void 0;
+	const sublogLoading = sublogsLoading && (!sublogs || !runNumber);
+	const sublogLoader = /* @__PURE__ */ jsx(Loader, {
+		label: dagStrings.loadingLogs,
+		size: 70
+	});
+	const stepLogViewer = /* @__PURE__ */ jsx(LogViewer, {
+		log: currentSublog.slice(-1e5),
+		height: sublogIsStep ? "100%" : windowSize.h / 1.2,
+		width: sublogIsStep ? "100%" : windowSize.w / 1.2,
+		hideExpand: true,
+		enableWorkflowCommands: true
+	});
 	const graph = /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col lg:flex-row w-full",
 		children: [
 			!preview && /* @__PURE__ */ jsxs("div", {
-				className: "hidden lg:block lg:w-[280px] flex-shrink-0 lg:mr-1",
+				className: cx("hidden lg:block lg:w-[280px] flex-shrink-0 lg:mr-1", sidebarStickyTop !== void 0 && "lg:sticky lg:self-start lg:overflow-y-auto"),
+				style: sidebarStickyTop !== void 0 ? {
+					top: sidebarStickyTop,
+					maxHeight: `calc(100dvh - ${sidebarStickyTop + 24}px)`
+				} : void 0,
 				children: [
 					slots.runSessions && /* @__PURE__ */ jsx("div", {
 						className: "mb-4 overflow-y-auto",
@@ -1267,6 +1361,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 						]
 					}),
 					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: jobs }),
+					children,
 					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
 						className: "panel w-full border",
 						children: /* @__PURE__ */ jsx(TreeView, {
@@ -1354,45 +1449,42 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			}),
 			/* @__PURE__ */ jsx(Modal, {
 				open: sublogOpen !== "",
-				onClose: () => setSublogOpen(""),
-				"aria-label": logName.replace(/\s+/g, " ") || sublogOpen.slice(sublogFileStart),
+				onClose: closeLog,
+				"aria-label": stepTitle || sublogFile,
+				initialFocus: () => stepHeaderRef.current?.querySelector("[role=\"tab\"][aria-selected=\"true\"]") ?? true,
 				align: "center",
-				className: "max-h-full overflow-y-auto p-4 sm:p-6",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex w-full",
-					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
-						label: dagStrings.loadingLogs,
-						size: 70
-					}) : preview ? /* @__PURE__ */ jsxs("div", { children: [slots.yamlViewer?.({
+				className: sublogIsStep ? "max-h-full overflow-hidden bg-(--theme-panel-bg) p-0" : "max-h-full overflow-y-auto p-4 sm:p-6",
+				children: sublogIsStep ? /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col",
+					style: preview ? { width: window.innerWidth / 1.4 } : {
+						width: windowSize.w / 1.2,
+						height: windowSize.h / 1.2
+					},
+					children: [stepHeader, preview ? sublogLoading ? /* @__PURE__ */ jsx("div", {
+						className: "flex justify-center py-16",
+						children: sublogLoader
+					}) : slots.yamlViewer?.({
 						value: currentSublog,
 						height: window.innerHeight / 1.4,
 						width: window.innerWidth / 1.4,
 						contentKey: `editor_${sublogOpen}`
 					}) ?? /* @__PURE__ */ jsx("pre", {
-						className: "h-full overflow-auto text-xs p-4",
-						style: {
-							height: window.innerHeight / 1.4,
-							width: window.innerWidth / 1.4
-						},
+						className: "overflow-auto p-4 text-xs",
+						style: { height: window.innerHeight / 1.4 },
 						children: currentSublog
-					}), /* @__PURE__ */ jsxs("div", {
-						className: "flex theme-panel select-none items-center gap-x-2 p-2",
-						children: [/* @__PURE__ */ jsx("div", {
-							className: "w-full flex flex-row gap-x-2 items-center",
-							children: /* @__PURE__ */ jsx("div", {
-								className: "flex gap-x-2 w-full",
-								children: additionalBottomLeftBarComponents
-							})
-						}), additionalBottomRightBarComponents]
-					})] }) : /* @__PURE__ */ jsx(LogViewer, {
-						log: currentSublog.slice(-1e5),
-						height: windowSize.h / 1.2,
-						width: windowSize.w / 1.2,
-						hideExpand: true,
-						additionalBottomLeftBarComponents,
-						additionalBottomRightBarComponents,
-						enableWorkflowCommands: true
-					})
+					}) : /* @__PURE__ */ jsx("div", {
+						className: "flex min-h-0 flex-1 flex-col",
+						children: sublogTab === "summary" ? /* @__PURE__ */ jsx(StepSummary, {
+							runSlug,
+							path: `${sublogDir}summary.md`
+						}) : sublogLoading ? /* @__PURE__ */ jsx("div", {
+							className: "flex flex-1 items-center justify-center",
+							children: sublogLoader
+						}) : stepLogViewer
+					})]
+				}) : /* @__PURE__ */ jsx("div", {
+					className: "flex w-full",
+					children: sublogLoading ? sublogLoader : stepLogViewer
 				})
 			})
 		]

package/dist/graph/JobSummary.js

@@ -1,5 +1,5 @@
 import { cx } from "../cx.js";
-import { FileTextIcon, OpenInNewGraphIcon } from "../icons.js";
+import { FileTextIcon, OpenInNewGraphIcon, SummaryIcon } from "../icons.js";
 import { Tooltip } from "../components/Tooltip.js";
 import { useNavigation, useSlots, useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
@@ -30,7 +30,7 @@ function UsesIcon({ uses, subworkflow }) {
 	});
 }
 function Joblist(inputs) {
-	const { jobActions } = useStrings();
+	const { dag, jobActions } = useStrings();
 	const engine = useWorkflowEngine();
 	return inputs.jobNames.map((jobName) => {
 		if (inputs.jobs[jobName]?._matrixGroup) return null;
@@ -68,7 +68,17 @@ function Joblist(inputs) {
 							onClick: () => inputs.onStepClick(jobName, i),
 							className: cx(inputs.preview ? "ml-1.5" : "ml-4", "gap-x-1.5 flex items-center text-left"),
 							"data-testid": stepLabel,
-							children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(RunStatusIcon, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
+							children: [
+								inputs.preview ? "↳" : /* @__PURE__ */ jsx(RunStatusIcon, { status: step.status }),
+								/* @__PURE__ */ jsx("div", { children: stepLabel }),
+								step.summary && !inputs.preview && /* @__PURE__ */ jsx(Tooltip, {
+									content: dag.hasSummary,
+									children: /* @__PURE__ */ jsx(SummaryIcon, {
+										"aria-label": dag.hasSummary,
+										className: "w-[1.1em] h-[1.1em] shrink-0 text-(--theme-muted-text-color)"
+									})
+								})
+							]
 						});
 						return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
 							className: cx("flex items-center", step.status === "skipped" || step.status === "skipped-failed" ? "cursor-default" : "cursor-pointer"),

package/dist/graph/StepSummary.d.ts

@@ -0,0 +1,4 @@
+export declare function StepSummary({ runSlug, path }: {
+    runSlug: string;
+    path: string;
+}): import("react").JSX.Element;

package/dist/graph/StepSummary.js

@@ -0,0 +1,31 @@
+import { Loader } from "../components/Loader.js";
+import { useRunFile, useStrings } from "../components/Provider.js";
+import Markdown from "../components/Markdown.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/graph/StepSummary.tsx
+function StepSummary({ runSlug, path }) {
+	const { dag } = useStrings();
+	const { data, isLoading, error } = useRunFile(runSlug, path);
+	return /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-8 sm:py-7",
+		children: isLoading && data === void 0 ? /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader, {
+				label: dag.loadingSummary,
+				size: 70
+			})
+		}) : error || data === void 0 ? /* @__PURE__ */ jsx("p", {
+			className: "text-xs theme-muted-text",
+			children: dag.summaryLoadFailed
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "max-w-[72ch]",
+			children: /* @__PURE__ */ jsx(Markdown, {
+				httpsImagesOnly: true,
+				compact: true,
+				children: data
+			})
+		})
+	});
+}
+//#endregion
+export { StepSummary };

package/dist/graph/index.d.ts

@@ -9,4 +9,5 @@ export { type ListedProblem, ProblemsButton } from './ProblemsButton.js';
 export type { SettingsView } from './settingsViews.js';
 export { type WorkflowActions, withFields } from './stepWith.js';
 export type { RunLink } from './types.js';
+export { jobLabel } from './util.js';
 export { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, } from './WorkflowSettingsDialog.js';

package/dist/graph/index.js

@@ -1,4 +1,5 @@
 import { trackDrag } from "./editorPrimitives.js";
+import { jobLabel } from "./util.js";
 import DependencyGraph, { DependencyGraphPreview } from "./DependencyGraph.js";
 import { GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS } from "./editorStrings.js";
 import { inputTypes, offeredInputKeys } from "./InputDialog.js";
@@ -7,4 +8,4 @@ import { JOB_FIELDS, RETRY_FIELDS, RUNS_ON_FIELDS, SSH_KEYS, STEP_FIELDS, STRATE
 import { ProblemsButton } from "./ProblemsButton.js";
 import { InputsFormEditor } from "./InputsEditor.js";
 import { INPUT_FORM_FIELDS, LINK_FIELDS, NEEDS_FIELDS, SESSION_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog } from "./WorkflowSettingsDialog.js";
-export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, INPUT_FORM_FIELDS, InputsFormEditor, JOB_FIELDS, LINK_FIELDS, NEEDS_FIELDS, ProblemsButton, RETRY_FIELDS, RUNS_ON_FIELDS, SESSION_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, inputTypes, offeredInputKeys, trackDrag, withFields };
+export { DependencyGraph, DependencyGraphPreview, GRAPH_EDITOR_STRINGS, INPUTS_EDITOR_STRINGS, INPUT_FORM_FIELDS, InputsFormEditor, JOB_FIELDS, LINK_FIELDS, NEEDS_FIELDS, ProblemsButton, RETRY_FIELDS, RUNS_ON_FIELDS, SESSION_FIELDS, SSH_KEYS, STEP_FIELDS, STRATEGY_FIELDS, WORKFLOW_FIELDS, WorkflowSettingsDialog, inputTypes, jobLabel, offeredInputKeys, trackDrag, withFields };

package/dist/graph/types.d.ts

@@ -30,6 +30,9 @@ export interface WorkflowStep {
     startedAt?: string;
     completedAt?: string;
     annotations?: WorkflowAnnotation[];
+    summary?: {
+        bytes: number;
+    };
     subworkflow?: WorkflowSubworkflow | undefined;
 }
 interface WorkflowMatrixMeta {