@parallelworks/ui 0.74.0 → 0.75.0

package/README.md

@@ -99,7 +99,7 @@ Each need has one component. Reach for it before styling markup by hand.
 | A live relative time or duration | `RelativeTime`, `Elapsed` |
 | Rendered Markdown | `Markdown` |
 | Code or YAML to read or edit | `Editor` from `./editor`; `EditorField` as a form field, `FormCodePanel` for a form's values as JSON |
-| A run's jobs, steps, logs and annotations | `DependencyGraph` from `./graph`, as a graph or a list |
+| A run's jobs, steps, logs, annotations and warnings | `DependencyGraph` from `./graph`, as a graph or a list |
 | A workflow's jobs drawn from its YAML, or edited by hand | `DependencyGraphPreview` from `./graph`, editable with an `editor`; `InputsFormEditor` for its run form |
 | A value that survives a reload | `usePersistedState` |
 | Choosing the app's colors | `ThemeEditor`, applied with `useApplyTheme` |
@@ -775,6 +775,14 @@ highlight changes, and panning, zooming and a running run's clock re-render none
 the whole graph, zooms out to 1% to show the shape of the largest, and in to 200% to read a node;
 the wheel zooms by the same factor at every scale, about the pointer.
 
+A run's `warnings` (`RunWarning`: a `message` about a `job`, or about one of its steps by `step`
+index, in the subworkflow its `path` of `[job, 'step_<n>', …]` names) are listed over the graph,
+each linking to its job or step: the link opens the subworkflows, matrix and job around it, brings
+it and what it is in into view below the graph's view bar, readable, and moves focus to it. Each job and step a warning is about, and each one it sits
+inside, carries a mark that lists the warnings on hover, so one skipped without a log is still
+flagged. A job name a matrix ran as several jobs marks each of them. `dag.warningCount` words the
+count.
+
 The editor checks YAML against the schemas a host registers with `configureEditorYaml` from
 `@parallelworks/ui/editor`. The job, step, input and settings dialogs edit their YAML at their own
 paths (`JOB_YAML_PATH`, `STEP_YAML_PATH`, `INPUT_YAML_PATH`, `SETTINGS_YAML_PATH`); `settingsSchemas`

package/dist/ai/adapter/types.d.ts

@@ -1,4 +1,4 @@
-import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ProviderIssue, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, ToolCall, UnreachableSession } from '../types.js';
+import type { Allocation, ApprovalPart, AttachmentRef, ChatModel, Conversation, ConversationSummary, ProviderInfo, ProviderIssue, ShareGroup, SharePermission, SharePermissionLevel, TodoItem, ToolCall, ToolDecision, UnreachableSession } from '../types.js';
 import type { CompletionMessage } from './openai/wire.js';
 export declare class ChatAdapterError extends Error {
     status?: number | undefined;
@@ -48,6 +48,10 @@ export type PartDelta = {
     id: string;
     result: string;
     isError?: boolean;
+} | {
+    type: 'tool_decision';
+    id: string;
+    decision: ToolDecision;
 } | {
     type: 'subagent_start';
     id: string;

package/dist/ai/components/agent/AgentMessageParts.js

@@ -7,6 +7,7 @@ import { fieldBox } from "../../../components/fieldBox.js";
 import { focusOnMount } from "../../../components/focus.js";
 import { Disclosure } from "../../../components/Disclosure.js";
 import { formatDuration } from "../../../format.js";
+import { RelativeTime } from "../../../components/relativeTime.js";
 import { LogViewer } from "../../../logviewer/LogViewer.js";
 import { agentColorHex, bashExitCode, fullToolArgs, isGroupableTool, rollupSentence, summarizeToolArgs, toolHeaderFor, toolSummary } from "../../agent/toolfmt.js";
 import { computeEditDiff, computeWriteRows, editSummary, isEditDiffTool, parseEditArgs } from "../../agent/diff.js";
@@ -277,7 +278,45 @@ function ToolCallBlock({ part }) {
 			isDiff && /* @__PURE__ */ jsx("div", {
 				className: "ml-5",
 				children: /* @__PURE__ */ jsx(EditDiffBlock, { part })
-			})
+			}),
+			part.decision && /* @__PURE__ */ jsx(DecisionLine, { decision: part.decision })
+		]
+	});
+}
+function decisionLabel(d, t) {
+	switch (d.status) {
+		case "approved":
+			if (d.by === "auto-reviewer") return t.allowedByReviewer;
+			return d.name ? t.allowedBy(d.name) : t.allowed;
+		case "denied":
+			if (d.by === "auto-reviewer") return t.deniedByReviewer;
+			return d.name ? t.deniedBy(d.name) : t.denied;
+		case "expired": return t.approvalExpired;
+		case "timed_out": return t.approvalTimedOut;
+		case "failed": return t.reviewFailed;
+	}
+}
+function DecisionLine({ decision }) {
+	const { strings } = useChatConfig();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ml-5 mt-0.5 flex min-w-0 flex-wrap items-baseline gap-x-1 text-xs theme-muted-text",
+		"data-testid": "tool-decision",
+		children: [
+			/* @__PURE__ */ jsx("span", { children: decisionLabel(decision, strings.agentTranscript) }),
+			decision.at && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "·"
+			}), /* @__PURE__ */ jsx(RelativeTime, {
+				value: decision.at,
+				className: "shrink-0"
+			})] }),
+			decision.note && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: "·"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 max-w-full truncate",
+				children: decision.note
+			})] })
 		]
 	});
 }
