@loopstack/loopstack-studio 0.22.0 → 0.23.0

package/dist/pages/PreviewWorkbenchPage.js

@@ -1,20 +1,23 @@
-import { useFilterPipelines, usePipeline, usePipelineConfig } from "../hooks/usePipelines.js";
+import { useStudio } from "../providers/StudioProvider.js";
+import { useFilterPipelines, usePipeline, usePipelineConfigByName } from "../hooks/usePipelines.js";
 import { useWorkspace } from "../hooks/useWorkspaces.js";
-import { useFetchWorkflowsByPipeline } from "../hooks/useWorkflows.js";
 import { Button } from "../components/ui/button.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../components/ui/collapsible.js";
 import { SidebarMenu, SidebarProvider } from "../components/ui/sidebar.js";
-import ErrorSnackbar_default from "../components/snackbars/ErrorSnackbar.js";
-import LoadingCentered_default from "../components/LoadingCentered.js";
+import LoadingCentered_default from "../components/feedback/LoadingCentered.js";
+import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
 import { require_enums } from "../packages/contracts/dist/enums/index.js";
 import { ReactFlowProvider } from "../node_modules/@xyflow/react/dist/esm/index.js";
+import { useFetchWorkflowsByPipeline } from "../hooks/useWorkflows.js";
+import PipelineFlowViewer_default from "../features/debug/components/PipelineFlowViewer.js";
+import "../features/debug/index.js";
 import WorkflowItem_default from "../features/workbench/WorkflowItem.js";
 import WorkflowButtons_default from "../features/workbench/components/buttons/WorkflowButtons.js";
 import { useNamespaceTree } from "../hooks/useNamespaceTree.js";
 import WorkbenchNavigation_default from "../features/workbench/WorkbenchNavigation.js";
 import PipelineHistoryList_default from "../features/workbench/components/PipelineHistoryList.js";
-import PipelineFlowViewer_default from "../features/debug/components/PipelineFlowViewer.js";
 import { NewRunDialog } from "../features/workbench/components/NewRunDialog.js";
