@loopstack/loopstack-studio 0.21.0 → 0.21.1

package/dist/pages/DebugWorkflowsPage.js

@@ -0,0 +1,130 @@
+import { useStudio } from "../providers/StudioProvider.js";
+import { useApiClient } from "../hooks/useApi.js";
+import { Badge } from "../components/ui/badge.js";
+import MainLayout_default from "../components/layout/MainLayout.js";
+import { DataTable } from "../components/data-table/DataTable.js";
+import { useWorkspaceConfig } from "../hooks/useConfig.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+import { Home } from "lucide-react";
+function DebugWorkflowsPage() {
+	let { router: f } = useStudio(), { envKey: p, api: m } = useApiClient(), { data: h, isLoading: g } = useWorkspaceConfig(), _ = useQueries({ queries: (h ?? []).map((e) => ({
+		queryKey: [
+			"pipeline-types",
+			e.blockName,
+			p
+		],
+		queryFn: async () => {
+			if (!m) throw Error("API not available");
+			let c = await m.ApiV1ConfigApi.configControllerGetPipelineTypesByWorkspace({ workspaceBlockName: e.blockName });
+			return {
+				workspaceBlockName: e.blockName,
+				types: c.data
+			};
+		},
+		enabled: !!h?.length
+	})) }), v = _.some((e) => e.isLoading), y = g || v, b = useMemo(() => y || !_ ? [] : _.flatMap((e) => {
+		if (!e.data) return [];
+		let { workspaceBlockName: c, types: l } = e.data;
+		return (l ?? []).map((e) => ({
+			...e,
+			id: `${c}::${e.blockName}`,
+			workspaceBlockName: c
+		}));
+	}), [_, y]), [x, S] = useState(""), [C, w] = useState("blockName"), [T, E] = useState("ASC"), [D, O] = useState(0), [k, A] = useState(10), j = useMemo(() => {
+		let e = b;
+		if (x) {
+			let c = x.toLowerCase();
+			e = e.filter((e) => e.blockName?.toLowerCase().includes(c) || e.title?.toLowerCase().includes(c) || e.description?.toLowerCase().includes(c) || e.workspaceBlockName.toLowerCase().includes(c));
+		}
+		return e = [...e].sort((e, c) => {
+			let l = C, u = (e[l] || "").toLowerCase(), d = (c[l] || "").toLowerCase();
+			return u < d ? T === "ASC" ? -1 : 1 : u > d ? T === "ASC" ? 1 : -1 : 0;
+		}), e;
+	}, [
+		b,
+		x,
+		C,
+		T
+	]), M = useMemo(() => {
+		let e = D * k;
+		return j.slice(e, e + k);
+	}, [
+		j,
+		D,
+		k
+	]);
+	return /* @__PURE__ */ jsxs(MainLayout_default, {
+		breadcrumbsData: [{
+			label: "Dashboard",
+			href: f.getDashboard(),
+			icon: /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" })
+		}, {
+			label: "Debug Workflows",
+			current: !0
+		}],
+		children: [/* @__PURE__ */ jsx("h1", {
+			className: "mb-4 text-3xl font-bold tracking-tight",
+			children: "Workflow Types"
+		}), /* @__PURE__ */ jsx(DataTable, {
+			data: M,
+			columns: [
+				{
+					id: "blockName",
+					label: "Type ID (Block Name)",
+					sortable: !0,
+					minWidth: 200,
+					format: (e) => /* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: String(e)
+					})
+				},
+				{
+					id: "title",
+					label: "Title",
+					sortable: !0,
+					format: (e, c) => /* @__PURE__ */ jsx("span", { children: String(e || c.blockName || "N/A") })
+				},
+				{
+					id: "workspaceBlockName",
+					label: "Workspace Type",
+					sortable: !0,
+					format: (e) => /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						children: String(e)
+					})
+				},
+				{
+					id: "description",
+					label: "Description",
+					sortable: !0,
+					format: (e) => /* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground max-w-xs truncate block",
+						children: String(e || "-")
+					})
+				}
+			],
+			loading: y,
+			totalItems: j.length,
+			searchTerm: x,
+			onSearchChange: S,
+			page: D,
+			pageSize: k,
+			onPageChange: (e) => O(e),
+			onPageSizeChange: (e) => {
+				A(e), O(0);
+			},
+			sortBy: C,
+			sortOrder: T,
+			onSortChange: (e, c) => {
+				w(e), E(c);
+			},
+			filters: {},
+			onFiltersChange: () => {},
+			enableBatchActions: !1,
+			onRowClick: (e) => void f.navigateToDebugWorkflow(e.id)
+		})]
+	});
+}
+export { DebugWorkflowsPage as default };

package/dist/pages/EmbedWorkbenchPage.js

@@ -0,0 +1,73 @@
+import ErrorSnackbar_default from "../components/snackbars/ErrorSnackbar.js";
+import LoadingCentered_default from "../components/LoadingCentered.js";
+import { usePipeline } from "../hooks/usePipelines.js";
+import { useFetchWorkflowsByPipeline } from "../hooks/useWorkflows.js";
+import WorkflowItem_default from "../features/workbench/WorkflowItem.js";
+import { requireParam } from "../lib/requireParam.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+var EMBED_MESSAGE_TYPE = "loopstack:embed:workflow-completed", EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize";
+function EmbedWorkbenchPage() {
+	let _ = c(24), v = useParams(), y;
+	_[0] === v ? y = _[1] : (y = requireParam(v, "pipelineId"), _[0] = v, _[1] = y);
+	let b = y, x = useRef(null), S = usePipeline(b), C = useFetchWorkflowsByPipeline(b), w = useRef(!1), T, E;
+	_[2] !== C.data || _[3] !== b ? (T = () => {
+		!C.data || w.current || C.data.length > 0 && C.data.every(_temp) && window.parent !== window && (w.current = !0, window.parent.postMessage({
+			type: EMBED_MESSAGE_TYPE,
+			pipelineId: b
+		}, window.location.origin));
+	}, E = [C.data, b], _[2] = C.data, _[3] = b, _[4] = T, _[5] = E) : (T = _[4], E = _[5]), useEffect(T, E);
+	let D, O;
+	_[6] === b ? (D = _[7], O = _[8]) : (D = () => {
+		if (window.parent === window || !x.current) return;
+		let t = new ResizeObserver(() => {
+			if (!x.current) return;
+			let t = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
+			window.parent.postMessage({
+				type: EMBED_RESIZE_MESSAGE_TYPE,
+				pipelineId: b,
+				height: t
+			}, window.location.origin);
+		});
+		return t.observe(x.current), () => t.disconnect();
+	}, O = [b], _[6] = b, _[7] = D, _[8] = O), useEffect(D, O);
+	let k = _temp2, A;
+	_[9] === Symbol.for("react.memo_cache_sentinel") ? (A = {
+		enableDebugMode: !1,
+		showFullMessageHistory: !1
+	}, _[9] = A) : A = _[9];
+	let j = A, M;
+	_[10] === S.error ? M = _[11] : (M = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: S.error }), _[10] = S.error, _[11] = M);
+	let N;
+	_[12] === C.error ? N = _[13] : (N = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: C.error }), _[12] = C.error, _[13] = N);
+	let P = S.isLoading || C.isLoading, F;
+	_[14] !== S.data || _[15] !== C.data ? (F = S.data && C.data ? C.data.map((t) => /* @__PURE__ */ jsx(WorkflowItem_default, {
+		pipeline: S.data,
+		workflowId: t.id,
+		scrollTo: k,
+		settings: j,
+		embed: !0
+	}, t.id)) : null, _[14] = S.data, _[15] = C.data, _[16] = F) : F = _[16];
+	let I;
+	_[17] !== P || _[18] !== F ? (I = /* @__PURE__ */ jsx(LoadingCentered_default, {
+		loading: P,
+		children: F
+	}), _[17] = P, _[18] = F, _[19] = I) : I = _[19];
+	let L;
+	return _[20] !== I || _[21] !== M || _[22] !== N ? (L = /* @__PURE__ */ jsxs("div", {
+		ref: x,
+		className: "overflow-hidden px-6 py-4",
+		children: [
+			M,
+			N,
+			I
+		]
+	}), _[20] = I, _[21] = M, _[22] = N, _[23] = L) : L = _[23], L;
+}
+function _temp2() {}
+function _temp(t) {
+	return t.status === "completed";
+}
+export { EmbedWorkbenchPage as default };

package/dist/pages/PipelineDebugPage.js

@@ -0,0 +1,114 @@
+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 { usePipeline, usePipelineConfig } from "../hooks/usePipelines.js";
+import { ReactFlowProvider } from "../node_modules/@xyflow/react/dist/esm/index.js";
+import { useFetchWorkflowsByPipeline } from "../hooks/useWorkflows.js";
+import { requireParam } from "../lib/requireParam.js";
+import PipelineDebugHeader_default from "../features/debug/components/PipelineDebugHeader.js";
+import PipelineFlowViewer_default from "../features/debug/components/PipelineFlowViewer.js";
+import { c } from "react/compiler-runtime";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+import { Bug, Home, Loader2 } from "lucide-react";
+var PipelineDebugPage_default = () => {
+	let v = c(54), { router: y } = useStudio(), b = useParams(), x;
+	v[0] === b ? x = v[1] : (x = requireParam(b, "pipelineId"), v[0] = b, v[1] = x);
+	let S = x, C = usePipeline(S), w = C.data?.workspaceId, T = useWorkspace(w), E = useFetchWorkflowsByPipeline(S), D;
+	v[2] === E.data ? D = v[3] : (D = E.data ?? [], v[2] = E.data, v[3] = D);
+	let O = D, k = T.data?.blockName, A = C.data?.blockName, j = usePipelineConfig(k, A), M;
+	v[4] === y ? M = v[5] : (M = y.getDashboard(), v[4] = y, v[5] = M);
+	let N;
+	v[6] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), v[6] = N) : N = v[6];
+	let P;
+	v[7] === M ? P = v[8] : (P = {
+		label: "Dashboard",
+		href: M,
+		icon: N
+	}, v[7] = M, v[8] = P);
+	let F;
+	v[9] === y ? F = v[10] : (F = y.getWorkspaces(), v[9] = y, v[10] = F);
+	let I;
+	v[11] === F ? I = v[12] : (I = {
+		label: "Workspaces",
+		href: F
+	}, v[11] = F, v[12] = I);
+	let L = T.data?.title ?? "...", R;
+	v[13] !== y || v[14] !== w ? (R = w ? y.getWorkspace(w) : void 0, v[13] = y, v[14] = w, v[15] = R) : R = v[15];
+	let z;
+	v[16] !== L || v[17] !== R ? (z = {
+		label: L,
+		href: R
+	}, v[16] = L, v[17] = R, v[18] = z) : z = v[18];
+	let B = `Run #${C.data?.run ?? "..."}`, V;
+	v[19] !== S || v[20] !== y ? (V = y.getPipeline(S), v[19] = S, v[20] = y, v[21] = V) : V = v[21];
+	let H;
+	v[22] !== B || v[23] !== V ? (H = {
+		label: B,
+		href: V
+	}, v[22] = B, v[23] = V, v[24] = H) : H = v[24];
+	let U;
+	v[25] === Symbol.for("react.memo_cache_sentinel") ? (U = {
+		label: "Debug Flow",
+		icon: /* @__PURE__ */ jsx(Bug, { className: "h-4 w-4" })
+	}, v[25] = U) : U = v[25];
+	let W;
+	v[26] !== H || v[27] !== P || v[28] !== I || v[29] !== z ? (W = [
+		P,
+		I,
+		z,
+		H,
+		U
+	], v[26] = H, v[27] = P, v[28] = I, v[29] = z, v[30] = W) : W = v[30];
+	let G = W;
+	if (C.isLoading || E.isLoading || T.isLoading) {
+		let t;
+		v[31] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ jsx("div", {
+			className: "flex h-[calc(100vh-8rem)] items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" })
+		}), v[31] = t) : t = v[31];
+		let _;
+		return v[32] === G ? _ = v[33] : (_ = /* @__PURE__ */ jsx(MainLayout_default, {
+			breadcrumbsData: G,
+			children: t
+		}), v[32] = G, v[33] = _), _;
+	}
+	let K;
+	v[34] === C.error ? K = v[35] : (K = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: C.error }), v[34] = C.error, v[35] = K);
+	let q = C.data?.title ?? C.data?.blockName ?? "Pipeline", J = C.data?.run, Y;
+	v[36] !== S || v[37] !== y ? (Y = () => void y.navigateToPipeline(S), v[36] = S, v[37] = y, v[38] = Y) : Y = v[38];
+	let X;
+	v[39] !== q || v[40] !== J || v[41] !== Y ? (X = /* @__PURE__ */ jsx(PipelineDebugHeader_default, {
+		title: q,
+		runNumber: J,
+		onBack: Y
+	}), v[39] = q, v[40] = J, v[41] = Y, v[42] = X) : X = v[42];
+	let Z;
+	v[43] !== j || v[44] !== S || v[45] !== O ? (Z = /* @__PURE__ */ jsx("div", {
+		className: "bg-card border-border flex-1 overflow-hidden rounded-2xl border shadow-sm",
+		children: O.length > 0 ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(PipelineFlowViewer_default, {
+			pipelineId: S,
+			workflows: O,
+			pipelineConfig: j.data
+		}) }) : /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: "No workflows found for this pipeline"
+			})
+		})
+	}), v[43] = j, v[44] = S, v[45] = O, v[46] = Z) : Z = v[46];
+	let Q;
+	v[47] !== X || v[48] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-[calc(100vh-8rem)] flex-col gap-6",
+		children: [X, Z]
+	}), v[47] = X, v[48] = Z, v[49] = Q) : Q = v[49];
+	let $;
+	return v[50] !== G || v[51] !== K || v[52] !== Q ? ($ = /* @__PURE__ */ jsxs(MainLayout_default, {
+		breadcrumbsData: G,
+		children: [K, Q]
+	}), v[50] = G, v[51] = K, v[52] = Q, v[53] = $) : $ = v[53], $;
+};
+export { PipelineDebugPage_default as default };

