@loopstack/loopstack-studio 0.21.0-rc.0 → 0.21.1

package/dist/features/oauth/useOAuthPopup.js

@@ -0,0 +1,83 @@
+import { c } from "react/compiler-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+var OAUTH_MESSAGE_TYPE = "loopstack:oauth:callback", POPUP_POLL_INTERVAL_MS = 500, DEFAULT_TIMEOUT_MS = 3e5;
+function isOAuthCallbackMessage(e) {
+	return typeof e == "object" && !!e && e.type === OAUTH_MESSAGE_TYPE;
+}
+function openCenteredPopup(e, o, s) {
+	let l = `width=${o},height=${s},left=${Math.round(window.screenX + (window.outerWidth - o) / 2)},top=${Math.round(window.screenY + (window.outerHeight - s) / 2)},popup=yes,noopener=no`;
+	return window.open(e, "loopstack-oauth", l);
+}
+function useOAuthPopup() {
+	let o = c(11), d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (d = { status: "idle" }, o[0] = d) : d = o[0];
+	let [p, m] = useState(d), h = useRef(null), g = useRef(null), _ = useRef(null), v = useRef(null), y;
+	o[1] === Symbol.for("react.memo_cache_sentinel") ? (y = () => {
+		g.current &&= (clearTimeout(g.current), null), _.current &&= (clearInterval(_.current), null), v.current = null;
+	}, o[1] = y) : y = o[1];
+	let b = y, x;
+	o[2] === Symbol.for("react.memo_cache_sentinel") ? (x = () => {
+		h.current && !h.current.closed && h.current.close(), h.current = null;
+	}, o[2] = x) : x = o[2];
+	let S = x, C, w;
+	o[3] === Symbol.for("react.memo_cache_sentinel") ? (C = () => {
+		let e = (e) => {
+			if (e.origin !== window.location.origin || !isOAuthCallbackMessage(e.data) || !v.current) return;
+			let o = e.data;
+			o.error ? m({
+				status: "error",
+				error: o.errorDescription || o.error
+			}) : o.code && o.state ? o.state === v.current ? m({
+				status: "success",
+				code: o.code,
+				state: o.state
+			}) : m({
+				status: "error",
+				error: "State mismatch. Possible CSRF attack."
+			}) : m({
+				status: "error",
+				error: "Invalid callback response."
+			}), b(), S();
+		};
+		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+	}, w = [b, S], o[3] = C, o[4] = w) : (C = o[3], w = o[4]), useEffect(C, w);
+	let T, E;
+	o[5] === Symbol.for("react.memo_cache_sentinel") ? (T = () => () => {
+		b();
+	}, E = [b], o[5] = T, o[6] = E) : (T = o[5], E = o[6]), useEffect(T, E);
+	let D;
+	o[7] === Symbol.for("react.memo_cache_sentinel") ? (D = (e) => {
+		let { authUrl: o, state: s, popupWidth: l, popupHeight: u, timeoutMs: d } = e, f = l === void 0 ? 500 : l, p = u === void 0 ? 700 : u, y = d === void 0 ? DEFAULT_TIMEOUT_MS : d;
+		b(), S(), v.current = s;
+		let x = openCenteredPopup(o, f, p);
+		if (!x) {
+			m({ status: "blocked" });
+			return;
+		}
+		h.current = x, m({ status: "pending" }), _.current = setInterval(() => {
+			x.closed && (_.current && clearInterval(_.current), _.current = null, m(_temp), b());
+		}, POPUP_POLL_INTERVAL_MS), g.current = setTimeout(() => {
+			m(_temp2), b(), S();
+		}, y);
+	}, o[7] = D) : D = o[7];
+	let O = D, k;
+	o[8] === Symbol.for("react.memo_cache_sentinel") ? (k = () => {
+		b(), S(), m({ status: "idle" });
+	}, o[8] = k) : k = o[8];
+	let A = k, j;
+	return o[9] === p ? j = o[10] : (j = {
+		result: p,
+		open: O,
+		reset: A
+	}, o[9] = p, o[10] = j), j;
+}
+function _temp2(e) {
+	return e.status === "pending" ? { status: "timeout" } : e;
+}
+function _temp(e) {
+	return e.status === "pending" ? {
+		status: "error",
+		error: "Authentication window was closed."
+	} : e;
+}
+export { useOAuthPopup };

package/dist/features/workbench/NavigationItems.js