+import "../features/workbench/index.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -46,113 +49,113 @@ function PreviewWorkbenchPage() {
 	}), e[3] = t, e[4] = o), o;
 }
 function PreviewWorkbenchContent(e) {
-	let o = c(57), { pipelineId: s, onNewRunSuccess: l } = e, u = useRef(null), [d, m] = useState("output"), [_, v] = useState(!1), y = usePipeline(s), S = useFetchWorkflowsByPipeline(s), w;
-	o[0] === S.data ? w = o[1] : (w = S.data ?? [], o[0] = S.data, o[1] = w);
-	let T = w, E = useRef(!1), ge = y.data?.workspaceId, D = useWorkspace(ge).data?.blockName, O = y.data?.blockName, k = usePipelineConfig(D, O), A, j;
-	o[2] !== S.data || o[3] !== s ? (A = () => {
-		!S.data || E.current || S.data.length > 0 && S.data.every(_temp) && window.parent !== window && (E.current = !0, window.parent.postMessage({
+	let t = c(57), { pipelineId: o, onNewRunSuccess: s } = e, l = useRef(null), [u, d] = useState("output"), [m, y] = useState(!1), b = usePipeline(o), x = useFetchWorkflowsByPipeline(o), C;
+	t[0] === x.data ? C = t[1] : (C = x.data ?? [], t[0] = x.data, t[1] = C);
+	let T = C, E = useRef(!1), D = b.data?.workspaceId, ge = useWorkspace(D).data?.blockName, _e = b.data?.blockName, O = usePipelineConfigByName(ge, _e), k, A;
+	t[2] !== x.data || t[3] !== o ? (k = () => {
+		!x.data || E.current || x.data.length > 0 && x.data.every(_temp) && window.parent !== window && (E.current = !0, window.parent.postMessage({
 			type: EMBED_MESSAGE_TYPE,
-			pipelineId: s
+			pipelineId: o
 		}, window.location.origin));
-	}, j = [S.data, s], o[2] = S.data, o[3] = s, o[4] = A, o[5] = j) : (A = o[4], j = o[5]), useEffect(A, j);
-	let M, N;
-	o[6] === s ? (M = o[7], N = o[8]) : (M = () => {
-		if (window.parent === window || !u.current) return;
+	}, A = [x.data, o], t[2] = x.data, t[3] = o, t[4] = k, t[5] = A) : (k = t[4], A = t[5]), useEffect(k, A);
+	let j, M;
+	t[6] === o ? (j = t[7], M = t[8]) : (j = () => {
+		if (window.parent === window || !l.current) return;
 		let e = new ResizeObserver(() => {
-			if (!u.current) return;
+			if (!l.current) return;
 			let e = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
 			window.parent.postMessage({
 				type: EMBED_RESIZE_MESSAGE_TYPE,
-				pipelineId: s,
+				pipelineId: o,
 				height: e
 			}, window.location.origin);
 		});
-		return e.observe(u.current), () => e.disconnect();
-	}, N = [s], o[6] = s, o[7] = M, o[8] = N), useEffect(M, N);
-	let P;
-	o[9] === l ? P = o[10] : (P = (e) => {
-		v(!1), l(e);
-	}, o[9] = l, o[10] = P);
-	let F = P, I = _temp2, L;
-	o[11] === Symbol.for("react.memo_cache_sentinel") ? (L = {
+		return e.observe(l.current), () => e.disconnect();
+	}, M = [o], t[6] = o, t[7] = j, t[8] = M), useEffect(j, M);
+	let N;
+	t[9] === s ? N = t[10] : (N = (e) => {
+		y(!1), s(e);
+	}, t[9] = s, t[10] = N);
+	let P = N, F = _temp2, I;
+	t[11] === Symbol.for("react.memo_cache_sentinel") ? (I = {
 		enableDebugMode: !1,
 		showFullMessageHistory: !1
-	}, o[11] = L) : L = o[11];
-	let R = L, z;
-	o[12] === Symbol.for("react.memo_cache_sentinel") ? (z = {
+	}, t[11] = I) : I = t[11];
+	let L = I, R;
+	t[12] === Symbol.for("react.memo_cache_sentinel") ? (R = {
 		value: "output",
 		label: "Output",
 		icon: /* @__PURE__ */ jsx(ScrollText, { className: "h-3.5 w-3.5" })
-	}, o[12] = z) : z = o[12];
-	let B;
-	o[13] === Symbol.for("react.memo_cache_sentinel") ? (B = {
+	}, t[12] = R) : R = t[12];
+	let z;
+	t[13] === Symbol.for("react.memo_cache_sentinel") ? (z = {
 		value: "graph",
 		label: "Graph",
 		icon: /* @__PURE__ */ jsx(Workflow, { className: "h-3.5 w-3.5" })
-	}, o[13] = B) : B = o[13];
-	let V;
-	o[14] === Symbol.for("react.memo_cache_sentinel") ? (V = [
+	}, t[13] = z) : z = t[13];
+	let B;
+	t[14] === Symbol.for("react.memo_cache_sentinel") ? (B = [
+		R,
 		z,
-		B,
 		{
 			value: "run-log",
 			label: "Run Log",
 			icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-3.5 w-3.5" })
 		}
-	], o[14] = V) : V = o[14];
-	let _e = V, H;
-	o[15] === d ? H = o[16] : (H = /* @__PURE__ */ jsx("div", {
+	], t[14] = B) : B = t[14];
+	let V = B, H;
+	t[15] === u ? H = t[16] : (H = /* @__PURE__ */ jsx("div", {
 		className: "bg-background flex items-center rounded-md border p-0.5",
-		children: _e.map((e) => /* @__PURE__ */ jsxs("button", {
-			onClick: () => m(e.value),
-			className: `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors ${d === e.value ? "bg-foreground text-background shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
+		children: V.map((e) => /* @__PURE__ */ jsxs("button", {
+			onClick: () => d(e.value),
+			className: `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors ${u === e.value ? "bg-foreground text-background shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 			children: [e.icon, e.label]
 		}, e.value))
-	}), o[15] = d, o[16] = H);
+	}), t[15] = u, t[16] = H);
 	let U;
-	o[17] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsxs(Button, {
+	t[17] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
 		size: "sm",
 		className: "h-7 gap-1.5",
-		onClick: () => v(!0),
+		onClick: () => y(!0),
 		children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), "New Run"]
-	}), o[17] = U) : U = o[17];
+	}), t[17] = U) : U = t[17];
 	let W;
-	o[18] === H ? W = o[19] : (W = /* @__PURE__ */ jsxs("div", {
+	t[18] === H ? W = t[19] : (W = /* @__PURE__ */ jsxs("div", {
 		className: "bg-muted/50 flex h-11 shrink-0 items-center justify-between border-b px-3",
 		children: [H, U]
-	}), o[18] = H, o[19] = W);
+	}), t[18] = H, t[19] = W);
 	let G;
