@epam/ai-dial-scheduled-tasks 1.1.0-dev.447 → 1.1.0-dev.456

package/index.js

@@ -1,11 +1,11 @@
-import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, MDMessageViewer as n, PanelEmptyState as r, buildCssVars as i, mergeClasses as a, useAvailableHeightCap as o } from "@epam/ai-dial-chat-shared";
-import { ButtonAppearance as s, ButtonDropdown as c, ButtonVariant as l, Calendar as u, CalendarMode as d, CardShell as f, DIAL_ICON_SIZE as p, DIAL_KIT_ICON_STROKE as m, ElementSize as h, FolderPath as g, GhostButton as _, GhostIconButton as v, Highlight as y, Input as b, Label as x, MenuItemMark as S, NeutralButton as C, NumberInput as w, PrimaryButton as T, Search as E, Select as D, Skeleton as O, SkeletonVariant as k, Spinner as A, Switch as j, Textarea as M } from "@epam/ai-dial-ui-kit";
-import { IconAlertTriangle as N, IconArrowLeft as ee, IconCalendarTime as P, IconCircleCheck as F, IconCircleX as te, IconClipboardX as ne, IconPencilMinus as re, IconPlayerPause as I, IconPlus as ie, IconTrashX as ae } from "@tabler/icons-react";
-import { Suspense as L, lazy as oe, useEffect as R, useId as z, useMemo as se, useRef as B } from "react";
-import { Fragment as V, jsx as H, jsxs as U } from "react/jsx-runtime";
-import { BuilderFormContainer as W } from "@epam/ai-dial-builder-form";
-import { LazyMarkdownEditor as G } from "@epam/ai-dial-ui-kit/editors";
-var K = {
+import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as e, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as t, MDMessageViewer as n, PanelEmptyState as r, buildCssVars as i, mergeClasses as a, useAvailableHeightCap as o, useIsMobile as s } from "@epam/ai-dial-chat-shared";
+import { ButtonAppearance as c, ButtonDropdown as l, ButtonVariant as u, Calendar as d, CalendarMode as f, CardShell as p, DIAL_ICON_SIZE as m, DIAL_KIT_ICON_STROKE as h, ElementSize as g, FolderPath as _, GhostButton as v, GhostIconButton as y, Highlight as b, Input as x, Label as S, MenuItemMark as C, NeutralButton as w, NumberInput as T, PrimaryButton as E, Search as D, Select as ee, Skeleton as O, SkeletonVariant as k, Spinner as A, Switch as j, Tabs as te, Textarea as ne } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as M, IconArrowLeft as re, IconCalendarTime as ie, IconCircleCheck as ae, IconCircleX as oe, IconClipboardX as se, IconPencilMinus as ce, IconPlayerPause as N, IconPlus as le, IconTrashX as ue } from "@tabler/icons-react";
+import { Suspense as de, lazy as P, useCallback as F, useEffect as fe, useId as I, useLayoutEffect as pe, useMemo as L, useRef as me, useState as he } from "react";
+import { Fragment as R, jsx as z, jsxs as B } from "react/jsx-runtime";
+import { BuilderFormContainer as ge } from "@epam/ai-dial-builder-form";
+import { LazyMarkdownEditor as V } from "@epam/ai-dial-ui-kit/editors";
+var H = {
 	title: "_title_1hxc3_1",
 	description: "_description_1hxc3_5",
 	schedulePill: "_schedulePill_1hxc3_9",
@@ -16,8 +16,8 @@ var K = {
 	pausedPill: "_pausedPill_1hxc3_31",
 	pausedLabel: "_pausedLabel_1hxc3_36",
 	locationDivider: "_locationDivider_1hxc3_40"
-}, ce = ({ item: e, searchQuery: t = "", onCardClick: n, labels: r, styles: o, className: s }) => {
-	let c = r?.newBadgeLabel ?? "NEW", l = r?.pausedBadgeLabel ?? "Paused", { colors: u, typography: d } = o ?? {}, h = d?.titleClassName ?? "dial-body-semi-text", _ = d?.descriptionClassName ?? "dial-small-text", v = d?.descriptionSizeClassName ?? "dial-tiny-text", b = d?.scheduleLabelClassName ?? "dial-tiny-text", x = d?.locationLabelClassName ?? "dial-tiny-text", S = d?.locationLeafClassName ?? "dial-tiny-semi-text", C = d?.newBadgeClassName ?? "dial-tiny-semi-text", w = d?.pausedBadgeClassName ?? "dial-tiny-text", T = i({
+}, U = ({ item: e, searchQuery: t = "", onCardClick: n, labels: r, styles: o, className: s }) => {
+	let c = r?.newBadgeLabel ?? "NEW", l = r?.pausedBadgeLabel ?? "Paused", { colors: u, typography: d } = o ?? {}, f = d?.titleClassName ?? "dial-body-semi-text", g = d?.descriptionClassName ?? "dial-small-text", v = d?.descriptionSizeClassName ?? "dial-tiny-text", y = d?.scheduleLabelClassName ?? "dial-tiny-text", x = d?.locationLabelClassName ?? "dial-tiny-text", S = d?.locationLeafClassName ?? "dial-tiny-semi-text", C = d?.newBadgeClassName ?? "dial-tiny-semi-text", w = d?.pausedBadgeClassName ?? "dial-tiny-text", T = i({
 		"--stc-title-text": u?.titleText,
 		"--stc-desc-text": u?.descriptionText,
 		"--stc-pill-bg": u?.schedulePillBackground,
@@ -38,130 +38,141 @@ var K = {
 			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.id));
 		}
 	} : {};
-	return /* @__PURE__ */ U(f, {
+	return /* @__PURE__ */ B(p, {
 		role: n ? "button" : "group",
 		"aria-label": e.displayName,
 		style: T,
 		className: a("h-[232px]", n && "cursor-pointer", s),
 		...E,
 		children: [
-			/* @__PURE__ */ U("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex min-w-0 shrink-0 items-center gap-2",
-				children: [/* @__PURE__ */ H(y, {
+				children: [/* @__PURE__ */ z(b, {
 					text: e.displayName,
 					query: t,
 					maxLines: 1,
-					className: a(h, K.title)
-				}), e.isNew && /* @__PURE__ */ H("span", {
-					className: a("shrink-0 rounded-full px-2 py-0.5", C, K.newBadge),
+					className: a(f, H.title)
+				}), e.isNew && /* @__PURE__ */ z("span", {
+					className: a("shrink-0 rounded-full px-2 py-0.5", C, H.newBadge),
 					children: c
 				})]
 			}),
-			e.descriptionPreview && /* @__PURE__ */ H("p", {
-				className: a("line-clamp-4 min-h-0 flex-1 overflow-hidden", v, _, K.description),
+			e.descriptionPreview && /* @__PURE__ */ z("p", {
+				className: a("line-clamp-4 min-h-0 flex-1 overflow-hidden", v, g, H.description),
 				children: e.descriptionPreview
 			}),
-			/* @__PURE__ */ U("div", {
+			/* @__PURE__ */ B("div", {
 				className: "mt-auto flex shrink-0 flex-col gap-3",
-				children: [/* @__PURE__ */ H("div", {
+				children: [/* @__PURE__ */ z("div", {
 					className: "flex min-h-[28px] items-center",
-					children: e.isActive === !1 ? /* @__PURE__ */ U("span", {
-						className: a("inline-flex items-center gap-1.5 rounded-full border px-2 py-1", K.pausedPill, w, K.pausedLabel),
-						children: [/* @__PURE__ */ H(I, {
-							size: p.SM,
+					children: e.isActive === !1 ? /* @__PURE__ */ B("span", {
+						className: a("inline-flex items-center gap-1.5 rounded-full border px-2 py-1", H.pausedPill, w, H.pausedLabel),
+						children: [/* @__PURE__ */ z(N, {
+							size: m.SM,
 							"aria-hidden": !0,
-							stroke: m
+							stroke: h
 						}), l]
-					}) : /* @__PURE__ */ H("span", {
-						className: a("inline-block rounded-lg border px-2 py-1", K.schedulePill, b, K.scheduleLabel),
+					}) : /* @__PURE__ */ z("span", {
+						className: a("inline-block rounded-lg border px-2 py-1", H.schedulePill, y, H.scheduleLabel),
 						children: e.scheduleLabel
 					})
-				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ H(g, {
+				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ z(_, {
 					segments: e.locationSegments,
-					labelClassName: a(x, K.locationLabel),
-					leafClassName: a(S, K.locationLeaf),
-					className: a("pt-3", K.locationDivider)
+					labelClassName: a(x, H.locationLabel),
+					leafClassName: a(S, H.locationLeaf),
+					className: a("pt-3", H.locationDivider)
 				})]
 			})
 		]
 	});
-}, le = { card: "_card_11bez_1" }, ue = [
+}, _e = { card: "_card_11bez_1" }, ve = [
 	"100%",
 	"100%",
 	"61%"
-], de = "var(--stcs-skeleton-bg)", fe = ({ styles: e }) => /* @__PURE__ */ U(f, {
+], W = "var(--stcs-skeleton-bg)", G = ({ styles: e }) => /* @__PURE__ */ B(p, {
 	"aria-hidden": !0,
 	style: i({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
-	className: a("h-[232px]", le.card),
+	className: a("h-[232px]", _e.card),
 	children: [
-		/* @__PURE__ */ H(O, {
+		/* @__PURE__ */ z(O, {
 			variant: k.Rectangular,
 			width: "60%",
 			height: "20px",
-			color: de,
+			color: W,
 			className: "shrink-0"
 		}),
-		/* @__PURE__ */ H("div", {
+		/* @__PURE__ */ z("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden",
-			children: ue.map((e, t) => /* @__PURE__ */ H(O, {
+			children: ve.map((e, t) => /* @__PURE__ */ z(O, {
 				variant: k.Rectangular,
 				width: e,
 				height: "16px",
-				color: de
+				color: W
 			}, t))
 		}),
-		/* @__PURE__ */ H(O, {
+		/* @__PURE__ */ z(O, {
 			variant: k.Rectangular,
 			width: "110px",
 			height: "28px",
-			color: de,
+			color: W,
 			className: "shrink-0 rounded-lg"
 		})
 	]
-}), pe = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o }) => /* @__PURE__ */ U("div", {
+}), ye = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o }) => /* @__PURE__ */ B("div", {
 	className: "grid grid-cols-1 gap-5 desktop:grid-cols-3",
-	children: [e.map((e) => /* @__PURE__ */ H(ce, {
+	children: [e.map((e) => /* @__PURE__ */ z(U, {
 		item: e,
 		searchQuery: t,
 		onCardClick: n,
 		labels: r,
 		styles: i
-	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ H(fe, { styles: o }, `skeleton-${t}`))]
-}), q = {
-	container: "_container_r5sk9_1",
-	subtitle: "_subtitle_r5sk9_5",
-	sortButton: "_sortButton_r5sk9_9"
-}, me = (e, t, n, r, i, a) => {
+	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ z(G, { styles: o }, `skeleton-${t}`))]
+}), K = {
+	container: "_container_1ct1h_2",
+	subtitle: "_subtitle_1ct1h_6",
+	sortButton: "_sortButton_1ct1h_10",
+	createButton: "_createButton_1ct1h_19",
+	sortControlHidden: "_sortControlHidden_1ct1h_40"
+}, be = (e, t, n, r, i, a) => {
 	if (!e) return t ? a.loadingMoreLabel : n ? a.errorLabel : r > 0 ? `${r}` : i ? a.noResultsLabel : a.emptyStateLabel;
-}, he = (e) => {
+}, xe = (e) => {
 	if (!e || e === document.body) return null;
 	let { overflow: t, overflowY: n } = getComputedStyle(e);
-	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : he(e.parentElement);
-}, ge = ({ labels: e, onCreateClick: t, searchQuery: n, onSearchQueryChange: o, sortKey: u, onSortChange: d, items: f, isLoading: g = !1, error: v, onRetry: y, hasMore: b = !1, isLoadingMore: x = !1, skeletonCount: C = 6, onLoadMore: w, onCardClick: D, banner: O, styles: k }) => {
-	let { colors: j, typography: M, emptyStateIconSize: N = 48 } = k ?? {}, ee = M?.titleClassName ?? "dial-h1-text", F = M?.subtitleClassName ?? "dial-body-text", te = i({
-		"--st-bg": j?.background,
-		"--st-subtitle-text": j?.subtitleText,
-		"--st-sort-text": j?.sortButtonText
-	}), ne = (e) => {
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : xe(e.parentElement);
+}, Se = ({ labels: e, onCreateClick: t, searchQuery: n, onSearchQueryChange: o, sortKey: s, onSortChange: d, items: f, isLoading: p = !1, error: _, onRetry: y, hasMore: b = !1, isLoadingMore: x = !1, skeletonCount: S = 6, onLoadMore: w, onCardClick: T, banner: ee, styles: O }) => {
+	let { colors: k, typography: j, emptyStateIconSize: te = 48 } = O ?? {}, ne = j?.titleClassName ?? "dial-h1-text", M = j?.subtitleClassName ?? "dial-body-text", re = i({
+		"--st-bg": k?.background,
+		"--st-subtitle-text": k?.subtitleText,
+		"--st-sort-text": k?.sortButtonText
+	}), ae = (e) => {
 		o(e ?? "");
-	}, re = e.sortOptions.find((e) => e.value === u)?.label ?? e.sortLabel, I = se(() => e.sortOptions.map((e) => ({
+	}, [oe, se] = he(!1), [ce, N] = he(!1), ue = me(null), de = F(() => {
+		N(!0);
+	}, []), P = F(() => {
+		N(!1);
+	}, []);
+	pe(() => {
+		let e = ue.current;
+		ce && oe && e != null && e.offsetParent == null && se(!1);
+	}, [ce, oe]);
+	let I = e.sortOptions.find((e) => e.value === s)?.label ?? e.sortLabel, R = L(() => e.sortOptions.map((e) => ({
 		key: e.value,
 		label: e.label,
-		mark: S.Check,
-		checked: e.value === u,
+		mark: C.Check,
+		checked: e.value === s,
 		onClick: () => d(e.value)
 	})), [
 		e.sortOptions,
-		u,
+		s,
 		d
-	]), ae = me(g, x, !!v, f.length, n.trim().length > 0, e), L = B(null);
-	R(() => {
-		let e = L.current;
+	]), ge = be(p, x, !!_, f.length, n.trim().length > 0, e), V = me(null);
+	fe(() => {
+		let e = V.current;
 		if (!e || !w) return;
-		let t = he(e.parentElement);
+		let t = xe(e.parentElement);
 		if (!t) return;
 		let n = () => {
-			if (x || g || !b) return;
+			if (x || p || !b) return;
 			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
 			r.top < n.bottom && r.bottom > n.top && w();
 		};
@@ -169,136 +180,144 @@ var K = {
 	}, [
 		b,
 		x,
-		g,
+		p,
 		w
 	]);
-	let oe = () => g ? /* @__PURE__ */ H(A, {}) : v ? /* @__PURE__ */ U("div", {
+	let H = () => p ? /* @__PURE__ */ z(A, {}) : _ ? /* @__PURE__ */ B("div", {
 		className: "flex flex-col items-center gap-3",
-		children: [/* @__PURE__ */ H("p", {
-			className: a(F, q.subtitle),
+		children: [/* @__PURE__ */ z("p", {
+			className: a(M, K.subtitle),
 			children: e.errorLabel
-		}), /* @__PURE__ */ H(_, {
+		}), /* @__PURE__ */ z(v, {
 			label: e.retryLabel,
 			onClick: y
 		})]
-	}) : f.length === 0 ? n.trim() ? /* @__PURE__ */ H("p", {
-		className: a(F, q.subtitle),
+	}) : f.length === 0 ? n.trim() ? /* @__PURE__ */ z("p", {
+		className: a(M, K.subtitle),
 		children: e.noResultsLabel
-	}) : /* @__PURE__ */ H(r, {
-		icon: /* @__PURE__ */ H(P, {
+	}) : /* @__PURE__ */ z(r, {
+		icon: /* @__PURE__ */ z(ie, {
 			"aria-hidden": !0,
-			size: N,
+			size: te,
 			stroke: 1
 		}),
 		label: e.emptyStateLabel
-	}) : /* @__PURE__ */ U("div", {
+	}) : /* @__PURE__ */ B("div", {
 		className: "flex w-full flex-col gap-6",
-		children: [/* @__PURE__ */ H(pe, {
+		children: [/* @__PURE__ */ z(ye, {
 			items: f,
 			searchQuery: n,
-			onCardClick: D,
+			onCardClick: T,
 			labels: e.cardLabels,
-			trailingSkeletonCount: x ? C : 0,
-			skeletonStyles: { colors: { skeletonColor: j?.skeletonColor } }
-		}), /* @__PURE__ */ H("div", {
-			ref: L,
+			trailingSkeletonCount: x ? S : 0,
+			skeletonStyles: { colors: { skeletonColor: k?.skeletonColor } }
+		}), /* @__PURE__ */ z("div", {
+			ref: V,
 			"aria-hidden": !0,
 			className: "h-px w-full"
 		})]
-	}), z = g || !!v || f.length === 0;
-	return /* @__PURE__ */ U("div", {
-		style: te,
-		className: a("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", q.container),
+	}), U = p || !!_ || f.length === 0;
+	return /* @__PURE__ */ B("div", {
+		style: re,
+		className: a("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", K.container),
 		children: [
-			/* @__PURE__ */ U("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ U("div", {
+				children: [/* @__PURE__ */ B("div", {
 					className: "min-w-0 gap-2",
-					children: [/* @__PURE__ */ H("h1", {
-						className: a("truncate", ee),
+					children: [/* @__PURE__ */ z("h1", {
+						className: a("truncate", ne),
 						children: e.title
-					}), /* @__PURE__ */ H("p", {
-						className: a("mt-1", F, q.subtitle),
+					}), /* @__PURE__ */ z("p", {
+						className: a("mt-1", M, K.subtitle),
 						children: e.subtitle
 					})]
-				}), /* @__PURE__ */ H(T, {
+				}), /* @__PURE__ */ z(E, {
 					label: e.createButtonLabel,
-					iconBefore: /* @__PURE__ */ H(ie, {
-						size: p.SM,
+					textClassName: "hidden desktop:inline",
+					"aria-label": e.createButtonLabel,
+					iconBefore: /* @__PURE__ */ z(le, {
+						size: m.SM,
 						"aria-hidden": !0,
-						stroke: m
+						stroke: h
 					}),
 					onClick: t,
-					className: "shrink-0"
+					className: a("shrink-0", K.createButton)
 				})]
 			}),
-			/* @__PURE__ */ U("div", {
+			/* @__PURE__ */ B("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ H("div", {
+				children: [/* @__PURE__ */ z("div", {
 					role: "search",
 					className: "flex-1",
-					children: /* @__PURE__ */ H(E, {
+					children: /* @__PURE__ */ z(D, {
 						value: n,
-						onChange: ne,
+						onChange: ae,
 						placeholder: e.searchPlaceholder,
 						clearLabel: e.clearSearchLabel,
 						"aria-label": e.searchAriaLabel,
-						size: h.Large
+						size: g.Large,
+						onFocus: de,
+						onBlur: P
+					})
+				}), e.sortOptions.length > 0 && /* @__PURE__ */ z("div", {
+					ref: ue,
+					className: a(ce && K.sortControlHidden),
+					children: /* @__PURE__ */ z(l, {
+						items: R,
+						label: I,
+						variant: u.Primary,
+						appearance: c.Ghost,
+						className: K.sortButton
 					})
-				}), e.sortOptions.length > 0 && /* @__PURE__ */ H(c, {
-					items: I,
-					label: re,
-					variant: l.Primary,
-					appearance: s.Ghost,
-					className: q.sortButton
 				})]
 			}),
-			O,
-			/* @__PURE__ */ H("span", {
+			ee,
+			/* @__PURE__ */ z("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: ae
+				children: ge
 			}),
-			/* @__PURE__ */ H("div", {
-				className: a("mx-auto flex size-full w-full max-w-[1180px] flex-col", z && "items-center justify-center"),
-				children: oe()
+			/* @__PURE__ */ z("div", {
+				className: a("mx-auto flex size-full w-full max-w-[1180px] flex-col", U && "items-center justify-center"),
+				children: H()
 			})
 		]
 	});
-}, _e = /* @__PURE__ */ function(e) {
+}, Ce = /* @__PURE__ */ function(e) {
 	return e.FirstToRun = "firstToRun", e.LastToRun = "lastToRun", e.Newest = "newest", e.NameAZ = "nameAZ", e;
-}({}), ve = 500, J = /* @__PURE__ */ function(e) {
+}({}), we = 500, q = /* @__PURE__ */ function(e) {
 	return e.OneTime = "oneTime", e.Hourly = "hourly", e.Daily = "daily", e.Weekly = "weekly", e.Monthly = "monthly", e;
-}({}), Y = (e) => String(e).padStart(2, "0"), ye = (e) => e ? new Date(e) : null, be = (e) => {
+}({}), J = (e) => String(e).padStart(2, "0"), Te = (e) => e ? new Date(e) : null, Ee = (e) => {
 	if (e == null) return "";
 	let t = e instanceof Date ? e : new Date(e);
-	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${Y(t.getMonth() + 1)}-${Y(t.getDate())}T${Y(t.getHours())}:${Y(t.getMinutes())}`;
-}, xe = (e) => {
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${J(t.getMonth() + 1)}-${J(t.getDate())}T${J(t.getHours())}:${J(t.getMinutes())}`;
+}, De = (e) => {
 	if (!e) return null;
 	let [t, n, r] = e.split("-").map(Number);
 	return new Date(t, n - 1, r);
-}, Se = (e) => {
+}, Oe = (e) => {
 	if (e == null) return "";
 	let t = e instanceof Date ? e : new Date(e);
-	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${Y(t.getMonth() + 1)}-${Y(t.getDate())}`;
-}, Ce = (e) => {
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${J(t.getMonth() + 1)}-${J(t.getDate())}`;
+}, ke = (e) => {
 	let t = Number(e);
 	return e && Number.isFinite(t) ? String(t + 1) : null;
-}, we = (e) => {
+}, Ae = (e) => {
 	let t = typeof e == "string" ? Number(e) : NaN;
 	return Number.isFinite(t) ? String(t - 1) : "";
-}, X = {
+}, Y = {
 	detailsColumn: "_detailsColumn_1mg3v_1",
 	sectionSubtitle: "_sectionSubtitle_1mg3v_5",
 	instructionsError: "_instructionsError_1mg3v_9"
-}, Te = oe(async () => ({ default: (await G()).MarkdownEditor })), Ee = ({ labels: n, values: r, errors: s, modelSelector: c, modelLabelId: l, onFieldChange: f, onBack: p, onCancel: m, onSubmit: h, isSubmitting: g = !1, markdownEditorTheme: _, styles: v }) => {
-	let y = z(), S = o(), { colors: C, typography: T } = v ?? {}, E = T?.titleClassName ?? "dial-h1-text", O = T?.sectionTitleClassName ?? "dial-body-semi-text", k = T?.sectionSubtitleClassName ?? "dial-tiny-text", j = T?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", N = T?.instructionsErrorClassName ?? "dial-small-text", ee = i({
+}, je = P(async () => ({ default: (await V()).MarkdownEditor })), Me = ({ labels: n, values: r, errors: s, modelSelector: c, modelLabelId: l, onFieldChange: u, onBack: p, onCancel: m, onSubmit: h, isSubmitting: g = !1, markdownEditorTheme: _, styles: v }) => {
+	let y = I(), b = o(), { colors: C, typography: w } = v ?? {}, E = w?.titleClassName ?? "dial-h1-text", D = w?.sectionTitleClassName ?? "dial-body-semi-text", O = w?.sectionSubtitleClassName ?? "dial-tiny-text", k = w?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", j = w?.instructionsErrorClassName ?? "dial-small-text", te = i({
 		"--stcf-details-border": C?.detailsColumnBorder,
 		"--stcf-subtitle-text": C?.sectionSubtitleText,
 		"--stcf-error-text": C?.instructionsErrorText
-	}), P = g || !r.displayName.trim() || !r.modelId || !r.prompt.trim();
-	return /* @__PURE__ */ H(W, {
+	}), M = g || !r.displayName.trim() || !r.modelId || !r.prompt.trim();
+	return /* @__PURE__ */ z(ge, {
 		labels: {
 			title: n.pageTitle,
 			backButtonLabel: n.backButtonLabel,
@@ -310,7 +329,7 @@ var K = {
 		onCancel: m,
 		onSubmit: h,
 		isCancelDisabled: g,
-		isSubmitDisabled: P,
+		isSubmitDisabled: M,
 		isSubmitting: g,
 		styles: {
 			colors: { background: C?.background },
@@ -318,27 +337,27 @@ var K = {
 				colors: { borderColor: C?.headerBorder },
 				typography: { fontClassName: E }
 			},
-			cssVars: ee
+			cssVars: te
 		},
-		left: /* @__PURE__ */ U("div", {
+		left: /* @__PURE__ */ B("div", {
 			role: "group",
 			"aria-label": n.detailsSectionTitle,
-			className: a("flex flex-1 flex-col gap-5 border-e px-8 py-6", X.detailsColumn),
+			className: a("flex flex-1 flex-col gap-5 border-e px-4 py-6 desktop:px-8", Y.detailsColumn),
 			children: [
-				/* @__PURE__ */ U("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ H("h2", {
-						className: O,
+					children: [/* @__PURE__ */ z("h2", {
+						className: D,
 						children: n.detailsSectionTitle
-					}), /* @__PURE__ */ H("p", {
-						className: a(k, X.sectionSubtitle),
+					}), /* @__PURE__ */ z("p", {
+						className: a(O, Y.sectionSubtitle),
 						children: n.detailsSectionSubtitle
 					})]
 				}),
-				/* @__PURE__ */ H(b, {
+				/* @__PURE__ */ z(x, {
 					id: "scheduled-task-display-name",
 					value: r.displayName,
-					onChange: (e) => f("displayName", e ?? ""),
+					onChange: (e) => u("displayName", e ?? ""),
 					labelProps: {
 						label: n.displayNameLabel,
 						required: !0
@@ -346,99 +365,99 @@ var K = {
 					invalid: !!s.displayName,
 					error: s.displayName
 				}),
-				/* @__PURE__ */ H(M, {
+				/* @__PURE__ */ z(ne, {
 					id: "scheduled-task-description",
 					value: r.description ?? "",
-					onChange: (e) => f("description", e),
+					onChange: (e) => u("description", e),
 					labelProps: { label: n.descriptionLabel },
 					maxLength: 500,
 					invalid: !!s.description,
 					error: s.description,
 					caption: r.description ? `${r.description.length}/500` : void 0
 				}),
-				/* @__PURE__ */ U("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex flex-col gap-1",
 					children: [
-						/* @__PURE__ */ H(x, {
+						/* @__PURE__ */ z(S, {
 							id: l,
 							label: n.modelOrAgentLabel,
 							required: !0
 						}),
 						c,
-						s.modelId && /* @__PURE__ */ H("p", {
-							className: a(N, X.instructionsError),
+						s.modelId && /* @__PURE__ */ z("p", {
+							className: a(j, Y.instructionsError),
 							children: s.modelId
 						})
 					]
 				}),
-				/* @__PURE__ */ U("div", {
+				/* @__PURE__ */ B("div", {
 					className: "flex flex-col gap-3",
 					children: [
-						/* @__PURE__ */ H(D, {
+						/* @__PURE__ */ z(ee, {
 							labelProps: { label: n.repeatLabel },
 							value: r.repeat,
-							onChange: (e) => f("repeat", e),
+							onChange: (e) => u("repeat", e),
 							options: n.repeatOptions.map((e) => ({
 								value: e.key,
 								label: e.label
 							}))
 						}),
-						r.repeat === J.OneTime && /* @__PURE__ */ U("div", {
+						r.repeat === q.OneTime && /* @__PURE__ */ B("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ H(u, {
+							children: [/* @__PURE__ */ z(d, {
 								id: "scheduled-task-run-at",
-								mode: d.DateTime,
-								value: ye(r.runAt),
-								onChange: (e) => f("runAt", be(e)),
+								mode: f.DateTime,
+								value: Te(r.runAt),
+								onChange: (e) => u("runAt", Ee(e)),
 								labelProps: {
 									label: n.runAtLabel,
 									required: !0
 								},
 								invalid: !!s.runAt
-							}), s.runAt && /* @__PURE__ */ H("p", {
-								className: a(N, X.instructionsError),
+							}), s.runAt && /* @__PURE__ */ z("p", {
+								className: a(j, Y.instructionsError),
 								children: s.runAt
 							})]
 						}),
-						r.repeat !== J.OneTime && /* @__PURE__ */ U(V, { children: [
-							r.repeat !== J.Hourly && /* @__PURE__ */ U("div", {
+						r.repeat !== q.OneTime && /* @__PURE__ */ B(R, { children: [
+							r.repeat !== q.Hourly && /* @__PURE__ */ B("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H(u, {
+								children: [/* @__PURE__ */ z(d, {
 									id: "scheduled-task-time",
-									mode: d.Time,
+									mode: f.Time,
 									value: r.time,
-									onChange: (e) => f("time", typeof e == "string" ? e : ""),
+									onChange: (e) => u("time", typeof e == "string" ? e : ""),
 									labelProps: {
 										label: n.timeLabel,
 										required: !0
 									},
 									invalid: !!s.time
-								}), s.time && /* @__PURE__ */ H("p", {
-									className: a(N, X.instructionsError),
+								}), s.time && /* @__PURE__ */ z("p", {
+									className: a(j, Y.instructionsError),
 									children: s.time
 								})]
 							}),
-							r.repeat === J.Weekly && /* @__PURE__ */ U("div", {
+							r.repeat === q.Weekly && /* @__PURE__ */ B("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H(u, {
+								children: [/* @__PURE__ */ z(d, {
 									id: "scheduled-task-day-of-week",
-									mode: d.Weekday,
-									value: Ce(r.dayOfWeek),
-									onChange: (e) => f("dayOfWeek", we(e)),
+									mode: f.Weekday,
+									value: ke(r.dayOfWeek),
+									onChange: (e) => u("dayOfWeek", Ae(e)),
 									labelProps: {
 										label: n.dayOfWeekLabel,
 										required: !0
 									},
 									invalid: !!s.dayOfWeek
-								}), s.dayOfWeek && /* @__PURE__ */ H("p", {
-									className: a(N, X.instructionsError),
+								}), s.dayOfWeek && /* @__PURE__ */ z("p", {
+									className: a(j, Y.instructionsError),
 									children: s.dayOfWeek
 								})]
 							}),
-							r.repeat === J.Monthly && /* @__PURE__ */ H(b, {
+							r.repeat === q.Monthly && /* @__PURE__ */ z(x, {
 								id: "scheduled-task-day-of-month",
 								value: r.dayOfMonth ?? "",
-								onChange: (e) => f("dayOfMonth", e ?? ""),
+								onChange: (e) => u("dayOfMonth", e ?? ""),
 								labelProps: {
 									label: n.dayOfMonthLabel,
 									required: !0
@@ -446,13 +465,13 @@ var K = {
 								invalid: !!s.dayOfMonth,
 								error: s.dayOfMonth
 							}),
-							r.repeat === J.Hourly && /* @__PURE__ */ H(w, {
+							r.repeat === q.Hourly && /* @__PURE__ */ z(T, {
 								id: "scheduled-task-minute",
 								integer: !0,
 								min: 0,
 								max: 59,
 								value: r.minute ?? "",
-								onChange: (e) => f("minute", e == null ? "" : String(e)),
+								onChange: (e) => u("minute", e == null ? "" : String(e)),
 								labelProps: {
 									label: n.minuteLabel,
 									required: !0
@@ -460,34 +479,34 @@ var K = {
 								invalid: !!s.minute,
 								error: s.minute
 							}),
-							/* @__PURE__ */ U("div", {
-								className: "flex flex-col gap-3 desktop:flex-row",
-								children: [/* @__PURE__ */ U("div", {
+							/* @__PURE__ */ B("div", {
+								className: "flex flex-row gap-3 desktop:flex-col",
+								children: [/* @__PURE__ */ B("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ H(u, {
+									children: [/* @__PURE__ */ z(d, {
 										id: "scheduled-task-start-date",
-										mode: d.Date,
-										value: xe(r.startDate),
-										onChange: (e) => f("startDate", Se(e)),
+										mode: f.Date,
+										value: De(r.startDate),
+										onChange: (e) => u("startDate", Oe(e)),
 										labelProps: { label: n.startDateLabel },
 										placeholder: n.startDatePlaceholder,
 										invalid: !!s.startDate
-									}), s.startDate && /* @__PURE__ */ H("p", {
-										className: a(N, X.instructionsError),
+									}), s.startDate && /* @__PURE__ */ z("p", {
+										className: a(j, Y.instructionsError),
 										children: s.startDate
 									})]
-								}), /* @__PURE__ */ U("div", {
+								}), /* @__PURE__ */ B("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ H(u, {
+									children: [/* @__PURE__ */ z(d, {
 										id: "scheduled-task-end-date",
-										mode: d.Date,
-										value: xe(r.endDate),
-										onChange: (e) => f("endDate", Se(e)),
+										mode: f.Date,
+										value: De(r.endDate),
+										onChange: (e) => u("endDate", Oe(e)),
 										labelProps: { label: n.endDateLabel },
 										placeholder: n.endDatePlaceholder,
 										invalid: !!s.endDate
-									}), s.endDate && /* @__PURE__ */ H("p", {
-										className: a(N, X.instructionsError),
+									}), s.endDate && /* @__PURE__ */ z("p", {
+										className: a(j, Y.instructionsError),
 										children: s.endDate
 									})]
 								})]
@@ -497,50 +516,103 @@ var K = {
 				})
 			]
 		}),
-		children: /* @__PURE__ */ U("div", {
+		children: /* @__PURE__ */ B("div", {
 			role: "group",
 			"aria-label": n.configurationSectionTitle,
-			className: "flex flex-1 flex-col gap-5 px-8 py-6",
-			children: [/* @__PURE__ */ U("div", {
+			className: "flex flex-1 flex-col gap-5 px-4 py-6 desktop:px-8",
+			children: [/* @__PURE__ */ B("div", {
 				className: "flex flex-col gap-1",
-				children: [/* @__PURE__ */ H("h2", {
-					className: O,
+				children: [/* @__PURE__ */ z("h2", {
+					className: D,
 					children: n.configurationSectionTitle
-				}), /* @__PURE__ */ H("p", {
-					className: a(k, X.sectionSubtitle),
+				}), /* @__PURE__ */ z("p", {
+					className: a(O, Y.sectionSubtitle),
 					children: n.configurationSectionSubtitle
 				})]
-			}), /* @__PURE__ */ U("div", {
+			}), /* @__PURE__ */ B("div", {
 				className: "flex flex-1 flex-col gap-1",
 				children: [
-					/* @__PURE__ */ H("label", {
+					/* @__PURE__ */ z("label", {
 						htmlFor: y,
-						className: j,
+						className: k,
 						children: n.instructionsLabel
 					}),
-					/* @__PURE__ */ H("div", {
-						ref: S,
+					/* @__PURE__ */ z("div", {
+						ref: b,
 						className: a(e, t),
-						children: /* @__PURE__ */ H(L, {
-							fallback: /* @__PURE__ */ H(A, {}),
-							children: /* @__PURE__ */ H(Te, {
+						children: /* @__PURE__ */ z(de, {
+							fallback: /* @__PURE__ */ z(A, {}),
+							children: /* @__PURE__ */ z(je, {
 								id: y,
 								value: r.prompt,
-								onChange: (e) => f("prompt", e),
+								onChange: (e) => u("prompt", e),
 								height: 480,
 								theme: _
 							})
 						})
 					}),
-					s.prompt && /* @__PURE__ */ H("p", {
-						className: a(N, X.instructionsError),
+					s.prompt && /* @__PURE__ */ z("p", {
+						className: a(j, Y.instructionsError),
 						children: s.prompt
 					})
 				]
 			})]
 		})
 	});
-}, Z = /* @__PURE__ */ function(e) {
+}, X = /* @__PURE__ */ function(e) {
+	return e.Details = "details", e.Configuration = "configuration", e.History = "history", e;
+}({}), Ne = /* @__PURE__ */ function(e) {
+	return e.Card = "card", e.Flow = "flow", e;
+}({}), Pe = { subtitleText: "_subtitleText_1i4x2_3" }, Fe = ({ instructionsLabel: e, instructionsMarkdown: t, renderInstructions: r, fieldLabelClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ B("div", {
+	role: "group",
+	"aria-label": e,
+	className: "flex flex-col gap-1",
+	children: [/* @__PURE__ */ z("span", {
+		className: a(i, Pe.subtitleText),
+		children: e
+	}), t && (r ? r(t) : /* @__PURE__ */ z(n, { content: t }))]
+}), Ie = { subtitleText: "_subtitleText_1i4x2_3" }, Le = ({ labels: e, description: t, modelLabel: n, repeatsLabel: r, activeWindowLabel: i, fieldLabelClassName: o = "dial-tiny-text", fieldValueClassName: s = "dial-small-text" }) => /* @__PURE__ */ B(R, { children: [
+	t && /* @__PURE__ */ B("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ z("span", {
+			className: a(o, Ie.subtitleText),
+			children: e.descriptionLabel
+		}), /* @__PURE__ */ z("p", {
+			className: s,
+			children: t
+		})]
+	}),
+	n && /* @__PURE__ */ B("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ z("span", {
+			className: a(o, Ie.subtitleText),
+			children: e.modelLabel
+		}), /* @__PURE__ */ z("p", {
+			className: s,
+			children: n
+		})]
+	}),
+	r && /* @__PURE__ */ B("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ z("span", {
+			className: a(o, Ie.subtitleText),
+			children: e.repeatsLabel
+		}), /* @__PURE__ */ z("p", {
+			className: s,
+			children: r
+		})]
+	}),
+	i && /* @__PURE__ */ B("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ z("span", {
+			className: a(o, Ie.subtitleText),
+			children: e.activeWindowLabel
+		}), /* @__PURE__ */ z("p", {
+			className: s,
+			children: i
+		})]
+	})
+] }), Z = /* @__PURE__ */ function(e) {
 	return e.Success = "success", e.Error = "error", e.InProgress = "inProgress", e.Missed = "missed", e;
 }({}), Q = {
 	subtitleText: "_subtitleText_1bug5_1",
@@ -549,34 +621,34 @@ var K = {
 	missedIcon: "_missedIcon_1bug5_13",
 	currentRun: "_currentRun_1bug5_17",
 	unreadDot: "_unreadDot_1bug5_21"
-}, De = ({ status: e }) => {
+}, Re = ({ status: e }) => {
 	switch (e) {
-		case Z.Success: return /* @__PURE__ */ H(F, {
-			size: p.SM,
+		case Z.Success: return /* @__PURE__ */ z(ae, {
+			size: m.SM,
 			className: Q.successIcon,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: h
 		});
-		case Z.Error: return /* @__PURE__ */ H(te, {
-			size: p.SM,
+		case Z.Error: return /* @__PURE__ */ z(oe, {
+			size: m.SM,
 			className: Q.errorIcon,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: h
 		});
-		case Z.InProgress: return /* @__PURE__ */ H("span", {
+		case Z.InProgress: return /* @__PURE__ */ z("span", {
 			"aria-hidden": !0,
-			children: /* @__PURE__ */ H(A, { size: p.SM })
+			children: /* @__PURE__ */ z(A, { size: m.SM })
 		});
-		case Z.Missed: return /* @__PURE__ */ H(N, {
-			size: p.SM,
+		case Z.Missed: return /* @__PURE__ */ z(M, {
+			size: m.SM,
 			className: Q.missedIcon,
 			"aria-hidden": !0,
-			stroke: m
+			stroke: h
 		});
 		default: return null;
 	}
-}, Oe = ({ items: e, isLoading: t = !1, isLoadingMore: n = !1, skeletonCount: r = 6, error: o, onRetry: s, currentRunId: c, onRunClick: l, labels: u, footer: d, styles: f }) => {
-	let { colors: p, typography: h } = f ?? {}, g = h?.runTimestampClassName ?? "dial-small-text", v = h?.subtitleClassName ?? "dial-body-text", y = u.unreadIndicatorLabel ?? "Unread", b = i({
+}, ze = ({ items: e, isLoading: t = !1, isLoadingMore: n = !1, skeletonCount: r = 6, error: o, onRetry: s, currentRunId: c, onRunClick: l, labels: u, footer: d, styles: f }) => {
+	let { colors: p, typography: m } = f ?? {}, g = m?.runTimestampClassName ?? "dial-small-text", _ = m?.subtitleClassName ?? "dial-body-text", y = u.unreadIndicatorLabel ?? "Unread", b = i({
 		"--strhl-success-icon": p?.successIconColor,
 		"--strhl-error-icon": p?.errorIconColor,
 		"--strhl-missed-icon": p?.missedIconColor,
@@ -585,7 +657,7 @@ var K = {
 		"--strhl-unread-dot": p?.unreadDotColor
 	}), x = (e) => {
 		let t = u.runStatusLabels[e.status], n = e.id === c, r = [e.isUnread ? y : void 0, n ? u.currentRunLabel : void 0].filter((e) => !!e), i = [`${t} ${e.timestampLabel}`, ...r].join(" — "), o = !!e.conversationId && !!l;
-		return /* @__PURE__ */ U("li", {
+		return /* @__PURE__ */ B("li", {
 			...o ? {
 				role: "button",
 				tabIndex: 0,
@@ -597,345 +669,376 @@ var K = {
 			"aria-label": i,
 			"aria-current": n ? "true" : void 0,
 			className: a("flex h-8 items-center justify-between gap-2 rounded-full pe-2 ps-5", n && Q.currentRun, o && "cursor-pointer"),
-			children: [/* @__PURE__ */ U("span", {
+			children: [/* @__PURE__ */ B("span", {
 				className: "flex items-center gap-2 truncate",
-				children: [/* @__PURE__ */ H("span", {
+				children: [/* @__PURE__ */ z("span", {
 					className: "relative flex size-3 shrink-0 items-center justify-center",
-					children: e.isUnread && /* @__PURE__ */ H("span", {
+					children: e.isUnread && /* @__PURE__ */ z("span", {
 						className: a("size-[5.33px] rounded-full", Q.unreadDot),
 						"aria-hidden": !0
 					})
-				}), /* @__PURE__ */ H("span", {
+				}), /* @__PURE__ */ z("span", {
 					className: a(g, "truncate"),
 					children: e.timestampLabel
 				})]
-			}), /* @__PURE__ */ H("span", {
+			}), /* @__PURE__ */ z("span", {
 				className: "flex h-8 w-14 shrink-0 items-center justify-end",
-				children: /* @__PURE__ */ H(De, { status: e.status })
+				children: /* @__PURE__ */ z(Re, { status: e.status })
 			})]
 		}, e.id);
-	}, S = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ U("li", {
+	}, S = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ B("li", {
 		"aria-hidden": "true",
 		className: "flex h-8 items-center justify-between gap-2 pe-2 ps-5",
-		children: [/* @__PURE__ */ H(O, {
+		children: [/* @__PURE__ */ z(O, {
 			variant: k.Rectangular,
 			width: "160px",
 			height: "16px"
-		}), /* @__PURE__ */ H(O, {
+		}), /* @__PURE__ */ z(O, {
 			variant: k.Rectangular,
 			width: "16px",
 			height: "16px",
 			className: "shrink-0 rounded-full"
 		})]
 	}, `history-skeleton-${t}`));
-	return t && e.length === 0 ? /* @__PURE__ */ H("ul", {
+	return t && e.length === 0 ? /* @__PURE__ */ z("ul", {
 		style: b,
 		"aria-label": u.historyTitle,
 		className: "flex flex-col gap-0.5",
 		children: S(r)
-	}) : o && e.length === 0 ? /* @__PURE__ */ U("div", {
+	}) : o && e.length === 0 ? /* @__PURE__ */ B("div", {
 		style: b,
 		className: "flex flex-col items-start gap-3",
-		children: [/* @__PURE__ */ H("p", {
+		children: [/* @__PURE__ */ z("p", {
 			role: "alert",
-			className: a(v, Q.subtitleText),
+			className: a(_, Q.subtitleText),
 			children: u.errorLabel
-		}), /* @__PURE__ */ H(_, {
+		}), /* @__PURE__ */ z(v, {
 			label: u.retryLabel,
 			onClick: s
 		})]
-	}) : e.length === 0 ? /* @__PURE__ */ U("div", {
+	}) : e.length === 0 ? /* @__PURE__ */ B("div", {
 		style: b,
 		className: "flex w-full flex-col items-center justify-center gap-2 py-4",
-		children: [/* @__PURE__ */ H(ne, {
+		children: [/* @__PURE__ */ z(se, {
 			size: 44,
-			stroke: m,
+			stroke: h,
 			className: Q.subtitleText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ H("p", {
+		}), /* @__PURE__ */ z("p", {
 			role: "status",
 			className: g,
 			children: u.emptyLabel
 		})]
-	}) : /* @__PURE__ */ U("ul", {
+	}) : /* @__PURE__ */ B("ul", {
 		style: b,
 		"aria-label": u.historyTitle,
 		className: "flex flex-col gap-0.5",
 		children: [
 			e.map(x),
 			n && S(r),
-			o ? /* @__PURE__ */ U("li", {
+			o ? /* @__PURE__ */ B("li", {
 				className: "flex flex-col items-start gap-3 px-5 py-2",
-				children: [/* @__PURE__ */ H("p", {
+				children: [/* @__PURE__ */ z("p", {
 					role: "alert",
-					className: a(v, Q.subtitleText),
+					className: a(_, Q.subtitleText),
 					children: u.errorLabel
-				}), /* @__PURE__ */ H(_, {
+				}), /* @__PURE__ */ z(v, {
 					label: u.retryLabel,
 					onClick: s
 				})]
 			}) : d
 		]
 	});
-}, $ = {
-	container: "_container_1ci42_1",
-	header: "_header_1ci42_5",
-	detailsColumn: "_detailsColumn_1ci42_9",
-	subtitleText: "_subtitleText_1ci42_13",
-	successIcon: "_successIcon_1ci42_17",
-	errorIcon: "_errorIcon_1ci42_21",
-	missedIcon: "_missedIcon_1ci42_25",
-	historyCard: "_historyCard_1ci42_29"
-}, ke = ({ labels: e, onBack: t, onEdit: r, onDelete: o, isDeleting: s = !1, isDeleted: c = !1, isActive: u, isActiveUpdating: d = !1, isActiveDisabled: f = !1, onActiveChange: h, displayName: g, isLoading: y = !1, error: b, onRetry: x, description: S, modelLabel: w, repeatsLabel: T, activeWindowLabel: E, nextRunLabel: D, instructionsMarkdown: O, renderInstructions: k, runs: M, runsIsLoading: N = !1, runsIsLoadingMore: P = !1, runsSkeletonCount: F = 6, runsError: te, onRunsRetry: ne, runsHasMore: I = !1, onRunsLoadMore: ie, onRunClick: L, styles: oe }) => {
-	let { colors: R, typography: z } = oe ?? {}, se = z?.titleClassName ?? "dial-h2-text", B = z?.sectionTitleClassName ?? "dial-body-semi-text", V = z?.fieldLabelClassName ?? "dial-tiny-text", W = z?.fieldValueClassName ?? "dial-small-text", G = z?.runTimestampClassName ?? "dial-small-text", K = i({
-		"--stdv-bg": R?.background,
-		"--stdv-header-border": R?.headerBorder,
-		"--stdv-details-border": R?.detailsColumnBorder,
-		"--stdv-subtitle-text": R?.subtitleText,
-		"--stdv-success-icon": R?.successIconColor,
-		"--stdv-error-icon": R?.errorIconColor,
-		"--stdv-missed-icon": R?.missedIconColor,
-		"--stdv-history-bg": R?.historyCardBackground
-	}), ce = ie && I && e.historyShowMoreLabel ? /* @__PURE__ */ H("li", {
-		className: a("sticky bottom-0 z-10 rounded-b-xl px-6 pb-5 pt-2", $.historyCard),
-		children: /* @__PURE__ */ H(_, {
-			label: e.historyShowMoreLabel,
-			onClick: ie,
-			disabled: P
+}, Be = {
+	historyCard: "_historyCard_qqobi_4",
+	subtitleText: "_subtitleText_qqobi_8"
+}, Ve = ({ variant: e, labels: t, nextRunLabel: n, items: r, isLoading: i = !1, isLoadingMore: o = !1, skeletonCount: s = 6, error: c, onRetry: l, hasMore: u = !1, onLoadMore: d, onRunClick: f, runTimestampClassName: p = "dial-small-text", sectionTitleClassName: m = "dial-body-semi-text", colors: h }) => {
+	let g = e === Ne.Card, _ = g ? a("sticky bottom-0 z-10 rounded-b-xl px-6 pb-5 pt-2", Be.historyCard) : "pt-2", y = d && u && t.historyShowMoreLabel ? /* @__PURE__ */ z("li", {
+		className: _,
+		children: /* @__PURE__ */ z(v, {
+			label: t.historyShowMoreLabel,
+			onClick: d,
+			disabled: o
 		})
-	}) : void 0;
-	return /* @__PURE__ */ U("div", {
-		style: K,
+	}) : void 0, b = n ? /* @__PURE__ */ z("p", {
+		className: a(p, Be.subtitleText),
+		children: n
+	}) : void 0, x = t.historyLoadingMoreLabel ? /* @__PURE__ */ z("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sr-only",
+		children: o ? t.historyLoadingMoreLabel : ""
+	}) : void 0, S = /* @__PURE__ */ z(ze, {
+		items: r,
+		isLoading: i,
+		isLoadingMore: o,
+		skeletonCount: s,
+		error: c,
+		onRetry: l,
+		onRunClick: f,
+		labels: {
+			historyTitle: t.historyTitle,
+			emptyLabel: t.historyEmptyLabel,
+			errorLabel: t.historyErrorLabel,
+			retryLabel: t.historyRetryLabel,
+			runStatusLabels: t.runStatusLabels,
+			unreadIndicatorLabel: t.unreadIndicatorLabel
+		},
+		footer: y,
+		styles: {
+			typography: { runTimestampClassName: p },
+			colors: h
+		}
+	});
+	return g ? /* @__PURE__ */ B("div", {
+		className: a("flex max-h-[70vh] w-full flex-col overflow-y-auto rounded-xl shadow-md desktop:w-[360px]", Be.historyCard),
+		children: [/* @__PURE__ */ B("div", {
+			className: a("sticky top-0 z-10 flex flex-col gap-4 rounded-t-xl px-6 pb-2 pt-5", Be.historyCard),
+			children: [
+				/* @__PURE__ */ z("h2", {
+					className: m,
+					children: t.historyTitle
+				}),
+				b,
+				x
+			]
+		}), /* @__PURE__ */ z("div", {
+			className: "flex flex-1 flex-col gap-4 px-6 pb-2",
+			children: S
+		})]
+	}) : /* @__PURE__ */ B("div", {
+		className: "flex flex-col gap-4",
+		children: [
+			b,
+			x,
+			S
+		]
+	});
+}, $ = {
+	container: "_container_178k1_1",
+	header: "_header_178k1_8",
+	detailsColumn: "_detailsColumn_178k1_12",
+	subtitleText: "_subtitleText_178k1_16"
+}, He = ({ labels: e, onBack: t, onEdit: n, onDelete: r, isDeleting: o = !1, isDeleted: c = !1, isActive: l, isActiveUpdating: d = !1, isActiveDisabled: f = !1, onActiveChange: p, displayName: g, isLoading: _ = !1, error: b, onRetry: x, description: S, modelLabel: C, repeatsLabel: T, activeWindowLabel: E, nextRunLabel: D, instructionsMarkdown: ee, renderInstructions: O, runs: k, runsIsLoading: ne = !1, runsIsLoadingMore: M = !1, runsSkeletonCount: ie = 6, runsError: ae, onRunsRetry: oe, runsHasMore: se = !1, onRunsLoadMore: N, onRunClick: le, styles: de }) => {
+	let { colors: P, typography: F } = de ?? {}, fe = F?.titleClassName ?? "dial-h2-text", I = F?.sectionTitleClassName ?? "dial-body-semi-text", pe = F?.fieldLabelClassName ?? "dial-tiny-text", L = F?.fieldValueClassName ?? "dial-small-text", me = F?.runTimestampClassName ?? "dial-small-text", R = i({
+		"--stdv-bg": P?.background,
+		"--stdv-header-border": P?.headerBorder,
+		"--stdv-details-border": P?.detailsColumnBorder,
+		"--stdv-subtitle-text": P?.subtitleText,
+		"--stdv-history-bg": P?.historyCardBackground
+	}), ge = s(), [V, H] = he(X.Details), U = [
+		{
+			id: X.Details,
+			label: e.detailsTitle
+		},
+		{
+			id: X.Configuration,
+			label: e.configurationTitle
+		},
+		{
+			id: X.History,
+			label: e.historyTitle
+		}
+	], _e = U.find((e) => e.id === V)?.label ?? e.detailsTitle, ve = /* @__PURE__ */ z(Le, {
+		labels: {
+			descriptionLabel: e.descriptionLabel,
+			modelLabel: e.modelLabel,
+			repeatsLabel: e.repeatsLabel,
+			activeWindowLabel: e.activeWindowLabel
+		},
+		description: S,
+		modelLabel: C,
+		repeatsLabel: T,
+		activeWindowLabel: E,
+		fieldLabelClassName: pe,
+		fieldValueClassName: L
+	}), W = /* @__PURE__ */ z(Fe, {
+		instructionsLabel: e.instructionsLabel,
+		instructionsMarkdown: ee,
+		renderInstructions: O,
+		fieldLabelClassName: pe
+	}), G = (t) => /* @__PURE__ */ z(Ve, {
+		variant: t,
+		labels: {
+			historyTitle: e.historyTitle,
+			historyEmptyLabel: e.historyEmptyLabel,
+			historyErrorLabel: e.historyErrorLabel,
+			historyRetryLabel: e.historyRetryLabel,
+			historyLoadingMoreLabel: e.historyLoadingMoreLabel,
+			historyShowMoreLabel: e.historyShowMoreLabel,
+			runStatusLabels: e.runStatusLabels,
+			unreadIndicatorLabel: e.unreadIndicatorLabel
+		},
+		nextRunLabel: D,
+		items: k,
+		isLoading: ne,
+		isLoadingMore: M,
+		skeletonCount: ie,
+		error: ae,
+		onRetry: oe,
+		hasMore: se,
+		onLoadMore: N,
+		onRunClick: le,
+		runTimestampClassName: me,
+		sectionTitleClassName: I,
+		colors: P
+	});
+	return /* @__PURE__ */ B("div", {
+		style: R,
 		className: a("flex h-full w-full flex-col overflow-y-auto", $.container),
 		children: [
-			/* @__PURE__ */ U("div", {
-				className: a("flex h-16 shrink-0 items-center justify-between gap-2 border-b px-8", $.header),
-				children: [/* @__PURE__ */ U("div", {
+			/* @__PURE__ */ B("div", {
+				className: a("flex h-16 shrink-0 items-center justify-between gap-2 border-t px-8 desktop:border-b desktop:border-t-0", $.header),
+				children: [/* @__PURE__ */ B("div", {
 					className: "flex min-w-0 items-center gap-2",
 					children: [
-						/* @__PURE__ */ H(v, {
-							icon: /* @__PURE__ */ H(ee, {
-								size: p.LG,
+						/* @__PURE__ */ z(y, {
+							icon: /* @__PURE__ */ z(re, {
+								size: m.LG,
 								className: "rtl:scale-x-[-1]",
 								"aria-hidden": !0,
-								stroke: m
+								stroke: h
 							}),
 							"aria-label": e.backAriaLabel,
 							onClick: t
 						}),
-						/* @__PURE__ */ H("h1", {
-							className: a("truncate", se),
+						/* @__PURE__ */ z("h1", {
+							className: a("hidden truncate desktop:block", fe),
 							children: g
 						}),
-						c && /* @__PURE__ */ H("span", {
-							className: a("shrink-0", W, $.subtitleText),
+						c && /* @__PURE__ */ z("span", {
+							className: a("hidden shrink-0 desktop:inline", L, $.subtitleText),
 							children: e.deletedStateLabel
 						})
 					]
-				}), /* @__PURE__ */ U("div", {
+				}), /* @__PURE__ */ B("div", {
 					className: "flex shrink-0 items-center gap-2",
 					children: [
-						!c && u !== void 0 && /* @__PURE__ */ H(j, {
+						!c && l !== void 0 && /* @__PURE__ */ z(j, {
 							id: "scheduled-task-active-switch",
 							labelProps: { label: e.activeStatusLabel },
-							isOn: u,
-							disabled: d || f || s,
-							onChange: (e) => h?.(e)
+							isOn: l,
+							disabled: d || f || o,
+							onChange: (e) => p?.(e)
 						}),
-						!c && o && /* @__PURE__ */ H(_, {
-							variant: l.Danger,
+						!c && r && /* @__PURE__ */ z(v, {
+							variant: u.Danger,
 							label: e.deleteButtonLabel,
-							iconBefore: /* @__PURE__ */ H(ae, {
-								size: p.SM,
+							iconBefore: /* @__PURE__ */ z(ue, {
+								size: m.SM,
 								"aria-hidden": !0,
-								stroke: m
+								stroke: h
 							}),
-							onClick: o,
-							disabled: s,
+							onClick: r,
+							disabled: o,
 							className: "shrink-0"
 						}),
-						!c && r && /* @__PURE__ */ H(C, {
+						!c && n && /* @__PURE__ */ z(w, {
 							label: e.editButtonLabel,
-							iconBefore: /* @__PURE__ */ H(re, {
-								size: p.SM,
+							iconBefore: /* @__PURE__ */ z(ce, {
+								size: m.SM,
 								"aria-hidden": !0,
-								stroke: m
+								stroke: h
 							}),
-							onClick: r,
-							disabled: s,
+							onClick: n,
+							disabled: o,
 							className: "shrink-0"
 						})
 					]
 				})]
 			}),
-			e.activeStatusAnnouncement != null && /* @__PURE__ */ H("span", {
+			/* @__PURE__ */ B("div", {
+				className: "flex min-w-0 items-center gap-2 px-8 py-3 desktop:hidden",
+				children: [/* @__PURE__ */ z("h1", {
+					className: a("truncate", fe),
+					children: g
+				}), c && /* @__PURE__ */ z("span", {
+					className: a("shrink-0", L, $.subtitleText),
+					children: e.deletedStateLabel
+				})]
+			}),
+			e.activeStatusAnnouncement != null && /* @__PURE__ */ z("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				children: e.activeStatusAnnouncement
 			}),
-			y && /* @__PURE__ */ H("div", {
+			_ && /* @__PURE__ */ z("div", {
 				className: "flex flex-1 items-center justify-center",
-				children: /* @__PURE__ */ H(A, {})
+				children: /* @__PURE__ */ z(A, {})
 			}),
-			!y && b && /* @__PURE__ */ U("div", {
+			!_ && b && /* @__PURE__ */ B("div", {
 				className: "flex flex-1 flex-col items-center justify-center gap-3",
-				children: [/* @__PURE__ */ H("p", {
-					className: a(W, $.subtitleText),
+				children: [/* @__PURE__ */ z("p", {
+					className: a(L, $.subtitleText),
 					children: e.errorLabel
-				}), /* @__PURE__ */ H(_, {
+				}), /* @__PURE__ */ z(v, {
 					label: e.retryLabel,
 					onClick: x
 				})]
 			}),
-			!y && !b && /* @__PURE__ */ U("div", {
+			!_ && !b && (ge ? /* @__PURE__ */ B("div", {
+				className: "flex flex-1 flex-col",
+				children: [/* @__PURE__ */ z(te, {
+					ariaLabel: e.tabsAriaLabel ?? "Scheduled task sections",
+					className: "px-8",
+					tabs: U,
+					activeTabId: V,
+					onTabChange: H
+				}), /* @__PURE__ */ z("div", {
+					role: "tabpanel",
+					"aria-label": _e,
+					className: "flex flex-1 flex-col gap-5 px-8 py-6",
+					children: V === X.Configuration ? W : V === X.History ? G(Ne.Flow) : ve
+				})]
+			}) : /* @__PURE__ */ B("div", {
 				className: "flex flex-1 flex-col desktop:flex-row",
 				children: [
-					/* @__PURE__ */ U("div", {
+					/* @__PURE__ */ B("div", {
 						role: "group",
 						"aria-label": e.detailsTitle,
 						className: a("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", $.detailsColumn),
-						children: [
-							/* @__PURE__ */ H("h2", {
-								className: B,
-								children: e.detailsTitle
-							}),
-							S && /* @__PURE__ */ U("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H("span", {
-									className: a(V, $.subtitleText),
-									children: e.descriptionLabel
-								}), /* @__PURE__ */ H("p", {
-									className: W,
-									children: S
-								})]
-							}),
-							w && /* @__PURE__ */ U("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H("span", {
-									className: a(V, $.subtitleText),
-									children: e.modelLabel
-								}), /* @__PURE__ */ H("p", {
-									className: W,
-									children: w
-								})]
-							}),
-							T && /* @__PURE__ */ U("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H("span", {
-									className: a(V, $.subtitleText),
-									children: e.repeatsLabel
-								}), /* @__PURE__ */ H("p", {
-									className: W,
-									children: T
-								})]
-							}),
-							E && /* @__PURE__ */ U("div", {
-								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ H("span", {
-									className: a(V, $.subtitleText),
-									children: e.activeWindowLabel
-								}), /* @__PURE__ */ H("p", {
-									className: W,
-									children: E
-								})]
-							})
-						]
+						children: [/* @__PURE__ */ z("h2", {
+							className: I,
+							children: e.detailsTitle
+						}), ve]
 					}),
-					/* @__PURE__ */ U("div", {
+					/* @__PURE__ */ B("div", {
 						className: "flex w-full min-w-0 flex-1 flex-col gap-5 px-8 py-6",
-						children: [/* @__PURE__ */ H("h2", {
-							className: B,
+						children: [/* @__PURE__ */ z("h2", {
+							className: I,
 							children: e.configurationTitle
-						}), /* @__PURE__ */ U("div", {
-							role: "group",
-							"aria-label": e.instructionsLabel,
-							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ H("span", {
-								className: a(V, $.subtitleText),
-								children: e.instructionsLabel
-							}), O && ((e) => k ? k(e) : /* @__PURE__ */ H(n, { content: e }))(O)]
-						})]
+						}), W]
 					}),
-					/* @__PURE__ */ H("div", {
+					/* @__PURE__ */ z("div", {
 						className: "flex w-full justify-center p-6 desktop:w-auto desktop:items-start",
-						children: /* @__PURE__ */ U("div", {
-							className: a("flex max-h-[70vh] w-full flex-col overflow-y-auto rounded-xl shadow-md desktop:w-[360px]", $.historyCard),
-							children: [/* @__PURE__ */ U("div", {
-								className: a("sticky top-0 z-10 flex flex-col gap-4 rounded-t-xl px-6 pb-2 pt-5", $.historyCard),
-								children: [
-									/* @__PURE__ */ H("h2", {
-										className: B,
-										children: e.historyTitle
-									}),
-									D && /* @__PURE__ */ H("p", {
-										className: a(G, $.subtitleText),
-										children: D
-									}),
-									e.historyLoadingMoreLabel && /* @__PURE__ */ H("span", {
-										role: "status",
-										"aria-live": "polite",
-										className: "sr-only",
-										children: P ? e.historyLoadingMoreLabel : ""
-									})
-								]
-							}), /* @__PURE__ */ H("div", {
-								className: "flex flex-1 flex-col gap-4 px-6 pb-2",
-								children: /* @__PURE__ */ H(Oe, {
-									items: M,
-									isLoading: N,
-									isLoadingMore: P,
-									skeletonCount: F,
-									error: te,
-									onRetry: ne,
-									onRunClick: L,
-									labels: {
-										historyTitle: e.historyTitle,
-										emptyLabel: e.historyEmptyLabel,
-										errorLabel: e.historyErrorLabel,
-										retryLabel: e.historyRetryLabel,
-										runStatusLabels: e.runStatusLabels,
-										unreadIndicatorLabel: e.unreadIndicatorLabel
-									},
-									footer: ce,
-									styles: {
-										typography: { runTimestampClassName: G },
-										colors: {
-											successIconColor: R?.successIconColor,
-											errorIconColor: R?.errorIconColor,
-											missedIconColor: R?.missedIconColor,
-											unreadDotColor: R?.unreadDotColor
-										}
-									}
-								})
-							})]
-						})
+						children: G(Ne.Card)
 					})
 				]
-			})
+			}))
 		]
 	});
-}, Ae = ({ modelLabel: e, instructionsLabel: t, modelDisplayName: r, instructionsMarkdown: i, renderInstructions: a, styles: o }) => {
+}, Ue = ({ modelLabel: e, instructionsLabel: t, modelDisplayName: r, instructionsMarkdown: i, renderInstructions: a, styles: o }) => {
 	let s = o?.typography?.fieldLabelClassName ?? "dial-tiny-text", c = o?.typography?.fieldValueClassName ?? "dial-body-text";
-	return /* @__PURE__ */ U("div", {
+	return /* @__PURE__ */ B("div", {
 		className: "flex flex-col gap-3",
-		children: [r && /* @__PURE__ */ U("div", {
+		children: [r && /* @__PURE__ */ B("div", {
 			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ H("span", {
+			children: [/* @__PURE__ */ z("span", {
 				className: s,
 				children: e
-			}), /* @__PURE__ */ H("p", {
+			}), /* @__PURE__ */ z("p", {
 				className: c,
 				children: r
 			})]
-		}), i && /* @__PURE__ */ U("div", {
+		}), i && /* @__PURE__ */ B("div", {
 			className: "flex flex-col gap-2",
-			children: [/* @__PURE__ */ H("span", {
+			children: [/* @__PURE__ */ z("span", {
 				className: s,
 				children: t
-			}), ((e) => a ? a(e) : /* @__PURE__ */ H(n, { content: e }))(i)]
+			}), ((e) => a ? a(e) : /* @__PURE__ */ z(n, { content: e }))(i)]
 		})]
 	});
 };
 //#endregion
-export { ve as DESCRIPTION_MAX_LENGTH, ce as ScheduledTaskCard, pe as ScheduledTaskCardGrid, fe as ScheduledTaskCardSkeleton, Ee as ScheduledTaskCreateForm, ke as ScheduledTaskDetailView, Ae as ScheduledTaskDetailsSummary, J as ScheduledTaskRepeat, Oe as ScheduledTaskRunHistoryList, Z as ScheduledTaskRunStatus, ge as ScheduledTasks, _e as ScheduledTasksSortKey };
+export { we as DESCRIPTION_MAX_LENGTH, U as ScheduledTaskCard, ye as ScheduledTaskCardGrid, G as ScheduledTaskCardSkeleton, Me as ScheduledTaskCreateForm, He as ScheduledTaskDetailView, Ue as ScheduledTaskDetailsSummary, q as ScheduledTaskRepeat, ze as ScheduledTaskRunHistoryList, Z as ScheduledTaskRunStatus, Se as ScheduledTasks, Ce as ScheduledTasksSortKey };