@parallelworks/ui 0.18.0 → 0.19.1

package/dist/form/lib.d.ts

@@ -12,4 +12,9 @@ export declare function enforceOneMustBeTrue(items: Array<Record<string, unknown
 export declare function flattenGroups(schema: unknown): Record<string, unknown>;
 /**Not a pure function. Edits 'obj' passed into function */
 export declare function impureSetValueFromPath(obj: Record<string, unknown>, path: string, value: unknown): void;
-export declare function initializeValues(options: unknown, srcData?: object, ignoreDefaultStrings?: boolean): Record<string, unknown> | undefined;
+export declare function initializeValues(options: unknown, srcData?: object, 
+/** Fields whose schema default the host wants left blank. */
+blankDefault?: (field: {
+    type?: string;
+    default?: unknown;
+}) => boolean): Record<string, unknown> | undefined;

package/dist/{chunks/FieldWrapper-Bef01EWO.js → form/lib.js}

@@ -1,52 +1,4 @@
-import { t as RequiredMark } from "./RequiredMark-DfLdYbYZ.js";
-import cx from "classnames";
-import { createContext, useContext, useId, useMemo } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/form/fieldContext.tsx
-var FieldContext = createContext({ required: false });
-var FieldProvider = FieldContext.Provider;
-/** True when the surrounding FieldWrapper is showing the required asterisk. */
-function useFieldRequired() {
-	return useContext(FieldContext).required;
-}
-/** Ties the single focusable control of a field to its FieldWrapper label. */
-function useFieldControlProps() {
-	const { id, descriptionId } = useContext(FieldContext);
-	return {
-		id,
-		"aria-describedby": descriptionId
-	};
-}
-/** For controls and groups that can only be named through aria-labelledby. */
-function useFieldLabelledByProps() {
-	const { labelId, descriptionId } = useContext(FieldContext);
-	return {
-		"aria-labelledby": labelId,
-		"aria-describedby": descriptionId
-	};
-}
-//#endregion
-//#region src/form/utils/secondaryField.ts
-function findSecondaryOption(options, value) {
-	for (const candidate of options) {
-		if (!candidate || typeof candidate !== "object") continue;
-		const option = candidate;
-		if (option.value === value) return option;
-		if (Array.isArray(option.options)) {
-			const nestedOption = findSecondaryOption(option.options, value);
-			if (nestedOption) return nestedOption;
-		}
-	}
-}
-function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
-	if (secondaryField === void 0 || secondaryValue === void 0) return;
-	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
-	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
-	fields.forEach((field, index) => {
-		setFieldValue(field, values[index]);
-	});
-}
-//#endregion
+import { applySecondaryField, findSecondaryOption } from "./utils/secondaryField.js";
 //#region src/form/lib.ts
 var EMPTY_ENTRY = {};
 function asRecord(value) {
@@ -122,7 +74,7 @@ function impureSetValueFromPath(obj, path, value) {
 	}
 	current[pathArray[pathArray.length - 1]] = value;
 }
-function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
+function initializeValues(options, srcData = {}, blankDefault) {
 	if (!options || typeof options !== "object") return;
 	const schema = options;
 	const source = srcData;
@@ -168,7 +120,7 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			if ((fieldSchema.type === "dropdown" || fieldSchema.type === "storage") && fieldSchema.secondaryField && fieldSchema.options && Array.isArray(fieldSchema.options)) {
 				const option = findSecondaryOption(fieldSchema.options, data[field]);
 				applySecondaryField(fieldSchema.secondaryField, option?.secondaryValue, (secondaryField, secondaryValue) => {
-					if (!(fieldSchema.type === "storage" && Object.prototype.hasOwnProperty.call(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
+					if (!(fieldSchema.type === "storage" && Object.hasOwn(options, secondaryField) && source[secondaryField] !== void 0)) impureSetValueFromPath(acc, secondaryField, secondaryValue);
 				});
 			}
 			return acc;
@@ -195,61 +147,10 @@ function initializeValues(options, srcData = {}, ignoreDefaultStrings = false) {
 			}
 		}
 		if (fieldSchema.type === "multi-dropdown" || fieldSchema.type === "checkbox-group") acc[field] = [];
-		if (fieldSchema.default !== void 0) {
-			const dflt = fieldSchema.default;
-			const isPwResource = typeof dflt === "string" && dflt.startsWith("pw://");
-			acc[field] = fieldSchema.type === "string" || ignoreDefaultStrings && !isPwResource && (fieldSchema.type === "textarea" || fieldSchema.type === "compute-clusters" || fieldSchema.type === "compute-resources") ? "" : dflt;
-		}
+		if (fieldSchema.default !== void 0) acc[field] = fieldSchema.type === "string" || blankDefault?.(fieldSchema) ? "" : fieldSchema.default;
 		if (fieldSchema.prefillDefault && fieldSchema.default !== void 0) acc[field] = fieldSchema.default;
 		return acc;
 	}, data);
 }
 //#endregion
