@loopstack/loopstack-studio 0.21.3 → 0.23.0

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

@@ -0,0 +1,329 @@
+import { usePipelineConfig, useWorkspaceConfig } from "../../../hooks/useConfig.js";
+import { useCreatePipeline } from "../../../hooks/usePipelines.js";
+import { useFilterWorkspaces } from "../../../hooks/useWorkspaces.js";
+import { useComponentOverrides } from "../../../providers/ComponentOverridesProvider.js";
+import { Button } from "../../../components/ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { Dialog, DialogContent, DialogTitle } from "../../../components/ui/dialog.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
+import ErrorSnackbar_default from "../../../components/feedback/ErrorSnackbar.js";
+import CreateWorkspace_default from "../../workspaces/components/CreateWorkspace.js";
+import Form_default from "../../../components/dynamic-form/Form.js";
+import { useRunPipeline } from "../../../hooks/useProcessor.js";
+import "../../workspaces/index.js";
+import { c } from "react/compiler-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Check, CheckIcon, ChevronDown, Loader2, Plus } from "lucide-react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { useForm } from "react-hook-form";
+function NewRunDialog(e) {
+	let t = c(8), { open: n, onOpenChange: r, onSuccess: i } = e, a;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ jsx(DialogTitle, { children: "New Run" }), t[0] = a) : a = t[0];
+	let o;
+	t[1] !== i || t[2] !== n ? (o = /* @__PURE__ */ jsxs(DialogContent, {
+		className: "max-h-[80vh] min-h-[300px] !max-w-2xl",
+		children: [a, /* @__PURE__ */ jsx(NewRunDialogContent, {
+			open: n,
+			onSuccess: i
+		})]
+	}), t[1] = i, t[2] = n, t[3] = o) : o = t[3];
+	let s;
+	return t[4] !== r || t[5] !== n || t[6] !== o ? (s = /* @__PURE__ */ jsx(Dialog, {
+		open: n,
+		onOpenChange: r,
+		children: o
+	}), t[4] = r, t[5] = n, t[6] = o, t[7] = s) : s = t[7], s;
+}
+function NewRunDialogContent(o) {
+	let s = c(115), { open: l, onSuccess: u } = o, [d, f] = useState("workspace"), [p, g] = useState(!1), [v, me] = useState(""), [y, he] = useState(""), { CreateWorkspace: x } = useComponentOverrides(), _e = x ?? CreateWorkspace_default, ve = useWorkspaceConfig(), ye;
+	s[0] === Symbol.for("react.memo_cache_sentinel") ? (ye = {}, s[0] = ye) : ye = s[0];
+	let S = useFilterWorkspaces(void 0, ye, "title", "ASC", 0, 100), be;
+	s[1] === S.data?.data ? be = s[2] : (be = S.data?.data ?? [], s[1] = S.data?.data, s[2] = be);
+	let C = be, xe;
+	if (s[3] !== v || s[4] !== C) {
+		let e;
+		s[6] === v ? e = s[7] : (e = (e) => e.id === v, s[6] = v, s[7] = e), xe = C.find(e), s[3] = v, s[4] = C, s[5] = xe;
+	} else xe = s[5];
+	let Se = xe, w = usePipelineConfig(Se?.blockName), Ce;
+	s[8] === w.data ? Ce = s[9] : (Ce = w.data ?? [], s[8] = w.data, s[9] = Ce);
+	let T = Ce, E = useCreatePipeline(), D = useRunPipeline(), O = E.isPending || D.isPending, k;
+	s[10] === Symbol.for("react.memo_cache_sentinel") ? (k = {
+		defaultValues: {},
+		mode: "onChange"
+	}, s[10] = k) : k = s[10];
+	let A = useForm(k), we;
+	bb0: {
+		if (!y || !T.length) {
+			we = void 0;
+			break bb0;
+		}
+		let e;
+		if (s[11] !== T || s[12] !== y) {
+			let t;
+			s[14] === y ? t = s[15] : (t = (e) => e.blockName === y, s[14] = y, s[15] = t), e = T.find(t), s[11] = T, s[12] = y, s[13] = e;
+		} else e = s[13];
+		we = e;
+	}
+	let j = we, M = !!j?.schema, N;
+	s[16] !== v || s[17] !== C[0] || s[18] !== C.length ? (N = () => {
+		!v && C.length > 0 && me(C[0].id);
+	}, s[16] = v, s[17] = C[0], s[18] = C.length, s[19] = N) : N = s[19];
+	let P;
+	s[20] !== v || s[21] !== C ? (P = [C, v], s[20] = v, s[21] = C, s[22] = P) : P = s[22], useEffect(N, P);
+	let F, Te;
+	s[23] !== T || s[24] !== y ? (Te = () => {
+		T.length > 0 && !T.find((e) => e.blockName === y) && he(T[0].blockName);
+	}, F = [T, y], s[23] = T, s[24] = y, s[25] = F, s[26] = Te) : (F = s[25], Te = s[26]), useEffect(Te, F);
+	let Ee;
+	s[27] !== E || s[28] !== A || s[29] !== l || s[30] !== D ? (Ee = () => {
+		l || (f("workspace"), g(!1), me(""), he(""), A.reset({}), E.reset(), D.reset());
+	}, s[27] = E, s[28] = A, s[29] = l, s[30] = D, s[31] = Ee) : Ee = s[31];
+	let De;
+	s[32] === l ? De = s[33] : (De = [l], s[32] = l, s[33] = De), useEffect(Ee, De);
+	let Oe;
+	s[34] === Symbol.for("react.memo_cache_sentinel") ? (Oe = (e) => {
+		me(e), f("automation");
+	}, s[34] = Oe) : Oe = s[34];
+	let ke = Oe, Ae;
+	s[35] === A ? Ae = s[36] : (Ae = (e) => {
+		he(e), A.reset({});
+	}, s[35] = A, s[36] = Ae);
+	let je = Ae, Me, I;
+	s[37] !== M || s[38] !== y || s[39] !== j ? (Me = () => {
+		y && j && M && f("config");
+	}, I = [
+		j,
+		y,
+		M
+	], s[37] = M, s[38] = y, s[39] = j, s[40] = Me, s[41] = I) : (Me = s[40], I = s[41]), useEffect(Me, I);
+	let Ne;
+	s[42] !== E || s[43] !== u || s[44] !== D || s[45] !== y || s[46] !== v ? (Ne = (e, t) => {
+		!v || !y || E.mutate({ pipelineCreateDto: {
+			blockName: y,
+			title: null,
+			workspaceId: v,
+			transition: e ?? null,
+			args: t ?? {}
+		} }, { onSuccess: (e) => {
+			D.mutate({
+				pipelineId: e.id,
+				runPipelinePayloadDto: {},
+				force: !0
+			}, { onSuccess: () => u(e.id) });
+		} });
+	}, s[42] = E, s[43] = u, s[44] = D, s[45] = y, s[46] = v, s[47] = Ne) : Ne = s[47];
+	let Pe = Ne, Fe;
+	s[48] !== Pe || s[49] !== A || s[50] !== M ? (Fe = () => {
+		M ? A.handleSubmit((e) => Pe("", e))() : Pe();
+	}, s[48] = Pe, s[49] = A, s[50] = M, s[51] = Fe) : Fe = s[51];
+	let Ie = Fe, Le = !!v && !!y, Re;
+	s[52] === Symbol.for("react.memo_cache_sentinel") ? (Re = (e) => {
+		f((t) => t === e ? null : e);
+	}, s[52] = Re) : Re = s[52];
+	let ze = Re, Be = !!v, L = !!y, R = Be, Ve = L && M, z;
+	s[53] === E.error ? z = s[54] : (z = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: E.error }), s[53] = E.error, s[54] = z);
+	let B;
+	s[55] === D.error ? B = s[56] : (B = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: D.error }), s[55] = D.error, s[56] = B);
+	let He = Se?.title, Ue = d === "workspace", We = Be && d !== "workspace", Ge;
+	s[57] === Symbol.for("react.memo_cache_sentinel") ? (Ge = () => ze("workspace"), s[57] = Ge) : Ge = s[57];
+	let V;
+	s[58] !== _e || s[59] !== ve || s[60] !== v || s[61] !== p || s[62] !== C ? (V = p ? /* @__PURE__ */ jsx("div", {
+		className: "pt-2",
+		children: /* @__PURE__ */ jsx(_e, {
+			types: ve.data ?? [],
+			onSuccess: () => {
+				g(!1);
+			}
+		})
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "flex gap-2 pt-2",
+		children: [/* @__PURE__ */ jsxs(Select, {
+			value: v,
+			onValueChange: ke,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				id: "workspace",
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a workspace..." })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: C.map(_temp) })]
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			onClick: () => g(!0),
+			className: "px-3",
+			title: "Create new workspace",
+			children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+		})]
+	}), s[58] = _e, s[59] = ve, s[60] = v, s[61] = p, s[62] = C, s[63] = V) : V = s[63];
+	let H;
+	s[64] !== S.isLoading || s[65] !== He || s[66] !== Ue || s[67] !== We || s[68] !== V ? (H = /* @__PURE__ */ jsx(StepSection, {
+		step: 1,
+		title: "Select Workspace",
+		summary: He,
+		isActive: Ue,
+		isComplete: We,
+		isEnabled: !0,
+		isLoading: S.isLoading,
+		onToggle: Ge,
+		children: V
+	}), s[64] = S.isLoading, s[65] = He, s[66] = Ue, s[67] = We, s[68] = V, s[69] = H) : H = s[69];
+	let U;
+	s[70] !== L || s[71] !== T || s[72] !== y ? (U = L ? T.find((e) => e.blockName === y)?.title ?? y : void 0, s[70] = L, s[71] = T, s[72] = y, s[73] = U) : U = s[73];
+	let Ke = d === "automation", qe = L && d !== "automation", Je = w.isLoading, W;
+	s[74] === R ? W = s[75] : (W = () => R && ze("automation"), s[74] = R, s[75] = W);
+	let Ye;
+	s[76] === Symbol.for("react.memo_cache_sentinel") ? (Ye = /* @__PURE__ */ jsx(SelectTrigger, {
+		id: "automation",
+		className: "w-full",
+		children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select a workflow..." })
+	}), s[76] = Ye) : Ye = s[76];
+	let G;
+	s[77] === T ? G = s[78] : (G = T.map(_temp2), s[77] = T, s[78] = G);
+	let K;
+	s[79] === G ? K = s[80] : (K = /* @__PURE__ */ jsx(SelectContent, { children: G }), s[79] = G, s[80] = K);
+	let q;
+	s[81] !== je || s[82] !== O || s[83] !== y || s[84] !== K ? (q = /* @__PURE__ */ jsx("div", {
+		className: "pt-2",
+		children: /* @__PURE__ */ jsxs(Select, {
+			value: y,
+			onValueChange: je,
+			disabled: O,
+			children: [Ye, K]
+		})
+	}), s[81] = je, s[82] = O, s[83] = y, s[84] = K, s[85] = q) : q = s[85];
+	let J;
+	s[86] !== R || s[87] !== w.isLoading || s[88] !== U || s[89] !== Ke || s[90] !== qe || s[91] !== W || s[92] !== q ? (J = /* @__PURE__ */ jsx(StepSection, {
+		step: 2,
+		title: "Select Workflow",
+		summary: U,
+		isActive: Ke,
+		isComplete: qe,
+		isEnabled: R,
+		isLoading: Je,
+		onToggle: W,
+		children: q
+	}), s[86] = R, s[87] = w.isLoading, s[88] = U, s[89] = Ke, s[90] = qe, s[91] = W, s[92] = q, s[93] = J) : J = s[93];
+	let Y;
+	s[94] !== d || s[95] !== Ve || s[96] !== A || s[97] !== M || s[98] !== j ? (Y = M && /* @__PURE__ */ jsx(StepSection, {
+		step: 3,
+		title: "Configuration",
+		isActive: d === "config",
+		isComplete: !1,
+		isEnabled: Ve,
+		onToggle: () => Ve && ze("config"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "max-h-72 overflow-y-auto pt-2",
+			children: j?.schema && /* @__PURE__ */ jsx(Form_default, {
+				form: A,
+				schema: j.schema,
+				ui: j.ui,
+				disabled: !1,
+				viewOnly: !1
+			})
+		})
+	}), s[94] = d, s[95] = Ve, s[96] = A, s[97] = M, s[98] = j, s[99] = Y) : Y = s[99];
+	let X;
+	s[100] !== H || s[101] !== J || s[102] !== Y ? (X = /* @__PURE__ */ jsxs("div", {
+		className: "space-y-2",
+		children: [
+			H,
+			J,
+			Y
+		]
+	}), s[100] = H, s[101] = J, s[102] = Y, s[103] = X) : X = s[103];
+	let Xe = !Le || O, Z;
+	s[104] === O ? Z = s[105] : (Z = O && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), s[104] = O, s[105] = Z);
+	let Q;
+	s[106] !== Ie || s[107] !== Xe || s[108] !== Z ? (Q = /* @__PURE__ */ jsx("div", {
+		className: "mt-4 flex justify-end border-t pt-4",
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "default",
+			disabled: Xe,
+			onClick: Ie,
+			size: "lg",
+			className: "font-medium",
+			children: [Z, "Run Now"]
+		})
+	}), s[106] = Ie, s[107] = Xe, s[108] = Z, s[109] = Q) : Q = s[109];
+	let $;
+	return s[110] !== z || s[111] !== B || s[112] !== X || s[113] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 overflow-y-auto",
+		children: [
+			z,
+			B,
+			X,
+			Q
+		]
+	}), s[110] = z, s[111] = B, s[112] = X, s[113] = Q, s[114] = $) : $ = s[114], $;
+}
+function _temp2(e) {
+	return /* @__PURE__ */ jsxs(SelectPrimitive.Item, {
+		value: e.blockName,
+		className: "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-pointer flex-col gap-0.5 rounded-sm py-2 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "absolute right-2 top-2.5 flex size-3.5 items-center justify-center",
+				children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) })
+			}),
+			/* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children: e.title ?? e.blockName }),
+			e.description && /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs leading-snug",
+				children: e.description
+			})
+		]
+	}, e.blockName);
+}
+function _temp(e) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: e.id,
+		children: e.title
+	}, e.id);
+}
+function StepSection(e) {
+	let t = c(35), { step: n, title: r, summary: i, isActive: a, isComplete: u, isEnabled: d, isLoading: f, onToggle: se, children: ce } = e, p;
+	t[0] === se ? p = t[1] : (p = () => se(), t[0] = se, t[1] = p);
+	let le = `flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors ${d ? "hover:bg-muted/50 cursor-pointer" : "cursor-not-allowed opacity-50"}`, ue = !d, de = `flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full text-xs font-semibold ${u ? "bg-primary text-primary-foreground" : a ? "border-primary text-primary border-2" : "border-border text-muted-foreground border"}`, m;
+	t[2] !== u || t[3] !== n ? (m = u ? /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }) : n, t[2] = u, t[3] = n, t[4] = m) : m = t[4];
+	let h;
+	t[5] !== de || t[6] !== m ? (h = /* @__PURE__ */ jsx("div", {
+		className: de,
+		children: m
+	}), t[5] = de, t[6] = m, t[7] = h) : h = t[7];
+	let fe = `flex-1 text-sm font-medium ${d ? "text-foreground" : "text-muted-foreground"}`, g;
+	t[8] !== fe || t[9] !== r ? (g = /* @__PURE__ */ jsx("span", {
+		className: fe,
+		children: r
+	}), t[8] = fe, t[9] = r, t[10] = g) : g = t[10];
+	let _;
+	t[11] !== a || t[12] !== u || t[13] !== i ? (_ = !a && u && i && /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground mr-1 max-w-48 truncate text-sm",
+		children: i
+	}), t[11] = a, t[12] = u, t[13] = i, t[14] = _) : _ = t[14];
+	let v;
+	t[15] !== a || t[16] !== f ? (v = f && a && /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" }), t[15] = a, t[16] = f, t[17] = v) : v = t[17];
+	let pe = `text-muted-foreground h-4 w-4 transition-transform ${a ? "rotate-180" : ""}`, y;
+	t[18] === pe ? y = t[19] : (y = /* @__PURE__ */ jsx(ChevronDown, { className: pe }), t[18] = pe, t[19] = y);
+	let b;
+	t[20] !== v || t[21] !== y || t[22] !== le || t[23] !== ue || t[24] !== h || t[25] !== g || t[26] !== _ ? (b = /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: le,
+		disabled: ue,
+		children: [
+			h,
+			g,
+			_,
+			v,
+			y
+		]
+	}), t[20] = v, t[21] = y, t[22] = le, t[23] = ue, t[24] = h, t[25] = g, t[26] = _, t[27] = b) : b = t[27];
+	let x;
+	t[28] === ce ? x = t[29] : (x = /* @__PURE__ */ jsx(CollapsibleContent, {
+		className: "px-3 pb-3 pl-13",
+		children: ce
+	}), t[28] = ce, t[29] = x);
+	let ge;
+	return t[30] !== a || t[31] !== p || t[32] !== b || t[33] !== x ? (ge = /* @__PURE__ */ jsxs(Collapsible, {
+		open: a,
+		onOpenChange: p,
+		children: [b, x]
+	}), t[30] = a, t[31] = p, t[32] = b, t[33] = x, t[34] = ge) : ge = t[34], ge;
+}
+export { NewRunDialog };

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

