@epam/ai-dial-scheduled-tasks 1.1.0-dev.99 → 1.2.0-dev.1

package/index.js

@@ -1,596 +1,1037 @@
-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";
-//#region src/models/scheduled-task-item.ts
-var R = /* @__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({
-		key: "edit",
-		label: g,
-		icon: /* @__PURE__ */ I(k, {
-			size: l.SM,
-			"aria-hidden": !0
-		}),
-		onClick: () => i(e.id)
-	}), a && P.push({
-		key: "runNow",
-		label: _,
-		icon: /* @__PURE__ */ I(A, {
-			size: l.SM,
-			"aria-hidden": !0
-		}),
-		onClick: () => a(e.id)
-	}), o && P.push({
-		key: "delete",
-		label: b,
-		icon: /* @__PURE__ */ I(M, {
-			size: l.SM,
-			"aria-hidden": !0
-		}),
-		danger: !0,
-		onClick: () => o(e.id)
-	}), /* @__PURE__ */ L(c, {
-		role: "group",
+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 ee, PrimaryButton as te, Search as T, Select as ne, Skeleton as E, SkeletonVariant as D, Spinner as O, Switch as k, Tabs as re, Textarea as A } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as j, IconArrowLeft as ie, IconCircleCheck as M, IconCircleX as ae, IconClipboardX as N, IconPencilMinus as oe, IconPlayerPause as se, IconPlus as ce, IconTrashX as le } from "@tabler/icons-react";
+import { Suspense as ue, lazy as de, useCallback as P, useEffect as F, useId as I, useLayoutEffect as L, useMemo as fe, useRef as R, useState as pe } from "react";
+import { Fragment as z, jsx as B, jsxs as V } from "react/jsx-runtime";
+import { BuilderFormContainer as H } from "@epam/ai-dial-builder-form";
+import { LazyMarkdownEditor as me } from "@epam/ai-dial-ui-kit/editors";
+var U = {
+	title: "_title_1hxc3_1",
+	description: "_description_1hxc3_5",
+	schedulePill: "_schedulePill_1hxc3_9",
+	scheduleLabel: "_scheduleLabel_1hxc3_14",
+	locationLabel: "_locationLabel_1hxc3_18",
+	locationLeaf: "_locationLeaf_1hxc3_22",
+	newBadge: "_newBadge_1hxc3_26",
+	pausedPill: "_pausedPill_1hxc3_31",
+	pausedLabel: "_pausedLabel_1hxc3_36",
+	locationDivider: "_locationDivider_1hxc3_40"
+}, he = ({ 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", ee = i({
+		"--stc-title-text": u?.titleText,
+		"--stc-desc-text": u?.descriptionText,
+		"--stc-pill-bg": u?.schedulePillBackground,
+		"--stc-pill-border": u?.schedulePillBorder,
+		"--stc-schedule-label-text": u?.scheduleLabelText,
+		"--stc-location-label-text": u?.locationLabelText,
+		"--stc-location-leaf-text": u?.locationLeafText,
+		"--stc-new-badge-bg": u?.newBadgeBackground,
+		"--stc-new-badge-text": u?.newBadgeText,
+		"--stc-location-divider-border": u?.locationDividerBorder,
+		"--stc-paused-bg": u?.pausedBadgeBackground,
+		"--stc-paused-border": u?.pausedBadgeBorder,
+		"--stc-paused-text": u?.pausedBadgeText
+	}), te = n ? {
+		tabIndex: 0,
+		onClick: () => n(e.id),
+		onKeyDown: (t) => {
+			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.id));
+		}
+	} : {};
+	return /* @__PURE__ */ V(p, {
+		role: n ? "button" : "group",
 		"aria-label": e.displayName,
-		style: N,
-		className: n("h-[232px]", f),
+		style: ee,
+		className: a("h-[232px]", n && "cursor-pointer", s),
+		...te,
 		children: [
-			/* @__PURE__ */ L("div", {
-				className: "flex shrink-0 items-start justify-between gap-2",
-				children: [/* @__PURE__ */ L("div", {
-					className: "flex min-w-0 flex-1 items-center gap-2",
-					children: [/* @__PURE__ */ I(v, {
-						text: e.displayName,
-						query: r,
-						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
-					})]
-				}), P.length > 0 && /* @__PURE__ */ I(u, {
-					items: P,
-					matchReferenceWidth: !1,
-					placement: "bottom-end",
-					children: /* @__PURE__ */ I(y, {
-						icon: /* @__PURE__ */ I(O, {
-							size: l.SM,
-							"aria-hidden": !0
-						}),
-						"aria-label": m,
-						className: "shrink-0"
-					})
+			/* @__PURE__ */ V("div", {
+				className: "flex min-w-0 shrink-0 items-center gap-2",
+				children: [/* @__PURE__ */ B(b, {
+					text: e.displayName,
+					query: t,
+					maxLines: 1,
+					className: a(f, U.title)
+				}), e.isNew && /* @__PURE__ */ B("span", {
+					className: a("shrink-0 rounded-full px-2 py-0.5", C, U.newBadge),
+					children: c
 				})]
 			}),
-			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: a("line-clamp-4 min-h-0 flex-1 overflow-hidden", v, g, 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: e.isActive === !1 ? /* @__PURE__ */ V("span", {
+						className: a("inline-flex items-center gap-1.5 rounded-full border px-2 py-1", U.pausedPill, w, U.pausedLabel),
+						children: [/* @__PURE__ */ B(se, {
+							size: m.SM,
+							"aria-hidden": !0,
+							stroke: h
+						}), l]
+					}) : /* @__PURE__ */ B("span", {
+						className: a("inline-block rounded-lg border px-2 py-1", U.schedulePill, y, U.scheduleLabel),
 						children: e.scheduleLabel
 					})
-				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ I(h, {
+				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ B(_, {
 					segments: e.locationSegments,
-					labelClassName: n(E, z.locationLabel),
-					leafClassName: n(D, z.locationLeaf),
-					className: n("pt-3", z.locationDivider)
+					labelClassName: a(x, U.locationLabel),
+					leafClassName: a(S, U.locationLeaf),
+					className: a("pt-3", U.locationDivider)
 				})]
 			})
 		]
 	});
-}, V = [
+}, ge = { card: "_card_11bez_1" }, _e = [
 	"100%",
 	"100%",
 	"61%"
-], H = ({ styles: e }) => {
-	let t = e?.colors?.skeletonColor ?? "var(--bg-layer-4)";
-	return /* @__PURE__ */ L(c, {
-		"aria-hidden": !0,
-		className: "h-[232px]",
-		children: [
-			/* @__PURE__ */ I(f, {
-				variant: p.Rectangular,
-				width: "60%",
-				height: "20px",
-				color: t,
-				className: "shrink-0"
-			}),
-			/* @__PURE__ */ I("div", {
-				className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden",
-				children: V.map((e, n) => /* @__PURE__ */ I(f, {
-					variant: p.Rectangular,
-					width: e,
-					height: "16px",
-					color: t
-				}, n))
-			}),
-			/* @__PURE__ */ I(f, {
-				variant: p.Rectangular,
-				width: "110px",
-				height: "28px",
-				color: t,
-				className: "shrink-0 rounded-lg"
-			})
-		]
-	});
-}, U = ({ items: e, searchQuery: t, onEdit: n, onRunNow: r, onDelete: i, labels: a, cardStyles: o, trailingSkeletonCount: s = 0, skeletonStyles: c }) => /* @__PURE__ */ L("div", {
+], W = "var(--stcs-skeleton-bg)", G = ({ styles: e }) => /* @__PURE__ */ V(p, {
+	"aria-hidden": !0,
+	style: i({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
+	className: a("h-[232px]", ge.card),
+	children: [
+		/* @__PURE__ */ B(E, {
+			variant: D.Rectangular,
+			width: "60%",
+			height: "20px",
+			color: W,
+			className: "shrink-0"
+		}),
+		/* @__PURE__ */ B("div", {
+			className: "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden",
+			children: _e.map((e, t) => /* @__PURE__ */ B(E, {
+				variant: D.Rectangular,
+				width: e,
+				height: "16px",
+				color: W
+			}, t))
+		}),
+		/* @__PURE__ */ B(E, {
+			variant: D.Rectangular,
+			width: "110px",
+			height: "28px",
+			color: W,
+			className: "shrink-0 rounded-lg"
+		})
+	]
+}), ve = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o }) => /* @__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(he, {
 		item: e,
 		searchQuery: t,
-		onEdit: n,
-		onRunNow: r,
-		onDelete: i,
-		labels: a,
-		styles: o
-	}, e.id)), Array.from({ length: s }, (e, t) => /* @__PURE__ */ I(H, { styles: c }, `skeleton-${t}`))]
-}), W = { countBadge: "_countBadge_5ysac_1" }, G = ({ 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({
-		"--sts-badge-bg": a?.colors?.countBadgeBackground,
-		"--sts-badge-text": a?.colors?.countBadgeText
-	});
-	return /* @__PURE__ */ L("section", {
-		...e ? { "aria-label": e } : {},
-		style: c,
-		className: "flex flex-col gap-3",
-		children: [e && /* @__PURE__ */ L("div", {
-			className: "flex items-center gap-2 rtl:flex-row-reverse",
-			children: [/* @__PURE__ */ I("h2", {
-				className: o,
-				children: e
-			}), /* @__PURE__ */ I("span", {
-				className: n("rounded-full px-2 py-0.5", s, W.countBadge),
-				children: r
-			})]
-		}), i]
-	});
-}, K = {
-	container: "_container_sac6a_1",
-	subtitle: "_subtitle_sac6a_5",
-	sortButton: "_sortButton_sac6a_9"
-}, re = [R.Shared, R.MyTasks], ie = (e, t, n, r, i, a) => {
+		onCardClick: n,
+		labels: r,
+		styles: i
+	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ B(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"
+}, ye = (e, t, n, r, i, a) => {
 	if (!e) return t ? a.loadingMoreLabel : n ? a.errorLabel : r > 0 ? `${r}` : i ? a.noResultsLabel : a.emptyStateLabel;
-}, q = (e) => {
+}, be = (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 : q(e.parentElement);
-}, J = ({ 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)
-		})).filter((e) => e.items.length > 0);
-	}, [f, r.sharedSectionTitle]), W = ie(p, y, !!h, f.length, o.trim().length > 0, r), J = ne(null);
-	ee(() => {
-		let e = J.current;
-		if (!e || !x) return;
-		let t = q(e.parentElement);
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : be(e.parentElement);
+}, xe = ({ 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: ee, banner: ne, styles: E }) => {
+	let { colors: D, typography: k } = E ?? {}, re = k?.titleClassName ?? "dial-h1-text", A = k?.subtitleClassName ?? "dial-body-text", j = i({
+		"--st-bg": D?.background,
+		"--st-subtitle-text": D?.subtitleText,
+		"--st-sort-text": D?.sortButtonText
+	}), ie = (e) => {
+		o(e ?? "");
+	}, [M, ae] = pe(!1), [N, oe] = pe(!1), se = R(null), le = P(() => {
+		oe(!0);
+	}, []), ue = P(() => {
+		oe(!1);
+	}, []);
+	L(() => {
+		let e = se.current;
+		N && M && e != null && e.offsetParent == null && ae(!1);
+	}, [N, M]);
+	let de = e.sortOptions.find((e) => e.value === s)?.label ?? e.sortLabel, I = fe(() => e.sortOptions.map((e) => ({
+		key: e.value,
+		label: e.label,
+		mark: C.Check,
+		checked: e.value === s,
+		onClick: () => d(e.value)
+	})), [
+		e.sortOptions,
+		s,
+		d
+	]), z = ye(p, x, !!_, f.length, n.trim().length > 0, e), H = R(null);
+	F(() => {
+		let e = H.current;
+		if (!e || !w) return;
+		let t = be(e.parentElement);
 		if (!t) return;
 		let n = () => {
-			if (y || p || !v) return;
+			if (x || p || !b) 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 && w();
 		};
 		return t.addEventListener("scroll", n, { passive: !0 }), n(), () => t.removeEventListener("scroll", n);
 	}, [
-		v,
-		y,
+		b,
+		x,
 		p,
-		x
+		w
 	]);
-	let ae = () => {
-		if (p) return /* @__PURE__ */ I(m, {});
-		if (h) return /* @__PURE__ */ L("div", {
-			className: "flex flex-col items-center gap-3",
-			children: [/* @__PURE__ */ I("p", {
-				className: n(z, K.subtitle),
-				children: r.errorLabel
-			}), /* @__PURE__ */ I(g, {
-				label: r.retryLabel,
-				onClick: _
-			})]
-		});
-		if (f.length === 0) return o.trim() ? /* @__PURE__ */ I("p", {
-			className: n(z, K.subtitle),
-			children: r.noResultsLabel
-		}) : /* @__PURE__ */ I(e, {
-			icon: /* @__PURE__ */ I(T, {
-				"aria-hidden": !0,
-				size: P,
-				stroke: 1
-			}),
-			label: r.emptyStateLabel
-		});
-		let t = H.length - 1;
-		return /* @__PURE__ */ L("div", {
-			className: "flex w-full flex-col gap-6",
-			children: [H.map((e, n) => /* @__PURE__ */ I(G, {
-				title: e.title,
-				count: e.items.length,
-				children: /* @__PURE__ */ I(U, {
-					items: e.items,
-					searchQuery: o,
-					onEdit: C,
-					onRunNow: O,
-					onDelete: k,
-					labels: r.cardLabels,
-					trailingSkeletonCount: y && n === t ? b : 0,
-					skeletonStyles: { colors: { skeletonColor: M?.skeletonColor } }
-				})
-			}, e.key)), /* @__PURE__ */ I("div", {
-				ref: J,
-				"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", K.container),
+	let me = () => p ? /* @__PURE__ */ B(O, {}) : _ ? /* @__PURE__ */ V("div", {
+		className: "flex flex-col items-center gap-3",
+		children: [/* @__PURE__ */ B("p", {
+			className: a(A, K.subtitle),
+			children: e.errorLabel
+		}), /* @__PURE__ */ B(v, {
+			label: e.retryLabel,
+			onClick: y
+		})]
+	}) : f.length === 0 ? n.trim() ? /* @__PURE__ */ B("p", {
+		className: a(A, K.subtitle),
+		children: e.noResultsLabel
+	}) : /* @__PURE__ */ B(r, { label: e.emptyStateLabel }) : /* @__PURE__ */ V("div", {
+		className: "flex w-full flex-col gap-6",
+		children: [/* @__PURE__ */ B(ve, {
+			items: f,
+			searchQuery: n,
+			onCardClick: ee,
+			labels: e.cardLabels,
+			trailingSkeletonCount: x ? S : 0,
+			skeletonStyles: { colors: { skeletonColor: D?.skeletonColor } }
+		}), /* @__PURE__ */ B("div", {
+			ref: H,
+			"aria-hidden": !0,
+			className: "h-px w-full"
+		})]
+	}), U = p || !!_ || f.length === 0;
+	return /* @__PURE__ */ V("div", {
+		style: j,
+		className: a("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", K.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, K.subtitle),
-						children: r.subtitle
+					children: [/* @__PURE__ */ B("h1", {
+						className: a("truncate", re),
+						children: e.title
+					}), /* @__PURE__ */ B("p", {
+						className: a("mt-1", A, K.subtitle),
+						children: e.subtitle
 					})]
-				}), /* @__PURE__ */ I(S, {
-					label: r.createButtonLabel,
-					iconBefore: /* @__PURE__ */ I(j, {
-						size: l.SM,
-						"aria-hidden": !0
+				}), /* @__PURE__ */ B(te, {
+					label: e.createButtonLabel,
+					textClassName: "hidden desktop:inline",
+					"aria-label": e.createButtonLabel,
+					iconBefore: /* @__PURE__ */ B(ce, {
+						size: m.SM,
+						"aria-hidden": !0,
+						stroke: h
 					}),
-					onClick: a,
-					className: "shrink-0"
+					onClick: t,
+					className: a("shrink-0", K.createButton)
 				})]
 			}),
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ V("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ I("div", {
+				children: [/* @__PURE__ */ B("div", {
+					role: "search",
 					className: "flex-1",
-					children: /* @__PURE__ */ I(i, {
-						value: o,
-						onChange: s,
-						labels: {
-							placeholder: r.searchPlaceholder,
-							ariaLabel: r.searchAriaLabel,
-							clearLabel: r.clearSearchLabel
-						},
-						iconSize: 18,
-						iconStrokeWidth: 1.8,
-						styles: {
-							containerClassName: "h-[50px] w-full rounded-xl px-[18px]",
-							inputClassName: "text-[15px]",
-							clearButtonClassName: "size-11 desktop:size-auto"
-						}
+					children: /* @__PURE__ */ B(T, {
+						value: n,
+						onChange: ie,
+						placeholder: e.searchPlaceholder,
+						clearLabel: e.clearSearchLabel,
+						"aria-label": e.searchAriaLabel,
+						size: g.Large,
+						onFocus: le,
+						onBlur: ue
 					})
-				}), 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]", K.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("div", {
+					ref: se,
+					className: a(N && K.sortControlHidden),
+					children: /* @__PURE__ */ B(l, {
+						items: I,
+						label: de,
+						variant: u.Primary,
+						appearance: c.Ghost,
+						className: K.sortButton
 					})
 				})]
 			}),
-			/* @__PURE__ */ I("span", {
+			ne,
+			/* @__PURE__ */ B("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: W
+				children: z
 			}),
-			/* @__PURE__ */ I("div", {
-				className: n("mx-auto flex size-full w-full max-w-[1180px] flex-col", oe && "items-center justify-center"),
-				children: ae()
+			/* @__PURE__ */ B("div", {
+				className: a("mx-auto flex size-full w-full max-w-[1180px] flex-col", U && "items-center justify-center"),
+				children: me()
 			})
 		]
 	});
-}, ae = /* @__PURE__ */ function(e) {
+}, Se = /* @__PURE__ */ function(e) {
 	return e.FirstToRun = "firstToRun", e.LastToRun = "lastToRun", e.Newest = "newest", e.NameAZ = "nameAZ", e;
-}({}), oe = 500, Y = /* @__PURE__ */ function(e) {
-	return e.Once = "once", e.Recurring = "recurring", e;
-}({}), X = /* @__PURE__ */ function(e) {
-	return e.Daily = "daily", e.Weekly = "weekly", e.Monthly = "monthly", e;
-}({}), Z = (e) => String(e).padStart(2, "0"), se = (e) => e ? new Date(e) : null, ce = (e) => {
+}({}), Ce = 500, q = /* @__PURE__ */ function(e) {
+	return e.OneTime = "oneTime", e.Hourly = "hourly", e.Daily = "daily", e.Weekly = "weekly", e.Monthly = "monthly", e;
+}({}), J = (e) => String(e).padStart(2, "0"), we = (e) => e ? new Date(e) : null, Te = (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())}`;
-}, le = (e) => {
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${J(t.getMonth() + 1)}-${J(t.getDate())}T${J(t.getHours())}:${J(t.getMinutes())}`;
+}, Ee = (e) => {
+	if (!e) return null;
+	let [t, n, r] = e.split("-").map(Number);
+	return new Date(t, n - 1, r);
+}, De = (e) => {
+	if (e == null) return "";
+	let t = e instanceof Date ? e : new Date(e);
+	return Number.isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${J(t.getMonth() + 1)}-${J(t.getDate())}`;
+}, Oe = (e) => {
 	let t = Number(e);
 	return e && Number.isFinite(t) ? String(t + 1) : null;
-}, ue = (e) => {
+}, ke = (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} *`, de = P(async () => ({ default: (await b()).DialMarkdownEditor })), fe = ({ 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", {
-		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: "flex min-w-0 flex-1 items-center gap-2",
-				children: [/* @__PURE__ */ I(_, {
-					icon: /* @__PURE__ */ I(C, {
-						size: l.LG,
-						className: "rtl:scale-x-[-1]",
-						"aria-hidden": !0
-					}),
-					"aria-label": e.backButtonLabel,
-					onClick: p
-				}), /* @__PURE__ */ I("h1", {
-					className: n("truncate", E),
-					children: e.pageTitle
+}, Y = {
+	detailsColumn: "_detailsColumn_1mg3v_1",
+	sectionSubtitle: "_sectionSubtitle_1mg3v_5",
+	instructionsError: "_instructionsError_1mg3v_9"
+}, Ae = de(async () => ({ default: (await me()).MarkdownEditor })), je = ({ 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 ?? {}, te = w?.titleClassName ?? "dial-h1-text", T = w?.sectionTitleClassName ?? "dial-body-semi-text", E = w?.sectionSubtitleClassName ?? "dial-tiny-text", D = w?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", k = w?.instructionsErrorClassName ?? "dial-small-text", re = i({
+		"--stcf-details-border": C?.detailsColumnBorder,
+		"--stcf-subtitle-text": C?.sectionSubtitleText,
+		"--stcf-error-text": C?.instructionsErrorText
+	}), j = g || !r.displayName.trim() || !r.modelId || !r.prompt.trim();
+	return /* @__PURE__ */ B(H, {
+		labels: {
+			title: n.pageTitle,
+			backButtonLabel: n.backButtonLabel,
+			cancelButtonLabel: n.cancelButtonLabel,
+			submitButtonLabel: n.createButtonLabel,
+			submittingLabel: n.submittingLabel ?? "Saving"
+		},
+		onBack: p,
+		onCancel: m,
+		onSubmit: h,
+		isCancelDisabled: g,
+		isSubmitDisabled: j,
+		isSubmitting: g,
+		styles: {
+			colors: { background: C?.background },
+			header: {
+				colors: { borderColor: C?.headerBorder },
+				typography: { fontClassName: te }
+			},
+			cssVars: re
+		},
+		left: /* @__PURE__ */ V("div", {
+			role: "group",
+			"aria-label": n.detailsSectionTitle,
+			className: a("flex flex-1 flex-col gap-5 border-e px-4 py-6 desktop:px-8", Y.detailsColumn),
+			children: [
+				/* @__PURE__ */ V("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ B("h2", {
+						className: T,
+						children: n.detailsSectionTitle
+					}), /* @__PURE__ */ B("p", {
+						className: a(E, Y.sectionSubtitle),
+						children: n.detailsSectionSubtitle
+					})]
+				}),
+				/* @__PURE__ */ B(x, {
+					id: "scheduled-task-display-name",
+					value: r.displayName,
+					onChange: (e) => u("displayName", e ?? ""),
+					labelProps: {
+						label: n.displayNameLabel,
+						required: !0
+					},
+					invalid: !!s.displayName,
+					error: s.displayName
+				}),
+				/* @__PURE__ */ B(A, {
+					id: "scheduled-task-description",
+					value: r.description ?? "",
+					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__ */ V("div", {
+					className: "flex flex-col gap-1",
+					children: [
+						/* @__PURE__ */ B(S, {
+							id: l,
+							label: n.modelOrAgentLabel,
+							required: !0
+						}),
+						c,
+						s.modelId && /* @__PURE__ */ B("p", {
+							className: a(k, Y.instructionsError),
+							children: s.modelId
+						})
+					]
+				}),
+				/* @__PURE__ */ V("div", {
+					className: "flex flex-col gap-3",
+					children: [
+						/* @__PURE__ */ B(ne, {
+							labelProps: { label: n.repeatLabel },
+							value: r.repeat,
+							onChange: (e) => u("repeat", e),
+							options: n.repeatOptions.map((e) => ({
+								value: e.key,
+								label: e.label
+							}))
+						}),
+						r.repeat === q.OneTime && /* @__PURE__ */ V("div", {
+							className: "flex flex-col gap-1",
+							children: [/* @__PURE__ */ B(d, {
+								id: "scheduled-task-run-at",
+								mode: f.DateTime,
+								value: we(r.runAt),
+								onChange: (e) => u("runAt", Te(e)),
+								labelProps: {
+									label: n.runAtLabel,
+									required: !0
+								},
+								invalid: !!s.runAt
+							}), s.runAt && /* @__PURE__ */ B("p", {
+								className: a(k, Y.instructionsError),
+								children: s.runAt
+							})]
+						}),
+						r.repeat !== q.OneTime && /* @__PURE__ */ V(z, { children: [
+							r.repeat !== q.Hourly && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B(d, {
+									id: "scheduled-task-time",
+									mode: f.Time,
+									value: r.time,
+									onChange: (e) => u("time", typeof e == "string" ? e : ""),
+									labelProps: {
+										label: n.timeLabel,
+										required: !0
+									},
+									invalid: !!s.time
+								}), s.time && /* @__PURE__ */ B("p", {
+									className: a(k, Y.instructionsError),
+									children: s.time
+								})]
+							}),
+							r.repeat === q.Weekly && /* @__PURE__ */ V("div", {
+								className: "flex flex-col gap-1",
+								children: [/* @__PURE__ */ B(d, {
+									id: "scheduled-task-day-of-week",
+									mode: f.Weekday,
+									value: Oe(r.dayOfWeek),
+									onChange: (e) => u("dayOfWeek", ke(e)),
+									labelProps: {
+										label: n.dayOfWeekLabel,
+										required: !0
+									},
+									invalid: !!s.dayOfWeek
+								}), s.dayOfWeek && /* @__PURE__ */ B("p", {
+									className: a(k, Y.instructionsError),
+									children: s.dayOfWeek
+								})]
+							}),
+							r.repeat === q.Monthly && /* @__PURE__ */ B(x, {
+								id: "scheduled-task-day-of-month",
+								value: r.dayOfMonth ?? "",
+								onChange: (e) => u("dayOfMonth", e ?? ""),
+								labelProps: {
+									label: n.dayOfMonthLabel,
+									required: !0
+								},
+								invalid: !!s.dayOfMonth,
+								error: s.dayOfMonth
+							}),
+							r.repeat === q.Hourly && /* @__PURE__ */ B(ee, {
+								id: "scheduled-task-minute",
+								integer: !0,
+								min: 0,
+								max: 59,
+								value: r.minute ?? "",
+								onChange: (e) => u("minute", e == null ? "" : String(e)),
+								labelProps: {
+									label: n.minuteLabel,
+									required: !0
+								},
+								invalid: !!s.minute,
+								error: s.minute
+							}),
+							/* @__PURE__ */ V("div", {
+								className: "flex flex-row gap-3 desktop:flex-col",
+								children: [/* @__PURE__ */ V("div", {
+									className: "flex flex-1 flex-col gap-1",
+									children: [/* @__PURE__ */ B(d, {
+										id: "scheduled-task-start-date",
+										mode: f.Date,
+										value: Ee(r.startDate),
+										onChange: (e) => u("startDate", De(e)),
+										labelProps: { label: n.startDateLabel },
+										placeholder: n.startDatePlaceholder,
+										invalid: !!s.startDate
+									}), s.startDate && /* @__PURE__ */ B("p", {
+										className: a(k, Y.instructionsError),
+										children: s.startDate
+									})]
+								}), /* @__PURE__ */ V("div", {
+									className: "flex flex-1 flex-col gap-1",
+									children: [/* @__PURE__ */ B(d, {
+										id: "scheduled-task-end-date",
+										mode: f.Date,
+										value: Ee(r.endDate),
+										onChange: (e) => u("endDate", De(e)),
+										labelProps: { label: n.endDateLabel },
+										placeholder: n.endDatePlaceholder,
+										invalid: !!s.endDate
+									}), s.endDate && /* @__PURE__ */ B("p", {
+										className: a(k, Y.instructionsError),
+										children: s.endDate
+									})]
+								})]
+							})
+						] })
+					]
+				})
+			]
+		}),
+		children: /* @__PURE__ */ V("div", {
+			role: "group",
+			"aria-label": n.configurationSectionTitle,
+			className: "flex flex-1 flex-col gap-5 px-4 py-6 desktop:px-8",
+			children: [/* @__PURE__ */ V("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ B("h2", {
+					className: T,
+					children: n.configurationSectionTitle
+				}), /* @__PURE__ */ B("p", {
+					className: a(E, Y.sectionSubtitle),
+					children: n.configurationSectionSubtitle
 				})]
-			}), /* @__PURE__ */ L("div", {
-				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ I(x, {
-					label: e.cancelButtonLabel,
-					onClick: h,
-					disabled: v
-				}), /* @__PURE__ */ I(S, {
-					label: e.createButtonLabel,
-					onClick: g,
-					disabled: M
+			}), /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col gap-1",
+				children: [
+					/* @__PURE__ */ B("label", {
+						htmlFor: y,
+						className: D,
+						children: n.instructionsLabel
+					}),
+					/* @__PURE__ */ B("div", {
+						ref: b,
+						className: a(e, t),
+						children: /* @__PURE__ */ B(ue, {
+							fallback: /* @__PURE__ */ B(O, {}),
+							children: /* @__PURE__ */ B(Ae, {
+								id: y,
+								value: r.prompt,
+								onChange: (e) => u("prompt", e),
+								height: 480,
+								theme: _
+							})
+						})
+					}),
+					s.prompt && /* @__PURE__ */ B("p", {
+						className: a(k, Y.instructionsError),
+						children: s.prompt
+					})
+				]
+			})]
+		})
+	});
+}, X = /* @__PURE__ */ function(e) {
+	return e.Details = "details", e.Configuration = "configuration", e.History = "history", e;
+}({}), Me = /* @__PURE__ */ function(e) {
+	return e.Card = "card", e.Flow = "flow", e;
+}({}), Ne = { subtitleText: "_subtitleText_1i4x2_3" }, Pe = ({ instructionsLabel: e, instructionsMarkdown: t, renderInstructions: r, fieldLabelClassName: i = "dial-tiny-text" }) => /* @__PURE__ */ V("div", {
+	role: "group",
+	"aria-label": e,
+	className: "flex flex-col gap-1",
+	children: [/* @__PURE__ */ B("span", {
+		className: a(i, Ne.subtitleText),
+		children: e
+	}), t && (r ? r(t) : /* @__PURE__ */ B(n, { content: t }))]
+}), Fe = { subtitleText: "_subtitleText_1i4x2_3" }, Ie = ({ labels: e, description: t, modelLabel: n, repeatsLabel: r, activeWindowLabel: i, fieldLabelClassName: o = "dial-tiny-text", fieldValueClassName: s = "dial-small-text" }) => /* @__PURE__ */ V(z, { children: [
+	t && /* @__PURE__ */ V("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ B("span", {
+			className: a(o, Fe.subtitleText),
+			children: e.descriptionLabel
+		}), /* @__PURE__ */ B("p", {
+			className: s,
+			children: t
+		})]
+	}),
+	n && /* @__PURE__ */ V("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ B("span", {
+			className: a(o, Fe.subtitleText),
+			children: e.modelLabel
+		}), /* @__PURE__ */ B("p", {
+			className: s,
+			children: n
+		})]
+	}),
+	r && /* @__PURE__ */ V("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ B("span", {
+			className: a(o, Fe.subtitleText),
+			children: e.repeatsLabel
+		}), /* @__PURE__ */ B("p", {
+			className: s,
+			children: r
+		})]
+	}),
+	i && /* @__PURE__ */ V("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ B("span", {
+			className: a(o, Fe.subtitleText),
+			children: e.activeWindowLabel
+		}), /* @__PURE__ */ B("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",
+	successIcon: "_successIcon_1bug5_5",
+	errorIcon: "_errorIcon_1bug5_9",
+	missedIcon: "_missedIcon_1bug5_13",
+	currentRun: "_currentRun_1bug5_17",
+	unreadDot: "_unreadDot_1bug5_21"
+}, Le = ({ status: e }) => {
+	switch (e) {
+		case Z.Success: return /* @__PURE__ */ B(M, {
+			size: m.SM,
+			className: Q.successIcon,
+			"aria-hidden": !0,
+			stroke: h
+		});
+		case Z.Error: return /* @__PURE__ */ B(ae, {
+			size: m.SM,
+			className: Q.errorIcon,
+			"aria-hidden": !0,
+			stroke: h
+		});
+		case Z.InProgress: return /* @__PURE__ */ B("span", {
+			"aria-hidden": !0,
+			children: /* @__PURE__ */ B(O, { size: m.SM })
+		});
+		case Z.Missed: return /* @__PURE__ */ B(j, {
+			size: m.SM,
+			className: Q.missedIcon,
+			"aria-hidden": !0,
+			stroke: h
+		});
+		default: return null;
+	}
+}, Re = ({ 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,
+		"--strhl-subtitle-text": p?.subtitleTextColor,
+		"--strhl-current-run-bg": p?.currentRunBackground,
+		"--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__ */ V("li", {
+			...o ? {
+				role: "button",
+				tabIndex: 0,
+				onClick: () => l?.(e),
+				onKeyDown: (t) => {
+					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l?.(e));
+				}
+			} : {},
+			"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__ */ V("span", {
+				className: "flex items-center gap-2 truncate",
+				children: [/* @__PURE__ */ B("span", {
+					className: "relative flex size-3 shrink-0 items-center justify-center",
+					children: e.isUnread && /* @__PURE__ */ B("span", {
+						className: a("size-[5.33px] rounded-full", Q.unreadDot),
+						"aria-hidden": !0
+					})
+				}), /* @__PURE__ */ B("span", {
+					className: a(g, "truncate"),
+					children: e.timestampLabel
 				})]
+			}), /* @__PURE__ */ B("span", {
+				className: "flex h-8 w-14 shrink-0 items-center justify-end",
+				children: /* @__PURE__ */ B(Le, { status: e.status })
 			})]