@@ -0,0 +1,52 @@
+import { useStudio } from "../../providers/StudioProvider.js";
+import { Skeleton } from "../../components/ui/skeleton.js";
+import { SidebarMenuSubItem } from "../../components/ui/sidebar.js";
+import { useFetchWorkflowsByNamespace } from "../../hooks/useWorkflows.js";
+import { WorkbenchContextProvider } from "./providers/WorkbenchContextProvider.js";
+import NavigationItem_default from "./components/NavigationItem.js";
+import { useScroll } from "./providers/ScrollProvider.js";
+import { c } from "react/compiler-runtime";
+import React, { useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+var NavigationItems_default = (m) => {
+	let h = c(17), { namespace: g } = m, { router: _ } = useStudio(), { pipelineId: v, clickId: y } = useParams(), b = useContext(WorkbenchContextProvider), x = useFetchWorkflowsByNamespace(g.id), { setScrollTo: S } = useScroll(), C;
+	h[0] !== y || h[1] !== v || h[2] !== _ || h[3] !== S ? (C = (e) => {
+		S(!0), v && _.navigateToWorkflow(v, e, y);
+	}, h[0] = y, h[1] = v, h[2] = _, h[3] = S, h[4] = C) : C = h[4];
+	let w = C;
+	if (x.isPending) {
+		let e;
+		h[5] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 p-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })]
+		}) }), h[5] = e) : e = h[5];
+		let f;
+		h[6] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 p-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })]
+		}) }), h[6] = f) : f = h[6];
+		let p;
+		return h[7] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			e,
+			f,
+			/* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 p-2",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 flex-1" })]
+			}) })
+		] }), h[7] = p) : p = h[7], p;
+	}
+	if (!v || !x.data?.length) return null;
+	let T;
+	if (h[8] !== x.data || h[9] !== w || h[10] !== b?.state) {
+		let e;
+		h[12] !== w || h[13] !== b?.state ? (e = (e) => /* @__PURE__ */ jsx(SidebarMenuSubItem, { children: /* @__PURE__ */ jsx(NavigationItem_default, {
+			workflow: e,
+			isSelected: b?.state.activeSectionId?.endsWith(e.id) ?? !1,
+			navigateTo: w
+		}) }, `wf-${e.id}`), h[12] = w, h[13] = b?.state, h[14] = e) : e = h[14], T = x.data.map(e), h[8] = x.data, h[9] = w, h[10] = b?.state, h[11] = T;
+	} else T = h[11];
+	let E;
+	return h[15] === T ? E = h[16] : (E = /* @__PURE__ */ jsx(Fragment$1, { children: T }), h[15] = T, h[16] = E), E;
+};
+export { NavigationItems_default as default };

package/dist/features/workbench/Workbench.js