-	o[20] === y.error ? G = o[21] : (G = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: y.error }), o[20] = y.error, o[21] = G);
+	t[20] === b.error ? G = t[21] : (G = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: b.error }), t[20] = b.error, t[21] = G);
 	let K;
-	o[22] === S.error ? K = o[23] : (K = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: S.error }), o[22] = S.error, o[23] = K);
+	t[22] === x.error ? K = t[23] : (K = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: x.error }), t[22] = x.error, t[23] = K);
 	let q;
-	o[24] !== d || o[25] !== y.data || o[26] !== y.isLoading || o[27] !== S.data || o[28] !== S.isLoading ? (q = d === "output" && /* @__PURE__ */ jsx("div", {
+	t[24] !== u || t[25] !== b.data || t[26] !== b.isLoading || t[27] !== x.data || t[28] !== x.isLoading ? (q = u === "output" && /* @__PURE__ */ jsx("div", {
 		className: "px-4 py-3",
 		children: /* @__PURE__ */ jsx(LoadingCentered_default, {
-			loading: y.isLoading || S.isLoading,
-			children: y.data && S.data ? S.data.map((e) => /* @__PURE__ */ jsx(EmbedWorkflowSection, {
+			loading: b.isLoading || x.isLoading,
+			children: b.data && x.data ? x.data.map((e) => /* @__PURE__ */ jsx(EmbedWorkflowSection, {
 				workflow: e,
-				pipeline: y.data,
-				collapsible: S.data.length > 1,
+				pipeline: b.data,
+				collapsible: x.data.length > 1,
 				children: /* @__PURE__ */ jsx(WorkflowItem_default, {
-					pipeline: y.data,
+					pipeline: b.data,
 					workflowId: e.id,
-					scrollTo: I,
-					settings: R
+					scrollTo: F,
+					settings: L
 				})
 			}, e.id)) : null
 		})
-	}), o[24] = d, o[25] = y.data, o[26] = y.isLoading, o[27] = S.data, o[28] = S.isLoading, o[29] = q) : q = o[29];
+	}), t[24] = u, t[25] = b.data, t[26] = b.isLoading, t[27] = x.data, t[28] = x.isLoading, t[29] = q) : q = t[29];
 	let J;
-	o[30] !== d || o[31] !== y.isLoading || o[32] !== k || o[33] !== S.isLoading || o[34] !== s || o[35] !== T ? (J = d === "graph" && /* @__PURE__ */ jsx("div", {
+	t[30] !== u || t[31] !== b.isLoading || t[32] !== O || t[33] !== x.isLoading || t[34] !== o || t[35] !== T ? (J = u === "graph" && /* @__PURE__ */ jsx("div", {
 		className: "h-full",
 		children: /* @__PURE__ */ jsx(LoadingCentered_default, {
-			loading: y.isLoading || S.isLoading,
+			loading: b.isLoading || x.isLoading,
 			children: T.length > 0 ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(PipelineFlowViewer_default, {
-				pipelineId: s,
+				pipelineId: o,
 				workflows: T,
-				pipelineConfig: k.data
+				pipelineConfig: O.data
 			}) }) : /* @__PURE__ */ jsx("div", {
 				className: "text-muted-foreground flex h-full items-center justify-center",
 				children: /* @__PURE__ */ jsx("p", {
@@ -161,19 +164,19 @@ function PreviewWorkbenchContent(e) {
 				})
 			})
 		})
-	}), o[30] = d, o[31] = y.isLoading, o[32] = k, o[33] = S.isLoading, o[34] = s, o[35] = T, o[36] = J) : J = o[36];
+	}), t[30] = u, t[31] = b.isLoading, t[32] = O, t[33] = x.isLoading, t[34] = o, t[35] = T, t[36] = J) : J = t[36];
 	let Y;
-	o[37] !== d || o[38] !== y.data ? (Y = d === "run-log" && /* @__PURE__ */ jsx("div", {
+	t[37] !== u || t[38] !== b.data ? (Y = u === "run-log" && /* @__PURE__ */ jsx("div", {
 		className: "px-4",
-		children: /* @__PURE__ */ jsx(PipelineHistoryList_default, { pipeline: y.data })
-	}), o[37] = d, o[38] = y.data, o[39] = Y) : Y = o[39];
+		children: /* @__PURE__ */ jsx(PipelineHistoryList_default, { pipeline: b.data })
+	}), t[37] = u, t[38] = b.data, t[39] = Y) : Y = t[39];
 	let X;
-	o[40] !== d || o[41] !== s ? (X = d === "navigate" && /* @__PURE__ */ jsx("div", {
+	t[40] !== u || t[41] !== o ? (X = u === "navigate" && /* @__PURE__ */ jsx("div", {
 		className: "px-4 py-2",
-		children: /* @__PURE__ */ jsx(EmbedNavigationContent, { pipelineId: s })
-	}), o[40] = d, o[41] = s, o[42] = X) : X = o[42];
+		children: /* @__PURE__ */ jsx(EmbedNavigationContent, { pipelineId: o })
+	}), t[40] = u, t[41] = o, t[42] = X) : X = t[42];
 	let Z;
-	o[43] !== G || o[44] !== K || o[45] !== q || o[46] !== J || o[47] !== Y || o[48] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
+	t[43] !== G || t[44] !== K || t[45] !== q || t[46] !== J || t[47] !== Y || t[48] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
 		className: "flex-1 overflow-auto",
 		children: [
 			G,
@@ -183,23 +186,23 @@ function PreviewWorkbenchContent(e) {
 			Y,
 			X
 		]
-	}), o[43] = G, o[44] = K, o[45] = q, o[46] = J, o[47] = Y, o[48] = X, o[49] = Z) : Z = o[49];
+	}), t[43] = G, t[44] = K, t[45] = q, t[46] = J, t[47] = Y, t[48] = X, t[49] = Z) : Z = t[49];
 	let Q;
