@epam/ai-dial-scheduled-tasks 1.1.0-dev.114 → 1.1.0-dev.121

package/index.js

@@ -1,299 +1,317 @@
-import { PanelEmptyState as e, buildCssVars as t, mergeClasses as n } from "@epam/ai-dial-chat-shared";
-import { Input as r, SearchBar as i, Textarea as a } from "@epam/ai-dial-kit";
-import { Calendar as o, CalendarMode as s, CardShell as c, DIAL_ICON_SIZE as l, DialDropdown as u, DialSelectField as d, DialSkeleton as f, DialSkeletonVariant as p, DialSpinner as m, FolderPath as h, GhostButton as g, GhostIconButton as _, Highlight as v, IconButton as y, LazyDialMarkdownEditor as b, NeutralButton as x, PrimaryButton as S } from "@epam/ai-dial-ui-kit";
-import { IconArrowLeft as C, IconArrowsSort as w, IconCalendarTime as T, IconCheck as E, IconChevronUp as D, IconDotsVertical as O, IconEdit as k, IconPlayerPlay as A, IconPlus as j, IconTrash as M } from "@tabler/icons-react";
-import { Suspense as N, lazy as P, useEffect as ee, useMemo as te, useRef as ne } from "react";
-import { Fragment as F, jsx as I, jsxs as L } from "react/jsx-runtime";
+import { MDMessageViewer as e, PanelEmptyState as t, buildCssVars as n, mergeClasses as r } from "@epam/ai-dial-chat-shared";
+import { Input as i, SearchBar as a, Textarea as o } from "@epam/ai-dial-kit";
+import { ButtonAppearance as s, ButtonDropdown as c, ButtonVariant as l, Calendar as u, CalendarMode as d, CardShell as f, DIAL_ICON_SIZE as p, DialDropdown as m, DialSelectField as h, DialSkeleton as g, DialSkeletonVariant as _, DialSpinner as v, FolderPath as y, GhostButton as b, GhostIconButton as x, Highlight as S, IconButton as C, LazyDialMarkdownEditor as w, NeutralButton as T, PrimaryButton as E } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as D, IconArrowLeft as O, IconCalendarTime as k, IconCircleCheck as A, IconCircleX as j, IconDotsVertical as M, IconEdit as N, IconPlayerPlay as P, IconPlus as F, IconTrash as I } from "@tabler/icons-react";
+import { Suspense as L, lazy as R, useEffect as ee, useMemo as te, useRef as ne } from "react";
+import { Fragment as z, jsx as B, jsxs as V } from "react/jsx-runtime";
 //#region src/models/scheduled-task-item.ts
