@parallelworks/ui 0.62.0 → 0.64.0

package/dist/components/Avatar.js

@@ -6,8 +6,8 @@ import { Avatar } from "@base-ui/react/avatar";
 //#region src/components/Avatar.tsx
 var SIZE_CLASSES = {
 	xs: "size-4 text-[9px]",
-	sm: "size-6 text-xs",
-	md: "size-8 text-sm",
+	sm: "size-5 text-[9px]",
+	md: "size-7 text-xs",
 	lg: "size-10 text-base",
 	xl: "size-12 text-lg",
 	"2xl": "size-16 text-xl"
@@ -58,7 +58,7 @@ function Avatar$1({ src, name, colorKey, size = "md", status, className }) {
 			})]
 		}), status && /* @__PURE__ */ jsx("span", {
 			"data-testid": "online-indicator",
-			className: cx("absolute right-0 bottom-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "size-1.5" : "size-2.5")
+			className: cx("absolute right-0 bottom-0 block rounded-full ring-2 ring-(--theme-app-bg)", STATUS_CLASSES[status], size === "xs" || size === "sm" ? "size-1.5" : size === "md" ? "size-2" : "size-2.5")
 		})]
 	});
 }

package/dist/components/Card.d.ts

@@ -25,6 +25,8 @@ export interface CardHeaderProps {
     title: string;
     description?: ReactNode;
     className?: string;
+    /** `left` starts the title on the same edge as the labels and fields under it; `center`
+     *  suits a card whose content is centred too. */
     align?: 'center' | 'left';
     /** The title's level in the page's outline: 1 for a card that is the page, such
      *  as sign-in; 2 or 3 for a card among others under the page's own title. */

package/dist/components/Card.js

@@ -19,12 +19,12 @@ function Card({ children, size = "md", elevated = false, render: renderProp, hre
 	return useRender({
 		render: render ?? /* @__PURE__ */ jsx("div", {}),
 		props: {
-			className: cx("block w-full rounded-2xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
+			className: cx("block w-full rounded-xl border border-(--theme-border) bg-(--theme-panel-bg) backdrop-blur-xl", elevated ? "shadow-(--theme-shadow-xl)" : "shadow-(--theme-shadow)", sizeClasses[size], render && "cursor-pointer text-left text-inherit no-underline transition-[background-color,box-shadow] duration-150 hover:bg-(--theme-panel-hover) hover:shadow-(--theme-shadow-lg) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--theme-link) motion-reduce:transition-none", className),
 			children
 		}
 	});
 }
-function CardHeader({ badge, title, description, className = "", align = "center", headingLevel = 1 }) {
+function CardHeader({ badge, title, description, className = "", align = "left", headingLevel = 1 }) {
 	const Heading = `h${headingLevel}`;
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx(align === "center" ? "text-center" : "text-left", "mb-6", className),

package/dist/components/Drawer.js

@@ -92,7 +92,7 @@ function Drawer$1({ open, onClose, title, description, onBack, backLabel, footer
 								children
 							}),
 							footer && /* @__PURE__ */ jsx("div", {
-								className: cx("flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3", "px-4"),
+								className: cx("flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3", "px-4"),
 								children: footer
 							})
 						]

package/dist/components/Field.js

@@ -42,9 +42,9 @@ var labelSizes = {
 	},
 	md: {
 		text: "text-sm text-(--theme-app)",
-		inlineHeight: "min-h-9",
+		inlineHeight: "min-h-8",
 		stackGap: "gap-1.5",
-		inlineLine: "py-2"
+		inlineLine: "py-1.5"
 	}
 };
 var labelClassName = "flex items-center gap-1 font-medium";
@@ -295,7 +295,7 @@ function FieldValue({ size = "md", className, children, ...props }) {
 		"aria-labelledby": control?.["aria-labelledby"],
 		"aria-describedby": control?.["aria-describedby"],
 		...props,
-		className: cx("flex min-w-0 items-center break-words text-(--theme-app)", size === "sm" ? "min-h-7 text-xs" : "min-h-9 text-sm", className),
+		className: cx("flex min-w-0 items-center break-words text-(--theme-app)", size === "sm" ? "min-h-7 text-xs" : "min-h-8 text-sm", className),
 		children
 	});
 }

package/dist/components/Modal.js

@@ -36,7 +36,7 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 				className: cx(panel && "rounded-xl border border-(--theme-border) bg-(--theme-app-bg) text-(--theme-app) shadow-2xl", size && [sizeClasses[size], "max-w-full"], laidOut && "flex max-h-full flex-col", "outline-none", className),
 				children: laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
 					header && /* @__PURE__ */ jsxs("div", {
-						className: cx("shrink-0 px-5 pt-5", !body && "pb-5"),
+						className: cx("shrink-0 px-4 pt-4", !body && "pb-4"),
 						children: [title !== void 0 && /* @__PURE__ */ jsx(ModalTitle, {
 							className: "m-0 text-lg font-semibold",
 							children: title
@@ -46,11 +46,11 @@ function Modal({ open, onClose, title, description, footer, size, alert = false,
 						})]
 					}),
 					body && /* @__PURE__ */ jsx("div", {
-						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-4",
+						className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4",
 						children
 					}),
 					footer !== void 0 && /* @__PURE__ */ jsx("div", {
-						className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3",
+						className: "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3",
 						children: footer
 					})
 				] }) : children

