@parallelworks/ui 0.44.0 → 0.45.0

package/dist/form/utils/fieldPath.js

@@ -1,12 +1,27 @@
 //#region src/form/utils/fieldPath.ts
 /**
-* A field's path as the form store names it: `hosts[0].cpus` becomes `hosts.0.cpus`. A workflow writes
-* rows with brackets, but the store tells a field of a change by a path it starts, so a row's fields
-* hear a change to their list only when both name it with dots.
+* A field's path as the form store names it, from any way a path to it is written: a workflow's
+* `hosts[0].cpus`, the store's own `hosts.0.cpus`, or a JSON Pointer such as `#/hosts/0/cpus`, as a
+* problem response locates a field. A workflow writes rows with brackets, but the store tells a field
+* of a change by a path it starts, so a row's fields hear a change to their list only when both name
+* it with dots.
 */
 function fieldPath(path) {
+	if (path.startsWith("#") || path.startsWith("/")) return pointerPath(path);
 	return path.replace(/\[(\d+)\]/g, ".$1");
 }
+/** A JSON Pointer's path in the store, decoding a URI fragment's escapes and then the pointer's own. */
+function pointerPath(pointer) {
+	const fragment = pointer.startsWith("#");
+	return (fragment ? pointer.slice(1) : pointer).split("/").slice(1).map((segment) => (fragment ? safeDecode(segment) : segment).replaceAll("~1", "/").replaceAll("~0", "~")).join(".");
+}
+function safeDecode(segment) {
+	try {
+		return decodeURIComponent(segment);
+	} catch {
+		return segment;
+	}
+}
 /** The index of the innermost row a path is in, or undefined outside every list. */
 function rowIndexOf(path) {
 	const index = fieldPath(path).split(".").findLast((segment) => /^\d+$/.test(segment));

package/dist/form/utils/secondaryField.d.ts

@@ -1,8 +1 @@
-type SecondaryOption = {
-    value?: unknown;
-    secondaryValue?: unknown;
-    options?: unknown[];
-};
-export declare function findSecondaryOption(options: unknown[], value: unknown): SecondaryOption | undefined;
 export declare function applySecondaryField(secondaryField: string | string[] | undefined, secondaryValue: unknown, setFieldValue: (field: string, value: unknown) => void): void;
-export {};

package/dist/form/utils/secondaryField.js

@@ -1,15 +1,4 @@
 //#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];
@@ -19,4 +8,4 @@ function applySecondaryField(secondaryField, secondaryValue, setFieldValue) {
 	});
 }
 //#endregion
-export { applySecondaryField, findSecondaryOption };
+export { applySecondaryField };

package/dist/form/validation.d.ts

@@ -0,0 +1,29 @@
+/** A field the server rejected. */
+export interface ServerError {
+    /** The field's path, written any way: a workflow's `hosts[0].cpus`, a problem response's JSON
+     *  Pointer `#/hosts/0/cpus`, or `hosts.0.cpus`. */
+    path: string;
+    /** Why, in the reader's language; without one the field says to check its value. */
+    message?: string | undefined;
+}
+/** The field a form renders and needs a value in, and what it says while it has none. Its input's
+ *  `useFieldValue` gives the form's store the rule, because the store keeps only the rules the
+ *  field's own controller registers. */
+export interface RequiredField {
+    name: string;
+    message: string;
+}
+export declare const RequiredFieldContext: import("react").Context<RequiredField | null>;
+/** Whether a field holds a value: an empty string or list, like none at all, does not. */
+export declare function filled(value: unknown): boolean;
+export interface FormChecks {
+    /** The server's errors the person hasn't yet answered, by store path. */
+    serverErrors: ReadonlySet<string>;
+    /** Changes each time the host reports a new set, so a wizard turns to the first once. */
+    serverErrorsKey: string;
+    /** Runs a check of the form, a `trigger` or `handleSubmit`. The server's errors never hold the
+     *  person back, since the server checks again, so they step aside while it runs and come back on
+     *  the fields where it found nothing. */
+    check: <T>(run: () => Promise<T>) => Promise<T>;
+}
+export declare const FormChecksContext: import("react").Context<FormChecks>;

