@loopstack/loopstack-studio 0.21.3 → 0.23.0

package/dist/pages/RunsListPage.js

@@ -0,0 +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, Play } from "lucide-react";
+function RunsListPage() {
+	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: g,
+		icon: _
+	}, f[3] = g, f[4] = v);
+	let y;
+	f[5] === Symbol.for("react.memo_cache_sentinel") ? (y = {
+		label: "Runs",
+		current: !0
+	}, 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"
+	}), 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/RunsPage.js

@@ -0,0 +1,49 @@
+import { useStudio } from "../providers/StudioProvider.js";
+import MainLayout_default from "../components/layout/MainLayout.js";
+import Runs_default from "../features/runs/Runs.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Home } from "lucide-react";
+function RunsPage() {
+	let s = c(17), { 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 = {
+		label: "Dashboard",
+		href: u,
+		icon: d
+	}, s[3] = u, s[4] = f);
+	let p;
+	s[5] === l ? p = s[6] : (p = l.getRuns(), s[5] = l, s[6] = p);
+	let m;
+	s[7] === p ? m = s[8] : (m = {
+		label: "Runs",
+		href: p
+	}, s[7] = p, s[8] = m);
+	let h;
+	s[9] === Symbol.for("react.memo_cache_sentinel") ? (h = {
+		label: "Action Required",
+		current: !0
+	}, s[9] = h) : h = s[9];
+	let g;
+	s[10] !== f || s[11] !== m ? (g = [
+		f,
+		m,
+		h
+	], s[10] = f, s[11] = m, s[12] = g) : g = s[12];
+	let _ = g, v;
+	s[13] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ jsx("h1", {
+		className: "mb-4 text-3xl font-bold tracking-tight",
+		children: "Action Required"
+	}), s[13] = v) : v = s[13];
+	let y;
+	s[14] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ jsx(Runs_default, { defaultFilters: { status: "paused" } }), s[14] = y) : y = s[14];
+	let b;
+	return s[15] === _ ? b = s[16] : (b = /* @__PURE__ */ jsxs(MainLayout_default, {
+		breadcrumbsData: _,
+		children: [v, y]
+	}), s[15] = _, s[16] = b), b;
+}
+export { RunsPage as default };

package/dist/pages/StudioLandingPage.js

