@epam/ai-dial-scheduled-tasks 1.2.0-dev.21 → 1.2.0-dev.217

package/index.js

@@ -1,316 +1,446 @@
-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 ? {
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c } from "./calendar-value-B41Uk26Z.js";
+import { MARKDOWN_EDITOR_MAX_HEIGHT_CLASS_NAME as l, MARKDOWN_EDITOR_PREVIEW_LIST_CLASS_NAME as u, MDMessageViewer as d, PanelEmptyState as f, TextRefinementField as p, buildCssVars as m, mergeClasses as h, useAvailableHeightCap as g, useIsMobile as _, useTextRefinement as v } from "@epam/ai-dial-chat-shared";
+import { ButtonAppearance as y, ButtonDropdown as b, ButtonVariant as x, Calendar as S, CalendarMode as C, CardShell as w, DIAL_ICON_SIZE as T, DIAL_KIT_ICON_STROKE as E, ElementSize as ee, FolderPath as te, GhostButton as D, GhostIconButton as ne, Highlight as O, Input as re, Label as ie, MenuItemMark as ae, NeutralButton as oe, NumberInput as se, Popup as k, PrimaryButton as ce, Search as le, Select as ue, Skeleton as A, SkeletonVariant as j, Spinner as de, Switch as fe, Tabs as M, Textarea as pe } from "@epam/ai-dial-ui-kit";
+import { IconAlertTriangle as N, IconArrowNarrowLeft as me, IconArrowsSort as he, IconCheck as ge, IconCircleCheck as _e, IconCircleX as P, IconClipboardX as ve, IconPencilMinus as F, IconPlayerPause as I, IconPlus as L, IconTrashX as ye } from "@tabler/icons-react";
+import { Suspense as be, lazy as R, useCallback as z, useEffect as B, useId as xe, useLayoutEffect as Se, useMemo as V, useRef as H, useState as Ce } from "react";
+import { Fragment as we, jsx as U, jsxs as W } from "react/jsx-runtime";
+import { BuilderFormContainer as Te } from "@epam/ai-dial-builder-form";
+import { LazyMarkdownEditor as Ee } from "@epam/ai-dial-ui-kit/editors";
+//#region src/constants/public-class-names.ts
+var De = {
+	card: "dial-scheduled-tasks-card",
+	cardGrid: "dial-scheduled-tasks-card-grid",
+	refineFeedback: "dial-scheduled-tasks-refine-feedback"
+}, G = /* @__PURE__ */ function(e) {
+	return e.Scheduled = "scheduled", e.Paused = "paused", e.Completed = "completed", e;
+}({}), K = /* @__PURE__ */ function(e) {
+	return e.Active = "active", e.Paused = "paused", e.Completed = "completed", e;
+}({}), Oe = (e) => {
+	switch (e.presentationStatus) {
+		case K.Active: return G.Scheduled;
+		case K.Paused: return G.Paused;
+		case K.Completed: return G.Completed;
+	}
+	return e.isCompleted ? G.Completed : e.isActive === !1 ? G.Paused : G.Scheduled;
+}, q = {
+	schedulePill: "_schedulePill_146jw_1",
+	scheduleLabel: "_scheduleLabel_146jw_6",
+	pausedPill: "_pausedPill_146jw_10",
+	pausedLabel: "_pausedLabel_146jw_15",
+	completedPill: "_completedPill_146jw_19",
+	completedLabel: "_completedLabel_146jw_24"
+}, ke = {
+	[G.Scheduled]: {
+		pillClassName: "inline-block rounded-lg border px-2 py-1",
+		wrapperClassName: q.schedulePill,
+		labelClassName: q.scheduleLabel
+	},
+	[G.Paused]: {
+		pillClassName: "inline-flex items-center gap-1.5 rounded-full border px-2 py-1",
+		wrapperClassName: q.pausedPill,
+		labelClassName: q.pausedLabel,
+		renderIcon: () => /* @__PURE__ */ U(I, {
+			size: T.SM,
+			"aria-hidden": !0,
+			stroke: E
+		})
+	},
+	[G.Completed]: {
+		pillClassName: "inline-flex items-center gap-1.5 rounded-full border px-2 py-1",
+		wrapperClassName: q.completedPill,
+		labelClassName: q.completedLabel,
+		renderIcon: () => /* @__PURE__ */ U(ge, {
+			size: T.SM,
+			"aria-hidden": !0,
+			stroke: E
+		})
+	}
+}, Ae = ({ status: e, text: t, textClassName: n = "dial-tiny-text", className: r }) => {
+	let { pillClassName: i, wrapperClassName: a, labelClassName: o, renderIcon: s } = ke[e];
+	return /* @__PURE__ */ W("span", {
+		className: h(i, n, a, o, r),
+		children: [s && s(), t]
+	});
+}, J = {
+	title: "_title_ogabr_1",
+	description: "_description_ogabr_5",
+	locationLabel: "_locationLabel_ogabr_9",
+	locationLeaf: "_locationLeaf_ogabr_13",
+	newBadge: "_newBadge_ogabr_17",
+	locationDivider: "_locationDivider_ogabr_22"
+}, je = ({ item: e, searchQuery: t = "", onCardClick: n, labels: r, styles: i, className: a }) => {
+	let o = r?.newBadgeLabel ?? "NEW", s = r?.pausedBadgeLabel ?? "Paused", c = r?.completedBadgeLabel ?? "Completed", { colors: l, typography: u } = i ?? {}, d = u?.titleClassName ?? "dial-body-semi-text", f = u?.descriptionClassName ?? "dial-small-text", p = u?.descriptionSizeClassName ?? "dial-tiny-text", g = u?.scheduleLabelClassName ?? "dial-tiny-text", _ = u?.pausedBadgeClassName ?? "dial-tiny-text", v = u?.completedBadgeClassName ?? "dial-tiny-text", y = u?.locationLabelClassName ?? "dial-tiny-text", b = u?.locationLeafClassName ?? "dial-tiny-semi-text", x = u?.newBadgeClassName ?? "dial-tiny-semi-text", S = Oe(e), { text: C, textClassName: T } = {
+		[G.Scheduled]: {
+			text: e.scheduleLabel,
+			textClassName: g
+		},
+		[G.Paused]: {
+			text: s,
+			textClassName: _
+		},
+		[G.Completed]: {
+			text: c,
+			textClassName: v
+		}
+	}[S], E = m({
+		"--stc-title-text": l?.titleText,
+		"--stc-desc-text": l?.descriptionText,
+		"--stc-pill-bg": l?.schedulePillBackground,
+		"--stc-pill-border": l?.schedulePillBorder,
+		"--stc-schedule-label-text": l?.scheduleLabelText,
+		"--stc-location-label-text": l?.locationLabelText,
+		"--stc-location-leaf-text": l?.locationLeafText,
+		"--stc-new-badge-bg": l?.newBadgeBackground,
+		"--stc-new-badge-text": l?.newBadgeText,
+		"--stc-location-divider-border": l?.locationDividerBorder,
+		"--stc-paused-bg": l?.pausedBadgeBackground,
+		"--stc-paused-border": l?.pausedBadgeBorder,
+		"--stc-paused-text": l?.pausedBadgeText,
+		"--stc-completed-bg": l?.completedBadgeBackground,
+		"--stc-completed-border": l?.completedBadgeBorder,
+		"--stc-completed-text": l?.completedBadgeText
+	}), ee = n ? {
 		tabIndex: 0,
 		onClick: () => n(e.id),
 		onKeyDown: (t) => {
 			(t.key === "Enter" || t.key === " ") && (t.preventDefault(), n(e.id));
 		}
 	} : {};
-	return /* @__PURE__ */ V(p, {
+	return /* @__PURE__ */ W(w, {
 		role: n ? "button" : "group",
 		"aria-label": e.displayName,
-		style: ee,
-		className: a("h-[232px]", n && "cursor-pointer", s),
-		...te,
+		style: E,
+		className: h("h-[var(--st-card-height,232px)]", n && "cursor-pointer", a, De.card),
+		...ee,
 		children: [
-			/* @__PURE__ */ V("div", {
+			/* @__PURE__ */ W("div", {
 				className: "flex min-w-0 shrink-0 items-center gap-2",
-				children: [/* @__PURE__ */ B(b, {
+				children: [/* @__PURE__ */ U(O, {
 					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
+					className: h(d, J.title)
+				}), e.isNew && /* @__PURE__ */ U("span", {
+					className: h("shrink-0 rounded-full px-2 py-0.5", x, J.newBadge),
+					children: o
 				})]
 			}),
-			e.descriptionPreview && /* @__PURE__ */ B("p", {
-				className: a("line-clamp-4 min-h-0 flex-1 overflow-hidden", v, g, U.description),
+			e.descriptionPreview && /* @__PURE__ */ U("p", {
+				className: h("line-clamp-4 min-h-0 flex-1 overflow-hidden", p, f, J.description),
 				children: e.descriptionPreview
 			}),
-			/* @__PURE__ */ V("div", {
+			/* @__PURE__ */ W("div", {
 				className: "mt-auto flex shrink-0 flex-col gap-3",
-				children: [/* @__PURE__ */ B("div", {
+				children: [/* @__PURE__ */ U("div", {
 					className: "flex min-h-[28px] items-center",
-					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
+					children: /* @__PURE__ */ U(Ae, {
+						status: S,
+						text: C,
+						textClassName: T
 					})
-				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ B(_, {
+				}), e.locationSegments && e.locationSegments.length > 0 && /* @__PURE__ */ U(te, {
 					segments: e.locationSegments,
-					labelClassName: a(x, U.locationLabel),
-					leafClassName: a(S, U.locationLeaf),
-					className: a("pt-3", U.locationDivider)
+					labelClassName: h(y, J.locationLabel),
+					leafClassName: h(b, J.locationLeaf),
+					className: h("pt-3", J.locationDivider)
 				})]
 			})
 		]
 	});
-}, ge = { card: "_card_11bez_1" }, _e = [
+}, Me = { card: "_card_11bez_1" }, Ne = [
 	"100%",
 	"100%",
 	"61%"
-], W = "var(--stcs-skeleton-bg)", G = ({ styles: e }) => /* @__PURE__ */ V(p, {
+], Pe = "var(--stcs-skeleton-bg)", Fe = ({ styles: e }) => /* @__PURE__ */ W(w, {
 	"aria-hidden": !0,
-	style: i({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
-	className: a("h-[232px]", ge.card),
+	style: m({ "--stcs-skeleton-bg": e?.colors?.skeletonColor }),
+	className: h("h-[var(--st-card-height,232px)]", Me.card),
 	children: [
-		/* @__PURE__ */ B(E, {
-			variant: D.Rectangular,
+		/* @__PURE__ */ U(A, {
+			variant: j.Rectangular,
 			width: "60%",
 			height: "20px",
-			color: W,
+			color: Pe,
 			className: "shrink-0"
 		}),
-		/* @__PURE__ */ B("div", {
+		/* @__PURE__ */ U("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,
+			children: Ne.map((e, t) => /* @__PURE__ */ U(A, {
+				variant: j.Rectangular,
 				width: e,
 				height: "16px",
-				color: W
+				color: Pe
 			}, t))
 		}),
-		/* @__PURE__ */ B(E, {
-			variant: D.Rectangular,
+		/* @__PURE__ */ U(A, {
+			variant: j.Rectangular,
 			width: "110px",
 			height: "28px",
-			color: W,
+			color: Pe,
 			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__ */ B(he, {
+}), Ie = ({ items: e, searchQuery: t, onCardClick: n, labels: r, cardStyles: i, trailingSkeletonCount: a = 0, skeletonStyles: o, layout: s }) => /* @__PURE__ */ W("div", {
+	style: {
+		"--st-grid-min-card-width": s?.minCardWidth,
+		"--st-grid-gap": s?.gap,
+		"--st-card-height": s?.cardHeight,
+		"--st-grid-columns": s?.maxColumns ?? 3,
+		maxWidth: s?.maxWidth ?? "1180px",
+		gap: "var(--st-grid-gap, 20px)",
+		gridTemplateColumns: "repeat(auto-fill, minmax(min(100%, max(var(--st-grid-min-card-width, 320px), calc((100% - (var(--st-grid-columns) - 1) * var(--st-grid-gap, 20px)) / var(--st-grid-columns)))), 1fr))"
+	},
+	className: h("mx-auto grid w-full min-w-0", De.cardGrid),
+	children: [e.map((e) => /* @__PURE__ */ U(je, {
 		item: e,
 		searchQuery: t,
 		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) => {
+	}, e.id)), Array.from({ length: a }, (e, t) => /* @__PURE__ */ U(Fe, { styles: o }, `skeleton-${t}`))]
+}), Y = {
+	container: "_container_3vz4t_2",
+	subtitle: "_subtitle_3vz4t_6",
+	createButtonLabel: "_createButtonLabel_3vz4t_10",
+	sortButton: "_sortButton_3vz4t_19",
+	createButton: "_createButton_3vz4t_10",
+	sortControlHidden: "_sortControlHidden_3vz4t_49"
+}, Le = (e, t, n, r, i, a) => {
 	if (!e) return t ? a.loadingMoreLabel : n ? a.errorLabel : r > 0 ? `${r}` : i ? a.noResultsLabel : a.emptyStateLabel;
-}, be = (e) => {
+}, Re = (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 : 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);
+	return t === "auto" || t === "scroll" || n === "auto" || n === "scroll" ? e : Re(e.parentElement);
+}, ze = ({ labels: e, onCreateClick: t, searchQuery: n, onSearchQueryChange: r, sortKey: i, onSortChange: a, items: o, isLoading: s = !1, error: c, onRetry: l, hasMore: u = !1, isLoadingMore: d = !1, skeletonCount: p = 6, onLoadMore: g, onCardClick: _, banner: v, styles: S, sortIcon: C, className: w, gridLayout: te, cardStyles: ne, loadMoreError: O, onRetryLoadMore: re }) => {
+	let { colors: ie, typography: oe } = S ?? {}, se = oe?.titleClassName ?? "dial-h1-text", k = oe?.subtitleClassName ?? "dial-body-text", ue = m({
+		"--st-bg": ie?.background,
+		"--st-subtitle-text": ie?.subtitleText,
+		"--st-sort-text": ie?.sortButtonText
+	}), A = (e) => {
+		r(e ?? "");
+	}, [j, fe] = Ce(!1), [M, pe] = Ce(!1), N = H(null), me = z(() => {
+		pe(!0);
+	}, []), ge = z(() => {
+		pe(!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) => ({
+	Se(() => {
+		let e = N.current;
+		M && j && e != null && e.offsetParent == null && fe(!1);
+	}, [M, j]);
+	let _e = e.sortOptions.find((e) => e.value === i)?.label ?? e.sortLabel, P = V(() => e.sortOptions.map((e) => ({
 		key: e.value,
 		label: e.label,
-		mark: C.Check,
-		checked: e.value === s,
-		onClick: () => d(e.value)
+		mark: ae.Check,
+		checked: e.value === i,
+		onClick: () => a(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);
+		i,
+		a
+	]), ve = Le(s, d, !!c, o.length, n.trim().length > 0, e), F = H(null);
+	B(() => {
+		let e = F.current;
+		if (!e || !g) return;
+		let t = Re(e.parentElement);
 		if (!t) return;
 		let n = () => {
-			if (x || p || !b) return;
+			if (d || s || O || !u) return;
 			let n = t.getBoundingClientRect(), r = e.getBoundingClientRect();
-			r.top < n.bottom && r.bottom > n.top && w();
+			r.top < n.bottom && r.bottom > n.top && g();
 		};
 		return t.addEventListener("scroll", n, { passive: !0 }), n(), () => t.removeEventListener("scroll", n);
 	}, [
-		b,
-		x,
-		p,
-		w
+		u,
+		d,
+		s,
+		O,
+		g
 	]);
-	let me = () => p ? /* @__PURE__ */ B(O, {}) : _ ? /* @__PURE__ */ V("div", {
+	let I = () => s ? /* @__PURE__ */ U(de, {}) : c ? /* @__PURE__ */ W("div", {
 		className: "flex flex-col items-center gap-3",
-		children: [/* @__PURE__ */ B("p", {
-			className: a(A, K.subtitle),
+		children: [/* @__PURE__ */ U("p", {
+			className: h(k, Y.subtitle),
 			children: e.errorLabel
-		}), /* @__PURE__ */ B(v, {
+		}), /* @__PURE__ */ U(D, {
 			label: e.retryLabel,
-			onClick: y
+			onClick: l
 		})]
-	}) : f.length === 0 ? n.trim() ? /* @__PURE__ */ B("p", {
-		className: a(A, K.subtitle),
+	}) : o.length === 0 ? n.trim() ? /* @__PURE__ */ U("p", {
+		className: h(k, Y.subtitle),
 		children: e.noResultsLabel
-	}) : /* @__PURE__ */ B(r, { label: e.emptyStateLabel }) : /* @__PURE__ */ V("div", {
+	}) : /* @__PURE__ */ U(f, { label: e.emptyStateLabel }) : /* @__PURE__ */ W("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__ */ V("div", {
+			/* @__PURE__ */ U(Ie, {
+				items: o,
+				searchQuery: n,
+				onCardClick: _,
+				labels: e.cardLabels,
+				trailingSkeletonCount: d ? p : 0,
+				skeletonStyles: { colors: { skeletonColor: ie?.skeletonColor } },
+				cardStyles: ne,
+				layout: te
+			}),
+			O && /* @__PURE__ */ W("div", {
+				role: "alert",
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ U("span", {
+					className: h(k, Y.subtitle),
+					children: e.loadMoreErrorLabel ?? e.errorLabel
+				}), /* @__PURE__ */ U(D, {
+					label: e.retryLabel,
+					onClick: re
+				})]
+			}),
+			/* @__PURE__ */ U("div", {
+				ref: F,
+				"aria-hidden": !0,
+				className: "h-px w-full"
+			})
+		]
+	}), ye = s || !!c || o.length === 0;
+	return /* @__PURE__ */ W("div", {
+		style: ue,
+		className: h("flex h-full w-full flex-col gap-6 overflow-y-auto px-8 py-4", Y.container, w),
+		children: [
+			/* @__PURE__ */ W("div", {
 				className: "flex items-start justify-between gap-4",
-				children: [/* @__PURE__ */ V("div", {
+				children: [/* @__PURE__ */ W("div", {
 					className: "min-w-0 gap-2",
-					children: [/* @__PURE__ */ B("h1", {
-						className: a("truncate", re),
+					children: [/* @__PURE__ */ U("h1", {
+						className: h("truncate", se),
 						children: e.title
-					}), /* @__PURE__ */ B("p", {
-						className: a("mt-1", A, K.subtitle),
+					}), /* @__PURE__ */ U("p", {
+						className: h("mt-1", k, Y.subtitle),
 						children: e.subtitle
 					})]
-				}), /* @__PURE__ */ B(te, {
+				}), /* @__PURE__ */ U(ce, {
 					label: e.createButtonLabel,
-					textClassName: "hidden desktop:inline",
+					textClassName: Y.createButtonLabel,
 					"aria-label": e.createButtonLabel,
-					iconBefore: /* @__PURE__ */ B(ce, {
-						size: m.SM,
+					iconBefore: /* @__PURE__ */ U(L, {
+						size: T.SM,
 						"aria-hidden": !0,
-						stroke: h
+						stroke: E
 					}),
 					onClick: t,
-					className: a("shrink-0", K.createButton)
+					className: h("shrink-0", Y.createButton)
 				})]
 			}),
-			/* @__PURE__ */ V("div", {
+			/* @__PURE__ */ W("div", {
 				className: "flex flex-wrap items-center gap-3",
-				children: [/* @__PURE__ */ B("div", {
+				children: [/* @__PURE__ */ U("div", {
 					role: "search",
 					className: "flex-1",
-					children: /* @__PURE__ */ B(T, {
+					children: /* @__PURE__ */ U(le, {
 						value: n,
-						onChange: ie,
+						onChange: A,
 						placeholder: e.searchPlaceholder,
 						clearLabel: e.clearSearchLabel,
 						"aria-label": e.searchAriaLabel,
-						size: g.Large,
-						onFocus: le,
-						onBlur: ue
+						size: ee.Large,
+						onFocus: me,
+						onBlur: ge
 					})
-				}), 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
+				}), e.sortOptions.length > 0 && /* @__PURE__ */ U("div", {
+					ref: N,
+					className: h(M && Y.sortControlHidden),
+					children: /* @__PURE__ */ U(b, {
+						items: P,
+						label: _e,
+						variant: x.Primary,
+						appearance: y.Ghost,
+						iconBefore: C === void 0 ? /* @__PURE__ */ U(he, {
+							size: T.SM,
+							"aria-hidden": !0,
+							stroke: E
+						}) : C,
+						className: Y.sortButton
 					})
 				})]
 			}),
-			ne,
-			/* @__PURE__ */ B("span", {
+			v,
+			/* @__PURE__ */ U("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
-				children: z
+				children: ve
 			}),
-			/* @__PURE__ */ B("div", {
-				className: a("mx-auto flex size-full w-full max-w-[1180px] flex-col", U && "items-center justify-center"),
-				children: me()
+			/* @__PURE__ */ U("div", {
+				className: h("mx-auto flex size-full w-full min-w-0 flex-col", ye && "items-center justify-center"),
+				children: I()
 			})
 		]
 	});
-}, Se = /* @__PURE__ */ function(e) {
+}, Be = /* @__PURE__ */ function(e) {
 	return e.FirstToRun = "firstToRun", e.LastToRun = "lastToRun", e.Newest = "newest", e.NameAZ = "nameAZ", 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()}-${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;
-}, ke = (e) => {
-	let t = typeof e == "string" ? Number(e) : NaN;
-	return Number.isFinite(t) ? String(t - 1) : "";
-}, 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, {
+}({}), Ve = { error: "_error_v2pfn_4" }, He = ({ label: e, value: t, onChange: r, error: i, errorClassName: a = "dial-small-text" }) => {
+	let o = V(() => /* @__PURE__ */ new Date(), []);
+	return /* @__PURE__ */ W("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ U(S, {
+			id: "scheduled-task-run-at",
+			mode: C.DateTime,
+			value: s(t),
+			onChange: (e) => r(n(e)),
+			minDate: o,
+			labelProps: {
+				label: e,
+				required: !0
+			},
+			invalid: !!i
+		}), i && /* @__PURE__ */ U("p", {
+			className: h(a, Ve.error),
+			children: i
+		})]
+	});
+}, X = {
+	formColumn: "_formColumn_1gu82_1",
+	detailsColumn: "_detailsColumn_1gu82_10",
+	sectionSubtitle: "_sectionSubtitle_1gu82_14",
+	instructionsError: "_instructionsError_1gu82_18",
+	refineFeedback: "_refineFeedback_1gu82_22",
+	refineError: "_refineError_1gu82_26"
+}, Ue = R(async () => ({ default: (await Ee()).MarkdownEditor })), We = ({ labels: n, values: r, errors: s, modelSelector: d, modelLabelId: f, skillSelector: _, skillLabelId: y, skillErrorId: b, onFieldChange: x, onBack: w, onCancel: ee, onSubmit: te, isSubmitting: D = !1, onRefineDescription: ne, onRefineInstructions: O, markdownEditorTheme: ae, backIcon: oe, className: k, styles: ce }) => {
+	let le = xe(), A = xe(), j = H(void 0), fe = (e) => e ? async (t, n) => {
+		if (j.current && !j.current.aborted) throw new DOMException("Busy", "AbortError");
+		j.current = n;
+		try {
+			return await e(t, n);
+		} finally {
+			j.current === n && (j.current = void 0);
+		}
+	} : void 0, M = v({
+		value: r.description ?? "",
+		onChange: (e) => x("description", e),
+		onRefine: fe(ne),
+		disabled: D
+	}), N = v({
+		value: r.prompt,
+		onChange: (e) => x("prompt", e),
+		onRefine: fe(O),
+		disabled: D
+	}), he = M.isPending || N.isPending, ge = () => {
+		M.reset(), N.reset();
+	}, _e = g(), [P, ve] = Ce(), { colors: F, typography: I, layout: L } = ce ?? {}, ye = I?.titleClassName ?? "dial-h1-text", R = I?.sectionTitleClassName ?? "dial-body-semi-text", z = I?.sectionSubtitleClassName ?? "dial-tiny-text", Se = I?.instructionsLabelClassName ?? "dial-body-semi-text mb-1", V = I?.instructionsErrorClassName ?? "dial-small-text", Ee = m({
+		"--stcf-details-border": F?.detailsColumnBorder,
+		"--stcf-subtitle-text": F?.sectionSubtitleText,
+		"--stcf-error-text": F?.instructionsErrorText,
+		"--stcf-refine-action-text": F?.refineActionText,
+		"--stcf-refine-error-text": F?.refineErrorText
+	}), G = {
+		feedbackClassName: h(X.refineFeedback, I?.refineFeedbackClassName ?? "dial-small-text", De.refineFeedback),
+		errorClassName: X.refineError
+	}, K = (e) => {
+		ve(c.test(e.target.value) ? void 0 : n.timeInvalidLabel), x("time", e.target.value);
+	}, Oe = (e) => {
+		ve(void 0), x("time", typeof e == "string" ? e : "");
+	}, q = r.repeat !== t.OneTime && r.repeat !== t.Hourly;
+	B(() => {
+		q || ve(void 0);
+	}, [q]);
+	let ke = q ? P ?? s.time : void 0, Ae = (e) => x("runAt", e), J = D || he || !r.displayName.trim() || !r.modelId || !r.prompt.trim() && !r.skillUrl?.trim() || !!s.skillUrl || q && !r.time || !!ke;
+	return /* @__PURE__ */ U(Te, {
 		labels: {
 			title: n.pageTitle,
 			backButtonLabel: n.backButtonLabel,
@@ -318,39 +448,57 @@ var U = {
 			submitButtonLabel: n.createButtonLabel,
 			submittingLabel: n.submittingLabel ?? "Saving"
 		},
-		onBack: p,
-		onCancel: m,
-		onSubmit: h,
-		isCancelDisabled: g,
-		isSubmitDisabled: j,
-		isSubmitting: g,
+		onBack: () => {
+			ge(), w();
+		},
+		onCancel: () => {
+			ge(), ee();
+		},
+		onSubmit: () => {
+			!J && (!j.current || j.current.aborted) && te();
+		},
+		isCancelDisabled: D,
+		isSubmitDisabled: J,
+		isSubmitting: D,
+		backIcon: oe === void 0 ? /* @__PURE__ */ U(me, {
+			size: T.LG,
+			stroke: E,
+			"aria-hidden": !0,
+			className: "rtl:scale-x-[-1]"
+		}) : oe,
+		layout: {
+			sideColumnWidth: L?.detailsWidth,
+			columnGap: L?.columnGap,
+			reserveEndColumn: !1
+		},
+		className: k,
 		styles: {
-			colors: { background: C?.background },
+			colors: { background: F?.background },
 			header: {
-				colors: { borderColor: C?.headerBorder },
-				typography: { fontClassName: te }
+				colors: { borderColor: F?.headerBorder },
+				typography: { fontClassName: ye }
 			},
-			cssVars: re
+			cssVars: Ee
 		},
-		left: /* @__PURE__ */ V("div", {
+		left: /* @__PURE__ */ W("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),
+			className: h("flex flex-1 flex-col gap-5 border-e py-6", X.detailsColumn, X.formColumn),
 			children: [
-				/* @__PURE__ */ V("div", {
+				/* @__PURE__ */ W("div", {
 					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ B("h2", {
-						className: T,
+					children: [/* @__PURE__ */ U("h2", {
+						className: R,
 						children: n.detailsSectionTitle
-					}), /* @__PURE__ */ B("p", {
-						className: a(E, Y.sectionSubtitle),
+					}), /* @__PURE__ */ U("p", {
+						className: h(z, X.sectionSubtitle),
 						children: n.detailsSectionSubtitle
 					})]
 				}),
-				/* @__PURE__ */ B(x, {
+				/* @__PURE__ */ U(re, {
 					id: "scheduled-task-display-name",
 					value: r.displayName,
-					onChange: (e) => u("displayName", e ?? ""),
+					onChange: (e) => x("displayName", e ?? ""),
 					labelProps: {
 						label: n.displayNameLabel,
 						required: !0
@@ -358,99 +506,103 @@ var U = {
 					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__ */ U(p, {
+					isEnabled: !!ne,
+					fieldId: le,
+					label: n.descriptionLabel,
+					labels: n,
+					refinement: M,
+					disabled: D || he,
+					...G,
+					children: /* @__PURE__ */ U(pe, {
+						id: le,
+						value: r.description ?? "",
+						onChange: (e) => {
+							M.reset(), x("description", e);
+						},
+						labelProps: ne ? void 0 : { label: n.descriptionLabel },
+						maxLength: 500,
+						invalid: !!s.description,
+						error: s.description,
+						caption: r.description ? `${r.description.length}/500` : void 0
+					})
 				}),
-				/* @__PURE__ */ V("div", {
+				/* @__PURE__ */ W("div", {
 					className: "flex flex-col gap-1",
 					children: [
-						/* @__PURE__ */ B(S, {
-							id: l,
+						/* @__PURE__ */ U(ie, {
+							id: f,
 							label: n.modelOrAgentLabel,
 							required: !0
 						}),
-						c,
-						s.modelId && /* @__PURE__ */ B("p", {
-							className: a(k, Y.instructionsError),
+						d,
+						s.modelId && /* @__PURE__ */ U("p", {
+							className: h(V, X.instructionsError),
 							children: s.modelId
 						})
 					]
 				}),
-				/* @__PURE__ */ V("div", {
+				/* @__PURE__ */ W("div", {
 					className: "flex flex-col gap-3",
 					children: [
-						/* @__PURE__ */ B(ne, {
+						/* @__PURE__ */ U(ue, {
 							labelProps: { label: n.repeatLabel },
 							value: r.repeat,
-							onChange: (e) => u("repeat", e),
+							onChange: (e) => x("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 === t.OneTime && /* @__PURE__ */ U(He, {
+							label: n.runAtLabel,
+							value: r.runAt ?? "",
+							onChange: Ae,
+							error: s.runAt,
+							errorClassName: V
 						}),
-						r.repeat !== q.OneTime && /* @__PURE__ */ V(z, { children: [
-							r.repeat !== q.Hourly && /* @__PURE__ */ V("div", {
+						r.repeat !== t.OneTime && /* @__PURE__ */ W(we, { children: [
+							q && /* @__PURE__ */ W("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ B(d, {
+								children: [/* @__PURE__ */ U(S, {
 									id: "scheduled-task-time",
-									mode: f.Time,
+									mode: C.Time,
 									value: r.time,
-									onChange: (e) => u("time", typeof e == "string" ? e : ""),
+									onChange: Oe,
+									onBlur: K,
 									labelProps: {
 										label: n.timeLabel,
 										required: !0
 									},
-									invalid: !!s.time
-								}), s.time && /* @__PURE__ */ B("p", {
-									className: a(k, Y.instructionsError),
-									children: s.time
+									invalid: !!ke,
+									disabled: D,
+									showTimezone: !0
+								}), ke && /* @__PURE__ */ U("p", {
+									className: h(V, X.instructionsError),
+									children: ke
 								})]
 							}),
-							r.repeat === q.Weekly && /* @__PURE__ */ V("div", {
+							r.repeat === t.Weekly && /* @__PURE__ */ W("div", {
 								className: "flex flex-col gap-1",
-								children: [/* @__PURE__ */ B(d, {
+								children: [/* @__PURE__ */ U(S, {
 									id: "scheduled-task-day-of-week",
-									mode: f.Weekday,
-									value: Oe(r.dayOfWeek),
-									onChange: (e) => u("dayOfWeek", ke(e)),
+									mode: C.Weekday,
+									value: a(r.dayOfWeek),
+									onChange: (e) => x("dayOfWeek", o(e)),
 									labelProps: {
 										label: n.dayOfWeekLabel,
 										required: !0
 									},
 									invalid: !!s.dayOfWeek
-								}), s.dayOfWeek && /* @__PURE__ */ B("p", {
-									className: a(k, Y.instructionsError),
+								}), s.dayOfWeek && /* @__PURE__ */ U("p", {
+									className: h(V, X.instructionsError),
 									children: s.dayOfWeek
 								})]
 							}),
-							r.repeat === q.Monthly && /* @__PURE__ */ B(x, {
+							r.repeat === t.Monthly && /* @__PURE__ */ U(re, {
 								id: "scheduled-task-day-of-month",
 								value: r.dayOfMonth ?? "",
-								onChange: (e) => u("dayOfMonth", e ?? ""),
+								onChange: (e) => x("dayOfMonth", e ?? ""),
 								labelProps: {
 									label: n.dayOfMonthLabel,
 									required: !0
@@ -458,13 +610,13 @@ var U = {
 								invalid: !!s.dayOfMonth,
 								error: s.dayOfMonth
 							}),
-							r.repeat === q.Hourly && /* @__PURE__ */ B(ee, {
+							r.repeat === t.Hourly && /* @__PURE__ */ U(se, {
 								id: "scheduled-task-minute",
 								integer: !0,
 								min: 0,
 								max: 59,
 								value: r.minute ?? "",
-								onChange: (e) => u("minute", e == null ? "" : String(e)),
+								onChange: (e) => x("minute", e == null ? "" : String(e)),
 								labelProps: {
 									label: n.minuteLabel,
 									required: !0
@@ -472,34 +624,34 @@ var U = {
 								invalid: !!s.minute,
 								error: s.minute
 							}),
-							/* @__PURE__ */ V("div", {
-								className: "flex flex-row gap-3 desktop:flex-col",
-								children: [/* @__PURE__ */ V("div", {
+							/* @__PURE__ */ W("div", {
+								className: "flex flex-row gap-3",
+								children: [/* @__PURE__ */ W("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ B(d, {
+									children: [/* @__PURE__ */ U(S, {
 										id: "scheduled-task-start-date",
-										mode: f.Date,
-										value: Ee(r.startDate),
-										onChange: (e) => u("startDate", De(e)),
+										mode: C.Date,
+										value: e(r.startDate),
+										onChange: (e) => x("startDate", i(e)),
 										labelProps: { label: n.startDateLabel },
 										placeholder: n.startDatePlaceholder,
 										invalid: !!s.startDate
-									}), s.startDate && /* @__PURE__ */ B("p", {
-										className: a(k, Y.instructionsError),
+									}), s.startDate && /* @__PURE__ */ U("p", {
+										className: h(V, X.instructionsError),
 										children: s.startDate
 									})]
-								}), /* @__PURE__ */ V("div", {
+								}), /* @__PURE__ */ W("div", {
 									className: "flex flex-1 flex-col gap-1",
-									children: [/* @__PURE__ */ B(d, {
+									children: [/* @__PURE__ */ U(S, {
 										id: "scheduled-task-end-date",
-										mode: f.Date,
-										value: Ee(r.endDate),
-										onChange: (e) => u("endDate", De(e)),
+										mode: C.Date,
+										value: e(r.endDate),
+										onChange: (e) => x("endDate", i(e)),
 										labelProps: { label: n.endDateLabel },
 										placeholder: n.endDatePlaceholder,
 										invalid: !!s.endDate
-									}), s.endDate && /* @__PURE__ */ B("p", {
-										className: a(k, Y.instructionsError),
+									}), s.endDate && /* @__PURE__ */ U("p", {
+										className: h(V, X.instructionsError),
 										children: s.endDate
 									})]
 								})]
@@ -509,266 +661,347 @@ var U = {
 				})
 			]
 		}),
-		children: /* @__PURE__ */ V("div", {
+		children: /* @__PURE__ */ W("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__ */ 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: _
-							})
+			className: h("flex flex-1 flex-col gap-5 py-6", X.formColumn),
+			children: [
+				/* @__PURE__ */ W("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ U("h2", {
+						className: R,
+						children: n.configurationSectionTitle
+					}), /* @__PURE__ */ U("p", {
+						className: h(z, X.sectionSubtitle),
+						children: n.configurationSectionSubtitle
+					})]
+				}),
+				_ != null && /* @__PURE__ */ W("div", {
+					className: "flex w-full min-w-0 max-w-[996px] flex-col gap-1",
+					children: [/* @__PURE__ */ U("span", {
+						id: y,
+						className: Se,
+						children: n.skillLabel
+					}), _]
+				}),
+				/* @__PURE__ */ U("div", {
+					id: b,
+					"aria-live": "polite",
+					className: s.skillUrl ? void 0 : "sr-only",
+					children: s.skillUrl && /* @__PURE__ */ U("p", {
+						className: h(V, X.instructionsError),
+						children: s.skillUrl
+					})
+				}),
+				/* @__PURE__ */ U("div", {
+					className: "flex w-full min-w-0 max-w-[996px] flex-col",
+					children: /* @__PURE__ */ U(p, {
+						isEnabled: !!O,
+						fieldId: A,
+						labelClassName: Se,
+						label: n.instructionsLabel,
+						labels: n,
+						refinement: N,
+						disabled: D || he,
+						...G,
+						children: /* @__PURE__ */ W("div", {
+							className: "flex flex-1 flex-col gap-1",
+							children: [
+								!O && /* @__PURE__ */ U("label", {
+									htmlFor: A,
+									className: Se,
+									children: n.instructionsLabel
+								}),
+								/* @__PURE__ */ U("div", {
+									ref: _e,
+									className: h("w-full", l, u),
+									children: /* @__PURE__ */ U(be, {
+										fallback: /* @__PURE__ */ U(de, {}),
+										children: /* @__PURE__ */ U(Ue, {
+											id: A,
+											value: r.prompt,
+											onChange: (e) => {
+												N.reset(), x("prompt", e);
+											},
+											height: 480,
+											theme: ae,
+											placeholder: n.instructionsPlaceholder
+										})
+									})
+								}),
+								s.prompt && /* @__PURE__ */ U("p", {
+									className: h(V, X.instructionsError),
+									children: s.prompt
+								})
+							]
 						})
-					}),
-					s.prompt && /* @__PURE__ */ B("p", {
-						className: a(k, Y.instructionsError),
-						children: s.prompt
 					})
-				]
-			})]
+				})
+			]
 		})
 	});
-}, X = /* @__PURE__ */ function(e) {
+}, Z = /* @__PURE__ */ function(e) {
 	return e.Details = "details", e.Configuration = "configuration", e.History = "history", e;
-}({}), Me = /* @__PURE__ */ function(e) {
+}({}), Ge = /* @__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", {
+}({}), Ke = { subtitleText: "_subtitleText_1i4x2_3" }, qe = ({ skillLabel: e, skillDisplayName: t, instructionsLabel: n, instructionsMarkdown: r, renderInstructions: i, fieldLabelClassName: a = "dial-tiny-text" }) => /* @__PURE__ */ W("div", {
+	className: "flex min-w-0 flex-col gap-5",
+	children: [t && /* @__PURE__ */ W("div", {
+		role: "group",
+		"aria-label": e,
+		className: "flex min-w-0 flex-col gap-1",
+		children: [/* @__PURE__ */ U("span", {
+			className: h(a, Ke.subtitleText),
+			children: e
+		}), /* @__PURE__ */ U("p", {
+			className: "whitespace-normal break-all",
+			children: t
+		})]
+	}), r && /* @__PURE__ */ W("div", {
+		role: "group",
+		"aria-label": n,
+		className: "flex min-w-0 flex-col gap-1",
+		children: [/* @__PURE__ */ U("span", {
+			className: h(a, Ke.subtitleText),
+			children: n
+		}), i ? i(r) : /* @__PURE__ */ U(d, { content: r })]
+	})]
+}), Je = { subtitleText: "_subtitleText_1i4x2_3" }, Ye = ({ labels: e, description: t, modelLabel: n, repeatsLabel: r, activeWindowLabel: i, completedLabel: a, fieldLabelClassName: o = "dial-tiny-text", fieldValueClassName: s = "dial-small-text" }) => /* @__PURE__ */ W(we, { children: [
+	t && /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ B("span", {
-			className: a(o, Fe.subtitleText),
+		children: [/* @__PURE__ */ U("span", {
+			className: h(o, Je.subtitleText),
 			children: e.descriptionLabel
-		}), /* @__PURE__ */ B("p", {
+		}), /* @__PURE__ */ U("p", {
 			className: s,
 			children: t
 		})]
 	}),
-	n && /* @__PURE__ */ V("div", {
+	a && /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ B("span", {
-			className: a(o, Fe.subtitleText),
+		children: [/* @__PURE__ */ U("span", {
+			className: h(o, Je.subtitleText),
+			children: e.completedFieldLabel
+		}), /* @__PURE__ */ U("p", {
+			className: s,
+			children: a
+		})]
+	}),
+	n && /* @__PURE__ */ W("div", {
+		className: "flex flex-col gap-1",
+		children: [/* @__PURE__ */ U("span", {
+			className: h(o, Je.subtitleText),
 			children: e.modelLabel
-		}), /* @__PURE__ */ B("p", {
+		}), /* @__PURE__ */ U("p", {
 			className: s,
 			children: n
 		})]
 	}),
-	r && /* @__PURE__ */ V("div", {
+	r && /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ B("span", {
-			className: a(o, Fe.subtitleText),
+		children: [/* @__PURE__ */ U("span", {
+			className: h(o, Je.subtitleText),
 			children: e.repeatsLabel
-		}), /* @__PURE__ */ B("p", {
+		}), /* @__PURE__ */ U("p", {
 			className: s,
 			children: r
 		})]
 	}),
-	i && /* @__PURE__ */ V("div", {
+	i && /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-1",
-		children: [/* @__PURE__ */ B("span", {
-			className: a(o, Fe.subtitleText),
+		children: [/* @__PURE__ */ U("span", {
+			className: h(o, Je.subtitleText),
 			children: e.activeWindowLabel
-		}), /* @__PURE__ */ B("p", {
+		}), /* @__PURE__ */ U("p", {
 			className: s,
 			children: i
 		})]
 	})
-] }), Z = /* @__PURE__ */ function(e) {
+] }), Xe = /* @__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 }) => {
+	subtitleText: "_subtitleText_1naww_1",
+	successIcon: "_successIcon_1naww_5",
+	errorIcon: "_errorIcon_1naww_9",
+	missedIcon: "_missedIcon_1naww_13",
+	currentRun: "_currentRun_1naww_17",
+	interactiveRow: "_interactiveRow_1naww_21",
+	unreadDot: "_unreadDot_1naww_29",
+	rowLayout: "_rowLayout_1naww_33"
+}, Ze = ({ status: e }) => {
 	switch (e) {
-		case Z.Success: return /* @__PURE__ */ B(M, {
-			size: m.SM,
+		case Xe.Success: return /* @__PURE__ */ U(_e, {
+			size: T.SM,
 			className: Q.successIcon,
 			"aria-hidden": !0,
-			stroke: h
+			stroke: E
 		});
-		case Z.Error: return /* @__PURE__ */ B(ae, {
-			size: m.SM,
+		case Xe.Error: return /* @__PURE__ */ U(P, {
+			size: T.SM,
 			className: Q.errorIcon,
 			"aria-hidden": !0,
-			stroke: h
+			stroke: E
 		});
-		case Z.InProgress: return /* @__PURE__ */ B("span", {
+		case Xe.InProgress: return /* @__PURE__ */ U("span", {
 			"aria-hidden": !0,
-			children: /* @__PURE__ */ B(O, { size: m.SM })
+			children: /* @__PURE__ */ U(de, { size: T.SM })
 		});
-		case Z.Missed: return /* @__PURE__ */ B(j, {
-			size: m.SM,
+		case Xe.Missed: return /* @__PURE__ */ U(N, {
+			size: T.SM,
 			className: Q.missedIcon,
 			"aria-hidden": !0,
-			stroke: h
+			stroke: E
 		});
 		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 ? {
+}, Qe = ({ items: e, isLoading: t = !1, isLoadingMore: n = !1, skeletonCount: r = 6, error: i, onRetry: a, currentRunId: o, onRunClick: s, labels: c, footer: l, styles: u }) => {
+	let { colors: d, typography: f } = u ?? {}, p = f?.runTimestampClassName ?? "dial-small-text", g = f?.subtitleClassName ?? "dial-body-text", _ = c.unreadIndicatorLabel ?? "Unread", v = m({
+		"--strhl-success-icon": d?.successIconColor,
+		"--strhl-error-icon": d?.errorIconColor,
+		"--strhl-missed-icon": d?.missedIconColor,
+		"--strhl-subtitle-text": d?.subtitleTextColor,
+		"--strhl-current-run-bg": d?.currentRunBackground,
+		"--strhl-unread-dot": d?.unreadDotColor,
+		"--strhl-row-hover-bg": u?.rowHoverBackground,
+		"--strhl-row-focus-bg": u?.rowFocusBackground
+	}), y = (e) => {
+		let t = c.runStatusLabels[e.status], n = e.id === o, r = [e.isUnread ? _ : void 0, n ? c.currentRunLabel : void 0].filter((e) => !!e), i = [`${t} ${e.timestampLabel}`, ...r].join(" — "), a = !!e.conversationId && !!s;
+		return /* @__PURE__ */ W("li", {
+			...a ? {
 				role: "button",
 				tabIndex: 0,
-				onClick: () => l?.(e),
+				onClick: () => s?.(e),
 				onKeyDown: (t) => {
-					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), l?.(e));
+					(t.key === "Enter" || t.key === " ") && (t.preventDefault(), s?.(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: h("flex min-h-[var(--strhl-row-min-height,32px)] max-w-[328px] items-center justify-between gap-2 rounded-full pe-2", Q.rowLayout, n && Q.currentRun, a && "cursor-pointer", a && Q.interactiveRow),
+			children: [/* @__PURE__ */ W("span", {
 				className: "flex items-center gap-2 truncate",
-				children: [/* @__PURE__ */ B("span", {
+				children: [/* @__PURE__ */ U("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),
+					children: e.isUnread && /* @__PURE__ */ U("span", {
+						className: h("size-[5.33px] rounded-full", Q.unreadDot),
 						"aria-hidden": !0
 					})
-				}), /* @__PURE__ */ B("span", {
-					className: a(g, "truncate"),
+				}), /* @__PURE__ */ U("span", {
+					className: h(p, "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__ */ U("span", {
+				className: "flex min-h-[var(--strhl-row-min-height,32px)] w-14 shrink-0 items-center justify-end",
+				children: /* @__PURE__ */ U(Ze, { status: e.status })
 			})]
 		}, e.id);
-	}, S = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ V("li", {
+	}, b = (e) => Array.from({ length: e }, (e, t) => /* @__PURE__ */ W("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,
+		className: h("flex min-h-[var(--strhl-row-min-height,32px)] max-w-[328px] items-center justify-between gap-2 pe-2", Q.rowLayout),
+		children: [/* @__PURE__ */ U(A, {
+			variant: j.Rectangular,
 			width: "160px",
 			height: "16px"
-		}), /* @__PURE__ */ B(E, {
-			variant: D.Rectangular,
+		}), /* @__PURE__ */ U(A, {
+			variant: j.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,
+	return t && e.length === 0 ? /* @__PURE__ */ U("ul", {
+		style: {
+			...v,
+			"--strhl-row-min-height": u?.rowMinHeight
+		},
+		"aria-label": c.historyTitle,
 		className: "flex flex-col gap-0.5",
-		children: S(r)
-	}) : o && e.length === 0 ? /* @__PURE__ */ V("div", {
-		style: b,
+		children: b(r)
+	}) : i && e.length === 0 ? /* @__PURE__ */ W("div", {
+		style: v,
 		className: "flex flex-col items-start gap-3",
-		children: [/* @__PURE__ */ B("p", {
+		children: [/* @__PURE__ */ U("p", {
 			role: "alert",
-			className: a(_, Q.subtitleText),
-			children: u.errorLabel
-		}), /* @__PURE__ */ B(v, {
-			label: u.retryLabel,
-			onClick: s
+			className: h(g, Q.subtitleText),
+			children: c.errorLabel
+		}), /* @__PURE__ */ U(D, {
+			label: c.retryLabel,
+			onClick: a
 		})]
-	}) : e.length === 0 ? /* @__PURE__ */ V("div", {
-		style: b,
+	}) : e.length === 0 ? /* @__PURE__ */ W("div", {
+		style: v,
 		className: "flex w-full flex-col items-center justify-center gap-2 py-4",
-		children: [/* @__PURE__ */ B(N, {
+		children: [/* @__PURE__ */ U(ve, {
 			size: 44,
-			stroke: h,
+			stroke: E,
 			className: Q.subtitleText,
 			"aria-hidden": !0
-		}), /* @__PURE__ */ B("p", {
+		}), /* @__PURE__ */ U("p", {
 			role: "status",
-			className: g,
-			children: u.emptyLabel
+			className: p,
+			children: c.emptyLabel
 		})]
-	}) : /* @__PURE__ */ V("ul", {
-		style: b,
-		"aria-label": u.historyTitle,
+	}) : /* @__PURE__ */ W("ul", {
+		style: {
+			...v,
+			"--strhl-row-min-height": u?.rowMinHeight
+		},
+		"aria-label": c.historyTitle,
 		className: "flex flex-col gap-0.5",
 		children: [
-			e.map(x),
-			n && S(r),
-			o ? /* @__PURE__ */ V("li", {
+			e.map(y),
+			n && b(r),
+			i ? /* @__PURE__ */ W("li", {
 				className: "flex flex-col items-start gap-3 px-5 py-2",
-				children: [/* @__PURE__ */ B("p", {
+				children: [/* @__PURE__ */ U("p", {
 					role: "alert",
-					className: a(_, Q.subtitleText),
-					children: u.errorLabel
-				}), /* @__PURE__ */ B(v, {
-					label: u.retryLabel,
-					onClick: s
+					className: h(g, Q.subtitleText),
+					children: c.errorLabel
+				}), /* @__PURE__ */ U(D, {
+					label: c.retryLabel,
+					onClick: a
 				})]
-			}) : d
+			}) : l
 		]
 	});
-}, 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, {
+}, $e = {
+	historyCard: "_historyCard_153p9_4",
+	subtitleText: "_subtitleText_153p9_8",
+	cardLayout: "_cardLayout_153p9_13"
+}, et = ({ variant: e, labels: t, nextRunLabel: n, items: r, isLoading: i = !1, isLoadingMore: a = !1, skeletonCount: o = 6, error: s, onRetry: c, loadMoreError: l, onRetryLoadMore: u, hasMore: d = !1, onLoadMore: f, onRunClick: p, runTimestampClassName: m = "dial-small-text", sectionTitleClassName: g = "dial-body-semi-text", colors: _, styles: v }) => {
+	let y = e === Ge.Card, b = y ? h("sticky bottom-0 z-10 rounded-b-xl px-6 pb-5 pt-2", $e.historyCard) : "pt-2", x = l ? /* @__PURE__ */ W("li", {
+		className: b,
+		children: [/* @__PURE__ */ U("p", {
+			role: "alert",
+			children: t.historyLoadMoreErrorLabel ?? t.historyErrorLabel
+		}), u && /* @__PURE__ */ U(D, {
+			label: t.historyRetryLabel,
+			onClick: u,
+			disabled: a
+		})]
+	}) : f && d && t.historyShowMoreLabel ? /* @__PURE__ */ U("li", {
+		className: b,
+		children: /* @__PURE__ */ U(D, {
 			label: t.historyShowMoreLabel,
-			onClick: d,
-			disabled: o
+			onClick: f,
+			disabled: a
 		})
-	}) : void 0, b = n ? /* @__PURE__ */ B("p", {
-		className: a(p, ze.subtitleText),
+	}) : void 0, S = n ? /* @__PURE__ */ U("p", {
+		className: h(m, $e.subtitleText),
 		children: n
-	}) : void 0, x = t.historyLoadingMoreLabel ? /* @__PURE__ */ B("span", {
+	}) : void 0, C = t.historyLoadingMoreLabel ? /* @__PURE__ */ U("span", {
 		role: "status",
 		"aria-live": "polite",
 		className: "sr-only",
-		children: o ? t.historyLoadingMoreLabel : ""
-	}) : void 0, S = /* @__PURE__ */ B(Re, {
+		children: a ? t.historyLoadingMoreLabel : ""
+	}) : void 0, w = /* @__PURE__ */ U(Qe, {
 		items: r,
 		isLoading: i,
-		isLoadingMore: o,
-		skeletonCount: s,
-		error: c,
-		onRetry: l,
-		onRunClick: f,
+		isLoadingMore: a,
+		skeletonCount: o,
+		error: s,
+		onRetry: c,
+		onRunClick: p,
 		labels: {
 			historyTitle: t.historyTitle,
 			emptyLabel: t.historyEmptyLabel,
@@ -777,261 +1010,368 @@ var U = {
 			runStatusLabels: t.runStatusLabels,
 			unreadIndicatorLabel: t.unreadIndicatorLabel
 		},
-		footer: y,
+		footer: x,
 		styles: {
-			typography: { runTimestampClassName: p },
-			colors: h
+			typography: { runTimestampClassName: m },
+			colors: v?.colors ?? _,
+			rowMinHeight: v?.rowMinHeight,
+			rowHoverBackground: v?.rowHoverBackground,
+			rowFocusBackground: v?.rowFocusBackground
 		}
 	});
-	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),
+	return y ? /* @__PURE__ */ W("div", {
+		className: h("flex max-h-[var(--st-history-max-height,70vh)] w-full max-w-full flex-col overflow-y-auto rounded-xl shadow-md", $e.historyCard, $e.cardLayout),
+		style: { "--st-history-max-height": v?.maxHeight },
+		children: [/* @__PURE__ */ W("div", {
+			className: h("sticky top-0 z-10 flex flex-col gap-4 rounded-t-xl px-6 pb-2 pt-5", $e.historyCard),
 			children: [
-				/* @__PURE__ */ B("h2", {
-					className: m,
+				/* @__PURE__ */ U("h2", {
+					className: g,
 					children: t.historyTitle
 				}),
-				b,
-				x
+				S,
+				C
 			]
-		}), /* @__PURE__ */ B("div", {
+		}), /* @__PURE__ */ U("div", {
 			className: "flex flex-1 flex-col gap-4 px-6 pb-2",
-			children: S
+			children: w
 		})]
-	}) : /* @__PURE__ */ V("div", {
+	}) : /* @__PURE__ */ W("div", {
 		className: "flex flex-col gap-4",
 		children: [
-			b,
-			x,
-			S
+			S,
+			C,
+			w
 		]
 	});
 }, $ = {
-	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 = [
+	container: "_container_1v896_1",
+	header: "_header_1v896_8",
+	detailsColumn: "_detailsColumn_1v896_22",
+	subtitleText: "_subtitleText_1v896_26",
+	desktopTitle: "_desktopTitle_1v896_31",
+	desktopBadge: "_desktopBadge_1v896_32",
+	mobileTitleRow: "_mobileTitleRow_1v896_36"
+}, tt = ({ labels: e, onBack: t, onEdit: n, onDelete: r, isDeleting: i = !1, isDeleted: a = !1, isCompleted: o = !1, isActive: s, isActiveUpdating: c = !1, isActiveDisabled: l = !1, activeDisabledReason: u, onActiveChange: d, displayName: f, isLoading: p = !1, error: g, onRetry: v, description: y, modelLabel: b, repeatsLabel: S, activeWindowLabel: C, completedLabel: w, nextRunLabel: ee, instructionsMarkdown: te, skillDisplayName: O, renderInstructions: re, runs: ie, runsIsLoading: ae = !1, runsIsLoadingMore: se = !1, runsSkeletonCount: k = 6, runsError: ce, onRunsRetry: le, runsLoadMoreError: ue, onRunsRetryLoadMore: A, runsHasMore: j = !1, onRunsLoadMore: pe, onRunClick: N, styles: he, className: ge, backIcon: _e, layout: P, historyStyles: ve }) => {
+	let { colors: I, typography: L } = he ?? {}, be = L?.titleClassName ?? "dial-h2-text", R = L?.sectionTitleClassName ?? "dial-body-semi-text", z = L?.fieldLabelClassName ?? "dial-tiny-text", B = L?.fieldValueClassName ?? "dial-small-text", xe = L?.runTimestampClassName ?? "dial-small-text", Se = m({
+		"--stdv-bg": I?.background,
+		"--stdv-header-border": I?.headerBorder,
+		"--stdv-details-border": I?.detailsColumnBorder,
+		"--stdv-subtitle-text": I?.subtitleText,
+		"--stdv-history-bg": I?.historyCardBackground
+	}), V = _(), [H, Te] = Ce(Z.Details), Ee = [
 		{
-			id: X.Details,
+			id: Z.Details,
 			label: e.detailsTitle
 		},
 		{
-			id: X.Configuration,
+			id: Z.Configuration,
 			label: e.configurationTitle
 		},
 		{
-			id: X.History,
+			id: Z.History,
 			label: e.historyTitle
 		}
-	], _e = ge.find((e) => e.id === U)?.label ?? e.detailsTitle, W = /* @__PURE__ */ B(Ie, {
+	], De = Ee.find((e) => e.id === H)?.label ?? e.detailsTitle, G = /* @__PURE__ */ U(Ye, {
 		labels: {
 			descriptionLabel: e.descriptionLabel,
 			modelLabel: e.modelLabel,
 			repeatsLabel: e.repeatsLabel,
-			activeWindowLabel: e.activeWindowLabel
+			activeWindowLabel: e.activeWindowLabel,
+			completedFieldLabel: e.completedFieldLabel
 		},
-		description: S,
-		modelLabel: C,
-		repeatsLabel: ee,
-		activeWindowLabel: te,
-		fieldLabelClassName: fe,
-		fieldValueClassName: R
-	}), G = /* @__PURE__ */ B(Pe, {
+		description: y,
+		modelLabel: b,
+		repeatsLabel: S,
+		activeWindowLabel: C,
+		completedLabel: w,
+		fieldLabelClassName: z,
+		fieldValueClassName: B
+	}), K = /* @__PURE__ */ U(qe, {
 		instructionsLabel: e.instructionsLabel,
-		instructionsMarkdown: ne,
-		renderInstructions: E,
-		fieldLabelClassName: fe
-	}), ve = (t) => /* @__PURE__ */ B(Be, {
+		skillLabel: e.skillLabel,
+		skillDisplayName: O,
+		instructionsMarkdown: te,
+		renderInstructions: re,
+		fieldLabelClassName: z
+	}), Oe = (t) => /* @__PURE__ */ U(et, {
 		variant: t,
 		labels: {
 			historyTitle: e.historyTitle,
 			historyEmptyLabel: e.historyEmptyLabel,
 			historyErrorLabel: e.historyErrorLabel,
+			historyLoadMoreErrorLabel: e.historyLoadMoreErrorLabel,
 			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
+		nextRunLabel: ee,
+		items: ie,
+		isLoading: ae,
+		isLoadingMore: se,
+		skeletonCount: k,
+		error: ce,
+		onRetry: le,
+		loadMoreError: ue,
+		onRetryLoadMore: A,
+		hasMore: j,
+		onLoadMore: pe,
+		onRunClick: N,
+		runTimestampClassName: xe,
+		sectionTitleClassName: R,
+		colors: I,
+		styles: ve
 	});
-	return /* @__PURE__ */ V("div", {
-		style: H,
-		className: a("flex h-full w-full flex-col overflow-y-auto", $.container),
+	return /* @__PURE__ */ W("div", {
+		style: Se,
+		className: h("flex h-full w-full flex-col overflow-y-auto", $.container, ge),
 		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", {
+			/* @__PURE__ */ W("div", {
+				className: h("flex h-16 shrink-0 items-center justify-between gap-2 px-8", $.header),
+				children: [/* @__PURE__ */ W("div", {
 					className: "flex min-w-0 items-center gap-2",
 					children: [
-						/* @__PURE__ */ B(y, {
-							icon: /* @__PURE__ */ B(ie, {
-								size: m.LG,
+						/* @__PURE__ */ U(ne, {
+							icon: _e === void 0 ? /* @__PURE__ */ U(me, {
+								size: T.LG,
 								className: "rtl:scale-x-[-1]",
 								"aria-hidden": !0,
-								stroke: h
-							}),
+								stroke: E
+							}) : _e,
 							"aria-label": e.backAriaLabel,
 							onClick: t
 						}),
-						/* @__PURE__ */ B("h1", {
-							className: a("hidden truncate desktop:block", I),
-							children: g
+						/* @__PURE__ */ U("h1", {
+							className: h("truncate", $.desktopTitle, be),
+							children: f
 						}),
-						c && /* @__PURE__ */ B("span", {
-							className: a("hidden shrink-0 desktop:inline", R, $.subtitleText),
+						a && /* @__PURE__ */ U("span", {
+							className: h("shrink-0", $.desktopBadge, B, $.subtitleText),
 							children: e.deletedStateLabel
 						})
 					]
-				}), /* @__PURE__ */ V("div", {
+				}), /* @__PURE__ */ W("div", {
 					className: "flex shrink-0 items-center gap-2",
 					children: [
-						!c && l !== void 0 && /* @__PURE__ */ B(k, {
+						!a && !o && s !== void 0 && /* @__PURE__ */ W(we, { children: [/* @__PURE__ */ U(fe, {
 							id: "scheduled-task-active-switch",
 							labelProps: { label: e.activeStatusLabel },
-							isOn: l,
-							disabled: d || f || o,
-							onChange: (e) => p?.(e)
-						}),
-						!c && r && /* @__PURE__ */ B(v, {
-							variant: u.Danger,
+							isOn: s,
+							disabled: c || l || i,
+							onChange: (e) => d?.(e)
+						}), l && u && /* @__PURE__ */ U("span", {
+							className: h(B, $.subtitleText),
+							children: u
+						})] }),
+						!a && r && /* @__PURE__ */ U(D, {
+							variant: x.Danger,
 							label: e.deleteButtonLabel,
-							iconBefore: /* @__PURE__ */ B(le, {
-								size: m.SM,
+							iconBefore: /* @__PURE__ */ U(ye, {
+								size: T.SM,
 								"aria-hidden": !0,
-								stroke: h
+								stroke: E
 							}),
 							onClick: r,
-							disabled: o,
+							disabled: i,
 							className: "shrink-0"
 						}),
-						!c && n && /* @__PURE__ */ B(w, {
+						!a && n && /* @__PURE__ */ U(oe, {
 							label: e.editButtonLabel,
-							iconBefore: /* @__PURE__ */ B(oe, {
-								size: m.SM,
+							iconBefore: /* @__PURE__ */ U(F, {
+								size: T.SM,
 								"aria-hidden": !0,
-								stroke: h
+								stroke: E
 							}),
 							onClick: n,
-							disabled: o,
+							disabled: i,
 							className: "shrink-0"
 						})
 					]
 				})]
 			}),
-			/* @__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),
+			/* @__PURE__ */ W("div", {
+				className: h("min-w-0 items-center gap-2 px-8 py-3", $.mobileTitleRow),
+				children: [/* @__PURE__ */ U("h1", {
+					className: h("truncate", be),
+					children: f
+				}), a && /* @__PURE__ */ U("span", {
+					className: h("shrink-0", B, $.subtitleText),
 					children: e.deletedStateLabel
 				})]
 			}),
-			e.activeStatusAnnouncement != null && /* @__PURE__ */ B("span", {
+			e.activeStatusAnnouncement != null && /* @__PURE__ */ U("span", {
 				role: "status",
 				"aria-live": "polite",
 				className: "sr-only",
 				children: e.activeStatusAnnouncement
 			}),
-			_ && /* @__PURE__ */ B("div", {
+			p && /* @__PURE__ */ U("div", {
 				className: "flex flex-1 items-center justify-center",
-				children: /* @__PURE__ */ B(O, {})
+				children: /* @__PURE__ */ U(de, {})
 			}),
-			!_ && b && /* @__PURE__ */ V("div", {
+			!p && g && /* @__PURE__ */ W("div", {
 				className: "flex flex-1 flex-col items-center justify-center gap-3",
-				children: [/* @__PURE__ */ B("p", {
-					className: a(R, $.subtitleText),
+				children: [/* @__PURE__ */ U("p", {
+					className: h(B, $.subtitleText),
 					children: e.errorLabel
-				}), /* @__PURE__ */ B(v, {
+				}), /* @__PURE__ */ U(D, {
 					label: e.retryLabel,
-					onClick: x
+					onClick: v
 				})]
 			}),
-			!_ && !b && (me ? /* @__PURE__ */ V("div", {
+			!p && !g && (V ? /* @__PURE__ */ W("div", {
 				className: "flex flex-1 flex-col",
-				children: [/* @__PURE__ */ B(re, {
+				children: [/* @__PURE__ */ U(M, {
 					ariaLabel: e.tabsAriaLabel ?? "Scheduled task sections",
 					className: "px-8",
-					tabs: ge,
-					activeTabId: U,
-					onTabChange: he
-				}), /* @__PURE__ */ B("div", {
+					tabs: Ee,
+					activeTabId: H,
+					onTabChange: Te
+				}), /* @__PURE__ */ U("div", {
 					role: "tabpanel",
-					"aria-label": _e,
+					"aria-label": De,
 					className: "flex flex-1 flex-col gap-5 px-8 py-6",
-					children: U === X.Configuration ? G : U === X.History ? ve(Me.Flow) : W
+					children: H === Z.Configuration ? K : H === Z.History ? Oe(Ge.Flow) : G
 				})]
-			}) : /* @__PURE__ */ V("div", {
-				className: "flex flex-1 flex-col desktop:flex-row",
+			}) : /* @__PURE__ */ W("div", {
+				style: {
+					flexDirection: "row",
+					flexWrap: "wrap",
+					"--st-details-width": P?.detailsWidth,
+					"--st-history-width": P?.historyWidth,
+					"--st-history-max-height": P?.historyMaxHeight,
+					"--st-configuration-min-width": P?.configurationMinWidth
+				},
+				className: "flex flex-1",
 				children: [
-					/* @__PURE__ */ V("div", {
+					/* @__PURE__ */ W("div", {
 						role: "group",
 						"aria-label": e.detailsTitle,
-						className: a("flex w-full flex-col gap-5 border-e px-8 py-6 desktop:w-[360px] desktop:shrink-0", $.detailsColumn),
-						children: [/* @__PURE__ */ B("h2", {
-							className: L,
+						style: {
+							flex: `0 1 ${P?.detailsWidth ?? "360px"}`,
+							maxWidth: "100%"
+						},
+						className: h("flex w-full flex-col gap-5 border-e px-8 py-6", $.detailsColumn),
+						children: [/* @__PURE__ */ U("h2", {
+							className: R,
 							children: e.detailsTitle
-						}), W]
+						}), G]
 					}),
-					/* @__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,
+					/* @__PURE__ */ W("div", {
+						style: {
+							flex: `1 1 ${P?.configurationMinWidth ?? "320px"}`,
+							minWidth: 0
+						},
+						className: "flex w-full min-w-0 flex-col gap-5 px-8 py-6",
+						children: [/* @__PURE__ */ U("h2", {
+							className: R,
 							children: e.configurationTitle
-						}), G]
+						}), K]
 					}),
-					/* @__PURE__ */ B("div", {
-						className: "flex w-full justify-center p-6 desktop:w-auto desktop:items-start",
-						children: ve(Me.Card)
+					/* @__PURE__ */ U("div", {
+						style: {
+							flex: `0 1 calc(${P?.historyWidth ?? "360px"} + 48px)`,
+							minWidth: 0
+						},
+						className: "flex w-full items-start justify-center p-6",
+						children: Oe(Ge.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", {
+}, nt = ({ modelLabel: e, skillLabel: t, skillDisplayName: n, instructionsLabel: r, modelDisplayName: i, instructionsMarkdown: a, renderInstructions: o, styles: s }) => {
+	let c = s?.typography?.fieldLabelClassName ?? "dial-tiny-text", l = s?.typography?.fieldValueClassName ?? "dial-body-text";
+	return /* @__PURE__ */ W("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)]
-		})]
+		children: [
+			i && /* @__PURE__ */ W("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ U("span", {
+					className: c,
+					children: e
+				}), /* @__PURE__ */ U("p", {
+					className: l,
+					children: i
+				})]
+			}),
+			n && /* @__PURE__ */ W("div", {
+				className: "flex min-w-0 flex-col gap-2",
+				children: [/* @__PURE__ */ U("span", {
+					className: c,
+					children: t
+				}), /* @__PURE__ */ U("p", {
+					className: `${l} whitespace-normal break-all`,
+					children: n
+				})]
+			}),
+			a && /* @__PURE__ */ W("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ U("span", {
+					className: c,
+					children: r
+				}), ((e) => o ? o(e) : /* @__PURE__ */ U(d, { content: e }))(a)]
+			})
+		]
+	});
+}, rt = ({ open: e, taskName: t, title: n, body: r, consequences: i = [], cancelLabel: a, cancelAppearance: o = y.Ghost, confirmLabel: s, pendingLabel: c, isDeleting: l = !1, onConfirm: u, onClose: d, styles: f }) => {
+	let p = () => {
+		l || d();
+	};
+	return /* @__PURE__ */ U(k, {
+		open: e,
+		className: f?.popupClassName,
+		header: /* @__PURE__ */ U("span", {
+			className: f?.titleClassName,
+			children: n
+		}),
+		onClose: p,
+		mainButtons: [{
+			label: a,
+			onClick: p,
+			disabled: l,
+			appearance: o
+		}, {
+			label: l ? c ?? s : s,
+			onClick: () => {
+				l || u();
+			},
+			disabled: l,
+			variant: x.Danger,
+			className: f?.actionClassName
+		}],
+		children: /* @__PURE__ */ W("div", {
+			className: "flex flex-col gap-4 px-6 pb-4 pt-2",
+			children: [
+				/* @__PURE__ */ U("div", {
+					className: "flex h-11 items-center rounded-lg border border-error-alpha bg-error px-3",
+					children: /* @__PURE__ */ U("span", {
+						className: "dial-small-semi-text truncate",
+						children: t
+					})
+				}),
+				/* @__PURE__ */ U("div", {
+					className: "dial-body-paragraph-text break-words",
+					children: r
+				}),
+				i.length > 0 && /* @__PURE__ */ U("ul", {
+					className: "flex flex-col gap-2 ps-[18px]",
+					children: i.map((e, t) => /* @__PURE__ */ U("li", {
+						className: "dial-body-paragraph-text list-disc text-secondary marker:text-secondary",
+						children: e
+					}, t))
+				}),
+				l && /* @__PURE__ */ U("span", {
+					role: "status",
+					"aria-live": "polite",
+					className: "sr-only",
+					children: c ?? s
+				})
+			]
+		})
 	});
 };
 //#endregion
-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 };
+export { r as DESCRIPTION_MAX_LENGTH, De as SCHEDULED_TASKS_CLASS, je as ScheduledTaskCard, Ie as ScheduledTaskCardGrid, Fe as ScheduledTaskCardSkeleton, We as ScheduledTaskCreateForm, rt as ScheduledTaskDeleteConfirmation, tt as ScheduledTaskDetailView, nt as ScheduledTaskDetailsSummary, et as ScheduledTaskHistorySection, K as ScheduledTaskPresentationStatus, t as ScheduledTaskRepeat, Qe as ScheduledTaskRunHistoryList, Xe as ScheduledTaskRunStatus, G as ScheduledTaskStatus, ze as ScheduledTasks, Be as ScheduledTasksSortKey, c as TIME_OF_DAY_PATTERN, Oe as getScheduledTaskStatus };