@loopstack/loopstack-studio 0.21.0 → 0.21.2

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

@@ -0,0 +1,68 @@
+import { cn } from "../../../lib/utils.js";
+import { c } from "react/compiler-runtime";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle, File, Play } from "lucide-react";
+var NavigationItem_default = (s) => {
+	let l = c(25), { workflow: u, isSelected: d, navigateTo: f } = s, p = u.place === "end", m = !p && (u.progress ?? 0) > 0, h;
+	l[0] !== p || l[1] !== m ? (h = () => p ? /* @__PURE__ */ jsx(CheckCircle, { className: "h-4 w-4 flex-shrink-0 text-green-500" }) : m ? /* @__PURE__ */ jsx(Play, { className: "h-4 w-4 flex-shrink-0 text-blue-500" }) : /* @__PURE__ */ jsx(File, { className: "h-4 w-4 flex-shrink-0 text-gray-500" }), l[0] = p, l[1] = m, l[2] = h) : h = l[2];
+	let g = h, _;
+	l[3] !== p || l[4] !== u.progress ? (_ = () => !p && (u.progress ?? 0) > 0 ? /* @__PURE__ */ jsx("div", {
+		className: "ml-auto",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "relative h-4 w-4",
+			children: /* @__PURE__ */ jsxs("svg", {
+				className: "h-4 w-4 -rotate-90 transform",
+				viewBox: "0 0 32 32",
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "16",
+					cy: "16",
+					r: "12",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					fill: "none",
+					className: "text-gray-300"
+				}), /* @__PURE__ */ jsx("circle", {
+					cx: "16",
+					cy: "16",
+					r: "12",
+					stroke: "currentColor",
+					strokeWidth: "3",
+					fill: "none",
+					strokeDasharray: `${(u.progress ?? 0) * .75} 75`,
+					className: "text-blue-500"
+				})]
+			})
+		})
+	}) : null, l[3] = p, l[4] = u.progress, l[5] = _) : _ = l[5];
+	let v = _, y;
+	l[6] !== f || l[7] !== u.id ? (y = (r) => {
+		r.preventDefault(), r.stopPropagation(), f(u.id);
+	}, l[6] = f, l[7] = u.id, l[8] = y) : y = l[8];
+	let b = y, x;
+	l[9] === d ? x = l[10] : (x = cn("hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-sidebar-ring flex w-full cursor-pointer items-center justify-between rounded-md p-2 text-left text-sm outline-hidden transition-colors focus-visible:ring-2", { "bg-sidebar-accent text-sidebar-accent-foreground font-medium": d }), l[9] = d, l[10] = x);
+	let S;
+	l[11] === g ? S = l[12] : (S = g(), l[11] = g, l[12] = S);
+	let C = u.title ?? u.blockName, w;
+	l[13] === C ? w = l[14] : (w = /* @__PURE__ */ jsx("span", {
+		className: "truncate text-sm",
+		children: C
+	}), l[13] = C, l[14] = w);
+	let T;
+	l[15] !== S || l[16] !== w ? (T = /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 items-center gap-2",
+		children: [S, w]
+	}), l[15] = S, l[16] = w, l[17] = T) : T = l[17];
+	let E;
+	l[18] === v ? E = l[19] : (E = v(), l[18] = v, l[19] = E);
+	let D;
+	return l[20] !== b || l[21] !== x || l[22] !== T || l[23] !== E ? (D = /* @__PURE__ */ jsx("div", {
+		className: "relative",
+		children: /* @__PURE__ */ jsxs("button", {
+			onClick: b,
+			className: x,
+			children: [T, E]
+		})
+	}), l[20] = b, l[21] = x, l[22] = T, l[23] = E, l[24] = D) : D = l[24], D;
+};
+export { NavigationItem_default as default };

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

