@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/PipelineBuilderPage.js

@@ -1,84 +1,87 @@
 import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import t from "../hooks/useParserOperations.js";
-import n from "../hooks/usePipelineOperations.js";
-import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
-import i from "../components/pipeline/PipelineStatusBadge.js";
-import { memo as a, useCallback as o, useEffect as s, useMemo as ee, useState as c } from "react";
-import { useParams as te } from "react-router";
-import { AccessDenied as ne } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as l } from "@burdenoff/fe-libs/shared/providers/shell";
-import { useI18n as u } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { GlassCard as d, IllustratedEmptyState as f, PagePurpose as re } from "@burdenoff/fe-libs/ui";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as t } from "../components/common/sectionStyles.js";
+import { Section as n, SectionStack as r } from "../components/common/Section.js";
+import "../components/common/index.js";
+import i from "../hooks/useParserOperations.js";
+import ee from "../hooks/usePipelineOperations.js";
+import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
+import te from "../components/pipeline/PipelineStatusBadge.js";
+import { memo as o, useCallback as s, useEffect as ne, useId as re, useMemo as c, useState as l } from "react";
+import { useParams as ie } from "react-router";
+import { AccessDenied as ae } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as oe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useI18n as se } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as u, IllustratedEmptyState as ce, PagePurpose as le, Spinner as ue } from "@burdenoff/fe-libs/ui";
+import { Fragment as de, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelineBuilderPage.tsx
-var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
+var p = "min-h-[var(--size-controlHeight-md)]", m = "mb-1 block text-sm font-medium text-text-primary", h = "mt-1 text-xs text-text-secondary", g = "mb-1 text-xs font-semibold uppercase tracking-wide text-text-muted", _ = `w-full min-w-0 rounded-input border border-[var(--color-border-subtle)] bg-bg-canvas px-3 py-2 text-sm text-text-primary ${t}`, v = `${_} font-mono`, y = `inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-button text-text-secondary motion-safe:transition-colors disabled:opacity-30 ${t}`, b = `${y} hover:bg-bg-surface hover:text-text-primary`, fe = `${y} hover:bg-[var(--color-status-error-bgSubtle)] hover:text-status-error-text`, pe = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 	})
-}), g = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), x = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 4v16m8-8H4"
 	})
-}), ie = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), me = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
 	})
-}), ae = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), he = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M5 15l7-7 7 7"
 	})