package/dist/components/OneTimeCodeInput.js

@@ -32,7 +32,7 @@ function OneTimeCodeInput({ length = 6, size = "md", className, "aria-label": ar
 			...ariaInvalid && { "aria-invalid": true },
 			...ariaRequired && { "aria-required": true },
 			autoFocus: autoFocus && index === 0,
-			className: cx(fieldBox({ size }), "px-0 text-center font-mono tabular-nums", size === "sm" ? "w-7" : "w-9 text-base")
+			className: cx(fieldBox({ size }), "px-0 text-center font-mono tabular-nums", size === "sm" ? "w-7" : "w-8 text-base")
 		}, index))]
 	});
 }

package/dist/components/PageHeader.js

@@ -135,7 +135,7 @@ function HeaderLayout({ breadcrumbs, titleActions, actions, toolbar, compact = f
 	return /* @__PURE__ */ jsxs("div", {
 		className: cx("@container w-full shrink-0 bg-(--theme-app-bg)", className),
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-11"),
+			className: cx("flex items-center justify-between gap-4 border-b border-(--theme-border) px-4", compact ? "h-8" : "h-12"),
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
 				children: [

package/dist/components/Provider.d.ts

@@ -234,6 +234,8 @@ export interface UIStrings {
         stepOf: (position: number, count: number) => string;
         summaryLoadFailed: string;
         summaryTab: string;
+        /** Names the cards under the graph, one for each step that wrote a summary. */
+        stepSummaries: string;
         logsTab: string;
         scriptTab: string;
         openSubworkflow: string;

package/dist/components/Provider.js

@@ -239,10 +239,11 @@ var DEFAULTS = {
 			noLogFound: "No log found",
 			logLoadFailed: "Log could not be loaded",
 			loadingSummary: "Loading summary",
-			hasSummary: "Has a summary",
+			hasSummary: "Step summary",
 			stepOf: (position, count) => `Step ${position} of ${count}`,
 			summaryLoadFailed: "Summary could not be loaded",
 			summaryTab: "Summary",
+			stepSummaries: "Step summaries",
 			logsTab: "Logs",
 			scriptTab: "Script",
 			openSubworkflow: "Open Subworkflow",

package/dist/components/Section.js

@@ -10,13 +10,13 @@ var rootClasses = {
 	card: "panel mb-1 flex w-full flex-col"
 };
 var headerClasses = {
-	plain: "mb-2 flex w-full items-center gap-2 border-b border-(--theme-border) pb-1",
-	card: "flex w-full items-center gap-2 px-3 py-3"
+	plain: "mb-4 flex w-full items-center gap-2 border-b border-(--theme-border) pb-1",
+	card: "flex w-full items-center gap-2 p-4"
 };
-var cardBodyClassName = "px-3 pb-3";
+var cardBodyClassName = "px-4 pb-4";
 var titleClasses = {
-	plain: "text-lg font-semibold",
-	card: "text-sm font-bold"
+	plain: "text-base font-semibold",
+	card: "text-base font-semibold"
 };
 var foldedTitleClasses = {
 	plain: "",

package/dist/components/SettingModeOption.js

@@ -8,7 +8,7 @@ import { useId } from "react";
 function SettingModeOption({ value, label, description, disabled }) {
 	const id = useId();
 	return /* @__PURE__ */ jsxs("label", {
-		className: cx("flex items-start gap-3 px-5 py-4", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
+		className: cx("flex items-start gap-3 p-4", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", "border-t border-(--theme-border) first:border-t-0"),
 		children: [/* @__PURE__ */ jsx(Radio, {
 			value,
 			disabled,

package/dist/components/SettingsCard.js

@@ -12,11 +12,11 @@ function SettingsCard({ title, description, action, actionAlign = "beside", head
 		children: /* @__PURE__ */ jsxs("section", {
 			className: cx("mt-10 first:mt-0", className),
 			children: [(title || action) && /* @__PURE__ */ jsxs("div", {
-				className: "mb-3 px-0.5",
+				className: "mb-4 px-0.5",
 				children: [/* @__PURE__ */ jsxs("div", {
 					className: cx("flex items-center gap-1.5", actionAlign === "end" && "justify-between"),
 					children: [title && /* @__PURE__ */ jsx(Heading, {
-						className: "text-[15px] leading-none font-semibold theme-text",
+						className: "text-base leading-none font-semibold theme-text",
 						children: title
 					}), action]
 				}), description && /* @__PURE__ */ jsx("p", {
@@ -34,7 +34,7 @@ function SettingsCard({ title, description, action, actionAlign = "beside", head
 function SettingsHeading({ children }) {
 	const Heading = `h${useContext(HeadingLevel)}`;
 	return /* @__PURE__ */ jsx(Heading, {
-		className: "px-5 py-3 text-sm font-semibold tracking-wider uppercase theme-muted-panel theme-muted-text",
+		className: "px-4 py-3 text-sm font-semibold tracking-wider uppercase theme-muted-panel theme-muted-text",
 		children
 	});
 }
@@ -44,7 +44,7 @@ function SettingRow({ label, htmlFor, helpText, fill = false, onClick, children
 	return /* @__PURE__ */ jsxs("div", {
 		role: "none",
 		onClick,
-		className: cx("grid grid-cols-1 gap-x-8 gap-y-2 px-5 py-5", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", onClick && "cursor-pointer transition-colors select-none hover:theme-hover"),
+		className: cx("grid grid-cols-1 gap-x-8 gap-y-2 p-4", fill ? "md:grid-cols-[200px_1fr]" : "md:grid-cols-[1fr_auto]", onClick && "cursor-pointer transition-colors select-none hover:theme-hover"),
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-y-1",
 			children: [/* @__PURE__ */ jsx("label", {

package/dist/components/Table.js

@@ -60,7 +60,7 @@ function Table({ density = "comfortable", borderless = false, panel = true, clas
 				className: "flex h-32 items-center justify-center",
 				children: /* @__PURE__ */ jsx(Loader, {})
 			}) : /* @__PURE__ */ jsx("div", {
-				className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-2xl", roundedBottom && "rounded-b-2xl", roundedTop && "rounded-t-2xl"),
+				className: cx("inline-block min-w-full align-middle", !stickyHeader && "overflow-x-auto", panel && "theme-panel", !borderless && "border theme-border", rounded && "rounded-xl", roundedBottom && "rounded-b-xl", roundedTop && "rounded-t-xl"),
 				children: /* @__PURE__ */ jsxs("table", {
 					className: cx("min-w-full divide-y theme-border", className),
 					...tableProps,

package/dist/components/dismiss.d.ts

@@ -8,5 +8,5 @@ interface CloseDetails {
  *  press on a toast never does, since the toast sits above the backdrop. */
 export declare function closeHandler(dismissible: boolean, onClose: () => void): (next: boolean, details: CloseDetails) => void;
 /** The row of a dialog's actions along its bottom edge, ruled off from its body. */
-export declare const dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3";
+export declare const dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3";
 export {};

package/dist/components/dismiss.js

@@ -14,6 +14,6 @@ function closeHandler(dismissible, onClose) {
 	};
 }
 /** The row of a dialog's actions along its bottom edge, ruled off from its body. */
-var dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-5 py-3";
+var dialogFooterClassName = "flex shrink-0 items-center justify-end gap-2 border-t border-(--theme-border) px-4 py-3";
 //#endregion
 export { closeHandler, dialogFooterClassName };

package/dist/components/fieldBox.js

@@ -9,10 +9,10 @@ var sizes = {
 		text: "text-xs"
 	},
 	md: {
-		height: "h-9",
-		minHeight: "min-h-9",
+		height: "h-8",
+		minHeight: "min-h-8",
 		px: "px-3",
-		py: "py-2",
+		py: "py-1.5",
 		text: "text-sm"
 	}
 };

package/dist/graph/DependencyGraph.d.ts

@@ -1,4 +1,3 @@
-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';
@@ -18,7 +17,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, openStep, onCloseLog, sidebarStickyTop, children, }: {
+export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop, }: {
     run: GraphRun;
     preview?: boolean;
     removeBorder?: boolean | undefined;
@@ -41,8 +40,6 @@ export default function DependencyGraph({ run, preview, removeBorder, viewMode,
     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

@@ -28,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 { StepSummaries } from "./StepSummaries.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";
@@ -166,12 +167,12 @@ var addCleanupSteps = ({ jobs }) => {
 	}
 	return clonedJobs;
 };
-var PREVIEW_PADDING = 24;
+var FIT_PADDING = 24;
 function outerNodes(content) {
 	const top = content.querySelectorAll(":scope > div > div > div > div[id^=\"node_\"]");
 	return top.length > 0 ? top : content.querySelectorAll("[id^=\"node_\"]");
 }
-function measurePreviewHeight(content, viewRef) {
+function measureFitHeight(content, viewRef) {
 	const nodes = content ? outerNodes(content) : void 0;
 	const transform = content?.parentElement ? getComputedStyle(content.parentElement).transform : "none";
 	if (!content || !nodes?.length || transform === "none") return null;
@@ -185,7 +186,7 @@ function measurePreviewHeight(content, viewRef) {
 	const { scale, offsetY } = viewRef.current;
 	let bottom = 0;
 	for (const node of nodes) bottom = Math.max(bottom, offsetWithin(node, content).y + node.offsetHeight);
-	return Math.ceil(bottom * scale + offsetY + PREVIEW_PADDING);
+	return Math.ceil(bottom * scale + offsetY + FIT_PADDING);
 }
 function offsetWithin(el, ancestor) {
 	let x = 0;
@@ -220,6 +221,7 @@ function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleS
 	const isStepsOpen = (j) => stepsOpen.has(pathPrefix + j);
 	const subworkflowKey = (j, s) => `${pathPrefix}${j}:${s}`;
 	const openLog = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
+	const openSummary = (j, s) => setSublogOpen(fileBeside(engine.stepLogPath(pathPrefix, j, s), "summary.md"));
 	return {
 		isStepsOpen,
 		onJobClick: (j) => {
@@ -238,6 +240,7 @@ function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleS
 			else openLog(j, s);
 		},
 		onStepLogClick: openLog,
+		onStepSummaryClick: openSummary,
 		onSubworkflowIcon: (j, s) => openInNewGraph(pathPrefix, j, s),
 		renderSubworkflow: (j, s) => {
 			const subJobs = jobs[j]?.steps?.[s]?.subworkflow?.jobs;
@@ -696,7 +699,7 @@ function graphBounds(content) {
 	}
 	return bounds;
 }
-function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop, children }) {
+function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, sidebarStickyTop }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
 	const rootJobs = isJobRecord(run.executedJobs) ? run.executedJobs : {};
@@ -750,23 +753,24 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		}
 	}, [preview]);
 	const containerHeight = topOffset !== null ? Math.max(windowSize.h - topOffset - 16, 160) : null;
-	const [previewHeight, setPreviewHeight] = useState(null);
-	const previewViewRef = useRef(null);
+	const [fitHeight, setFitHeight] = useState(null);
+	const fitViewRef = useRef(null);
 	useEffect(() => {
-		const container = containerRef.current;
-		if (!preview || !container || fixedHeight) return;
+		const container = containerEl;
+		fitViewRef.current = null;
+		if (!container || fixedHeight) return;
 		let raf = 0;
 		let attempts = 0;
 		const measure = () => {
 			cancelAnimationFrame(raf);
 			raf = requestAnimationFrame(() => {
-				const next = measurePreviewHeight(graphContentRef.current, previewViewRef);
+				const next = measureFitHeight(graphContentRef.current, fitViewRef);
 				if (next === null) {
 					if (attempts++ < 120) measure();
 					return;
 				}
 				attempts = 0;
-				setPreviewHeight((prev) => prev === next ? prev : next);
+				setFitHeight((prev) => prev === next ? prev : next);
 			});
 		};
 		measure();
@@ -779,7 +783,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			observer.disconnect();
 			cancelAnimationFrame(raf);
 		};
-	}, [preview, fixedHeight]);
+	}, [containerEl, fixedHeight]);
 	const { common, dag: dagStrings } = useStrings();
 	const stepHeaderRef = useRef(null);
 	const slots = useSlots();
@@ -959,8 +963,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			await Promise.allSettled(running.map((transition) => transition.finished));
 			running = sizingTransitions(content);
 		}
-		const panelHeight = preview && !fixedHeight ? measurePreviewHeight(content, previewViewRef) : null;
-		if (panelHeight !== null) flushSync(() => setPreviewHeight(panelHeight));
+		const panelHeight = fixedHeight ? null : measureFitHeight(content, fitViewRef);
+		if (panelHeight !== null) flushSync(() => setFitHeight(panelHeight));
 		await sizesSettled([
 			container,
 			content,
@@ -971,7 +975,6 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	}, [
 		fitGraph,
 		invalidateConnectors,
-		preview,
 		fixedHeight
 	]);
 	const centerOn = useCallback((el) => {
@@ -1361,7 +1364,6 @@ 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, {
@@ -1375,8 +1377,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 						tabIndex: editor ? -1 : void 0,
 						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
 						style: {
-							height: fixedHeight ?? (containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh"),
-							minHeight: previewHeight !== null && !fixedHeight ? 0 : 160
+							height: fixedHeight ?? (fitHeight !== null ? `${Math.min(fitHeight, containerHeight ?? windowSize.h * .62)}px` : containerHeight !== null ? `${containerHeight}px` : "62vh"),
+							minHeight: preview && fitHeight !== null && !fixedHeight ? 0 : 160
 						},
 						children: [/* @__PURE__ */ jsx(TransformWrapper, {
 							ref: transformRef,
@@ -1444,6 +1446,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 								})
 							}) })] })
 						}), editorOverlays]
+					}),
+					!preview && /* @__PURE__ */ jsx(StepSummaries, {
+						runSlug,
+						jobs: rootJobs,
+						onOpenLog: ({ prefix, job, index }) => setSublogOpen(engine.stepLogPath(prefix, job, index))
 					})
 				]
 			}),

package/dist/graph/JobSummary.d.ts

@@ -6,6 +6,7 @@ export interface JobHandlers {
     onJobClick: (jobName: string) => void;
     onStepClick: (jobName: string, stepIndex: number) => void;
     onStepLogClick: (jobName: string, stepIndex: number) => void;
+    onStepSummaryClick: (jobName: string, stepIndex: number) => void;
     onSubworkflowIcon: (jobName: string, stepIndex: number) => void;
     renderSubworkflow: (jobName: string, stepIndex: number) => ReactNode;
 }

package/dist/graph/JobSummary.js

@@ -68,57 +68,63 @@ 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 }),
-								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)"
-									})
-								})
-							]
+							children: [inputs.preview ? "↳" : /* @__PURE__ */ jsx(RunStatusIcon, { status: step.status }), /* @__PURE__ */ jsx("div", { children: stepLabel })]
 						});
 						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: [(inputs.editable || inputs.editableSteps) && !step.linkedStep ? /* @__PURE__ */ jsx(EditableStepRow, {
-								job: job?._matrix?.originaljob ?? jobName,
-								index: i,
-								label: stepLabel,
-								children: stepButton
-							}) : stepButton, step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
-								/* @__PURE__ */ jsx(Tooltip, {
-									content: jobActions.openSubworkflowLogs,
+							children: [
+								(inputs.editable || inputs.editableSteps) && !step.linkedStep ? /* @__PURE__ */ jsx(EditableStepRow, {
+									job: job?._matrix?.originaljob ?? jobName,
+									index: i,
+									label: stepLabel,
+									children: stepButton
+								}) : stepButton,
+								step.summary && !inputs.preview && /* @__PURE__ */ jsx(Tooltip, {
+									content: dag.hasSummary,
 									children: /* @__PURE__ */ jsx("button", {
 										type: "button",
-										"aria-label": jobActions.openSubworkflowLogs,
+										"aria-label": dag.hasSummary,
 										onClick: (e) => {
 											e.stopPropagation();
-											inputs.onStepLogClick(jobName, i);
+											inputs.onStepSummaryClick(jobName, i);
 										},
-										className: "link ml-1",
-										children: /* @__PURE__ */ jsx(FileTextIcon, { className: "w-[1.2em] h-[1.2em]" })
+										className: "ml-1.5 shrink-0 text-(--theme-muted-text-color) hover:text-(--theme-link)",
+										children: /* @__PURE__ */ jsx(SummaryIcon, { className: "w-[1.1em] h-[1.1em]" })
 									})
 								}),
-								/* @__PURE__ */ jsx(UsesIcon, {
-									uses: step.uses,
-									subworkflow: step.subworkflow
-								}),
-								/* @__PURE__ */ jsx(Tooltip, {
-									content: jobActions.openInNewGraph,
-									children: /* @__PURE__ */ jsx("button", {
-										type: "button",
-										"aria-label": jobActions.openInNewGraph,
-										onClick: (e) => {
-											e.stopPropagation();
-											inputs.onSubworkflowIcon(jobName, i);
-										},
-										className: "link ml-1",
-										children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
+								step.subworkflow && /* @__PURE__ */ jsxs(Fragment, { children: [
+									/* @__PURE__ */ jsx(Tooltip, {
+										content: jobActions.openSubworkflowLogs,
+										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": jobActions.openSubworkflowLogs,
+											onClick: (e) => {
+												e.stopPropagation();
+												inputs.onStepLogClick(jobName, i);
+											},
+											className: "link ml-1",
+											children: /* @__PURE__ */ jsx(FileTextIcon, { className: "w-[1.2em] h-[1.2em]" })
+										})
+									}),
+									/* @__PURE__ */ jsx(UsesIcon, {
+										uses: step.uses,
+										subworkflow: step.subworkflow
+									}),
+									/* @__PURE__ */ jsx(Tooltip, {
+										content: jobActions.openInNewGraph,
+										children: /* @__PURE__ */ jsx("button", {
+											type: "button",
+											"aria-label": jobActions.openInNewGraph,
+											onClick: (e) => {
+												e.stopPropagation();
+												inputs.onSubworkflowIcon(jobName, i);
+											},
+											className: "link ml-1",
+											children: /* @__PURE__ */ jsx(OpenInNewGraphIcon, { className: "w-[1.2em] h-[1.2em]" })
+										})
 									})
-								})
-							] })]
+								] })
+							]
 						}), canExpand && inputs.renderSubworkflow(jobName, i)] }, stepKey);
 					}), inputs.editable && /* @__PURE__ */ jsx(AddStepButton, { job: jobName })]
 				})

package/dist/graph/StepSummaries.d.ts

@@ -0,0 +1,22 @@
+import type { WorkflowJob, WorkflowStep } from './types.js';
+export interface StepSummarySource {
+    /** The `subworkflows/<job>/step_<n>/` chain of a step inside a subworkflow; empty at the top level. */
+    prefix: string;
+    job: string;
+    /** The job's name, after the names of the jobs whose subworkflows it runs in. */
+    jobNames: string[];
+    index: number;
+    step: WorkflowStep;
+}
+/** The steps, subworkflows' included, that wrote a summary, in the order their jobs completed. */
+export declare function stepSummarySources(jobs: Record<string, WorkflowJob>): StepSummarySource[];
+/**
+ * A run's step summaries, each on its own card headed by the job and step that wrote it, so a run
+ * reads like a report under its graph. The job list beside the graph already shows the run's tree,
+ * so the cards are flat.
+ */
+export declare function StepSummaries({ runSlug, jobs, onOpenLog, }: {
+    runSlug: string;
+    jobs: Record<string, WorkflowJob>;
+    onOpenLog: (source: StepSummarySource) => void;
+}): import("react").JSX.Element | null;