@@ -0,0 +1,56 @@
+import { useFetchWorkflowsByPipeline } from "../../../hooks/useWorkflows.js";
+import WorkflowHistoryItem_default from "./WorkflowHistoryItem.js";
+import { c } from "react/compiler-runtime";
+import React, { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Clock, Loader2 } from "lucide-react";
+var PipelineHistoryList_default = (s) => {
+	let l = c(10), { pipeline: u } = s, d = useFetchWorkflowsByPipeline(u?.id ?? ""), f;
+	l[0] === d.data ? f = l[1] : (f = d.data ?? [], l[0] = d.data, l[1] = f);
+	let p = f;
+	if (!u) {
+		let e;
+		return l[2] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex items-center justify-center py-8 text-sm",
+			children: "No pipeline selected"
+		}), l[2] = e) : e = l[2], e;
+	}
+	if (d.isLoading) {
+		let e;
+		return l[3] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-8",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-5 w-5 animate-spin" })
+		}), l[3] = e) : e = l[3], e;
+	}
+	if (d.error) {
+		let e;
+		return l[4] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+			className: "text-destructive px-2 py-4 text-sm",
+			children: "Failed to load history"
+		}), l[4] = e) : e = l[4], e;
+	}
+	if (p.length === 0) {
+		let e;
+		return l[5] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex flex-col items-center justify-center gap-2 py-8",
+			children: [/* @__PURE__ */ jsx(Clock, { className: "h-6 w-6" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm",
+				children: "No workflow history"
+			})]
+		}), l[5] = e) : e = l[5], e;
+	}
+	let m;
+	l[6] === p ? m = l[7] : (m = p.map(_temp), l[6] = p, l[7] = m);
+	let h;
+	return l[8] === m ? h = l[9] : (h = /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-1 py-2",
+		children: m
+	}), l[8] = m, l[9] = h), h;
+};
+function _temp(e) {
+	return /* @__PURE__ */ jsx(WorkflowHistoryItem_default, {
+		workflowId: e.id,
+		workflow: e
+	}, e.id);
+}
+export { PipelineHistoryList_default as default };

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

@@ -0,0 +1,89 @@
+import { Button } from "../../../components/ui/button.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../../../components/ui/dialog.js";
+import { Label } from "../../../components/ui/label.js";
+import { Switch } from "../../../components/ui/switch.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Settings } from "lucide-react";
+var WorkbenchSettingsModal_default = (p) => {
+	let m = c(24), { settings: h, onSettingsChange: g, open: _, onOpenChange: v } = p, y;
+	m[0] !== g || m[1] !== h ? (y = (e, f) => {
+		g({
+			...h,
+			[e]: f
+		});
+	}, m[0] = g, m[1] = h, m[2] = y) : y = m[2];
+	let b = y, x;
+	m[3] === Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ jsx(DialogTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "text-gray-500 hover:cursor-pointer hover:text-gray-700",
+			children: /* @__PURE__ */ jsx(Settings, { className: "h-5 w-5" })
+		})
+	}), m[3] = x) : x = m[3];
+	let S;
+	m[4] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Workflow Settings" }) }), m[4] = S) : S = m[4];
+	let C;
+	m[5] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsxs("div", {
+		className: "flex-1",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: "debug-mode",
+			className: "text-sm font-medium",
+			children: "Enable Debug Mode"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "Show debug info for each document"
+		})]
+	}), m[5] = C) : C = m[5];
+	let w;
+	m[6] === b ? w = m[7] : (w = (e) => b("enableDebugMode", e), m[6] = b, m[7] = w);
+	let T;
+	m[8] !== h.enableDebugMode || m[9] !== w ? (T = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between space-x-2",
+		children: [C, /* @__PURE__ */ jsx(Switch, {
+			id: "debug-mode",
+			checked: h.enableDebugMode,
+			onCheckedChange: w
+		})]
+	}), m[8] = h.enableDebugMode, m[9] = w, m[10] = T) : T = m[10];
+	let E;
+	m[11] === Symbol.for("react.memo_cache_sentinel") ? (E = /* @__PURE__ */ jsxs("div", {
+		className: "flex-1",
+		children: [/* @__PURE__ */ jsx(Label, {
+			htmlFor: "message-history",
+			className: "text-sm font-medium",
+			children: "Full Message History"
+		}), /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "Show all internal messages and prompts"
+		})]
+	}), m[11] = E) : E = m[11];
+	let D;
+	m[12] === b ? D = m[13] : (D = (e) => b("showFullMessageHistory", e), m[12] = b, m[13] = D);
+	let O;
+	m[14] !== h.showFullMessageHistory || m[15] !== D ? (O = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between space-x-2",
+		children: [E, /* @__PURE__ */ jsx(Switch, {
+			id: "message-history",
+			checked: h.showFullMessageHistory,
+			onCheckedChange: D
+		})]
+	}), m[14] = h.showFullMessageHistory, m[15] = D, m[16] = O) : O = m[16];
+	let k;
+	m[17] !== T || m[18] !== O ? (k = /* @__PURE__ */ jsxs(DialogContent, {
+		className: "sm:max-w-md",
+		children: [S, /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-4 p-4",
+			children: [T, O]
+		})]
+	}), m[17] = T, m[18] = O, m[19] = k) : k = m[19];
+	let A;
+	return m[20] !== v || m[21] !== _ || m[22] !== k ? (A = /* @__PURE__ */ jsxs(Dialog, {
+		open: _,
+		onOpenChange: v,
+		children: [x, k]
+	}), m[20] = v, m[21] = _, m[22] = k, m[23] = A) : A = m[23], A;
+};
+export { WorkbenchSettingsModal_default as default };

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