@@ -0,0 +1,88 @@
+import { cn } from "../../../lib/utils.js";
+import { SidebarMenu, SidebarProvider } from "../../../components/ui/sidebar.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { useNamespaceTree } from "../../../hooks/useNamespaceTree.js";
+import WorkbenchNavigation_default from "../WorkbenchNavigation.js";
+import PipelineHistoryList_default from "./PipelineHistoryList.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+var PANEL_TITLES = {
+	navigation: "Navigate",
+	history: "Run Log"
+};
+function NavigationContent() {
+	let e = c(3), { pipeline: f } = useWorkbenchLayout(), p;
+	e[0] === Symbol.for("react.memo_cache_sentinel") ? (p = { "--sidebar-width": "100%" }, e[0] = p) : p = e[0];
+	let m;
+	return e[1] === f.id ? m = e[2] : (m = /* @__PURE__ */ jsx(SidebarProvider, {
+		defaultOpen: !0,
+		className: "min-h-0",
+		style: p,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "w-full overflow-auto p-2",
+			children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(NavigationContentInner, { pipelineId: f.id }) })
+		})
+	}), e[1] = f.id, e[2] = m), m;
+}
+function NavigationContentInner(e) {
+	let l = c(3), { pipelineId: u } = e, d = useNamespaceTree(u);
+	if (!d || d.length === 0) {
+		let e;
+		return l[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground py-4 text-center text-sm",
+			children: "No navigation items"
+		}), l[0] = e) : e = l[0], e;
+	}
+	let m;
+	return l[1] === d ? m = l[2] : (m = /* @__PURE__ */ jsx(WorkbenchNavigation_default, {
+		namespaceTree: d,
+		indent: 0
+	}), l[1] = d, l[2] = m), m;
+}
+function HistoryContent() {
+	let e = c(2), { pipeline: l } = useWorkbenchLayout(), u;
+	return e[0] === l ? u = e[1] : (u = /* @__PURE__ */ jsx("div", {
+		className: "overflow-auto p-2",
+		children: /* @__PURE__ */ jsx(PipelineHistoryList_default, { pipeline: l })
+	}), e[0] = l, e[1] = u), u;
+}
+function WorkbenchFloatingPanel() {
+	let l = c(19), { activeFloatingPanel: u, closeFloatingPanel: f } = useWorkbenchLayout();
+	if (!u) return null;
+	let p;
+	l[0] === Symbol.for("react.memo_cache_sentinel") ? (p = cn("border-l bg-background absolute right-0 top-0 bottom-0 z-20 flex w-80 flex-col shadow-lg", "animate-in slide-in-from-right duration-200"), l[0] = p) : p = l[0];
+	let m = PANEL_TITLES[u], h;
+	l[1] === m ? h = l[2] : (h = /* @__PURE__ */ jsx("span", {
+		className: "text-sm font-medium",
+		children: m
+	}), l[1] = m, l[2] = h);
+	let g;
+	l[3] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), l[3] = g) : g = l[3];
+	let _;
+	l[4] === f ? _ = l[5] : (_ = /* @__PURE__ */ jsx("button", {
+		onClick: f,
+		className: "text-muted-foreground hover:text-foreground flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+		children: g
+	}), l[4] = f, l[5] = _);
+	let v;
+	l[6] !== h || l[7] !== _ ? (v = /* @__PURE__ */ jsxs("div", {
+		className: "border-b flex h-12 shrink-0 items-center justify-between px-3",
+		children: [h, _]
+	}), l[6] = h, l[7] = _, l[8] = v) : v = l[8];
+	let y;
+	l[9] === u ? y = l[10] : (y = u === "navigation" && /* @__PURE__ */ jsx(NavigationContent, {}), l[9] = u, l[10] = y);
+	let b;
+	l[11] === u ? b = l[12] : (b = u === "history" && /* @__PURE__ */ jsx(HistoryContent, {}), l[11] = u, l[12] = b);
+	let x;
+	l[13] !== y || l[14] !== b ? (x = /* @__PURE__ */ jsxs("div", {
+		className: "flex-1 overflow-hidden",
+		children: [y, b]
+	}), l[13] = y, l[14] = b, l[15] = x) : x = l[15];
+	let S;
+	return l[16] !== v || l[17] !== x ? (S = /* @__PURE__ */ jsxs("div", {
+		className: p,
+		children: [v, x]
+	}), l[16] = v, l[17] = x, l[18] = S) : S = l[18], S;
+}
+export { WorkbenchFloatingPanel };

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