@@ -0,0 +1,146 @@
+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";
+import { ChevronDown, Loader2, Play } from "lucide-react";
+import { formatDistanceToNow } from "date-fns";
+var STATUS_DOT_COLORS = {
+	completed: "bg-green-500",
+	running: "bg-blue-500",
+	failed: "bg-red-500",
+	paused: "bg-yellow-500",
+	canceled: "bg-orange-500",
+	pending: "bg-muted-foreground"
+};
+function StudioLandingPage() {
+	let s = c(28), { router: p } = useStudio(), [m, h] = useState(!1), [v, y] = useState(3), b;
+	s[0] === Symbol.for("react.memo_cache_sentinel") ? (b = { parentId: null }, s[0] = b) : b = s[0];
+	let x = useFilterPipelines(void 0, b, "createdAt", "DESC", 0, v), S;
+	s[1] === x.data?.data ? S = s[2] : (S = x.data?.data ?? [], s[1] = x.data?.data, s[2] = S);
+	let C = S, w = x.data?.total ?? 0, T = C.length < w, E;
+	s[3] === Symbol.for("react.memo_cache_sentinel") ? (E = {
+		parentId: null,
+		status: "paused"
+	}, s[3] = E) : E = s[3];
+	let D = useFilterPipelines(void 0, E, "createdAt", "DESC", 0, 5), O;
+	s[4] === D.data?.data ? O = s[5] : (O = D.data?.data ?? [], s[4] = D.data?.data, s[5] = O);
+	let k = O, A;
+	s[6] === p ? A = s[7] : (A = (e) => {
+		h(!1), p.navigateToPipeline(e);
+	}, s[6] = p, s[7] = A);
+	let j = A, M;
+	s[8] === p ? M = s[9] : (M = (e) => {
+		p.navigateToPipeline(e);
+	}, s[8] = p, s[9] = M);
+	let N = M, P;
+	s[10] === Symbol.for("react.memo_cache_sentinel") ? (P = /* @__PURE__ */ jsx("div", {
+		className: "flex justify-center",
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "secondary",
+			size: "sm",
+			className: "gap-1.5",
+			onClick: () => h(!0),
+			children: [/* @__PURE__ */ jsx(Play, { className: "h-3.5 w-3.5" }), "New Run"]
+		})
+	}), s[10] = P) : P = s[10];
+	let F;
+	s[11] !== N || s[12] !== k ? (F = k.length > 0 && /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-muted-foreground mb-2 text-xs font-medium",
+		children: "Needs Attention"
+	}), /* @__PURE__ */ jsx("div", {
+		className: "divide-border divide-y",
+		children: k.map((e) => /* @__PURE__ */ jsx(RecentRunItem, {
+			pipeline: e,
+			onClick: () => N(e.id)
+		}, e.id))
+	})] }), s[11] = N, s[12] = k, s[13] = F) : F = s[13];
+	let I;
+	s[14] !== x.isLoading || s[15] !== N || s[16] !== T || s[17] !== C ? (I = x.isLoading && C.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" })
+	}) : C.length > 0 ? /* @__PURE__ */ jsxs("div", { children: [
+		/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mb-2 text-xs font-medium",
+			children: "Recent"
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: "max-h-[280px] overflow-auto",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "divide-border divide-y",
+				children: C.map((e) => /* @__PURE__ */ jsx(RecentRunItem, {
+					pipeline: e,
+					onClick: () => N(e.id)
+				}, e.id))
+			})
+		}),
+		T && /* @__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: () => y(_temp),
+			children: [/* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3" }), "Load more"]
+		})
+	] }) : null, s[14] = x.isLoading, s[15] = N, s[16] = T, s[17] = C, s[18] = I) : I = s[18];
+	let L;
+	s[19] !== F || s[20] !== I ? (L = /* @__PURE__ */ jsxs("div", {
+		className: "w-full max-w-sm space-y-6 px-4",
+		children: [
+			P,
+			F,
+			I
+		]
+	}), s[19] = F, s[20] = I, s[21] = L) : L = s[21];
+	let R;
+	s[22] !== j || s[23] !== m ? (R = /* @__PURE__ */ jsx(NewRunDialog, {
+		open: m,
+		onOpenChange: h,
+		onSuccess: j
+	}), s[22] = j, s[23] = m, s[24] = R) : R = s[24];
+	let z;
+	return s[25] !== R || s[26] !== L ? (z = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col items-center justify-center",
+		children: [L, R]
+	}), s[25] = R, s[26] = L, s[27] = z) : z = s[27], z;
+}
+function _temp(e) {
+	return e + 5;
+}
+function RecentRunItem(e) {
+	let i = c(17), { pipeline: a, onClick: o } = e, s = `h-1.5 w-1.5 shrink-0 rounded-full ${STATUS_DOT_COLORS[a.status] ?? "bg-muted-foreground"}`, l;
+	i[0] === s ? l = i[1] : (l = /* @__PURE__ */ jsx("span", { className: s }), i[0] = s, i[1] = l);
+	let u;
+	i[2] !== a.blockName || i[3] !== a.run ? (u = /* @__PURE__ */ jsxs("span", {
+		className: "truncate text-sm font-medium",
+		children: [
+			"Run #",
+			a.run,
+			" · ",
+			a.blockName
+		]
+	}), i[2] = a.blockName, i[3] = a.run, i[4] = u) : u = i[4];
+	let d;
+	i[5] !== l || i[6] !== u ? (d = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [l, u]
+	}), i[5] = l, i[6] = u, i[7] = d) : d = i[7];
+	let f = a.status, h;
+	i[8] === a.createdAt ? h = i[9] : (h = formatDistanceToNow(new Date(a.createdAt), { addSuffix: !0 }), i[8] = a.createdAt, i[9] = h);
+	let g;
+	i[10] !== a.status || i[11] !== h ? (g = /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground mt-0.5 pl-3.5 text-xs",
+		children: [
+			f,
+			" · ",
+			h
+		]
+	}), i[10] = a.status, i[11] = h, i[12] = g) : g = i[12];
+	let _;
+	return i[13] !== o || i[14] !== d || i[15] !== g ? (_ = /* @__PURE__ */ jsxs("button", {
+		className: "hover:bg-accent w-full rounded-md px-2 py-2.5 text-left transition-colors",
+		onClick: o,
+		children: [d, g]
+	}), i[13] = o, i[14] = d, i[15] = g, i[16] = _) : _ = i[16], _;
+}
+export { StudioLandingPage as default };