-var R = /* @__PURE__ */ function(e) {
+var H = /* @__PURE__ */ function(e) {
 	return e.Shared = "shared", e.MyTasks = "myTasks", e;
-}({}), z = {
-	title: "_title_14goq_1",
-	description: "_description_14goq_5",
-	schedulePill: "_schedulePill_14goq_9",
-	scheduleLabel: "_scheduleLabel_14goq_14",
-	locationLabel: "_locationLabel_14goq_18",
-	locationLeaf: "_locationLeaf_14goq_22",
-	newBadge: "_newBadge_14goq_26",
-	locationDivider: "_locationDivider_14goq_31"
-}, B = ({ item: e, searchQuery: r = "", onEdit: i, onRunNow: a, onDelete: o, labels: s, styles: d, className: f }) => {
-	let p = s?.newBadgeLabel ?? "NEW", m = s?.actionsLabel ?? "More actions", g = s?.editActionLabel ?? "Edit", _ = s?.runNowActionLabel ?? "Run now", b = s?.deleteActionLabel ?? "Delete", { colors: x, typography: S } = d ?? {}, C = S?.titleClassName ?? "dial-body-semi-text", w = S?.descriptionClassName ?? "dial-small-text", T = S?.scheduleLabelClassName ?? "dial-tiny-text", E = S?.locationLabelClassName ?? "dial-tiny-text", D = S?.locationLeafClassName ?? "dial-tiny-semi-text", j = S?.newBadgeClassName ?? "dial-tiny-semi-text", N = t({
-		"--stc-title-text": x?.titleText,
-		"--stc-desc-text": x?.descriptionText,
-		"--stc-pill-bg": x?.schedulePillBackground,
-		"--stc-pill-border": x?.schedulePillBorder,
-		"--stc-schedule-label-text": x?.scheduleLabelText,
-		"--stc-location-label-text": x?.locationLabelText,
-		"--stc-location-leaf-text": x?.locationLeafText,
-		"--stc-new-badge-bg": x?.newBadgeBackground,
-		"--stc-new-badge-text": x?.newBadgeText,
-		"--stc-location-divider-border": x?.locationDividerBorder
-	}), P = [];
-	return i && P.push({
+}({}), U = {
+	title: "_title_1xv9i_1",
+	description: "_description_1xv9i_5",
+	schedulePill: "_schedulePill_1xv9i_9",
+	scheduleLabel: "_scheduleLabel_1xv9i_14",
+	locationLabel: "_locationLabel_1xv9i_18",
+	locationLeaf: "_locationLeaf_1xv9i_22",
+	newBadge: "_newBadge_1xv9i_26",
+	locationDivider: "_locationDivider_1xv9i_31"
+}, W = ({ item: e, searchQuery: t = "", onEdit: i, onRunNow: a, onDelete: o, onCardClick: s, labels: c, styles: l, className: u }) => {
+	let d = c?.newBadgeLabel ?? "NEW", h = c?.actionsLabel ?? "More actions", g = c?.editActionLabel ?? "Edit", _ = c?.runNowActionLabel ?? "Run now", v = c?.deleteActionLabel ?? "Delete", { colors: b, typography: x } = l ?? {}, w = x?.titleClassName ?? "dial-body-semi-text", T = x?.descriptionClassName ?? "dial-small-text", E = x?.scheduleLabelClassName ?? "dial-tiny-text", D = x?.locationLabelClassName ?? "dial-tiny-text", O = x?.locationLeafClassName ?? "dial-tiny-semi-text", k = x?.newBadgeClassName ?? "dial-tiny-semi-text", A = n({
+		"--stc-title-text": b?.titleText,
+		"--stc-desc-text": b?.descriptionText,
+		"--stc-pill-bg": b?.schedulePillBackground,
+		"--stc-pill-border": b?.schedulePillBorder,
+		"--stc-schedule-label-text": b?.scheduleLabelText,
+		"--stc-location-label-text": b?.locationLabelText,
+		"--stc-location-leaf-text": b?.locationLeafText,
+		"--stc-new-badge-bg": b?.newBadgeBackground,
+		"--stc-new-badge-text": b?.newBadgeText,
+		"--stc-location-divider-border": b?.locationDividerBorder
+	}), j = [];
+	i && j.push({
 		key: "edit",
 		label: g,
-		icon: /* @__PURE__ */ I(k, {
-			size: l.SM,
+		icon: /* @__PURE__ */ B(N, {
+			size: p.SM,
 			"aria-hidden": !0
 		}),
-		onClick: () => i(e.id)
-	}), a && P.push({
+		onClick: ({ domEvent: t }) => {
+			t.stopPropagation(), i(e.id);
+		}
+	}), a && j.push({
 		key: "runNow",
 		label: _,
-		icon: /* @__PURE__ */ I(A, {
-			size: l.SM,
+		icon: /* @__PURE__ */ B(P, {
+			size: p.SM,
 			"aria-hidden": !0
 		}),
-		onClick: () => a(e.id)
-	}), o && P.push({
+		onClick: ({ domEvent: t }) => {
+			t.stopPropagation(), a(e.id);
+		}
+	}), o && j.push({
 		key: "delete",
-		label: b,
-		icon: /* @__PURE__ */ I(M, {
-			size: l.SM,
+		label: v,
+		icon: /* @__PURE__ */ B(I, {
+			size: p.SM,
 			"aria-hidden": !0
 		}),
 		danger: !0,
-		onClick: () => o(e.id)
-	}), /* @__PURE__ */ L(c, {
-		role: "group",
+		onClick: ({ domEvent: t }) => {
+			t.stopPropagation(), o(e.id);
+		}
+	});
+	let F = s ? {
+		tabIndex: 0,
+		onClick: () => s(e.id),
+		onKeyDown: (t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), s(e.id));
+		}
+	} : {};
+	return /* @__PURE__ */ V(f, {
+		role: s ? "button" : "group",
 		"aria-label": e.displayName,
-		style: N,
-		className: n("h-[232px]", f),
+		style: A,
+		className: r("h-[232px]", s && "cursor-pointer", u),
+		...F,
 		children: [
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ V("div", {
 				className: "flex shrink-0 items-start justify-between gap-2",
-				children: [/* @__PURE__ */ L("div", {
+				children: [/* @__PURE__ */ V("div", {
 					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ I(v, {
+					children: [/* @__PURE__ */ B(S, {
 						text: e.displayName,
-						query: r,
+						query: t,
 						maxLines: 1,
-						className: n(C, z.title)
-					}), e.isNew && /* @__PURE__ */ I("span", {
-						className: n("shrink-0 rounded-full px-2 py-0.5", j, z.newBadge),
-						children: p
+						className: r(w, U.title)
+					}), e.isNew && /* @__PURE__ */ B("span", {
+						className: r("shrink-0 rounded-full px-2 py-0.5", k, U.newBadge),
+						children: d
 					})]
-				}), P.length > 0 && /* @__PURE__ */ I(u, {
-					items: P,
+				}), j.length > 0 && /* @__PURE__ */ B(m, {
+					items: j,
 					matchReferenceWidth: !1,
 					placement: "bottom-end",
-					children: /* @__PURE__ */ I(y, {
-						icon: /* @__PURE__ */ I(O, {
-							size: l.SM,
+					children: /* @__PURE__ */ B(C, {
+						icon: /* @__PURE__ */ B(M, {
+							size: p.SM,
 							"aria-hidden": !0
 						}),
-						"aria-label": m,
-						className: "shrink-0"
+						"aria-label": h,
+						className: "shrink-0",
+						onClick: (e) => e.stopPropagation()
 					})
 				})]
 			}),
-			e.descriptionPreview && /* @__PURE__ */ I("p", {
-				className: n("line-clamp-4 min-h-0 flex-1 overflow-hidden !leading-[22px]", w, z.description),
+			e.descriptionPreview && /* @__PURE__ */ B("p", {
+				className: r("line-clamp-4 min-h-0 flex-1 overflow-hidden !leading-[22px]", T, U.description),
 				children: e.descriptionPreview
 			}),
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ V("div", {
 				className: "mt-auto flex shrink-0 flex-col gap-3",
-				children: [/* @__PURE__ */ I("div", {
+				children: [/* @__PURE__ */ B("div", {
 					className: "flex min-h-[28px] items-center",
-					children: /* @__PURE__ */ I("span", {
-						className: n("inline-block rounded-lg border px-2 py-1", z.schedulePill, T, z.scheduleLabel),
+					children: /* @__PURE__ */ B("span", {
+						className: r("inline-block rounded-lg border px-2 py-1", U.schedulePill, E, U.scheduleLabel),
 						children: e.scheduleLabel
 					})
-				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ I(h, {
+				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ B(y, {
 					segments: e.locationSegments,
-					labelClassName: n(E, z.locationLabel),
-					leafClassName: n(D, z.locationLeaf),
-					className: n("pt-3", z.locationDivider)
+					labelClassName: r(D, U.locationLabel),
+					leafClassName: r(O, U.locationLeaf),
+					className: r("pt-3", U.locationDivider)
 				})]
 			})
 		]
 	});
-}, V = { card: "_card_1a43j_1" }, H = [
+}, G = { card: "_card_1a43j_1" }, re = [
 	"100%",
 	"100%",
 	"61%"
-], U = "var(--stcs-skeleton-bg)", W = ({ styles: e }) => /* @__PURE__ */ L(c, {
+], K = "var(--stcs-skeleton-bg)", ie = ({ styles: e }) => /* @__PURE__ */ V(f, {
 	"aria-hidden": !0,
-	style: t({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
-	className: n("h-[232px]", V.card),
+	style: n({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
+	className: r("h-[232px]", G.card),
 	children: [
-		/* @__PURE__ */ I(f, {
-			variant: p.Rectangular,
+		/* @__PURE__ */ B(g, {
+			variant: _.Rectangular,
 			width: "60%",
 			height: "20px",
-			color: U,
+			color: K,
 			className: "shrink-0"
 		}),
-		/* @__PURE__ */ I("div", {
+		/* @__PURE__ */ B("div", {
 			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden",
-			children: H.map((e, t) => /* @__PURE__ */ I(f, {
-				variant: p.Rectangular,
+			children: re.map((e, t) => /* @__PURE__ */ B(g, {
+				variant: _.Rectangular,
 				width: e,
 				height: "16px",
-				color: U
+				color: K
 			}, t))
 		}),
-		/* @__PURE__ */ I(f, {
-			variant: p.Rectangular,
+		/* @__PURE__ */ B(g, {
+			variant: _.Rectangular,
 			width: "110px",
 			height: "28px",
-			color: U,
+			color: K,
 			className: "shrink-0 rounded-lg"
 		})
 	]
-}), G = ({ items: e, searchQuery: t, onEdit: n, onRunNow: r, onDelete: i, labels: a, cardStyles: o, trailingSkeletonCount: s = 0, skeletonStyles: c }) => /* @__PURE__ */ L("div", {
+}), ae = ({ items: e, searchQuery: t, onEdit: n, onRunNow: r, onDelete: i, onCardClick: a, labels: o, cardStyles: s, trailingSkeletonCount: c = 0, skeletonStyles: l }) => /* @__PURE__ */ V("div", {
 	className: "grid grid-cols-1 gap-5 desktop:grid-cols-3",
-	children: [e.map((e) => /* @__PURE__ */ I(B, {
+	children: [e.map((e) => /* @__PURE__ */ B(W, {
 		item: e,
 		searchQuery: t,
 		onEdit: n,
 		onRunNow: r,
 		onDelete: i,
-		labels: a,
-		styles: o
-	}, e.id)), Array.from({ length: s }, (e, t) => /* @__PURE__ */ I(W, { styles: c }, `skeleton-${t}`))]
-}), K = { countBadge: "_countBadge_5ysac_1" }, q = ({ title: e, count: r, children: i, styles: a }) => {
-	let o = a?.typography?.titleClassName ?? "dial-small-semi-text", s = a?.typography?.countBadgeClassName ?? "dial-tiny-text", c = t({
+		onCardClick: a,
+		labels: o,
+		styles: s
+	}, e.id)), Array.from({ length: c }, (e, t) => /* @__PURE__ */ B(ie, { styles: l }, `skeleton-${t}`))]
+}), oe = { countBadge: "_countBadge_4bnxj_1" }, se = ({ title: e, count: t, children: i, styles: a }) => {
+	let o = a?.typography?.titleClassName ?? "dial-small-semi-text", s = a?.typography?.countBadgeClassName ?? "dial-tiny-text", c = n({
 		"--sts-badge-bg": a?.colors?.countBadgeBackground,
 		"--sts-badge-text": a?.colors?.countBadgeText
 	});
-	return /* @__PURE__ */ L("section", {
+	return /* @__PURE__ */ V("section", {
 		...e ? { "aria-label": e } : {},
 		style: c,
 		className: "flex flex-col gap-3",
-		children: [e && /* @__PURE__ */ L("div", {
+		children: [e && /* @__PURE__ */ V("div", {
 			className: "flex items-center gap-2 rtl:flex-row-reverse",
-			children: [/* @__PURE__ */ I("h2", {
+			children: [/* @__PURE__ */ B("h2", {
 				className: o,
 				children: e
-			}), /* @__PURE__ */ I("span", {
-				className: n("rounded-full px-2 py-0.5", s, K.countBadge),
-				children: r
+			}), /* @__PURE__ */ B("span", {
+				className: r("rounded-full px-2 py-0.5", s, oe.countBadge),
+				children: t
 			})]
 		}), i]
 	});
-}, J = {
-	container: "_container_sac6a_1",
-	subtitle: "_subtitle_sac6a_5",
-	sortButton: "_sortButton_sac6a_9"
-}, re = [R.Shared, R.MyTasks], ie = (e, t, n, r, i, a) => {
+}, q = {
+	container: "_container_r5sk9_1",
+	subtitle: "_subtitle_r5sk9_5",
+	sortButton: "_sortButton_r5sk9_9"
+}, ce = [H.Shared, H.MyTasks], le = (e, t, n, r, i, a) => {
 	if (!e) return t ? a.loadingMoreLabel : n ? a.errorLabel : r > 0 ? `${r}` : i ? a.noResultsLabel : a.emptyStateLabel;
-}, ae = (e) => {
+}, ue = (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 : ae(e.parentElement);
-}, oe = ({ labels: r, onCreateClick: a, searchQuery: o, onSearchQueryChange: s, sortKey: c, onSortChange: d, items: f, isLoading: p = !1, error: h, onRetry: _, hasMore: v = !1, isLoadingMore: y = !1, skeletonCount: b = 6, onLoadMore: x, onEdit: C, onRunNow: O, onDelete: k, styles: A }) => {
-	let { colors: M, typography: N, emptyStateIconSize: P = 48 } = A ?? {}, F = N?.titleClassName ?? "dial-h1-text", z = N?.subtitleClassName ?? "dial-body-text", B = t({
-		"--st-bg": M?.background,
-		"--st-subtitle-text": M?.subtitleText,
-		"--st-sort-text": M?.sortButtonText
-	}), V = r.sortOptions.find((e) => e.key === c)?.label ?? "", H = te(() => {
-		let e = { [R.Shared]: r.sharedSectionTitle };
-		return re.map((t) => ({
-			key: t,
-			title: e[t],
-			items: f.filter((e) => e.sectionKey === t)
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : ue(e.parentElement);
+}, de = ({ labels: e, onCreateClick: i, searchQuery: o, onSearchQueryChange: u, sortKey: d, onSortChange: f, items: m, isLoading: h = !1, error: g, onRetry: _, hasMore: y = !1, isLoadingMore: x = !1, skeletonCount: S = 6, onLoadMore: C, onEdit: w, onRunNow: T, onDelete: D, onCardClick: O, styles: A }) => {
+	let { colors: j, typography: M, emptyStateIconSize: N = 48 } = A ?? {}, P = M?.titleClassName ?? "dial-h1-text", I = M?.subtitleClassName ?? "dial-body-text", L = n({
+		"--st-bg": j?.background,
+		"--st-subtitle-text": j?.subtitleText,
+		"--st-sort-text": j?.sortButtonText
+	}), R = e.sortOptions.find((e) => e.key === d)?.label ?? "", z = te(() => {
+		let t = { [H.Shared]: e.sharedSectionTitle };
+		return ce.map((e) => ({
+			key: e,
+			title: t[e],
+			items: m.filter((t) => t.sectionKey === e)
 		})).filter((e) => e.items.length > 0);
-	}, [f, r.sharedSectionTitle]), U = ie(p, y, !!h, f.length, o.trim().length > 0, r), W = ne(null);
+	}, [m, e.sharedSectionTitle]), U = le(h, x, !!g, m.length, o.trim().length > 0, e), W = ne(null);
 	ee(() => {
 		let e = W.current;
-		if (!e || !x) return;
-		let t = ae(e.parentElement);
+		if (!e || !C) return;
+		let t = ue(e.parentElement);
 		if (!t) return;
 		let n = () => {
-			if (y || p || !v) return;
+			if (x || h || !y) return;
 			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
-			r.top < n.bottom && r.bottom > n.top && x();
+			r.top < n.bottom && r.bottom > n.top && C();
 		};
 		return t.addEventListener("scroll", n, { passive: !0 }), n(), () => t.removeEventListener("scroll", n);
 	}, [
-		v,
 		y,
-		p,
-		x
+		x,
+		h,
+		C
 	]);
-	let K = () => {
-		if (p) return /* @__PURE__ */ I(m, {});
-		if (h) return /* @__PURE__ */ L("div", {
+	let G = () => {
+		if (h) return /* @__PURE__ */ B(v, {});
+		if (g) return /* @__PURE__ */ V("div", {
 			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ I("p", {
-				className: n(z, J.subtitle),
-				children: r.errorLabel
-			}), /* @__PURE__ */ I(g, {
-				label: r.retryLabel,
+			children: [/* @__PURE__ */ B("p", {
+				className: r(I, q.subtitle),
+				children: e.errorLabel
+			}), /* @__PURE__ */ B(b, {
+				label: e.retryLabel,
 				onClick: _
 			})]
 		});
-		if (f.length === 0) return o.trim() ? /* @__PURE__ */ I("p", {
-			className: n(z, J.subtitle),
-			children: r.noResultsLabel
-		}) : /* @__PURE__ */ I(e, {
-			icon: /* @__PURE__ */ I(T, {
+		if (m.length === 0) return o.trim() ? /* @__PURE__ */ B("p", {
+			className: r(I, q.subtitle),
+			children: e.noResultsLabel
+		}) : /* @__PURE__ */ B(t, {
+			icon: /* @__PURE__ */ B(k, {
 				"aria-hidden": !0,
-				size: P,
+				size: N,
 				stroke: 1
 			}),
-			label: r.emptyStateLabel
+			label: e.emptyStateLabel
 		});
-		let t = H.length - 1;
-		return /* @__PURE__ */ L("div", {
+		let n = z.length - 1;
+		return /* @__PURE__ */ V("div", {
 			className: "flex w-full flex-col gap-6",
-			children: [H.map((e, n) => /* @__PURE__ */ I(q, {
-				title: e.title,
-				count: e.items.length,
-				children: /* @__PURE__ */ I(G, {
-					items: e.items,
+			children: [z.map((t, r) => /* @__PURE__ */ B(se, {
+				title: t.title,
+				count: t.items.length,
+				children: /* @__PURE__ */ B(ae, {
+					items: t.items,
 					searchQuery: o,
-					onEdit: C,
-					onRunNow: O,
-					onDelete: k,
-					labels: r.cardLabels,
-					trailingSkeletonCount: y && n === t ? b : 0,
-					skeletonStyles: { colors: { skeletonColor: M?.skeletonColor } }
+					onEdit: w,
+					onRunNow: T,
+					onDelete: D,
+					onCardClick: O,
+					labels: e.cardLabels,
+					trailingSkeletonCount: x && r === n ? S : 0,
+					skeletonStyles: { colors: { skeletonColor: j?.skeletonColor } }
 				})
-			}, e.key)), /* @__PURE__ */ I("div", {
+			}, t.key)), /* @__PURE__ */ B("div", {
 				ref: W,
 				"aria-hidden": !0,
 				className: "h-px w-full"
 			})]
 		});
-	}, oe = p || !!h || f.length === 0;
-	return /* @__PURE__ */ L("div", {
-		style: B,
-		className: n("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", J.container),
+	}, re = h || !!g || m.length === 0;
+	return /* @__PURE__ */ V("div", {
+		style: L,
+		className: r("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", q.container),
 		children: [
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ V("div", {
 				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ L("div", {
+				children: [/* @__PURE__ */ V("div", {
 					className: "min-w-0 gap-2",
-					children: [/* @__PURE__ */ I("h1", {
-						className: n("truncate", F),
-						children: r.title
-					}), /* @__PURE__ */ I("p", {
-						className: n("mt-1", z, J.subtitle),
-						children: r.subtitle
+					children: [/* @__PURE__ */ B("h1", {
+						className: r("truncate", P),
+						children: e.title
+					}), /* @__PURE__ */ B("p", {
+						className: r("mt-1", I, q.subtitle),
+						children: e.subtitle
 					})]
-				}), /* @__PURE__ */ I(S, {
-					label: r.createButtonLabel,
-					iconBefore: /* @__PURE__ */ I(j, {
-						size: l.SM,
+				}), /* @__PURE__ */ B(E, {
+					label: e.createButtonLabel,
+					iconBefore: /* @__PURE__ */ B(F, {
+						size: p.SM,
 						"aria-hidden": !0
 					}),
-					onClick: a,
+					onClick: i,
 					className: "shrink-0"
 				})]
 			}),
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ V("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ I("div", {
+				children: [/* @__PURE__ */ B("div", {
 					className: "flex-1",
-					children: /* @__PURE__ */ I(i, {
+					children: /* @__PURE__ */ B(a, {
 						value: o,
-						onChange: s,
+						onChange: u,
 						labels: {
-							placeholder: r.searchPlaceholder,
-							ariaLabel: r.searchAriaLabel,
-							clearLabel: r.clearSearchLabel
+							placeholder: e.searchPlaceholder,
+							ariaLabel: e.searchAriaLabel,
+							clearLabel: e.clearSearchLabel
 						},
 						iconSize: 18,
 						iconStrokeWidth: 1.8,
@@ -303,292 +321,568 @@ var R = /* @__PURE__ */ function(e) {
 							clearButtonClassName: "size-11 desktop:size-auto"
 						}
 					})
-				}), r.sortOptions.length > 0 && /* @__PURE__ */ I(u, {
-					matchReferenceWidth: !1,
-					placement: "bottom-end",
-					listClassName: "cp-dropdown-overlay",
-					items: r.sortOptions.map((e) => ({
-						key: e.key,
-						label: /* @__PURE__ */ L("span", {
-							className: "flex w-full items-center justify-between gap-2",
-							children: [e.label, e.key === c && /* @__PURE__ */ I(E, {
-								size: l.SM,
-								"aria-hidden": !0
-							})]
-						}),
-						onClick: () => d(e.key)
-					})),
-					children: /* @__PURE__ */ I(g, {
-						label: V,
-						"aria-label": r.sortLabel,
-						className: n("rounded-[4px]", J.sortButton),
-						iconBefore: /* @__PURE__ */ I(w, {
-							size: 20,
-							"aria-hidden": !0
-						}),
-						iconAfter: /* @__PURE__ */ I(D, {
-							size: 20,
-							"aria-hidden": !0
-						})
-					})
+				}), e.sortOptions.length > 0 && /* @__PURE__ */ B(c, {
+					label: R,
+					variant: l.Primary,
+					appearance: s.Ghost,
+					items: e.sortOptions.map((e) => ({
+						...e,
+						onClick: () => f(e.key)
+					}))
 				})]
 			}),
-			/* @__PURE__ */ I("span", {
+			/* @__PURE__ */ B("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				children: U
 			}),
-			/* @__PURE__ */ I("div", {
-				className: n("mx-auto flex size-full w-full max-w-[1180px] flex-col", oe && "items-center justify-center"),
-				children: K()
+			/* @__PURE__ */ B("div", {
+				className: r("mx-auto flex size-full w-full max-w-[1180px] flex-col", re && "items-center justify-center"),
+				children: G()
 			})
 		]
 	});
-}, se = /* @__PURE__ */ function(e) {
+}, fe = /* @__PURE__ */ function(e) {
 	return e.FirstToRun = "firstToRun", e.LastToRun = "lastToRun", e.Newest = "newest", e.NameAZ = "nameAZ", e;
-}({}), ce = 500, Y = /* @__PURE__ */ function(e) {
+}({}), pe = 500, J = /* @__PURE__ */ function(e) {
 	return e.Once = "once", e.Recurring = "recurring", e;
-}({}), X = /* @__PURE__ */ function(e) {
+}({}), Y = /* @__PURE__ */ function(e) {
 	return e.Daily = "daily", e.Weekly = "weekly", e.Monthly = "monthly", e;
-}({}), Z = (e) => String(e).padStart(2, "0"), le = (e) => e ? new Date(e) : null, ue = (e) => {
+}({}), X = (e) => String(e).padStart(2, "0"), me = (e) => e ? new Date(e) : null, he = (e) => {
+	if (e == null) return "";
+	let t = e instanceof Date ? e : new Date(e);
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${X(t.getMonth() + 1)}-${X(t.getDate())}T${X(t.getHours())}:${X(t.getMinutes())}`;
+}, ge = (e) => {
+	if (!e) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+}, _e = (e) => {
 	if (e == null) return "";
 	let t = e instanceof Date ? e : new Date(e);
-	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${Z(t.getMonth() + 1)}-${Z(t.getDate())}T${Z(t.getHours())}:${Z(t.getMinutes())}`;
-}, de = (e) => {
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${X(t.getMonth() + 1)}-${X(t.getDate())}`;
+}, ve = (e) => {
 	let t = Number(e);
 	return e && Number.isFinite(t) ? String(t + 1) : null;
-}, fe = (e) => {
+}, ye = (e) => {
 	let t = typeof e == "string" ? Number(e) : NaN;
 	return Number.isFinite(t) ? String(t - 1) : "";
-}, Q = {
-	container: "_container_1wply_1",
-	header: "_header_1wply_5",
-	detailsColumn: "_detailsColumn_1wply_9",
-	sectionSubtitle: "_sectionSubtitle_1wply_13",
-	instructionsError: "_instructionsError_1wply_17"
-}, $ = (e) => `${e} *`, pe = P(async () => ({ default: (await b()).DialMarkdownEditor })), me = ({ labels: e, values: i, errors: c, modelOptions: u, onFieldChange: f, onBack: p, onCancel: h, onSubmit: g, isSubmitting: v = !1, markdownEditorTheme: y, styles: b }) => {
-	let { colors: w, typography: T } = b ?? {}, E = T?.titleClassName ?? "dial-h1-text", D = T?.sectionTitleClassName ?? "dial-body-semi-text", O = T?.sectionSubtitleClassName ?? "dial-tiny-text", k = T?.scheduleSectionLabelClassName ?? "dial-body-semi-text mb-1", A = T?.instructionsErrorClassName ?? "dial-small-text", j = t({
-		"--stcf-bg": w?.background,
-		"--stcf-header-border": w?.headerBorder,
-		"--stcf-details-border": w?.detailsColumnBorder,
-		"--stcf-subtitle-text": w?.sectionSubtitleText,
-		"--stcf-error-text": w?.instructionsErrorText
-	}), M = v || !i.displayName.trim() || !i.modelId || !i.prompt.trim();
-	return /* @__PURE__ */ L("div", {
+}, Z = {
+	container: "_container_sq3dp_1",
+	header: "_header_sq3dp_5",
+	detailsColumn: "_detailsColumn_sq3dp_9",
+	sectionSubtitle: "_sectionSubtitle_sq3dp_13",
+	instructionsError: "_instructionsError_sq3dp_17"
+}, be = (e) => `${e} *`, xe = R(async () => ({ default: (await w()).DialMarkdownEditor })), Se = ({ labels: e, values: t, errors: a, modelOptions: s, onFieldChange: c, onBack: l, onCancel: f, onSubmit: m, isSubmitting: g = !1, markdownEditorTheme: _, styles: y }) => {
+	let { colors: b, typography: S } = y ?? {}, C = S?.titleClassName ?? "dial-h1-text", w = S?.sectionTitleClassName ?? "dial-body-semi-text", D = S?.sectionSubtitleClassName ?? "dial-tiny-text", k = S?.scheduleSectionLabelClassName ?? "dial-body-semi-text mb-1", A = S?.instructionsErrorClassName ?? "dial-small-text", j = n({
+		"--stcf-bg": b?.background,
+		"--stcf-header-border": b?.headerBorder,
+		"--stcf-details-border": b?.detailsColumnBorder,
+		"--stcf-subtitle-text": b?.sectionSubtitleText,
+		"--stcf-error-text": b?.instructionsErrorText
+	}), M = g || !t.displayName.trim() || !t.modelId || !t.prompt.trim();
+	return /* @__PURE__ */ V("div", {
 		style: j,
-		className: n("flex h-full w-full flex-col overflow-y-auto", Q.container),
-		children: [/* @__PURE__ */ L("div", {
-			className: n("flex h-16 items-center justify-between gap-6 border-b px-8", Q.header),
-			children: [/* @__PURE__ */ L("div", {
+		className: r("flex h-full w-full flex-col overflow-y-auto", Z.container),
+		children: [/* @__PURE__ */ V("div", {
+			className: r("flex h-16 items-center justify-between gap-6 border-b px-8", Z.header),
+			children: [/* @__PURE__ */ V("div", {
 				className: "flex min-w-0 flex-1 items-center gap-2",
-				children: [/* @__PURE__ */ I(_, {
-					icon: /* @__PURE__ */ I(C, {
-						size: l.LG,
+				children: [/* @__PURE__ */ B(x, {
+					icon: /* @__PURE__ */ B(O, {
+						size: p.LG,
 						className: "rtl:scale-x-[-1]",
 						"aria-hidden": !0
 					}),
 					"aria-label": e.backButtonLabel,
-					onClick: p
-				}), /* @__PURE__ */ I("h1", {
-					className: n("truncate", E),
+					onClick: l
+				}), /* @__PURE__ */ B("h1", {
+					className: r("truncate", C),
 					children: e.pageTitle
 				})]
-			}), /* @__PURE__ */ L("div", {
+			}), /* @__PURE__ */ V("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ I(x, {
+				children: [/* @__PURE__ */ B(T, {
 					label: e.cancelButtonLabel,
-					onClick: h,
-					disabled: v
-				}), /* @__PURE__ */ I(S, {
+					onClick: f,
+					disabled: g
+				}), /* @__PURE__ */ B(E, {
 					label: e.createButtonLabel,
-					onClick: g,
+					onClick: m,
 					disabled: M
 				})]
 			})]
-		}), /* @__PURE__ */ L("div", {
+		}), /* @__PURE__ */ V("div", {
 			className: "flex flex-1 flex-col desktop:flex-row",
 			children: [
-				/* @__PURE__ */ L("div", {
+				/* @__PURE__ */ V("div", {
 					role: "group",
 					"aria-label": e.detailsSectionTitle,
-					className: n("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", Q.detailsColumn),
+					className: r("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", Z.detailsColumn),
 					children: [
-						/* @__PURE__ */ L("div", {
+						/* @__PURE__ */ V("div", {
 							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ I("h2", {
-								className: D,
+							children: [/* @__PURE__ */ B("h2", {
+								className: w,
 								children: e.detailsSectionTitle
-							}), /* @__PURE__ */ I("p", {
-								className: n(O, Q.sectionSubtitle),
+							}), /* @__PURE__ */ B("p", {
+								className: r(D, Z.sectionSubtitle),
 								children: e.detailsSectionSubtitle
 							})]
 						}),
-						/* @__PURE__ */ I(r, {
+						/* @__PURE__ */ B(i, {
 							id: "scheduled-task-display-name",
-							value: i.displayName,
-							onChange: (e) => f("displayName", e ?? ""),
+							value: t.displayName,
+							onChange: (e) => c("displayName", e ?? ""),
 							labelProps: {
 								label: e.displayNameLabel,
 								required: !0
 							},
-							invalid: !!c.displayName,
-							error: c.displayName
+							invalid: !!a.displayName,
+							error: a.displayName
 						}),
-						/* @__PURE__ */ I(a, {
+						/* @__PURE__ */ B(o, {
 							id: "scheduled-task-description",
-							value: i.description ?? "",
-							onChange: (e) => f("description", e),
+							value: t.description ?? "",
+							onChange: (e) => c("description", e),
 							labelProps: { label: e.descriptionLabel },
 							maxLength: 500,
-							invalid: !!c.description,
-							error: c.description,
-							caption: i.description ? `${i.description.length}/500` : void 0
+							invalid: !!a.description,
+							error: a.description,
+							caption: t.description ? `${t.description.length}/500` : void 0
 						}),
-						/* @__PURE__ */ I(d, {
+						/* @__PURE__ */ B(h, {
 							label: e.modelOrAgentLabel,
 							required: !0,
-							value: i.modelId,
+							value: t.modelId,
 							placeholder: e.modelPlaceholder,
-							onChange: (e) => f("modelId", e),
-							error: c.modelId,
-							options: u.map((e) => ({
+							onChange: (e) => c("modelId", e),
+							error: a.modelId,
+							options: s.map((e) => ({
 								value: e.id,
 								label: e.label
 							}))
 						}),
-						/* @__PURE__ */ L("fieldset", {
+						/* @__PURE__ */ V("fieldset", {
 							className: "flex flex-col gap-3",
 							children: [
-								/* @__PURE__ */ I("legend", {
+								/* @__PURE__ */ B("legend", {
 									className: k,
 									children: e.scheduleSectionLabel
 								}),
-								/* @__PURE__ */ I(d, {
+								/* @__PURE__ */ B(h, {
 									label: e.scheduleTypeAriaLabel,
-									value: i.scheduleType,
-									onChange: (e) => f("scheduleType", e),
+									value: t.scheduleType,
+									onChange: (e) => c("scheduleType", e),
 									options: [{
-										value: Y.Once,
+										value: J.Once,
 										label: e.scheduleTypeOnceLabel
 									}, {
-										value: Y.Recurring,
+										value: J.Recurring,
 										label: e.scheduleTypeRecurringLabel
 									}]
 								}),
-								i.scheduleType === Y.Once && /* @__PURE__ */ L("div", {
+								t.scheduleType === J.Once && /* @__PURE__ */ V("div", {
 									className: "flex flex-col gap-1",
-									children: [/* @__PURE__ */ I(o, {
+									children: [/* @__PURE__ */ B(u, {
 										id: "scheduled-task-run-at",
-										mode: s.DateTime,
-										value: le(i.runAt),
-										onChange: (e) => f("runAt", ue(e)),
-										label: $(e.runAtLabel),
-										invalid: !!c.runAt
-									}), c.runAt && /* @__PURE__ */ I("p", {
-										className: n(A, Q.instructionsError),
-										children: c.runAt
+										mode: d.DateTime,
+										value: me(t.runAt),
+										onChange: (e) => c("runAt", he(e)),
+										label: be(e.runAtLabel),
+										invalid: !!a.runAt
+									}), a.runAt && /* @__PURE__ */ B("p", {
+										className: r(A, Z.instructionsError),
+										children: a.runAt
 									})]
 								}),
-								i.scheduleType === Y.Recurring && /* @__PURE__ */ L(F, { children: [
-									/* @__PURE__ */ I(d, {
+								t.scheduleType === J.Recurring && /* @__PURE__ */ V(z, { children: [
+									/* @__PURE__ */ B(h, {
 										label: e.frequencyLabel,
-										value: i.frequency,
-										onChange: (e) => f("frequency", e),
+										value: t.frequency,
+										onChange: (e) => c("frequency", e),
 										options: e.frequencyOptions.map((e) => ({
 											value: e.key,
 											label: e.label
 										}))
 									}),
-									/* @__PURE__ */ L("div", {
+									/* @__PURE__ */ V("div", {
 										className: "flex flex-col gap-1",
-										children: [/* @__PURE__ */ I(o, {
+										children: [/* @__PURE__ */ B(u, {
 											id: "scheduled-task-time",
-											mode: s.Time,
-											value: i.time,
-											onChange: (e) => f("time", typeof e == "string" ? e : ""),
-											label: $(e.timeLabel),
-											invalid: !!c.time
-										}), c.time && /* @__PURE__ */ I("p", {
-											className: n(A, Q.instructionsError),
-											children: c.time
+											mode: d.Time,
+											value: t.time,
+											onChange: (e) => c("time", typeof e == "string" ? e : ""),
+											label: be(e.timeLabel),
+											invalid: !!a.time
+										}), a.time && /* @__PURE__ */ B("p", {
+											className: r(A, Z.instructionsError),
+											children: a.time
 										})]
 									}),
-									i.frequency === X.Weekly && /* @__PURE__ */ L("div", {
+									t.frequency === Y.Weekly && /* @__PURE__ */ V("div", {
 										className: "flex flex-col gap-1",
-										children: [/* @__PURE__ */ I(o, {
+										children: [/* @__PURE__ */ B(u, {
 											id: "scheduled-task-day-of-week",
-											mode: s.Weekday,
-											value: de(i.dayOfWeek),
-											onChange: (e) => f("dayOfWeek", fe(e)),
-											label: $(e.dayOfWeekLabel),
-											invalid: !!c.dayOfWeek
-										}), c.dayOfWeek && /* @__PURE__ */ I("p", {
-											className: n(A, Q.instructionsError),
-											children: c.dayOfWeek
+											mode: d.Weekday,
+											value: ve(t.dayOfWeek),
+											onChange: (e) => c("dayOfWeek", ye(e)),
+											label: be(e.dayOfWeekLabel),
+											invalid: !!a.dayOfWeek
+										}), a.dayOfWeek && /* @__PURE__ */ B("p", {
+											className: r(A, Z.instructionsError),
+											children: a.dayOfWeek
 										})]
 									}),
-									i.frequency === X.Monthly && /* @__PURE__ */ I(r, {
+									t.frequency === Y.Monthly && /* @__PURE__ */ B(i, {
 										id: "scheduled-task-day-of-month",
-										value: i.dayOfMonth ?? "",
-										onChange: (e) => f("dayOfMonth", e ?? ""),
+										value: t.dayOfMonth ?? "",
+										onChange: (e) => c("dayOfMonth", e ?? ""),
 										labelProps: {
 											label: e.dayOfMonthLabel,
 											required: !0
 										},
-										invalid: !!c.dayOfMonth,
-										error: c.dayOfMonth
+										invalid: !!a.dayOfMonth,
+										error: a.dayOfMonth
+									}),
+									/* @__PURE__ */ V("div", {
+										className: "flex flex-col gap-3 desktop:flex-row",
+										children: [/* @__PURE__ */ V("div", {
+											className: "flex flex-1 flex-col gap-1",
+											children: [/* @__PURE__ */ B(u, {
+												id: "scheduled-task-start-date",
+												mode: d.Date,
+												value: ge(t.startDate),
+												onChange: (e) => c("startDate", _e(e)),
+												label: e.startDateLabel,
+												placeholder: e.startDatePlaceholder,
+												invalid: !!a.startDate
+											}), a.startDate && /* @__PURE__ */ B("p", {
+												className: r(A, Z.instructionsError),
+												children: a.startDate
+											})]
+										}), /* @__PURE__ */ V("div", {
+											className: "flex flex-1 flex-col gap-1",
+											children: [/* @__PURE__ */ B(u, {
+												id: "scheduled-task-end-date",
+												mode: d.Date,
+												value: ge(t.endDate),
+												onChange: (e) => c("endDate", _e(e)),
+												label: e.endDateLabel,
+												placeholder: e.endDatePlaceholder,
+												invalid: !!a.endDate
+											}), a.endDate && /* @__PURE__ */ B("p", {
+												className: r(A, Z.instructionsError),
+												children: a.endDate
+											})]
+										})]
 									})
 								] })
 							]
 						})
 					]
 				}),
-				/* @__PURE__ */ L("div", {
+				/* @__PURE__ */ V("div", {
 					role: "group",
 					"aria-label": e.configurationSectionTitle,
 					className: "flex w-full min-w-0 flex-1 flex-col gap-5 px-8 py-6",
-					children: [/* @__PURE__ */ L("div", {
+					children: [/* @__PURE__ */ V("div", {
 						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ I("h2", {
-							className: D,
+						children: [/* @__PURE__ */ B("h2", {
+							className: w,
 							children: e.configurationSectionTitle
-						}), /* @__PURE__ */ I("p", {
-							className: n(O, Q.sectionSubtitle),
+						}), /* @__PURE__ */ B("p", {
+							className: r(D, Z.sectionSubtitle),
 							children: e.configurationSectionSubtitle
 						})]
-					}), /* @__PURE__ */ L("div", {
+					}), /* @__PURE__ */ V("div", {
 						role: "group",
 						"aria-label": e.instructionsLabel,
 						className: "flex flex-1 flex-col gap-1",
 						children: [
-							/* @__PURE__ */ I("span", {
+							/* @__PURE__ */ B("span", {
 								className: k,
 								children: e.instructionsLabel
 							}),
-							/* @__PURE__ */ I(N, {
-								fallback: /* @__PURE__ */ I(m, {}),
-								children: /* @__PURE__ */ I(pe, {
-									value: i.prompt,
-									onChange: (e) => f("prompt", e),
+							/* @__PURE__ */ B(L, {
+								fallback: /* @__PURE__ */ B(v, {}),
+								children: /* @__PURE__ */ B(xe, {
+									value: t.prompt,
+									onChange: (e) => c("prompt", e),
 									height: 480,
-									theme: y
+									theme: _
 								})
 							}),
-							c.prompt && /* @__PURE__ */ I("p", {
-								className: n(A, Q.instructionsError),
-								children: c.prompt
+							a.prompt && /* @__PURE__ */ B("p", {
+								className: r(A, Z.instructionsError),
+								children: a.prompt
 							})
 						]
 					})]
 				}),
-				/* @__PURE__ */ I("div", {
+				/* @__PURE__ */ B("div", {
 					"aria-hidden": !0,
 					className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
 				})
 			]
 		})]
 	});
+}, Q = /* @__PURE__ */ function(e) {
+	return e.Success = "success", e.Error = "error", e.InProgress = "inProgress", e.Missed = "missed", e;
+}({}), $ = {
+	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"
+}, Ce = (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 : Ce(e.parentElement);
+}, we = ({ status: e }) => {
+	switch (e) {
+		case Q.Success: return /* @__PURE__ */ B(A, {
+			size: p.SM,
+			className: $.successIcon,
+			"aria-hidden": !0
+		});
+		case Q.Error: return /* @__PURE__ */ B(j, {
+			size: p.SM,
+			className: $.errorIcon,
+			"aria-hidden": !0
+		});
+		case Q.InProgress: return /* @__PURE__ */ B("span", {
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ B(v, { size: p.SM })
+		});
+		case Q.Missed: return /* @__PURE__ */ B(D, {
+			size: p.SM,
+			className: $.missedIcon,
+			"aria-hidden": !0
+		});
+		default: return null;
+	}
+}, Te = ({ labels: t, onBack: i, displayName: a, isLoading: o = !1, error: s, onRetry: c, description: l, modelLabel: u, repeatsLabel: d, activeWindowLabel: f, nextRunLabel: m, instructionsMarkdown: h, renderInstructions: y, runs: S, runsIsLoading: C = !1, runsIsLoadingMore: w = !1, runsSkeletonCount: T = 6, runsError: E, onRunsRetry: D, runsHasMore: k = !1, onRunsLoadMore: A, onRunClick: j, styles: M }) => {
+	let { colors: N, typography: P } = M ?? {}, F = P?.titleClassName ?? "dial-h1-text", I = P?.sectionTitleClassName ?? "dial-body-semi-text", L = P?.fieldLabelClassName ?? "dial-tiny-text", R = P?.fieldValueClassName ?? "dial-body-text", te = P?.runTimestampClassName ?? "dial-small-text", z = n({
+		"--stdv-bg": N?.background,
+		"--stdv-header-border": N?.headerBorder,
+		"--stdv-details-border": N?.detailsColumnBorder,
+		"--stdv-subtitle-text": N?.subtitleText,
+		"--stdv-success-icon": N?.successIconColor,
+		"--stdv-error-icon": N?.errorIconColor,
+		"--stdv-missed-icon": N?.missedIconColor,
+		"--stdv-history-bg": N?.historyCardBackground
+	}), H = ne(null);
+	ee(() => {
+		let e = H.current;
+		if (!e || !A) return;
+		let t = Ce(e.parentElement);
+		if (!t) return;
+		let n = () => {
+			if (w || C || !k) return;
+			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
+			r.top < n.bottom && r.bottom > n.top && A();
+		};
+		return t.addEventListener("scroll", n, { passive: !0 }), n(), () => t.removeEventListener("scroll", n);
+	}, [
+		k,
+		w,
+		C,
+		A
+	]);
+	let U = (t) => y ? y(t) : /* @__PURE__ */ B(e, { content: t }), W = (e) => {
+		let n = `${t.runStatusLabels[e.status]} ${e.timestampLabel}`, i = !!j;
+		return /* @__PURE__ */ V("li", {
+			...i ? {
+				role: "button",
+				tabIndex: 0,
+				onClick: () => j?.(e.id),
+				onKeyDown: (t) => {
+					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), j?.(e.id));
+				}
+			} : {},
+			"aria-label": n,
+			className: r("flex h-8 items-center justify-between gap-2 rounded-full pe-2 ps-5", i && "cursor-pointer"),
+			children: [/* @__PURE__ */ B("span", {
+				className: r(te, "truncate"),
+				children: e.timestampLabel
+			}), /* @__PURE__ */ B("span", {
+				className: "flex h-8 w-14 shrink-0 items-center justify-end",
+				children: /* @__PURE__ */ B(we, { status: e.status })
+			})]
+		}, e.id);
+	}, G = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ V("li", {
+		"aria-hidden": "true",
+		className: "flex h-8 items-center justify-between gap-2 pe-2 ps-5",
+		children: [/* @__PURE__ */ B(g, {
+			variant: _.Rectangular,
+			width: "160px",
+			height: "16px"
+		}), /* @__PURE__ */ B(g, {
+			variant: _.Rectangular,
+			width: "16px",
+			height: "16px",
+			className: "shrink-0 rounded-full"
+		})]
+	}, `history-skeleton-${t}`));
+	return /* @__PURE__ */ V("div", {
+		style: z,
+		className: r("flex h-full w-full flex-col overflow-y-auto", $.container),
+		children: [
+			/* @__PURE__ */ V("div", {
+				className: r("flex h-16 shrink-0 items-center gap-2 border-b px-8", $.header),
+				children: [/* @__PURE__ */ B(x, {
+					icon: /* @__PURE__ */ B(O, {
+						size: p.LG,
+						className: "rtl:scale-x-[-1]",
+						"aria-hidden": !0
+					}),
+					"aria-label": t.backAriaLabel,
+					onClick: i
+				}), /* @__PURE__ */ B("h1", {
+					className: r("truncate", F),
+					children: a
+				})]
+			}),
+			o && /* @__PURE__ */ B("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ B(v, {})
+			}),
+			!o && s && /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col items-center justify-center gap-3",
+				children: [/* @__PURE__ */ B("p", {
+					className: r(R, $.subtitleText),
+					children: t.errorLabel
+				}), /* @__PURE__ */ B(b, {
+					label: t.retryLabel,
+					onClick: c
+				})]
+			}),
+			!o && !s && /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col desktop:flex-row",
+				children: [
+					/* @__PURE__ */ V("div", {
+						role: "group",
+						"aria-label": t.detailsTitle,
+						className: r("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", $.detailsColumn),
+						children: [
+							/* @__PURE__ */ B("h2", {
+								className: I,
+								children: t.detailsTitle
+							}),
+							l && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B("span", {
+									className: L,
+									children: t.descriptionLabel
+								}), /* @__PURE__ */ B("p", {
+									className: R,
+									children: l
+								})]
+							}),
+							u && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B("span", {
+									className: L,
+									children: t.modelLabel
+								}), /* @__PURE__ */ B("p", {
+									className: R,
+									children: u
+								})]
+							}),
+							d && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B("span", {
+									className: L,
+									children: t.repeatsLabel
+								}), /* @__PURE__ */ B("p", {
+									className: R,
+									children: d
+								})]
+							}),
+							f && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B("span", {
+									className: L,
+									children: t.activeWindowLabel
+								}), /* @__PURE__ */ B("p", {
+									className: R,
+									children: f
+								})]
+							})
+						]
+					}),
+					/* @__PURE__ */ V("div", {
+						className: "flex w-full min-w-0 flex-1 flex-col gap-5 px-8 py-6",
+						children: [/* @__PURE__ */ B("h2", {
+							className: I,
+							children: t.configurationTitle
+						}), /* @__PURE__ */ V("div", {
+							role: "group",
+							"aria-label": t.instructionsLabel,
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ B("span", {
+								className: L,
+								children: t.instructionsLabel
+							}), h && U(h)]
+						})]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "flex w-full justify-center p-6 desktop:w-auto desktop:items-start",
+						children: /* @__PURE__ */ V("div", {
+							className: r("flex w-full flex-col gap-4 overflow-y-auto rounded-xl px-6 py-5 shadow-md desktop:max-h-[70vh] desktop:w-[360px]", $.historyCard),
+							children: [
+								/* @__PURE__ */ B("h2", {
+									className: I,
+									children: t.historyTitle
+								}),
+								m && /* @__PURE__ */ B("p", {
+									className: r(te, $.subtitleText),
+									children: m
+								}),
+								t.historyLoadingMoreLabel && /* @__PURE__ */ B("span", {
+									role: "status",
+									"aria-live": "polite",
+									className: "sr-only",
+									children: w ? t.historyLoadingMoreLabel : ""
+								}),
+								C && S.length === 0 ? /* @__PURE__ */ B("ul", {
+									"aria-label": t.historyTitle,
+									children: G(T)
+								}) : E ? /* @__PURE__ */ V("div", {
+									className: "flex flex-col items-start gap-3",
+									children: [/* @__PURE__ */ B("p", {
+										className: r(R, $.subtitleText),
+										children: t.historyErrorLabel
+									}), /* @__PURE__ */ B(b, {
+										label: t.historyRetryLabel,
+										onClick: D
+									})]
+								}) : S.length === 0 ? /* @__PURE__ */ B("p", {
+									className: r(R, $.subtitleText),
+									children: t.historyEmptyLabel
+								}) : /* @__PURE__ */ V("ul", {
+									"aria-label": t.historyTitle,
+									children: [
+										S.map(W),
+										w && G(T),
+										/* @__PURE__ */ B("li", {
+											ref: H,
+											"aria-hidden": !0,
+											className: "h-px w-full"
+										})
+									]
+								})
+							]
+						})
+					})
+				]
+			})
+		]
+	});
 };
 //#endregion
-export { ce as DESCRIPTION_MAX_LENGTH, B as ScheduledTaskCard, G as ScheduledTaskCardGrid, W as ScheduledTaskCardSkeleton, me as ScheduledTaskCreateForm, X as ScheduledTaskFrequency, Y as ScheduledTaskScheduleType, q as ScheduledTaskSection, R as ScheduledTaskSectionKey, oe as ScheduledTasks, se as ScheduledTasksSortKey };
+export { pe as DESCRIPTION_MAX_LENGTH, W as ScheduledTaskCard, ae as ScheduledTaskCardGrid, ie as ScheduledTaskCardSkeleton, Se as ScheduledTaskCreateForm, Te as ScheduledTaskDetailView, Y as ScheduledTaskFrequency, Q as ScheduledTaskRunStatus, J as ScheduledTaskScheduleType, se as ScheduledTaskSection, H as ScheduledTaskSectionKey, de as ScheduledTasks, fe as ScheduledTasksSortKey };