@@ -0,0 +1,101 @@
+import { useWorkspace } from "../../hooks/useWorkspaces.js";
+import { SidebarInsetDiv, SidebarProvider, SidebarTrigger } from "../../components/ui/sidebar.js";
+import { FileContentViewer } from "../code-explorer/components/FileContentViewer.js";
+import { CodeExplorerProvider, useCodeExplorerContext } from "../code-explorer/providers/CodeExplorerProvider.js";
+import { FileTabsBar } from "../code-explorer/components/FileTabsBar.js";
+import { useNamespaceTree } from "../../hooks/useNamespaceTree.js";
+import { WorkbenchContextProvider } from "./providers/WorkbenchContextProvider.js";
+import WorkflowList_default from "./WorkflowList.js";
+import { ScrollProvider } from "./providers/ScrollProvider.js";
+import WorkbenchSidebar_default from "./components/WorkbenchSidebar.js";
+import { c } from "react/compiler-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function WorkbenchContent(e) {
+	let a = c(11), { pipeline: o } = e, { openFiles: s, selectedFile: u, fileContent: p, workflowConfig: m, isContentLoading: _ } = useCodeExplorerContext(), v;
+	a[0] === o ? v = a[1] : (v = /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-hidden",
+		children: /* @__PURE__ */ jsx(ScrollProvider, { children: /* @__PURE__ */ jsx("div", {
+			className: "flex h-full flex-col",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex-1 overflow-hidden",
+				children: /* @__PURE__ */ jsx(WorkflowList_default, { pipeline: o })
+			})
+		}) })
+	}), a[0] = o, a[1] = v);
+	let y;
+	a[2] !== p || a[3] !== _ || a[4] !== s.length || a[5] !== u || a[6] !== m ? (y = s.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "w-full md:w-1/2 shrink-0 overflow-hidden flex flex-col",
+		children: [/* @__PURE__ */ jsx(FileTabsBar, {}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-hidden",
+			children: /* @__PURE__ */ jsx(FileContentViewer, {
+				selectedFile: u,
+				content: p,
+				workflowConfig: m,
+				isLoading: _,
+				className: "h-full"
+			})
+		})]
+	}), a[2] = p, a[3] = _, a[4] = s.length, a[5] = u, a[6] = m, a[7] = y) : y = a[7];
+	let b;
+	return a[8] !== v || a[9] !== y ? (b = /* @__PURE__ */ jsx("div", {
+		className: "flex h-full flex-col",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-1 gap-4 overflow-hidden md:flex-row flex-col",
+			children: [v, y]
+		})
+	}), a[8] = v, a[9] = y, a[10] = b) : b = a[10], b;
+}
+function Workbench(l) {
+	let d = c(23), { pipeline: f } = l, h = useNamespaceTree(f?.id), g = f?.workspaceId, v = useWorkspace(g), y;
+	d[0] === Symbol.for("react.memo_cache_sentinel") ? (y = { activeSectionId: null }, d[0] = y) : y = d[0];
+	let [x, S] = useState(y), C;
+	d[1] === Symbol.for("react.memo_cache_sentinel") ? (C = (e) => {
+		S({ activeSectionId: e });
+	}, d[1] = C) : C = d[1];
+	let w = C, T;
+	d[2] === x ? T = d[3] : (T = {
+		state: x,
+		setActiveSectionId: w
+	}, d[2] = x, d[3] = T);
+	let E = T, D = v.data?.features?.fileExplorer?.enabled ?? !1, O = f?.id, k;
+	d[4] === Symbol.for("react.memo_cache_sentinel") ? (k = /* @__PURE__ */ jsx(SidebarTrigger, { className: "fixed top-0 right-0 z-40 flex h-8 w-8 items-center justify-center p-8 hover:cursor-pointer md:hidden" }), d[4] = k) : k = d[4];
+	let A;
+	d[5] === f ? A = d[6] : (A = /* @__PURE__ */ jsx(SidebarInsetDiv, { children: /* @__PURE__ */ jsx("div", {
+		className: "flex-1",
+		children: /* @__PURE__ */ jsx(WorkbenchContent, { pipeline: f })
+	}) }), d[5] = f, d[6] = A);
+	let j;
+	d[7] === v.data ? j = d[8] : (j = v.data ? {
+		volumes: v.data.volumes,
+		features: v.data.features
+	} : void 0, d[7] = v.data, d[8] = j);
+	let M;
+	d[9] !== h || d[10] !== f || d[11] !== j ? (M = /* @__PURE__ */ jsx(WorkbenchSidebar_default, {
+		namespaceTree: h,
+		pipeline: f,
+		workspaceConfig: j
+	}), d[9] = h, d[10] = f, d[11] = j, d[12] = M) : M = d[12];
+	let N;
+	d[13] !== A || d[14] !== M ? (N = /* @__PURE__ */ jsxs(SidebarProvider, {
+		defaultOpen: !0,
+		className: "workbench-sidebar min-h-0",
+		children: [
+			k,
+			A,
+			M
+		]
+	}), d[13] = A, d[14] = M, d[15] = N) : N = d[15];
+	let P;
+	d[16] !== D || d[17] !== O || d[18] !== N ? (P = /* @__PURE__ */ jsx(CodeExplorerProvider, {
+		pipelineId: O,
+		fileExplorerEnabled: D,
+		children: N
+	}), d[16] = D, d[17] = O, d[18] = N, d[19] = P) : P = d[19];
+	let F;
+	return d[20] !== E || d[21] !== P ? (F = /* @__PURE__ */ jsx(WorkbenchContextProvider.Provider, {
+		value: E,
+		children: P
+	}), d[20] = E, d[21] = P, d[22] = F) : F = d[22], F;
+}
+export { Workbench as default };

package/dist/features/workbench/WorkbenchNavigation.js