@@ -0,0 +1,49 @@
+import { usePipeline, usePipelineConfigByName } from "../../../hooks/usePipelines.js";
+import { useWorkspace } from "../../../hooks/useWorkspaces.js";
+import { ReactFlowProvider } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
+import { useFetchWorkflowsByPipeline } from "../../../hooks/useWorkflows.js";
+import PipelineFlowViewer_default from "../../debug/components/PipelineFlowViewer.js";
+import "../../debug/index.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+function WorkbenchFlowPanel() {
+	let f = c(13), { pipeline: p, closeSidePanel: m } = useWorkbenchLayout(), h = usePipeline(p.id), g = useWorkspace(p.workspaceId), _ = useFetchWorkflowsByPipeline(p.id), v = usePipelineConfigByName(g.data?.blockName, h.data?.blockName), y;
+	f[0] === _.data ? y = f[1] : (y = _.data ?? [], f[0] = _.data, f[1] = y);
+	let b = y, x;
+	f[2] === Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ jsx("span", {
+		className: "text-sm font-medium",
+		children: "Graph"
+	}), f[2] = x) : x = f[2];
+	let S;
+	f[3] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), f[3] = S) : S = f[3];
+	let C;
+	f[4] === m ? C = f[5] : (C = /* @__PURE__ */ jsxs("div", {
+		className: "border-b flex h-12 shrink-0 items-center justify-between px-3",
+		children: [x, /* @__PURE__ */ jsx("button", {
+			onClick: m,
+			className: "text-muted-foreground hover:text-foreground flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+			children: S
+		})]
+	}), f[4] = m, f[5] = C);
+	let w;
+	f[6] !== v || f[7] !== p.id || f[8] !== b ? (w = /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-hidden",
+		children: b.length > 0 ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(PipelineFlowViewer_default, {
+			pipelineId: p.id,
+			workflows: b,
+			pipelineConfig: v.data
+		}) }) : /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex h-full items-center justify-center text-sm",
+			children: "No workflows found"
+		})
+	}), f[6] = v, f[7] = p.id, f[8] = b, f[9] = w) : w = f[9];
+	let T;
+	return f[10] !== C || f[11] !== w ? (T = /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-background flex w-1/2 shrink-0 flex-col",
+		children: [C, w]
+	}), f[10] = C, f[11] = w, f[12] = T) : T = f[12], T;
+}
+export { WorkbenchFlowPanel };

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