package/dist/form/validation.js

@@ -0,0 +1,14 @@
+import { createContext } from "react";
+//#region src/form/validation.ts
+var RequiredFieldContext = createContext(null);
+/** Whether a field holds a value: an empty string or list, like none at all, does not. */
+function filled(value) {
+	return !(value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0);
+}
+var FormChecksContext = createContext({
+	serverErrors: /* @__PURE__ */ new Set(),
+	serverErrorsKey: "",
+	check: (run) => run()
+});
+//#endregion
+export { FormChecksContext, RequiredFieldContext, filled };

package/dist/format.d.ts

@@ -0,0 +1,28 @@
+import { DateTime, Duration } from 'luxon';
+/** A size in bytes the way a file list shows it: 512 B, 1.5 KB, 2.25 GB,
+ *  counting in 1024s. */
+export declare function formatBytes(bytes: number): string;
+/** A count short enough for a status line: 512, 1.2K, 3.4M. */
+export declare function formatCount(n: number): string;
+/** A length of time to whole seconds, in the host's locale: 45s, 2m 13s,
+ *  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped. */
+export declare function formatDuration(value: number | Duration): string;
+/** A moment as an ISO string, milliseconds, a Date or a luxon DateTime. */
+export type TimeValue = string | number | Date | DateTime | null | undefined;
+/** The moment `value` names, or null when it is missing or invalid. */
+export declare function toDateTime(value: TimeValue): DateTime | null;
+declare const DATE_TIME_STYLES: {
+    readonly date: Intl.DateTimeFormatOptions;
+    readonly short: Intl.DateTimeFormatOptions;
+    readonly medium: Intl.DateTimeFormatOptions;
+    readonly seconds: Intl.DateTimeFormatOptions;
+};
+/** A moment in the reader's locale: `date` reads "Mar 14, 2026", `short`
+ *  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", and `seconds` adds
+ *  the seconds. Empty for a missing or invalid time. */
+export declare function formatDateTime(value: TimeValue, style?: keyof typeof DATE_TIME_STYLES): string;
+/** Time left, rounded the way a countdown reads: whole seconds under a minute,
+ *  minutes and seconds under an hour, then hours and minutes. Null once only a
+ *  few seconds remain, for the caller's "almost done". */
+export declare function formatTimeLeft(seconds: number): string | null;
+export {};

package/dist/format.js