@@ -0,0 +1,38 @@
+import { SidebarMenuDiv, SidebarMenuItem, SidebarMenuSub } from "../../components/ui/sidebar.js";
+import NavigationItems_default from "./NavigationItems.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { RectangleHorizontal } from "lucide-react";
+var WorkbenchNavigation_default = (d) => {
+	let f = c(6), { namespaceTree: p, indent: m } = d, h, g;
+	if (f[0] !== m || f[1] !== p) {
+		g = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			let l = (u, d) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsx(SidebarMenuDiv, {
+				className: "hover:bg-accent-sidebar-foreground w-full justify-between",
+				style: { paddingLeft: `${d * 16 + 8}px` },
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 items-center gap-2",
+					children: [/* @__PURE__ */ jsx(RectangleHorizontal, { className: "h-4 w-4 flex-shrink-0 text-gray-500" }), /* @__PURE__ */ jsx("span", {
+						className: "truncate",
+						children: u.name
+					})]
+				})
+			}), /* @__PURE__ */ jsx(SidebarMenuSub, {
+				style: { marginLeft: `${d * 16 + 8}px` },
+				children: /* @__PURE__ */ jsx(NavigationItems_default, { namespace: u })
+			})] }), u.childNodes?.map((e) => l(e, d + 1))] }, u.id);
+			if (!p || p.length === 0) {
+				g = null;
+				break bb0;
+			}
+			h = p.map((e) => l(e, m));
+		}
+		f[0] = m, f[1] = p, f[2] = h, f[3] = g;
+	} else h = f[2], g = f[3];
+	if (g !== Symbol.for("react.early_return_sentinel")) return g;
+	let _;
+	return f[4] === h ? _ = f[5] : (_ = /* @__PURE__ */ jsx(Fragment$1, { children: h }), f[4] = h, f[5] = _), _;
+};
+export { WorkbenchNavigation_default as default };

package/dist/features/workbench/WorkflowItem.js

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/utils.js";
+import ErrorSnackbar_default from "../../components/snackbars/ErrorSnackbar.js";
+import LoadingCentered_default from "../../components/LoadingCentered.js";
+import { useRunPipeline } from "../../hooks/useProcessor.js";
+import DocumentList_default from "./components/DocumentList.js";
+import WorkflowForms_default from "./components/WorkflowForms.js";
+import { useFilterDocuments } from "../../hooks/useDocuments.js";
+import { useWorkflow } from "../../hooks/useWorkflows.js";
+import ErrorAlert_default from "../../components/content/ErrorAlert.js";
+import WorkflowButtons_default from "./components/buttons/WorkflowButtons.js";
+import React, { useCallback, useEffect, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+var WorkflowItem_default = ({ pipeline: g, workflowId: _, scrollTo: v, settings: y, embed: b }) => {
+	let { workflowId: x, clickId: S } = useParams(), C = useWorkflow(_), w = useFilterDocuments(_);
+	useEffect(() => {
+		x === _ && C.isSuccess && w.isSuccess && v(_);
+	}, [
+		C.isSuccess,
+		w.isSuccess,
+		_,
+		x,
+		S,
+		v
+	]);
+	let T = useCallback((e) => {
+		let p = e.meta, m = e.ui, h = p?.hidden || m?.hidden || !!p?.hideAtPlaces?.includes(C.data?.place ?? "");
+		return !y.showFullMessageHistory && e.tags?.includes("internal") && (h = !0), !h;
+	}, [C.data, y.showFullMessageHistory]), E = useMemo(() => w.data ? w.data.filter(T) : [], [w.data, T]), D = useRunPipeline(), O = (e, p) => {
+		D.mutate({
+			pipelineId: C.data.pipelineId,
+			runPipelinePayloadDto: { transition: {
+				id: e,
+				workflowId: _,
+				payload: p
+			} }
+		});
+	}, k = D.isPending || C.data?.status === "running";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", b ? "p-0" : "min-h-[calc(100vh-16rem)] p-4"),
+		children: [
+			/* @__PURE__ */ jsx(LoadingCentered_default, { loading: C.isLoading || w.isLoading }),
+			/* @__PURE__ */ jsx(ErrorSnackbar_default, { error: w.error }),
+			/* @__PURE__ */ jsx(ErrorAlert_default, { error: C.data?.errorMessage }),
+			C.isSuccess && /* @__PURE__ */ jsx(DocumentList_default, {
+				pipeline: g,
+				workflow: C.data,
+				documents: E,
+				scrollTo: v,
+				settings: y,
+				isLoading: k
+			}),
+			/* @__PURE__ */ jsx(LoadingCentered_default, { loading: k }),
+			!!C.data && !b && /* @__PURE__ */ jsxs("div", {
+				className: "mt-auto flex flex-col gap-6 pt-12",
+				children: [/* @__PURE__ */ jsx(WorkflowForms_default, {
+					workflow: C.data,
+					onSubmit: O
+				}), /* @__PURE__ */ jsx(WorkflowButtons_default, {
+					pipeline: g,
+					workflow: C.data
+				})]
+			})
+		]
+	});
+};
+export { WorkflowItem_default as default };