@@ -0,0 +1,68 @@
+import { cn } from "../../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ListOrdered, MonitorPlay, Navigation, Workflow } from "lucide-react";
+function IconButton(s) {
+	let l = c(11), { icon: u, label: d, active: f, onClick: p } = s, m = f ? "bg-foreground text-background" : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground", h;
+	l[0] === m ? h = l[1] : (h = cn("flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:cursor-pointer", m), l[0] = m, l[1] = h);
+	let g;
+	l[2] !== u || l[3] !== p || l[4] !== h ? (g = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx("button", {
+			onClick: p,
+			className: h,
+			children: u
+		})
+	}), l[2] = u, l[3] = p, l[4] = h, l[5] = g) : g = l[5];
+	let _;
+	l[6] === d ? _ = l[7] : (_ = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "left",
+		children: d
+	}), l[6] = d, l[7] = _);
+	let v;
+	return l[8] !== g || l[9] !== _ ? (v = /* @__PURE__ */ jsxs(Tooltip, { children: [g, _] }), l[8] = g, l[9] = _, l[10] = v) : v = l[10], v;
+}
+function WorkbenchIconSidebar() {
+	let e = c(20), { previewPanelEnabled: i, isDeveloperMode: a, activeFloatingPanel: o, toggleFloatingPanel: h, activeSidePanel: g, toggleSidePanel: _ } = useWorkbenchLayout(), v;
+	e[0] !== g || e[1] !== i || e[2] !== _ ? (v = i && /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(MonitorPlay, { className: "h-5 w-5" }),
+		label: "Preview",
+		active: g === "preview",
+		onClick: () => _("preview")
+	}), e[0] = g, e[1] = i, e[2] = _, e[3] = v) : v = e[3];
+	let y;
+	e[4] !== o || e[5] !== g || e[6] !== a || e[7] !== h || e[8] !== _ ? (y = a && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(Workflow, { className: "h-5 w-5" }),
+		label: "Graph",
+		active: g === "flow",
+		onClick: () => _("flow")
+	}), /* @__PURE__ */ jsx(IconButton, {
+		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-5 w-5" }),
+		label: "Run Log",
+		active: o === "history",
+		onClick: () => h("history")
+	})] }), e[4] = o, e[5] = g, e[6] = a, e[7] = h, e[8] = _, e[9] = y) : y = e[9];
+	let b;
+	e[10] === Symbol.for("react.memo_cache_sentinel") ? (b = /* @__PURE__ */ jsx(Navigation, { className: "h-5 w-5" }), e[10] = b) : b = e[10];
+	let x = o === "navigation", S;
+	e[11] === h ? S = e[12] : (S = () => h("navigation"), e[11] = h, e[12] = S);
+	let C;
+	e[13] !== x || e[14] !== S ? (C = /* @__PURE__ */ jsx(IconButton, {
+		icon: b,
+		label: "Navigate",
+		active: x,
+		onClick: S
+	}), e[13] = x, e[14] = S, e[15] = C) : C = e[15];
+	let w;
+	return e[16] !== v || e[17] !== y || e[18] !== C ? (w = /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-background flex w-12 shrink-0 flex-col items-center gap-1 py-2",
+		children: [
+			v,
+			y,
+			C
+		]
+	}), e[16] = v, e[17] = y, e[18] = C, e[19] = w) : w = e[19], w;
+}
+export { WorkbenchIconSidebar };

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

