@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/pages/ParserViewPage.js

@@ -1,67 +1,69 @@
 import { useParserStore as e } from "../store/parserStore.js";
 import { useAppNavigate as ee } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import te from "../hooks/useDataSinkOperations.js";
-import t from "../hooks/useParserOperations.js";
-import { BIGCONSOLE_PERMISSIONS as n } from "../../constants/permissions.js";
-import r from "../components/parser/ParserTypeBadge.js";
-import i from "../components/parser/ParserStatusBadge.js";
-import { isNative as a, nativeCopyText as ne, nativeImpact as re, nativeNotify as o, nativeToast as ie } from "../../utils/nativeBridge.js";
-import ae from "../components/parser/ExpressionEditor.js";
-import oe from "../components/parser/ExportParserDialog.js";
-import { memo as s, useCallback as c, useEffect as l, useState as u } from "react";
-import { useParams as se } from "react-router";
-import { AccessDenied as ce, PermissionButton as d } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as f } from "@burdenoff/fe-libs/shared/providers/shell";
-import { AlertCircle as le, AlertTriangle as ue, ArrowDown as de, ArrowLeft as p, Check as fe, Copy as pe, Database as me, Download as he, Edit as ge, FileCode2 as _e, Loader2 as m, Play as h, Trash2 as ve } from "lucide-react";
-import { useI18n as ye } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
-import { Badge as g, Button as _, Card as v, CardContent as y, CardHeader as b, CardTitle as x, Dialog as be, DialogContent as xe, DialogDescription as Se, DialogFooter as Ce, DialogHeader as S, DialogTitle as C, GlassCard as w, IllustratedEmptyState as T, NextSteps as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
-import { Fragment as O, jsx as k, jsxs as A } from "react/jsx-runtime";
-import { formatDistanceToNow as j } from "date-fns";
+import { Section as t, SectionStack as te } from "../components/common/Section.js";
+import "../components/common/index.js";
+import n from "../hooks/useDataSinkOperations.js";
+import r from "../hooks/useParserOperations.js";
+import { BIGCONSOLE_PERMISSIONS as i } from "../../constants/permissions.js";
+import a from "../components/parser/ParserTypeBadge.js";
+import o from "../components/parser/ParserStatusBadge.js";
+import { isNative as s, nativeCopyText as ne, nativeImpact as c, nativeNotify as l, nativeToast as re } from "../../utils/nativeBridge.js";
+import u from "../components/parser/ExpressionEditor.js";
+import d from "../components/parser/ExportParserDialog.js";
+import { memo as f, useCallback as p, useEffect as m, useState as h } from "react";
+import { useParams as ie } from "react-router";
+import { AccessDenied as ae, PermissionButton as g } from "@burdenoff/fe-libs/shared/components";
+import { usePermissions as oe } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertCircle as se, AlertTriangle as ce, ArrowDown as le, ArrowLeft as _, Check as v, Copy as ue, Database as de, Download as fe, Edit as pe, FileCode2 as me, Loader2 as he, Play as ge, Trash2 as _e } from "lucide-react";
+import { useI18n as ve } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Badge as y, Button as b, IllustratedEmptyState as ye, NextSteps as be, PagePurpose as xe, ResponsiveDialog as x, ResponsiveDialogContent as S, ResponsiveDialogDescription as C, ResponsiveDialogFooter as w, ResponsiveDialogHeader as T, ResponsiveDialogTitle as E } from "@burdenoff/fe-libs/ui";
+import { Fragment as D, jsx as O, jsxs as k } from "react/jsx-runtime";
+import { formatDistanceToNow as A } from "date-fns";
 //#region src/bigconsole/pages/ParserViewPage.tsx
