@burdenoff/microfe-subscriberbot 2026.706.1 → 2026.706.3

package/dist/subscriberbot/pages/WorkflowsPage.js

@@ -1,16 +1,18 @@
-import { useSubscriberBot as e } from "../context/SubscriberBotContext.js";
-import { PageLayout as t } from "../components/PageLayout.js";
+import { PageLayout as e } from "../components/PageLayout.js";
+import { MetricsCard as t } from "../components/MetricsCard.js";
 import { formatRelativeTime as n } from "../utils/formatters.js";
 import { StatusBadge as r } from "../components/StatusBadge.js";
 import { EmptyState as i } from "../components/EmptyState.js";
-import { ErrorView as a, LoadingView as o } from "../components/StateViews.js";
-import { useActivateWorkflow as s, useCreateWorkflow as c, useWorkflows as l } from "../hooks/useSubscriberBotApi.js";
-import { useState as u } from "react";
-import { Play as d, Plus as f, Workflow as p, X as m } from "lucide-react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { PagePurpose as _ } from "@burdenoff/fe-libs/ui";
+import { Modal as a } from "../components/Modal.js";
+import { ErrorView as o, LoadingView as s } from "../components/StateViews.js";
+import "../components/index.js";
+import { useActivateWorkflow as c, useCreateWorkflow as l, useWorkflows as u } from "../hooks/useSubscriberBotApi.js";
+import { useState as d } from "react";
+import { ArrowRight as f, CheckCircle2 as p, Clock as m, Play as h, Plus as g, Sparkles as _, Workflow as v, X as y, Zap as b } from "lucide-react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { GlassCard as w, PagePurpose as T } from "@burdenoff/fe-libs/ui";
 //#region src/subscriberbot/pages/WorkflowsPage.tsx