@@ -0,0 +1,128 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ExternalLink, Loader2, X } from "lucide-react";
+var EMBED_NEW_RUN_MESSAGE_TYPE = "loopstack:embed:new-run";
+function WorkbenchPreviewPanel() {
+	let { getEnvironmentPreviewUrl: y, environments: b, closeSidePanel: x, selectedSlotId: S, setSelectedSlotId: C } = useWorkbenchLayout(), w = useRef(null), T = useMemo(() => (b ?? []).filter((e) => !!e.connectionUrl && (!!e.workerId || e.local)), [b]), [E, D] = useState(null);
+	useEffect(() => {
+		!S && T.length > 0 && C(T[0].slotId);
+	}, [
+		T,
+		S,
+		C
+	]);
+	let O = useMemo(() => T.find((e) => e.slotId === S), [T, S]), k = useMemo(() => {
+		if (!(!y || !O)) return y(O, E ?? void 0);
+	}, [
+		y,
+		O,
+		E
+	]);
+	return useEffect(() => {
+		let e = (e) => {
+			if (e.origin !== window.location.origin) return;
+			let _ = e.data;
+			if (_?.type !== EMBED_NEW_RUN_MESSAGE_TYPE) return;
+			let v = _?.pipelineId;
+			typeof v == "string" && D(v);
+		};
+		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
+	}, []), b === void 0 ? /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-12 shrink-0 items-center justify-between px-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-white",
+				children: "Preview"
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: x,
+				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-1 items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-zinc-400" })
+		})]
+	}) : !y || T.length === 0 ? /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-12 shrink-0 items-center justify-between px-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-sm font-medium text-white",
+				children: "Preview"
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: x,
+				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
+			children: "Preview not available"
+		})]
+	}) : /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-12 shrink-0 items-center justify-between px-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "text-sm font-medium text-white",
+						children: "Preview"
+					}),
+					T.length > 1 && /* @__PURE__ */ jsxs(Select, {
+						value: S,
+						onValueChange: (e) => {
+							C(e), D(null);
+						},
+						children: [/* @__PURE__ */ jsx(SelectTrigger, {
+							className: "h-7 w-40 border-zinc-700 bg-zinc-900 text-zinc-200 text-xs",
+							children: /* @__PURE__ */ jsx(SelectValue, {})
+						}), /* @__PURE__ */ jsx(SelectContent, { children: T.map((e) => /* @__PURE__ */ jsx(SelectItem, {
+							value: e.slotId,
+							children: e.envName || e.slotId
+						}, e.slotId)) })]
+					}),
+					T.length === 1 && O && /* @__PURE__ */ jsx("span", {
+						className: "text-xs text-zinc-400",
+						children: O.envName || O.slotId
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [k && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+					asChild: !0,
+					children: /* @__PURE__ */ jsx("a", {
+						href: k,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+						children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+					})
+				}), /* @__PURE__ */ jsx(TooltipContent, {
+					side: "bottom",
+					children: "Open in new tab"
+				})] }), /* @__PURE__ */ jsx("button", {
+					onClick: x,
+					className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
+					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+				})]
+			})]
+		}), k ? /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-hidden p-3 pt-0",
+			children: /* @__PURE__ */ jsx("iframe", {
+				ref: w,
+				src: k,
+				className: "bg-background h-full w-full rounded-lg",
+				title: "Pipeline preview"
+			})
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
+			children: "Preview not available"
+		})]
+	});
+}
+export { WorkbenchPreviewPanel };