-		}), /* @__PURE__ */ L("div", {
-			className: "flex flex-1 flex-col desktop:flex-row",
+		}, e.id);
+	}, S = (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(E, {
+			variant: D.Rectangular,
+			width: "160px",
+			height: "16px"
+		}), /* @__PURE__ */ B(E, {
+			variant: D.Rectangular,
+			width: "16px",
+			height: "16px",
+			className: "shrink-0 rounded-full"
+		})]
+	}, `history-skeleton-${t}`));
+	return t && e.length === 0 ? /* @__PURE__ */ B("ul", {
+		style: b,
+		"aria-label": u.historyTitle,
+		className: "flex flex-col gap-0.5",
+		children: S(r)
+	}) : o && e.length === 0 ? /* @__PURE__ */ V("div", {
+		style: b,
+		className: "flex flex-col items-start gap-3",
+		children: [/* @__PURE__ */ B("p", {
+			role: "alert",
+			className: a(_, Q.subtitleText),
+			children: u.errorLabel
+		}), /* @__PURE__ */ B(v, {
+			label: u.retryLabel,
+			onClick: s
+		})]
+	}) : e.length === 0 ? /* @__PURE__ */ V("div", {
+		style: b,
+		className: "flex w-full flex-col items-center justify-center gap-2 py-4",
+		children: [/* @__PURE__ */ B(N, {
+			size: 44,
+			stroke: h,
+			className: Q.subtitleText,
+			"aria-hidden": !0
+		}), /* @__PURE__ */ B("p", {
+			role: "status",
+			className: g,
+			children: u.emptyLabel
+		})]
+	}) : /* @__PURE__ */ V("ul", {
+		style: b,
+		"aria-label": u.historyTitle,
+		className: "flex flex-col gap-0.5",
+		children: [
+			e.map(x),
+			n && S(r),
+			o ? /* @__PURE__ */ V("li", {
+				className: "flex flex-col items-start gap-3 px-5 py-2",
+				children: [/* @__PURE__ */ B("p", {
+					role: "alert",
+					className: a(_, Q.subtitleText),
+					children: u.errorLabel
+				}), /* @__PURE__ */ B(v, {
+					label: u.retryLabel,
+					onClick: s
+				})]
+			}) : d
+		]
+	});
+}, ze = {
+	historyCard: "_historyCard_qqobi_4",
+	subtitleText: "_subtitleText_qqobi_8"
+}, Be = ({ 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 === Me.Card, _ = g ? a("sticky bottom-0 z-10 rounded-b-xl px-6 pb-5 pt-2", ze.historyCard) : "pt-2", y = d && u && t.historyShowMoreLabel ? /* @__PURE__ */ B("li", {
+		className: _,
+		children: /* @__PURE__ */ B(v, {
+			label: t.historyShowMoreLabel,
+			onClick: d,
+			disabled: o
+		})
+	}) : void 0, b = n ? /* @__PURE__ */ B("p", {
+		className: a(p, ze.subtitleText),
+		children: n
+	}) : void 0, x = t.historyLoadingMoreLabel ? /* @__PURE__ */ B("span", {
+		role: "status",
+		"aria-live": "polite",
+		className: "sr-only",
+		children: o ? t.historyLoadingMoreLabel : ""
+	}) : void 0, S = /* @__PURE__ */ B(Re, {
+		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__ */ V("div", {
+		className: a("flex max-h-[70vh] w-full flex-col overflow-y-auto rounded-xl shadow-md desktop:w-[360px]", ze.historyCard),
+		children: [/* @__PURE__ */ V("div", {
+			className: a("sticky top-0 z-10 flex flex-col gap-4 rounded-t-xl px-6 pb-2 pt-5", ze.historyCard),
 			children: [
-				/* @__PURE__ */ L("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),
+				/* @__PURE__ */ B("h2", {
+					className: m,
+					children: t.historyTitle
+				}),
+				b,
+				x
+			]
+		}), /* @__PURE__ */ B("div", {
+			className: "flex flex-1 flex-col gap-4 px-6 pb-2",
+			children: S
+		})]
+	}) : /* @__PURE__ */ V("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"
+}, Ve = ({ 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: ee, activeWindowLabel: te, nextRunLabel: T, instructionsMarkdown: ne, renderInstructions: E, runs: D, runsIsLoading: A = !1, runsIsLoadingMore: j = !1, runsSkeletonCount: M = 6, runsError: ae, onRunsRetry: N, runsHasMore: se = !1, onRunsLoadMore: ce, onRunClick: ue, styles: de }) => {
+	let { colors: P, typography: F } = de ?? {}, I = F?.titleClassName ?? "dial-h2-text", L = F?.sectionTitleClassName ?? "dial-body-semi-text", fe = F?.fieldLabelClassName ?? "dial-tiny-text", R = F?.fieldValueClassName ?? "dial-small-text", z = F?.runTimestampClassName ?? "dial-small-text", H = 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
+	}), me = s(), [U, he] = pe(X.Details), ge = [
+		{
+			id: X.Details,
+			label: e.detailsTitle
+		},
+		{
+			id: X.Configuration,
+			label: e.configurationTitle
+		},
+		{
+			id: X.History,
+			label: e.historyTitle
+		}
+	], _e = ge.find((e) => e.id === U)?.label ?? e.detailsTitle, W = /* @__PURE__ */ B(Ie, {
+		labels: {
+			descriptionLabel: e.descriptionLabel,
+			modelLabel: e.modelLabel,
+			repeatsLabel: e.repeatsLabel,
+			activeWindowLabel: e.activeWindowLabel
+		},
+		description: S,
+		modelLabel: C,
+		repeatsLabel: ee,
+		activeWindowLabel: te,
+		fieldLabelClassName: fe,
+		fieldValueClassName: R
+	}), G = /* @__PURE__ */ B(Pe, {
+		instructionsLabel: e.instructionsLabel,
+		instructionsMarkdown: ne,
+		renderInstructions: E,
+		fieldLabelClassName: fe
+	}), ve = (t) => /* @__PURE__ */ B(Be, {
+		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: T,
+		items: D,
+		isLoading: A,
+		isLoadingMore: j,
+		skeletonCount: M,
+		error: ae,
+		onRetry: N,
+		hasMore: se,
+		onLoadMore: ce,
+		onRunClick: ue,
+		runTimestampClassName: z,
+		sectionTitleClassName: L,
+		colors: P
+	});
+	return /* @__PURE__ */ V("div", {
+		style: H,
+		className: a("flex h-full w-full flex-col overflow-y-auto", $.container),
+		children: [
+			/* @__PURE__ */ V("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__ */ V("div", {
+					className: "flex min-w-0 items-center gap-2",
 					children: [
-						/* @__PURE__ */ L("div", {
-							className: "flex flex-col gap-1",
-							children: [/* @__PURE__ */ I("h2", {
-								className: D,
-								children: e.detailsSectionTitle
-							}), /* @__PURE__ */ I("p", {
-								className: n(O, Q.sectionSubtitle),
-								children: e.detailsSectionSubtitle
-							})]
+						/* @__PURE__ */ B(y, {
+							icon: /* @__PURE__ */ B(ie, {
+								size: m.LG,
+								className: "rtl:scale-x-[-1]",
+								"aria-hidden": !0,
+								stroke: h
+							}),
+							"aria-label": e.backAriaLabel,
+							onClick: t
 						}),
-						/* @__PURE__ */ I(r, {
-							id: "scheduled-task-display-name",
-							value: i.displayName,
-							onChange: (e) => f("displayName", e ?? ""),
-							labelProps: {
-								label: e.displayNameLabel,
-								required: !0
-							},
-							invalid: !!c.displayName,
-							error: c.displayName
+						/* @__PURE__ */ B("h1", {
+							className: a("hidden truncate desktop:block", I),
+							children: g
 						}),
-						/* @__PURE__ */ I(a, {
-							id: "scheduled-task-description",
-							value: i.description ?? "",
-							onChange: (e) => f("description", e),
-							labelProps: { label: e.descriptionLabel },
-							maxLength: 500,
-							invalid: !!c.description,
-							error: c.description,
-							caption: i.description ? `${i.description.length}/500` : void 0
+						c && /* @__PURE__ */ B("span", {
+							className: a("hidden shrink-0 desktop:inline", R, $.subtitleText),
+							children: e.deletedStateLabel
+						})
+					]
+				}), /* @__PURE__ */ V("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: [
+						!c && l !== void 0 && /* @__PURE__ */ B(k, {
+							id: "scheduled-task-active-switch",
+							labelProps: { label: e.activeStatusLabel },
+							isOn: l,
+							disabled: d || f || o,
+							onChange: (e) => p?.(e)
 						}),
-						/* @__PURE__ */ I(d, {
-							label: e.modelOrAgentLabel,
-							required: !0,
-							value: i.modelId,
-							placeholder: e.modelPlaceholder,
-							onChange: (e) => f("modelId", e),
-							error: c.modelId,
-							options: u.map((e) => ({
-								value: e.id,
-								label: e.label
-							}))
+						!c && r && /* @__PURE__ */ B(v, {
+							variant: u.Danger,
+							label: e.deleteButtonLabel,
+							iconBefore: /* @__PURE__ */ B(le, {
+								size: m.SM,
+								"aria-hidden": !0,
+								stroke: h
+							}),
+							onClick: r,
+							disabled: o,
+							className: "shrink-0"
 						}),
-						/* @__PURE__ */ L("fieldset", {
-							className: "flex flex-col gap-3",
-							children: [
-								/* @__PURE__ */ I("legend", {
-									className: k,
-									children: e.scheduleSectionLabel
-								}),
-								/* @__PURE__ */ I(d, {
-									label: e.scheduleTypeAriaLabel,
-									value: i.scheduleType,
-									onChange: (e) => f("scheduleType", e),
-									options: [{
-										value: Y.Once,
-										label: e.scheduleTypeOnceLabel
-									}, {
-										value: Y.Recurring,
-										label: e.scheduleTypeRecurringLabel
-									}]
-								}),
-								i.scheduleType === Y.Once && /* @__PURE__ */ L("div", {
-									className: "flex flex-col gap-1",
-									children: [/* @__PURE__ */ I(o, {
-										id: "scheduled-task-run-at",
-										mode: s.DateTime,
-										value: se(i.runAt),
-										onChange: (e) => f("runAt", ce(e)),
-										label: $(e.runAtLabel),
-										invalid: !!c.runAt
-									}), c.runAt && /* @__PURE__ */ I("p", {
-										className: n(A, Q.instructionsError),
-										children: c.runAt
-									})]
-								}),
-								i.scheduleType === Y.Recurring && /* @__PURE__ */ L(F, { children: [
-									/* @__PURE__ */ I(d, {
-										label: e.frequencyLabel,
-										value: i.frequency,
-										onChange: (e) => f("frequency", e),
-										options: e.frequencyOptions.map((e) => ({
-											value: e.key,
-											label: e.label
-										}))
-									}),
-									/* @__PURE__ */ L("div", {
-										className: "flex flex-col gap-1",
-										children: [/* @__PURE__ */ I(o, {
-											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
-										})]
-									}),
-									i.frequency === X.Weekly && /* @__PURE__ */ L("div", {
-										className: "flex flex-col gap-1",
-										children: [/* @__PURE__ */ I(o, {
-											id: "scheduled-task-day-of-week",
-											mode: s.Weekday,
-											value: le(i.dayOfWeek),
-											onChange: (e) => f("dayOfWeek", ue(e)),
-											label: $(e.dayOfWeekLabel),
-											invalid: !!c.dayOfWeek
-										}), c.dayOfWeek && /* @__PURE__ */ I("p", {
-											className: n(A, Q.instructionsError),
-											children: c.dayOfWeek
-										})]
-									}),
-									i.frequency === X.Monthly && /* @__PURE__ */ I(r, {
-										id: "scheduled-task-day-of-month",
-										value: i.dayOfMonth ?? "",
-										onChange: (e) => f("dayOfMonth", e ?? ""),
-										labelProps: {
-											label: e.dayOfMonthLabel,
-											required: !0
-										},
-										invalid: !!c.dayOfMonth,
-										error: c.dayOfMonth
-									})
-								] })
-							]
+						!c && n && /* @__PURE__ */ B(w, {
+							label: e.editButtonLabel,
+							iconBefore: /* @__PURE__ */ B(oe, {
+								size: m.SM,
+								"aria-hidden": !0,
+								stroke: h
+							}),
+							onClick: n,
+							disabled: o,
+							className: "shrink-0"
 						})
 					]
-				}),
-				/* @__PURE__ */ L("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", {
-						className: "flex flex-col gap-1",
-						children: [/* @__PURE__ */ I("h2", {
-							className: D,
-							children: e.configurationSectionTitle
-						}), /* @__PURE__ */ I("p", {
-							className: n(O, Q.sectionSubtitle),
-							children: e.configurationSectionSubtitle
-						})]
-					}), /* @__PURE__ */ L("div", {
+				})]
+			}),
+			/* @__PURE__ */ V("div", {
+				className: "flex min-w-0 items-center gap-2 px-8 py-3 desktop:hidden",
+				children: [/* @__PURE__ */ B("h1", {
+					className: a("truncate", I),
+					children: g
+				}), c && /* @__PURE__ */ B("span", {
+					className: a("shrink-0", R, $.subtitleText),
+					children: e.deletedStateLabel
+				})]
+			}),
+			e.activeStatusAnnouncement != null && /* @__PURE__ */ B("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: e.activeStatusAnnouncement
+			}),
+			_ && /* @__PURE__ */ B("div", {
+				className: "flex flex-1 items-center justify-center",
+				children: /* @__PURE__ */ B(O, {})
+			}),
+			!_ && b && /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col items-center justify-center gap-3",
+				children: [/* @__PURE__ */ B("p", {
+					className: a(R, $.subtitleText),
+					children: e.errorLabel
+				}), /* @__PURE__ */ B(v, {
+					label: e.retryLabel,
+					onClick: x
+				})]
+			}),
+			!_ && !b && (me ? /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col",
+				children: [/* @__PURE__ */ B(re, {
+					ariaLabel: e.tabsAriaLabel ?? "Scheduled task sections",
+					className: "px-8",
+					tabs: ge,
+					activeTabId: U,
+					onTabChange: he
+				}), /* @__PURE__ */ B("div", {
+					role: "tabpanel",
+					"aria-label": _e,
+					className: "flex flex-1 flex-col gap-5 px-8 py-6",
+					children: U === X.Configuration ? G : U === X.History ? ve(Me.Flow) : W
+				})]
+			}) : /* @__PURE__ */ V("div", {
+				className: "flex flex-1 flex-col desktop:flex-row",
+				children: [
+					/* @__PURE__ */ V("div", {
 						role: "group",
-						"aria-label": e.instructionsLabel,
-						className: "flex flex-1 flex-col gap-1",
-						children: [
-							/* @__PURE__ */ I("span", {
-								className: k,
-								children: e.instructionsLabel
-							}),
-							/* @__PURE__ */ I(N, {
-								fallback: /* @__PURE__ */ I(m, {}),
-								children: /* @__PURE__ */ I(de, {
-									value: i.prompt,
-									onChange: (e) => f("prompt", e),
-									height: 480,
-									theme: y
-								})
-							}),
-							c.prompt && /* @__PURE__ */ I("p", {
-								className: n(A, Q.instructionsError),
-								children: c.prompt
-							})
-						]
-					})]
-				}),
-				/* @__PURE__ */ I("div", {
-					"aria-hidden": !0,
-					className: "hidden desktop:block desktop:w-[360px] desktop:shrink-0"
-				})
-			]
+						"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__ */ B("h2", {
+							className: L,
+							children: e.detailsTitle
+						}), W]
+					}),
+					/* @__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: L,
+							children: e.configurationTitle
+						}), G]
+					}),
+					/* @__PURE__ */ B("div", {
+						className: "flex w-full justify-center p-6 desktop:w-auto desktop:items-start",
+						children: ve(Me.Card)
+					})
+				]
+			}))
+		]
+	});
+}, He = ({ 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__ */ V("div", {
+		className: "flex flex-col gap-3",
+		children: [r && /* @__PURE__ */ V("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ B("span", {
+				className: s,
+				children: e
+			}), /* @__PURE__ */ B("p", {
+				className: c,
+				children: r
+			})]
+		}), i && /* @__PURE__ */ V("div", {
+			className: "flex flex-col gap-2",
+			children: [/* @__PURE__ */ B("span", {
+				className: s,
+				children: t
+			}), ((e) => a ? a(e) : /* @__PURE__ */ B(n, { content: e }))(i)]
 		})]
 	});
 };
 //#endregion
-export { oe as DESCRIPTION_MAX_LENGTH, B as ScheduledTaskCard, U as ScheduledTaskCardGrid, H as ScheduledTaskCardSkeleton, fe as ScheduledTaskCreateForm, X as ScheduledTaskFrequency, Y as ScheduledTaskScheduleType, G as ScheduledTaskSection, R as ScheduledTaskSectionKey, J as ScheduledTasks, ae as ScheduledTasksSortKey };
+export { Ce as DESCRIPTION_MAX_LENGTH, he as ScheduledTaskCard, ve as ScheduledTaskCardGrid, G as ScheduledTaskCardSkeleton, je as ScheduledTaskCreateForm, Ve as ScheduledTaskDetailView, He as ScheduledTaskDetailsSummary, q as ScheduledTaskRepeat, Re as ScheduledTaskRunHistoryList, Z as ScheduledTaskRunStatus, xe as ScheduledTasks, Se as ScheduledTasksSortKey };