-var v = [
+var E = [
 	{
 		value: "",
 		label: "All statuses"
@@ -31,206 +33,379 @@ var v = [
 		value: "ARCHIVED",
 		label: "Archived"
 	}
-], y = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", b = "mb-1 block text-xs font-medium text-text-secondary";
-function x() {
-	let { navigate: x } = e(), [S, C] = u(""), [w, T] = u(!1), { data: E, isLoading: D, isError: O, refetch: k } = l(S || void 0), A = c(), j = s(), [M, N] = u(""), [P, F] = u(""), [I, L] = u(""), [R, z] = u(null), B = E ?? [], V = () => {
-		N(""), F(""), L(""), z(null);
+], D = "w-full rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]", O = "mb-1 block text-xs font-medium text-text-secondary";
+function k({ icon: e, kicker: t, title: n, sub: r, accent: i }) {
+	return /* @__PURE__ */ C("div", {
+		className: "w-48 shrink-0 overflow-hidden rounded-xl border border-border-subtle bg-bg-surface shadow-sm",
+		children: [/* @__PURE__ */ S("div", {
+			className: `h-1 w-full ${i === "done" ? "bg-status-success-text" : i === "run" ? "bg-status-warning-text" : "bg-[var(--color-accent-indigo)]"}`,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ C("div", {
+			className: "p-3",
+			children: [
+				/* @__PURE__ */ S("span", {
+					className: "flex size-8 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
+					children: e
+				}),
+				/* @__PURE__ */ S("p", {
+					className: "mt-2 text-[10px] font-medium uppercase tracking-wide text-text-secondary",
+					children: t
+				}),
+				/* @__PURE__ */ S("p", {
+					className: "truncate text-sm font-semibold text-text-primary",
+					title: n,
+					children: n
+				}),
+				r && /* @__PURE__ */ S("p", {
+					className: "mt-0.5 truncate text-xs text-text-secondary",
+					children: r
+				})
+			]
+		})]
+	});
+}
+function A({ workflow: e, onClose: t, onActivate: i, activating: a }) {
+	let o = /* @__PURE__ */ C("div", {
+		className: "flex shrink-0 items-center px-1 text-text-secondary",
+		"aria-hidden": !0,
+		children: [/* @__PURE__ */ S("span", { className: "h-px w-4 bg-border-seam sm:w-6" }), /* @__PURE__ */ S(f, { className: "h-4 w-4" })]
+	});
+	return /* @__PURE__ */ C(w, {
+		treatment: "glass",
+		glow: !0,
+		className: "mt-6 p-5",
+		children: [
+			/* @__PURE__ */ C("div", {
+				className: "flex flex-wrap items-start justify-between gap-3",
+				children: [/* @__PURE__ */ C("div", {
+					className: "min-w-0",
+					children: [/* @__PURE__ */ C("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ S("p", {
+							className: "text-base font-semibold text-text-primary",
+							children: e.name
+						}), /* @__PURE__ */ S(r, { status: e.status })]
+					}), /* @__PURE__ */ C("p", {
+						className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-text-secondary",
+						children: [/* @__PURE__ */ C("span", {
+							className: "tabular-nums",
+							children: [
+								"Ran ",
+								e.runCount,
+								"×"
+							]
+						}), e.lastRunAt && /* @__PURE__ */ C("span", {
+							className: "inline-flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ S(m, {
+									className: "h-3 w-3",
+									"aria-hidden": !0
+								}),
+								" last",
+								" ",
+								n(e.lastRunAt)
+							]
+						})]
+					})]
+				}), /* @__PURE__ */ S("button", {
+					type: "button",
+					onClick: t,
+					"aria-label": "Close flow",
+					className: "rounded-lg border border-border-subtle p-1.5 text-text-secondary hover:bg-bg-sunken hover:text-text-primary",
+					children: /* @__PURE__ */ S(y, { className: "h-4 w-4" })
+				})]
+			}),
+			e.description && /* @__PURE__ */ S("p", {
+				className: "mt-2 max-w-3xl text-sm text-text-secondary",
+				children: e.description
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "mt-4 overflow-x-auto pb-2",
+				children: /* @__PURE__ */ C("div", {
+					className: "flex min-w-max items-stretch",
+					children: [
+						/* @__PURE__ */ S(k, {
+							accent: "trigger",
+							kicker: "When",
+							icon: /* @__PURE__ */ S(b, { className: "h-4 w-4" }),
+							title: e.triggerEvent,
+							sub: "Trigger event"
+						}),
+						o,
+						/* @__PURE__ */ S(k, {
+							accent: "run",
+							kicker: "Run",
+							icon: /* @__PURE__ */ S(_, { className: "h-4 w-4" }),
+							title: e.name,
+							sub: "Automation"
+						}),
+						o,
+						/* @__PURE__ */ S(k, {
+							accent: "done",
+							kicker: "Then",
+							icon: /* @__PURE__ */ S(p, { className: "h-4 w-4" }),
+							title: e.status === "ACTIVE" ? "Live" : "Awaiting activation",
+							sub: `Status: ${e.status.charAt(0) + e.status.slice(1).toLowerCase()}`
+						})
+					]
+				})
+			}),
+			e.status !== "ACTIVE" && /* @__PURE__ */ S("div", {
+				className: "mt-3 flex justify-end",
+				children: /* @__PURE__ */ C("button", {
+					type: "button",
+					disabled: a,
+					onClick: i,
+					className: "inline-flex items-center gap-1.5 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
+					children: [
+						/* @__PURE__ */ S(h, { className: "h-4 w-4" }),
+						" ",
+						a ? "Activating…" : "Activate workflow"
+					]
+				})
+			})
+		]
+	});
+}
+function j() {
+	let [f, p] = d(""), [m, _] = d(!1), [y, k] = d(null), { data: j, isLoading: M, isError: N, refetch: P } = u(f || void 0), F = l(), I = c(), [L, R] = d(""), [z, B] = d(""), [V, H] = d(""), [U, W] = d(null), G = j ?? [], K = G.find((e) => e.id === y) ?? null, q = G.filter((e) => e.status === "ACTIVE").length, J = G.reduce((e, t) => e + (t.runCount || 0), 0), Y = () => {
+		R(""), B(""), H(""), W(null);
+	}, X = () => {
+		_(!1), Y();
 	};
-	return /* @__PURE__ */ g(t, {
+	return /* @__PURE__ */ C(e, {
 		title: "Workflows",
 		description: "Event-driven automation across your portfolio",
-		actions: /* @__PURE__ */ g("button", {
+		actions: /* @__PURE__ */ C("button", {
 			type: "button",
-			onClick: () => T(!0),
+			onClick: () => _(!0),
 			className: "inline-flex items-center gap-2 rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
-			children: [/* @__PURE__ */ h(f, { className: "h-4 w-4" }), " New workflow"]
+			children: [/* @__PURE__ */ S(g, { className: "h-4 w-4" }), " New workflow"]
 		}),
 		children: [
-			/* @__PURE__ */ h(_, {
+			/* @__PURE__ */ S(T, {
 				className: "mb-4",
 				children: "Workflows react to domain events — a new invoice, a detected renewal, a cancelled relationship — and run multi-step automations. Draft a workflow, then activate it when you're ready."
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ S("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: /* @__PURE__ */ h("select", {
-					value: S,
-					onChange: (e) => C(e.target.value),
+				children: /* @__PURE__ */ S("select", {
+					"aria-label": "Filter by status",
+					value: f,
+					onChange: (e) => p(e.target.value),
 					className: "rounded-lg border border-border-subtle bg-bg-surface px-3 py-2 text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-[var(--color-focus-ring)]",
-					children: v.map((e) => /* @__PURE__ */ h("option", {
+					children: E.map((e) => /* @__PURE__ */ S("option", {
 						value: e.value,
 						children: e.label
 					}, e.value))
 				})
 			}),
-			D ? /* @__PURE__ */ h(o, { label: "Loading workflows…" }) : O ? /* @__PURE__ */ h(a, {
+			M ? /* @__PURE__ */ S(s, { label: "Loading workflows…" }) : N ? /* @__PURE__ */ S(o, {
 				message: "Could not load workflows.",
-				onRetry: () => void k()
-			}) : B.length === 0 ? /* @__PURE__ */ h("div", {
+				onRetry: () => void P()
+			}) : G.length === 0 ? /* @__PURE__ */ S("div", {
 				className: "mt-6",
-				children: /* @__PURE__ */ h(i, {
+				children: /* @__PURE__ */ S(i, {
 					illustration: "empty-data",
-					icon: /* @__PURE__ */ h(p, { className: "h-12 w-12" }),
+					icon: /* @__PURE__ */ S(v, { className: "h-12 w-12" }),
 					title: "No workflows yet",
 					description: "Create your first event-driven workflow to automate your recurring portfolio.",
-					action: /* @__PURE__ */ h("button", {
+					action: /* @__PURE__ */ S("button", {
 						type: "button",
-						onClick: () => T(!0),
+						onClick: () => _(!0),
 						className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90",
 						children: "New workflow"
 					})
 				})
-			}) : /* @__PURE__ */ h("div", {
-				className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
-				children: B.map((e) => /* @__PURE__ */ g("div", {
-					className: "flex flex-col rounded-lg border border-border-subtle bg-bg-surface p-4",
+			}) : /* @__PURE__ */ C(x, { children: [
+				/* @__PURE__ */ C("div", {
+					className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-3",
 					children: [
-						/* @__PURE__ */ g("div", {
-							className: "flex items-start justify-between gap-2",
-							children: [/* @__PURE__ */ h("span", {
-								className: "flex size-9 items-center justify-center rounded-lg bg-[var(--color-accent-soft)] text-text-primary",
-								children: /* @__PURE__ */ h(p, { className: "h-4 w-4" })
-							}), /* @__PURE__ */ h(r, { status: e.status })]
-						}),
-						/* @__PURE__ */ h("p", {
-							className: "mt-3 truncate text-sm font-semibold text-text-primary",
-							children: e.name
+						/* @__PURE__ */ S(t, {
+							icon: /* @__PURE__ */ S(v, { className: "h-5 w-5" }),
+							value: G.length,
+							label: "Workflows"
 						}),
-						/* @__PURE__ */ g("p", {
-							className: "truncate text-xs text-text-secondary",
-							children: ["on ", e.triggerEvent]
-						}),
-						e.description && /* @__PURE__ */ h("p", {
-							className: "mt-2 line-clamp-2 text-xs text-text-secondary",
-							children: e.description
-						}),
-						/* @__PURE__ */ g("p", {
-							className: "mt-2 text-xs text-text-secondary",
-							children: [
-								"Ran ",
-								e.runCount,
-								"×",
-								e.lastRunAt ? ` · last ${n(e.lastRunAt)}` : ""
-							]
+						/* @__PURE__ */ S(t, {
+							icon: /* @__PURE__ */ S(b, { className: "h-5 w-5" }),
+							value: q,
+							label: "Active"
 						}),
-						e.status !== "ACTIVE" && /* @__PURE__ */ g("button", {
-							type: "button",
-							disabled: j.isPending,
-							onClick: () => j.mutate(e.id),
-							className: "mt-3 inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
-							children: [/* @__PURE__ */ h(d, { className: "h-3.5 w-3.5" }), " Activate"]
+						/* @__PURE__ */ S(t, {
+							icon: /* @__PURE__ */ S(h, { className: "h-5 w-5" }),
+							value: J,
+							label: "Total runs"
 						})
 					]
-				}, e.id))
-			}),
-			w && /* @__PURE__ */ h("div", {
-				className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4",
-				children: /* @__PURE__ */ g("div", {
-					className: "w-full max-w-lg rounded-lg border border-border-subtle bg-bg-surface p-5",
-					children: [/* @__PURE__ */ g("div", {
-						className: "mb-4 flex items-center justify-between",
-						children: [/* @__PURE__ */ h("h3", {
-							className: "text-lg font-semibold text-text-primary",
-							children: "New workflow"
-						}), /* @__PURE__ */ h("button", {
-							type: "button",
-							onClick: () => {
-								T(!1), V();
+				}),
+				K && /* @__PURE__ */ S(A, {
+					workflow: K,
+					onClose: () => k(null),
+					onActivate: () => I.mutate(K.id),
+					activating: I.isPending
+				}),
+				/* @__PURE__ */ S("div", {
+					className: "mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3",
+					children: G.map((e) => {
+						let t = e.id === y;
+						return /* @__PURE__ */ C(w, {
+							treatment: "metric",
+							glow: t || e.status === "ACTIVE",
+							role: "button",
+							tabIndex: 0,
+							"aria-pressed": t,
+							"aria-label": `View flow for ${e.name}`,
+							onClick: () => k(t ? null : e.id),
+							onKeyDown: (n) => {
+								(n.key === "Enter" || n.key === " ") && (n.preventDefault(), k(t ? null : e.id));
 							},
-							className: "rounded-md p-1 text-text-secondary hover:text-text-primary",
-							children: /* @__PURE__ */ h(m, { className: "h-5 w-5" })
-						})]
-					}), /* @__PURE__ */ g("form", {
-						onSubmit: (e) => {
-							if (e.preventDefault(), z(null), !M.trim() || !P.trim()) {
-								z("Name and trigger event are required.");
-								return;
-							}
-							let t = {
-								name: M.trim(),
-								triggerEvent: P.trim(),
-								...I.trim() ? { description: I.trim() } : {}
-							};
-							A.mutate(t, {
-								onSuccess: () => {
-									V(), T(!1);
-								},
-								onError: (e) => z(e instanceof Error ? e.message : "Could not create workflow.")
-							});
-						},
-						className: "space-y-4",
-						children: [
-							R && /* @__PURE__ */ h("div", {
-								className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
-								children: R
-							}),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "wf-name",
-								className: b,
-								children: ["Name ", /* @__PURE__ */ h("span", {
-									className: "text-status-error-text",
-									children: "*"
-								})]
-							}), /* @__PURE__ */ h("input", {
-								id: "wf-name",
-								type: "text",
-								value: M,
-								onChange: (e) => N(e.target.value),
-								placeholder: "e.g. Invoice → notify finance",
-								className: y,
-								required: !0
-							})] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ g("label", {
-								htmlFor: "wf-trigger",
-								className: b,
-								children: ["Trigger event ", /* @__PURE__ */ h("span", {
-									className: "text-status-error-text",
-									children: "*"
-								})]
-							}), /* @__PURE__ */ h("input", {
-								id: "wf-trigger",
-								type: "text",
-								value: P,
-								onChange: (e) => F(e.target.value),
-								placeholder: "e.g. InvoiceReceived, RenewalDetected",
-								className: y,
-								required: !0
-							})] }),
-							/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("label", {
-								htmlFor: "wf-desc",
-								className: b,
-								children: "Description"
-							}), /* @__PURE__ */ h("textarea", {
-								id: "wf-desc",
-								value: I,
-								onChange: (e) => L(e.target.value),
-								rows: 3,
-								placeholder: "What should this workflow do when the event fires?",
-								className: y
-							})] }),
-							/* @__PURE__ */ g("div", {
-								className: "flex justify-end gap-3",
-								children: [/* @__PURE__ */ h("button", {
+							className: "flex cursor-pointer flex-col p-5 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus-ring)]",
+							children: [
+								/* @__PURE__ */ C("div", {
+									className: "flex items-start justify-between gap-2",
+									children: [/* @__PURE__ */ S("span", {
+										className: "flex size-10 items-center justify-center rounded-xl bg-[var(--color-accent-soft)] text-text-primary",
+										children: /* @__PURE__ */ S(v, { className: "h-5 w-5" })
+									}), /* @__PURE__ */ S(r, { status: e.status })]
+								}),
+								/* @__PURE__ */ S("p", {
+									className: "mt-3 truncate text-sm font-semibold text-text-primary",
+									children: e.name
+								}),
+								/* @__PURE__ */ C("p", {
+									className: "flex items-center gap-1 truncate text-xs text-text-secondary",
+									children: [
+										/* @__PURE__ */ S(b, {
+											className: "h-3 w-3 shrink-0",
+											"aria-hidden": !0
+										}),
+										" on ",
+										e.triggerEvent
+									]
+								}),
+								e.description && /* @__PURE__ */ S("p", {
+									className: "mt-2 line-clamp-2 min-h-[2rem] text-xs text-text-secondary",
+									children: e.description
+								}),
+								/* @__PURE__ */ C("p", {
+									className: "mt-3 flex items-center gap-1.5 text-xs text-text-secondary tabular-nums",
+									children: [
+										/* @__PURE__ */ S(h, {
+											className: "h-3.5 w-3.5",
+											"aria-hidden": !0
+										}),
+										" Ran ",
+										e.runCount,
+										"×",
+										e.lastRunAt ? ` · last ${n(e.lastRunAt)}` : ""
+									]
+								}),
+								e.status !== "ACTIVE" && /* @__PURE__ */ C("button", {
 									type: "button",
-									onClick: () => {
-										T(!1), V();
+									disabled: I.isPending,
+									onClick: (t) => {
+										t.stopPropagation(), I.mutate(e.id);
 									},
-									className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
-									children: "Cancel"
-								}), /* @__PURE__ */ h("button", {
-									type: "submit",
-									disabled: A.isPending,
-									className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
-									children: A.isPending ? "Creating…" : "Create workflow"
-								})]
-							})
-						]
-					})]
+									className: "mt-4 inline-flex items-center justify-center gap-1.5 rounded-lg border border-border-subtle px-3 py-1.5 text-xs font-medium text-text-primary hover:bg-bg-sunken disabled:opacity-50",
+									children: [/* @__PURE__ */ S(h, { className: "h-3.5 w-3.5" }), " Activate"]
+								})
+							]
+						}, e.id);
+					})
+				})
+			] }),
+			m && /* @__PURE__ */ S(a, {
+				title: "New workflow",
+				onClose: X,
+				children: /* @__PURE__ */ C("form", {
+					onSubmit: (e) => {
+						if (e.preventDefault(), W(null), !L.trim() || !z.trim()) {
+							W("Name and trigger event are required.");
+							return;
+						}
+						let t = {
+							name: L.trim(),
+							triggerEvent: z.trim(),
+							...V.trim() ? { description: V.trim() } : {}
+						};
+						F.mutate(t, {
+							onSuccess: () => {
+								Y(), _(!1);
+							},
+							onError: (e) => W(e instanceof Error ? e.message : "Could not create workflow.")
+						});
+					},
+					className: "space-y-4",
+					children: [
+						U && /* @__PURE__ */ S("div", {
+							className: "rounded-lg border border-status-error-text/30 bg-status-error-bg-subtle px-4 py-2 text-sm text-status-error-text",
+							children: U
+						}),
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("label", {
+							htmlFor: "wf-name",
+							className: O,
+							children: ["Name ", /* @__PURE__ */ S("span", {
+								className: "text-status-error-text",
+								children: "*"
+							})]
+						}), /* @__PURE__ */ S("input", {
+							id: "wf-name",
+							type: "text",
+							value: L,
+							onChange: (e) => R(e.target.value),
+							placeholder: "e.g. Invoice → notify finance",
+							className: D,
+							required: !0
+						})] }),
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ C("label", {
+							htmlFor: "wf-trigger",
+							className: O,
+							children: ["Trigger event ", /* @__PURE__ */ S("span", {
+								className: "text-status-error-text",
+								children: "*"
+							})]
+						}), /* @__PURE__ */ S("input", {
+							id: "wf-trigger",
+							type: "text",
+							value: z,
+							onChange: (e) => B(e.target.value),
+							placeholder: "e.g. InvoiceReceived, RenewalDetected",
+							className: D,
+							required: !0
+						})] }),
+						/* @__PURE__ */ C("div", { children: [/* @__PURE__ */ S("label", {
+							htmlFor: "wf-desc",
+							className: O,
+							children: "Description"
+						}), /* @__PURE__ */ S("textarea", {
+							id: "wf-desc",
+							value: V,
+							onChange: (e) => H(e.target.value),
+							rows: 3,
+							placeholder: "What should this workflow do when the event fires?",
+							className: D
+						})] }),
+						/* @__PURE__ */ C("div", {
+							className: "flex justify-end gap-3",
+							children: [/* @__PURE__ */ S("button", {
+								type: "button",
+								onClick: X,
+								className: "rounded-lg border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken",
+								children: "Cancel"
+							}), /* @__PURE__ */ S("button", {
+								type: "submit",
+								disabled: F.isPending,
+								className: "rounded-lg bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:opacity-90 disabled:opacity-50",
+								children: F.isPending ? "Creating…" : "Create workflow"
+							})]
+						})
+					]
 				})
 			})
 		]
 	});
 }
 //#endregion
-export { x as WorkflowsPage };
+export { j as WorkflowsPage };
 
 //# sourceMappingURL=WorkflowsPage.js.map