@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/PipelineViewPage.js

@@ -1,511 +1,546 @@
 import { usePipelineStore as e } from "../store/pipelineStore.js";
 import { useAppNavigate as t } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import n from "../hooks/usePipelineOperations.js";
-import { BIGCONSOLE_PERMISSIONS as r } from "../../constants/permissions.js";
-import { isNative as i, nativeNotify as a } from "../../utils/nativeBridge.js";
-import o from "../components/pipeline/PipelineStatusBadge.js";
-import ee from "../components/pipeline/PipelineDeleteDialog.js";
-import { memo as s, useCallback as c, useEffect as l, useState as u } from "react";
-import { useParams as te, useSearchParams as ne } from "react-router";
-import { AccessDenied as d } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as f } from "@burdenoff/fe-libs/shared/providers/shell";
-import { useI18n as p } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { GlassCard as m, IllustratedEmptyState as h, NextSteps as g, PagePurpose as re } from "@burdenoff/fe-libs/ui";
-import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+import { SECTION_FOCUS_RING as n } from "../components/common/sectionStyles.js";
+import { Section as r, SectionStack as i } from "../components/common/Section.js";
+import "../components/common/index.js";
+import ee from "../hooks/usePipelineOperations.js";
+import { BIGCONSOLE_PERMISSIONS as a } from "../../constants/permissions.js";
+import { isNative as o, nativeNotify as s } from "../../utils/nativeBridge.js";
+import c from "../components/pipeline/PipelineStatusBadge.js";
+import te from "../components/pipeline/PipelineDeleteDialog.js";
+import { memo as l, useCallback as u, useEffect as ne, useId as re, useState as d } from "react";
+import { useParams as ie, useSearchParams as ae } from "react-router";
+import { AccessDenied as f } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as p } from "@burdenoff/fe-libs/shared/providers/shell";
+import { useI18n as m } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Button as h, IllustratedEmptyState as oe, NextSteps as se, PagePurpose as ce, Spinner as le } from "@burdenoff/fe-libs/ui";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/bigconsole/pages/PipelineViewPage.tsx
-var b = ({ className: e }) => /* @__PURE__ */ v("svg", {
+var v = "min-h-[var(--size-controlHeight-md)]", ue = "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary", y = "rounded-button bg-bg-surface px-1.5 py-0.5 font-mono break-all text-text-primary", b = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M10 19l-7-7m0 0l7-7m-7 7h18"
 	})
-}), x = ({ className: e }) => /* @__PURE__ */ v("svg", {
+}), x = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
 	})
-}), S = ({ className: e }) => /* @__PURE__ */ v("svg", {
+}), S = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("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"
 	})
-}), C = ({ className: e }) => /* @__PURE__ */ y("svg", {
+}), C = ({ className: e }) => /* @__PURE__ */ _("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: [/* @__PURE__ */ v("path", {
+	children: [/* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-	}), /* @__PURE__ */ v("path", {
+	}), /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})]
-}), w = ({ className: e }) => /* @__PURE__ */ v("svg", {
+}), w = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})
-}), T = ({ className: e }) => /* @__PURE__ */ v("svg", {
+}), de = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M5 13l4 4L19 7"
 	})
-}), E = ({ className: e }) => /* @__PURE__ */ v("svg", {
+}), T = ({ className: e }) => /* @__PURE__ */ g("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ v("path", {
+	children: /* @__PURE__ */ g("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M14 5l7 7m0 0l-7 7m7-7H3"
 	})
