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

package/dist/features/dashboard/Dashboard.js

@@ -0,0 +1,125 @@
+import { useStudio } from "../../providers/StudioProvider.js";
+import { Card, CardContent, CardHeader, CardTitle } from "../../components/ui/card.js";
+import RunList_default from "./RunList.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+function Dashboard(f) {
+	let p = c(43), { dashboardStats: m } = f, { router: h } = useStudio();
+	if (!m) {
+		let t;
+		return p[0] === Symbol.for("react.memo_cache_sentinel") ? (t = /* @__PURE__ */ jsx("div", {
+			className: "p-4",
+			children: "No data available"
+		}), p[0] = t) : t = p[0], t;
+	}
+	let g;
+	p[1] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, {
+		className: "text-lg",
+		children: "Quick Links"
+	}) }), p[1] = g) : g = p[1];
+	let _;
+	p[2] === h ? _ = p[3] : (_ = h.getWorkspaces(), p[2] = h, p[3] = _);
+	let v;
+	p[4] === _ ? v = p[5] : (v = /* @__PURE__ */ jsx(CardContent, {
+		className: "space-y-3",
+		children: /* @__PURE__ */ jsx(Link, {
+			to: _,
+			className: "text-primary hover:text-primary/80 hover:bg-muted block rounded p-2 text-sm font-medium transition-colors",
+			children: "My Workspaces"
+		})
+	}), p[4] = _, p[5] = v);
+	let y;
+	p[6] === h ? y = p[7] : (y = h.getDebugWorkflows(), p[6] = h, p[7] = y);
+	let b;
+	p[8] === y ? b = p[9] : (b = /* @__PURE__ */ jsx(CardContent, {
+		className: "space-y-3",
+		children: /* @__PURE__ */ jsx(Link, {
+			to: y,
+			className: "text-primary hover:text-primary/80 hover:bg-muted block rounded p-2 text-sm font-medium transition-colors",
+			children: "Debug Workflows"
+		})
+	}), p[8] = y, p[9] = b);
+	let x;
+	p[10] !== v || p[11] !== b ? (x = /* @__PURE__ */ jsx("div", {
+		className: "md:col-span-1",
+		children: /* @__PURE__ */ jsxs(Card, {
+			className: "h-full",
+			children: [
+				g,
+				v,
+				b
+			]
+		})
+	}), p[10] = v, p[11] = b, p[12] = x) : x = p[12];
+	let S;
+	p[13] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, {
+		className: "text-lg",
+		children: "Executions"
+	}) }), p[13] = S) : S = p[13];
+	let C;
+	p[14] === m.totalAutomationRuns ? C = p[15] : (C = /* @__PURE__ */ jsxs(Card, { children: [S, /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", {
+		className: "text-3xl font-bold",
+		children: m.totalAutomationRuns
+	}) })] }), p[14] = m.totalAutomationRuns, p[15] = C);
+	let w;
+	p[16] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, {
+		className: "text-lg",
+		children: "Completed"
+	}) }), p[16] = w) : w = p[16];
+	let T;
+	p[17] === m.completedRuns ? T = p[18] : (T = /* @__PURE__ */ jsxs(Card, { children: [w, /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", {
+		className: "text-3xl font-bold text-green-600",
+		children: m.completedRuns
+	}) })] }), p[17] = m.completedRuns, p[18] = T);
+	let E;
+	p[19] === Symbol.for("react.memo_cache_sentinel") ? (E = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, {
+		className: "text-lg",
+		children: "Failed"
+	}) }), p[19] = E) : E = p[19];
+	let D;
+	p[20] === m.errorRuns ? D = p[21] : (D = /* @__PURE__ */ jsxs(Card, { children: [E, /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx("p", {
+		className: "text-destructive text-3xl font-bold",
+		children: m.errorRuns
+	}) })] }), p[20] = m.errorRuns, p[21] = D);
+	let O;
+	p[22] !== T || p[23] !== D || p[24] !== C ? (O = /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-1 gap-4 md:col-span-3 md:grid-cols-3",
+		children: [
+			C,
+			T,
+			D
+		]
+	}), p[22] = T, p[23] = D, p[24] = C, p[25] = O) : O = p[25];
+	let k;
+	p[26] !== O || p[27] !== x ? (k = /* @__PURE__ */ jsxs("div", {
+		className: "mb-8 grid grid-cols-1 gap-6 md:grid-cols-4",
+		children: [x, O]
+	}), p[26] = O, p[27] = x, p[28] = k) : k = p[28];
+	let A;
+	p[29] === Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Recently Completed" }) }), p[29] = A) : A = p[29];
+	let j;
+	p[30] !== m.recentRuns || p[31] !== h ? (j = /* @__PURE__ */ jsxs(Card, { children: [A, /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(RunList_default, {
+		type: "runs",
+		runs: m.recentRuns,
+		router: h,
+		emptyMessage: "No recent runs."
+	}) })] }), p[30] = m.recentRuns, p[31] = h, p[32] = j) : j = p[32];
+	let M;
+	p[33] === Symbol.for("react.memo_cache_sentinel") ? (M = /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx(CardTitle, { children: "Recently Failed" }) }), p[33] = M) : M = p[33];
+	let N;
+	p[34] !== m.recentErrors || p[35] !== h ? (N = /* @__PURE__ */ jsxs(Card, { children: [M, /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(RunList_default, {
+		type: "errors",
+		runs: m.recentErrors,
+		router: h,
+		emptyMessage: "No recent errors."
+	}) })] }), p[34] = m.recentErrors, p[35] = h, p[36] = N) : N = p[36];
+	let P;
+	p[37] !== j || p[38] !== N ? (P = /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-1 gap-6 md:grid-cols-2",
+		children: [j, N]
+	}), p[37] = j, p[38] = N, p[39] = P) : P = p[39];
+	let F;
+	return p[40] !== k || p[41] !== P ? (F = /* @__PURE__ */ jsxs(Fragment, { children: [k, P] }), p[40] = k, p[41] = P, p[42] = F) : F = p[42], F;
+}
+export { Dashboard as default };