@@ -0,0 +1,64 @@
+import { DateTime, Duration } from "luxon";
+//#region src/format.ts
+var sizeNumber = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 });
+var BYTE_UNITS = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB",
+	"PB"
+];
+/** A size in bytes the way a file list shows it: 512 B, 1.5 KB, 2.25 GB,
+*  counting in 1024s. */
+function formatBytes(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 1) return `${sizeNumber.format(0)} B`;
+	const unit = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), BYTE_UNITS.length - 1);
+	return `${sizeNumber.format(bytes / 1024 ** unit)} ${BYTE_UNITS[unit]}`;
+}
+var countNumber = new Intl.NumberFormat(void 0, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+/** A count short enough for a status line: 512, 1.2K, 3.4M. */
+function formatCount(n) {
+	return countNumber.format(n);
+}
+var UNIT_DISPLAY = { ja: "short" };
+/** A length of time to whole seconds, in the host's locale: 45s, 2m 13s,
+*  1d 2h. Takes milliseconds or a luxon Duration; the sign is dropped. */
+function formatDuration(value) {
+	const duration = typeof value === "number" ? Duration.fromMillis(value) : value;
+	const parts = duration.shiftTo("days", "hours", "minutes", "seconds").toObject();
+	if (parts.seconds !== void 0) parts.seconds = Math.round(parts.seconds);
+	const shown = Object.fromEntries(Object.entries(parts).filter(([, n]) => n !== 0).map(([unit, n]) => [unit, Math.abs(n)]));
+	const human = Duration.fromObject(Object.keys(shown).length > 0 ? shown : { seconds: 0 }, duration.locale ? { locale: duration.locale } : {});
+	return human.toHuman({ unitDisplay: UNIT_DISPLAY[human.locale?.split("-")[0] ?? ""] ?? "narrow" }).replaceAll(/[,、]/g, "");
+}
+/** The moment `value` names, or null when it is missing or invalid. */
+function toDateTime(value) {
+	if (value === null || value === void 0 || value === "") return null;
+	const time = typeof value === "string" ? DateTime.fromISO(value) : typeof value === "number" ? DateTime.fromMillis(value) : value instanceof Date ? DateTime.fromJSDate(value) : value;
+	return time.isValid ? time : null;
+}
+var DATE_TIME_STYLES = {
+	date: DateTime.DATE_MED,
+	short: DateTime.DATETIME_SHORT,
+	medium: DateTime.DATETIME_MED,
+	seconds: DateTime.DATETIME_MED_WITH_SECONDS
+};
+/** A moment in the reader's locale: `date` reads "Mar 14, 2026", `short`
+*  "3/14/2026, 9:30 AM", `medium` "Mar 14, 2026, 9:30 AM", and `seconds` adds
+*  the seconds. Empty for a missing or invalid time. */
+function formatDateTime(value, style = "medium") {
+	return toDateTime(value)?.toLocaleString(DATE_TIME_STYLES[style]) ?? "";
+}
+/** Time left, rounded the way a countdown reads: whole seconds under a minute,
+*  minutes and seconds under an hour, then hours and minutes. Null once only a
+*  few seconds remain, for the caller's "almost done". */
+function formatTimeLeft(seconds) {
+	if (seconds < 5) return null;
+	return formatDuration((seconds < 3600 ? Math.round(seconds) : Math.ceil(seconds / 60) * 60) * 1e3);
+}
+//#endregion
+export { formatBytes, formatCount, formatDateTime, formatDuration, formatTimeLeft, toDateTime };

package/dist/graph/AnnotationBanner.js

@@ -1,10 +1,7 @@
-import { BiError } from "../icons/bi/BiError.js";
-import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
-import { FaInfoCircle } from "../icons/fa/FaInfoCircle.js";
-import { IoWarningOutline } from "../icons/io5/IoWarningOutline.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { cx } from "../cx.js";
+import { ChevronDownIcon, ChevronRightIcon, ErrorIcon, InfoIcon, WarningIcon } from "../icons.js";
 import { keyedByContent } from "../components/keys.js";
-import { clsx } from "clsx";
+import { useStrings } from "../components/Provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 //#region src/graph/AnnotationBanner.tsx
@@ -15,22 +12,19 @@ var typeOrder = {
 };
 var typeConfig = {
 	error: {
-		icon: BiError,
-		label: "Error",
+		icon: ErrorIcon,
 		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: IoWarningOutline,
-		label: "Warning",
+		icon: WarningIcon,
 		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: FaInfoCircle,
-		label: "Notice",
+		icon: InfoIcon,
 		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"
@@ -67,6 +61,7 @@ function collectAnnotations(executedJobs, parentPath) {
 }
 function AnnotationBanner({ executedJobs }) {
 	const [expanded, setExpanded] = useState(false);
+	const { dag: t } = useStrings();
 	const annotations = collectAnnotations(executedJobs);
 	if (annotations.length === 0) return null;
 	const counts = {
@@ -75,18 +70,18 @@ function AnnotationBanner({ executedJobs }) {
 		notice: 0
 	};
 	for (const a of annotations) counts[a.type]++;
-	const ChevronIcon = expanded ? FaChevronDown : LuChevronRight;
+	const ChevronIcon = expanded ? ChevronDownIcon : ChevronRightIcon;
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("rounded-lg border border-[var(--theme-border)] overflow-hidden", "bg-[var(--theme-panel-bg)]"),
+		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: clsx("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)]"),
+			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"
+					className: "text-sm font-medium text-[var(--theme-app)]",
+					children: t.annotations
 				}),
 				/* @__PURE__ */ jsx("div", {
 					className: "flex items-center gap-1.5",
@@ -99,7 +94,7 @@ function AnnotationBanner({ executedJobs }) {
 						const config = typeConfig[type];
 						const Icon = config.icon;
 						return /* @__PURE__ */ jsxs("span", {
-							className: clsx("inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium", config.countBg),
+							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);
 					})
@@ -111,28 +106,22 @@ function AnnotationBanner({ executedJobs }) {
 				const config = typeConfig[annotation.type] || typeConfig.notice;
 				const Icon = config.icon;
 				return /* @__PURE__ */ jsxs("div", {
-					className: clsx("flex items-start gap-2.5 px-4 py-2 text-sm", config.bgClass),
-					children: [/* @__PURE__ */ jsx(Icon, { className: clsx("w-4 h-4 mt-0.5 shrink-0", config.accentClass) }), /* @__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: clsx("font-medium", config.accentClass),
-								children: [annotation.title || config.label, ":"]
+								className: cx("font-medium", config.accentClass),
+								children: [annotation.title || t.annotationType[annotation.type] || t.annotationType.notice, ":"]
 							}),
 							" ",
 							/* @__PURE__ */ jsx("span", {
-								className: "text-[var(--theme-panel-color)]",
+								className: "text-[var(--theme-app)]",
 								children: annotation.message
 							}),
-							/* @__PURE__ */ jsxs("span", {
+							/* @__PURE__ */ jsx("span", {
 								className: "text-[var(--theme-muted-text-color)] ml-2 text-xs",
-								children: [
-									"in ",
-									annotation.jobName,
-									" →",
-									" ",
-									annotation.stepName || `step ${annotation.stepIndex}`
-								]
+								children: t.annotationSource(annotation.jobName, annotation.stepName || t.stepNumber(annotation.stepIndex))
 							})
 						]
 					})]

package/dist/graph/Connectors.js

@@ -4,7 +4,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo } from "react";
 //#region src/graph/Connectors.tsx
 var CONNECTOR_COLOR = "var(--theme-border)";
-var HIGHLIGHT_COLOR = "var(--theme-element)";
+var HIGHLIGHT_COLOR = "var(--theme-accent)";
 var PANEL_COLOR = "var(--theme-panel-bg)";
 var STROKE = 6;
 var KEYFRAMES = [

package/dist/graph/DependencyGraph.js

@@ -1,21 +1,18 @@
-import { FaArrowLeft } from "../icons/fa/FaArrowLeft.js";
-import { FaArrowRight } from "../icons/fa/FaArrowRight.js";
-import { IoDocumentTextOutline } from "../icons/io5/IoDocumentTextOutline.js";
-import { LuChevronLeft } from "../icons/lu/LuChevronLeft.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { LuZoomIn } from "../icons/lu/LuZoomIn.js";
-import { LuZoomOut } from "../icons/lu/LuZoomOut.js";
+import { cx } from "../cx.js";
+import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon, 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";
 import { Modal } from "../components/Modal.js";
+import { DisclosurePanel } from "../components/Disclosure.js";
 import { InfoTip } from "../components/InfoTip.js";
 import { IconButton } from "../components/IconButton.js";
-import { Indicator } from "../components/Indicator.js";
-import Loader from "../components/Loader.js";
+import { formatDateTime } from "../format.js";
+import { Elapsed } from "../components/relativeTime.js";
+import { RunStatusIcon } from "../components/RunStatusIcon.js";
 import { LogViewer } from "../logviewer/LogViewer.js";
-import { toAbsHumanDuration } from "../duration.js";
 import { initializeValues } from "../form/lib.js";
 import { AnnotationBanner } from "./AnnotationBanner.js";
-import { Collapse } from "./Collapse.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";
@@ -32,7 +29,6 @@ import { computeGraphLayout, displayJobsOf, hopDistances, positionsOf } from "./
 import { MatrixGroupNode, MatrixGroupSummaryItem } from "./MatrixGroup.js";
 import TreeView from "./TreeView.js";
 import { FIT_MAX_SCALE, MIN_SCALE, ZOOM_STEP, fitMargin, fitView, intoView, wheelFactor, zoomAround, zoomLimit } from "./viewport.js";
-import { clsx } from "clsx";
 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";
@@ -40,32 +36,33 @@ import { DateTime } from "luxon";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
 //#region src/graph/DependencyGraph.tsx
 function ViewToggle({ viewMode, setViewMode }) {
+	const { dag: t } = useStrings();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex border border-[var(--theme-border)] rounded overflow-hidden",
 		children: [/* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setViewMode("dag"),
-			className: clsx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
-			children: "DAG"
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "dag" ? "bg-[var(--theme-accent)] text-[var(--theme-accent-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: t.graphView
 		}), /* @__PURE__ */ jsx("button", {
 			type: "button",
 			onClick: () => setViewMode("tree"),
-			className: clsx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-element)] text-[var(--theme-element-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
-			children: "Tree"
+			className: cx("px-3 py-1.5 text-xs font-mono transition-colors", viewMode === "tree" ? "bg-[var(--theme-accent)] text-[var(--theme-accent-text)]" : "text-[var(--theme-muted-text-color)] hover:text-[var(--theme-app)] hover:bg-[var(--theme-hover)]"),
+			children: t.treeView
 		})]
 	});
 }
 var VIEW_BAR = "flex max-w-full flex-wrap items-center justify-end gap-0.5 rounded-md border theme-border bg-(--theme-panel-bg) p-0.5";
 /** The graph's view buttons, the same wherever a graph is drawn. */
 function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
-	const { dag } = useStrings();
+	const { common, dag } = useStrings();
 	const chip = "flex h-7 cursor-pointer items-center whitespace-nowrap rounded px-2 text-xs theme-hover";
 	return /* @__PURE__ */ jsxs("div", {
 		className: VIEW_BAR,
 		children: [
 			history && /* @__PURE__ */ jsxs(Fragment, { children: [
 				/* @__PURE__ */ jsx(IconButton, {
-					icon: /* @__PURE__ */ jsx(LuChevronLeft, { className: "h-4 w-4" }),
+					icon: /* @__PURE__ */ jsx(ChevronLeftIcon, {}),
 					label: dag.previousGraph,
 					size: "sm",
 					variant: "ghost",
@@ -73,7 +70,7 @@ function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
 					onClick: history.back
 				}),
 				/* @__PURE__ */ jsx(IconButton, {
-					icon: /* @__PURE__ */ jsx(LuChevronRight, { className: "h-4 w-4" }),
+					icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
 					label: dag.nextGraph,
 					size: "sm",
 					variant: "ghost",
@@ -96,16 +93,16 @@ function GraphViewControls({ history, expand, onReset, onZoom, zoomedAll }) {
 			}),
 			/* @__PURE__ */ jsx("div", { className: "mx-0.5 h-5 w-px bg-(--theme-border)" }),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(LuZoomOut, { className: "h-4 w-4" }),
-				label: dag.zoomOut,
+				icon: /* @__PURE__ */ jsx(ZoomOutIcon, {}),
+				label: common.zoomOut,
 				size: "sm",
 				variant: "ghost",
 				disabled: zoomedAll === "out",
 				onClick: () => onZoom(-1)
 			}),
 			/* @__PURE__ */ jsx(IconButton, {
-				icon: /* @__PURE__ */ jsx(LuZoomIn, { className: "h-4 w-4" }),
-				label: dag.zoomIn,
+				icon: /* @__PURE__ */ jsx(ZoomInIcon, {}),
+				label: common.zoomIn,
 				size: "sm",
 				variant: "ghost",
 				disabled: zoomedAll === "in",
@@ -570,7 +567,7 @@ function EditorEdges({ edges, cols, boxes, selected, zBase, size }) {
 			style: { zIndex: 1 + zBase },
 			children: edges.map(({ from, to, path }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [chosen.has(`${from}→${to}`) && /* @__PURE__ */ jsx("path", {
 				d: path.d,
-				stroke: "var(--theme-element)",
+				stroke: "var(--theme-accent)",
 				strokeWidth: "10",
 				fill: "transparent"
 			}), /* @__PURE__ */ jsx(EdgeHitPath, {
@@ -597,8 +594,8 @@ function SidebarJobs({ jobs, pathPrefix, preview, stepsOpen, toggleSteps, expand
 		toggleSubworkflow,
 		openInNewGraph,
 		setSublogOpen,
-		renderWell: (subJobs, subPrefix, expanded) => /* @__PURE__ */ jsx(Collapse, {
-			expanded,
+		renderWell: (subJobs, subPrefix, expanded) => /* @__PURE__ */ jsx(DisclosurePanel, {
+			open: expanded,
 			children: /* @__PURE__ */ jsx("div", {
 				className: "ml-6 mt-0.5 border-l border-(--theme-border) pl-4",
 				children: /* @__PURE__ */ jsx(SidebarJobs, {
@@ -668,16 +665,6 @@ function walkJobPath(root, path) {
 	}
 	return isJobRecord(cursor) ? cursor : {};
 }
-function RunTime({ start, end, finished }) {
-	const [now, setNow] = useState(() => DateTime.now());
-	const ticking = !end && !finished;
-	useEffect(() => {
-		if (!ticking) return;
-		const timer = setInterval(() => setNow(DateTime.now()), 1e3);
-		return () => clearInterval(timer);
-	}, [ticking]);
-	return toAbsHumanDuration(start, end ?? now);
-}
 function graphBounds(content) {
 	const nodes = outerNodes(content);
 	if (nodes.length === 0) return null;
@@ -780,7 +767,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 			cancelAnimationFrame(raf);
 		};
 	}, [preview, fixedHeight]);
-	const { dag: dagStrings } = useStrings();
+	const { common, dag: dagStrings } = useStrings();
 	const slots = useSlots();
 	const [executedJobsPath, setExecutedJobsPath] = useState([[]]);
 	const [executedJobsPathIdx, setExecutedJobsPathIdx] = useState(0);
@@ -1143,33 +1130,33 @@ 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__ */ jsxs("button", {
-			type: "button",
-			className: "btn btn-neutral",
-			onClick: () => nextStep(true),
-			children: [/* @__PURE__ */ jsx(FaArrowLeft, {}), /* @__PURE__ */ jsx("span", { children: "Prev" })]
+		/* @__PURE__ */ jsx(IconButton, {
+			variant: "outline",
+			icon: /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+			label: dagStrings.previousStep,
+			onClick: () => nextStep(true)
 		}),
-		/* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: "btn btn-neutral",
-			onClick: () => nextStep(false),
-			children: [/* @__PURE__ */ jsx(FaArrowRight, {}), /* @__PURE__ */ jsx("span", { children: "Next" })]
+		/* @__PURE__ */ jsx(IconButton, {
+			variant: "outline",
+			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", {
-		type: "button",
-		className: "btn btn-neutral",
+	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: /* @__PURE__ */ jsx("span", { children: sublogIsSubworkflow ? "Open Subworkflow" : sublogShowsLog ? "Show Script" : "Show Logs" })
+		children: sublogIsSubworkflow ? "Open Subworkflow" : sublogShowsLog ? "Show Script" : "Show Logs"
 	}) : void 0;
 	const graph = /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col lg:flex-row w-full",
@@ -1188,12 +1175,12 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "font-bold flex items-center gap-x-2",
-						children: ["Summary", /* @__PURE__ */ jsx("button", {
+						children: [dagStrings.summary, /* @__PURE__ */ jsx("button", {
 							type: "button",
-							"aria-label": "General log",
+							"aria-label": dagStrings.generalLog,
 							onClick: () => setSublogOpen(generalLogPath),
 							className: "link",
-							children: /* @__PURE__ */ jsx(IoDocumentTextOutline, { className: "w-4 h-4" })
+							children: /* @__PURE__ */ jsx(FileTextIcon, { className: "w-4 h-4" })
 						})]
 					}),
 					/* @__PURE__ */ jsx("div", {
@@ -1203,7 +1190,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 				]
 			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: clsx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
+				className: cx(preview ? "w-full" : "flex-1 min-w-0 mt-2", "h-full flex flex-col gap-y-2"),
 				children: [
 					!preview && /* @__PURE__ */ jsxs("div", {
 						className: "panel w-full border rounded-lg px-4 py-2 flex flex-wrap items-center gap-x-16 gap-y-2",
@@ -1238,7 +1225,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: /* @__PURE__ */ jsxs(InfoTip, {
 										className: "flex items-center gap-x-1",
 										text: dagStrings.statusReason(run.statusReason) ?? "",
-										children: [/* @__PURE__ */ jsx(Indicator, { status: runStatus }), dagStrings.statusLabel(runStatus)]
+										children: [/* @__PURE__ */ jsx(RunStatusIcon, { status: runStatus }), dagStrings.statusLabel(runStatus)]
 									})
 								})]
 							}),
@@ -1249,10 +1236,10 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: dagStrings.runtime
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: /* @__PURE__ */ jsx(RunTime, {
+									children: /* @__PURE__ */ jsx(Elapsed, {
 										start: startDt,
-										end: run.completedAt ? DateTime.fromISO(run.completedAt) : void 0,
-										finished: run.status === "completed" || run.status === "error" || run.status === "canceled"
+										end: run.completedAt,
+										running: !(run.status === "completed" || run.status === "error" || run.status === "canceled")
 									})
 								})]
 							}),
@@ -1263,7 +1250,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 									children: dagStrings.submitted
 								}), /* @__PURE__ */ jsx("div", {
 									className: "text-sm font-semibold flex items-center gap-x-1",
-									children: startDt.toLocaleString(DateTime.DATETIME_SHORT)
+									children: formatDateTime(startDt, "short")
 								})]
 							}),
 							/* @__PURE__ */ jsx("div", { className: "flex-1" }),
@@ -1291,7 +1278,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 					}) : /* @__PURE__ */ jsxs("div", {
 						ref: setContainerElement,
 						tabIndex: editor ? -1 : void 0,
-						className: clsx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
+						className: cx("panel w-full overflow-hidden relative", removeBorder ? "border-none" : "border", editor && "outline-none"),
 						style: {
 							height: fixedHeight ?? (containerHeight !== null ? `${containerHeight}px` : previewHeight !== null ? `${Math.min(previewHeight, windowSize.h * .62)}px` : "62vh"),
 							minHeight: previewHeight !== null && !fixedHeight ? 0 : 160
@@ -1325,7 +1312,7 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 										} : void 0
 									} : void 0,
 									expand: hasExpandable ? {
-										label: allExpanded ? dagStrings.collapseAll : dagStrings.expandAll,
+										label: allExpanded ? common.collapseAll : common.expandAll,
 										onClick: toggleExpandAll
 									} : void 0,
 									onReset: resetView,
@@ -1374,9 +1361,8 @@ function DependencyGraph({ run, preview = false, removeBorder, viewMode = "dag",
 				children: /* @__PURE__ */ jsx("div", {
 					className: "flex w-full",
 					children: sublogsLoading && (!sublogs || !runNumber) ? /* @__PURE__ */ jsx(Loader, {
-						text: dagStrings.loadingLogs,
-						size: 70,
-						textSize: 18
+						label: dagStrings.loadingLogs,
+						size: 70
 					}) : preview ? /* @__PURE__ */ jsxs("div", { children: [slots.yamlViewer?.({
 						value: currentSublog,
 						height: window.innerHeight / 1.4,