-//#region src/form/FieldWrapper.tsx
-function FieldWrapper({ label, tooltipComponent, description, labelPosition = "left", spaceCompact = false, optional = false, children }) {
-	const isOptional = Boolean(resolvedFlag(optional));
-	const uid = useId();
-	const id = `${uid}control`;
-	const labelId = `${uid}label`;
-	const descriptionId = description ? `${uid}description` : void 0;
-	const field = useMemo(() => ({
-		required: !isOptional,
-		id,
-		labelId,
-		descriptionId
-	}), [
-		isOptional,
-		id,
-		labelId,
-		descriptionId
-	]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: cx("flex w-full", labelPosition === "left" ? "items-start" : "items-left flex-col"),
-		children: [/* @__PURE__ */ jsxs("label", {
-			htmlFor: id,
-			id: labelId,
-			className: cx("relative", labelPosition === "left" ? "form-label" : "form-label-top", spaceCompact && "form-label-compact"),
-			children: [
-				label,
-				!isOptional && /* @__PURE__ */ jsx(RequiredMark, {}),
-				tooltipComponent
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
-			children: [/* @__PURE__ */ jsx(FieldProvider, {
-				value: field,
-				children: typeof children === "function" ? children({
-					id,
-					labelId,
-					describedBy: descriptionId
-				}) : children
-			}), description && /* @__PURE__ */ jsx("div", {
-				id: descriptionId,
-				className: "text-xs theme-muted-text mt-1 leading-relaxed",
-				children: description
-			})]
-		})]
-	});
-}
-//#endregion
-export { initializeValues as a, findSecondaryOption as c, useFieldLabelledByProps as d, useFieldRequired as f, impureSetValueFromPath as i, FieldProvider as l, enforceOneMustBeTrue as n, resolvedFlag as o, flattenGroups as r, applySecondaryField as s, FieldWrapper as t, useFieldControlProps as u };
+export { enforceOneMustBeTrue, flattenGroups, impureSetValueFromPath, initializeValues, resolvedFlag };

package/dist/form/types/fieldComponentTypes.d.ts

@@ -1,5 +1,5 @@
 import type { TSetFormDirty } from '../Form.js';
-import type { FieldType, LabelPosition, SchemaField } from './fieldTypes.js';
+import type { BaseField, LabelPosition, RuntimeFieldExtensions } from './fieldTypes.js';
 /** Intentionally loose to allow both manual types and schema-generated types. */
 interface FieldBase {
     type?: string;
@@ -29,5 +29,6 @@ export interface FieldComponentProps<TField extends FieldBase = FieldBase, TValu
     setFieldValue?: (field: string, value: unknown, shouldValidate?: boolean) => void;
     setFieldTouched?: (field: string, isTouched?: boolean, shouldValidate?: boolean) => void;
 }
-export type FieldProps<T extends SchemaField['type'], TValue = unknown> = FieldComponentProps<FieldType<T>, TValue>;
+/** Props for a field component, given the field definition it renders. */
+export type FieldProps<TField extends FieldBase = BaseField, TValue = unknown> = FieldComponentProps<TField & RuntimeFieldExtensions, TValue>;
 export {};