-var we = "default", M = s(function() {
-	let { parserId: s, consoleId: M } = se(), N = ee(), { t: P } = ye(), Te = M || we, { hasPermission: Ee, isLoading: De } = f(), Oe = Ee(n.PARSER_READ), [F, I] = u(!1), [ke, L] = u(!1), [Ae, R] = u(!1), [z, B] = u(!1), [je, V] = u(!1), [H, U] = u(null), W = e((e) => s ? e.parsers.get(s) : void 0), { loading: Me, error: G, fetchParser: K, deleteParser: q, executeParser: J } = t({
-		consoleId: Te,
+var j = "default", M = f(function() {
+	let { parserId: f, consoleId: M } = ie(), N = ee(), { t: P } = ve(), Se = M || j, { hasPermission: Ce, isLoading: we } = oe(), Te = Ce(i.PARSER_READ), [F, I] = h(!1), [Ee, L] = h(!1), [De, R] = h(!1), [z, B] = h(!1), [Oe, V] = h(!1), [H, U] = h(null), W = e((e) => f ? e.parsers.get(f) : void 0), { loading: ke, error: G, fetchParser: K, deleteParser: q, executeParser: J } = r({
+		consoleId: Se,
 		skipFetch: !0
-	}), { dataSinks: Ne, fetchDataSinks: Y } = te({ skipFetch: !0 });
-	l(() => {
-		s && K(s);
-	}, [s, K]), l(() => {
+	}), { dataSinks: Ae, fetchDataSinks: Y } = n({ skipFetch: !0 });
+	m(() => {
+		f && K(f);
+	}, [f, K]), m(() => {
 		Y();
 	}, [Y]);
-	let X = W?.inputSinkKey ? Ne.find((e) => e.key === W.inputSinkKey) : null, Z = c(() => {
+	let X = W?.inputSinkKey ? Ae.find((e) => e.key === W.inputSinkKey) : null, Z = p(() => {
 		N(M ? `/dashboards/${M}/parsers` : "/parsers");
-	}, [N, M]), Q = c(() => {
-		N(M ? `/dashboards/${M}/parsers/${s}/edit` : `/parsers/${s}/edit`);
+	}, [N, M]), Q = p(() => {
+		N(M ? `/dashboards/${M}/parsers/${f}/edit` : `/parsers/${f}/edit`);
 	}, [
 		N,
-		s,
+		f,
 		M
-	]), Pe = c(async () => {
-		if (s) {
+	]), je = p(async () => {
+		if (f) {
 			I(!0);
 			try {
-				await q(s) ? (a() && o("success"), N(M ? `/dashboards/${M}/parsers` : "/parsers")) : a() && o("error");
+				await q(f) ? (s() && l("success"), N(M ? `/dashboards/${M}/parsers` : "/parsers")) : s() && l("error");
 			} catch {
-				a() && o("error");
+				s() && l("error");
 			} finally {
 				I(!1), L(!1);
 			}
 		}
 	}, [
-		s,
+		f,
 		q,
 		N,
 		M
-	]), Fe = c(async () => {
+	]), Me = p(async () => {
 		if (W?.expression) try {
-			await ne(W.expression), R(!0), a() && ie(P("bigconsole.parsers.view.expressionCopied", "Expression copied")), setTimeout(() => R(!1), 2e3);
+			await ne(W.expression), R(!0), s() && re(P("bigconsole.parsers.view.expressionCopied", "Expression copied")), setTimeout(() => R(!1), 2e3);
 		} catch {}
-	}, [W?.expression, P]), $ = c(async () => {
-		if (s) {
+	}, [W?.expression, P]), $ = p(async () => {
+		if (f) {
 			B(!0), U(null);
 			try {
-				let e = await J(s);
+				let e = await J(f);
 				e && U({
 					success: e.success,
 					output: e.output,
@@ -80,321 +82,361 @@ var we = "default", M = s(function() {
 			}
 		}
 	}, [
-		s,
+		f,
 		J,
 		P
-	]), Ie = c(() => {
+	]), Ne = p(() => {
 		X && N(`/datasinks/${X.id}`);
-	}, [N, X]), Le = c(() => {
+	}, [N, X]), Pe = p(() => {
 		V(!0);
-	}, []), Re = c(() => {
+	}, []), Fe = p(() => {
 		V(!1);
 	}, []);
-	return Me && !W || De ? /* @__PURE__ */ k("div", {
+	if (ke && !W || we) return /* @__PURE__ */ O("div", {
 		className: "flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ k(m, { className: "w-8 h-8 text-text-secondary animate-spin" })
-	}) : Oe ? G ? /* @__PURE__ */ k("div", {
+		children: /* @__PURE__ */ O(he, { className: "w-8 h-8 text-text-secondary animate-spin" })
+	});
+	if (!Te) return /* @__PURE__ */ O(ae, {
+		title: P("bigconsole.parsers.accessDenied.title", "Access Denied"),
+		description: P("bigconsole.parsers.accessDenied.view", "You don't have permission to view this parser.")
+	});
+	if (G) return /* @__PURE__ */ O("div", {
+		className: "p-card-padding",
+		children: /* @__PURE__ */ O(t, {
+			tone: "danger",
+			headingLevel: 2,
+			title: P("bigconsole.parsers.errors.viewLoadFailed", "Failed to load Parser"),
+			description: "The parser could not be fetched. Go back to the list and try again.",
+			icon: /* @__PURE__ */ O(se, { className: "h-icon-md w-icon-md text-[var(--color-status-error-text)]" }),
+			actions: /* @__PURE__ */ k(b, {
+				onClick: Z,
+				variant: "secondary",
+				size: "sm",
+				children: [/* @__PURE__ */ O(_, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.goBack", "Go back")]
+			}),
+			"data-testid": "parser-load-error",
+			children: /* @__PURE__ */ O("p", {
+				className: "font-mono text-xs break-words text-text-secondary",
+				children: G.message
+			})
+		})
+	});
+	if (!W) return /* @__PURE__ */ O("div", {
 		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ A("div", {
-			className: "text-center",
-			children: [
-				/* @__PURE__ */ k(le, { className: "w-12 h-12 text-status-error-text mx-auto mb-4" }),
-				/* @__PURE__ */ k("p", {
-					className: "text-status-error-text text-body-sm font-medium mb-2",
-					children: P("bigconsole.parsers.errors.viewLoadFailed", "Failed to load Parser")
-				}),
-				/* @__PURE__ */ k("p", {
-					className: "text-text-tertiary text-body-xs mb-6",
-					children: G.message
-				}),
-				/* @__PURE__ */ A(_, {
-					onClick: Z,
-					variant: "ghost",
-					size: "sm",
-					children: [/* @__PURE__ */ k(p, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.goBack", "Go back")]
-				})
-			]
+		children: /* @__PURE__ */ O(ye, {
+			illustration: "empty-data",
+			title: P("bigconsole.parsers.view.notFoundTitle", "Parser not found"),
+			description: P("bigconsole.parsers.view.notFoundDescription", "The Parser you're looking for doesn't exist or has been deleted."),
+			action: /* @__PURE__ */ k(b, {
+				onClick: Z,
+				variant: "default",
+				size: "default",
+				children: [/* @__PURE__ */ O(_, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.goBackToParsers", "Go back to Parsers")]
+			})
 		})
-	}) : W ? /* @__PURE__ */ A("div", {
-		className: "p-card-padding space-y-6",
+	});
+	let Ie = H !== null;
+	return /* @__PURE__ */ k("div", {
+		className: "p-card-padding",
 		children: [
-			/* @__PURE__ */ A("div", {
-				className: "flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4",
-				children: [/* @__PURE__ */ A("div", {
-					className: "flex-1",
-					children: [
-						/* @__PURE__ */ A(_, {
-							onClick: Z,
-							variant: "ghost",
-							size: "sm",
-							className: "mb-4",
-							children: [/* @__PURE__ */ k(p, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.view.backToParsers", "Back to Parsers")]
-						}),
-						/* @__PURE__ */ A("div", {
-							className: "flex items-center gap-2 flex-wrap",
-							children: [
-								/* @__PURE__ */ k("h1", {
-									className: "text-heading-h1 font-bold text-text-primary",
-									children: W.name || P("bigconsole.parsers.view.untitled", "Untitled")
-								}),
-								/* @__PURE__ */ k(r, { type: W.type }),
-								/* @__PURE__ */ k(i, { status: W.status })
-							]
-						}),
-						W.description && /* @__PURE__ */ k("p", {
-							className: "text-body-sm text-text-secondary mt-2",
-							children: W.description
-						})
-					]
-				}), /* @__PURE__ */ A("div", {
-					className: "flex items-center gap-2 flex-wrap",
-					children: [
-						/* @__PURE__ */ k(d, {
-							permission: n.PARSER_EXECUTE,
-							deniedBehavior: "disable",
-							children: /* @__PURE__ */ A(_, {
-								onClick: $,
-								disabled: z,
-								variant: "secondary",
-								size: "default",
-								children: [/* @__PURE__ */ k(h, { className: "w-4 h-4 mr-2" }), z ? P("bigconsole.parsers.view.running", "Running...") : P("bigconsole.parsers.actions.execute", "Execute")]
+			/* @__PURE__ */ k(te, { children: [
+				/* @__PURE__ */ k("div", {
+					className: "flex flex-col gap-form-gap border-b border-[var(--color-border-subtle)] pb-form-gap sm:flex-row sm:items-start sm:justify-between",
+					children: [/* @__PURE__ */ k("div", {
+						className: "min-w-0 flex-1",
+						children: [
+							/* @__PURE__ */ k(b, {
+								onClick: Z,
+								variant: "ghost",
+								size: "sm",
+								className: "mb-4",
+								children: [/* @__PURE__ */ O(_, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.view.backToParsers", "Back to Parsers")]
+							}),
+							/* @__PURE__ */ k("div", {
+								className: "flex items-center gap-2 flex-wrap",
+								children: [
+									/* @__PURE__ */ O("h1", {
+										className: "text-2xl font-bold text-text-primary sm:text-3xl",
+										children: W.name || P("bigconsole.parsers.view.untitled", "Untitled")
+									}),
+									/* @__PURE__ */ O(a, { type: W.type }),
+									/* @__PURE__ */ O(o, { status: W.status })
+								]
+							}),
+							W.description && /* @__PURE__ */ O("p", {
+								className: "text-sm text-text-secondary mt-2",
+								children: W.description
 							})
-						}),
-						/* @__PURE__ */ A(_, {
-							onClick: Le,
-							variant: "secondary",
-							size: "default",
-							children: [/* @__PURE__ */ k(he, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.export", "Export")]
-						}),
-						/* @__PURE__ */ k(d, {
-							permission: n.PARSER_UPDATE,
-							deniedBehavior: "disable",
-							children: /* @__PURE__ */ A(_, {
-								onClick: Q,
+						]
+					}), /* @__PURE__ */ k("div", {
+						className: "flex shrink-0 flex-wrap items-center gap-control-gap",
+						children: [
+							/* @__PURE__ */ O(g, {
+								permission: i.PARSER_EXECUTE,
+								deniedBehavior: "disable",
+								children: /* @__PURE__ */ k(b, {
+									onClick: $,
+									disabled: z,
+									variant: "default",
+									size: "default",
+									children: [/* @__PURE__ */ O(ge, { className: "w-4 h-4 mr-2" }), z ? P("bigconsole.parsers.view.running", "Running...") : P("bigconsole.parsers.actions.execute", "Execute")]
+								})
+							}),
+							/* @__PURE__ */ k(b, {
+								onClick: Pe,
 								variant: "secondary",
 								size: "default",
-								children: [/* @__PURE__ */ k(ge, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.edit", "Edit")]
+								children: [/* @__PURE__ */ O(fe, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.export", "Export")]
+							}),
+							/* @__PURE__ */ O(g, {
+								permission: i.PARSER_UPDATE,
+								deniedBehavior: "disable",
+								children: /* @__PURE__ */ k(b, {
+									onClick: Q,
+									variant: "secondary",
+									size: "default",
+									children: [/* @__PURE__ */ O(pe, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.edit", "Edit")]
+								})
+							}),
+							/* @__PURE__ */ O(g, {
+								permission: i.PARSER_DELETE,
+								deniedBehavior: "hide",
+								children: /* @__PURE__ */ k(b, {
+									onClick: () => L(!0),
+									disabled: F,
+									variant: "destructive",
+									size: "default",
+									children: [/* @__PURE__ */ O(_e, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.delete", "Delete")]
+								})
 							})
-						}),
-						/* @__PURE__ */ k(d, {
-							permission: n.PARSER_DELETE,
-							deniedBehavior: "hide",
-							children: /* @__PURE__ */ A(_, {
-								onClick: () => L(!0),
-								disabled: F,
-								variant: "destructive",
-								size: "default",
-								children: [/* @__PURE__ */ k(ve, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.delete", "Delete")]
+						]
+					})]
+				}),
+				/* @__PURE__ */ O(xe, {
+					className: "max-w-[80ch]",
+					children: P("bigconsole.parsers.view.purpose", "A parser turns raw input into structured fields using its expression. Review or copy the expression, run it against a sample to see the output, then edit it or use it inside a pipeline to shape incoming data.")
+				}),
+				/* @__PURE__ */ k("div", {
+					className: "grid gap-section-gap md:grid-cols-2 lg:grid-cols-3",
+					children: [/* @__PURE__ */ k("div", {
+						className: "flex min-w-0 flex-col gap-section-gap md:col-span-2",
+						children: [H && /* @__PURE__ */ O(t, {
+							id: "parser-execution-result",
+							emphasis: "primary",
+							tone: H.success ? "success" : "danger",
+							headingLevel: 2,
+							title: P("bigconsole.parsers.view.executionResult", "Execution Result"),
+							description: H.success ? "Output produced by the latest run of this parser." : "The latest run did not complete. Fix the expression or the input and run again.",
+							meta: /* @__PURE__ */ O(y, {
+								variant: H.success ? "default" : "destructive",
+								children: H.success ? P("bigconsole.parsers.view.success", "Success") : P("bigconsole.parsers.view.failed", "Failed")
+							}),
+							actions: /* @__PURE__ */ k(y, {
+								variant: "secondary",
+								className: "text-xs",
+								children: [H.executionTimeMs, "ms"]
+							}),
+							"data-testid": "parser-execution-result",
+							children: /* @__PURE__ */ O("pre", {
+								className: "max-h-[300px] min-w-0 overflow-auto rounded-md bg-bg-sunken p-4 font-mono text-sm text-text-primary",
+								children: H.error ?? JSON.stringify(H.output, null, 2)
 							})
-						})
-					]
-				})]
-			}),
-			/* @__PURE__ */ k(D, { children: P("bigconsole.parsers.view.purpose", "A parser turns raw input into structured fields using its expression. Review or copy the expression, run it against a sample to see the output, then edit it or use it inside a pipeline to shape incoming data.") }),
-			/* @__PURE__ */ k(E, {
-				storageKey: "bigconsole-parser-view",
-				steps: [
-					{
-						id: "execute",
-						label: P("bigconsole.parsers.view.nextSteps.executeLabel", "Run a test execution"),
-						description: P("bigconsole.parsers.view.nextSteps.executeDescription", "Check the expression produces the fields you expect."),
-						onClick: $
-					},
-					{
-						id: "edit",
-						label: P("bigconsole.parsers.view.nextSteps.editLabel", "Edit the expression"),
-						description: P("bigconsole.parsers.view.nextSteps.editDescription", "Refine how this parser maps your input."),
-						onClick: Q
-					},
-					{
-						id: "pipeline",
-						label: P("bigconsole.parsers.view.nextSteps.pipelineLabel", "Use it in a pipeline"),
-						description: P("bigconsole.parsers.view.nextSteps.pipelineDescription", "Chain this parser with a data sink to process data end to end."),
-						onClick: () => N("/pipelines")
-					}
-				]
-			}),
-			/* @__PURE__ */ A("div", {
-				className: "grid gap-6 lg:grid-cols-3",
-				children: [/* @__PURE__ */ A("div", {
-					className: "lg:col-span-2 space-y-6",
-					children: [/* @__PURE__ */ A(w, {
-						treatment: "glass",
-						glow: !0,
-						children: [/* @__PURE__ */ A(b, {
-							className: "flex flex-row items-center justify-between space-y-0",
-							children: [/* @__PURE__ */ A(x, {
-								className: "flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ k(_e, { className: "w-4 h-4 text-text-secondary" }),
-									P("bigconsole.parsers.view.expression", "Expression"),
-									/* @__PURE__ */ k(g, {
-										variant: "secondary",
-										className: "text-xs uppercase",
-										children: W.type
-									})
-								]
-							}), /* @__PURE__ */ k(_, {
-								onClick: Fe,
+						}), /* @__PURE__ */ O(t, {
+							emphasis: Ie ? "standard" : "primary",
+							headingLevel: 2,
+							title: P("bigconsole.parsers.view.expression", "Expression"),
+							description: "The JQ or JSONata program this parser runs against every input record.",
+							icon: /* @__PURE__ */ O(me, { className: "h-icon-sm w-icon-sm" }),
+							meta: /* @__PURE__ */ O(y, {
+								variant: "secondary",
+								className: "text-xs uppercase",
+								children: W.type
+							}),
+							actions: /* @__PURE__ */ O(b, {
+								onClick: Me,
 								variant: "ghost",
 								size: "sm",
-								children: Ae ? /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(fe, { className: "w-3.5 h-3.5 text-status-success-text mr-2" }), P("bigconsole.parsers.view.copied", "Copied!")] }) : /* @__PURE__ */ A(O, { children: [/* @__PURE__ */ k(pe, { className: "w-3.5 h-3.5 mr-2" }), P("bigconsole.parsers.actions.copy", "Copy")] })
-							})]
-						}), /* @__PURE__ */ k(y, { children: /* @__PURE__ */ k(ae, {
-							value: W.expression,
-							type: W.type,
-							readOnly: !0,
-							height: "300px"
-						}) })]
-					}), H && /* @__PURE__ */ A(v, { children: [/* @__PURE__ */ A(b, {
-						className: "flex flex-row items-center justify-between space-y-0",
-						children: [/* @__PURE__ */ A(x, {
-							className: "flex items-center gap-2",
-							children: [P("bigconsole.parsers.view.executionResult", "Execution Result"), /* @__PURE__ */ k(g, {
-								variant: H.success ? "default" : "destructive",
-								children: H.success ? P("bigconsole.parsers.view.success", "Success") : P("bigconsole.parsers.view.failed", "Failed")
-							})]
-						}), /* @__PURE__ */ A(g, {
-							variant: "secondary",
-							className: "text-xs",
-							children: [H.executionTimeMs, "ms"]
+								children: De ? /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(v, { className: "w-3.5 h-3.5 text-status-success-text mr-2" }), P("bigconsole.parsers.view.copied", "Copied!")] }) : /* @__PURE__ */ k(D, { children: [/* @__PURE__ */ O(ue, { className: "w-3.5 h-3.5 mr-2" }), P("bigconsole.parsers.actions.copy", "Copy")] })
+							}),
+							"data-testid": "parser-expression",
+							children: /* @__PURE__ */ O(u, {
+								value: W.expression,
+								type: W.type,
+								readOnly: !0,
+								height: "clamp(180px, 40vh, 300px)"
+							})
 						})]
-					}), /* @__PURE__ */ k(y, { children: H.error ? /* @__PURE__ */ k("div", {
-						className: "bg-status-error-bg/5 border border-status-error-border/20 rounded-md p-4",
-						children: /* @__PURE__ */ k("p", {
-							className: "text-body-sm text-status-error-text font-mono",
-							children: H.error
-						})
-					}) : /* @__PURE__ */ k("pre", {
-						className: "text-body-sm text-text-primary font-mono bg-bg-sunken rounded-md p-4 overflow-auto max-h-[300px]",
-						children: JSON.stringify(H.output, null, 2)
-					}) })] })]
-				}), /* @__PURE__ */ A("div", {
-					className: "space-y-6",
-					children: [
-						/* @__PURE__ */ A(v, { children: [/* @__PURE__ */ k(b, { children: /* @__PURE__ */ k(x, { children: P("bigconsole.parsers.view.dataFlow", "Data Flow") }) }), /* @__PURE__ */ k(y, { children: /* @__PURE__ */ A("div", {
-							className: "space-y-3",
-							children: [
-								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
-									className: "text-xs font-medium text-text-secondary",
-									children: P("bigconsole.parsers.view.sourceDataSink", "Source DataSink")
-								}), W.inputSinkKey ? /* @__PURE__ */ A("div", {
-									className: "mt-1",
-									children: [/* @__PURE__ */ k("p", {
-										className: "text-body-sm text-text-primary font-mono",
-										children: W.inputSinkKey
-									}), X && /* @__PURE__ */ A(_, {
-										onClick: Ie,
-										variant: "link",
-										size: "sm",
-										className: "mt-1 p-0 h-auto",
-										children: [/* @__PURE__ */ k(me, { className: "w-3 h-3 mr-1" }), P("bigconsole.parsers.view.viewDataSink", "View {{name}}", { name: X.name || P("bigconsole.parsers.view.dataSinkFallback", "DataSink") })]
-									})]
-								}) : /* @__PURE__ */ k("p", {
-									className: "text-body-sm text-text-tertiary mt-1",
-									children: P("bigconsole.parsers.view.noneConfigured", "None configured")
-								})] }),
-								/* @__PURE__ */ k("div", {
-									className: "flex items-center justify-center py-1",
-									children: /* @__PURE__ */ k(de, { className: "w-4 h-4 text-text-tertiary" })
-								}),
-								/* @__PURE__ */ A("div", { children: [/* @__PURE__ */ k("label", {
-									className: "text-xs font-medium text-text-secondary",
-									children: P("bigconsole.parsers.view.outputKey", "Output Key")
-								}), /* @__PURE__ */ k("p", {
-									className: "text-body-sm text-text-primary font-mono mt-1",
-									children: W.outputKey || P("bigconsole.parsers.view.notConfigured", "Not configured")
-								})] })
-							]
-						}) })] }),
-						/* @__PURE__ */ A(v, { children: [/* @__PURE__ */ k(b, { children: /* @__PURE__ */ k(x, { children: P("bigconsole.parsers.view.configuration", "Configuration") }) }), /* @__PURE__ */ k(y, { children: /* @__PURE__ */ A("dl", {
-							className: "space-y-4 text-body-sm",
-							children: [
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: P("bigconsole.parsers.view.status", "Status")
-									}), /* @__PURE__ */ k("dd", { children: /* @__PURE__ */ k(i, { status: W.status }) })]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: P("bigconsole.parsers.view.type", "Type")
-									}), /* @__PURE__ */ k("dd", { children: /* @__PURE__ */ k(r, { type: W.type }) })]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: P("bigconsole.parsers.view.cacheTtl", "Cache TTL")
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary font-medium",
-										children: W.ttl ? P("bigconsole.parsers.view.ttlSeconds", "{{ttl}}s", { ttl: W.ttl }) : P("bigconsole.parsers.view.noCaching", "No caching")
-									})]
-								}),
-								/* @__PURE__ */ A("div", {
-									className: "flex justify-between items-center",
-									children: [/* @__PURE__ */ k("dt", {
-										className: "text-text-secondary",
-										children: P("bigconsole.parsers.view.version", "Version")
-									}), /* @__PURE__ */ k("dd", {
-										className: "text-text-primary font-medium",
-										children: W.version || 1
+					}), /* @__PURE__ */ k("div", {
+						className: "grid min-w-0 gap-section-gap md:col-span-2 md:grid-cols-2 lg:col-span-1 lg:grid-cols-1",
+						children: [
+							/* @__PURE__ */ O(t, {
+								headingLevel: 2,
+								title: P("bigconsole.parsers.view.dataFlow", "Data Flow"),
+								description: "Where this parser reads from and what it writes.",
+								"data-testid": "parser-data-flow",
+								children: /* @__PURE__ */ k("dl", {
+									className: "space-y-3",
+									children: [
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("dt", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+											children: P("bigconsole.parsers.view.sourceDataSink", "Source DataSink")
+										}), W.inputSinkKey ? /* @__PURE__ */ k("dd", {
+											className: "mt-1",
+											children: [/* @__PURE__ */ O("p", {
+												className: "break-words font-mono text-sm font-medium text-text-primary",
+												children: W.inputSinkKey
+											}), X && /* @__PURE__ */ k(b, {
+												onClick: Ne,
+												variant: "link",
+												size: "sm",
+												className: "mt-1 p-0 h-auto",
+												children: [/* @__PURE__ */ O(de, { className: "w-3 h-3 mr-1" }), P("bigconsole.parsers.view.viewDataSink", "View {{name}}", { name: X.name || P("bigconsole.parsers.view.dataSinkFallback", "DataSink") })]
+											})]
+										}) : /* @__PURE__ */ O("dd", {
+											className: "mt-1 text-sm text-text-muted",
+											children: P("bigconsole.parsers.view.noneConfigured", "None configured")
+										})] }),
+										/* @__PURE__ */ O("div", {
+											"aria-hidden": "true",
+											className: "flex items-center justify-center py-1",
+											children: /* @__PURE__ */ O(le, { className: "w-4 h-4 text-text-muted" })
+										}),
+										/* @__PURE__ */ k("div", { children: [/* @__PURE__ */ O("dt", {
+											className: "text-xs font-medium uppercase tracking-wide text-text-muted",
+											children: P("bigconsole.parsers.view.outputKey", "Output Key")
+										}), /* @__PURE__ */ O("dd", {
+											className: "mt-1 break-words font-mono text-sm font-medium text-text-primary",
+											children: W.outputKey || P("bigconsole.parsers.view.notConfigured", "Not configured")
+										})] })
+									]
+								})
+							}),
+							/* @__PURE__ */ O(t, {
+								headingLevel: 2,
+								title: P("bigconsole.parsers.view.configuration", "Configuration"),
+								"data-testid": "parser-configuration",
+								children: /* @__PURE__ */ k("dl", {
+									className: "space-y-4 text-sm",
+									children: [
+										/* @__PURE__ */ k("div", {
+											className: "flex flex-wrap items-center justify-between gap-2",
+											children: [/* @__PURE__ */ O("dt", {
+												className: "text-text-secondary",
+												children: P("bigconsole.parsers.view.status", "Status")
+											}), /* @__PURE__ */ O("dd", { children: /* @__PURE__ */ O(o, { status: W.status }) })]
+										}),
+										/* @__PURE__ */ k("div", {
+											className: "flex flex-wrap items-center justify-between gap-2",
+											children: [/* @__PURE__ */ O("dt", {
+												className: "text-text-secondary",
+												children: P("bigconsole.parsers.view.type", "Type")
+											}), /* @__PURE__ */ O("dd", { children: /* @__PURE__ */ O(a, { type: W.type }) })]
+										}),
+										/* @__PURE__ */ k("div", {
+											className: "flex flex-wrap items-center justify-between gap-2",
+											children: [/* @__PURE__ */ O("dt", {
+												className: "text-text-secondary",
+												children: P("bigconsole.parsers.view.cacheTtl", "Cache TTL")
+											}), /* @__PURE__ */ O("dd", {
+												className: "text-text-primary font-medium",
+												children: W.ttl ? P("bigconsole.parsers.view.ttlSeconds", "{{ttl}}s", { ttl: W.ttl }) : P("bigconsole.parsers.view.noCaching", "No caching")
+											})]
+										}),
+										/* @__PURE__ */ k("div", {
+											className: "flex flex-wrap items-center justify-between gap-2",
+											children: [/* @__PURE__ */ O("dt", {
+												className: "text-text-secondary",
+												children: P("bigconsole.parsers.view.version", "Version")
+											}), /* @__PURE__ */ O("dd", {
+												className: "text-text-primary font-medium",
+												children: W.version || 1
+											})]
+										})
+									]
+								})
+							}),
+							/* @__PURE__ */ O(t, {
+								emphasis: "muted",
+								padding: "compact",
+								headingLevel: 2,
+								title: P("bigconsole.parsers.view.timestamps", "Timestamps"),
+								"data-testid": "parser-history",
+								children: /* @__PURE__ */ k("dl", {
+									className: "space-y-4 text-sm",
+									children: [/* @__PURE__ */ k("div", {
+										className: "flex flex-wrap items-center justify-between gap-2",
+										children: [/* @__PURE__ */ O("dt", {
+											className: "text-text-secondary",
+											children: P("bigconsole.parsers.view.created", "Created")
+										}), /* @__PURE__ */ O("dd", {
+											className: "text-text-primary font-medium",
+											children: W.createdAt ? A(new Date(W.createdAt), { addSuffix: !0 }) : P("bigconsole.parsers.view.unknown", "Unknown")
+										})]
+									}), /* @__PURE__ */ k("div", {
+										className: "flex flex-wrap items-center justify-between gap-2",
+										children: [/* @__PURE__ */ O("dt", {
+											className: "text-text-secondary",
+											children: P("bigconsole.parsers.view.updated", "Updated")
+										}), /* @__PURE__ */ O("dd", {
+											className: "text-text-primary font-medium",
+											children: W.updatedAt ? A(new Date(W.updatedAt), { addSuffix: !0 }) : P("bigconsole.parsers.view.unknown", "Unknown")
+										})]
 									})]
 								})
-							]
-						}) })] }),
-						/* @__PURE__ */ A(v, { children: [/* @__PURE__ */ k(b, { children: /* @__PURE__ */ k(x, { children: P("bigconsole.parsers.view.timestamps", "Timestamps") }) }), /* @__PURE__ */ k(y, { children: /* @__PURE__ */ A("dl", {
-							className: "space-y-4 text-body-sm",
-							children: [/* @__PURE__ */ A("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ k("dt", {
-									className: "text-text-secondary",
-									children: P("bigconsole.parsers.view.created", "Created")
-								}), /* @__PURE__ */ k("dd", {
-									className: "text-text-primary font-medium",
-									children: W.createdAt ? j(new Date(W.createdAt), { addSuffix: !0 }) : P("bigconsole.parsers.view.unknown", "Unknown")
-								})]
-							}), /* @__PURE__ */ A("div", {
-								className: "flex justify-between items-center",
-								children: [/* @__PURE__ */ k("dt", {
-									className: "text-text-secondary",
-									children: P("bigconsole.parsers.view.updated", "Updated")
-								}), /* @__PURE__ */ k("dd", {
-									className: "text-text-primary font-medium",
-									children: W.updatedAt ? j(new Date(W.updatedAt), { addSuffix: !0 }) : P("bigconsole.parsers.view.unknown", "Unknown")
-								})]
-							})]
-						}) })] })
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ O(be, {
+					storageKey: "bigconsole-parser-view",
+					steps: [
+						{
+							id: "execute",
+							label: P("bigconsole.parsers.view.nextSteps.executeLabel", "Run a test execution"),
+							description: P("bigconsole.parsers.view.nextSteps.executeDescription", "Check the expression produces the fields you expect."),
+							onClick: $
+						},
+						{
+							id: "edit",
+							label: P("bigconsole.parsers.view.nextSteps.editLabel", "Edit the expression"),
+							description: P("bigconsole.parsers.view.nextSteps.editDescription", "Refine how this parser maps your input."),
+							onClick: Q
+						},
+						{
+							id: "pipeline",
+							label: P("bigconsole.parsers.view.nextSteps.pipelineLabel", "Use it in a pipeline"),
+							description: P("bigconsole.parsers.view.nextSteps.pipelineDescription", "Chain this parser with a data sink to process data end to end."),
+							onClick: () => N("/pipelines")
+						}
 					]
-				})]
-			}),
-			/* @__PURE__ */ k(be, {
-				open: ke,
+				})
+			] }),
+			/* @__PURE__ */ O(x, {
+				open: Ee,
 				onOpenChange: L,
-				children: /* @__PURE__ */ A(xe, { children: [
-					/* @__PURE__ */ A(S, { children: [/* @__PURE__ */ k(C, { children: P("bigconsole.parsers.view.deleteDialogTitle", "Delete Parser") }), /* @__PURE__ */ A(Se, { children: [
+				children: /* @__PURE__ */ k(S, { children: [
+					/* @__PURE__ */ k(T, { children: [/* @__PURE__ */ O(E, { children: P("bigconsole.parsers.view.deleteDialogTitle", "Delete Parser") }), /* @__PURE__ */ k(C, { children: [
 						P("bigconsole.parsers.view.deleteConfirmPrefix", "Are you sure you want to delete"),
 						" ",
-						/* @__PURE__ */ k("strong", { children: W.name }),
+						/* @__PURE__ */ O("strong", { children: W.name }),
 						P("bigconsole.parsers.view.deleteConfirmSuffix", "? This action cannot be undone.")
 					] })] }),
-					/* @__PURE__ */ A("div", {
-						className: "bg-status-warning-bg/10 border border-status-warning-border/20 rounded-md p-4 flex items-start gap-2",
-						children: [/* @__PURE__ */ k(ue, { className: "w-4 h-4 text-status-warning-text flex-shrink-0 mt-0.5" }), /* @__PURE__ */ k("p", {
-							className: "text-body-xs text-status-warning-text",
-							children: P("bigconsole.parsers.view.deleteWarning", "Widgets and pipelines using this parser may stop working correctly after deletion.")
-						})]
+					/* @__PURE__ */ O(t, {
+						tone: "warning",
+						padding: "compact",
+						headingLevel: 3,
+						title: "Check dependents first",
+						description: P("bigconsole.parsers.view.deleteWarning", "Widgets and pipelines using this parser may stop working correctly after deletion."),
+						icon: /* @__PURE__ */ O(ce, { className: "h-icon-sm w-icon-sm text-[var(--color-status-warning-text)]" }),
+						"data-testid": "parser-delete-warning"
 					}),
-					/* @__PURE__ */ A(Ce, { children: [/* @__PURE__ */ k(_, {
+					/* @__PURE__ */ k(w, { children: [/* @__PURE__ */ O(b, {
 						onClick: () => L(!1),
 						variant: "secondary",
 						children: P("bigconsole.parsers.actions.cancel", "Cancel")
-					}), /* @__PURE__ */ k(_, {
+					}), /* @__PURE__ */ O(b, {
 						onClick: () => {
-							re("medium"), Pe();
+							c("medium"), je();
 						},
 						disabled: F,
 						variant: "destructive",
@@ -402,29 +444,13 @@ var we = "default", M = s(function() {
 					})] })
 				] })
 			}),
-			/* @__PURE__ */ k(oe, {
-				isOpen: je,
-				parserId: s || null,
+			/* @__PURE__ */ O(d, {
+				isOpen: Oe,
+				parserId: f || null,
 				parserName: W.name,
-				onClose: Re
+				onClose: Fe
 			})
 		]
-	}) : /* @__PURE__ */ k("div", {
-		className: "flex items-center justify-center min-h-[400px] p-card-padding",
-		children: /* @__PURE__ */ k(T, {
-			illustration: "empty-data",
-			title: P("bigconsole.parsers.view.notFoundTitle", "Parser not found"),
-			description: P("bigconsole.parsers.view.notFoundDescription", "The Parser you're looking for doesn't exist or has been deleted."),
-			action: /* @__PURE__ */ A(_, {
-				onClick: Z,
-				variant: "default",
-				size: "default",
-				children: [/* @__PURE__ */ k(p, { className: "w-4 h-4 mr-2" }), P("bigconsole.parsers.actions.goBackToParsers", "Go back to Parsers")]
-			})
-		})
-	}) : /* @__PURE__ */ k(ce, {
-		title: P("bigconsole.parsers.accessDenied.title", "Access Denied"),
-		description: P("bigconsole.parsers.accessDenied.view", "You don't have permission to view this parser.")
 	});
 });
 //#endregion