package/dist/features/dashboard/RunItem.js

@@ -0,0 +1,76 @@
+import { Badge } from "../../components/ui/badge.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "react-router-dom";
+function RunItem(a) {
+	let o = c(26), { run: s, router: l } = a, u = {
+		completed: "bg-green-50 text-green-900 border-green-200",
+		failed: "bg-destructive/10 text-destructive border-destructive/20",
+		canceled: "bg-orange-50 text-orange-900 border-orange-200",
+		running: "bg-blue-50 text-blue-900 border-blue-200",
+		paused: "bg-yellow-50 text-yellow-900 border-yellow-200",
+		pending: "bg-muted text-muted-foreground border-border"
+	}[s.status] || "bg-muted text-muted-foreground border-border", d;
+	o[0] !== l || o[1] !== s.id ? (d = l.getPipeline(s.id), o[0] = l, o[1] = s.id, o[2] = d) : d = o[2];
+	let f = s.id, p = s.run ?? s.index ?? "?", m = s.title ? `(${s.title})` : "", h;
+	o[3] !== p || o[4] !== m ? (h = /* @__PURE__ */ jsxs("h3", {
+		className: "text-foreground group-hover:text-primary truncate font-semibold transition-colors",
+		children: [
+			"Run #",
+			p,
+			" ",
+			m
+		]
+	}), o[3] = p, o[4] = m, o[5] = h) : h = o[5];
+	let g = `rounded-full border px-2 py-1 text-xs whitespace-nowrap ${u}`, _;
+	o[6] !== s.status || o[7] !== g ? (_ = /* @__PURE__ */ jsx(Badge, {
+		className: g,
+		children: s.status
+	}), o[6] = s.status, o[7] = g, o[8] = _) : _ = o[8];
+	let v;
+	o[9] === s.updatedAt ? v = o[10] : (v = new Date(s.updatedAt).toLocaleString(), o[9] = s.updatedAt, o[10] = v);
+	let y;
+	o[11] === v ? y = o[12] : (y = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground text-xs",
+		children: v
+	}), o[11] = v, o[12] = y);
+	let b;
+	o[13] !== _ || o[14] !== y ? (b = /* @__PURE__ */ jsxs("div", {
+		className: "mt-2 flex flex-wrap items-center gap-2",
+		children: [_, y]
+	}), o[13] = _, o[14] = y, o[15] = b) : b = o[15];
+	let x;
+	o[16] !== b || o[17] !== h ? (x = /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0 flex-1 pr-2",
+		children: [h, b]
+	}), o[16] = b, o[17] = h, o[18] = x) : x = o[18];
+	let S;
+	o[19] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx("div", {
+		className: "ml-3 opacity-0 transition-opacity group-hover:opacity-100",
+		children: /* @__PURE__ */ jsx("svg", {
+			className: "text-muted-foreground h-4 w-4",
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 24 24",
+			children: /* @__PURE__ */ jsx("path", {
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: 2,
+				d: "M9 5l7 7-7 7"
+			})
+		})
+	}), o[19] = S) : S = o[19];
+	let C;
+	o[20] === x ? C = o[21] : (C = /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-start justify-between",
+		children: [x, S]
+	}), o[20] = x, o[21] = C);
+	let w;
+	return o[22] !== s.id || o[23] !== d || o[24] !== C ? (w = /* @__PURE__ */ jsx(Link, {
+		to: d,
+		className: "bg-card border-border hover:border-primary/50 group block w-full overflow-hidden rounded-lg border p-4 transition-all duration-200 hover:shadow-md",
+		children: C
+	}, f), o[22] = s.id, o[23] = d, o[24] = C, o[25] = w) : w = o[25], w;
+}
+var RunItem_default = RunItem;
+export { RunItem_default as default };