@@ -749,7 +788,7 @@ function buildRenderItems(parts) {
 		run = [];
 	};
 	parts.forEach((part, index) => {
-		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && isGroupableTool(part.name)) {
+		if (part.kind === "reasoning" || part.kind === "tool_call" && part.status === "ok" && !part.decision && isGroupableTool(part.name)) {
 			run.push({
 				part,
 				index

package/dist/ai/core/parts.js

@@ -39,6 +39,10 @@ function applyPartDelta(parts, delta) {
 			status: delta.isError ? "error" : "ok",
 			result: delta.result
 		} : p);
+		case "tool_decision": return parts.map((p) => p.kind === "tool_call" && p.id === delta.id ? {
+			...p,
+			decision: delta.decision
+		} : p);
 		case "subagent_start": {
 			const part = {
 				kind: "subagent",

package/dist/ai/strings.d.ts

@@ -234,6 +234,16 @@ export interface ChatStrings {
         denyWithFeedback: string;
         feedbackPlaceholder: string;
         answered: string;
+        /** Under a call someone answered: who allowed or denied it. */
+        allowedBy: (name: string) => string;
+        deniedBy: (name: string) => string;
+        allowed: string;
+        denied: string;
+        allowedByReviewer: string;
+        deniedByReviewer: string;
+        approvalExpired: string;
+        approvalTimedOut: string;
+        reviewFailed: string;
         writeOwnAnswer: string;
         subagent: string;
         tasks: string;

package/dist/ai/strings.js

@@ -253,6 +253,15 @@ var defaultChatStrings = {
 		denyWithFeedback: "No, and provide feedback to the agent",
 		feedbackPlaceholder: "Tell the agent what to do instead…",
 		answered: "Answered",
+		allowedBy: (name) => `Allowed by ${name}`,
+		deniedBy: (name) => `Denied by ${name}`,
+		allowed: "Allowed",
+		denied: "Denied",
+		allowedByReviewer: "Allowed by the auto-reviewer",
+		deniedByReviewer: "Denied by the auto-reviewer",
+		approvalExpired: "Expired without an answer",
+		approvalTimedOut: "No answer in time",
+		reviewFailed: "The auto-reviewer could not decide",
 		writeOwnAnswer: "Write my own answer…",
 		subagent: "Task",
 		tasks: "Tasks",

package/dist/ai/types.d.ts

@@ -55,6 +55,17 @@ export interface ReasoningPart {
     text: string;
     durationMs?: number;
 }
+export type ToolDecisionStatus = 'approved' | 'denied' | 'expired' | 'timed_out' | 'failed';
+/** How a call that needed an answer was settled. */
+export interface ToolDecision {
+    status: ToolDecisionStatus;
+    by: 'user' | 'auto-reviewer';
+    /** The person who answered, when `by` is a user. */
+    name?: string;
+    /** ISO time of the answer. */
+    at?: string;
+    note?: string;
+}
 export interface ToolCallPart {
     kind: 'tool_call';
     id: string;
@@ -63,6 +74,7 @@ export interface ToolCallPart {
     status: ToolCallStatus;
     result?: string;
     startLine?: number;
+    decision?: ToolDecision;
 }
 export type SubagentStatus = 'running' | 'done' | 'failed';
 export interface SubagentPart {

package/dist/components/Provider.d.ts

@@ -268,6 +268,9 @@ export interface UIStrings {
         annotationSource: (job: string, step: string) => string;
         /** A step without a name, numbered from 0 as the run reports it. */
         stepNumber: (index: number) => string;
+        /** How many warnings: the title of a run's list of warnings, and the name of the mark on a job
+         *  or step they're about, such as "2 warnings". */
+        warningCount: (count: number) => string;
     };
     jobActions: {
         openSubworkflowLogs: string;

package/dist/components/Provider.js

@@ -281,7 +281,8 @@ var DEFAULTS = {
 				]
 			].filter(([count]) => count).map(([count, one, many]) => `${count} ${count === 1 ? one : many}`).join(", ")}`,
 			annotationSource: (job, step) => `in ${job} → ${step}`,
-			stepNumber: (index) => `step ${index}`
+			stepNumber: (index) => `step ${index}`,
+			warningCount: (count) => count === 1 ? "1 warning" : `${count} warnings`
 		},
 		jobActions: {
 			openSubworkflowLogs: "Open subworkflow logs",

package/dist/graph/DependencyGraph.d.ts

@@ -1,5 +1,6 @@
 import type { GraphLayout } from '../editing.js';
 import type { DependencyGraphEditor } from './editorApi.js';
+import { type RunWarning } from './runWarnings.js';
 import { type RunLink, type WorkflowJob } from './types.js';
 export type ViewMode = 'dag' | 'tree';
 export declare const addCleanupSteps: ({ jobs }: {
@@ -16,6 +17,9 @@ interface GraphRun {
     completedAt?: string | undefined;
     executedJobs?: Record<string, unknown> | undefined;
     links?: Record<string, RunLink> | undefined;
+    /** What is probably wrong with the run's jobs and steps as written, listed over the graph and
+     *  marked on each job and step they're about, which matters most for one skipped without a log. */
+    warnings?: readonly RunWarning[] | null | undefined;
 }
 export default function DependencyGraph({ run, preview, removeBorder, viewMode, setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar, }: {
     run: GraphRun;

package/dist/graph/DependencyGraph.js

@@ -14,12 +14,15 @@ import { useStickyTop } from "../components/stickyTop.js";
 import { Tabs } from "../components/Tabs.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
 import { initializeValues } from "../form/lib.js";
+import { prefersReducedMotion } from "../reducedMotion.js";
 import { AnnotationBanner } from "./AnnotationBanner.js";
 import { jobLabel, toggled } from "./util.js";
 import { EDITOR_HANDLE_CLASS, GraphEditorProvider, useGraphEditor, useSelectedEdges } from "./graphEditorState.js";
 import { EdgeEnds, EdgeHitPath, EmptyGraphEditor, GraphEditorCanvas, NodePorts } from "./editorRows.js";
 import { emptyColumnsStyle } from "./gridSpacing.js";
 import { Reveal } from "./Reveal.js";
+import { RunWarningsList } from "./RunWarningsList.js";
+import { WarningMarks, WarningMarksContext, locateWarnings, rowKey } from "./runWarnings.js";
 import { Joblist } from "./JobSummary.js";
 import { Store, useStore } from "./store.js";
 import { Lineage, LineageContext } from "./lineage.js";
@@ -32,7 +35,7 @@ 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";
+import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, enclosing, fitMargin, fitView, intoView, viewShowing, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment$1, Suspense, createContext, lazy, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
@@ -224,6 +227,7 @@ function jobHandlers({ engine, jobs, displayJobs, pathPrefix, stepsOpen, toggleS
 	const openLog = (j, s) => setSublogOpen(engine.stepLogPath(pathPrefix, j, s));
 	const openSummary = (j, s) => setSublogOpen(fileBeside(engine.stepLogPath(pathPrefix, j, s), "summary.md"));
 	return {
+		pathPrefix,
 		isStepsOpen,
 		onJobClick: (j) => {
 			const status = jobs[j]?.status ?? displayJobs[j]?.status;
@@ -700,6 +704,43 @@ function graphBounds(content) {
 	}
 	return bounds;
 }
+var READABLE_SCALE = .5;
+/** Where a job or step a warning took the graph to shows: the panel below its view bar, which sits
+*  over the graph. */
+function visibleArea(panel, bar) {
+	const outer = panel.getBoundingClientRect();
+	const top = outer.top + panel.clientTop;
+	const below = bar ? Math.max(top, bar.getBoundingClientRect().bottom) : top;
+	return {
+		left: outer.left + panel.clientLeft,
+		top: below,
+		width: panel.clientWidth,
+		height: Math.max(0, top + panel.clientHeight - below)
+	};
+}
+function flash(row) {
+	const tone = getComputedStyle(row).getPropertyValue("--theme-warning").trim();
+	if (!tone || typeof row.animate !== "function") return;
+	const ring = {
+		outline: `3px solid ${tone}`,
+		outlineOffset: "4px",
+		borderRadius: "6px"
+	};
+	row.animate([
+		ring,
+		{
+			...ring,
+			offset: .7
+		},
+		{
+			...ring,
+			outlineColor: "transparent"
+		}
+	], {
+		duration: 2e3,
+		easing: "ease-in"
+	});
+}
 function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag", setViewMode, layout, editor, yamlJobs, inputs, workflow, fixedHeight, openStep, onCloseLog, stickySidebar }) {
 	const engine = useWorkflowEngine();
 	const animT = .125;
@@ -708,6 +749,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	const runSlug = run.slug ?? "";
 	const workflowName = run.workflowName ?? "";
 	const runStatus = toStatus(run.status);
+	const runWarnings = run.warnings;
+	const warnings = useMemo(() => runWarnings?.length ? locateWarnings(runWarnings, rootJobs) : [], [runWarnings, rootJobs]);
+	const freshMarks = useMemo(() => warnings.length ? new WarningMarks(warnings) : WarningMarks.EMPTY, [warnings]);
+	const [marks, setMarks] = useState(freshMarks);
+	if (marks !== freshMarks && marks.signature !== freshMarks.signature) setMarks(freshMarks);
 	const [sublogOpen, setSublogOpen] = useState("");
 	const [stepsOpen, setStepsOpen] = useState(/* @__PURE__ */ new Set());
 	const [expandedSubworkflows, setExpandedSubworkflows] = useState(/* @__PURE__ */ new Set());
@@ -901,8 +947,14 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	]);
 	const { dependencyCols } = rootGraph;
 	const held = useRef(null);
+	const shown = useRef(null);
+	const viewBarRef = useRef(null);
 	const viewed = useRef(false);
 	const rowOf = useCallback((job) => [...containerRef.current?.querySelectorAll("[data-dag-job]") ?? []].find((el) => el.dataset["dagJob"] === job) ?? null, []);
+	const runRowOf = useCallback((key, jobKey) => {
+		const rows = [...containerRef.current?.querySelectorAll("[data-run-row]") ?? []];
+		return rows.find((el) => el.dataset["runRow"] === key) ?? (jobKey === void 0 ? null : rows.find((el) => el.dataset["runRow"] === jobKey) ?? null);
+	}, []);
 	const nodeOf = useCallback((job) => {
 		const row = rowOf(job);
 		return row?.closest("[id^=\"node_\"]") ?? row;
@@ -927,6 +979,18 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		const transform = transformRef.current;
 		const bounds = content ? graphBounds(content) : null;
 		if (!container || !content || !transform || !bounds) return;
+		const showing = shown.current && performance.now() - shown.current.at < HOLD_MS ? shown.current.keys.flatMap((key) => runRowOf(key) ?? []) : [];
+		const [row] = showing;
+		if (row) {
+			const { positionX, positionY, scale } = transform.instance.state;
+			const view = viewShowing(enclosing(showing.map((el) => el.getBoundingClientRect())), row.getBoundingClientRect(), visibleArea(container, viewBarRef.current), (transform.instance.wrapperComponent ?? container).getBoundingClientRect(), {
+				x: positionX,
+				y: positionY,
+				scale
+			}, READABLE_SCALE);
+			if (view) transform.setTransform(view.x, view.y, view.scale, animationMs, "easeOut");
+			return;
+		}
 		const panel = {
 			width: container.clientWidth,
 			height: container.clientHeight
@@ -956,7 +1020,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		const wrapperEl = container.querySelector(".react-transform-component");
 		if (wrapperEl) wrapperEl.style.transform = `translate(${view.x}px, ${view.y}px) scale(${view.scale})`;
 		requestAnimationFrame(() => transform.setTransform(view.x, view.y, view.scale, 0));
-	}, [nodeOf, editor]);
+	}, [
+		nodeOf,
+		editor,
+		runRowOf
+	]);
 	const fitWhenSettled = useCallback(async () => {
 		const container = containerRef.current;
 		const content = graphContentRef.current;
@@ -989,6 +1057,51 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 		const pos = offsetWithin(el, content);
 		transform.setTransform(container.clientWidth / 2 - (pos.x + el.offsetWidth / 2) * scale, container.clientHeight / 2 - (pos.y + el.offsetHeight / 2) * scale, scale, FIT_ANIMATION_MS, "easeOut");
 	}, []);
+	const canShowWarnings = viewMode !== "tree" || !!setViewMode;
+	const showWarning = (target) => {
+		const elsewhere = !target.prefix.startsWith(pathAppend);
+		const via = elsewhere ? target.via : target.via.filter((v) => v.prefix.startsWith(pathAppend));
+		const jobKeys = via.map((v) => rowKey(v.prefix, v.job));
+		if (target.step !== void 0) jobKeys.push(rowKey(target.prefix, target.job));
+		const matrixKeys = [...via, target].flatMap(({ prefix, job }) => {
+			const origin = walkJobPath(rootJobs, parsePrefixToPath(prefix))[job]?._matrix?.originaljob;
+			return origin ? [`${prefix}${origin}`] : [];
+		});
+		shown.current = {
+			keys: [
+				target.key,
+				rowKey(target.prefix, target.job),
+				...via.flatMap((v) => [rowKey(v.prefix, v.job, v.step), rowKey(v.prefix, v.job)]).reverse()
+			],
+			at: performance.now()
+		};
+		flushSync(() => {
+			if (viewMode === "tree") setViewMode?.("dag");
+			if (elsewhere) {
+				resetGraph();
+				setExecutedJobsPath((prev) => [[], ...prev.slice(executedJobsPathIdx, 10)]);
+				setExecutedJobsPathIdx(0);
+			}
+			setStepsOpen((prev) => /* @__PURE__ */ new Set([...prev, ...jobKeys]));
+			setExpandedSubworkflows((prev) => /* @__PURE__ */ new Set([...prev, ...via.map((v) => `${v.prefix}${v.job}:${v.step}`)]));
+			setMatrixOpen((prev) => /* @__PURE__ */ new Set([...prev, ...matrixKeys]));
+		});
+		const row = runRowOf(target.key, rowKey(target.prefix, target.job));
+		if (row) {
+			row.focus({ preventScroll: true });
+			flash(row);
+		}
+		const first = fitViewRef.current;
+		if (first && first.scale < READABLE_SCALE) fitViewRef.current = {
+			...first,
+			scale: READABLE_SCALE
+		};
+		containerRef.current?.scrollIntoView({
+			block: "nearest",
+			behavior: prefersReducedMotion() ? "auto" : "smooth"
+		});
+		fitWhenSettled();
+	};
 	const registerShow = editor?.registerShow;
 	useEffect(() => {
 		if (!editorApi) return;
@@ -1363,6 +1476,11 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							})
 						]
 					}),
+					!preview && /* @__PURE__ */ jsx(RunWarningsList, {
+						warnings,
+						rootJobs,
+						onShow: canShowWarnings ? showWarning : void 0
+					}),
 					!preview && /* @__PURE__ */ jsx(AnnotationBanner, { executedJobs: jobs }),
 					viewMode === "tree" && !preview ? /* @__PURE__ */ jsx("div", {
 						className: "panel w-full border",
@@ -1396,6 +1514,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 							onPinch: moved,
 							onTransform,
 							children: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+								ref: viewBarRef,
 								className: "absolute z-10 top-2 right-2 flex max-w-[calc(100%-1rem)] flex-col items-end gap-y-1",
 								children: /* @__PURE__ */ jsx(GraphViewControls, {
 									history: executedJobsPath.length > 1 ? {
@@ -1498,7 +1617,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 	});
 	return /* @__PURE__ */ jsx(GraphEditorProvider, {
 		value: editorApi,
-		children: graph
+		children: /* @__PURE__ */ jsx(WarningMarksContext, {
+			value: marks,
+			children: graph
+		})
 	});
 }
 /** Jobs as a run evaluates them before it starts: each `strategy`, and a `needs` expression, from the inputs' defaults. */

package/dist/graph/InputsEditor.js

@@ -7,8 +7,8 @@ import { menuDivider } from "../components/MenuEntries.js";
 import { IconButton } from "../components/IconButton.js";
 import { useContextMenu } from "../components/ContextMenu.js";
 import { NumberInput } from "../components/NumberInput.js";
-import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
 import { prefersReducedMotion } from "../reducedMotion.js";
+import { MarqueeBox, createStore, reclaimFocus, returningFocus, trackDrag, useFocusAfterDialog, usePressOutside, useStore } from "./editorPrimitives.js";
 import { useGraphEditorStrings, useInputsEditorStrings } from "./editorStrings.js";
 import { asRecord } from "./records.js";
 import { openOnAddOf, text } from "./editorFields.js";

package/dist/graph/JobSummary.d.ts

@@ -2,6 +2,8 @@ import type { ReactNode } from 'react';
 import type { WorkflowJob } from './types.js';
 /** What a job list does when its jobs and steps are clicked, at one graph level. */
 export interface JobHandlers {
+    /** The level's `subworkflows/<job>/step_<n>/` chain, empty at the run's own jobs. */
+    pathPrefix: string;
     isStepsOpen: (jobName: string) => boolean;
     onJobClick: (jobName: string) => void;
     onStepClick: (jobName: string, stepIndex: number) => void;

package/dist/graph/JobSummary.js

@@ -6,6 +6,8 @@ import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { jobLabel } from "./util.js";
 import { AddStepButton, EditableJobRow, EditableStepRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
+import { WarningMark } from "./RunWarningsList.js";
+import { rowKey, useWarningMarks } from "./runWarnings.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/graph/JobSummary.tsx
 function UsesIcon({ uses, subworkflow }) {
@@ -32,6 +34,8 @@ function UsesIcon({ uses, subworkflow }) {
 function Joblist(inputs) {
 	const { dag, jobActions } = useStrings();
 	const engine = useWorkflowEngine();
+	const marks = useWarningMarks();
+	const prefix = inputs.pathPrefix;
 	return inputs.jobNames.map((jobName) => {
 		if (inputs.jobs[jobName]?._matrixGroup) return null;
 		const job = inputs.jobs[jobName];
@@ -40,12 +44,17 @@ function Joblist(inputs) {
 		const toggle = /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"aria-expanded": inputs.isStepsOpen(jobName),
+			"data-run-row": rowKey(prefix, jobName),
 			onClick: () => inputs.onJobClick(jobName),
 			className: cx("flex items-center gap-x-1.5 w-full text-left", jobStatus === "skipped" || jobStatus === "skipped-failed" ? "cursor-default" : "cursor-pointer"),
-			children: [!inputs.preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: jobStatus }), /* @__PURE__ */ jsx("div", {
-				className: "font-medium",
-				children: label
-			})]
+			children: [
+				!inputs.preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: jobStatus }),
+				/* @__PURE__ */ jsx("div", {
+					className: "font-medium",
+					children: label
+				}),
+				/* @__PURE__ */ jsx(WarningMark, { warnings: marks.under(rowKey(prefix, jobName)) })
+			]
 		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: "py-1 select-none",
@@ -65,10 +74,15 @@ function Joblist(inputs) {
 						const canExpand = !!subJobs && Object.keys(subJobs).length > 0;
 						const stepButton = /* @__PURE__ */ jsxs("button", {
 							type: "button",
+							"data-run-row": rowKey(prefix, jobName, i),
 							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 }),
+								/* @__PURE__ */ jsx(WarningMark, { warnings: marks.under(rowKey(prefix, jobName, i)) })
+							]
 						});
 						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/MatrixGroup.js

@@ -2,14 +2,21 @@ import { useStrings, useWorkflowEngine } from "../components/Provider.js";
 import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { EditableJobRow } from "./editorRows.js";
 import { Reveal } from "./Reveal.js";
+import { WarningMark } from "./RunWarningsList.js";
+import { rowKey, useWarningMarks } from "./runWarnings.js";
 import { Joblist } from "./JobSummary.js";
 import { GraphNode } from "./GraphNode.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 //#region src/graph/MatrixGroup.tsx
+/** The warnings about any of a matrix's runs, for its group's row while it is closed. */
+function useMatrixWarnings(prefix, members) {
+	return useWarningMarks().underAny(members.map((member) => rowKey(prefix, member)));
+}
 /** Matrix group item in the summary sidebar. */
 function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, jobs, handlers, preview }) {
 	const { dag: t } = useStrings();
+	const warnings = useMatrixWarnings(handlers.pathPrefix, matrixGroup.members);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "py-1.5",
 		children: [/* @__PURE__ */ jsxs("button", {
@@ -17,17 +24,21 @@ function MatrixGroupSummaryItem({ matrixGroup, status, isExpanded, onToggle, job
 			"aria-expanded": isExpanded,
 			onClick: onToggle,
 			className: "cursor-pointer flex items-center gap-x-1.5 w-full text-left",
-			children: [/* @__PURE__ */ jsx(RunStatusIcon, { status }), /* @__PURE__ */ jsxs("div", {
-				className: "font-semibold",
-				children: [t.matrixOf(matrixGroup.originaljob), /* @__PURE__ */ jsxs("span", {
-					className: "font-normal text-sm ml-1",
-					children: [
-						"(",
-						t.jobCount(matrixGroup.members.length),
-						")"
-					]
-				})]
-			})]
+			children: [
+				/* @__PURE__ */ jsx(RunStatusIcon, { status }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "font-semibold",
+					children: [t.matrixOf(matrixGroup.originaljob), /* @__PURE__ */ jsxs("span", {
+						className: "font-normal text-sm ml-1",
+						children: [
+							"(",
+							t.jobCount(matrixGroup.members.length),
+							")"
+						]
+					})]
+				}),
+				!isExpanded && /* @__PURE__ */ jsx(WarningMark, { warnings })
+			]
 		}), /* @__PURE__ */ jsx(Reveal, {
 			open: isExpanded,
 			children: /* @__PURE__ */ jsx("div", {
@@ -49,6 +60,7 @@ var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idP
 	const first = jobNames[0] ?? "";
 	const matrixMembers = matrixGroup.members;
 	const { aggStatus, statusLabel } = useWorkflowEngine().matrixStatus(matrixMembers.map((m) => jobs[m]?.status));
+	const warnings = useMatrixWarnings(idPrefix, matrixMembers);
 	const header = /* @__PURE__ */ jsxs("button", {
 		type: "button",
 		"aria-expanded": isExpanded,
@@ -65,7 +77,11 @@ var MatrixGroupNode = memo(function MatrixGroupNode({ matrixGroup, jobNames, idP
 			})] }) : t.matrixOf(matrixName)
 		}), !isExpanded && /* @__PURE__ */ jsxs("div", {
 			className: "mt-1 border-t border-(--theme-border) pt-1 flex items-center gap-x-1",
-			children: [!preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: aggStatus }), /* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel })]
+			children: [
+				!preview && /* @__PURE__ */ jsx(RunStatusIcon, { status: aggStatus }),
+				/* @__PURE__ */ jsx("span", { children: preview ? t.jobCount(matrixMembers.length) : statusLabel }),
+				/* @__PURE__ */ jsx(WarningMark, { warnings })
+			]
 		})]
 	});
 	return /* @__PURE__ */ jsxs(GraphNode, {

package/dist/graph/RunWarningsList.d.ts

@@ -0,0 +1,19 @@
+import type { LocatedWarning, RunWarning, WarningTarget } from './runWarnings.js';
+import type { WorkflowJob } from './types.js';
+/** A warning's message, with the text it puts in backticks, such as a keyword, set as code. */
+export declare function WarningText({ message }: {
+    message: string;
+}): string | (string | import("react").JSX.Element)[];
+/** Flags a job or step that warnings are about, or that holds something they're about; hovering
+ *  it lists them. */
+export declare function WarningMark({ warnings, className, }: {
+    warnings: readonly RunWarning[];
+    className?: string | undefined;
+}): import("react").JSX.Element | null;
+/** The run's warnings, each with a link to the job or step it's about. */
+export declare function RunWarningsList({ warnings, rootJobs, onShow, }: {
+    warnings: readonly LocatedWarning[];
+    rootJobs: Record<string, WorkflowJob>;
+    /** Brings a warning's job or step into view; without it, where each one is reads as text. */
+    onShow?: ((target: WarningTarget) => void) | undefined;
+}): import("react").JSX.Element | null;