@parallelworks/ui 0.57.0 → 0.58.0

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 {

package/dist/graph/util.d.ts

@@ -2,6 +2,6 @@ import type { WorkflowJob } from './types.js';
 /** How far below a node's top edge its connectors meet it, level with its first job. */
 export declare const NODE_CONNECTOR_Y = 37;
 /** A job as people read it: `run_tests` is "Run tests", a matrix member "Build (2/4)". */
-export declare function jobLabel(jobName: string, job?: WorkflowJob): string;
+export declare function jobLabel(jobName: string, job?: Pick<WorkflowJob, '_matrix'>): string;
 /** A copy of `set` with `key` added, or removed if it was there. */
 export declare function toggled<T>(set: Set<T>, key: T): Set<T>;

package/dist/icons.d.ts

@@ -227,6 +227,7 @@ export declare const StopIcon: IconType;
 export declare const StorageIcon: IconType;
 export declare const SubdomainIcon: IconType;
 export declare const SuccessIcon: IconType;
+export declare const SummaryIcon: IconType;
 export declare const SunIcon: IconType;
 export declare const SupportIcon: IconType;
 export declare const SwapIcon: IconType;

package/dist/icons.js

@@ -1,5 +1,5 @@
 import { ErrorCheckmark, SuccessCheckmark } from "./components/StatusIcons.js";
-import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookOpenText, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderKanban, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, LibraryBig, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut, createLucideIcon } from "lucide-react";
+import { Activity, Archive, ArrowDown, ArrowDownWideNarrow, ArrowLeft, ArrowLeftRight, ArrowRight, ArrowUp, ArrowUpDown, ArrowUpNarrowWide, AtSign, BadgeCheck, Ban, BanknoteX, Bell, BellOff, BellRing, BookOpenText, BookUser, Bot, Boxes, Braces, Brain, BrainCircuit, Briefcase, Building2, Calendar, CalendarClock, CalendarSync, CalendarX, Camera, ChartLine, ChartPie, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsDownUp, ChevronsUp, ChevronsUpDown, Circle, CircleAlert, CircleCheck, CircleDollarSign, CircleDot, CircleHelp, CircleMinus, CirclePlay, CircleSlash, CircleX, ClipboardCheck, ClipboardPen, Clock, Cloud, CloudCog, CloudOff, Code, CodeXml, Cog, Columns3, Copy, CopyPlus, CornerUpRight, Cpu, CreditCard, Database, DatabaseSearch, DatabaseZap, Disc3, DollarSign, Download, Earth, Ellipsis, EthernetPort, ExternalLink, Eye, EyeOff, File, FileArchive, FileCode, FileImage, FileJson, FileKey, FilePenLine, FileText, FileType, Files, Fingerprint, Flag, FlaskConical, Folder, FolderKanban, FolderOpen, FolderPlus, FolderTree, Folders, Funnel, FunnelX, Gauge, GitCommitHorizontal, GitFork, GitPullRequest, Globe, GraduationCap, Grid3x3, GripHorizontal, Group, Handshake, HardDrive, HatGlasses, Headset, Heart, HeartOff, History, Hourglass, House, IdCard, Inbox, Info, Key, KeyRound, Keyboard, Landmark, Languages, Layers, LayoutGrid, LibraryBig, Link, List, ListOrdered, ListTodo, ListVideo, LoaderCircle, Lock, LogIn, LogOut, Logs, Mail, MailCheck, MailX, MapPin, MapPinned, Maximize, Megaphone, MemoryStick, Menu, MessageSquare, MessageSquareWarning, MessagesSquare, Minimize, Minimize2, Minus, Monitor, MonitorDown, MonitorPlay, MonitorSmartphone, Moon, Music, Network, NotebookText, PaintBucket, PanelLeft, PanelLeftClose, PanelLeftOpen, Paperclip, PartyPopper, Pause, PcCase, Pencil, PencilLine, Phone, Pin, Play, PlugZap, Plus, Power, Printer, QrCode, Redo2, RefreshCw, Rocket, RotateCcw, RotateCcwSquare, Route, Save, Scale, ScanEye, ScrollText, Search, Send, Server, Settings, Settings2, Share2, Sheet, Shield, ShieldOff, ShieldUser, Smartphone, Sparkles, Square, SquareChevronRight, SquareCode, SquareDashed, SquarePen, SquareSplitHorizontal, SquareTerminal, Star, Store, Sun, Tag, Terminal, TextCursorInput, Trash2, TriangleAlert, Undo2, UndoDot, Unlink, Unplug, Upload, User, UserCheck, UserLock, UserMinus, UserPlus, UserX, Users, Video, Wallet, WandSparkles, Waypoints, Webhook, Wrench, X, Zap, ZoomIn, ZoomOut, createLucideIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/icons.tsx
 var STROKE_WIDTH = 2;
@@ -259,6 +259,7 @@ var StopIcon = /* @__PURE__ */ icon(Square);
 var StorageIcon = /* @__PURE__ */ icon(Database);
 var SubdomainIcon = /* @__PURE__ */ icon(AtSign);
 var SuccessIcon = /* @__PURE__ */ icon(CircleCheck);
+var SummaryIcon = /* @__PURE__ */ icon(ScrollText);
 var SunIcon = /* @__PURE__ */ icon(Sun);
 var SupportIcon = /* @__PURE__ */ icon(Headset);
 var SwapIcon = /* @__PURE__ */ icon(ArrowLeftRight);
@@ -284,4 +285,4 @@ var ZipIcon = /* @__PURE__ */ icon(FileArchive);
 var ZoomInIcon = /* @__PURE__ */ icon(ZoomIn);
 var ZoomOutIcon = /* @__PURE__ */ icon(ZoomOut);
 //#endregion
-export { APIIcon, AccessIcon, AddAllocationIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArticleIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };
+export { APIIcon, AccessIcon, AddAllocationIcon, AddIcon, AddProjectIcon, AddUserIcon, AgentIcon, AllocationIcon, ArchiveIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArticleIcon, AttachmentIcon, AuthenticationIcon, BillingIcon, BriefcaseIcon, BucketIcon, BuildWorkflowIcon, CalendarIcon, CancelIcon, CelebrateIcon, CertificateIcon, ChangesRequestedIcon, ChartIcon, ChatIcon, CheckIcon, ChevronDoubleDownIcon, ChevronDoubleUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardCheckIcon, ClockIcon, CloseIcon, CloudIcon, ClusterIcon, CodeIcon, CollapseIcon, ColumnsIcon, CommentIcon, CommitIcon, ComputeIcon, ConnectIcon, ContractIcon, CopyIcon, CustomizeIcon, DesktopIcon, DestroyIcon, DeviceIcon, DirectoryIcon, DisableCostIcon, DisableUserIcon, DisconnectIcon, DiskIcon, DisplayIcon, DownloadIcon, DragHandleIcon, DuplicateIcon, EditIcon, EditorIcon, EducationIcon, EnableCostIcon, EnableUserIcon, EndpointIcon, ErrorCheckmark, ErrorIcon, EventsIcon, ExpandIcon, ExpandVerticalIcon, ExpiredIcon, ExpiringIcon, ExpressionIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FailIcon, FavoriteIcon, FavoriteOutlineIcon, FeaturedIcon, FileIcon, FileTextIcon, FilesIcon, FilesystemIcon, FilterClearIcon, FilterIcon, FlaggedIcon, FlaskIcon, FolderIcon, FolderOpenIcon, FolderTreeIcon, ForbiddenIcon, ForkIcon, GearsIcon, GlobeIcon, GovernmentIcon, GraphIcon, GridIcon, HealthMonitoringIcon, HelpIcon, HistoryIcon, HomeIcon, IdCardIcon, ImageIcon, ImpersonateIcon, InboxIcon, IndexIcon, InfoIcon, InfrastructureLayersIcon, InputFormIcon, InstallIcon, InstanceIcon, InstanceTypeIcon, IpAddressIcon, IssueIcon, JobIcon, JsonIcon, KeyIcon, KeyboardIcon, KubernetesNamespaceIcon, LanguageIcon, LegalIcon, LibraryIcon, LicenseIcon, LinkIcon, ListViewIcon, LockIcon, MFAIcon, MachineImageIcon, MailFailedIcon, MailIcon, MailVerifiedIcon, MapPinIcon, MarketplaceIcon, MatrixIcon, MegaphoneIcon, MigrationIcon, MinimizeIcon, MinusIcon, MlIcon, MoneyIcon, MoonIcon, MoreIcon, MusicIcon, MuteIcon, NavigationIcon, NetworkInterfaceIcon, NewChatIcon, NodeIcon, NotRunningIcon, NotebookIcon, NotificationIcon, OnboardingIcon, OpenInNewGraphIcon, OrganizationIcon, PartnerIcon, PasswordIcon, PauseIcon, PdfIcon, PendingIcon, PhoneIcon, PieChartIcon, PinFilledIcon, PinIcon, PowerIcon, PowershellIcon, PreviewIcon, PrintIcon, ProjectIcon, PublishIcon, PullRequestIcon, QRCodeIcon, QueueIcon, QuotaIcon, RedoIcon, RefreshIcon, RemoveIcon, RemoveUserIcon, RenameIcon, RenewIcon, ResetLayoutIcon, ResourceGroupIcon, ResourceIcon, RetryIcon, RoleIcon, RollbackIcon, RunWorkflowIcon, RunningIcon, RunsIcon, SaveIcon, SchedulerIcon, ScriptIcon, SearchIcon, SendIcon, ServiceIcon, SessionIcon, SettingsIcon, ShareIcon, ShieldIcon, ShieldOffIcon, ShrinkIcon, SidebarCloseIcon, SidebarIcon, SidebarOpenIcon, SignInIcon, SignOutIcon, SkipIcon, SnapshotIcon, SortDownIcon, SortUnsortedIcon, SortUpIcon, SparklesIcon, SplitIcon, SpreadsheetIcon, StartIcon, StopIcon, StorageIcon, SubdomainIcon, SuccessCheckmark, SuccessIcon, SummaryIcon, SunIcon, SupportIcon, SwapIcon, TagIcon, TerminalIcon, ThinkingIcon, TodoIcon, TrashIcon, TunnelIcon, UndoIcon, UnfavoriteIcon, UnlinkIcon, UnmuteIcon, UploadIcon, UserIcon, UserWorkspaceIcon, UsersIcon, VideoIcon, WarningIcon, WebhookIcon, ZapIcon, ZipIcon, ZoomInIcon, ZoomOutIcon };

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { ConfirmModal, type ConfirmModalProps } from './components/ConfirmModal.
 export { type OpenMenu, type OpenMenuOptions, useContextMenu, } from './components/ContextMenu.js';
 export { CopyButton, type CopyButtonProps, CopyCodeBlock, type CopyCodeBlockProps, } from './components/CopyButton.js';
 export { CreateModal, CreateModalSelect, CreateModalSwitch, } from './components/CreateModal.js';
+export { categoryClasses, categoryOf } from './components/category.js';
 export { DatePicker, type DatePickerProps } from './components/DatePicker.js';
 export { DescriptionListGroup, DescriptionListItem, type DescriptionListItemProps, type DescriptionListProps, type DescriptionListVariant, default as DescriptionList, } from './components/DescriptionList.js';
 export { Disclosure, DisclosurePanel, type DisclosureProps } from './components/Disclosure.js';

package/dist/index.js

@@ -10,6 +10,7 @@ import { EmptyState } from "./components/EmptyState.js";
 import { useCopy } from "./components/useCopy.js";
 import { MenuEntries, MenuFilter, menuDivider } from "./components/MenuEntries.js";
 import { ActionMenu } from "./components/ActionMenu.js";
+import { categoryClasses, categoryOf } from "./components/category.js";
 import { Avatar, avatarInitials } from "./components/Avatar.js";
 import { Button, MethodButton } from "./components/Button.js";
 import { isTextEntryContext, useShortcutKey } from "./components/shortcutKey.js";
@@ -72,4 +73,4 @@ import { ThemeEditor, ThemePreview } from "./components/ThemeEditor.js";
 import { ToggleGroup } from "./components/ToggleGroup.js";
 import { useCssIsDark } from "./components/useCssIsDark.js";
 import { useApplyTheme, useColorMode } from "./components/useTheme.js";
-export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };
+export { ActionMenu, AppLink, Autocomplete, Avatar, Button, CODE_STYLES, Callout, Card, CardHeader, Checkbox, CheckboxGroup, ColorInput, Combobox, ConfirmModal, CopyButton, CopyCodeBlock, CreateModal, CreateModalSelect, CreateModalSwitch, DEFAULT_CONTRAST, DEFAULT_PRESET, DEFAULT_THEME, DatePicker, DescriptionList, DescriptionListGroup, DescriptionListItem, Disclosure, DisclosurePanel, Drawer, Elapsed, EmptyState, ErrorText, ExternalLink, Field, FieldOption, FieldValue, HoverCard, IconButton, InfoTip, Input, JND, LetterBadge, Loader, LoadingRegion, Markdown, MenuCheckboxItem, MenuEntries, MenuFilter, MenuGroupLabel, MenuItem, MenuLinkItem, MenuPopup, MenuRadioItem, MenuSeparator, MenuSubmenuTrigger, Meter, MethodButton, Modal, ModalDescription, ModalTitle, NumberInput, OneTimeCodeInput, Overview, PAGE_SIZES, PageHeader, PageHeaderAction, PageHeaderAddButton, PageHeaderBar, PageHeaderMenu, PageHeaderProvider, Pagination, Popover, PopoverClose, ProgressBar, Radio, RadioGroup, RefreshButton, RelativeTime, RequiredMark, RevealToggle, RunStatusIcon, SIDEBAR_TOKENS, SearchInput, Section, SegmentedControl, Select, SettingModeOption, SettingRow, SettingsCard, SettingsHeading, Skeleton, Slider, StatusBadge, StatusDot, Switch, THEME_PRESETS, THEME_TOKENS, TabPanel, Table, Tabs, Textarea, ThemeEditor, ThemePreview, ToggleGroup, Tooltip, TooltipProvider, UIProvider, apcaContrast, applyTheme, avatarInitials, buttonClasses, categoryClasses, categoryOf, composite, contrastRatio, cx, deltaE, deriveTheme, fieldBox, fitSeed, formatBytes, formatCount, formatDateTime, formatDuration, formatInfoTipContent, formatTimeLeft, generateTheme, isDarkColor, isPlainClick, isTextEntryContext, levelTone, menuDivider, modalPanelClassName, modeOf, parseColor, parseTheme, prefersWideGamut, resolveMode, runStatusTone, schemeFor, serializeTheme, statusTextClass, themeStylesheet, toHex, toP3, toast, useApplyTheme, useClock, useClosePopover, useColorMode, useContextMenu, useCopy, useCssIsDark, useElapsed, useFieldControl, useFieldLabelledControl, useNavigation, useOptionalWorkflowEngine, usePersistedState, useProvisionCorsRules, useRelativeTime, useRunFile, useShortcutKey, useSlots, useStrings, useWorkflowActions, useWorkflowEditing, useWorkflowEngine, useWorkflowEngineLoader };