package/dist/features/dashboard/RunList.js

@@ -0,0 +1,32 @@
+import { ScrollArea } from "../../components/ui/scroll-area.js";
+import RunItem_default from "./RunItem.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+function RunsList(i) {
+	let a = c(11), { type: o, runs: s, router: l, emptyMessage: u } = i;
+	if (s.length === 0) {
+		let e;
+		return a[0] === u ? e = a[1] : (e = /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground",
+			children: u
+		}), a[0] = u, a[1] = e), e;
+	}
+	let d;
+	if (a[2] !== l || a[3] !== s || a[4] !== o) {
+		let e;
+		a[6] !== l || a[7] !== o ? (e = (e) => /* @__PURE__ */ jsx(RunItem_default, {
+			run: e,
+			router: l
+		}, `${o}-${e.id}`), a[6] = l, a[7] = o, a[8] = e) : e = a[8], d = s.map(e), a[2] = l, a[3] = s, a[4] = o, a[5] = d;
+	} else d = a[5];
+	let f;
+	return a[9] === d ? f = a[10] : (f = /* @__PURE__ */ jsx(ScrollArea, {
+		className: "h-75 w-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "space-y-2 pr-2",
+			children: d
+		})
+	}), a[9] = d, a[10] = f), f;
+}
+var RunList_default = RunsList;
+export { RunList_default as default };

package/dist/features/debug/components/ConfigFlowViewer.js

@@ -0,0 +1,79 @@
+import { Background, BackgroundVariant, Controls, index, useEdgesState, useNodesState, useReactFlow } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
+/* empty css                                             */
+import { buildWorkflowGraph } from "../lib/flow-utils.js";
+import StateNode_default from "./pipeline-flow/StateNode.js";
+import WorkflowTransitionEdge_default from "./pipeline-flow/WorkflowTransitionEdge.js";
+import { c } from "react/compiler-runtime";
+import React, { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, ConfigFlowViewer_default = (_) => {
+	let v = c(21), { config: y } = _, b;
+	v[0] === Symbol.for("react.memo_cache_sentinel") ? (b = [], v[0] = b) : b = v[0];
+	let [x, S, C] = useNodesState(b), w;
+	v[1] === Symbol.for("react.memo_cache_sentinel") ? (w = [], v[1] = w) : w = v[1];
+	let [T, E, D] = useEdgesState(w), { fitView: O } = useReactFlow(), k = useRef(!1), A, j;
+	v[2] !== y || v[3] !== E || v[4] !== S ? (A = () => {
+		if (!y) return;
+		let { nodes: e, edges: g } = buildWorkflowGraph(y, void 0, "preview", y.transitions ?? [], "TB", !0);
+		S(e), E(g);
+	}, j = [
+		y,
+		S,
+		E
+	], v[2] = y, v[3] = E, v[4] = S, v[5] = A, v[6] = j) : (A = v[5], j = v[6]), useEffect(A, j);
+	let M, N;
+	if (v[7] !== O || v[8] !== x.length ? (M = () => {
+		if (x.length > 0 && !k.current) {
+			k.current = !0;
+			let e = setTimeout(() => {
+				O({ padding: .2 });
+			}, 150);
+			return () => clearTimeout(e);
+		}
+	}, N = [x.length, O], v[7] = O, v[8] = x.length, v[9] = M, v[10] = N) : (M = v[9], N = v[10]), useEffect(M, N), !y) {
+		let e;
+		return v[11] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground" })
+		}), v[11] = e) : e = v[11], e;
+	}
+	if (x.length === 0) {
+		let e;
+		return v[12] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx("p", {
+				className: "font-medium",
+				children: "No transitions defined in configuration"
+			})
+		}), v[12] = e) : e = v[12], e;
+	}
+	let P;
+	v[13] === Symbol.for("react.memo_cache_sentinel") ? (P = { hideAttribution: !0 }, v[13] = P) : P = v[13];
+	let F, I;
+	v[14] === Symbol.for("react.memo_cache_sentinel") ? (F = /* @__PURE__ */ jsx(Background, {
+		variant: BackgroundVariant.Cross,
+		gap: 24,
+		size: 1,
+		className: "opacity-[0.15]"
+	}), I = /* @__PURE__ */ jsx(Controls, { className: "bg-card border-border rounded-lg border shadow-md" }), v[14] = F, v[15] = I) : (F = v[14], I = v[15]);
+	let L;
+	return v[16] !== T || v[17] !== x || v[18] !== D || v[19] !== C ? (L = /* @__PURE__ */ jsx("div", {
+		className: "h-full w-full bg-background",
+		children: /* @__PURE__ */ jsxs(index, {
+			nodes: x,
+			edges: T,
+			onNodesChange: C,
+			onEdgesChange: D,
+			nodeTypes,
+			edgeTypes,
+			fitView: !0,
+			minZoom: .1,
+			maxZoom: 2,
+			proOptions: P,
+			className: "bg-background",
+			children: [F, I]
+		})
+	}), v[16] = T, v[17] = x, v[18] = D, v[19] = C, v[20] = L) : L = v[20], L;
+};
+export { ConfigFlowViewer_default as default };