package/dist/pages/WorkbenchPage.js

@@ -1,67 +1,92 @@
 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 LoadingCentered_default from "../components/LoadingCentered.js";
 import { usePipeline } from "../hooks/usePipelines.js";
+import { useWorkspace } from "../hooks/useWorkspaces.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";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useParams } from "react-router-dom";
 import { Home } from "lucide-react";
-function WorkbenchPage() {
-	let m = c(37), { router: h } = useStudio(), g = useParams(), _;
-	m[0] === g ? _ = m[1] : (_ = requireParam(g, "pipelineId"), m[0] = g, m[1] = _);
-	let v = usePipeline(_), y = v.data?.workspaceId, b = useWorkspace(y), x;
-	m[2] === h ? x = m[3] : (x = h.getDashboard(), m[2] = h, m[3] = x);
-	let S;
-	m[4] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), m[4] = S) : S = m[4];
-	let C;
-	m[5] === x ? C = m[6] : (C = {
+function WorkbenchPage(m) {
+	let h = c(45), g;
+	h[0] === m ? g = h[1] : (g = m === void 0 ? {} : m, h[0] = m, h[1] = g);
+	let { previewPanelOpen: _, onPreviewPanelOpenChange: v, isDeveloperMode: y, getPreviewUrl: b, getEnvironmentPreviewUrl: x, environments: S } = g, { router: C } = useStudio(), w = useParams(), T;
+	h[2] === w ? T = h[3] : (T = requireParam(w, "pipelineId"), h[2] = w, h[3] = T);
+	let E = usePipeline(T), D = E.data?.workspaceId, O = useWorkspace(D);
+	O.data?.environments;
+	let k = S ?? O.data?.environments, A = x ?? _temp, j;
+	h[4] === C ? j = h[5] : (j = C.getDashboard(), h[4] = C, h[5] = j);
+	let M;
+	h[6] === Symbol.for("react.memo_cache_sentinel") ? (M = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), h[6] = M) : M = h[6];
+	let N;
+	h[7] === j ? N = h[8] : (N = {
 		label: "Dashboard",
-		href: x,
-		icon: S
-	}, m[5] = x, m[6] = C);
-	let w;
-	m[7] === h ? w = m[8] : (w = h.getWorkspaces(), m[7] = h, m[8] = w);
-	let T;
-	m[9] === w ? T = m[10] : (T = {
-		label: "Workspaces",
-		href: w
-	}, m[9] = w, m[10] = T);
-	let E = b.data?.title ?? "", D;
-	m[11] !== h || m[12] !== y ? (D = y ? h.getWorkspace(y) : void 0, m[11] = h, m[12] = y, m[13] = D) : D = m[13];
-	let O;
-	m[14] !== E || m[15] !== D ? (O = {
-		label: E,
-		href: D
-	}, m[14] = E, m[15] = D, m[16] = O) : O = m[16];
-	let k = `Run #${v.data?.run}${v.data?.title ? ` (${v.data.title})` : ""}`, A;
-	m[17] === k ? A = m[18] : (A = { label: k }, m[17] = k, m[18] = A);
-	let j;
-	m[19] !== A || m[20] !== C || m[21] !== T || m[22] !== O ? (j = [
-		C,
-		T,
-		O,
-		A
-	], m[19] = A, m[20] = C, m[21] = T, m[22] = O, m[23] = j) : j = m[23];
-	let M = j, N;
-	m[24] === v.error ? N = m[25] : (N = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: v.error }), m[24] = v.error, m[25] = N);
+		href: j,
+		icon: M
+	}, h[7] = j, h[8] = N);
 	let P;