-	o[50] !== F || o[51] !== _ ? (Q = /* @__PURE__ */ jsx(NewRunDialog, {
-		open: _,
-		onOpenChange: v,
-		onSuccess: F
-	}), o[50] = F, o[51] = _, o[52] = Q) : Q = o[52];
+	t[50] !== P || t[51] !== m ? (Q = /* @__PURE__ */ jsx(NewRunDialog, {
+		open: m,
+		onOpenChange: y,
+		onSuccess: P
+	}), t[50] = P, t[51] = m, t[52] = Q) : Q = t[52];
 	let $;
-	return o[53] !== W || o[54] !== Z || o[55] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
-		ref: u,
+	return t[53] !== W || t[54] !== Z || t[55] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
+		ref: l,
 		className: "flex h-screen flex-col overflow-hidden",
 		children: [
 			W,
 			Z,
 			Q
 		]
-	}), o[53] = W, o[54] = Z, o[55] = Q, o[56] = $) : $ = o[56], $;
+	}), t[53] = W, t[54] = Z, t[55] = Q, t[56] = $) : $ = t[56], $;
 }
 function _temp2() {}
 function _temp(e) {
@@ -213,31 +216,31 @@ var STATUS_DOT_COLORS = {
 	canceled: "bg-orange-500",
 	pending: "bg-muted-foreground"
 };
-function PreviewEmptyState(t) {
-	let n = c(23), { newRunDialogOpen: r, onNewRunDialogOpenChange: i, onNewRunSuccess: o } = t, s = useNavigate(), [l, u] = useState(3), d;
-	n[0] === Symbol.for("react.memo_cache_sentinel") ? (d = { parentId: null }, n[0] = d) : d = n[0];
-	let f = useFilterPipelines(void 0, d, "createdAt", "DESC", 0, l), p;
-	n[1] === f.data?.data ? p = n[2] : (p = f.data?.data ?? [], n[1] = f.data?.data, n[2] = p);
-	let m = p, h = f.data?.total ?? 0, g = m.length < h, _;
-	n[3] === i ? _ = n[4] : (_ = () => i(!0), n[3] = i, n[4] = _);
-	let v;
-	n[5] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }), n[5] = v) : v = n[5];
-	let y;
-	n[6] === _ ? y = n[7] : (y = /* @__PURE__ */ jsx("div", {
+function PreviewEmptyState(n) {
+	let r = c(24), { newRunDialogOpen: i, onNewRunDialogOpenChange: o, onNewRunSuccess: s } = n, l = useNavigate(), { router: u } = useStudio(), [d, f] = useState(3), p;
+	r[0] === Symbol.for("react.memo_cache_sentinel") ? (p = { parentId: null }, r[0] = p) : p = r[0];
+	let m = useFilterPipelines(void 0, p, "createdAt", "DESC", 0, d), h;
+	r[1] === m.data?.data ? h = r[2] : (h = m.data?.data ?? [], r[1] = m.data?.data, r[2] = h);
+	let g = h, _ = m.data?.total ?? 0, v = g.length < _, y;
+	r[3] === o ? y = r[4] : (y = () => o(!0), r[3] = o, r[4] = y);
+	let b;
+	r[5] === Symbol.for("react.memo_cache_sentinel") ? (b = /* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }), r[5] = b) : b = r[5];
+	let x;
+	r[6] === y ? x = r[7] : (x = /* @__PURE__ */ jsx("div", {
 		className: "flex justify-center",
 		children: /* @__PURE__ */ jsxs(Button, {
 			variant: "secondary",
 			size: "sm",
 			className: "gap-1.5",
-			onClick: _,
-			children: [v, "New Run"]
+			onClick: y,
+			children: [b, "New Run"]
 		})
-	}), n[6] = _, n[7] = y);
-	let b;
-	n[8] !== f.isLoading || n[9] !== g || n[10] !== s || n[11] !== m ? (b = f.isLoading && m.length === 0 ? /* @__PURE__ */ jsx("div", {
+	}), r[6] = y, r[7] = x);
+	let S;
+	r[8] !== m.isLoading || r[9] !== v || r[10] !== l || r[11] !== g || r[12] !== u ? (S = m.isLoading && g.length === 0 ? /* @__PURE__ */ jsx("div", {
 		className: "flex justify-center py-4",
 		children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })
-	}) : m.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+	}) : g.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
 		/* @__PURE__ */ jsx("p", {
 			className: "text-muted-foreground mb-2 text-xs font-medium",
 			children: "Recent"
@@ -246,34 +249,34 @@ function PreviewEmptyState(t) {
 			className: "max-h-[280px] overflow-auto",
 			children: /* @__PURE__ */ jsx("div", {
 				className: "divide-border divide-y",
-				children: m.map((e) => /* @__PURE__ */ jsx(RecentRunItem, {
+				children: g.map((e) => /* @__PURE__ */ jsx(RecentRunItem, {
 					pipeline: e,
-					onClick: () => void s(`/embed/preview/pipelines/${e.id}`)
+					onClick: () => void l(u.getPreviewPipeline(e.id))
 				}, e.id))
 			})
 		}),
-		g && /* @__PURE__ */ jsxs("button", {
+		v && /* @__PURE__ */ jsxs("button", {
 			className: "text-muted-foreground hover:text-foreground mt-2 flex w-full items-center justify-center gap-1 py-1 text-xs transition-colors",
-			onClick: () => u(_temp3),
+			onClick: () => f(_temp3),
 			children: [/* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }), "Load more"]
 		})
-	] }) : null, n[8] = f.isLoading, n[9] = g, n[10] = s, n[11] = m, n[12] = b) : b = n[12];
-	let x;
-	n[13] !== y || n[14] !== b ? (x = /* @__PURE__ */ jsxs("div", {
-		className: "w-full max-w-sm space-y-6 px-4",
-		children: [y, b]
-	}), n[13] = y, n[14] = b, n[15] = x) : x = n[15];
-	let S;
-	n[16] !== r || n[17] !== i || n[18] !== o ? (S = /* @__PURE__ */ jsx(NewRunDialog, {
-		open: r,
-		onOpenChange: i,
-		onSuccess: o
-	}), n[16] = r, n[17] = i, n[18] = o, n[19] = S) : S = n[19];
+	] }) : null, r[8] = m.isLoading, r[9] = v, r[10] = l, r[11] = g, r[12] = u, r[13] = S) : S = r[13];
 	let C;
-	return n[20] !== x || n[21] !== S ? (C = /* @__PURE__ */ jsxs("div", {
-		className: "flex h-screen flex-col items-center justify-center",
+	r[14] !== x || r[15] !== S ? (C = /* @__PURE__ */ jsxs("div", {
+		className: "w-full max-w-sm space-y-6 px-4",
 		children: [x, S]
-	}), n[20] = x, n[21] = S, n[22] = C) : C = n[22], C;
+	}), r[14] = x, r[15] = S, r[16] = C) : C = r[16];
+	let w;
+	r[17] !== i || r[18] !== o || r[19] !== s ? (w = /* @__PURE__ */ jsx(NewRunDialog, {
+		open: i,
+		onOpenChange: o,
+		onSuccess: s
+	}), r[17] = i, r[18] = o, r[19] = s, r[20] = w) : w = r[20];
+	let T;
+	return r[21] !== C || r[22] !== w ? (T = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-screen flex-col items-center justify-center",
+		children: [C, w]
+	}), r[21] = C, r[22] = w, r[23] = T) : T = r[23], T;
 }
 function _temp3(e) {
 	return e + 5;
@@ -378,12 +381,12 @@ function EmbedWorkflowSection(e) {
 		className: "py-1",
 		children: a
 	}) }), t[24] = a, t[25] = g);
