@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

package/dist/bigconsole/pages/WorkflowViewPage.js

@@ -1,131 +1,135 @@
 import { useAppNavigate as e } from "../contexts/NavigationContext.js";
 import "../contexts/index.js";
-import t from "../hooks/useWorkflowOperations.js";
-import { BOOTSTRAP_RETRY_DELAY_MS as n } from "../constants.js";
-import { useBigConsole as r } from "../context/BigConsoleContext.js";
+import { SECTION_FOCUS_RING as t, sectionSurfaceClasses 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/useWorkflowOperations.js";
+import { BOOTSTRAP_RETRY_DELAY_MS as te } from "../constants.js";
+import { useBigConsole as a } from "../context/BigConsoleContext.js";
 import "../context/index.js";
-import { BIGCONSOLE_PERMISSIONS as i } from "../../constants/permissions.js";
-import { isNative as a, nativeCopyText as o, nativeNotify as s, nativeToast as c } from "../../utils/nativeBridge.js";
-import ee from "../components/workflow/WorkflowStatusBadge.js";
-import te from "../components/workflow/WorkflowDeleteDialog.js";
-import { memo as l, useCallback as u, useEffect as ne, useState as d } from "react";
-import { useParams as re } from "react-router";
-import { AccessDenied as f, PermissionButton as p } from "@burdenoff/fe-libs/shared/components";
-import { usePermissions as m } from "@burdenoff/fe-libs/shared/providers/shell";
-import { GlassCard as h, IllustratedEmptyState as g, NextSteps as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
-import { Fragment as y, jsx as b, jsxs as x } from "react/jsx-runtime";
-import { WorkflowBuilder as S } from "@burdenoff/fluidgrids-fe-sdk";
-import { formatDistanceToNow as C } from "date-fns";
+import { BIGCONSOLE_PERMISSIONS as o } from "../../constants/permissions.js";
+import { isNative as s, nativeCopyText as c, nativeNotify as l, nativeToast as ne } from "../../utils/nativeBridge.js";
+import re from "../components/workflow/WorkflowStatusBadge.js";
+import ie from "../components/workflow/WorkflowDeleteDialog.js";
+import { memo as u, useCallback as d, useEffect as ae, useState as f } from "react";
+import { useParams as p } from "react-router";
+import { AccessDenied as m, PermissionButton as h } 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 g, IllustratedEmptyState as _, NextSteps as ce, PagePurpose as le, Spinner as ue } from "@burdenoff/fe-libs/ui";
+import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
+import { WorkflowBuilder as de } from "@burdenoff/fluidgrids-fe-sdk";
+import { formatDistanceToNow as x } from "date-fns";
 //#region src/bigconsole/pages/WorkflowViewPage.tsx
-var w = ({ className: e }) => /* @__PURE__ */ b("svg", {
+var fe = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M15 19l-7-7 7-7"
 	})
-}), T = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), pe = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("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"
 	})
-}), ie = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), me = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("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__ */ x("svg", {
+}), he = ({ className: e }) => /* @__PURE__ */ b("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: [/* @__PURE__ */ b("path", {
+	children: [/* @__PURE__ */ y("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__ */ b("path", {
+	}), /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
 	})]
-}), oe = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), ge = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
 	})
-}), se = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), _e = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M5 13l4 4L19 7"
 	})
-}), ce = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), ve = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"
 	})