package/dist/features/workbench/WorkflowList.js

@@ -0,0 +1,110 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../../components/ui/button.js";
+import ErrorSnackbar_default from "../../components/snackbars/ErrorSnackbar.js";
+import LoadingCentered_default from "../../components/LoadingCentered.js";
+import { useFetchWorkflowsByPipeline } from "../../hooks/useWorkflows.js";
+import WorkflowItem_default from "./WorkflowItem.js";
+import { useScrollToBottom } from "./hooks/useAutoScrollBottom.js";
+import { useIntersectionObserver } from "./hooks/useIntersectionObserver.js";
+import { useScrollToListItem } from "./hooks/useScrollToListItem.js";
+import { WorkbenchContextProvider } from "./providers/WorkbenchContextProvider.js";
+import WorkbenchSettingsModal_default from "./components/WorkbenchSettingsModal.js";
+import { c } from "react/compiler-runtime";
+import React, { useContext, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ChevronDownIcon, ChevronRightIcon, LayersIcon } from "lucide-react";
+var WorkflowList_default = (S) => {
+	let C = c(33), { pipeline: w } = S, T = useFetchWorkflowsByPipeline(w.id), [E, D] = useState(!1), O;
+	C[0] === Symbol.for("react.memo_cache_sentinel") ? (O = {}, C[0] = O) : O = C[0];
+	let [k, A] = useState(O), j;
+	C[1] === Symbol.for("react.memo_cache_sentinel") ? (j = {
+		enableDebugMode: !1,
+		showFullMessageHistory: !1
+	}, C[1] = j) : j = C[1];
+	let [M, N] = useState(j), { activeId: P, observe: F } = useIntersectionObserver("0px 0px 0px 0px"), { listRef: I, scrollTo: L } = useScrollToListItem(), { canScrollDown: R, scrollToBottom: z } = useScrollToBottom(), B = useContext(WorkbenchContextProvider), V, H;
+	C[2] !== P || C[3] !== B ? (V = () => {
+		B && B.setActiveSectionId && B.state.activeSectionId !== P && (B.setActiveSectionId(P), P && A((r) => ({
+			...r,
+			[P]: !0
+		})));
+	}, H = [P, B], C[2] = P, C[3] = B, C[4] = V, C[5] = H) : (V = C[4], H = C[5]), useEffect(V, H);
+	let U, W;
+	C[6] !== P || C[7] !== T.data ? (U = () => {
+		if (T.data && T.data.length > 0) {
+			let r = T.data.length - 1, y = T.data[r], b = `section-${y.index}-${y.id}`;
+			A({
+				[b]: !0,
+				...P && P !== b ? { [P]: !0 } : {}
+			});
+		}
+	}, W = [T.data, P], C[6] = P, C[7] = T.data, C[8] = U, C[9] = W) : (U = C[8], W = C[9]), useEffect(U, W);
+	let G;
+	C[10] === Symbol.for("react.memo_cache_sentinel") ? (G = (r) => {
+		A((y) => ({
+			...y,
+			[r]: !y[r]
+		}));
+	}, C[10] = G) : G = C[10];
+	let K = G, q;
+	C[11] !== R || C[12] !== z ? (q = R && /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "icon",
+		onClick: z,
+		className: "bg-background/80 fixed right-[calc(var(--sidebar-width)+1.5rem)] bottom-6 z-50 rounded-full shadow-md backdrop-blur-sm",
+		children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
+	}), C[11] = R, C[12] = z, C[13] = q) : q = C[13];
+	let J;
+	C[14] === T.isLoading ? J = C[15] : (J = /* @__PURE__ */ jsx(LoadingCentered_default, { loading: T.isLoading }), C[14] = T.isLoading, C[15] = J);
+	let Y;
+	C[16] === T.error ? Y = C[17] : (Y = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: T.error }), C[16] = T.error, C[17] = Y);
+	let X;
+	C[18] !== P || C[19] !== k || C[20] !== T.data || C[21] !== I || C[22] !== F || C[23] !== E || C[24] !== w || C[25] !== L || C[26] !== M ? (X = T.data ? /* @__PURE__ */ jsx("div", {
+		className: "mb-10",
+		ref: I,
+		children: /* @__PURE__ */ jsx("div", { children: T.data.map((y) => {
+			let b = `section-${y.index}-${y.id}`, x = P === b;
+			return /* @__PURE__ */ jsxs("div", {
+				ref: (r) => F(r),
+				"data-id": b,
+				className: "space-y-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10 backdrop-blur",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "mb-4 flex items-center gap-2 py-2 px-3 cursor-pointer border-b border-border bg-muted/50 rounded-t-sm",
+						onClick: () => K(b),
+						children: [
+							k[b] ? /* @__PURE__ */ jsx(ChevronDownIcon, { className: cn("size-4", x ? "text-primary" : "text-muted-foreground") }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: cn("size-4", x ? "text-primary" : "text-muted-foreground") }),
+							/* @__PURE__ */ jsx(LayersIcon, { className: cn("size-4", x ? "text-primary" : "text-muted-foreground") }),
+							/* @__PURE__ */ jsx("span", {
+								className: cn("text-base font-medium transition-colors flex-1", x ? "text-primary" : "text-muted-foreground text-gray-400"),
+								children: y.title ?? y.blockName
+							}),
+							x && /* @__PURE__ */ jsx(WorkbenchSettingsModal_default, {
+								settings: M,
+								onSettingsChange: N,
+								open: E,
+								onOpenChange: D
+							})
+						]
+					})
+				}), k[b] && /* @__PURE__ */ jsx("div", {
+					className: "max-w-4xl pl-9",
+					children: /* @__PURE__ */ jsx(WorkflowItem_default, {
+						pipeline: w,
+						workflowId: y.id,
+						scrollTo: L,
+						settings: M
+					})
+				})]
+			}, y.id);
+		}) })
+	}) : null, C[18] = P, C[19] = k, C[20] = T.data, C[21] = I, C[22] = F, C[23] = E, C[24] = w, C[25] = L, C[26] = M, C[27] = X) : X = C[27];
+	let Z;
+	return C[28] !== Y || C[29] !== X || C[30] !== q || C[31] !== J ? (Z = /* @__PURE__ */ jsxs("div", { children: [
+		q,
+		J,
+		Y,
+		X
+	] }), C[28] = Y, C[29] = X, C[30] = q, C[31] = J, C[32] = Z) : Z = C[32], Z;
+};
+export { WorkflowList_default as default };