package/dist/features/debug/components/PipelineDebugHeader.js

@@ -0,0 +1,48 @@
+import { Button } from "../../../components/ui/button.js";
+import PipelineDebugLegend_default from "./PipelineDebugLegend.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+var PipelineDebugHeader_default = (o) => {
+	let s = c(16), { title: l, runNumber: u, onBack: d } = o, f;
+	s[0] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }), s[0] = f) : f = s[0];
+	let p;
+	s[1] === d ? p = s[2] : (p = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		onClick: d,
+		className: "h-9 w-9 rounded-full",
+		children: f
+	}), s[1] = d, s[2] = p);
+	let m;
+	s[3] === l ? m = s[4] : (m = /* @__PURE__ */ jsx("h1", {
+		className: "text-lg font-bold tracking-tight",
+		children: l
+	}), s[3] = l, s[4] = m);
+	let h = u && `· Run #${u}`, g;
+	s[5] === h ? g = s[6] : (g = /* @__PURE__ */ jsxs("p", {
+		className: "text-muted-foreground text-xs font-medium tracking-wider uppercase",
+		children: ["Pipeline Flow Visualization ", h]
+	}), s[5] = h, s[6] = g);
+	let _;
+	s[7] !== m || s[8] !== g ? (_ = /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [m, g]
+	}), s[7] = m, s[8] = g, s[9] = _) : _ = s[9];
+	let v;
+	s[10] !== p || s[11] !== _ ? (v = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4",
+		children: [p, _]
+	}), s[10] = p, s[11] = _, s[12] = v) : v = s[12];
+	let y;
+	s[13] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ jsx("div", {
+		className: "hidden items-center gap-6 sm:flex",
+		children: /* @__PURE__ */ jsx(PipelineDebugLegend_default, {})
+	}), s[13] = y) : y = s[13];
+	let b;
+	return s[14] === v ? b = s[15] : (b = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between pb-2",
+		children: [v, y]
+	}), s[14] = v, s[15] = b), b;
+};
+export { PipelineDebugHeader_default as default };

package/dist/features/debug/components/PipelineDebugLegend.js