-}), D = ({ handling: e }) => {
-	let { t } = p(), n = {
+}), E = ({ handling: e }) => {
+	let { t } = m(), n = {
 		fail: {
 			label: t("bigconsole.pipelines.view.errorHandlingFail", "Fail"),
-			className: "bg-status-error-bg/10 text-status-error-text"
+			className: "bg-[var(--color-status-error-bgSubtle)] text-status-error-text border-[var(--color-status-error-border)]"
 		},
 		skip: {
 			label: t("bigconsole.pipelines.view.errorHandlingSkip", "Skip"),
-			className: "bg-status-warning-bg/10 text-status-warning-text"
+			className: "bg-[var(--color-status-warning-bgSubtle)] text-[var(--color-status-warning-text)] border-[var(--color-status-warning-border)]"
 		},
 		fallback: {
 			label: t("bigconsole.pipelines.view.errorHandlingFallback", "Fallback"),
-			className: "bg-action-primary-bg/10 text-action-primary-bg"
+			className: "bg-[var(--color-status-info-bgSubtle)] text-[var(--color-status-info-text)] border-[var(--color-status-info-border)]"
 		}
 	}, r = n[e] || n.fail;
-	return /* @__PURE__ */ v("span", {
-		className: `px-1.5 py-0.5 text-xs font-medium rounded ${r.className}`,
-		children: r.label
+	return /* @__PURE__ */ _("span", {
+		className: `inline-flex items-center gap-1 whitespace-nowrap rounded-pill border px-2 py-0.5 text-xs font-medium ${r.className}`,
+		children: [/* @__PURE__ */ g("span", {
+			className: "font-normal opacity-80",
+			children: "On error"
+		}), r.label]
 	});
-}, O = s(function() {
-	let { pipelineId: s } = te(), O = t(), { t: k } = p(), A = "default", [ie] = ne(), { hasPermission: j, isLoading: ae } = f(), M = j(r.PIPELINE_READ), N = j(r.PIPELINE_UPDATE), P = j(r.PIPELINE_DELETE), F = j(r.PIPELINE_TEST), [I, L] = u(null), [R, z] = u("{\n  \"data\": \"sample\"\n}"), [B, V] = u(null), [H, U] = u(ie.get("test") === "true"), W = e((e) => e.deleteDialogOpen), G = e((e) => e.openDeleteDialog), K = e((e) => e.closeDeleteDialog), { loading: q, error: J, fetchPipeline: Y, deletePipeline: X, testPipeline: Z } = n({
-		consoleId: A,
+}, D = l(function() {
+	let { pipelineId: l } = ie(), D = t(), { t: O } = m(), k = "default", [fe] = ae(), A = re(), { hasPermission: j, isLoading: pe } = p(), M = j(a.PIPELINE_READ), N = j(a.PIPELINE_UPDATE), P = j(a.PIPELINE_DELETE), F = j(a.PIPELINE_TEST), [I, L] = d(null), [R, z] = d("{\n  \"data\": \"sample\"\n}"), [B, me] = d(null), [V, H] = d(fe.get("test") === "true"), he = e((e) => e.deleteDialogOpen), U = e((e) => e.openDeleteDialog), W = e((e) => e.closeDeleteDialog), { loading: G, error: K, fetchPipeline: q, deletePipeline: J, testPipeline: Y } = ee({
+		consoleId: k,
 		skipFetch: !0
 	});
-	l(() => {
-		s && Y(s).then((e) => {
+	ne(() => {
+		l && q(l).then((e) => {
 			e && L(e);
 		});
-	}, [s, Y]);
-	let Q = c(() => {
-		O("/pipelines");
-	}, [O]), $ = c(() => {
-		O(`/pipelines/${s}/edit`);
-	}, [O, s]), oe = c(() => {
-		I && G(I);
-	}, [I, G]), se = c(async () => {
-		I && (await X(I.id) ? (i() && a("success"), K(), O("/pipelines")) : i() && a("error"));
+	}, [l, q]);
+	let X = u(() => {
+		D("/pipelines");
+	}, [D]), Z = u(() => {
+		D(`/pipelines/${l}/edit`);
+	}, [D, l]), ge = u(() => {
+		I && U(I);
+	}, [I, U]), _e = u(async () => {
+		I && (await J(I.id) ? (o() && s("success"), W(), D("/pipelines")) : o() && s("error"));
 	}, [
 		I,
-		X,
-		K,
-		O
-	]), ce = c((e) => {
-		O(`/dashboards/${A}/parsers/${e}`);
-	}, [O, A]), le = c(async () => {
+		J,
+		W,
+		D
+	]), ve = u((e) => {
+		D(`/dashboards/${k}/parsers/${e}`);
+	}, [D, k]), ye = u(async () => {
 		if (I) try {
-			let e = await Z({
+			let e = await Y({
 				pipelineId: I.id,
 				inputData: R
 			});
-			e && V(e);
+			e && me(e);
 		} catch {}
 	}, [
 		I,
-		Z,
+		Y,
 		R
 	]);
-	return q && !I ? /* @__PURE__ */ v("div", {
-		className: "p-6",
-		children: /* @__PURE__ */ y("div", {
+	if (G && !I) return /* @__PURE__ */ g("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ _("div", {
 			className: "flex flex-col items-center justify-center py-16",
-			children: [/* @__PURE__ */ y("svg", {
-				className: "w-8 h-8 text-action-primary-bg animate-spin mb-4",
-				fill: "none",
-				viewBox: "0 0 24 24",
-				children: [/* @__PURE__ */ v("circle", {
-					className: "opacity-25",
-					cx: "12",
-					cy: "12",
-					r: "10",
-					stroke: "currentColor",
-					strokeWidth: "4"
-				}), /* @__PURE__ */ v("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__ */ v("p", {
-				className: "text-sm text-text-secondary",
-				children: k("bigconsole.pipelines.view.loading", "Loading Pipeline...")
+			role: "status",
+			children: [/* @__PURE__ */ g(le, { style: {
+				height: "var(--size-icon-xl)",
+				width: "var(--size-icon-xl)"
+			} }), /* @__PURE__ */ g("p", {
+				className: "mt-form-gap text-sm text-text-secondary",
+				children: O("bigconsole.pipelines.view.loading", "Loading Pipeline...")
 			})]
 		})
-	}) : !ae && !M ? /* @__PURE__ */ v(d, {
-		title: k("bigconsole.pipelines.errors.accessDeniedTitle", "Access Denied"),
-		description: k("bigconsole.pipelines.errors.accessDeniedViewDescription", "You don't have permission to view this pipeline.")
-	}) : J ? /* @__PURE__ */ v("div", {
-		className: "p-6",
-		children: /* @__PURE__ */ y("div", {
-			className: "flex flex-col items-center justify-center py-16 text-center",
-			children: [
-				/* @__PURE__ */ v("div", {
-					className: "p-3 rounded-full bg-status-error-bg/10 mb-4",
-					children: /* @__PURE__ */ v(w, { className: "w-8 h-8 text-status-error-text" })
-				}),
-				/* @__PURE__ */ v("h3", {
-					className: "text-lg font-medium text-text-primary mb-2",
-					children: k("bigconsole.pipelines.view.loadError", "Failed to load Pipeline")
-				}),
-				/* @__PURE__ */ v("p", {
-					className: "text-sm text-text-secondary mb-4",
-					children: J.message
-				}),
-				/* @__PURE__ */ v("button", {
-					type: "button",
-					onClick: Q,
-					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: k("bigconsole.pipelines.actions.backToPipelines", "Back to Pipelines")
-				})
-			]
+	});
+	if (!pe && !M) return /* @__PURE__ */ g(f, {
+		title: O("bigconsole.pipelines.errors.accessDeniedTitle", "Access Denied"),
+		description: O("bigconsole.pipelines.errors.accessDeniedViewDescription", "You don't have permission to view this pipeline.")
+	});
+	if (K) return /* @__PURE__ */ g("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ g(r, {
+			tone: "danger",
+			headingLevel: 2,
+			title: O("bigconsole.pipelines.view.loadError", "Failed to load Pipeline"),
+			description: K.message,
+			icon: /* @__PURE__ */ g(w, { className: "h-icon-sm w-icon-sm" }),
+			actions: /* @__PURE__ */ g(h, {
+				onClick: X,
+				className: v,
+				children: O("bigconsole.pipelines.actions.backToPipelines", "Back to Pipelines")
+			}),
+			"data-testid": "pipeline-view-error",
+			children: /* @__PURE__ */ g("p", {
+				className: "text-sm text-text-secondary",
+				children: "The pipeline could not be read from the console service. Nothing was changed."
+			})
+		})
+	});
+	if (!I) return /* @__PURE__ */ g("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ g(r, {
+			tone: "warning",
+			headingLevel: 2,
+			title: O("bigconsole.pipelines.view.notFoundTitle", "Pipeline not found"),
+			description: O("bigconsole.pipelines.view.notFoundDescription", "The pipeline you're looking for doesn't exist or has been deleted."),
+			icon: /* @__PURE__ */ g(w, { className: "h-icon-sm w-icon-sm" }),
+			actions: /* @__PURE__ */ g(h, {
+				onClick: X,
+				className: v,
+				children: O("bigconsole.pipelines.actions.backToPipelines", "Back to Pipelines")
+			}),
+			"data-testid": "pipeline-not-found"
 		})
-	}) : I ? /* @__PURE__ */ y("div", {
-		className: "p-6",
-		children: [
-			/* @__PURE__ */ y("div", {
-				className: "flex items-center justify-between mb-6",
-				children: [/* @__PURE__ */ y("div", {
-					className: "flex items-center gap-4",
-					children: [/* @__PURE__ */ v("button", {
-						type: "button",
-						onClick: Q,
-						className: "p-2 text-text-secondary hover:text-text-primary hover:bg-bg-sunken rounded-md transition-colors",
-						children: /* @__PURE__ */ v(b, { className: "w-5 h-5" })
-					}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ v("h1", {
-							className: "text-2xl font-bold text-text-primary",
-							children: I.name
-						}), /* @__PURE__ */ v(o, { status: I.status })]
-					}), I.description && /* @__PURE__ */ v("p", {
-						className: "text-sm text-text-secondary mt-1",
-						children: I.description
-					})] })]
-				}), /* @__PURE__ */ y("div", {
-					className: "flex items-center gap-2",
+	});
+	let Q = I.stages?.length ?? 0, $ = B?.status === "completed", be = /* @__PURE__ */ g(r, {
+		emphasis: V ? "standard" : "primary",
+		headingLevel: 2,
+		title: O("bigconsole.pipelines.view.stagesHeading", "Pipeline Stages ({{count}})", { count: Q }),
+		description: "Data flows top to bottom — each stage reads its input key and writes an output key for the next one.",
+		"data-testid": "pipeline-stages",
+		children: Q === 0 ? /* @__PURE__ */ g(oe, {
+			illustration: "empty-generic",
+			title: O("bigconsole.pipelines.view.noStagesTitle", "No stages defined"),
+			description: O("bigconsole.pipelines.view.noStagesDescription", "Edit the pipeline to add parser stages."),
+			action: /* @__PURE__ */ _(h, {
+				variant: "secondary",
+				onClick: Z,
+				disabled: !N,
+				className: v,
+				children: [/* @__PURE__ */ g(x, { className: "h-icon-sm w-icon-sm" }), O("bigconsole.pipelines.actions.edit", "Edit")]
+			})
+		}) : /* @__PURE__ */ g("ol", {
+			className: "flex flex-col",
+			children: (I.stages ?? []).map((e, t) => /* @__PURE__ */ _("li", {
+				className: "flex min-w-0 flex-col",
+				children: [/* @__PURE__ */ _("div", {
+					"data-testid": "pipeline-stage",
+					"data-enabled": e.enabled,
+					className: `min-w-0 rounded-card border bg-bg-sunken p-4 ${e.enabled ? "border-[var(--color-border-subtle)]" : "border-dashed border-[var(--color-border-strong)]"}`,
 					children: [
-						/* @__PURE__ */ y("button", {
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-wrap items-center justify-between gap-control-gap",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex min-w-0 flex-wrap items-center gap-icon-gap",
+								children: [
+									/* @__PURE__ */ g("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: t + 1
+									}),
+									/* @__PURE__ */ g("h3", {
+										className: "min-w-0 truncate text-sm font-semibold text-text-primary",
+										children: e.parserName || O("bigconsole.pipelines.view.stageFallbackName", "Stage {{number}}", { number: t + 1 })
+									}),
+									e.parserType && /* @__PURE__ */ g("span", {
+										className: "rounded-pill bg-bg-surface px-2 py-0.5 text-xs font-medium text-text-secondary",
+										children: e.parserType.toUpperCase()
+									})
+								]
+							}), /* @__PURE__ */ _("div", {
+								className: "flex flex-wrap items-center gap-icon-gap",
+								children: [/* @__PURE__ */ g(E, { handling: e.onError }), !e.enabled && /* @__PURE__ */ g("span", {
+									className: "rounded-pill border border-[var(--color-border-strong)] px-2 py-0.5 text-xs font-medium text-text-secondary",
+									children: O("bigconsole.pipelines.view.stageDisabled", "Disabled")
+								})]
+							})]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "mt-2 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-text-secondary",
+							children: [
+								/* @__PURE__ */ g("span", {
+									className: "text-text-muted",
+									children: "Reads"
+								}),
+								/* @__PURE__ */ g("code", {
+									className: y,
+									children: e.inputKey
+								}),
+								/* @__PURE__ */ g(T, { className: "h-3 w-3 shrink-0" }),
+								/* @__PURE__ */ g("span", {
+									className: "text-text-muted",
+									children: "writes"
+								}),
+								/* @__PURE__ */ g("code", {
+									className: y,
+									children: e.outputKey
+								})
+							]
+						}),
+						e.description && /* @__PURE__ */ g("p", {
+							className: "mt-2 text-xs text-text-secondary",
+							children: e.description
+						}),
+						e.parserId && /* @__PURE__ */ g("button", {
 							type: "button",
-							onClick: () => U(!H),
+							onClick: () => ve(e.parserId),
+							className: "mt-2 rounded-button text-xs text-text-link hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+							children: O("bigconsole.pipelines.view.viewParser", "View Parser")
+						})
+					]
+				}), t < Q - 1 && /* @__PURE__ */ g("span", {
+					"aria-hidden": "true",
+					className: "flex justify-center py-1",
+					children: /* @__PURE__ */ g(T, { className: "h-icon-sm w-icon-sm rotate-90 text-text-muted" })
+				})]
+			}, e.id))
+		})
+	}), xe = V ? /* @__PURE__ */ g(r, {
+		id: "pipeline-test-panel",
+		emphasis: "primary",
+		headingLevel: 2,
+		title: O("bigconsole.pipelines.view.testPanelHeading", "Test Pipeline"),
+		description: "Run sample input through every enabled stage. Nothing is written to the connected sink.",
+		actions: /* @__PURE__ */ _(h, {
+			onClick: ye,
+			disabled: G || !F,
+			className: v,
+			children: [/* @__PURE__ */ g(C, { className: "h-icon-sm w-icon-sm" }), G ? O("bigconsole.pipelines.view.testRunning", "Running...") : O("bigconsole.pipelines.view.runTest", "Run Test")]
+		}),
+		"data-testid": "pipeline-test-panel",
+		children: /* @__PURE__ */ _("div", {
+			className: "flex flex-col gap-form-gap",
+			children: [/* @__PURE__ */ _("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ g("label", {
+					htmlFor: A,
+					className: "mb-1 block text-sm font-medium text-text-primary",
+					children: O("bigconsole.pipelines.view.inputJsonLabel", "Input JSON")
+				}), /* @__PURE__ */ g("textarea", {
+					id: A,
+					value: R,
+					onChange: (e) => z(e.target.value),
+					spellCheck: !1,
+					className: `min-h-32 w-full resize-y rounded-input border border-[var(--color-border-subtle)] bg-bg-canvas px-3 py-2 font-mono text-sm text-text-primary ${n}`,
+					placeholder: "{\"key\": \"value\"}"
+				})]
+			}), B && /* @__PURE__ */ g(r, {
+				tone: $ ? "success" : "danger",
+				headingLevel: 3,
+				title: $ ? O("bigconsole.pipelines.view.testPassed", "Test Passed") : O("bigconsole.pipelines.view.testFailed", "Test Failed"),
+				icon: g($ ? de : w, { className: "h-icon-sm w-icon-sm" }),
+				meta: B.totalExecutionTimeMs ? /* @__PURE__ */ _("span", {
+					className: ue,
+					children: [B.totalExecutionTimeMs, "ms"]
+				}) : null,
+				"data-testid": "pipeline-test-result",
+				children: /* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-form-gap",
+					children: [/* @__PURE__ */ _("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ g("h4", {
+							className: "mb-1 text-sm font-medium text-text-primary",
+							children: O("bigconsole.pipelines.view.outputLabel", "Output")
+						}), /* @__PURE__ */ g("pre", {
+							className: "max-h-64 w-full overflow-auto rounded-input border border-[var(--color-border-subtle)] bg-bg-canvas p-3 font-mono text-xs text-text-primary",
+							children: JSON.stringify(B.outputData, null, 2) || "null"
+						})]
+					}), B.error && /* @__PURE__ */ _("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ g("h4", {
+							className: "mb-1 text-sm font-medium text-status-error-text",
+							children: O("bigconsole.pipelines.view.errorLabel", "Error")
+						}), /* @__PURE__ */ g("pre", {
+							className: "max-h-64 w-full overflow-auto rounded-input border border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)] p-3 font-mono text-xs text-status-error-text",
+							children: B.error
+						})]
+					})]
+				})
+			})]
+		})
+	}) : null;
+	return /* @__PURE__ */ _("div", {
+		className: "p-card-padding",
+		children: [/* @__PURE__ */ _(i, { children: [
+			/* @__PURE__ */ _("header", {
+				className: "flex flex-col gap-form-gap sm:flex-row sm:items-start sm:justify-between",
+				children: [/* @__PURE__ */ _("div", {
+					className: "flex min-w-0 flex-col gap-control-gap",
+					children: [
+						/* @__PURE__ */ _(h, {
+							variant: "ghost",
+							size: "sm",
+							onClick: X,
+							className: "w-fit",
+							children: [/* @__PURE__ */ g(b, { className: "h-icon-sm w-icon-sm" }), O("bigconsole.pipelines.actions.backToPipelines", "Back to Pipelines")]
+						}),
+						/* @__PURE__ */ _("div", {
+							className: "flex flex-wrap items-center gap-icon-gap",
+							children: [/* @__PURE__ */ g("h1", {
+								className: "min-w-0 break-words text-2xl font-bold leading-tight text-text-primary",
+								children: I.name
+							}), /* @__PURE__ */ g(c, { status: I.status })]
+						}),
+						I.description && /* @__PURE__ */ g("p", {
+							className: "text-sm text-text-secondary",
+							children: I.description
+						})
+					]
+				}), /* @__PURE__ */ _("div", {
+					className: "flex flex-wrap items-center gap-control-gap",
+					children: [
+						/* @__PURE__ */ _(h, {
+							onClick: () => H(!V),
 							disabled: !F,
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-status-success-text bg-status-success-bg/10 hover:bg-status-success-bg/20 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ v(C, { className: "w-4 h-4" }), k("bigconsole.pipelines.actions.test", "Test")]
+							"aria-expanded": V,
+							"aria-controls": "pipeline-test-panel",
+							className: v,
+							children: [/* @__PURE__ */ g(C, { className: "h-icon-sm w-icon-sm" }), O("bigconsole.pipelines.actions.test", "Test")]
 						}),
-						/* @__PURE__ */ y("button", {
-							type: "button",
-							onClick: $,
+						/* @__PURE__ */ _(h, {
+							variant: "secondary",
+							onClick: Z,
 							disabled: !N,
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed",
-							children: [/* @__PURE__ */ v(x, { className: "w-4 h-4" }), k("bigconsole.pipelines.actions.edit", "Edit")]
+							className: v,
+							children: [/* @__PURE__ */ g(x, { className: "h-icon-sm w-icon-sm" }), O("bigconsole.pipelines.actions.edit", "Edit")]
 						}),
-						P && /* @__PURE__ */ y("button", {
-							type: "button",
-							onClick: oe,
-							className: "inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-status-error-text bg-status-error-bg/10 hover:bg-status-error-bg/20 rounded-md transition-colors",
-							children: [/* @__PURE__ */ v(S, { className: "w-4 h-4" }), k("bigconsole.pipelines.actions.delete", "Delete")]
+						P && /* @__PURE__ */ _(h, {
+							variant: "destructive",
+							onClick: ge,
+							className: v,
+							children: [/* @__PURE__ */ g(S, { className: "h-icon-sm w-icon-sm" }), O("bigconsole.pipelines.actions.delete", "Delete")]
 						})
 					]
 				})]
 			}),
-			/* @__PURE__ */ v(re, {
-				className: "mb-6",
-				children: k("bigconsole.pipelines.view.purpose", "A pipeline chains parsers and a data sink into a repeatable flow. Review its stages here, test it with sample input to confirm the output, then edit the stages or run it to process real data into the connected sink.")
+			/* @__PURE__ */ g(ce, {
+				className: "max-w-[75ch]",
+				children: O("bigconsole.pipelines.view.purpose", "A pipeline chains parsers and a data sink into a repeatable flow. Review its stages here, test it with sample input to confirm the output, then edit the stages or run it to process real data into the connected sink.")
 			}),
-			/* @__PURE__ */ v(g, {
+			/* @__PURE__ */ g(se, {
 				storageKey: "bigconsole-pipeline-view",
 				steps: [
 					...F ? [{
 						id: "test",
-						label: k("bigconsole.pipelines.view.nextStepTestLabel", "Test with sample input"),
-						description: k("bigconsole.pipelines.view.nextStepTestDescription", "Run the pipeline against a sample to verify each stage."),
-						onClick: () => U(!0)
+						label: O("bigconsole.pipelines.view.nextStepTestLabel", "Test with sample input"),
+						description: O("bigconsole.pipelines.view.nextStepTestDescription", "Run the pipeline against a sample to verify each stage."),
+						onClick: () => H(!0)
 					}] : [],
 					...N ? [{
 						id: "edit",
-						label: k("bigconsole.pipelines.view.nextStepEditLabel", "Edit the stages"),
-						description: k("bigconsole.pipelines.view.nextStepEditDescription", "Add, reorder, or configure the parsers in this pipeline."),
-						onClick: $
+						label: O("bigconsole.pipelines.view.nextStepEditLabel", "Edit the stages"),
+						description: O("bigconsole.pipelines.view.nextStepEditDescription", "Add, reorder, or configure the parsers in this pipeline."),
+						onClick: Z
 					}] : [],
 					{
 						id: "sinks",
-						label: k("bigconsole.pipelines.view.nextStepSinksLabel", "Review the target data sink"),
-						description: k("bigconsole.pipelines.view.nextStepSinksDescription", "See where the processed data lands."),
-						onClick: () => O("/datasinks")
+						label: O("bigconsole.pipelines.view.nextStepSinksLabel", "Review the target data sink"),
+						description: O("bigconsole.pipelines.view.nextStepSinksDescription", "See where the processed data lands."),
+						onClick: () => D("/datasinks")
 					}
 				]
 			}),
-			/* @__PURE__ */ y("div", {
-				className: "grid grid-cols-1 lg:grid-cols-3 gap-6",
-				children: [/* @__PURE__ */ y("div", {
-					className: "lg:col-span-2 space-y-6",
-					children: [/* @__PURE__ */ y(m, {
-						treatment: "glass",
-						glow: !0,
-						className: "p-6",
-						children: [/* @__PURE__ */ v("h2", {
-							className: "text-lg font-semibold text-text-primary mb-4",
-							children: k("bigconsole.pipelines.view.stagesHeading", "Pipeline Stages ({{count}})", { count: I.stages?.length || 0 })
-						}), !I.stages || I.stages.length === 0 ? /* @__PURE__ */ v(h, {
-							illustration: "empty-generic",
-							title: k("bigconsole.pipelines.view.noStagesTitle", "No stages defined"),
-							description: k("bigconsole.pipelines.view.noStagesDescription", "Edit the pipeline to add parser stages.")
-						}) : /* @__PURE__ */ v("div", {
-							className: "space-y-3",
-							children: I.stages.map((e, t) => /* @__PURE__ */ y("div", {
-								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ y("div", {
-									className: `
-                        flex-1 p-4 rounded-lg border
-                        ${e.enabled ? "bg-bg-surface border-border-default" : "bg-bg-sunken border-border-default opacity-60"}
-                      `,
-									children: [
-										/* @__PURE__ */ y("div", {
-											className: "flex items-center justify-between mb-2",
-											children: [/* @__PURE__ */ y("div", {
-												className: "flex items-center gap-2",
-												children: [
-													/* @__PURE__ */ v("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__ */ v("span", {
-														className: "font-medium text-text-primary",
-														children: e.parserName || k("bigconsole.pipelines.view.stageFallbackName", "Stage {{number}}", { number: t + 1 })
-													}),
-													e.parserType && /* @__PURE__ */ v("span", {
-														className: "px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
-														children: e.parserType.toUpperCase()
-													})
-												]
-											}), /* @__PURE__ */ y("div", {
-												className: "flex items-center gap-2",
-												children: [/* @__PURE__ */ v(D, { handling: e.onError }), !e.enabled && /* @__PURE__ */ v("span", {
-													className: "px-1.5 py-0.5 text-xs font-medium bg-bg-sunken text-text-secondary rounded",
-													children: k("bigconsole.pipelines.view.stageDisabled", "Disabled")
-												})]
-											})]
-										}),
-										/* @__PURE__ */ y("div", {
-											className: "flex items-center gap-2 text-xs text-text-secondary",
-											children: [
-												/* @__PURE__ */ v("span", {
-													className: "font-mono bg-bg-sunken px-1.5 py-0.5 rounded",
-													children: e.inputKey
-												}),
-												/* @__PURE__ */ v(E, { className: "w-3 h-3" }),
-												/* @__PURE__ */ v("span", {
-													className: "font-mono bg-bg-sunken px-1.5 py-0.5 rounded",
-													children: e.outputKey
-												})
-											]
-										}),
-										e.description && /* @__PURE__ */ v("p", {
-											className: "text-xs text-text-secondary mt-2",
-											children: e.description
-										}),
-										e.parserId && /* @__PURE__ */ v("button", {
-											type: "button",
-											onClick: () => ce(e.parserId),
-											className: "mt-2 text-xs text-action-primary-bg hover:underline",
-											children: k("bigconsole.pipelines.view.viewParser", "View Parser")
+			/* @__PURE__ */ _("div", {
+				className: "grid grid-cols-1 gap-section-gap lg:grid-cols-3",
+				children: [/* @__PURE__ */ g("div", {
+					className: "min-w-0 lg:col-span-2",
+					children: /* @__PURE__ */ _(i, { children: [xe, be] })
+				}), /* @__PURE__ */ g("div", {
+					className: "min-w-0",
+					children: /* @__PURE__ */ g(i, { children: /* @__PURE__ */ g(r, {
+						emphasis: "muted",
+						headingLevel: 2,
+						title: O("bigconsole.pipelines.view.detailsHeading", "Details"),
+						"data-testid": "pipeline-details",
+						children: /* @__PURE__ */ _("dl", {
+							className: "flex flex-col gap-form-gap text-sm",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex flex-col gap-3",
+								children: [
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailStatus", "Status")
+									}), /* @__PURE__ */ g("dd", {
+										className: "mt-1",
+										children: /* @__PURE__ */ g(c, {
+											status: I.status,
+											size: "sm"
 										})
-									]
-								}), t < (I.stages?.length || 0) - 1 && /* @__PURE__ */ v(E, { className: "w-5 h-5 text-text-secondary flex-shrink-0 hidden md:block" })]
-							}, e.id))
-						})]
-					}), H && /* @__PURE__ */ y("div", {
-						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ v("h2", {
-							className: "text-lg font-semibold text-text-primary mb-4",
-							children: k("bigconsole.pipelines.view.testPanelHeading", "Test Pipeline")
-						}), /* @__PURE__ */ y("div", {
-							className: "space-y-4",
-							children: [
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
-									className: "block text-sm font-medium text-text-primary mb-2",
-									children: k("bigconsole.pipelines.view.inputJsonLabel", "Input JSON")
-								}), /* @__PURE__ */ v("textarea", {
-									value: R,
-									onChange: (e) => z(e.target.value),
-									className: "w-full h-32 px-3 py-2 text-sm font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md focus:outline-none focus:ring-2 focus:ring-action-primary-bg resize-none",
-									placeholder: "{\"key\": \"value\"}"
-								})] }),
-								/* @__PURE__ */ y("button", {
-									type: "button",
-									onClick: le,
-									disabled: q || !F,
-									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 disabled:opacity-50 disabled:cursor-not-allowed",
-									children: [/* @__PURE__ */ v(C, { className: "w-4 h-4" }), q ? k("bigconsole.pipelines.view.testRunning", "Running...") : k("bigconsole.pipelines.view.runTest", "Run Test")]
-								}),
-								B && /* @__PURE__ */ y("div", {
-									className: "mt-4",
-									children: [
-										/* @__PURE__ */ y("div", {
-											className: "flex items-center gap-2 mb-2",
-											children: [B.status === "completed" ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(T, { className: "w-4 h-4 text-status-success-text" }), /* @__PURE__ */ v("span", {
-												className: "text-sm font-medium text-status-success-text",
-												children: k("bigconsole.pipelines.view.testPassed", "Test Passed")
-											})] }) : /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(w, { className: "w-4 h-4 text-status-error-text" }), /* @__PURE__ */ v("span", {
-												className: "text-sm font-medium text-status-error-text",
-												children: k("bigconsole.pipelines.view.testFailed", "Test Failed")
-											})] }), B.totalExecutionTimeMs && /* @__PURE__ */ y("span", {
-												className: "text-xs text-text-secondary",
-												children: [
-													"(",
-													B.totalExecutionTimeMs,
-													"ms)"
-												]
-											})]
-										}),
-										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
-											className: "block text-sm font-medium text-text-primary mb-2",
-											children: k("bigconsole.pipelines.view.outputLabel", "Output")
-										}), /* @__PURE__ */ v("pre", {
-											className: "w-full p-3 text-xs font-mono text-text-primary bg-bg-sunken border border-border-default rounded-md overflow-auto max-h-48",
-											children: JSON.stringify(B.outputData, null, 2) || "null"
-										})] }),
-										B.error && /* @__PURE__ */ y("div", {
-											className: "mt-2",
-											children: [/* @__PURE__ */ v("label", {
-												className: "block text-sm font-medium text-status-error-text mb-2",
-												children: k("bigconsole.pipelines.view.errorLabel", "Error")
-											}), /* @__PURE__ */ v("pre", {
-												className: "w-full p-3 text-xs font-mono text-status-error-text bg-status-error-bg/10 border border-status-error-border/20 rounded-md overflow-auto",
-												children: B.error
-											})]
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailStages", "Stages")
+									}), /* @__PURE__ */ g("dd", {
+										className: "text-text-primary",
+										children: Q
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailLastExecuted", "Last Executed")
+									}), /* @__PURE__ */ g("dd", {
+										className: "break-words text-text-primary",
+										children: I.lastExecutedAt ? new Date(I.lastExecutedAt).toLocaleString(void 0, {
+											dateStyle: "medium",
+											timeStyle: "short"
+										}) : O("bigconsole.pipelines.view.detailNever", "Never")
+									})] })
+								]
+							}), /* @__PURE__ */ _("div", {
+								className: "flex flex-col gap-3 border-t border-[var(--color-border-subtle)] pt-form-gap",
+								children: [
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailVersion", "Version")
+									}), /* @__PURE__ */ g("dd", {
+										className: "text-text-primary",
+										children: I.version
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailCreated", "Created")
+									}), /* @__PURE__ */ g("dd", {
+										className: "break-words text-text-primary",
+										children: new Date(I.createdAt).toLocaleString(void 0, {
+											dateStyle: "medium",
+											timeStyle: "short"
 										})
-									]
-								})
-							]
-						})]
-					})]
-				}), /* @__PURE__ */ v("div", {
-					className: "space-y-6",
-					children: /* @__PURE__ */ y("div", {
-						className: "bg-bg-surface border border-border-default rounded-lg p-6",
-						children: [/* @__PURE__ */ v("h2", {
-							className: "text-lg font-semibold text-text-primary mb-4",
-							children: k("bigconsole.pipelines.view.detailsHeading", "Details")
-						}), /* @__PURE__ */ y("dl", {
-							className: "space-y-3",
-							children: [
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailStatus", "Status")
-								}), /* @__PURE__ */ v("dd", {
-									className: "mt-1",
-									children: /* @__PURE__ */ v(o, { status: I.status })
-								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailStages", "Stages")
-								}), /* @__PURE__ */ v("dd", {
-									className: "text-sm text-text-primary",
-									children: I.stages?.length || 0
-								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailLastExecuted", "Last Executed")
-								}), /* @__PURE__ */ v("dd", {
-									className: "text-sm text-text-primary",
-									children: I.lastExecutedAt ? new Date(I.lastExecutedAt).toLocaleString() : k("bigconsole.pipelines.view.detailNever", "Never")
-								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailVersion", "Version")
-								}), /* @__PURE__ */ v("dd", {
-									className: "text-sm text-text-primary",
-									children: I.version
-								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailCreated", "Created")
-								}), /* @__PURE__ */ v("dd", {
-									className: "text-sm text-text-primary",
-									children: new Date(I.createdAt).toLocaleString()
-								})] }),
-								/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("dt", {
-									className: "text-xs text-text-secondary",
-									children: k("bigconsole.pipelines.view.detailUpdated", "Updated")
-								}), /* @__PURE__ */ v("dd", {
-									className: "text-sm text-text-primary",
-									children: new Date(I.updatedAt).toLocaleString()
-								})] })
-							]
-						})]
-					})
+									})] }),
+									/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("dt", {
+										className: "text-xs text-text-muted",
+										children: O("bigconsole.pipelines.view.detailUpdated", "Updated")
+									}), /* @__PURE__ */ g("dd", {
+										className: "break-words text-text-primary",
+										children: new Date(I.updatedAt).toLocaleString(void 0, {
+											dateStyle: "medium",
+											timeStyle: "short"
+										})
+									})] })
+								]
+							})]
+						})
+					}) })
 				})]
-			}),
-			I && /* @__PURE__ */ v(ee, {
-				pipeline: I,
-				isOpen: W,
-				onClose: K,
-				onConfirm: se
-			})
-		]
-	}) : /* @__PURE__ */ v("div", {
-		className: "p-6",
-		children: /* @__PURE__ */ v(h, {
-			illustration: "empty-data",
-			title: k("bigconsole.pipelines.view.notFoundTitle", "Pipeline not found"),
-			description: k("bigconsole.pipelines.view.notFoundDescription", "The pipeline you're looking for doesn't exist or has been deleted."),
-			action: /* @__PURE__ */ v("button", {
-				type: "button",
-				onClick: Q,
-				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: k("bigconsole.pipelines.actions.backToPipelines", "Back to Pipelines")
 			})
-		})
+		] }), I && /* @__PURE__ */ g(te, {
+			pipeline: I,
+			isOpen: he,
+			onClose: W,
+			onConfirm: _e
+		})]
 	});
 });
 //#endregion
-export { O as PipelineViewPage, O as default };
+export { D as PipelineViewPage, D as default };
 
 //# sourceMappingURL=PipelineViewPage.js.map