package/dist/pages/WorkbenchPage.js

@@ -0,0 +1,67 @@
+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 Workbench from "../features/workbench/Workbench.js";
+import { requireParam } from "../lib/requireParam.js";
+import { c } from "react/compiler-runtime";
+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 = {
+		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);
+	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", {
+		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;
+}
+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 { useWorkspace } from "../hooks/useWorkspaces.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/ComponentOverridesProvider.js

@@ -0,0 +1,12 @@
+import { c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var ComponentOverridesContext = createContext({});
+const ComponentOverridesProvider = (r) => {
+	let i = c(3), { children: a, overrides: o } = r, s;
+	return i[0] !== a || i[1] !== o ? (s = /* @__PURE__ */ jsx(ComponentOverridesContext.Provider, {
+		value: o,
+		children: a
+	}), i[0] = a, i[1] = o, i[2] = s) : s = i[2], s;
+}, useComponentOverrides = () => useContext(ComponentOverridesContext);
+export { ComponentOverridesProvider, useComponentOverrides };

package/dist/routing/LocalRouter.js

@@ -57,6 +57,9 @@ var LocalRouter = class {
 	async navigateToPipelineNamespace(e, t, n) {
 		await this.navigate(`/workspaces/${e}/pipelines/${t}/namespaces/${n}`);
 	}
+	getEmbedPipeline(e) {
+		return `/embed/pipelines/${e}`;
+	}
 	getCurrentEnvironmentId() {
 		return this.envId;
 	}

package/package.json

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