-	m[26] !== v.data || m[27] !== v.error || m[28] !== v.isLoading ? (P = v.data ? /* @__PURE__ */ jsx(Workbench, { pipeline: v.data }) : !v.isLoading && !v.error ? /* @__PURE__ */ jsx("p", {
+	h[9] === C ? P = h[10] : (P = C.getWorkspaces(), h[9] = C, h[10] = P);
+	let F;
+	h[11] === P ? F = h[12] : (F = {
+		label: "Workspaces",
+		href: P
+	}, h[11] = P, h[12] = F);
+	let I = O.data?.title ?? "", L;
+	h[13] !== C || h[14] !== D ? (L = D ? C.getWorkspace(D) : void 0, h[13] = C, h[14] = D, h[15] = L) : L = h[15];
+	let R;
+	h[16] !== I || h[17] !== L ? (R = {
+		label: I,
+		href: L
+	}, h[16] = I, h[17] = L, h[18] = R) : R = h[18];
+	let z = `Run #${E.data?.run}${E.data?.title ? ` (${E.data.title})` : ""}`, B;
+	h[19] === z ? B = h[20] : (B = { label: z }, h[19] = z, h[20] = B);
+	let V;
+	h[21] !== R || h[22] !== B || h[23] !== N || h[24] !== F ? (V = [
+		N,
+		F,
+		R,
+		B
+	], h[21] = R, h[22] = B, h[23] = N, h[24] = F, h[25] = V) : V = h[25];
+	let H = V, U;
+	h[26] === E.error ? U = h[27] : (U = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: E.error }), h[26] = E.error, h[27] = U);
+	let W;
+	h[28] !== H || h[29] !== E.data || h[30] !== E.error || h[31] !== E.isLoading || h[32] !== b || h[33] !== y || h[34] !== v || h[35] !== _ || h[36] !== k || h[37] !== A ? (W = E.data ? /* @__PURE__ */ jsx(Workbench, {
+		pipeline: E.data,
+		breadcrumbData: H,
+		previewPanelOpen: _,
+		onPreviewPanelOpenChange: v,
+		isDeveloperMode: y,
+		getPreviewUrl: b,
+		getEnvironmentPreviewUrl: A,
+		environments: k
+	}) : !E.isLoading && !E.error ? /* @__PURE__ */ jsx("p", {
 		className: "text-muted-foreground py-8 text-center text-sm",
 		children: "Pipeline not found."
-	}) : null, m[26] = v.data, m[27] = v.error, m[28] = v.isLoading, m[29] = P) : P = m[29];
-	let F;
-	m[30] !== v.isLoading || m[31] !== P ? (F = /* @__PURE__ */ jsx(LoadingCentered_default, {
-		loading: v.isLoading,
-		children: P
-	}), m[30] = v.isLoading, m[31] = P, m[32] = F) : F = m[32];
-	let I;
-	return m[33] !== M || m[34] !== N || m[35] !== F ? (I = /* @__PURE__ */ jsxs(MainLayout_default, {
-		breadcrumbsData: M,
-		children: [N, F]
-	}), m[33] = M, m[34] = N, m[35] = F, m[36] = I) : I = m[36], I;
+	}) : null, h[28] = H, h[29] = E.data, h[30] = E.error, h[31] = E.isLoading, h[32] = b, h[33] = y, h[34] = v, h[35] = _, h[36] = k, h[37] = A, h[38] = W) : W = h[38];
+	let G;
+	h[39] !== E.isLoading || h[40] !== W ? (G = /* @__PURE__ */ jsx(LoadingCentered_default, {
+		loading: E.isLoading,
+		children: W
+	}), h[39] = E.isLoading, h[40] = W, h[41] = G) : G = h[41];
+	let K;
+	return h[42] !== U || h[43] !== G ? (K = /* @__PURE__ */ jsx("div", {
+		className: "flex h-svh flex-col",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex-1 overflow-hidden",
+			children: [U, G]
+		})
+	}), h[42] = U, h[43] = G, h[44] = K) : K = h[44], K;
+}
+function _temp(t, f) {
+	if (!t.connectionUrl) return "";
+	let p = new URLSearchParams({
+		url: t.connectionUrl,
+		name: t.envName || t.workerId || ""
+	});
+	return f ? `/embed/env/preview/pipelines/${f}?${p}` : `/embed/env/preview?${p}`;
 }
 export { WorkbenchPage as default };

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,41 +1,39 @@
 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 { useQueryClient } from "@tanstack/react-query";