package/dist/features/workbench/components/DocumentItem.js

@@ -0,0 +1,27 @@
+import DocumentMetadataPills_default from "./DocumentMetadataPills.js";
+import DocumentRenderer_default from "./DocumentRenderer.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { omit } from "lodash";
+var DocumentItem_default = (s) => {
+	let l = c(13), { document: u, workflow: d, pipeline: f, isActive: p, isLastItem: m, settings: h } = s, g = u.meta, _;
+	l[0] !== u || l[1] !== p || l[2] !== m || l[3] !== f || l[4] !== d ? (_ = /* @__PURE__ */ jsx(DocumentRenderer_default, {
+		document: u,
+		workflow: d,
+		pipeline: f,
+		isActive: p,
+		isLastItem: m
+	}), l[0] = u, l[1] = p, l[2] = m, l[3] = f, l[4] = d, l[5] = _) : _ = l[5];
+	let v;
+	l[6] !== u || l[7] !== g || l[8] !== h.enableDebugMode ? (v = h.enableDebugMode ? /* @__PURE__ */ jsx(DocumentMetadataPills_default, { metaData: {
+		...g?.data ?? {},
+		document: {
+			...u,
+			meta: omit(g ?? {}, ["data"])
+		}
+	} }) : /* @__PURE__ */ jsx(Fragment$1, {}), l[6] = u, l[7] = g, l[8] = h.enableDebugMode, l[9] = v) : v = l[9];
+	let y;
+	return l[10] !== _ || l[11] !== v ? (y = /* @__PURE__ */ jsxs(Fragment$1, { children: [_, v] }), l[10] = _, l[11] = v, l[12] = y) : y = l[12], y;
+};
+export { DocumentItem_default as default };

package/dist/features/workbench/components/DocumentList.js