@@ -0,0 +1,68 @@
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PipelineDebugLegend_default = () => {
+	let r = c(7), i;
+	r[0] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border border-blue-500/50 bg-blue-500/20" }), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "Start"
+		})]
+	}), r[0] = i) : i = r[0];
+	let a;
+	r[1] === Symbol.for("react.memo_cache_sentinel") ? (a = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "relative h-3 w-3",
+			children: [/* @__PURE__ */ jsx("span", { className: "bg-primary absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }), /* @__PURE__ */ jsx("span", { className: "bg-primary border-background ring-primary/30 relative inline-flex h-3 w-3 rounded-full border-2 ring-1" })]
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-foreground font-semibold",
+			children: "Current"
+		})]
+	}), r[1] = a) : a = r[1];
+	let o;
+	r[2] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border border-green-500/50 bg-green-500/20" }), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "End"
+		})]
+	}), r[2] = o) : o = r[2];
+	let s, l;
+	r[3] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", { className: "border-border bg-muted/50 h-3 w-3 rounded-full border" }), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "Visited"
+		})]
+	}), l = /* @__PURE__ */ jsx("div", { className: "bg-border mx-2 h-4 w-px" }), r[3] = s, r[4] = l) : (s = r[3], l = r[4]);
+	let u;
+	r[5] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("div", { className: "bg-primary h-0.5 w-4 rounded" }), /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground",
+			children: "Executed"
+		})]
+	}), r[5] = u) : u = r[5];
+	let d;
+	return r[6] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-6 text-xs font-medium",
+		children: [
+			i,
+			a,
+			o,
+			s,
+			l,
+			u,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("div", { className: "border-muted-foreground/60 h-0.5 w-4 rounded border-t border-dashed" }), /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "Potential"
+				})]
+			})
+		]
+	}), r[6] = d) : d = r[6], d;
+};
+export { PipelineDebugLegend_default as default };

package/dist/features/debug/components/PipelineFlowViewer.js

@@ -0,0 +1,109 @@
+import { usePipeline } from "../../../hooks/usePipelines.js";
+import { Background, BackgroundVariant, Controls, index, useEdgesState, useNodesState, useReactFlow } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
+/* empty css                                             */
+import StateNode_default from "./pipeline-flow/StateNode.js";
+import WorkflowTransitionEdge_default from "./pipeline-flow/WorkflowTransitionEdge.js";
+import WorkflowGraph_default from "./pipeline-flow/WorkflowGraph.js";
+import { c } from "react/compiler-runtime";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2 } from "lucide-react";
+var nodeTypes = { stateNode: StateNode_default }, edgeTypes = { workflowTransition: WorkflowTransitionEdge_default }, PipelineFlowViewer_default = (b) => {
+	let x = c(28), { pipelineId: S, workflows: C, pipelineConfig: w } = b, { data: T } = usePipeline(S), E;
+	x[0] === Symbol.for("react.memo_cache_sentinel") ? (E = [], x[0] = E) : E = x[0];
+	let [D, O, k] = useNodesState(E), A;
+	x[1] === Symbol.for("react.memo_cache_sentinel") ? (A = [], x[1] = A) : A = x[1];
+	let [j, M, N] = useEdgesState(A), { fitView: P } = useReactFlow(), F = useRef(!1), I;
+	x[2] === Symbol.for("react.memo_cache_sentinel") ? (I = {}, x[2] = I) : I = x[2];
+	let [L, R] = useState(I), z;
+	x[3] === Symbol.for("react.memo_cache_sentinel") ? (z = /* @__PURE__ */ new Map(), x[3] = z) : z = x[3];
+	let B = useRef(z), V = Object.values(L).some(_temp), H;
+	x[4] === Symbol.for("react.memo_cache_sentinel") ? (H = (e, m) => {
+		R((h) => h[e] === m ? h : {
+			...h,
+			[e]: m
+		});
+	}, x[4] = H) : H = x[4];
+	let U = H, W;
+	x[5] !== M || x[6] !== O || x[7] !== C ? (W = (e, m, h) => {
+		let g = C.findIndex((m) => m.id === e) * 250, _ = m.map((e) => ({
+			...e,
+			position: {
+				...e.position,
+				y: e.position.y + g
+			}
+		}));
+		B.current.set(e, {
+			nodes: _,
+			edges: h
+		});
+		let v = [], y = [];
+		B.current.forEach((e) => {
+			let { nodes: m, edges: h } = e;
+			v.push(...m), y.push(...h);
+		}), O(v), M(y);
+	}, x[5] = M, x[6] = O, x[7] = C, x[8] = W) : W = x[8];
+	let G = W, K, q;
+	if (x[9] !== P || x[10] !== V || x[11] !== D.length ? (K = () => {
+		if (!V && D.length > 0 && !F.current) {
+			F.current = !0;
+			let e = setTimeout(() => {
+				P({ padding: .2 });
+			}, 150);
+			return () => clearTimeout(e);
+		}
+	}, q = [
+		V,
+		D.length,
+		P
+	], x[9] = P, x[10] = V, x[11] = D.length, x[12] = K, x[13] = q) : (K = x[12], q = x[13]), useEffect(K, q), V && D.length === 0) {
+		let e;
+		return x[14] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "flex h-full items-center justify-center",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-8 w-8 animate-spin" })
+		}), x[14] = e) : e = x[14], e;
+	}
+	let J;
+	x[15] !== G || x[16] !== T || x[17] !== w || x[18] !== C ? (J = T && C.map((e) => /* @__PURE__ */ jsx(WorkflowGraph_default, {
+		pipeline: T,
+		workflow: e,
+		pipelineConfig: w,
+		onGraphReady: G,
+		onLoadingChange: U
+	}, e.id)), x[15] = G, x[16] = T, x[17] = w, x[18] = C, x[19] = J) : J = x[19];
+	let Y;
+	x[20] !== j || x[21] !== D || x[22] !== N || x[23] !== k ? (Y = D.length === 0 ? /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground flex h-full items-center justify-center",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "font-medium",
+			children: "No workflow transitions available"
+		})
+	}) : /* @__PURE__ */ jsxs(index, {
+		nodes: D,
+		edges: j,
+		onNodesChange: k,
+		onEdgesChange: N,
+		nodeTypes,
+		edgeTypes,
+		fitView: !0,
+		minZoom: .1,
+		maxZoom: 2,
+		proOptions: { hideAttribution: !0 },
+		className: "bg-background",
+		children: [/* @__PURE__ */ jsx(Background, {
+			variant: BackgroundVariant.Cross,
+			gap: 24,
+			size: 1,
+			className: "opacity-[0.15]"
+		}), /* @__PURE__ */ jsx(Controls, { className: "bg-card border-border rounded-lg border shadow-md" })]
+	}), x[20] = j, x[21] = D, x[22] = N, x[23] = k, x[24] = Y) : Y = x[24];
+	let X;
+	return x[25] !== Y || x[26] !== J ? (X = /* @__PURE__ */ jsxs("div", {
+		className: "h-full w-full",
+		children: [J, Y]
+	}), x[25] = Y, x[26] = J, x[27] = X) : X = x[27], X;
+};
+function _temp(e) {
+	return e;
+}
+export { PipelineFlowViewer_default as default };