+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() {
-	let e = c(5), { environment: f } = useStudio(), _ = useQueryClient(), v;
+	let e = c(5), { environment: f } = useStudio(), g = useQueryClient(), v;
 	e[0] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ new Map(), e[0] = v) : v = e[0];
 	let y = useRef(v), b, x;
-	return e[1] !== f.id || e[2] !== _ ? (b = () => {
+	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(_, 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)));
-		}), g = eventBus.on(SseClientEvents.DOCUMENT_CREATED, (u) => {
+			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));
 		});
 		return () => {
-			m(), h(), g(), d.forEach(_temp), d.clear();
+			m(), h(), _(), d.forEach(_temp), d.clear();
 		};
-	}, x = [_, f.id], e[1] = f.id, e[2] = _, e[3] = b, e[4] = x) : (b = e[3], x = e[4]), useEffect(b, x), null;
+	}, x = [g, f.id], e[1] = f.id, e[2] = g, e[3] = b, e[4] = x) : (b = e[3], x = e[4]), useEffect(b, x), null;
 }
 function _temp(e) {
 	return e.cancel();

package/dist/providers/QueryProvider.js

@@ -0,0 +1,21 @@
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+function QueryProvider(o) {
+	let s = c(5), { children: l } = o, [u] = useState(_temp), d;
+	s[0] === l ? d = s[1] : (d = /* @__PURE__ */ jsx(Fragment$1, { children: l }), s[0] = l, s[1] = d);
+	let f;
+	return s[2] !== u || s[3] !== d ? (f = /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: u,
+		children: d
+	}), s[2] = u, s[3] = d, s[4] = f) : f = s[4], f;
+}
+function _temp() {
+	return new QueryClient({ defaultOptions: { queries: {
+		staleTime: 6e4,
+		refetchOnWindowFocus: !1,
+		retry: 1
+	} } });
+}
+export { QueryProvider };

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,24 @@ 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";
+	}
+	getRunsActionRequired() {
+		return "/runs/action-required";
 	}
 	getDashboard() {
 		return "/dashboard";
@@ -58,7 +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 `${this.embedPrefix}/preview/pipelines/${e}`;
 	}
 	getCurrentEnvironmentId() {
 		return this.envId;
@@ -67,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/dist/services/createApiClient.js

@@ -1,12 +1,6 @@
-import { ApiClientEvents } from "../events/api-client-events.js";
-import { eventBus } from "./eventEmitter.js";
-import axios from "axios";
-import { ApiV1AuthApi, Configuration } from "@loopstack/api-client";
-function createApiClient(a) {
-	let o = new Configuration({ baseOptions: {
-		withCredentials: !0,
-		headers: { "Content-Type": "application/json" }
-	} }), s = axios.create();
-	return s.interceptors.response.use((e) => e, (i) => ([401, 403].includes(i.response?.status) && eventBus.emit(ApiClientEvents.UNAUTHORIZED, a.id), i.code === "ERR_NETWORK" && eventBus.emit(ApiClientEvents.ERR_NETWORK, a.id), Promise.reject(i))), { auth: new ApiV1AuthApi(o, a.url, s) };
+import { createAxiosClient } from "../api/client.js";
+import { createApi } from "../api/index.js";
+function createApiClient(n) {
+	return { auth: createApi(createAxiosClient(n.url, n.id)).auth };
 }
 export { createApiClient };

package/dist/services/index.js

@@ -1,2 +1,2 @@
-import { eventBus } from "./eventEmitter.js";
 import { createApiClient } from "./createApiClient.js";
+import { eventBus } from "./eventEmitter.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopstack/loopstack-studio",
-  "version": "0.21.3",
+  "version": "0.23.0",
   "repository": "loopstack-ai/loopstack-studio",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,8 +26,7 @@
   "dependencies": {
     "@fontsource/roboto": "^5.2.10",
     "@hookform/resolvers": "^5.2.2",
-    "@loopstack/api-client": "^0.20.1",
-    "@loopstack/contracts": "^0.22.0",
+    "@loopstack/contracts": "^0.23.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",

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

@@ -1,40 +0,0 @@
-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 };