@@ -0,0 +1,40 @@
+import DocumentItem_default from "./DocumentItem.js";
+import { c } from "react/compiler-runtime";
+import React, { useEffect } from "react";
+import { WorkflowState } from "@loopstack/api-client";
+import { jsx } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+var DocumentList_default = (i) => {
+	let s = c(23), { pipeline: l, workflow: u, documents: d, scrollTo: f, settings: p } = i, { workflowId: m, clickId: h } = useParams(), g;
+	s[0] !== m || s[1] !== f || s[2] !== u.id ? (g = () => {
+		m === u.id && f(u.id);
+	}, s[0] = m, s[1] = f, s[2] = u.id, s[3] = g) : g = s[3];
+	let _;
+	s[4] !== h || s[5] !== m || s[6] !== f || s[7] !== u.id ? (_ = [
+		u.id,
+		m,
+		h,
+		f
+	], s[4] = h, s[5] = m, s[6] = f, s[7] = u.id, s[8] = _) : _ = s[8], useEffect(g, _);
+	let v = u.status === WorkflowState.Waiting, y;
+	if (s[9] !== d || s[10] !== v || s[11] !== l || s[12] !== p || s[13] !== u) {
+		let r;
+		s[15] !== d.length || s[16] !== v || s[17] !== l || s[18] !== p || s[19] !== u ? (r = (r, i) => {
+			let a = r, o = r.place === u.place || !!a.meta?.enableAtPlaces?.includes(u.place);
+			return /* @__PURE__ */ jsx(DocumentItem_default, {
+				document: r,
+				workflow: u,
+				pipeline: l,
+				isActive: v && o,
+				isLastItem: i === d.length - 1,
+				settings: p
+			}, r.id);
+		}, s[15] = d.length, s[16] = v, s[17] = l, s[18] = p, s[19] = u, s[20] = r) : r = s[20], y = d.map(r), s[9] = d, s[10] = v, s[11] = l, s[12] = p, s[13] = u, s[14] = y;
+	} else y = s[14];
+	let b;
+	return s[21] === y ? b = s[22] : (b = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-6",
+		children: y
+	}), s[21] = y, s[22] = b), b;
+};
+export { DocumentList_default as default };

package/dist/features/workbench/components/DocumentMetadataPills.js

@@ -0,0 +1,63 @@
+import { Badge } from "../../../components/ui/badge.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../../../components/ui/dialog.js";
+import DocumentDetails_default from "./document-details/DocumentDetails.js";
+import PromptDetails_default from "./document-details/PromptDetails.js";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DefaultMetadataRenderer = (e) => {
+	let s = c(4), { data: l } = e, u;
+	s[0] === l ? u = s[1] : (u = JSON.stringify(l, null, 2), s[0] = l, s[1] = u);
+	let d;
+	return s[2] === u ? d = s[3] : (d = /* @__PURE__ */ jsx("div", {
+		className: "bg-muted max-h-96 overflow-auto rounded-md p-4 font-mono whitespace-pre-wrap",
+		children: u
+	}), s[2] = u, s[3] = d), d;
+}, metadataRenderers = {
+	prompt: (e) => /* @__PURE__ */ jsx(PromptDetails_default, { promptData: e }),
+	document: (e) => /* @__PURE__ */ jsx(DocumentDetails_default, { data: e })
+}, DocumentMetadataPills_default = (f) => {
+	let p = c(13), { metaData: m } = f, [h, g] = useState(null), [_, v] = useState(null), [y, b] = useState(!1), x;
+	p[0] === Symbol.for("react.memo_cache_sentinel") ? (x = (e, s) => {
+		g(e), v(s), b(!0);
+	}, p[0] = x) : x = p[0];
+	let S = x, C;
+	p[1] === h ? C = p[2] : (C = (e) => e && metadataRenderers[e] ? metadataRenderers[e](h) : /* @__PURE__ */ jsx(DefaultMetadataRenderer, { data: h }), p[1] = h, p[2] = C);
+	let w = C, T;
+	p[3] === m ? T = p[4] : (T = /* @__PURE__ */ jsx("div", {
+		className: "mb-8 flex flex-wrap gap-2",
+		children: Object.entries(m).map((s) => {
+			let [l, u] = s;
+			return /* @__PURE__ */ jsx(Badge, {
+				variant: "outline",
+				className: "hover:bg-accent hover:text-accent-foreground cursor-pointer rounded-full px-3 py-1 transition-colors",
+				onClick: () => S(u, l),
+				children: l
+			}, l);
+		})
+	}), p[3] = m, p[4] = T);
+	let E;
+	p[5] !== w || p[6] !== y || p[7] !== h || p[8] !== _ ? (E = h && /* @__PURE__ */ jsx(Dialog, {
+		open: y,
+		onOpenChange: b,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-3/4 max-w-2xl overflow-auto",
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(DialogTitle, {
+				className: "flex items-center gap-2",
+				children: [_, /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground text-xs font-normal",
+					children: "Metadata"
+				})]
+			}) }), /* @__PURE__ */ jsx("div", {
+				className: "mt-4",
+				children: w(_)
+			})]
+		})
+	}), p[5] = w, p[6] = y, p[7] = h, p[8] = _, p[9] = E) : E = p[9];
+	let D;
+	return p[10] !== T || p[11] !== E ? (D = /* @__PURE__ */ jsxs("div", {
+		className: "px-6",
+		children: [T, E]
+	}), p[10] = T, p[11] = E, p[12] = D) : D = p[12], D;
+};
+export { DocumentMetadataPills_default as default };