-}), oe = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), ge = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), _ = ({ className: e }) => /* @__PURE__ */ p("svg", {
+}), S = ({ className: e }) => /* @__PURE__ */ d("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ p("path", {
+	children: /* @__PURE__ */ d("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})
-}), se = [
+}), _e = [
 	{
 		value: "draft",
 		label: "Draft"
@@ -91,7 +94,7 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 		value: "inactive",
 		label: "Inactive"
 	}
-], ce = [
+], C = [
 	{
 		value: "fail",
 		label: "Fail",
@@ -107,7 +110,7 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 		label: "Fallback",
 		description: "Use fallback value on error"
 	}
-], v = {
+], ve = {
 	parserId: "",
 	parserName: "",
 	parserType: null,
@@ -117,14 +120,14 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 	onError: "fail",
 	fallbackValue: "",
 	description: ""
-}, y = a(function() {
-	let { t: a } = u(), { pipelineId: y } = te(), b = e(), x = !!y && y !== "new", S = "default", { hasPermission: C, isLoading: w } = l(), T = C(r.PIPELINE_READ), E = C(r.PIPELINE_CREATE), D = C(r.PIPELINE_UPDATE), O = x ? D : E, [k, A] = c(""), [j, M] = c(""), [N, P] = c("draft"), [F, I] = c([]), [L, R] = c(1), [z, B] = c(!1), [V, H] = c(null), { loading: U, error: W, fetchPipeline: G, createPipeline: K, updatePipeline: q } = n({
-		consoleId: S,
+}, w = o(function() {
+	let { t: o } = se(), { pipelineId: y } = ie(), w = e(), T = !!y && y !== "new", E = "default", D = re(), { hasPermission: O, isLoading: ye } = oe(), be = O(a.PIPELINE_READ), xe = O(a.PIPELINE_CREATE), Se = O(a.PIPELINE_UPDATE), k = T ? Se : xe, [A, j] = l(""), [M, N] = l(""), [P, F] = l("draft"), [I, L] = l([]), [R, Ce] = l(1), [z, B] = l(!1), [V, H] = l(null), { loading: we, error: U, fetchPipeline: W, createPipeline: G, updatePipeline: K } = ee({
+		consoleId: E,
 		skipFetch: !0
-	}), { parsers: J } = t({ consoleId: S });
-	s(() => {
-		x && y && G(y).then((e) => {
-			e && (A(e.name), M(e.description || ""), P(e.status), R(e.version), I((e.stages || []).map((e) => ({
+	}), { parsers: q } = i({ consoleId: E });
+	ne(() => {
+		T && y && W(y).then((e) => {
+			e && (j(e.name), N(e.description || ""), F(e.status), Ce(e.version), L((e.stages || []).map((e) => ({
 				id: e.id,
 				parserId: e.parserId,
 				parserName: e.parserName || "",
@@ -138,47 +141,47 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 			}))));
 		});
 	}, [
-		x,
+		T,
 		y,
-		G
+		W
 	]);
-	let le = {
-		draft: a("bigconsole.pipelines.builder.status.draft", "Draft"),
-		active: a("bigconsole.pipelines.builder.status.active", "Active"),
-		inactive: a("bigconsole.pipelines.builder.status.inactive", "Inactive"),
-		error: a("bigconsole.pipelines.builder.status.error", "Error")
-	}, ue = {
-		fail: a("bigconsole.pipelines.builder.onError.fail", "Fail"),
-		skip: a("bigconsole.pipelines.builder.onError.skip", "Skip"),
-		fallback: a("bigconsole.pipelines.builder.onError.fallback", "Fallback")
-	}, Y = ee(() => !k.trim() || F.length === 0 ? !1 : F.every((e) => e.parserId && e.inputKey && e.outputKey), [k, F]), X = o(() => {
-		b("/pipelines");
-	}, [b]), Z = o(() => {
-		I((e) => [...e, { ...v }]);
-	}, []), de = o((e) => {
-		I((t) => t.filter((t, n) => n !== e));
-	}, []), Q = o((e, t) => {
-		I((n) => {
+	let Te = {
+		draft: o("bigconsole.pipelines.builder.status.draft", "Draft"),
+		active: o("bigconsole.pipelines.builder.status.active", "Active"),
+		inactive: o("bigconsole.pipelines.builder.status.inactive", "Inactive"),
+		error: o("bigconsole.pipelines.builder.status.error", "Error")
+	}, Ee = {
+		fail: o("bigconsole.pipelines.builder.onError.fail", "Fail"),
+		skip: o("bigconsole.pipelines.builder.onError.skip", "Skip"),
+		fallback: o("bigconsole.pipelines.builder.onError.fallback", "Fallback")
+	}, J = c(() => !A.trim() || I.length === 0 ? !1 : I.every((e) => e.parserId && e.inputKey && e.outputKey), [A, I]), Y = c(() => A.trim() ? I.length === 0 ? "Add at least one stage to save this pipeline." : I.every((e) => e.parserId && e.inputKey && e.outputKey) ? null : "Every stage needs a parser, an input key and an output key." : "Give the pipeline a name to save it.", [A, I]), X = s(() => {
+		w("/pipelines");
+	}, [w]), Z = s(() => {
+		L((e) => [...e, { ...ve }]);
+	}, []), De = s((e) => {
+		L((t) => t.filter((t, n) => n !== e));
+	}, []), Q = s((e, t) => {
+		L((n) => {
 			let r = [...n], i = t === "up" ? e - 1 : e + 1;
 			return i < 0 || i >= r.length ? n : ([r[e], r[i]] = [r[i], r[e]], r);
 		});
-	}, []), $ = o((e, t) => {
-		I((n) => n.map((n, r) => r === e ? {
+	}, []), $ = s((e, t) => {
+		L((n) => n.map((n, r) => r === e ? {
 			...n,
 			...t
 		} : n));
-	}, []), fe = o((e, t) => {
-		let n = J.find((e) => e.id === t);
+	}, []), Oe = s((e, t) => {
+		let n = q.find((e) => e.id === t);
 		n && $(e, {
 			parserId: n.id,
 			parserName: n.name,
 			parserType: n.type
 		});
-	}, [J, $]), pe = o(async () => {
-		if (!(!Y || !O)) {
+	}, [q, $]), ke = s(async () => {
+		if (!(!J || !k)) {
 			B(!0), H(null);
 			try {
-				let e = F.map((e) => ({
+				let e = I.map((e) => ({
 					parserId: e.parserId,
 					parserName: e.parserName,
 					parserType: e.parserType || void 0,
@@ -189,438 +192,528 @@ var h = ({ className: e }) => /* @__PURE__ */ p("svg", {
 					fallbackValue: e.fallbackValue ? JSON.parse(e.fallbackValue) : void 0,
 					description: e.description || void 0
 				}));
-				if (x && y) await q(y, {
-					name: k,
-					description: j || void 0,
-					status: N
-				}, L) && b(`/pipelines/${y}`);
+				if (T && y) await K(y, {
+					name: A,
+					description: M || void 0,
+					status: P
+				}, R) && w(`/pipelines/${y}`);
 				else {
-					let t = await K({
-						consoleId: S,
-						name: k,
-						description: j || void 0,
-						status: N,
+					let t = await G({
+						consoleId: E,
+						name: A,
+						description: M || void 0,
+						status: P,
 						stages: e
 					});
-					t && b(`/pipelines/${t.id}`);
+					t && w(`/pipelines/${t.id}`);
 				}
 			} catch (e) {
-				H(e instanceof Error ? e.message : a("bigconsole.pipelines.builder.errors.saveFailed", "Failed to save pipeline"));
+				H(e instanceof Error ? e.message : o("bigconsole.pipelines.builder.errors.saveFailed", "Failed to save pipeline"));
 			} finally {
 				B(!1);
 			}
 		}
 	}, [
-		Y,
-		S,
-		O,
-		x,
-		y,
+		J,
+		E,
 		k,
-		j,
-		N,
-		F,
-		L,
+		T,
+		y,
+		A,
+		M,
+		P,
+		I,
+		R,
+		G,
 		K,
-		q,
-		b,
-		a
+		w,
+		o
 	]);
-	return U && x ? /* @__PURE__ */ p("div", {
-		className: "p-6",
-		children: /* @__PURE__ */ m("div", {
+	return we && T ? /* @__PURE__ */ d("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ f("div", {
 			className: "flex flex-col items-center justify-center py-16",
-			children: [/* @__PURE__ */ m("svg", {
-				className: "w-8 h-8 text-action-primary-bg animate-spin mb-4",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				children: [/* @__PURE__ */ p("circle", {
-					className: "opacity-25",
-					cx: "12",
-					cy: "12",
-					r: "10",
-					stroke: "currentColor",
-					strokeWidth: "4"
-				}), /* @__PURE__ */ p("path", {
-					className: "opacity-75",
-					fill: "currentColor",
-					d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-				})]
-			}), /* @__PURE__ */ p("p", {
-				className: "text-sm text-text-secondary",
-				children: a("bigconsole.pipelines.builder.loading", "Loading Pipeline...")
+			role: "status",
+			children: [/* @__PURE__ */ d(ue, { style: {
+				height: "var(--size-icon-xl)",
+				width: "var(--size-icon-xl)"
+			} }), /* @__PURE__ */ d("p", {
+				className: "mt-form-gap text-sm text-text-secondary",
+				children: o("bigconsole.pipelines.builder.loading", "Loading Pipeline...")
 			})]
 		})
-	}) : x && !w && !T ? /* @__PURE__ */ p(ne, {
-		title: a("bigconsole.pipelines.builder.accessDenied.title", "Access Denied"),
-		description: a("bigconsole.pipelines.builder.accessDenied.description", "You don't have permission to view this pipeline.")
-	}) : W ? /* @__PURE__ */ p("div", {
-		className: "p-6",
-		children: /* @__PURE__ */ m("div", {
-			className: "flex flex-col items-center justify-center py-16 text-center",
-			children: [
-				/* @__PURE__ */ p("div", {
-					className: "p-3 rounded-full bg-status-error-bg/10 mb-4",
-					children: /* @__PURE__ */ p(_, { className: "w-8 h-8 text-status-error-text" })
-				}),
-				/* @__PURE__ */ p("h3", {
-					className: "text-lg font-medium text-text-primary mb-2",
-					children: a("bigconsole.pipelines.builder.errors.loadFailed", "Failed to load Pipeline")
-				}),
-				/* @__PURE__ */ p("p", {
-					className: "text-sm text-text-secondary mb-4",
-					children: W.message
-				}),
-				/* @__PURE__ */ p("button", {
-					type: "button",
-					onClick: X,
-					className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
-					children: a("bigconsole.pipelines.builder.actions.backToPipelines", "Back to Pipelines")
-				})
-			]
+	}) : T && !ye && !be ? /* @__PURE__ */ d(ae, {
+		title: o("bigconsole.pipelines.builder.accessDenied.title", "Access Denied"),
+		description: o("bigconsole.pipelines.builder.accessDenied.description", "You don't have permission to view this pipeline.")
+	}) : U ? /* @__PURE__ */ d("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ d(n, {
+			tone: "danger",
+			headingLevel: 2,
+			title: o("bigconsole.pipelines.builder.errors.loadFailed", "Failed to load Pipeline"),
+			description: U.message,
+			icon: /* @__PURE__ */ d(S, { className: "h-icon-sm w-icon-sm" }),
+			actions: /* @__PURE__ */ d(u, {
+				onClick: X,
+				className: p,
+				children: o("bigconsole.pipelines.builder.actions.backToPipelines", "Back to Pipelines")
+			}),
+			"data-testid": "pipeline-builder-error",
+			children: /* @__PURE__ */ d("p", {
+				className: "text-sm text-text-secondary",
+				children: "The pipeline could not be read from the console service. Nothing was changed."
+			})
 		})
-	}) : /* @__PURE__ */ m("div", {
-		className: "p-6",
-		children: [
-			/* @__PURE__ */ m("div", {
-				className: "flex items-center justify-between mb-6",
-				children: [/* @__PURE__ */ m("div", {
-					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ p("button", {
-						type: "button",
+	}) : /* @__PURE__ */ d("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ f(r, { children: [
+			/* @__PURE__ */ f("header", {
+				className: "flex flex-col gap-form-gap sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ f("div", {
+					className: "flex min-w-0 flex-col gap-control-gap",
+					children: [/* @__PURE__ */ f(u, {
+						variant: "ghost",
+						size: "sm",
 						onClick: X,
-						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
-						children: /* @__PURE__ */ p(h, { className: "w-5 h-5" })
-					}), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("h1", {
-						className: "text-2xl font-bold text-text-primary",
-						children: x ? a("bigconsole.pipelines.builder.header.editTitle", "Edit Pipeline") : a("bigconsole.pipelines.builder.header.createTitle", "Create Pipeline")
-					}), /* @__PURE__ */ p("p", {
-						className: "text-sm text-text-secondary mt-1",
-						children: x ? a("bigconsole.pipelines.builder.header.editSubtitle", "Update pipeline settings and stages") : a("bigconsole.pipelines.builder.header.createSubtitle", "Create a new data transformation pipeline")
-					})] })]
-				}), /* @__PURE__ */ m("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ p("button", {
-						type: "button",
-						onClick: X,
-						className: "px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors",
-						children: a("bigconsole.pipelines.builder.actions.cancel", "Cancel")
-					}), /* @__PURE__ */ p("button", {
-						type: "button",
-						onClick: pe,
-						disabled: !Y || z || !O,
-						title: O ? void 0 : x ? a("bigconsole.pipelines.builder.actions.noUpdatePermission", "You don't have permission to update pipelines.") : a("bigconsole.pipelines.builder.actions.noCreatePermission", "You don't have permission to create pipelines."),
-						className: "px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-						children: z ? a("bigconsole.pipelines.builder.actions.saving", "Saving...") : x ? a("bigconsole.pipelines.builder.actions.saveChanges", "Save Changes") : a("bigconsole.pipelines.builder.actions.createPipeline", "Create Pipeline")
+						className: "w-fit",
+						children: [/* @__PURE__ */ d(pe, { className: "h-icon-sm w-icon-sm" }), o("bigconsole.pipelines.builder.actions.backToPipelines", "Back to Pipelines")]
+					}), /* @__PURE__ */ f("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ d("h1", {
+							className: "text-2xl font-bold leading-tight text-text-primary",
+							children: T ? o("bigconsole.pipelines.builder.header.editTitle", "Edit Pipeline") : o("bigconsole.pipelines.builder.header.createTitle", "Create Pipeline")
+						}), /* @__PURE__ */ d("p", {
+							className: "mt-1 text-sm text-text-secondary",
+							children: T ? o("bigconsole.pipelines.builder.header.editSubtitle", "Update pipeline settings and stages") : o("bigconsole.pipelines.builder.header.createSubtitle", "Create a new data transformation pipeline")
+						})]
+					})]
+				}), /* @__PURE__ */ f("div", {
+					className: "flex flex-col gap-1 sm:items-end",
+					children: [/* @__PURE__ */ f("div", {
+						className: "flex flex-wrap items-center gap-control-gap",
+						children: [/* @__PURE__ */ d(u, {
+							variant: "secondary",
+							onClick: X,
+							className: p,
+							children: o("bigconsole.pipelines.builder.actions.cancel", "Cancel")
+						}), /* @__PURE__ */ d(u, {
+							onClick: ke,
+							disabled: !J || z || !k,
+							title: k ? void 0 : T ? o("bigconsole.pipelines.builder.actions.noUpdatePermission", "You don't have permission to update pipelines.") : o("bigconsole.pipelines.builder.actions.noCreatePermission", "You don't have permission to create pipelines."),
+							className: p,
+							children: z ? o("bigconsole.pipelines.builder.actions.saving", "Saving...") : T ? o("bigconsole.pipelines.builder.actions.saveChanges", "Save Changes") : o("bigconsole.pipelines.builder.actions.createPipeline", "Create Pipeline")
+						})]
+					}), Y && /* @__PURE__ */ d("p", {
+						className: "text-xs text-text-secondary sm:text-right",
+						"data-testid": "pipeline-save-blocked-reason",
+						children: Y
 					})]
 				})]
 			}),
-			/* @__PURE__ */ p(re, {
-				className: "mb-6",
-				children: a("bigconsole.pipelines.builder.header.purpose", "Build a pipeline by chaining parser stages — each stage reads an input key, runs a parser, and writes a structured output key that the next stage (or a data sink) can use. Name it, add your stages in order, then test it before saving so your data flows end to end.")
+			/* @__PURE__ */ d(le, {
+				className: "max-w-[75ch]",
+				children: o("bigconsole.pipelines.builder.header.purpose", "Build a pipeline by chaining parser stages — each stage reads an input key, runs a parser, and writes a structured output key that the next stage (or a data sink) can use. Name it, add your stages in order, then test it before saving so your data flows end to end.")
 			}),
-			V && /* @__PURE__ */ p("div", {
-				className: "mb-6 p-4 bg-status-error-bg/10 border border-status-error-border/20 rounded-md",
-				children: /* @__PURE__ */ p("p", {
-					className: "text-sm text-status-error-text",
-					children: V
-				})
+			V && /* @__PURE__ */ d(n, {
+				tone: "danger",
+				headingLevel: 2,
+				title: o("bigconsole.pipelines.builder.errors.saveFailed", "Failed to save pipeline"),
+				description: V,
+				icon: /* @__PURE__ */ d(S, { className: "h-icon-sm w-icon-sm" }),
+				"data-testid": "pipeline-save-error"
 			}),
-			/* @__PURE__ */ m("div", {
-				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ m("div", {
-					className: "lg:col-span-2 space-y-6",
-					children: [/* @__PURE__ */ m("div", {
-						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h2", {
-							className: "text-lg font-semibold text-text-primary mb-4",
-							children: a("bigconsole.pipelines.builder.basicInfo.heading", "Basic Information")
-						}), /* @__PURE__ */ m("div", {
-							className: "space-y-4",
+			/* @__PURE__ */ f("div", {
+				className: "grid grid-cols-1 gap-section-gap lg:grid-cols-3",
+				children: [/* @__PURE__ */ d("div", {
+					className: "min-w-0 lg:col-span-2",
+					children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(n, {
+						headingLevel: 2,
+						title: o("bigconsole.pipelines.builder.basicInfo.heading", "Basic Information"),
+						description: "How this pipeline is identified, and whether it runs.",
+						"data-testid": "pipeline-basic-info",
+						children: /* @__PURE__ */ f("div", {
+							className: "flex flex-col gap-form-gap",
 							children: [
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
-									className: "block text-sm font-medium text-text-primary mb-2",
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ f("label", {
+										htmlFor: `${D}-name`,
+										className: m,
+										children: [
+											o("bigconsole.pipelines.builder.basicInfo.nameLabel", "Name"),
+											" ",
+											/* @__PURE__ */ d("span", {
+												className: "text-status-error-text",
+												children: "*"
+											})
+										]
+									}), /* @__PURE__ */ d("input", {
+										id: `${D}-name`,
+										type: "text",
+										value: A,
+										onChange: (e) => j(e.target.value),
+										placeholder: o("bigconsole.pipelines.builder.basicInfo.namePlaceholder", "My Pipeline"),
+										className: _
+									})]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("label", {
+										htmlFor: `${D}-description`,
+										className: m,
+										children: o("bigconsole.pipelines.builder.basicInfo.descriptionLabel", "Description")
+									}), /* @__PURE__ */ d("textarea", {
+										id: `${D}-description`,
+										value: M,
+										onChange: (e) => N(e.target.value),
+										placeholder: o("bigconsole.pipelines.builder.basicInfo.descriptionPlaceholder", "What does this pipeline do?"),
+										rows: 3,
+										className: `${_} resize-y`
+									})]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0 border-t border-[var(--color-border-subtle)] pt-form-gap",
 									children: [
-										a("bigconsole.pipelines.builder.basicInfo.nameLabel", "Name"),
-										" ",
-										/* @__PURE__ */ p("span", {
-											className: "text-status-error-text",
-											children: "*"
+										/* @__PURE__ */ d("label", {
+											htmlFor: `${D}-status`,
+											className: m,
+											children: o("bigconsole.pipelines.builder.basicInfo.statusLabel", "Status")
+										}),
+										/* @__PURE__ */ d("select", {
+											id: `${D}-status`,
+											value: P,
+											onChange: (e) => F(e.target.value),
+											className: _,
+											children: _e.map((e) => /* @__PURE__ */ d("option", {
+												value: e.value,
+												children: Te[e.value]
+											}, e.value))
+										}),
+										/* @__PURE__ */ d("p", {
+											className: h,
+											children: "Only active pipelines process incoming data."
 										})
 									]
-								}), /* @__PURE__ */ p("input", {
-									type: "text",
-									value: k,
-									onChange: (e) => A(e.target.value),
-									placeholder: a("bigconsole.pipelines.builder.basicInfo.namePlaceholder", "My Pipeline"),
-									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
-								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-									className: "block text-sm font-medium text-text-primary mb-2",
-									children: a("bigconsole.pipelines.builder.basicInfo.descriptionLabel", "Description")
-								}), /* @__PURE__ */ p("textarea", {
-									value: j,
-									onChange: (e) => M(e.target.value),
-									placeholder: a("bigconsole.pipelines.builder.basicInfo.descriptionPlaceholder", "What does this pipeline do?"),
-									rows: 3,
-									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none"
-								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-									className: "block text-sm font-medium text-text-primary mb-2",
-									children: a("bigconsole.pipelines.builder.basicInfo.statusLabel", "Status")
-								}), /* @__PURE__ */ p("select", {
-									value: N,
-									onChange: (e) => P(e.target.value),
-									className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-									children: se.map((e) => /* @__PURE__ */ p("option", {
-										value: e.value,
-										children: le[e.value]
-									}, e.value))
-								})] })
+								})
 							]
-						})]
-					}), /* @__PURE__ */ m(d, {
-						treatment: "glass",
-						glow: !0,
-						className: "p-6",
-						children: [/* @__PURE__ */ m("div", {
-							className: "flex items-center justify-between mb-4",
-							children: [/* @__PURE__ */ p("h2", {
-								className: "text-lg font-semibold text-text-primary",
-								children: a("bigconsole.pipelines.builder.stages.heading", "Stages ({{count}})", { count: F.length })
-							}), /* @__PURE__ */ m("button", {
-								type: "button",
-								onClick: Z,
-								className: "inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
-								children: [/* @__PURE__ */ p(g, { className: "w-4 h-4" }), a("bigconsole.pipelines.builder.stages.addStage", "Add Stage")]
-							})]
-						}), F.length === 0 ? /* @__PURE__ */ p(f, {
+						})
+					}), /* @__PURE__ */ d(n, {
+						emphasis: "primary",
+						headingLevel: 2,
+						title: o("bigconsole.pipelines.builder.stages.heading", "Stages ({{count}})", { count: I.length }),
+						description: "Each stage reads an input key, runs a parser, and writes an output key for the next stage.",
+						actions: /* @__PURE__ */ f(u, {
+							size: "sm",
+							onClick: Z,
+							className: p,
+							children: [/* @__PURE__ */ d(x, { className: "h-icon-sm w-icon-sm" }), o("bigconsole.pipelines.builder.stages.addStage", "Add Stage")]
+						}),
+						"data-testid": "pipeline-stages-editor",
+						children: I.length === 0 ? /* @__PURE__ */ d(ce, {
 							illustration: "empty-generic",
-							title: a("bigconsole.pipelines.builder.stages.emptyTitle", "No stages yet"),
-							description: a("bigconsole.pipelines.builder.stages.emptyDescription", "Add a stage to start building your pipeline."),
-							action: /* @__PURE__ */ m("button", {
-								type: "button",
+							title: o("bigconsole.pipelines.builder.stages.emptyTitle", "No stages yet"),
+							description: o("bigconsole.pipelines.builder.stages.emptyDescription", "Add a stage to start building your pipeline."),
+							action: /* @__PURE__ */ f(u, {
 								onClick: Z,
-								className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-action-primary-fg bg-action-primary-bg hover:bg-action-primary-bgHover rounded-md transition-colors",
-								children: [/* @__PURE__ */ p(g, { className: "w-4 h-4" }), a("bigconsole.pipelines.builder.stages.addFirstStage", "Add First Stage")]
+								className: p,
+								children: [/* @__PURE__ */ d(x, { className: "h-icon-sm w-icon-sm" }), o("bigconsole.pipelines.builder.stages.addFirstStage", "Add First Stage")]
 							})
-						}) : /* @__PURE__ */ p("div", {
-							className: "space-y-4",
-							children: F.map((e, t) => /* @__PURE__ */ m("div", {
-								className: "p-4 bg-bg-sunken border border-border-default rounded-lg",
-								children: [/* @__PURE__ */ m("div", {
-									className: "flex items-center justify-between mb-4",
-									children: [/* @__PURE__ */ m("div", {
-										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ p("span", {
-											className: "w-6 h-6 flex items-center justify-center text-xs font-medium bg-action-primary-bg/10 text-action-primary-bg rounded-full",
-											children: t + 1
-										}), /* @__PURE__ */ p("span", {
-											className: "font-medium text-text-primary",
-											children: e.parserName || a("bigconsole.pipelines.builder.stages.defaultStageName", "Stage {{number}}", { number: t + 1 })
+						}) : /* @__PURE__ */ d("ol", {
+							className: "flex flex-col gap-form-gap",
+							children: I.map((e, r) => /* @__PURE__ */ d("li", {
+								className: "min-w-0",
+								children: /* @__PURE__ */ d(n, {
+									emphasis: "muted",
+									padding: "compact",
+									headingLevel: 3,
+									title: /* @__PURE__ */ f("span", {
+										className: "flex min-w-0 items-center gap-icon-gap",
+										children: [/* @__PURE__ */ d("span", {
+											"aria-hidden": "true",
+											className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-pill bg-bg-surface text-xs font-semibold text-text-secondary",
+											children: r + 1
+										}), /* @__PURE__ */ d("span", {
+											className: "min-w-0 truncate",
+											children: e.parserName || o("bigconsole.pipelines.builder.stages.defaultStageName", "Stage {{number}}", { number: r + 1 })
 										})]
-									}), /* @__PURE__ */ m("div", {
-										className: "flex items-center gap-1",
+									}),
+									actions: /* @__PURE__ */ f(de, { children: [
+										/* @__PURE__ */ d("button", {
+											type: "button",
+											onClick: () => Q(r, "up"),
+											disabled: r === 0,
+											className: b,
+											"aria-label": `Move stage ${r + 1} up`,
+											children: /* @__PURE__ */ d(he, { className: "h-icon-sm w-icon-sm" })
+										}),
+										/* @__PURE__ */ d("button", {
+											type: "button",
+											onClick: () => Q(r, "down"),
+											disabled: r === I.length - 1,
+											className: b,
+											"aria-label": `Move stage ${r + 1} down`,
+											children: /* @__PURE__ */ d(ge, { className: "h-icon-sm w-icon-sm" })
+										}),
+										/* @__PURE__ */ d("button", {
+											type: "button",
+											onClick: () => De(r),
+											className: fe,
+											"aria-label": `Remove stage ${r + 1}`,
+											children: /* @__PURE__ */ d(me, { className: "h-icon-sm w-icon-sm" })
+										})
+									] }),
+									"data-testid": "pipeline-stage-editor",
+									children: /* @__PURE__ */ f("div", {
+										className: "flex flex-col gap-form-gap",
 										children: [
-											/* @__PURE__ */ p("button", {
-												type: "button",
-												onClick: () => Q(t, "up"),
-												disabled: t === 0,
-												className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30",
-												children: /* @__PURE__ */ p(ae, { className: "w-4 h-4" })
+											/* @__PURE__ */ f("div", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ f("label", {
+													htmlFor: `${D}-parser-${r}`,
+													className: m,
+													children: [
+														o("bigconsole.pipelines.builder.stages.parserLabel", "Parser"),
+														" ",
+														/* @__PURE__ */ d("span", {
+															className: "text-status-error-text",
+															children: "*"
+														})
+													]
+												}), /* @__PURE__ */ f("select", {
+													id: `${D}-parser-${r}`,
+													value: e.parserId,
+													onChange: (e) => Oe(r, e.target.value),
+													className: _,
+													children: [/* @__PURE__ */ d("option", {
+														value: "",
+														children: o("bigconsole.pipelines.builder.stages.parserPlaceholder", "Select a parser...")
+													}), q.map((e) => /* @__PURE__ */ f("option", {
+														value: e.id,
+														children: [
+															e.name,
+															" (",
+															e.type.toUpperCase(),
+															")"
+														]
+													}, e.id))]
+												})]
 											}),
-											/* @__PURE__ */ p("button", {
-												type: "button",
-												onClick: () => Q(t, "down"),
-												disabled: t === F.length - 1,
-												className: "p-1 text-text-secondary hover:text-text-primary hover:bg-bg-surface rounded disabled:opacity-30",
-												children: /* @__PURE__ */ p(oe, { className: "w-4 h-4" })
+											/* @__PURE__ */ f("fieldset", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ d("legend", {
+													className: g,
+													children: "Data contract"
+												}), /* @__PURE__ */ f("div", {
+													className: "grid grid-cols-1 gap-form-gap sm:grid-cols-2",
+													children: [/* @__PURE__ */ f("div", {
+														className: "min-w-0",
+														children: [/* @__PURE__ */ f("label", {
+															htmlFor: `${D}-input-${r}`,
+															className: m,
+															children: [
+																o("bigconsole.pipelines.builder.stages.inputKeyLabel", "Input Key"),
+																" ",
+																/* @__PURE__ */ d("span", {
+																	className: "text-status-error-text",
+																	children: "*"
+																})
+															]
+														}), /* @__PURE__ */ d("input", {
+															id: `${D}-input-${r}`,
+															type: "text",
+															value: e.inputKey,
+															onChange: (e) => $(r, { inputKey: e.target.value }),
+															placeholder: o("bigconsole.pipelines.builder.stages.inputKeyPlaceholder", "data"),
+															className: v
+														})]
+													}), /* @__PURE__ */ f("div", {
+														className: "min-w-0",
+														children: [/* @__PURE__ */ f("label", {
+															htmlFor: `${D}-output-${r}`,
+															className: m,
+															children: [
+																o("bigconsole.pipelines.builder.stages.outputKeyLabel", "Output Key"),
+																" ",
+																/* @__PURE__ */ d("span", {
+																	className: "text-status-error-text",
+																	children: "*"
+																})
+															]
+														}), /* @__PURE__ */ d("input", {
+															id: `${D}-output-${r}`,
+															type: "text",
+															value: e.outputKey,
+															onChange: (e) => $(r, { outputKey: e.target.value }),
+															placeholder: o("bigconsole.pipelines.builder.stages.outputKeyPlaceholder", "result"),
+															className: v
+														})]
+													})]
+												})]
 											}),
-											/* @__PURE__ */ p("button", {
-												type: "button",
-												onClick: () => de(t),
-												className: "p-1 text-text-secondary hover:text-status-error-text hover:bg-status-error-bg/10 rounded",
-												children: /* @__PURE__ */ p(ie, { className: "w-4 h-4" })
-											})
-										]
-									})]
-								}), /* @__PURE__ */ m("div", {
-									className: "grid grid-cols-2 gap-4",
-									children: [
-										/* @__PURE__ */ m("div", {
-											className: "col-span-2",
-											children: [/* @__PURE__ */ m("label", {
-												className: "block text-xs font-medium text-text-secondary mb-1",
-												children: [
-													a("bigconsole.pipelines.builder.stages.parserLabel", "Parser"),
-													" ",
-													/* @__PURE__ */ p("span", {
-														className: "text-status-error-text",
-														children: "*"
-													})
-												]
-											}), /* @__PURE__ */ m("select", {
-												value: e.parserId,
-												onChange: (e) => fe(t, e.target.value),
-												className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-												children: [/* @__PURE__ */ p("option", {
-													value: "",
-													children: a("bigconsole.pipelines.builder.stages.parserPlaceholder", "Select a parser...")
-												}), J.map((e) => /* @__PURE__ */ m("option", {
-													value: e.id,
+											/* @__PURE__ */ f("fieldset", {
+												className: "min-w-0",
+												children: [/* @__PURE__ */ d("legend", {
+													className: g,
+													children: "Failure policy"
+												}), /* @__PURE__ */ f("div", {
+													className: "grid grid-cols-1 gap-form-gap sm:grid-cols-2",
 													children: [
-														e.name,
-														" (",
-														e.type.toUpperCase(),
-														")"
+														/* @__PURE__ */ f("div", {
+															className: "min-w-0",
+															children: [
+																/* @__PURE__ */ d("label", {
+																	htmlFor: `${D}-onerror-${r}`,
+																	className: m,
+																	children: o("bigconsole.pipelines.builder.stages.onErrorLabel", "On Error")
+																}),
+																/* @__PURE__ */ d("select", {
+																	id: `${D}-onerror-${r}`,
+																	value: e.onError,
+																	onChange: (e) => $(r, { onError: e.target.value }),
+																	className: _,
+																	children: C.map((e) => /* @__PURE__ */ d("option", {
+																		value: e.value,
+																		children: Ee[e.value]
+																	}, e.value))
+																}),
+																/* @__PURE__ */ d("p", {
+																	className: h,
+																	children: C.find((t) => t.value === e.onError)?.description
+																})
+															]
+														}),
+														/* @__PURE__ */ d("div", {
+															className: "flex min-w-0 items-start",
+															children: /* @__PURE__ */ f("label", {
+																htmlFor: `${D}-enabled-${r}`,
+																className: `flex cursor-pointer items-center gap-2 ${p}`,
+																children: [/* @__PURE__ */ d("input", {
+																	id: `${D}-enabled-${r}`,
+																	type: "checkbox",
+																	checked: e.enabled,
+																	onChange: (e) => $(r, { enabled: e.target.checked }),
+																	className: `h-4 w-4 rounded border-[var(--color-border-subtle)] text-action-primary-bg ${t}`
+																}), /* @__PURE__ */ d("span", {
+																	className: "text-sm text-text-primary",
+																	children: o("bigconsole.pipelines.builder.stages.enabledLabel", "Enabled")
+																})]
+															})
+														}),
+														e.onError === "fallback" && /* @__PURE__ */ f("div", {
+															className: "min-w-0 sm:col-span-2",
+															children: [/* @__PURE__ */ d("label", {
+																htmlFor: `${D}-fallback-${r}`,
+																className: m,
+																children: o("bigconsole.pipelines.builder.stages.fallbackValueLabel", "Fallback Value (JSON)")
+															}), /* @__PURE__ */ d("input", {
+																id: `${D}-fallback-${r}`,
+																type: "text",
+																value: e.fallbackValue,
+																onChange: (e) => $(r, { fallbackValue: e.target.value }),
+																placeholder: "{\"default\": true}",
+																className: v
+															})]
+														})
 													]
-												}, e.id))]
-											})]
-										}),
-										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
-											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: [
-												a("bigconsole.pipelines.builder.stages.inputKeyLabel", "Input Key"),
-												" ",
-												/* @__PURE__ */ p("span", {
-													className: "text-status-error-text",
-													children: "*"
-												})
-											]
-										}), /* @__PURE__ */ p("input", {
-											type: "text",
-											value: e.inputKey,
-											onChange: (e) => $(t, { inputKey: e.target.value }),
-											placeholder: a("bigconsole.pipelines.builder.stages.inputKeyPlaceholder", "data"),
-											className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
-										})] }),
-										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ m("label", {
-											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: [
-												a("bigconsole.pipelines.builder.stages.outputKeyLabel", "Output Key"),
-												" ",
-												/* @__PURE__ */ p("span", {
-													className: "text-status-error-text",
-													children: "*"
-												})
-											]
-										}), /* @__PURE__ */ p("input", {
-											type: "text",
-											value: e.outputKey,
-											onChange: (e) => $(t, { outputKey: e.target.value }),
-											placeholder: a("bigconsole.pipelines.builder.stages.outputKeyPlaceholder", "result"),
-											className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
-										})] }),
-										/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
-											className: "block text-xs font-medium text-text-secondary mb-1",
-											children: a("bigconsole.pipelines.builder.stages.onErrorLabel", "On Error")
-										}), /* @__PURE__ */ p("select", {
-											value: e.onError,
-											onChange: (e) => $(t, { onError: e.target.value }),
-											className: "w-full px-3 py-2 text-sm text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
-											children: ce.map((e) => /* @__PURE__ */ p("option", {
-												value: e.value,
-												children: ue[e.value]
-											}, e.value))
-										})] }),
-										/* @__PURE__ */ p("div", {
-											className: "flex items-center",
-											children: /* @__PURE__ */ m("label", {
-												className: "flex items-center gap-2 cursor-pointer",
-												children: [/* @__PURE__ */ p("input", {
-													type: "checkbox",
-													checked: e.enabled,
-													onChange: (e) => $(t, { enabled: e.target.checked }),
-													className: "w-4 h-4 rounded border-border-default text-action-primary-bg focus:ring-action-primary-bg"
-												}), /* @__PURE__ */ p("span", {
-													className: "text-sm text-text-primary",
-													children: a("bigconsole.pipelines.builder.stages.enabledLabel", "Enabled")
 												})]
 											})
-										}),
-										e.onError === "fallback" && /* @__PURE__ */ m("div", {
-											className: "col-span-2",
-											children: [/* @__PURE__ */ p("label", {
-												className: "block text-xs font-medium text-text-secondary mb-1",
-												children: a("bigconsole.pipelines.builder.stages.fallbackValueLabel", "Fallback Value (JSON)")
-											}), /* @__PURE__ */ p("input", {
-												type: "text",
-												value: e.fallbackValue,
-												onChange: (e) => $(t, { fallbackValue: e.target.value }),
-												placeholder: "{\"default\": true}",
-												className: "w-full px-3 py-2 text-sm font-mono text-text-primary bg-bg-surface border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg"
-											})]
-										})
-									]
-								})]
-							}, t))
-						})]
-					})]
-				}), /* @__PURE__ */ m("div", {
-					className: "space-y-6",
-					children: [/* @__PURE__ */ m("div", {
-						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h2", {
-							className: "text-lg font-semibold text-text-primary mb-4",
-							children: a("bigconsole.pipelines.builder.preview.heading", "Preview")
-						}), /* @__PURE__ */ m("div", {
-							className: "space-y-3",
+										]
+									})
+								})
+							}, r))
+						})
+					})] })
+				}), /* @__PURE__ */ d("div", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ f(r, { children: [/* @__PURE__ */ d(n, {
+						emphasis: "muted",
+						headingLevel: 2,
+						title: o("bigconsole.pipelines.builder.preview.heading", "Preview"),
+						description: "What will be saved.",
+						"data-testid": "pipeline-preview",
+						children: /* @__PURE__ */ f("dl", {
+							className: "flex flex-col gap-3 text-sm",
 							children: [
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
-									className: "text-xs text-text-secondary",
-									children: a("bigconsole.pipelines.builder.preview.nameLabel", "Name")
-								}), /* @__PURE__ */ p("p", {
-									className: "text-sm text-text-primary",
-									children: k || a("bigconsole.pipelines.builder.preview.untitled", "Untitled")
-								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
-									className: "text-xs text-text-secondary",
-									children: a("bigconsole.pipelines.builder.preview.statusLabel", "Status")
-								}), /* @__PURE__ */ p("div", {
-									className: "mt-1",
-									children: /* @__PURE__ */ p(i, { status: N })
-								})] }),
-								/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
-									className: "text-xs text-text-secondary",
-									children: a("bigconsole.pipelines.builder.preview.stagesLabel", "Stages")
-								}), /* @__PURE__ */ p("p", {
-									className: "text-sm text-text-primary",
-									children: F.length
-								})] }),
-								F.length > 0 && /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("span", {
-									className: "text-xs text-text-secondary",
-									children: a("bigconsole.pipelines.builder.preview.dataFlowLabel", "Data Flow")
-								}), /* @__PURE__ */ m("div", {
-									className: "mt-1 text-xs font-mono text-text-secondary",
-									children: [F.map((e, t) => /* @__PURE__ */ m("span", { children: [e.inputKey, t < F.length - 1 && " → "] }, t)), F.length > 0 && ` → ${F[F.length - 1].outputKey}`]
-								})] })
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("dt", {
+										className: "text-xs text-text-muted",
+										children: o("bigconsole.pipelines.builder.preview.nameLabel", "Name")
+									}), /* @__PURE__ */ d("dd", {
+										className: "break-words text-text-primary",
+										children: A || o("bigconsole.pipelines.builder.preview.untitled", "Untitled")
+									})]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("dt", {
+										className: "text-xs text-text-muted",
+										children: o("bigconsole.pipelines.builder.preview.statusLabel", "Status")
+									}), /* @__PURE__ */ d("dd", {
+										className: "mt-1",
+										children: /* @__PURE__ */ d(te, {
+											status: P,
+											size: "sm"
+										})
+									})]
+								}),
+								/* @__PURE__ */ f("div", {
+									className: "min-w-0",
+									children: [/* @__PURE__ */ d("dt", {
+										className: "text-xs text-text-muted",
+										children: o("bigconsole.pipelines.builder.preview.stagesLabel", "Stages")
+									}), /* @__PURE__ */ d("dd", {
+										className: "text-text-primary",
+										children: I.length
+									})]
+								}),
+								I.length > 0 && /* @__PURE__ */ f("div", {
+									className: "min-w-0 border-t border-[var(--color-border-subtle)] pt-3",
+									children: [/* @__PURE__ */ d("dt", {
+										className: "text-xs text-text-muted",
+										children: o("bigconsole.pipelines.builder.preview.dataFlowLabel", "Data Flow")
+									}), /* @__PURE__ */ f("dd", {
+										className: "mt-1 flex flex-wrap items-center gap-1 text-xs",
+										children: [I.map((e, t) => /* @__PURE__ */ f("span", {
+											className: "flex items-center gap-1",
+											children: [/* @__PURE__ */ d("code", {
+												className: "rounded-button bg-bg-surface px-1.5 py-0.5 font-mono break-all text-text-primary",
+												children: e.inputKey
+											}), /* @__PURE__ */ d("span", {
+												"aria-hidden": "true",
+												className: "text-text-muted",
+												children: "→"
+											})]
+										}, t)), /* @__PURE__ */ d("code", {
+											className: "rounded-button bg-bg-surface px-1.5 py-0.5 font-mono break-all text-text-primary",
+											children: I[I.length - 1].outputKey
+										})]
+									})]
+								})
 							]
-						})]
-					}), /* @__PURE__ */ m("div", {
-						className: "bg-bg-sunken border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ p("h3", {
-							className: "text-sm font-semibold text-text-primary mb-2",
-							children: a("bigconsole.pipelines.builder.tips.heading", "Tips")
-						}), /* @__PURE__ */ m("ul", {
-							className: "text-xs text-text-secondary space-y-2",
+						})
+					}), /* @__PURE__ */ d(n, {
+						emphasis: "muted",
+						padding: "compact",
+						headingLevel: 2,
+						title: o("bigconsole.pipelines.builder.tips.heading", "Tips"),
+						"data-testid": "pipeline-builder-tips",
+						children: /* @__PURE__ */ f("ul", {
+							className: "list-disc space-y-1 pl-4 text-sm text-text-secondary",
 							children: [
-								/* @__PURE__ */ m("li", { children: [
-									"•",
-									" ",
-									a("bigconsole.pipelines.builder.tips.item1", "Each stage processes the output of the previous stage")
-								] }),
-								/* @__PURE__ */ m("li", { children: ["• ", a("bigconsole.pipelines.builder.tips.item2", "Use consistent input/output keys to chain data")] }),
-								/* @__PURE__ */ m("li", { children: ["• ", a("bigconsole.pipelines.builder.tips.item3", "Set error handling per stage for robustness")] }),
-								/* @__PURE__ */ m("li", { children: ["• ", a("bigconsole.pipelines.builder.tips.item4", "Disable stages to skip them during execution")] })
+								/* @__PURE__ */ d("li", { children: o("bigconsole.pipelines.builder.tips.item1", "Each stage processes the output of the previous stage") }),
+								/* @__PURE__ */ d("li", { children: o("bigconsole.pipelines.builder.tips.item2", "Use consistent input/output keys to chain data") }),
+								/* @__PURE__ */ d("li", { children: o("bigconsole.pipelines.builder.tips.item3", "Set error handling per stage for robustness") }),
+								/* @__PURE__ */ d("li", { children: o("bigconsole.pipelines.builder.tips.item4", "Disable stages to skip them during execution") })
 							]
-						})]
-					})]
+						})
+					})] })
 				})]
 			})
-		]
+		] })
 	});
 });
 //#endregion
-export { y as PipelineBuilderPage, y as default };
+export { w as PipelineBuilderPage, w as default };
 
 //# sourceMappingURL=PipelineBuilderPage.js.map