@@ -0,0 +1,109 @@
+import { useStudio } from "../../../providers/StudioProvider.js";
+import { Button } from "../../../components/ui/button.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarTrigger, useSidebar } from "../../../components/ui/sidebar.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../components/ui/tabs.js";
+import { CodeExplorer } from "../../code-explorer/CodeExplorer.js";
+import WorkbenchNavigation_default from "../WorkbenchNavigation.js";
+import PipelineHistoryList_default from "./PipelineHistoryList.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Code, GitGraph } from "lucide-react";
+var WorkbenchSidebar_default = (O) => {
+	let k = c(30), { namespaceTree: A, pipeline: j, workspaceConfig: M } = O, { router: N } = useStudio(), { open: P } = useSidebar(), F = M?.features, I = F?.sidebar?.enabled ?? !0, L = F?.debugWorkflow?.enabled ?? !0, R = F?.fileExplorer?.enabled ?? !1, z = F?.workflowNavigation?.enabled ?? !0, B = F?.workflowHistory?.enabled ?? !0;
+	if (!I) return null;
+	let V;
+	k[0] !== R || k[1] !== B || k[2] !== z ? (V = () => R ? "codeExplorer" : z ? "pipelineNavigation" : B ? "pipelineHistory" : "codeExplorer", k[0] = R, k[1] = B, k[2] = z, k[3] = V) : V = k[3];
+	let H = V, U;
+	k[4] !== R || k[5] !== B || k[6] !== z ? (U = [
+		R,
+		z,
+		B
+	].filter(Boolean), k[4] = R, k[5] = B, k[6] = z, k[7] = U) : U = k[7];
+	let W = U.length, G;
+	k[8] === Symbol.for("react.memo_cache_sentinel") ? (G = /* @__PURE__ */ jsx(SidebarTrigger, { className: "flex h-8 w-8 items-center justify-center hover:cursor-pointer" }), k[8] = G) : G = k[8];
+	let K;
+	k[9] !== L || k[10] !== j || k[11] !== N ? (K = j && L && /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-8 w-8",
+			onClick: () => void N.navigateToPipelineDebug(j.id),
+			children: /* @__PURE__ */ jsx(GitGraph, { className: "text-muted-foreground h-4 w-4" })
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: /* @__PURE__ */ jsx("p", { children: "Debug Pipeline Flow" })
+	})] }) }), k[9] = L, k[10] = j, k[11] = N, k[12] = K) : K = k[12];
+	let q;
+	k[13] === K ? q = k[14] : (q = /* @__PURE__ */ jsx(SidebarHeader, {
+		className: "border-sidebar-border w-full flex-row items-center justify-between border-b p-2",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [G, K]
+		})
+	}), k[13] = K, k[14] = q);
+	let J;
+	k[15] !== W || k[16] !== R || k[17] !== H || k[18] !== A || k[19] !== P || k[20] !== j || k[21] !== B || k[22] !== z ? (J = P && /* @__PURE__ */ jsxs(Tabs, {
+		defaultValue: H(),
+		className: "flex h-full w-full flex-col",
+		children: [
+			W > 1 && /* @__PURE__ */ jsxs(TabsList, {
+				className: "w-full shrink-0",
+				children: [
+					R && /* @__PURE__ */ jsxs(TabsTrigger, {
+						value: "codeExplorer",
+						className: "flex items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5" }), "Files"]
+					}),
+					z && /* @__PURE__ */ jsx(TabsTrigger, {
+						value: "pipelineNavigation",
+						children: "Navigation"
+					}),
+					B && /* @__PURE__ */ jsx(TabsTrigger, {
+						value: "pipelineHistory",
+						children: "History"
+					})
+				]
+			}),
+			R && /* @__PURE__ */ jsx(TabsContent, {
+				value: "codeExplorer",
+				className: "mt-2 flex min-h-0 flex-1 flex-col overflow-hidden",
+				children: /* @__PURE__ */ jsx(CodeExplorer, {})
+			}),
+			z && /* @__PURE__ */ jsxs(TabsContent, {
+				value: "pipelineNavigation",
+				className: "mt-2",
+				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Pipeline Navigation" }), /* @__PURE__ */ jsx(SidebarMenu, { children: j && A.length ? /* @__PURE__ */ jsx(WorkbenchNavigation_default, {
+					namespaceTree: A,
+					indent: 0
+				}) : null })]
+			}),
+			B && /* @__PURE__ */ jsxs(TabsContent, {
+				value: "pipelineHistory",
+				className: "mt-2",
+				children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Run History" }), /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(PipelineHistoryList_default, { pipeline: j }) })]
+			})
+		]
+	}), k[15] = W, k[16] = R, k[17] = H, k[18] = A, k[19] = P, k[20] = j, k[21] = B, k[22] = z, k[23] = J) : J = k[23];
+	let Y;
+	k[24] === J ? Y = k[25] : (Y = /* @__PURE__ */ jsx(SidebarContent, { children: /* @__PURE__ */ jsx(SidebarGroup, {
+		className: "flex h-full flex-col",
+		children: J
+	}) }), k[24] = J, k[25] = Y);
+	let X;
+	k[26] === Symbol.for("react.memo_cache_sentinel") ? (X = /* @__PURE__ */ jsx(SidebarFooter, {}), k[26] = X) : X = k[26];
+	let Z;
+	return k[27] !== q || k[28] !== Y ? (Z = /* @__PURE__ */ jsxs(Sidebar, {
+		side: "right",
+		collapsible: "icon",
+		className: "workbench-sidebar z-31",
+		children: [
+			q,
+			Y,
+			X
+		]
+	}), k[27] = q, k[28] = Y, k[29] = Z) : Z = k[29], Z;
+};
+export { WorkbenchSidebar_default as default };

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