package/dist/features/workbench/components/DocumentRenderer.js

@@ -0,0 +1,54 @@
+import CompletionMessagePaper_default from "../../../components/messages/CompletionMessagePaper.js";
+import OAuthPromptRenderer_default from "../../oauth/OAuthPromptRenderer.js";
+import "../../oauth/index.js";
+import AiMessage_default from "./document-renderer/AiMessage.js";
+import LinkMessageRenderer_default from "./document-renderer/LinkMessageRenderer.js";
+import DocumentDebugRenderer_default from "./document-renderer/DocumentDebugRenderer.js";
+import DocumentFormRenderer_default from "./document-renderer/DocumentFormRenderer.js";
+import DocumentMessageRenderer_default from "./document-renderer/DocumentMessageRenderer.js";
+import ErrorMessageRenderer_default from "./document-renderer/ErrorMessageRenderer.js";
+import MarkdownMessageRenderer_default from "./document-renderer/MarkdownMessageRenderer.js";
+import PlainMessageRenderer_default from "./document-renderer/PlainMessageRenderer.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+var DocumentRenderer_default = (m) => {
+	let h = c(8), { pipeline: g, workflow: _, document: v, isActive: y, isLastItem: b } = m, x = !y, S = v, C = S.ui?.form?.widget ?? "object-form", w;
+	return h[0] !== S || h[1] !== y || h[2] !== b || h[3] !== g || h[4] !== x || h[5] !== C || h[6] !== _ ? (w = /* @__PURE__ */ jsx("div", { children: (() => {
+		switch (C) {
+			case "ai-message": return /* @__PURE__ */ jsx(AiMessage_default, {
+				document: S,
+				isLastItem: b
+			});
+			case "debug": return /* @__PURE__ */ jsx("div", {
+				className: "mb-4 flex",
+				children: /* @__PURE__ */ jsx(DocumentDebugRenderer_default, { document: S })
+			});
+			case "object-form": return /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
+				role: "document",
+				fullWidth: !0,
+				timestamp: new Date(S.createdAt),
+				children: /* @__PURE__ */ jsx(DocumentFormRenderer_default, {
+					pipeline: g,
+					workflow: _,
+					document: S,
+					enabled: y,
+					viewOnly: x
+				})
+			});
+			case "message": return /* @__PURE__ */ jsx(DocumentMessageRenderer_default, { document: S });
+			case "error": return /* @__PURE__ */ jsx(ErrorMessageRenderer_default, { document: S });
+			case "plain": return /* @__PURE__ */ jsx(PlainMessageRenderer_default, { document: S });
+			case "markdown": return /* @__PURE__ */ jsx(MarkdownMessageRenderer_default, { document: S });
+			case "link": return /* @__PURE__ */ jsx(LinkMessageRenderer_default, { document: S });
+			case "oauth-prompt": return /* @__PURE__ */ jsx(OAuthPromptRenderer_default, {
+				pipeline: g,
+				workflow: _,
+				document: S,
+				isActive: y
+			});
+			default: return /* @__PURE__ */ jsx(Fragment$1, { children: "unknown document type" });
+		}
+	})() }), h[0] = S, h[1] = y, h[2] = b, h[3] = g, h[4] = x, h[5] = C, h[6] = _, h[7] = w) : w = h[7], w;
+};
+export { DocumentRenderer_default as default };