package/dist/form/types/fieldTypes.d.ts

@@ -1,20 +1,8 @@
-import type { Hidden, Ignore, Inputs, Optional } from './workflow-schema.js';
 export type LabelPosition = 'left' | 'top';
-export type FieldResource = string | {
-    type: string;
-    id: string;
-    name?: string;
-    user?: string;
-};
-type InputFieldValue = Inputs[string];
-export type SchemaField = Exclude<InputFieldValue, {
-    labelPosition?: LabelPosition;
-}>;
-export type FieldType<T extends SchemaField['type']> = Extract<SchemaField, {
-    type: T;
-}> & RuntimeFieldExtensions;
+/** A flag a field may set literally or as an expression the engine resolves. */
+export type FieldFlag = string | boolean;
 /** NOT part of the workflow JSON schema — added by the form system at runtime. */
-interface RuntimeFieldExtensions {
+export interface RuntimeFieldExtensions {
     name?: string;
     description?: string;
     showInUI?: boolean;
@@ -30,19 +18,17 @@ interface RuntimeFieldExtensions {
     resetOnChange?: boolean;
     options?: unknown;
 }
-/** Legacy — use schema types from workflow-schema.d.ts for new field components. */
 export interface BaseField extends RuntimeFieldExtensions {
     type: string;
     label?: string;
     tooltip?: string | string[];
-    hidden?: Hidden;
-    optional?: Optional;
-    ignore?: Ignore;
+    hidden?: FieldFlag;
+    optional?: FieldFlag;
+    ignore?: FieldFlag;
     collapsed?: boolean;
     disabled?: boolean;
     default?: unknown;
 }
-/** Permissive type for backward-compatible components; new code uses workflow-schema.d.ts types. */
 type AnyField = BaseField;
 interface WizardConfig {
     /** Must be 'wizard' to activate wizard mode */

package/dist/form/useParsedOpts.d.ts

@@ -1,4 +1,4 @@
-import { type WorkflowVariables } from '@parallelworks/workflow-parser';
+import type { WorkflowVariables } from '../engine.js';
 /**
  * useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
  */

package/dist/form/useParsedOpts.js

@@ -0,0 +1,62 @@
+import { useWorkflowEngine } from "../components/Provider.js";
+import { useRef } from "react";
+import deepEqual from "fast-deep-equal";
+//#region src/form/useParsedOpts.ts
+var EMPTY_VARS = {};
+var EMPTY_KEYS = [];
+/**
+* useMemo won't work here — Formik values changes on every keystroke, so this hook extracts which inputs.* keys the schema references and re-parses only when those change. Defaults `userVars`/`secretKeys` to empty — callers in React scope should pass them from `useUserVars()` so the parser leaves `${{ var.SECRET }}` literal during template eval (otherwise the recursive substitution turns `"https://${{ var.PAT }}@host/"` into `"https://@host/"`).
+*/
+function useParsedOpts(rawOptions, values, organizationVariables, userVars = EMPTY_VARS, secretKeys = EMPTY_KEYS, remoteVars = EMPTY_VARS) {
+	const engine = useWorkflowEngine();
+	const c = useRef({
+		rawOptions: null,
+		orgVars: void 0,
+		userVars: null,
+		secretKeys: null,
+		remoteVars: null,
+		converted: {},
+		inputDeps: /* @__PURE__ */ new Set(),
+		hasExpressions: false,
+		relevantSnapshot: {},
+		result: null
+	}).current;
+	if (rawOptions !== c.rawOptions) {
+		c.rawOptions = rawOptions;
+		c.converted = engine.convertInputs(rawOptions);
+		const { inputDeps, hasExpressions } = engine.inputDependencies(c.converted);
+		c.inputDeps = inputDeps;
+		c.hasExpressions = hasExpressions;
+		c.result = null;
+	}
+	if (organizationVariables !== c.orgVars || userVars !== c.userVars || secretKeys !== c.secretKeys || remoteVars !== c.remoteVars) {
+		c.orgVars = organizationVariables;
+		c.userVars = userVars;
+		c.secretKeys = secretKeys;
+		c.remoteVars = remoteVars;
+		c.result = null;
+	}
+	if (c.result !== null) {
+		if (c.inputDeps.size === 0) return c.result;
+		let inputsChanged = false;
+		for (const key of c.inputDeps) if (!deepEqual(values[key], c.relevantSnapshot[key])) {
+			inputsChanged = true;
+			break;
+		}
+		if (!inputsChanged) return c.result;
+	}
+	const parsed = engine.evaluate({
+		inputs: values,
+		obj: c.converted,
+		orgVars: organizationVariables,
+		userVars,
+		secretKeys,
+		remoteVars
+	});
+	c.result = parsed;
+	c.relevantSnapshot = {};
+	for (const key of c.inputDeps) c.relevantSnapshot[key] = values[key];
+	return parsed;
+}
+//#endregion
+export { useParsedOpts };

package/dist/form/usePrevious.js

@@ -0,0 +1,11 @@
+import { useEffect, useRef } from "react";
+//#region src/form/usePrevious.ts
+function usePrevious(value) {
+	const ref = useRef(void 0);
+	useEffect(() => {
+		ref.current = value;
+	});
+	return ref.current;
+}
+//#endregion
+export { usePrevious };

package/dist/form/utils/checkShowIfObject.js

@@ -0,0 +1,14 @@
+import { getValueUsingPath } from "./getValueUsingPath.js";
+//#region src/form/utils/checkShowIfObject.ts
+function checkShowIfObject(showIfObject, formValues, index) {
+	const valueList = [];
+	for (let [key, value] of Object.entries(showIfObject)) {
+		if (index !== void 0) key = key.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(formValues, key);
+		if (typeof value === "boolean" || typeof value === "string" || typeof value === "number") valueList.push(dependsOnValue !== null && dependsOnValue !== void 0 && dependsOnValue.toString() === value.toString());
+		else if (Array.isArray(value)) valueList.push(value.includes(dependsOnValue));
+	}
+	return valueList;
+}
+//#endregion
+export { checkShowIfObject };

package/dist/form/utils/{slurmDuration.d.ts → duration.d.ts}

@@ -1,5 +1,5 @@
-export declare function parseSlurmDuration(text: string): number | null;
-export declare function formatSecondsAsSlurmDuration(totalSeconds: number): string;
+export declare function parseDuration(text: string): number | null;
+export declare function formatDuration(totalSeconds: number): string;
 export declare const FLEX_MAX_DURATION_RANGE: {
     min: number;
     max: number;

package/dist/form/utils/duration.js

@@ -0,0 +1,69 @@
+import { Duration } from "luxon";
+//#region src/form/utils/duration.ts
+var WITH_DAYS = /^(\d+)-(\d{1,2})(?::(\d{1,2})(?::(\d{1,2}))?)?$/;
+var WITHOUT_DAYS = /^(\d+):(\d{1,2}):(\d{1,2})$/;
+function parseDuration(text) {
+	const trimmed = text.trim();
+	let days = 0;
+	let hours;
+	let minutes;
+	let seconds;
+	const withDays = trimmed.match(WITH_DAYS);
+	if (withDays) {
+		days = Number(withDays[1]);
+		hours = Number(withDays[2]);
+		minutes = Number(withDays[3] ?? 0);
+		seconds = Number(withDays[4] ?? 0);
+		if (hours > 23) return null;
+	} else {
+		const withoutDays = trimmed.match(WITHOUT_DAYS);
+		if (!withoutDays) return null;
+		hours = Number(withoutDays[1]);
+		minutes = Number(withoutDays[2]);
+		seconds = Number(withoutDays[3]);
+	}
+	if (minutes > 59 || seconds > 59) return null;
+	return days * 86400 + hours * 3600 + minutes * 60 + seconds;
+}
+function formatDuration(totalSeconds) {
+	if (!Number.isFinite(totalSeconds) || totalSeconds < 0) return "";
+	const parts = Duration.fromObject({ seconds: Math.floor(totalSeconds) }).shiftTo("days", "hours", "minutes", "seconds");
+	const pad = (n) => String(n).padStart(2, "0");
+	const time = `${pad(parts.hours)}:${pad(parts.minutes)}:${pad(parts.seconds)}`;
+	return parts.days > 0 ? `${parts.days}-${time}` : time;
+}
+var FLEX_MAX_DURATION_RANGE = {
+	min: 600,
+	max: 604800
+};
+var FLEX_WAIT_TIME_RANGE = {
+	min: 30,
+	max: 604800
+};
+var STANDARD_MAX_DURATION_RANGE = {
+	min: 30,
+	max: 10368e3
+};
+var DURATION_PATH = /^partitions\[\d+\]\.(maxDuration|flexStartWaitTime|suspendTime)$/;
+function collectPartitionDurationIssues(partitions, invalidDurationPaths) {
+	const issues = new Set(invalidDurationPaths.filter((path) => DURATION_PATH.test(path)));
+	(partitions ?? []).forEach((partition, i) => {
+		const p = partition;
+		const check = (fieldName, range, required) => {
+			const raw = p?.[fieldName];
+			if (raw === void 0 || raw === null || raw === "") {
+				if (required) issues.add(`partitions[${i}].${fieldName}`);
+				return;
+			}
+			const value = Number(raw);
+			if (!Number.isFinite(value) || value < range.min || value > range.max) issues.add(`partitions[${i}].${fieldName}`);
+		};
+		if (p?.provisioningMode === "flex") {
+			check("maxDuration", FLEX_MAX_DURATION_RANGE, true);
+			check("flexStartWaitTime", FLEX_WAIT_TIME_RANGE, true);
+		} else check("maxDuration", STANDARD_MAX_DURATION_RANGE, false);
+	});
+	return [...issues];
+}
+//#endregion
+export { FLEX_MAX_DURATION_RANGE, FLEX_WAIT_TIME_RANGE, STANDARD_MAX_DURATION_RANGE, collectPartitionDurationIssues, formatDuration, parseDuration };

package/dist/form/utils/getParentValue.js

@@ -0,0 +1,23 @@
+import { getValueUsingPath } from "./getValueUsingPath.js";
+import { checkShowIfObject } from "./checkShowIfObject.js";
+//#region src/form/utils/getParentValue.ts
+function getParentValue(index, targetField, values, dependentPath, field) {
+	let parentValue;
+	if (typeof targetField === "object" && targetField !== null && !Array.isArray(targetField)) parentValue = !checkShowIfObject(targetField, values, index).includes(false);
+	else if (field.depends_on) {
+		dependentPath = field.depends_on;
+		if (index !== void 0) dependentPath = field.depends_on.replace("[index]", `[${index}]`);
+		const dependsOnValue = getValueUsingPath(values, dependentPath);
+		const dependsOnText = dependsOnValue === null || dependsOnValue === void 0 ? void 0 : String(dependsOnValue);
+		if (Array.isArray(targetField)) parentValue = targetField.includes(dependsOnValue) || targetField.includes(dependsOnText);
+		else if (typeof targetField === "string") parentValue = dependsOnText !== void 0 && targetField.includes(dependsOnText);
+		else parentValue = targetField === dependsOnValue;
+	} else {
+		dependentPath = typeof targetField === "string" ? targetField : "";
+		if (index !== void 0 && typeof targetField === "string") dependentPath = targetField.replace("[index]", `[${index}]`);
+		parentValue = getValueUsingPath(values, dependentPath);
+	}
+	return parentValue;
+}
+//#endregion
+export { getParentValue };

package/dist/form/utils/getPlaceholder.js

@@ -0,0 +1,9 @@
+//#region src/form/utils/getPlaceholder.ts
+/** `placeholder=""` (empty string) intentionally overrides the default; undefined does not. */
+function getPlaceholder(placeholder, defaultValue) {
+	if (placeholder !== void 0) return placeholder;
+	if (defaultValue && (typeof defaultValue === "string" || typeof defaultValue === "number")) return defaultValue.toString();
+	return "";
+}
+//#endregion
+export { getPlaceholder };

package/dist/form/utils/getValueUsingPath.js

@@ -0,0 +1,23 @@
+//#region src/form/utils/getValueUsingPath.ts
+function getValueUsingPath(obj, path) {
+	if (typeof path !== "string" || !path) return;
+	const keys = path.split(".");
+	let current = obj;
+	for (const key of keys) {
+		if (!current || typeof current !== "object") return;
+		const container = current;
+		if (key.includes("[")) {
+			const [arrayKey = "", indexStr = ""] = key.split("[");
+			const index = parseInt(indexStr.slice(0, -1), 10);
+			const list = container[arrayKey];
+			if (!Array.isArray(list) || isNaN(index)) return;
+			current = list[index];
+		} else {
+			if (!(key in container)) return;
+			current = container[key];
+		}
+	}
+	return current;
+}
+//#endregion
+export { getValueUsingPath };

package/dist/form/utils/secondaryField.js

@@ -0,0 +1,22 @@
+//#region src/form/utils/secondaryField.ts
+function findSecondaryOption(options, value) {
+	for (const candidate of options) {
+		if (!candidate || typeof candidate !== "object") continue;
+		const option = candidate;
+		if (option.value === value) return option;
+		if (Array.isArray(option.options)) {
+			const nestedOption = findSecondaryOption(option.options, value);
+			if (nestedOption) return nestedOption;
+		}
+	}
+}
+function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
+	if (secondaryField === void 0 || secondaryValue === void 0) return;
+	const fields = Array.isArray(secondaryField) ? secondaryField : [secondaryField];
+	const values = Array.isArray(secondaryValue) ? secondaryValue : [secondaryValue];
+	fields.forEach((field, index) => {
+		setFieldValue(field, values[index]);
+	});
+}
+//#endregion
+export { applySecondaryField, findSecondaryOption };

package/dist/graph/AnnotationBanner.js

@@ -0,0 +1,141 @@
+import { ChevronDownIcon, ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
+import { keyedByContent } from "../components/keys.js";
+import cx from "classnames";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/graph/AnnotationBanner.tsx
+var typeOrder = {
+	error: 0,
+	warning: 1,
+	notice: 2
+};
+var typeConfig = {
+	error: {
+		icon: ErrorIcon,
+		label: "Error",
+		accentClass: "text-red-500",
+		bgClass: "bg-red-500/5 dark:bg-red-500/10",
+		countBg: "bg-red-500/15 text-red-700 dark:text-red-400"
+	},
+	warning: {
+		icon: WarningIcon,
+		label: "Warning",
+		accentClass: "text-yellow-500",
+		bgClass: "bg-yellow-500/5 dark:bg-yellow-500/10",
+		countBg: "bg-yellow-500/15 text-yellow-700 dark:text-yellow-400"
+	},
+	notice: {
+		icon: InfoIcon,
+		label: "Notice",
+		accentClass: "text-blue-500",
+		bgClass: "bg-blue-500/5 dark:bg-blue-500/10",
+		countBg: "bg-blue-500/15 text-blue-700 dark:text-blue-400"
+	}
+};
+function collectAnnotations(executedJobs, parentPath) {
+	const annotations = [];
+	for (const [jobName, job] of Object.entries(executedJobs)) {
+		const fullJobName = parentPath ? `${parentPath} > ${jobName}` : jobName;
+		const steps = job?.steps;
+		if (!Array.isArray(steps)) continue;
+		for (let stepIndex = 0; stepIndex < steps.length; stepIndex++) {
+			const step = steps[stepIndex];
+			const stepAnnotations = step?.annotations;
+			if (Array.isArray(stepAnnotations)) {
+				for (const annotation of stepAnnotations) if (annotation?.message) annotations.push({
+					type: annotation.type || "notice",
+					message: annotation.message,
+					title: annotation.title,
+					file: annotation.file,
+					line: annotation.line,
+					jobName: fullJobName,
+					stepName: step?.name,
+					stepIndex
+				});
+			}
+			const subJobs = step?.subworkflow?.jobs;
+			if (subJobs && typeof subJobs === "object") annotations.push(...collectAnnotations(subJobs, fullJobName));
+		}
+	}
+	annotations.sort((a, b) => (typeOrder[a.type] ?? 2) - (typeOrder[b.type] ?? 2));
+	return annotations;
+}
+function AnnotationBanner({ executedJobs }) {
+	const [expanded, setExpanded] = useState(false);
+	if (!executedJobs) return null;
+	const annotations = collectAnnotations(executedJobs);
+	if (annotations.length === 0) return null;
+	const counts = {
+		error: 0,
+		warning: 0,
+		notice: 0
+	};
+	for (const a of annotations) counts[a.type]++;
+	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setExpanded((prev) => !prev),
+			className: cx("w-full flex items-center gap-3 px-4 py-2.5 text-left", "hover:bg-[var(--theme-hover)] transition-colors", expanded && "border-b border-[var(--theme-border)]"),
+			children: [
+				/* @__PURE__ */ jsx(ChevronIcon, { className: "w-3.5 h-3.5 text-[var(--theme-muted-text-color)] shrink-0" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium text-[var(--theme-panel-color)]",
+					children: "Annotations"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "flex items-center gap-1.5",
+					children: [
+						"error",
+						"warning",
+						"notice"
+					].map((type) => {
+						if (!counts[type]) return null;
+						const config = typeConfig[type];
+						const Icon = config.icon;
+						return /* @__PURE__ */ jsxs("span", {
+							className: cx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
+							children: [/* @__PURE__ */ jsx(Icon, { className: "w-3 h-3" }), counts[type]]
+						}, type);
+					})
+				})
+			]
+		}), expanded && /* @__PURE__ */ jsx("div", {
+			className: "divide-y divide-[var(--theme-border)] max-h-[400px] overflow-y-auto",
+			children: keyedByContent(annotations, (a) => a.id ?? `${a.type}:${a.title}:${a.message}`).map(({ key, item: annotation }) => {
+				const config = typeConfig[annotation.type] || typeConfig.notice;
+				const Icon = config.icon;
+				return /* @__PURE__ */ jsxs("div", {
+					className: cx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
+					children: [/* @__PURE__ */ jsx(Icon, { className: cx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__PURE__ */ jsxs("div", {
+						className: "flex-1 min-w-0",
+						children: [
+							/* @__PURE__ */ jsxs("span", {
+								className: cx("font-medium", config.accentClass),
+								children: [annotation.title || config.label, ":"]
+							}),
+							" ",
+							/* @__PURE__ */ jsx("span", {
+								className: "text-[var(--theme-panel-color)]",
+								children: annotation.message
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "text-[var(--theme-muted-text-color)] ml-2 text-xs",
+								children: [
+									"in ",
+									annotation.jobName,
+									" →",
+									" ",
+									annotation.stepName || `step ${annotation.stepIndex}`
+								]
+							})
+						]
+					})]
+				}, key);
+			})
+		})]
+	});
+}
+//#endregion
+export { AnnotationBanner };

package/dist/graph/Collapse.js

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AnimatePresence, motion } from "framer-motion";
+//#region src/graph/Collapse.tsx
+function Collapse({ expanded, children, releaseOverflow = true }) {
+	const [overflowVisible, setOverflowVisible] = useState(false);
+	return /* @__PURE__ */ jsx(AnimatePresence, {
+		initial: false,
+		children: expanded && /* @__PURE__ */ jsx(motion.div, {
+			initial: {
+				height: 0,
+				opacity: 0
+			},
+			animate: {
+				height: "auto",
+				opacity: 1
+			},
+			exit: {
+				height: 0,
+				opacity: 0
+			},
+			transition: {
+				duration: .2,
+				ease: [
+					.25,
+					.1,
+					.25,
+					1
+				]
+			},
+			style: { overflow: overflowVisible ? "visible" : "hidden" },
+			onAnimationStart: () => setOverflowVisible(false),
+			onAnimationComplete: () => {
+				if (expanded && releaseOverflow) setOverflowVisible(true);
+			},
+			children
+		}, "collapse")
+	});
+}
+//#endregion
+export { Collapse };