@@ -0,0 +1,22 @@
+import UiActions_default from "../../../components/ui-widgets/UiActions.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { WorkflowState } from "@loopstack/api-client";
+import { jsx } from "react/jsx-runtime";
+var WorkflowForms_default = (a) => {
+	let o = c(7), { workflow: s, onSubmit: l } = a, u = s.ui?.actions;
+	if (!u?.length) return null;
+	let d;
+	o[0] === s.availableTransitions ? d = o[1] : (d = s.availableTransitions?.map(_temp) ?? [], o[0] = s.availableTransitions, o[1] = d);
+	let f = d, p = u, m = s.status === WorkflowState.Completed, h;
+	return o[2] !== f || o[3] !== l || o[4] !== p || o[5] !== m ? (h = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(UiActions_default, {
+		actions: p,
+		availableTransitions: f,
+		disabled: m,
+		onSubmit: l
+	}) }), o[2] = f, o[3] = l, o[4] = p, o[5] = m, o[6] = h) : h = o[6], h;
+};
+function _temp(e) {
+	return e.id;
+}
+export { WorkflowForms_default as default };

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

@@ -0,0 +1,144 @@
+import { useWorkflow } from "../../../hooks/useWorkflows.js";
+import { cn } from "../../../lib/utils.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { SidebarMenuButton, SidebarMenuItem, SidebarMenuSub } from "../../../components/ui/sidebar.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight, Clock, Loader2, Play, Wrench } from "lucide-react";
+import { format } from "date-fns";
+var WorkflowHistoryItem_default = (x) => {
+	let S = c(19), { workflowId: C, workflow: w } = x, T = useWorkflow(C), E = T.data?.history;
+	if (T.isLoading) {
+		let e;
+		return S[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			className: "opacity-50",
+			children: [/* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }), /* @__PURE__ */ jsx("span", {
+				className: "text-sm",
+				children: "Loading..."
+			})]
+		}) }), S[0] = e) : e = S[0], e;
+	}
+	if (!E?.length) return null;
+	let D;
+	S[1] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Play, { className: "text-primary h-3.5 w-3.5 fill-current" }), S[1] = D) : D = S[1];
+	let O = w.title ?? w.blockName, k;
+	S[2] === O ? k = S[3] : (k = /* @__PURE__ */ jsx("span", {
+		className: "truncate text-sm",
+		children: O
+	}), S[2] = O, S[3] = k);
+	let A;
+	S[4] === Symbol.for("react.memo_cache_sentinel") ? (A = /* @__PURE__ */ jsx(ChevronRight, { className: "text-muted-foreground ml-auto h-3.5 w-3.5 transition-transform group-data-[state=open]/collapsible:rotate-90" }), S[4] = A) : A = S[4];
+	let j;
+	S[5] === k ? j = S[6] : (j = /* @__PURE__ */ jsx(CollapsibleTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			className: "group/trigger font-medium",
+			children: [
+				D,
+				k,
+				A
+			]
+		})
+	}), S[5] = k, S[6] = j);
+	let M;
+	S[7] === Symbol.for("react.memo_cache_sentinel") ? (M = /* @__PURE__ */ jsx("div", { className: "from-primary/60 via-primary/30 to-muted/20 absolute top-7 bottom-3 left-1.75 w-0.5 rounded-full bg-linear-to-b" }), S[7] = M) : M = S[7];
+	let N;
+	S[8] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx("div", {
+		className: "relative z-10 flex shrink-0 items-center justify-center",
+		children: /* @__PURE__ */ jsx("div", { className: "border-primary/60 bg-primary/20 flex h-4 w-4 items-center justify-center rounded-full border-2" })
+	}), S[8] = N) : N = S[8];
+	let P;
+	S[9] === Symbol.for("react.memo_cache_sentinel") ? (P = /* @__PURE__ */ jsxs("div", {
+		className: "group/entry relative flex gap-3 py-1 pl-0",
+		children: [N, /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 flex-1 items-center gap-1.5",
+			children: /* @__PURE__ */ jsx("span", {
+				className: "bg-muted text-foreground w-fit truncate rounded px-1.5 py-0.5 font-mono text-xs font-medium",
+				children: "start"
+			})
+		})]
+	}), S[9] = P) : P = S[9];
+	let F;
+	if (S[10] !== E) {
+		let e;
+		S[12] === E.length ? e = S[13] : (e = (e, h) => {
+			console.log(e);
+			let g = e.data?.transition, _ = Object.keys(e.data?.tools ?? {}), v = h === E.length - 1, y = e.data?.place ?? g?.to ?? "unknown", b = g?.id;
+			return /* @__PURE__ */ jsxs("div", {
+				className: "group/entry relative flex gap-3 py-1 pl-0",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "relative z-10 flex shrink-0 items-center justify-center",
+					children: /* @__PURE__ */ jsx("div", {
+						className: cn("flex h-4 w-4 items-center justify-center rounded-full border-2 transition-all", v ? "border-primary bg-primary shadow-primary/40 shadow-sm" : "border-muted-foreground/30 bg-background"),
+						children: v && /* @__PURE__ */ jsx("div", { className: "bg-primary-foreground h-1.5 w-1.5 animate-pulse rounded-full" })
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex min-w-0 flex-1 flex-col gap-0.5",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline gap-1.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("w-fit truncate rounded px-1.5 py-0.5 font-mono text-xs font-medium", v ? "bg-primary/15 text-primary" : "bg-muted/60 text-muted-foreground"),
+							children: y
+						}), b && /* @__PURE__ */ jsxs("span", {
+							className: "text-muted-foreground truncate text-[10px] italic",
+							children: [
+								"(via ",
+								b,
+								")"
+							]
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "text-muted-foreground flex items-center gap-2 text-[10px]",
+						children: [_.length > 0 && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+							asChild: !0,
+							children: /* @__PURE__ */ jsxs("div", {
+								className: "flex cursor-default items-center gap-0.5",
+								children: [/* @__PURE__ */ jsx(Wrench, { className: "h-3 w-3" }), /* @__PURE__ */ jsx("span", {
+									className: "tabular-nums",
+									children: _.length
+								})]
+							})
+						}), /* @__PURE__ */ jsxs(TooltipContent, {
+							side: "right",
+							className: "max-w-48",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-xs font-medium",
+								children: "Tools used:"
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-muted-foreground text-[11px]",
+								children: _.join(", ")
+							})]
+						})] }), /* @__PURE__ */ jsxs("div", {
+							className: "flex items-center gap-0.5",
+							children: [/* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }), /* @__PURE__ */ jsx("span", {
+								className: "tabular-nums",
+								children: format(new Date(e.timestamp), "HH:mm:ss")
+							})]
+						})]
+					})]
+				})]
+			}, e.version);
+		}, S[12] = E.length, S[13] = e), F = E.map(e), S[10] = E, S[11] = F;
+	} else F = S[11];
+	let I;
+	S[14] === F ? I = S[15] : (I = /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(SidebarMenuSub, {
+		className: "ml-2 border-none pl-0",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative py-2",
+			children: [
+				M,
+				P,
+				F
+			]
+		})
+	}) }), S[14] = F, S[15] = I);
+	let L;
+	return S[16] !== I || S[17] !== j ? (L = /* @__PURE__ */ jsx(Collapsible, {
+		defaultOpen: !0,
+		className: "group/collapsible",
+		children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [j, I] })
+	}), S[16] = I, S[17] = j, S[18] = L) : L = S[18], L;
+};
+export { WorkflowHistoryItem_default as default };