-	let v;
-	return t[26] !== h || t[27] !== g ? (v = /* @__PURE__ */ jsxs(Collapsible, {
+	let _;
+	return t[26] !== h || t[27] !== g ? (_ = /* @__PURE__ */ jsxs(Collapsible, {
 		defaultOpen: !0,
 		className: "group/collapsible",
 		children: [h, g]
-	}), t[26] = h, t[27] = g, t[28] = v) : v = t[28], v;
+	}), t[26] = h, t[27] = g, t[28] = _) : _ = t[28], _;
 }
 function EmbedNavigationContent(e) {
 	let t = c(4), { pipelineId: n } = e, r = useNamespaceTree(n);

package/dist/pages/RunsListPage.js

@@ -1,36 +1,64 @@
 import { useStudio } from "../providers/StudioProvider.js";
+import { Button } from "../components/ui/button.js";
 import MainLayout_default from "../components/layout/MainLayout.js";
+import { NewRunDialog } from "../features/workbench/components/NewRunDialog.js";
 import Runs_default from "../features/runs/Runs.js";
 import { c } from "react/compiler-runtime";
+import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Home } from "lucide-react";
+import { Home, Play } from "lucide-react";
 function RunsListPage() {
-	let s = c(12), { router: l } = useStudio(), u;
-	s[0] === l ? u = s[1] : (u = l.getDashboard(), s[0] = l, s[1] = u);
-	let d;
-	s[2] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), s[2] = d) : d = s[2];
-	let f;
-	s[3] === u ? f = s[4] : (f = {
+	let f = c(19), { router: p } = useStudio(), [m, h] = useState(!1), g;
+	f[0] === p ? g = f[1] : (g = p.getDashboard(), f[0] = p, f[1] = g);
+	let _;
+	f[2] === Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), f[2] = _) : _ = f[2];
+	let v;
+	f[3] === g ? v = f[4] : (v = {
 		label: "Dashboard",
-		href: u,
-		icon: d
-	}, s[3] = u, s[4] = f);
-	let p;
-	s[5] === Symbol.for("react.memo_cache_sentinel") ? (p = {
+		href: g,
+		icon: _
+	}, f[3] = g, f[4] = v);
+	let y;
+	f[5] === Symbol.for("react.memo_cache_sentinel") ? (y = {
 		label: "Runs",
 		current: !0
-	}, s[5] = p) : p = s[5];
-	let m;
-	s[6] === f ? m = s[7] : (m = [f, p], s[6] = f, s[7] = m);
-	let h = m, g, _;
-	s[8] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx("h1", {
-		className: "mb-4 text-3xl font-bold tracking-tight",
+	}, f[5] = y) : y = f[5];
+	let b;
+	f[6] === v ? b = f[7] : (b = [v, y], f[6] = v, f[7] = b);
+	let x = b, S;
+	f[8] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx("h1", {
+		className: "text-3xl font-bold tracking-tight",
 		children: "Runs"
-	}), _ = /* @__PURE__ */ jsx(Runs_default, {}), s[8] = g, s[9] = _) : (g = s[8], _ = s[9]);
-	let v;
-	return s[10] === h ? v = s[11] : (v = /* @__PURE__ */ jsxs(MainLayout_default, {
-		breadcrumbsData: h,
-		children: [g, _]
-	}), s[10] = h, s[11] = v), v;
+	}), f[8] = S) : S = f[8];
+	let C, w;
+	f[9] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 flex items-center justify-between",
+		children: [S, /* @__PURE__ */ jsxs(Button, {
+			variant: "default",
+			size: "sm",
+			className: "gap-1.5",
+			onClick: () => h(!0),
+			children: [/* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }), "New Run"]
+		})]
+	}), w = /* @__PURE__ */ jsx(Runs_default, {}), f[9] = C, f[10] = w) : (C = f[9], w = f[10]);
+	let T;
+	f[11] === p ? T = f[12] : (T = (r) => {
+		h(!1), p.navigateToPipeline(r);
+	}, f[11] = p, f[12] = T);
+	let E;
+	f[13] !== m || f[14] !== T ? (E = /* @__PURE__ */ jsx(NewRunDialog, {
+		open: m,
+		onOpenChange: h,
+		onSuccess: T
+	}), f[13] = m, f[14] = T, f[15] = E) : E = f[15];
+	let D;
+	return f[16] !== x || f[17] !== E ? (D = /* @__PURE__ */ jsxs(MainLayout_default, {
+		breadcrumbsData: x,
+		children: [
+			C,
+			w,
+			E
+		]
+	}), f[16] = x, f[17] = E, f[18] = D) : D = f[18], D;
 }
 export { RunsListPage as default };

package/dist/pages/StudioLandingPage.js

@@ -2,6 +2,7 @@ import { useStudio } from "../providers/StudioProvider.js";
 import { useFilterPipelines } from "../hooks/usePipelines.js";
 import { Button } from "../components/ui/button.js";
 import { NewRunDialog } from "../features/workbench/components/NewRunDialog.js";
+import "../features/workbench/index.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/pages/WorkbenchPage.js

@@ -1,9 +1,10 @@
 import { useStudio } from "../providers/StudioProvider.js";
 import { usePipeline } from "../hooks/usePipelines.js";
 import { useWorkspace } from "../hooks/useWorkspaces.js";
-import ErrorSnackbar_default from "../components/snackbars/ErrorSnackbar.js";
-import LoadingCentered_default from "../components/LoadingCentered.js";
+import LoadingCentered_default from "../components/feedback/LoadingCentered.js";
+import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
 import Workbench from "../features/workbench/Workbench.js";
+import "../features/workbench/index.js";
 import { requireParam } from "../lib/requireParam.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useMemo } from "react";

package/dist/pages/WorkspacePage.js

@@ -1,7 +1,7 @@
 import { useStudio } from "../providers/StudioProvider.js";
 import { useWorkspace } from "../hooks/useWorkspaces.js";
 import MainLayout_default from "../components/layout/MainLayout.js";
-import ErrorSnackbar_default from "../components/snackbars/ErrorSnackbar.js";
+import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
 import ExecutionTimeline_default from "../features/workspaces/components/ExecutionTimeline.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/providers/InvalidationEventsProvider.js

@@ -1,19 +1,17 @@
 import { __toESM } from "../_virtual/rolldown_runtime.js";
+import { getDocumentsCacheKey, getNamespacesByPipelineCacheKey, getWorkflowCacheKey, getWorkflowsByPipelineCacheKey, getWorkflowsCacheKey } from "../hooks/query-keys.js";
 import { SseClientEvents } from "../events/sse-client-events.js";
 import { eventBus } from "../services/eventEmitter.js";
 import "../services/index.js";
 import { useStudio } from "./StudioProvider.js";
 import { require_debounce } from "../node_modules/lodash/debounce.js";
-import { getDocumentsCacheKey } from "../hooks/useDocuments.js";
-import { getNamespacesByPipelineCacheKey } from "../hooks/useNamespaces.js";
-import { getWorkflowCacheKey, getWorkflowsByPipelineCacheKey, getWorkflowsCacheKey } from "../hooks/useWorkflows.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 import { QueryClient, useQueryClient } from "@tanstack/react-query";
 var import_debounce = /* @__PURE__ */ __toESM(require_debounce(), 1), DEBOUNCE_MS = 300;
-function createDebouncedInvalidator(e, u) {
+function createDebouncedInvalidator(e, l) {
 	return (0, import_debounce.default)(() => {
-		e.invalidateQueries({ queryKey: u });
+		e.invalidateQueries({ queryKey: l });
 	}, DEBOUNCE_MS);
 }
 function InvalidationEventsProvider() {
@@ -23,12 +21,12 @@ function InvalidationEventsProvider() {
 	return e[1] !== f.id || e[2] !== g ? (b = () => {
 		if (!f.id) return;
 		let e = f.id, d = y.current, p = function(e) {
-			let u = JSON.stringify(e);
-			d.has(u) || d.set(u, createDebouncedInvalidator(g, e)), d.get(u)();
-		}, m = eventBus.on(SseClientEvents.WORKFLOW_CREATED, (u) => {
-			u.namespaceId && p(getWorkflowsCacheKey(e, u.namespaceId)), u.pipelineId && (p(getNamespacesByPipelineCacheKey(e, u.pipelineId)), p(getWorkflowsByPipelineCacheKey(e, u.pipelineId)));
-		}), h = eventBus.on(SseClientEvents.WORKFLOW_UPDATED, (u) => {
-			u.id && p(getWorkflowCacheKey(e, u.id)), u.namespaceId && p(getWorkflowsCacheKey(e, u.namespaceId)), u.pipelineId && (p(getNamespacesByPipelineCacheKey(e, u.pipelineId)), p(getWorkflowsByPipelineCacheKey(e, u.pipelineId)));
+			let l = JSON.stringify(e);
+			d.has(l) || d.set(l, createDebouncedInvalidator(g, e)), d.get(l)();
+		}, m = eventBus.on(SseClientEvents.WORKFLOW_CREATED, (l) => {
+			l.namespaceId && p(getWorkflowsCacheKey(e, l.namespaceId)), l.pipelineId && (p(getNamespacesByPipelineCacheKey(e, l.pipelineId)), p(getWorkflowsByPipelineCacheKey(e, l.pipelineId)));
+		}), h = eventBus.on(SseClientEvents.WORKFLOW_UPDATED, (l) => {
+			l.id && p(getWorkflowCacheKey(e, l.id)), l.namespaceId && p(getWorkflowsCacheKey(e, l.namespaceId)), l.pipelineId && (p(getNamespacesByPipelineCacheKey(e, l.pipelineId)), p(getWorkflowsByPipelineCacheKey(e, l.pipelineId)));
 		}), _ = eventBus.on(SseClientEvents.DOCUMENT_CREATED, (u) => {
 			u.workflowId && p(getDocumentsCacheKey(e, u.workflowId));
 		});

package/dist/providers/StudioProvider.js

@@ -17,5 +17,5 @@ const StudioProvider = (r) => {
 	let e = useContext(StudioContext);
 	if (!e) throw Error("useStudio must be used within StudioProvider");
 	return e;
-};
-export { StudioProvider, useStudio };
+}, useStudioOptional = () => useContext(StudioContext);
+export { StudioProvider, useStudio, useStudioOptional };

package/dist/routing/LocalRouter.js

@@ -3,14 +3,18 @@ import { useNavigate } from "react-router-dom";
 var LocalRouter = class {
 	navigate;
 	envId;
-	constructor(e, t) {
-		this.navigate = e, this.envId = t;
+	embedPrefix;
+	constructor(e, t, n = "/embed") {
+		this.navigate = e, this.envId = t, this.embedPrefix = n;
 	}
 	async navigateToHome() {
 		await this.navigate("/");
 	}
+	getEnvironmentInfo() {
+		return "/info";
+	}
 	async navigateToEnvironmentInfo() {
-		await this.navigate("/info");
+		await this.navigate(this.getEnvironmentInfo());
 	}
 	getRuns() {
 		return "/runs";
@@ -64,10 +68,10 @@ var LocalRouter = class {
 		await this.navigate(`/workspaces/${e}/pipelines/${t}/namespaces/${n}`);
 	}
 	getEmbedPipeline(e) {
-		return `/embed/pipelines/${e}`;
+		return `${this.embedPrefix}/pipelines/${e}`;
 	}
 	getPreviewPipeline(e) {
-		return `/embed/preview/pipelines/${e}`;
+		return `${this.embedPrefix}/preview/pipelines/${e}`;
 	}
 	getCurrentEnvironmentId() {
 		return this.envId;
@@ -76,8 +80,8 @@ var LocalRouter = class {
 		return "local";
 	}
 };
-const useRouter = (r) => {
-	let i = c(3), a = useNavigate(), o;
-	return i[0] !== r || i[1] !== a ? (o = new LocalRouter(a, r), i[0] = r, i[1] = a, i[2] = o) : o = i[2], o;
+const useRouter = (r, i) => {
+	let a = c(4), o = useNavigate(), s;
+	return a[0] !== i || a[1] !== r || a[2] !== o ? (s = new LocalRouter(o, r, i), a[0] = i, a[1] = r, a[2] = o, a[3] = s) : s = a[3], s;
 };
 export { LocalRouter, useRouter };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopstack/loopstack-studio",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "repository": "loopstack-ai/loopstack-studio",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",