package/dist/features/debug/components/pipeline-flow/StateNode.js

@@ -0,0 +1,111 @@
+import { cn } from "../../../../lib/utils.js";
+import { Badge } from "../../../../components/ui/badge.js";
+import { Position } from "../../../../node_modules/@xyflow/system/dist/esm/index.js";
+import { Handle } from "../../../../node_modules/@xyflow/react/dist/esm/index.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HIDDEN_HANDLE = "!bg-muted-foreground/30 !h-3 !w-1 !rounded-sm opacity-0", HIDDEN_HANDLE_WIDE = "!bg-muted-foreground/30 !h-1 !w-3 !rounded-sm opacity-0";
+function getNodeClassName(e) {
+	return e.isCurrent ? "border-primary shadow-primary/20 bg-primary/5 ring-primary/30 z-10 shadow-lg ring-4" : e.isEnd ? "border-green-500/30 bg-green-500/10" : e.isStart ? "border-blue-500/30 bg-blue-500/10" : e.isVisited ? "border-border/60 bg-muted/40" : `border-border/40 bg-card/60 ${e.forceVisible ? "opacity-100" : "opacity-80 hover:opacity-100"}`;
+}
+function getLabelClassName(e) {
+	return e.isCurrent ? "text-primary font-semibold" : e.isVisited ? "text-foreground" : "text-muted-foreground";
+}
+function getPositions(e) {
+	let l = e === "LR";
+	return {
+		target: l ? Position.Left : Position.Top,
+		source: l ? Position.Right : Position.Bottom,
+		backEdge: l ? Position.Bottom : Position.Right
+	};
+}
+var StateNode = (l) => {
+	let u = c(29), { data: f } = l, g;
+	u[0] === f.direction ? g = u[1] : (g = getPositions(f.direction), u[0] = f.direction, u[1] = g);
+	let _ = g, v;
+	u[2] === f ? v = u[3] : (v = cn("relative flex min-w-32 flex-col items-center gap-2 rounded-xl border px-5 py-3 shadow-sm transition-all duration-300", getNodeClassName(f)), u[2] = f, u[3] = v);
+	let y;
+	u[4] === f.isCurrent ? y = u[5] : (y = f.isCurrent && /* @__PURE__ */ jsx(CurrentIndicator, {}), u[4] = f.isCurrent, u[5] = y);
+	let b;
+	u[6] === _.target ? b = u[7] : (b = /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		position: _.target,
+		className: HIDDEN_HANDLE
+	}), u[6] = _.target, u[7] = b);
+	let x;
+	u[8] === _.source ? x = u[9] : (x = /* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		position: _.source,
+		className: HIDDEN_HANDLE
+	}), u[8] = _.source, u[9] = x);
+	let S, C;
+	u[10] === _.backEdge ? (S = u[11], C = u[12]) : (S = /* @__PURE__ */ jsx(Handle, {
+		type: "source",
+		id: "bottom-source",
+		position: _.backEdge,
+		className: HIDDEN_HANDLE_WIDE
+	}), C = /* @__PURE__ */ jsx(Handle, {
+		type: "target",
+		id: "bottom-target",
+		position: _.backEdge,
+		className: HIDDEN_HANDLE_WIDE
+	}), u[10] = _.backEdge, u[11] = S, u[12] = C);
+	let w;
+	u[13] === f ? w = u[14] : (w = cn("text-sm font-medium tracking-tight", getLabelClassName(f)), u[13] = f, u[14] = w);
+	let T;
+	u[15] !== f.label || u[16] !== w ? (T = /* @__PURE__ */ jsx("span", {
+		className: w,
+		children: f.label
+	}), u[15] = f.label, u[16] = w, u[17] = T) : T = u[17];
+	let E;
+	u[18] === f ? E = u[19] : (E = /* @__PURE__ */ jsx(StatusBadges, { data: f }), u[18] = f, u[19] = E);
+	let D;
+	return u[20] !== E || u[21] !== v || u[22] !== y || u[23] !== b || u[24] !== x || u[25] !== S || u[26] !== C || u[27] !== T ? (D = /* @__PURE__ */ jsxs("div", {
+		className: v,
+		children: [
+			y,
+			b,
+			x,
+			S,
+			C,
+			T,
+			E
+		]
+	}), u[20] = E, u[21] = v, u[22] = y, u[23] = b, u[24] = x, u[25] = S, u[26] = C, u[27] = T, u[28] = D) : D = u[28], D;
+}, CurrentIndicator = () => {
+	let e = c(1), l;
+	return e[0] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ jsxs("span", {
+		className: "absolute -top-1 -right-1 flex h-3 w-3",
+		children: [/* @__PURE__ */ jsx("span", { className: "bg-primary/50 absolute inline-flex h-full w-full animate-ping rounded-full opacity-75" }), /* @__PURE__ */ jsx("span", { className: "bg-primary relative inline-flex h-3 w-3 rounded-full" })]
+	}), e[0] = l) : l = e[0], l;
+}, StatusBadges = (e) => {
+	let u = c(10), { data: d } = e, f;
+	u[0] === d.visitCount ? f = u[1] : (f = d.visitCount > 1 && /* @__PURE__ */ jsxs(Badge, {
+		variant: "secondary",
+		className: "bg-secondary/50 text-secondary-foreground hover:bg-secondary/70 h-5 px-1.5 text-[10px]",
+		children: [d.visitCount, "x"]
+	}), u[0] = d.visitCount, u[1] = f);
+	let p;
+	u[2] === d.isEnd ? p = u[3] : (p = d.isEnd && /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		className: "h-5 border-green-500/30 bg-green-500/5 px-1.5 text-[10px] text-green-600",
+		children: "End"
+	}), u[2] = d.isEnd, u[3] = p);
+	let m;
+	u[4] === d.isStart ? m = u[5] : (m = d.isStart && /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		className: "h-5 border-blue-500/30 bg-blue-500/5 px-1.5 text-[10px] text-blue-600",
+		children: "Start"
+	}), u[4] = d.isStart, u[5] = m);
+	let h;
+	return u[6] !== f || u[7] !== p || u[8] !== m ? (h = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [
+			f,
+			p,
+			m
+		]
+	}), u[6] = f, u[7] = p, u[8] = m, u[9] = h) : h = u[9], h;
+}, StateNode_default = StateNode;
+export { StateNode_default as default };