-}), le = ({ className: e }) => /* @__PURE__ */ b("svg", {
+}), ye = ({ className: e }) => /* @__PURE__ */ y("svg", {
 	className: e,
 	fill: "none",
 	stroke: "currentColor",
 	viewBox: "0 0 24 24",
-	children: /* @__PURE__ */ b("path", {
+	children: /* @__PURE__ */ y("path", {
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
 		strokeWidth: 2,
 		d: "M19 9l-7 7-7-7"
 	})
-}), E = l(function() {
-	let l = e(), { workflowId: E } = re(), { apiGatewayUrl: ue, authToken: de, workspaceId: fe } = r(), { hasPermission: D, isLoading: pe } = m(), O = D(i.WORKFLOW_READ), k = D(i.WORKFLOW_UPDATE);
-	D(i.WORKFLOW_DELETE);
-	let A = D(i.WORKFLOW_EXECUTE), [j, M] = d(null), [N, P] = d(!1), [, F] = d(!1), [I, L] = d(!1), [R, z] = d(!1), [B, V] = d(!1), [me, H] = d(!1), [U, W] = d(null), { loading: he, error: G, fetchWorkflow: K, deleteWorkflow: q, executeWorkflow: J, pollWorkflowExecution: Y } = t({ skipFetch: !0 });
-	ne(() => {
-		if (!E) {
+}), S = u(function() {
+	let u = e(), { t: S } = se(), { workflowId: C } = p(), { apiGatewayUrl: w, authToken: T, workspaceId: E } = a(), { hasPermission: D, isLoading: O } = oe(), k = D(o.WORKFLOW_READ), A = D(o.WORKFLOW_UPDATE);
+	D(o.WORKFLOW_DELETE);
+	let j = D(o.WORKFLOW_EXECUTE), [M, N] = f(null), [P, F] = f(!1), [, I] = f(!1), [L, R] = f(!1), [be, z] = f(!1), [B, V] = f(!1), [xe, H] = f(!1), [U, W] = f(null), { loading: Se, error: G, fetchWorkflow: K, deleteWorkflow: q, executeWorkflow: J, pollWorkflowExecution: Y } = ee({ skipFetch: !0 });
+	ae(() => {
+		if (!C) {
 			H(!0);
 			return;
 		}
-		let e = !1, t = async (r) => {
+		let e = !1, t = async (n) => {
 			try {
-				let i = await K(E);
+				let r = await K(C);
 				if (e) return;
-				i ? (M(i), H(!0)) : r === 0 ? setTimeout(() => {
+				r ? (N(r), H(!0)) : n === 0 ? setTimeout(() => {
 					e || t(1);
-				}, n) : H(!0);
+				}, te) : H(!0);
 			} catch {
 				e || H(!0);
 			}
@@ -133,32 +137,32 @@ var w = ({ className: e }) => /* @__PURE__ */ b("svg", {
 		return t(0), () => {
 			e = !0;
 		};
-	}, [E, K]);
-	let X = u(() => {
-		l("/workflows");
-	}, [l]), Z = u(() => {
-		l(`/workflows/${E}/edit`);
-	}, [l, E]), ge = u(async () => {
-		if (E) {
-			F(!0);
+	}, [C, K]);
+	let Ce = d(() => {
+		u("/workflows");
+	}, [u]), X = d(() => {
+		u(`/workflows/${C}/edit`);
+	}, [u, C]), we = d(async () => {
+		if (C) {
+			I(!0);
 			try {
-				await q(E) ? (a() && s("success"), l("/workflows")) : a() && s("error");
+				await q(C) ? (s() && l("success"), u("/workflows")) : s() && l("error");
 			} catch {
-				a() && s("error");
+				s() && l("error");
 			} finally {
-				F(!1), P(!1);
+				I(!1), F(!1);
 			}
 		}
 	}, [
-		E,
+		C,
 		q,
-		l
-	]), Q = u(async () => {
-		if (!E) return;
-		L(!0), W(null);
+		u
+	]), Z = d(async () => {
+		if (!C) return;
+		R(!0), W(null);
 		let e = Date.now();
 		try {
-			let t = await J(E);
+			let t = await J(C);
 			if (t) {
 				let n = Date.now() - e;
 				t.externalWorkflowId ? (W({
@@ -166,22 +170,22 @@ var w = ({ className: e }) => /* @__PURE__ */ b("svg", {
 					output: {
 						externalWorkflowId: t.externalWorkflowId,
 						executionCount: t.executionCount,
-						status: "Triggered — polling for completion..."
+						status: S("bigconsole.workflows.view.executionTriggeredPolling", "Triggered — polling for completion...")
 					},
 					error: null,
 					executionTimeMs: n
-				}), Y(E, {
+				}), Y(C, {
 					intervalMs: 3e3,
 					timeoutMs: 12e4,
 					onProgress: (e) => {
-						M(e);
+						N(e);
 					}
 				}).then((t) => {
-					t && (M(t), W((n) => n && {
+					t && (N(t), W((n) => n && {
 						...n,
 						output: {
 							...n.output || {},
-							status: t.status === "error" ? "Failed" : "Completed",
+							status: t.status === "error" ? S("bigconsole.workflows.view.executionStatusFailed", "Failed") : S("bigconsole.workflows.view.executionStatusCompleted", "Completed"),
 							executionCount: t.executionCount,
 							lastExecutedAt: t.lastExecutedAt
 						},
@@ -192,376 +196,388 @@ var w = ({ className: e }) => /* @__PURE__ */ b("svg", {
 					output: {
 						executionCount: t.executionCount,
 						lastExecutedAt: t.lastExecutedAt,
-						status: "Completed"
+						status: S("bigconsole.workflows.view.executionStatusCompleted", "Completed")
 					},
 					error: null,
 					executionTimeMs: n
 				});
-				let r = await K(E);
-				r && M(r);
+				let r = await K(C);
+				r && N(r);
 			}
 		} catch (t) {
 			W({
 				success: !1,
 				output: null,
-				error: t instanceof Error ? t.message : "Execution failed",
+				error: t instanceof Error ? t.message : S("bigconsole.workflows.errors.executionFailed", "Execution failed"),
 				executionTimeMs: Date.now() - e
 			});
 		} finally {
-			L(!1);
+			R(!1);
 		}
 	}, [
-		E,
+		C,
 		J,
 		K,
-		Y
-	]), _e = u(async () => {
-		if (j?.webhookUrl) try {
-			await o(j.webhookUrl), z(!0), a() && c("Webhook copied"), setTimeout(() => z(!1), 2e3);
+		Y,
+		S
+	]), Te = d(async () => {
+		if (M?.webhookUrl) try {
+			await c(M.webhookUrl), z(!0), s() && ne(S("bigconsole.workflows.view.webhookCopiedToast", "Webhook copied")), setTimeout(() => z(!1), 2e3);
 		} catch {}
-	}, [j?.webhookUrl]), ve = u((e) => {
-		l(`/datasinks/${e}`);
-	}, [l]);
-	if (!me || he && !j || pe) return /* @__PURE__ */ b("div", {
-		className: "p-6 flex items-center justify-center min-h-[400px]",
-		children: /* @__PURE__ */ x("svg", {
-			className: "w-8 h-8 text-action-primary-bg animate-spin",
-			fill: "none",
-			viewBox: "0 0 24 24",
-			children: [/* @__PURE__ */ b("circle", {
-				className: "opacity-25",
-				cx: "12",
-				cy: "12",
-				r: "10",
-				stroke: "currentColor",
-				strokeWidth: "4"
-			}), /* @__PURE__ */ b("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"
-			})]
-		})
+	}, [M?.webhookUrl, S]), Ee = d((e) => {
+		u(`/datasinks/${e}`);
+	}, [u]), Q = /* @__PURE__ */ b("button", {
+		type: "button",
+		onClick: Ce,
+		className: `inline-flex min-h-[var(--size-controlHeight-md)] items-center gap-1 rounded-button text-sm text-text-secondary motion-safe:transition-colors hover:text-text-primary ${t}`,
+		children: [/* @__PURE__ */ y(fe, { className: "w-4 h-4" }), S("bigconsole.workflows.view.backToWorkflows", "Back to Workflows")]
 	});
-	if (!O) return /* @__PURE__ */ b(f, {
-		title: "Access Denied",
-		description: "You don't have permission to view this workflow."
+	if (!xe || Se && !M || O) return /* @__PURE__ */ y("div", {
+		className: "mx-auto flex min-h-[400px] max-w-5xl items-center justify-center p-4 sm:p-[var(--space-pagePadding)]",
+		children: /* @__PURE__ */ y(ue, { size: "lg" })
 	});
-	if (G || !j) return /* @__PURE__ */ x("div", {
-		className: "p-6",
-		children: [/* @__PURE__ */ x("button", {
-			type: "button",
-			onClick: X,
-			className: "inline-flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary mb-4",
-			children: [/* @__PURE__ */ b(w, { className: "w-4 h-4" }), "Back to Workflows"]
-		}), /* @__PURE__ */ b(g, {
-			illustration: "empty-data",
-			title: "Workflow not found",
-			description: G?.message || "The workflow you are looking for does not exist."
-		})]
+	if (!k) return /* @__PURE__ */ y(m, {
+		title: S("bigconsole.workflows.errors.accessDeniedTitle", "Access Denied"),
+		description: S("bigconsole.workflows.errors.accessDeniedViewDescription", "You don't have permission to view this workflow.")
 	});
-	let $ = j.dataSinkLinks?.length || 0, ye = [
-		...A ? [{
+	if (G || !M) return /* @__PURE__ */ y("div", {
+		className: "mx-auto max-w-5xl p-4 sm:p-[var(--space-pagePadding)]",
+		children: /* @__PURE__ */ b(i, { children: [/* @__PURE__ */ y("div", { children: Q }), /* @__PURE__ */ y("section", {
+			"aria-label": "Workflow not found",
+			"data-section-emphasis": "standard",
+			"data-testid": "workflow-not-found",
+			className: n("standard"),
+			children: /* @__PURE__ */ y(_, {
+				illustration: "empty-data",
+				title: S("bigconsole.workflows.view.notFoundTitle", "Workflow not found"),
+				description: G?.message || S("bigconsole.workflows.view.notFoundDescription", "The workflow you are looking for does not exist.")
+			})
+		})] })
+	});
+	let $ = M.dataSinkLinks?.length || 0, De = !!M.externalWorkflowId, Oe = [
+		...j ? [{
 			id: "execute",
-			label: "Run the workflow",
-			description: "Trigger an execution to pull fresh data now.",
-			onClick: Q
+			label: S("bigconsole.workflows.view.nextStepExecuteLabel", "Run the workflow"),
+			description: S("bigconsole.workflows.view.nextStepExecuteDescription", "Trigger an execution to pull fresh data now."),
+			onClick: Z
 		}] : [],
 		{
 			id: "design",
-			label: "Inspect the design",
-			description: "Expand the read-only preview to see each step.",
+			label: S("bigconsole.workflows.view.nextStepDesignLabel", "Inspect the design"),
+			description: S("bigconsole.workflows.view.nextStepDesignDescription", "Expand the read-only preview to see each step."),
 			onClick: () => V(!0)
 		},
-		...k ? [{
+		...A ? [{
 			id: "edit",
-			label: "Edit in the builder",
-			description: "Open the FluidGrids visual builder to change the flow.",
-			onClick: Z
+			label: S("bigconsole.workflows.view.nextStepEditLabel", "Edit in the builder"),
+			description: S("bigconsole.workflows.view.nextStepEditDescription", "Open the FluidGrids visual builder to change the flow."),
+			onClick: X
 		}] : [],
 		{
 			id: "sinks",
-			label: "Check the linked data sinks",
-			description: "See where this workflow writes its output.",
-			onClick: () => l("/datasinks")
+			label: S("bigconsole.workflows.view.nextStepSinksLabel", "Check the linked data sinks"),
+			description: S("bigconsole.workflows.view.nextStepSinksDescription", "See where this workflow writes its output."),
+			onClick: () => u("/datasinks")
 		}
 	];
-	return /* @__PURE__ */ x("div", {
-		className: "p-6 max-w-5xl mx-auto",
-		children: [
-			/* @__PURE__ */ x("div", {
-				className: "mb-8",
-				children: [/* @__PURE__ */ x("button", {
-					type: "button",
-					onClick: X,
-					className: "inline-flex items-center gap-1 text-sm text-text-secondary hover:text-text-primary mb-4",
-					children: [/* @__PURE__ */ b(w, { className: "w-4 h-4" }), "Back to Workflows"]
-				}), /* @__PURE__ */ x("div", {
-					className: "flex items-start justify-between",
-					children: [/* @__PURE__ */ x("div", { children: [
-						/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-3 mb-2",
-							children: [/* @__PURE__ */ b("h1", {
-								className: "text-2xl font-bold text-text-primary",
-								children: j.name
-							}), /* @__PURE__ */ b(ee, { status: j.status })]
-						}),
-						/* @__PURE__ */ b("p", {
-							className: "text-sm text-text-secondary font-mono",
-							children: j.key
-						}),
-						j.externalWorkflowId && /* @__PURE__ */ x("p", {
-							className: "text-xs text-text-tertiary mt-1",
-							children: ["FluidGrids ID: ", /* @__PURE__ */ b("span", {
-								className: "font-mono",
-								children: j.externalWorkflowId
-							})]
-						})
-					] }), /* @__PURE__ */ x("div", {
-						className: "flex items-center gap-2",
+	return /* @__PURE__ */ b("div", {
+		className: "mx-auto max-w-5xl p-4 sm:p-[var(--space-pagePadding)]",
+		children: [/* @__PURE__ */ b(i, { children: [
+			/* @__PURE__ */ b("header", {
+				"data-section-emphasis": "bare",
+				className: "min-w-0",
+				children: [/* @__PURE__ */ y("div", {
+					className: "mb-form-gap",
+					children: Q
+				}), /* @__PURE__ */ b("div", {
+					className: "flex flex-col gap-form-gap md:flex-row md:items-start md:justify-between",
+					children: [/* @__PURE__ */ b("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ b("div", {
+								className: "flex flex-wrap items-center gap-icon-gap",
+								children: [/* @__PURE__ */ y("h1", {
+									className: "break-words text-2xl font-bold text-text-primary",
+									children: M.name
+								}), /* @__PURE__ */ y(re, { status: M.status })]
+							}),
+							/* @__PURE__ */ y("p", {
+								className: "mt-1 break-all font-mono text-sm text-text-secondary",
+								children: M.key
+							}),
+							M.externalWorkflowId && /* @__PURE__ */ b("p", {
+								className: "mt-1 text-xs text-text-muted",
+								children: [
+									S("bigconsole.workflows.view.fluidGridsIdLabel", "FluidGrids ID:"),
+									" ",
+									/* @__PURE__ */ y("span", {
+										className: "break-all font-mono",
+										children: M.externalWorkflowId
+									})
+								]
+							})
+						]
+					}), /* @__PURE__ */ b("div", {
+						className: "flex flex-wrap items-center gap-control-gap",
 						children: [
-							/* @__PURE__ */ b(p, {
-								permission: i.WORKFLOW_EXECUTE,
+							/* @__PURE__ */ y(h, {
+								permission: o.WORKFLOW_EXECUTE,
 								deniedBehavior: "disable",
-								children: /* @__PURE__ */ x("button", {
-									type: "button",
-									onClick: Q,
-									disabled: I,
-									className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-status-success-bg hover:bg-status-success-bg/90 rounded-md transition-colors disabled:opacity-50",
-									children: [/* @__PURE__ */ b(ae, { className: "w-4 h-4" }), I ? "Executing..." : "Execute"]
+								children: /* @__PURE__ */ b(g, {
+									size: "lg",
+									onClick: Z,
+									disabled: L,
+									children: [/* @__PURE__ */ y(he, { className: "w-4 h-4" }), L ? S("bigconsole.workflows.actions.executing", "Executing...") : S("bigconsole.workflows.actions.execute", "Execute")]
 								})
 							}),
-							/* @__PURE__ */ b(p, {
-								permission: i.WORKFLOW_UPDATE,
+							/* @__PURE__ */ y(h, {
+								permission: o.WORKFLOW_UPDATE,
 								deniedBehavior: "disable",
-								children: /* @__PURE__ */ x("button", {
-									type: "button",
-									onClick: Z,
-									className: "inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-text-primary bg-bg-sunken hover:bg-border-default rounded-md transition-colors",
-									children: [/* @__PURE__ */ b(T, { className: "w-4 h-4" }), "Edit"]
+								children: /* @__PURE__ */ b(g, {
+									size: "lg",
+									variant: "outline",
+									onClick: X,
+									children: [/* @__PURE__ */ y(pe, { className: "w-4 h-4" }), S("bigconsole.workflows.actions.edit", "Edit")]
 								})
 							}),
-							/* @__PURE__ */ b(p, {
-								permission: i.WORKFLOW_DELETE,
+							/* @__PURE__ */ y(h, {
+								permission: o.WORKFLOW_DELETE,
 								deniedBehavior: "hide",
-								children: /* @__PURE__ */ x("button", {
-									type: "button",
-									onClick: () => P(!0),
-									className: "inline-flex items-center gap-2 px-4 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__ */ b(ie, { className: "w-4 h-4" }), "Delete"]
+								children: /* @__PURE__ */ b(g, {
+									size: "lg",
+									variant: "ghost",
+									onClick: () => F(!0),
+									className: "text-[var(--color-status-error-text)] hover:bg-status-error-bg/10 hover:text-[var(--color-status-error-text)]",
+									children: [/* @__PURE__ */ y(me, { className: "w-4 h-4" }), S("bigconsole.workflows.actions.delete", "Delete")]
 								})
 							})
 						]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ b(v, {
-				className: "mb-6",
-				children: "A workflow is the visual ETL job that feeds this BigConsole — it fetches, transforms, and delivers data into linked data sinks. From here you can run it on demand, inspect its design and execution history, copy its webhook trigger, and edit it in the visual builder."
-			}),
-			/* @__PURE__ */ b(_, {
+			/* @__PURE__ */ y(le, { children: S("bigconsole.workflows.view.purpose", "A workflow is the visual ETL job that feeds this BigConsole — it fetches, transforms, and delivers data into linked data sinks. From here you can run it on demand, inspect its design and execution history, copy its webhook trigger, and edit it in the visual builder.") }),
+			/* @__PURE__ */ y(ce, {
 				storageKey: "bigconsole-workflow-view",
-				steps: ye
+				steps: Oe
 			}),
-			U && /* @__PURE__ */ x("div", {
-				className: `mb-6 p-4 rounded-lg border ${U.success ? "bg-status-success-bg/10 border-status-success-border/20" : "bg-status-error-bg/10 border-status-error-border/20"}`,
-				children: [
-					/* @__PURE__ */ x("div", {
-						className: "flex items-center justify-between mb-2",
-						children: [/* @__PURE__ */ b("h3", {
-							className: "text-sm font-semibold text-text-primary",
-							children: U.success ? "Execution Triggered" : "Execution Failed"
-						}), /* @__PURE__ */ x("span", {
-							className: "text-xs text-text-secondary",
-							children: [U.executionTimeMs, "ms"]
-						})]
-					}),
-					U.error ? /* @__PURE__ */ b("p", {
-						className: "text-sm text-status-error-text",
-						children: U.error
-					}) : /* @__PURE__ */ b("pre", {
-						className: "text-xs text-text-secondary font-mono bg-bg-sunken p-2 rounded overflow-auto max-h-[200px]",
-						children: JSON.stringify(U.output, null, 2)
-					}),
-					U.runId && /* @__PURE__ */ x("p", {
-						className: "text-xs text-text-tertiary mt-2",
-						children: ["Run ID: ", /* @__PURE__ */ b("span", {
-							className: "font-mono",
+			U && /* @__PURE__ */ b(r, {
+				headingLevel: 2,
+				tone: U.success ? "success" : "danger",
+				title: U.success ? S("bigconsole.workflows.view.executionResultTriggered", "Execution Triggered") : S("bigconsole.workflows.view.executionResultFailed", "Execution Failed"),
+				description: U.success ? "The run was accepted. Results refresh below as the run progresses." : "The run could not be started. The detail below comes straight from the workflow service.",
+				meta: /* @__PURE__ */ b("span", {
+					className: "rounded-pill bg-bg-sunken px-2 py-0.5 text-xs font-medium text-text-secondary",
+					children: [U.executionTimeMs, "ms"]
+				}),
+				"data-testid": "workflow-execution-result",
+				children: [U.error ? /* @__PURE__ */ y("p", {
+					className: "break-words text-sm text-[var(--color-status-error-text)]",
+					children: U.error
+				}) : /* @__PURE__ */ y("pre", {
+					className: "max-h-[200px] min-w-0 overflow-auto rounded-card bg-bg-sunken p-2 font-mono text-xs text-text-secondary",
+					children: JSON.stringify(U.output, null, 2)
+				}), U.runId && /* @__PURE__ */ b("p", {
+					className: "mt-2 text-xs text-text-muted",
+					children: [
+						S("bigconsole.workflows.view.runIdLabel", "Run ID:"),
+						" ",
+						/* @__PURE__ */ y("span", {
+							className: "break-all font-mono",
 							children: U.runId
-						})]
-					})
-				]
-			}),
-			/* @__PURE__ */ x("div", {
-				className: "grid grid-cols-1 md:grid-cols-2 gap-6 mb-8",
-				children: [/* @__PURE__ */ x("div", {
-					className: "bg-bg-surface border border-border-default rounded-lg p-4",
-					children: [/* @__PURE__ */ b("h3", {
-						className: "text-sm font-medium text-text-secondary mb-2",
-						children: "Description"
-					}), /* @__PURE__ */ b("p", {
-						className: "text-sm text-text-primary",
-						children: j.description || "No description"
-					})]
-				}), /* @__PURE__ */ x(h, {
-					treatment: "glass",
-					glow: !0,
-					className: "p-4",
-					children: [/* @__PURE__ */ b("h3", {
-						className: "text-sm font-medium text-text-secondary mb-2",
-						children: "Execution Stats"
-					}), /* @__PURE__ */ x("div", {
-						className: "grid grid-cols-2 gap-4",
-						children: [/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-							className: "text-2xl font-bold text-text-primary",
-							children: j.executionCount
-						}), /* @__PURE__ */ b("p", {
-							className: "text-xs text-text-secondary",
-							children: "Total Executions"
-						})] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-							className: "text-sm font-medium text-text-primary",
-							children: j.lastExecutedAt ? C(new Date(j.lastExecutedAt), { addSuffix: !0 }) : "Never"
-						}), /* @__PURE__ */ b("p", {
-							className: "text-xs text-text-secondary",
-							children: "Last Executed"
-						})] })]
-					})]
+						})
+					]
 				})]
 			}),
-			j.webhookUrl && /* @__PURE__ */ x("div", {
-				className: "bg-bg-surface border border-border-default rounded-lg p-4 mb-8",
-				children: [/* @__PURE__ */ b("h3", {
-					className: "text-sm font-medium text-text-secondary mb-2",
-					children: "Webhook URL"
-				}), /* @__PURE__ */ x("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ b("code", {
-						className: "flex-1 text-sm text-text-primary font-mono bg-bg-sunken px-3 py-2 rounded overflow-auto",
-						children: j.webhookUrl
-					}), /* @__PURE__ */ b("button", {
-						type: "button",
-						onClick: _e,
-						className: "flex items-center gap-1 px-3 py-2 text-sm text-text-secondary hover:text-text-primary transition-colors",
-						children: R ? /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(se, { className: "w-4 h-4 text-status-success-text" }), "Copied!"] }) : /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b(oe, { className: "w-4 h-4" }), "Copy"] })
-					})]
+			/* @__PURE__ */ b("div", {
+				className: "grid grid-cols-1 gap-section-gap md:grid-cols-2",
+				children: [/* @__PURE__ */ y(r, {
+					headingLevel: 2,
+					emphasis: "muted",
+					title: S("bigconsole.workflows.view.descriptionLabel", "Description"),
+					description: "What this workflow is for, as entered by its author.",
+					children: /* @__PURE__ */ y("p", {
+						className: "break-words text-sm text-text-primary",
+						children: M.description || S("bigconsole.workflows.view.noDescription", "No description")
+					})
+				}), /* @__PURE__ */ y(r, {
+					headingLevel: 2,
+					emphasis: De ? "standard" : "primary",
+					title: S("bigconsole.workflows.view.executionStatsLabel", "Execution Stats"),
+					description: "How often this workflow has run, and when it last did.",
+					"data-testid": "workflow-execution-stats",
+					children: /* @__PURE__ */ b("div", {
+						className: "grid grid-cols-1 gap-form-gap sm:grid-cols-2",
+						children: [/* @__PURE__ */ b("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-2xl font-bold text-text-primary",
+								children: M.executionCount
+							}), /* @__PURE__ */ y("p", {
+								className: "text-xs text-text-secondary",
+								children: S("bigconsole.workflows.view.totalExecutionsLabel", "Total Executions")
+							})]
+						}), /* @__PURE__ */ b("div", {
+							className: "min-w-0",
+							children: [/* @__PURE__ */ y("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: M.lastExecutedAt ? x(new Date(M.lastExecutedAt), { addSuffix: !0 }) : S("bigconsole.workflows.view.never", "Never")
+							}), /* @__PURE__ */ y("p", {
+								className: "text-xs text-text-secondary",
+								children: S("bigconsole.workflows.view.lastExecutedLabel", "Last Executed")
+							})]
+						})]
+					})
 				})]
 			}),
-			j.externalWorkflowId && /* @__PURE__ */ x("div", {
-				className: "bg-bg-surface border border-border-default rounded-lg mb-8 overflow-hidden",
-				children: [/* @__PURE__ */ x("button", {
-					type: "button",
+			M.externalWorkflowId && /* @__PURE__ */ y(r, {
+				headingLevel: 2,
+				emphasis: "primary",
+				title: S("bigconsole.workflows.view.designPreviewTitle", "Workflow Design Preview"),
+				description: "The steps this workflow runs, read-only. Open the builder to change them.",
+				actions: /* @__PURE__ */ b(g, {
+					variant: "outline",
+					size: "sm",
+					"aria-expanded": B,
+					"aria-controls": "workflow-design-canvas",
 					onClick: () => V((e) => !e),
-					className: "w-full flex items-center justify-between px-4 py-3 text-sm font-medium text-text-primary hover:bg-bg-sunken transition-colors",
-					children: [/* @__PURE__ */ b("span", { children: "Workflow Design Preview" }), /* @__PURE__ */ b(le, { className: `w-4 h-4 text-text-secondary transition-transform ${B ? "rotate-180" : ""}` })]
-				}), B && /* @__PURE__ */ b("div", {
-					className: "border-t border-border-default",
-					style: { height: "450px" },
-					children: /* @__PURE__ */ b(S, {
-						apiGatewayUrl: ue,
-						workspaceId: fe || "default",
-						authToken: de,
-						workflowId: j.externalWorkflowId,
+					children: [B ? "Hide design" : "Show design", /* @__PURE__ */ y(ye, { className: `w-4 h-4 motion-safe:transition-transform ${B ? "rotate-180" : ""}` })]
+				}),
+				"data-testid": "workflow-design-preview",
+				children: B ? /* @__PURE__ */ y("div", {
+					id: "workflow-design-canvas",
+					className: "h-[320px] min-w-0 overflow-hidden rounded-card border border-[var(--color-border-subtle)] sm:h-[420px] lg:h-[450px]",
+					children: /* @__PURE__ */ y(de, {
+						apiGatewayUrl: w,
+						workspaceId: E || "default",
+						authToken: T,
+						workflowId: M.externalWorkflowId,
 						readonly: !0,
 						hideHeader: !0,
 						className: "h-full"
 					})
-				})]
+				}) : /* @__PURE__ */ y("p", {
+					id: "workflow-design-canvas",
+					className: "text-sm text-text-secondary",
+					children: "The canvas is collapsed. Show the design to see every step, its order and its connections."
+				})
 			}),
-			/* @__PURE__ */ x("div", {
-				className: "bg-bg-surface border border-border-default rounded-lg p-4 mb-8",
-				children: [/* @__PURE__ */ x("h3", {
-					className: "text-sm font-medium text-text-secondary mb-4",
-					children: [
-						"Linked DataSinks (",
-						$,
-						")"
-					]
-				}), $ === 0 ? /* @__PURE__ */ b(g, {
+			M.webhookUrl && /* @__PURE__ */ y(r, {
+				headingLevel: 2,
+				emphasis: "muted",
+				title: S("bigconsole.workflows.view.webhookUrlLabel", "Webhook URL"),
+				description: "POST to this URL to run the workflow from an external system.",
+				actions: /* @__PURE__ */ y(g, {
+					variant: "ghost",
+					size: "sm",
+					onClick: Te,
+					children: be ? /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(_e, { className: "w-4 h-4 text-status-success-text" }), S("bigconsole.workflows.actions.copied", "Copied!")] }) : /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ y(ge, { className: "w-4 h-4" }), S("bigconsole.workflows.actions.copy", "Copy")] })
+				}),
+				children: /* @__PURE__ */ y("code", {
+					className: "block min-w-0 overflow-x-auto break-all rounded-card bg-bg-sunken px-3 py-2 font-mono text-sm text-text-primary",
+					children: M.webhookUrl
+				})
+			}),
+			/* @__PURE__ */ y(r, {
+				headingLevel: 2,
+				title: S("bigconsole.workflows.view.linkedDataSinksTitle", "Linked DataSinks ({{count}})", { count: $ }),
+				description: "Where this workflow writes the data it produces.",
+				"data-testid": "workflow-linked-datasinks",
+				children: $ === 0 ? /* @__PURE__ */ y(_, {
 					illustration: "empty-generic",
-					title: "No data sinks linked",
-					description: "This workflow has no data sinks linked yet — its output isn't being stored."
-				}) : /* @__PURE__ */ b("div", {
-					className: "space-y-2",
-					children: j.dataSinkLinks?.map((e) => /* @__PURE__ */ x("div", {
-						className: "flex items-center justify-between px-3 py-2 bg-bg-sunken rounded-md",
-						children: [/* @__PURE__ */ x("div", {
-							className: "flex items-center gap-3",
-							children: [/* @__PURE__ */ b(ce, { className: "w-4 h-4 text-text-secondary" }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm font-medium text-text-primary",
-								children: e.dataSink?.name || e.dataSink?.key || e.dataSinkId
-							}), e.dataSink?.key && /* @__PURE__ */ b("p", {
-								className: "text-xs text-text-secondary font-mono",
-								children: e.dataSink.key
-							})] })]
-						}), /* @__PURE__ */ x("div", {
-							className: "flex items-center gap-4",
-							children: [/* @__PURE__ */ x("div", {
-								className: "flex items-center gap-2",
-								children: [e.isEnabled ? /* @__PURE__ */ b("span", {
-									className: "text-xs text-status-success-text",
-									children: "Enabled"
-								}) : /* @__PURE__ */ b("span", {
-									className: "text-xs text-text-secondary",
-									children: "Disabled"
-								}), /* @__PURE__ */ x("span", {
-									className: "text-xs text-text-secondary",
-									children: ["Priority: ", e.priority]
+					title: S("bigconsole.workflows.view.noDataSinksTitle", "No data sinks linked"),
+					description: S("bigconsole.workflows.view.noDataSinksDescription", "This workflow has no data sinks linked yet — its output isn't being stored.")
+				}) : /* @__PURE__ */ y("ul", {
+					className: "flex flex-col gap-list-gap",
+					children: M.dataSinkLinks?.map((e) => /* @__PURE__ */ b("li", {
+						className: "flex flex-col gap-control-gap rounded-card bg-bg-sunken px-3 py-2 sm:flex-row sm:items-center sm:justify-between",
+						children: [/* @__PURE__ */ b("div", {
+							className: "flex min-w-0 items-center gap-icon-gap",
+							children: [/* @__PURE__ */ y(ve, { className: "w-4 h-4 shrink-0 text-text-secondary" }), /* @__PURE__ */ b("div", {
+								className: "min-w-0",
+								children: [/* @__PURE__ */ y("p", {
+									className: "truncate text-sm font-medium text-text-primary",
+									children: e.dataSink?.name || e.dataSink?.key || e.dataSinkId
+								}), e.dataSink?.key && /* @__PURE__ */ y("p", {
+									className: "truncate font-mono text-xs text-text-secondary",
+									children: e.dataSink.key
 								})]
-							}), e.dataSink && /* @__PURE__ */ b("button", {
-								type: "button",
-								onClick: () => ve(e.dataSinkId),
-								className: "text-xs text-action-primary-bg hover:underline",
-								children: "View"
 							})]
+						}), /* @__PURE__ */ b("div", {
+							className: "flex flex-wrap items-center gap-control-gap",
+							children: [
+								e.isEnabled ? /* @__PURE__ */ y("span", {
+									className: "rounded-pill bg-[var(--color-status-success-bgSubtle)] px-2 py-0.5 text-xs font-medium text-status-success-text",
+									children: S("bigconsole.workflows.view.dataSinkEnabled", "Enabled")
+								}) : /* @__PURE__ */ y("span", {
+									className: "rounded-pill bg-bg-surface px-2 py-0.5 text-xs font-medium text-text-secondary",
+									children: S("bigconsole.workflows.view.dataSinkDisabled", "Disabled")
+								}),
+								/* @__PURE__ */ y("span", {
+									className: "text-xs text-text-muted",
+									children: S("bigconsole.workflows.view.dataSinkPriority", "Priority: {{priority}}", { priority: e.priority })
+								}),
+								e.dataSink && /* @__PURE__ */ y("button", {
+									type: "button",
+									onClick: () => Ee(e.dataSinkId),
+									className: "inline-flex min-h-[var(--size-controlHeight-md)] items-center rounded-button px-2 text-xs font-medium text-text-link hover:underline sm:min-h-[var(--size-controlHeight-sm)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface",
+									children: S("bigconsole.workflows.actions.view", "View")
+								})
+							]
 						})]
 					}, e.id))
-				})]
+				})
 			}),
-			/* @__PURE__ */ x("div", {
-				className: "grid grid-cols-1 md:grid-cols-2 gap-6",
-				children: [/* @__PURE__ */ x("div", {
-					className: "bg-bg-surface border border-border-default rounded-lg p-4",
-					children: [
-						/* @__PURE__ */ b("h3", {
-							className: "text-sm font-medium text-text-secondary mb-2",
-							children: "Created"
-						}),
-						/* @__PURE__ */ b("p", {
-							className: "text-sm text-text-primary",
-							children: C(new Date(j.createdAt), { addSuffix: !0 })
-						}),
-						/* @__PURE__ */ x("p", {
-							className: "text-xs text-text-secondary",
-							children: ["by ", j.createdBy]
-						})
-					]
-				}), /* @__PURE__ */ x("div", {
-					className: "bg-bg-surface border border-border-default rounded-lg p-4",
-					children: [
-						/* @__PURE__ */ b("h3", {
-							className: "text-sm font-medium text-text-secondary mb-2",
-							children: "Last Updated"
-						}),
-						/* @__PURE__ */ b("p", {
-							className: "text-sm text-text-primary",
-							children: C(new Date(j.updatedAt), { addSuffix: !0 })
-						}),
-						/* @__PURE__ */ x("p", {
-							className: "text-xs text-text-secondary",
-							children: ["by ", j.updatedBy || j.createdBy]
-						})
-					]
-				})]
-			}),
-			j && /* @__PURE__ */ b(te, {
-				workflow: j,
-				isOpen: N,
-				onClose: () => P(!1),
-				onConfirm: ge
+			/* @__PURE__ */ y(r, {
+				headingLevel: 2,
+				emphasis: "muted",
+				title: "Record history",
+				padding: "compact",
+				children: /* @__PURE__ */ b("dl", {
+					className: "grid grid-cols-1 gap-form-gap sm:grid-cols-2",
+					children: [/* @__PURE__ */ b("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ y("dt", {
+								className: "text-xs text-text-secondary",
+								children: S("bigconsole.workflows.view.createdLabel", "Created")
+							}),
+							/* @__PURE__ */ y("dd", {
+								className: "text-sm text-text-primary",
+								children: x(new Date(M.createdAt), { addSuffix: !0 })
+							}),
+							/* @__PURE__ */ y("dd", {
+								className: "truncate text-xs text-text-muted",
+								children: S("bigconsole.workflows.view.byAuthor", "by {{author}}", { author: M.createdBy })
+							})
+						]
+					}), /* @__PURE__ */ b("div", {
+						className: "min-w-0",
+						children: [
+							/* @__PURE__ */ y("dt", {
+								className: "text-xs text-text-secondary",
+								children: S("bigconsole.workflows.view.lastUpdatedLabel", "Last Updated")
+							}),
+							/* @__PURE__ */ y("dd", {
+								className: "text-sm text-text-primary",
+								children: x(new Date(M.updatedAt), { addSuffix: !0 })
+							}),
+							/* @__PURE__ */ y("dd", {
+								className: "truncate text-xs text-text-muted",
+								children: S("bigconsole.workflows.view.byAuthor", "by {{author}}", { author: M.updatedBy || M.createdBy })
+							})
+						]
+					})]
+				})
 			})
-		]
+		] }), M && /* @__PURE__ */ y(ie, {
+			workflow: M,
+			isOpen: P,
+			onClose: () => F(!1),
+			onConfirm: we
+		})]
 	});
 });
 //#endregion
-export { E as WorkflowViewPage };
+export { S as WorkflowViewPage };
 
 //# sourceMappingURL=WorkflowViewPage.js.map