package/dist/features/workbench/components/buttons/WorkflowButtons.js

@@ -0,0 +1,85 @@
+import { useStudio } from "../../../../providers/StudioProvider.js";
+import { useDeleteWorkflow } from "../../../../hooks/useWorkflows.js";
+import { Button } from "../../../../components/ui/button.js";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "../../../../components/ui/alert-dialog.js";
+import { useRunPipeline } from "../../../../hooks/useProcessor.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { LockOpen, Trash2 } from "lucide-react";
+var WorkflowButtons_default = (b) => {
+	let x = c(33), { pipeline: S, workflow: C } = b, { router: w } = useStudio(), T = useDeleteWorkflow(), E = useRunPipeline(), D;
+	x[0] !== S.id || x[1] !== E ? (D = () => {
+		E.mutate({
+			pipelineId: S.id,
+			runPipelinePayloadDto: {},
+			force: !1
+		});
+	}, x[0] = S.id, x[1] = E, x[2] = D) : D = x[2];
+	let O = D, k;
+	x[3] !== S.id || x[4] !== E || x[5] !== C.id ? (k = () => {
+		E.mutate({
+			pipelineId: S.id,
+			runPipelinePayloadDto: { transition: {
+				name: "unlock",
+				workflowId: C.id
+			} },
+			force: !1
+		});
+	}, x[3] = S.id, x[4] = E, x[5] = C.id, x[6] = k) : k = x[6];
+	let A = k, j;
+	x[7] !== T || x[8] !== O || x[9] !== S.id || x[10] !== w || x[11] !== C ? (j = () => {
+		try {
+			T.mutate(C), O(), w.navigateToPipeline(S.id);
+		} catch (e) {
+			let y = e;
+			console.error("Mutation failed:", y);
+		}
+	}, x[7] = T, x[8] = O, x[9] = S.id, x[10] = w, x[11] = C, x[12] = j) : j = x[12];
+	let M = j, N;
+	x[13] === T.isPending ? N = x[14] : (N = T.isPending ? /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }), x[13] = T.isPending, x[14] = N);
+	let P;
+	x[15] !== T.isPending || x[16] !== N ? (P = /* @__PURE__ */ jsx(AlertDialogTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: T.isPending,
+			children: [N, "Delete and Repeat Workflow"]
+		})
+	}), x[15] = T.isPending, x[16] = N, x[17] = P) : P = x[17];
+	let F;
+	x[18] === Symbol.for("react.memo_cache_sentinel") ? (F = /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Are you sure?" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "This action cannot be undone. This will permanently delete the workflow." })] }), x[18] = F) : F = x[18];
+	let I;
+	x[19] === Symbol.for("react.memo_cache_sentinel") ? (I = /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), x[19] = I) : I = x[19];
+	let L;
+	x[20] === M ? L = x[21] : (L = /* @__PURE__ */ jsxs(AlertDialogContent, { children: [F, /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [I, /* @__PURE__ */ jsx(AlertDialogAction, {
+		className: "bg-destructive hover:bg-destructive/90 text-white",
+		onClick: M,
+		children: "Delete"
+	})] })] }), x[20] = M, x[21] = L);
+	let R;
+	x[22] !== P || x[23] !== L ? (R = /* @__PURE__ */ jsxs(AlertDialog, { children: [P, L] }), x[22] = P, x[23] = L, x[24] = R) : R = x[24];
+	let z;
+	x[25] !== A || x[26] !== E.isPending || x[27] !== C.availableTransitions || x[28] !== C.place ? (z = C.place === "end" && C.availableTransitions?.find(_temp) && /* @__PURE__ */ jsxs(AlertDialog, { children: [/* @__PURE__ */ jsx(AlertDialogTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: "sm",
+			disabled: E.isPending,
+			children: [E.isPending ? /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" }) : /* @__PURE__ */ jsx(LockOpen, { className: "h-4 w-4" }), "Unlock Step"]
+		})
+	}), /* @__PURE__ */ jsxs(AlertDialogContent, { children: [/* @__PURE__ */ jsxs(AlertDialogHeader, { children: [/* @__PURE__ */ jsx(AlertDialogTitle, { children: "Unlock workflow" }), /* @__PURE__ */ jsx(AlertDialogDescription, { children: "Are you sure you want to unlock this workflow?" })] }), /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [/* @__PURE__ */ jsx(AlertDialogCancel, { children: "Cancel" }), /* @__PURE__ */ jsx(AlertDialogAction, {
+		onClick: A,
+		children: "Unlock"
+	})] })] })] }), x[25] = A, x[26] = E.isPending, x[27] = C.availableTransitions, x[28] = C.place, x[29] = z) : z = x[29];
+	let B;
+	return x[30] !== z || x[31] !== R ? (B = /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", {
+		className: "flex",
+		children: [R, z]
+	}) }), x[30] = z, x[31] = R, x[32] = B) : B = x[32], B;
+};
+function _temp(e) {
+	return e.id === "unlock";
+}
+export { WorkflowButtons_default as default };