package/dist/logviewer/LogViewer.js

@@ -414,10 +414,10 @@ function LogViewer({ log, height = "unset", width, downloadName = "log.txt", rou
 			/* @__PURE__ */ jsxs("div", {
 				className: cx("flex select-none items-center gap-x-2 p-2", inline ? "bg-[var(--theme-panel-bg)] border-b border-[var(--theme-border)]" : "theme-panel"),
 				children: [/* @__PURE__ */ jsxs("div", {
-					className: cx("w-full flex flex-row gap-x-2 items-center", hideExpand && "justify-between"),
+					className: "flex w-full min-w-0 flex-wrap items-center gap-2",
 					children: [
 						/* @__PURE__ */ jsxs("div", {
-							className: "flex gap-x-2 w-full",
+							className: "flex flex-auto flex-wrap gap-2",
 							children: [
 								!inline && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
 									variant: "secondary",
@@ -565,7 +565,7 @@ function LogViewer({ log, height = "unset", width, downloadName = "log.txt", rou
 							label: t.filterLogs,
 							value: filter,
 							onValueChange: handleFilterChange,
-							className: "w-48"
+							className: "min-w-40 flex-1 sm:w-48 sm:flex-none"
 						}),
 						/* @__PURE__ */ jsx(Button, {
 							variant: "secondary",

package/dist/styles/theme.css

@@ -78,6 +78,22 @@
   --theme-ansi-magenta: light-dark(#8d3a88, #ffaafe);
   --theme-ansi-cyan: light-dark(#00666c, #00dbe5);
   --theme-ansi-white: light-dark(#555d6c, #e1e9f2);
+  --theme-category-1: light-dark(#ffcfce, #593030);
+  --theme-category-1-text: light-dark(#6e3537, #fed2d0);
+  --theme-category-2: light-dark(#f7d6b8, #533618);
+  --theme-category-2-text: light-dark(#673f12, #f6d8bc);
+  --theme-category-3: light-dark(#dfe1b7, #3f4017);
+  --theme-category-3-text: light-dark(#4e4e11, #dfe2bc);
+  --theme-category-4: light-dark(#c1e8cd, #20462f);
+  --theme-category-4-text: light-dark(#1f5636, #c5e8d0);
+  --theme-category-5: light-dark(#b3e9eb, #034649);
+  --theme-category-5-text: light-dark(#00555a, #b8e9eb);
+  --theme-category-6: light-dark(#c0e2ff, #1f405b);
+  --theme-category-6-text: light-dark(#1f4e73, #c3e2fe);
+  --theme-category-7: light-dark(#dcd8ff, #3d375a);
+  --theme-category-7-text: light-dark(#4a4273, #ddd9fe);
+  --theme-category-8: light-dark(#f5d0ec, #50314a);
+  --theme-category-8-text: light-dark(#63385a, #f4d2eb);
 }
 
 @media (color-gamut: p3) {