@loopstack/loopstack-studio 0.24.0 → 0.25.0

package/dist/api/config.js

@@ -1,9 +1,9 @@
 function createConfigApi(e) {
 	return {
 		getWorkspaceTypes: () => e.get("/api/v1/config/workspaces").then((e) => e.data),
-		getPipelineTypesByWorkspace: (t) => e.get(`/api/v1/config/workspaces/${encodeURIComponent(t.workspaceBlockName)}/pipelines`).then((e) => e.data),
-		getPipelineConfigByName: (t) => e.get(`/api/v1/config/workspaces/${encodeURIComponent(t.workspaceBlockName)}/pipelines/${encodeURIComponent(t.pipelineName)}`).then((e) => e.data),
-		getPipelineSourceByName: (t) => e.get(`/api/v1/config/workspaces/${encodeURIComponent(t.workspaceBlockName)}/pipelines/${encodeURIComponent(t.pipelineName)}/source`).then((e) => e.data),
+		getWorkflowTypesByWorkspace: (t) => e.get(`/api/v1/config/workspaces/${encodeURIComponent(t.workspaceBlockName)}/workflows`).then((e) => e.data),
+		getWorkflowConfig: (t) => e.get(`/api/v1/config/workflows/${encodeURIComponent(t.alias)}`).then((e) => e.data),
+		getWorkflowSource: (t) => e.get(`/api/v1/config/workflows/${encodeURIComponent(t.alias)}/source`).then((e) => e.data),
 		getAvailableEnvironments: () => e.get("/api/v1/config/environments").then((e) => e.data)
 	};
 }

package/dist/api/index.js

@@ -2,25 +2,21 @@ import { createAuthApi } from "./auth.js";
 import { createConfigApi } from "./config.js";
 import { createDashboardApi } from "./dashboard.js";
 import { createDocumentsApi } from "./documents.js";
-import { createNamespacesApi } from "./namespaces.js";
-import { createPipelinesApi } from "./pipelines.js";
 import { createProcessorApi } from "./processor.js";
 import { createSecretsApi } from "./secrets.js";
 import { createWorkflowsApi } from "./workflows.js";
 import { createWorkspacesApi } from "./workspaces.js";
 import { createAxiosClient } from "./client.js";
-function createApi(d) {
+function createApi(l) {
 	return {
-		auth: createAuthApi(d),
-		config: createConfigApi(d),
-		dashboard: createDashboardApi(d),
-		documents: createDocumentsApi(d),
-		namespaces: createNamespacesApi(d),
-		pipelines: createPipelinesApi(d),
-		processor: createProcessorApi(d),
-		secrets: createSecretsApi(d),
-		workflows: createWorkflowsApi(d),
-		workspaces: createWorkspacesApi(d)
+		auth: createAuthApi(l),
+		config: createConfigApi(l),
+		dashboard: createDashboardApi(l),
+		documents: createDocumentsApi(l),
+		processor: createProcessorApi(l),
+		secrets: createSecretsApi(l),
+		workflows: createWorkflowsApi(l),
+		workspaces: createWorkspacesApi(l)
 	};
 }
 export { createApi };

package/dist/api/processor.js

@@ -1,4 +1,4 @@
 function createProcessorApi(e) {
-	return { runPipeline: (t) => e.post(`/api/v1/processor/run/${t.pipelineId}`, t.runPipelinePayloadDto, t.force === void 0 ? void 0 : { params: { force: t.force } }).then((e) => e.data) };
+	return { runWorkflow: (t) => e.post(`/api/v1/processor/run/${t.workflowId}`, t.runWorkflowPayloadDto, t.force === void 0 ? void 0 : { params: { force: t.force } }).then((e) => e.data) };
 }
 export { createProcessorApi };

package/dist/api/workflows.js

@@ -2,7 +2,13 @@ function createWorkflowsApi(e) {
 	return {
 		getById: (t) => e.get(`/api/v1/workflows/${t.id}`).then((e) => e.data),
 		getAll: (t) => e.get("/api/v1/workflows", { params: t }).then((e) => e.data),
-		delete: (t) => e.delete(`/api/v1/workflows/${t.id}`).then((e) => e.data)
+		create: (t) => e.post("/api/v1/workflows", t.workflowCreateDto).then((e) => e.data),
+		update: (t) => e.put(`/api/v1/workflows/${t.id}`, t.workflowUpdateDto).then((e) => e.data),
+		delete: (t) => e.delete(`/api/v1/workflows/id/${t.id}`).then((e) => e.data),
+		batchDelete: (t) => e.delete("/api/v1/workflows/batch", { data: { ids: t.ids } }).then((e) => e.data),
+		getFileTree: (t) => e.get(`/api/v1/files/workflows/${t.workflowId}`).then((e) => e.data),
+		getFileContent: (t) => e.get(`/api/v1/files/workflows/${t.workflowId}/${t.filePath}`).then((e) => e.data),
+		getCheckpoints: (t) => e.get(`/api/v1/workflows/${t.id}/checkpoints`).then((e) => e.data)
 	};
 }
 export { createWorkflowsApi };

package/dist/components/dynamic-form/CodeContent.js

@@ -148,10 +148,10 @@ var adaptedPrism = {
 			});
 		},
 		code(e) {
-			let { className: a, children: s, ...l } = e, u = /language-(\w+)/.exec(a ?? ""), d = Array.isArray(s) ? s.map(_temp).join("") : typeof s == "string" ? s : "";
-			return u ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Prism, {
+			let { className: a, children: s, ...l } = e, u = /language-(\w+)/.exec(a ?? ""), d = Array.isArray(s) ? s.map(_temp).join("") : typeof s == "string" ? s : "", f = d.includes("\n");
+			return u || f ? /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(Prism, {
 				style: adaptedPrism,
-				language: u[1],
+				language: u?.[1] ?? "text",
 				PreTag: "div",
 				...l,
 				children: d.replace(/\n$/, "")

package/dist/components/dynamic-form/fields/CodeViewField.js

@@ -6,58 +6,58 @@ import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Check, Copy } from "lucide-react";
 import { Controller } from "react-hook-form";
-var stripCodeFence = (e) => {
-	let u = e.match(/^```[\w-]*\n?([\s\S]*?)\n?```$/);
-	return u ? u[1] : e;
-};
-const CodeViewField = (f) => {
-	let p = c(11), { name: m, schema: h, ui: g, required: _, form: v, disabled: y } = f, [b, x] = React.useState(!1), S = useFieldConfig(m, h, g, y), C;
-	p[0] === Symbol.for("react.memo_cache_sentinel") ? (C = async (e) => {
+var codeFenceRegex = /^```[\w-]*\n?([\s\S]*?)\n?```$/, stripCodeFence = (e) => {
+	let d = e.match(codeFenceRegex);
+	return d ? d[1] : e;
+}, ensureCodeFenced = (e) => !e || codeFenceRegex.test(e.trim()) ? e : "```\n" + e + "\n```";
+const CodeViewField = (p) => {
+	let m = c(11), { name: h, schema: g, ui: _, required: v, form: y, disabled: b } = p, [x, S] = React.useState(!1), C = useFieldConfig(h, g, _, b), w;
+	m[0] === Symbol.for("react.memo_cache_sentinel") ? (w = async (e) => {
 		try {
-			let u = stripCodeFence(e);
-			await navigator.clipboard.writeText(u), x(!0), setTimeout(() => x(!1), 2e3);
+			let d = stripCodeFence(e);
+			await navigator.clipboard.writeText(d), S(!0), setTimeout(() => S(!1), 2e3);
 		} catch (e) {
-			let u = e;
-			console.error("Failed to copy:", u);
+			let d = e;
+			console.error("Failed to copy:", d);
 		}
-	}, p[0] = C) : C = p[0];
-	let w = C, T = S.defaultValue || "", E;
-	p[1] !== S || p[2] !== b || p[3] !== m || p[4] !== _ ? (E = (u) => {
-		let { field: d } = u;
+	}, m[0] = w) : w = m[0];
+	let T = w, E = C.defaultValue || "", D;
+	m[1] !== C || m[2] !== x || m[3] !== h || m[4] !== v ? (D = (d) => {
+		let { field: f } = d;
 		return /* @__PURE__ */ jsx(BaseFieldWrapper, {
-			name: m,
-			label: S.fieldLabel,
-			required: _,
-			error: S.error,
-			helpText: S.helpText,
-			description: S.description,
+			name: h,
+			label: C.fieldLabel,
+			required: v,
+			error: C.error,
+			helpText: C.helpText,
+			description: C.description,
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "relative w-full overflow-hidden rounded-md border",
-				...S.getAriaProps(),
+				...C.getAriaProps(),
 				children: [/* @__PURE__ */ jsx("button", {
 					type: "button",
-					onClick: () => void w(String(d.value ?? "")),
-					disabled: S.isDisabled || !d.value,
+					onClick: () => void T(String(f.value ?? "")),
+					disabled: !f.value,
 					className: "bg-background/80 hover:bg-background absolute top-2 right-2 z-10 rounded-md border p-2 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-					title: b ? "Copied!" : "Copy to clipboard",
-					"aria-label": b ? "Copied to clipboard" : "Copy code to clipboard",
-					children: b ? /* @__PURE__ */ jsx(Check, {
+					title: x ? "Copied!" : "Copy to clipboard",
+					"aria-label": x ? "Copied to clipboard" : "Copy code to clipboard",
+					children: x ? /* @__PURE__ */ jsx(Check, {
 						className: "h-4 w-4 text-green-600",
 						"aria-hidden": "true"
 					}) : /* @__PURE__ */ jsx(Copy, {
 						className: "h-4 w-4",
 						"aria-hidden": "true"
 					})
-				}), /* @__PURE__ */ jsx(CodeContent_default, { content: String(d.value ?? "") })]
+				}), /* @__PURE__ */ jsx(CodeContent_default, { content: ensureCodeFenced(String(f.value ?? "")) })]
 			})
 		});
-	}, p[1] = S, p[2] = b, p[3] = m, p[4] = _, p[5] = E) : E = p[5];
-	let D;
-	return p[6] !== v.control || p[7] !== m || p[8] !== T || p[9] !== E ? (D = /* @__PURE__ */ jsx(Controller, {
-		name: m,
-		control: v.control,
-		defaultValue: T,
-		render: E
-	}), p[6] = v.control, p[7] = m, p[8] = T, p[9] = E, p[10] = D) : D = p[10], D;
+	}, m[1] = C, m[2] = x, m[3] = h, m[4] = v, m[5] = D) : D = m[5];
+	let O;
+	return m[6] !== y.control || m[7] !== h || m[8] !== E || m[9] !== D ? (O = /* @__PURE__ */ jsx(Controller, {
+		name: h,
+		control: y.control,
+		defaultValue: E,
+		render: D
+	}), m[6] = y.control, m[7] = h, m[8] = E, m[9] = D, m[10] = O) : O = m[10], O;
 };
 export { CodeViewField };

package/dist/components/feedback/LoadingCentered.js

@@ -9,7 +9,7 @@ var LoadingCentered_default = (i) => {
 	let p = u === void 0 ? !1 : u, m = d === void 0 ? 24 : d, h = f === void 0 ? null : f;
 	if (p) {
 		let r;
-		o[6] === s ? r = o[7] : (r = cn("flex items-center justify-center", s), o[6] = s, o[7] = r);
+		o[6] === s ? r = o[7] : (r = cn("mt-12 flex items-center justify-center", s), o[6] = s, o[7] = r);
 		let i;
 		o[8] === m ? i = o[9] : (i = /* @__PURE__ */ jsx(Loader2, {
 			className: "animate-spin",

package/dist/components/layout/StudioSidebar.js

@@ -1,5 +1,5 @@
 import { useStudio, useStudioOptional } from "../../providers/StudioProvider.js";
-import { useFilterPipelines } from "../../hooks/usePipelines.js";
+import { useFilterWorkflows } from "../../hooks/useWorkflows.js";
 import { useComponentOverrides } from "../../providers/ComponentOverridesProvider.js";
 import { cn } from "../../lib/utils.js";
 import { Button } from "../ui/button.js";
@@ -94,7 +94,7 @@ var DefaultSidebarHeader = () => {
 		parentId: null,
 		status: "paused"
 	}, l[2] = g) : g = l[2];
-	let b = useFilterPipelines(void 0, g, "createdAt", "DESC", 0, 1).data?.total ?? 0, T;
+	let b = useFilterWorkflows(void 0, g, "createdAt", "DESC", 0, 1).data?.total ?? 0, T;
 	l[3] === Symbol.for("react.memo_cache_sentinel") ? (T = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Runs" }), l[3] = T) : T = l[3];
 	let E = d.pathname === p || d.pathname === p + "/", D, O;
 	l[4] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Play, {}), O = /* @__PURE__ */ jsx("span", { children: "Overview" }), l[4] = D, l[5] = O) : (D = l[4], O = l[5]);

package/dist/components/loopstack-elements/link.js

@@ -1,115 +1,116 @@
 "use client";
 import { useStudio } from "../../providers/StudioProvider.js";
 import { cn } from "../../lib/utils.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
 import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, LinkIcon, icons } from "lucide-react";
-var EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize", PIPELINE_HREF_PATTERN = /^\/pipelines\/([a-zA-Z0-9_-]+)$/, link_default = (m) => {
-	let h = c(53), { className: g, href: _, label: v, caption: y, icon: b, type: x, embed: S, defaultExpanded: C, iconClassName: w } = m, { router: T } = useStudio(), [E, D] = useState(C ?? !1), [O, k] = useState(0), A = b && icons[b] ? icons[b] : LinkIcon, j;
-	h[0] !== _ || h[1] !== v ? (j = v || (() => {
-		if (!_) return "";
+import { ChevronDownIcon, ChevronUpIcon, ExternalLinkIcon, FolderClosedIcon, FolderOpenIcon } from "lucide-react";
+var EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize", statusColorMap = {
+	pending: "text-muted-foreground",
+	success: "text-green-600",
+	failure: "text-red-600"
+}, WORKFLOW_HREF_PATTERN = /^\/workflows\/([a-zA-Z0-9_-]+)$/, link_default = (h) => {
+	let g = c(55), { className: _, href: v, label: y, status: b, embed: x, defaultExpanded: S } = h, C = b === void 0 ? "pending" : b, { router: w } = useStudio(), [T, E] = useState(S ?? !1), [D, O] = useState(0), k;
+	g[0] !== v || g[1] !== y ? (k = y || (() => {
+		if (!v) return "";
 		try {
-			return new URL(_).hostname.replace("www.", "");
+			return new URL(v).hostname.replace("www.", "");
 		} catch {
-			return _;
+			return v;
 		}
-	})(), h[0] = _, h[1] = v, h[2] = j) : j = h[2];
-	let M = j, N = x === "success", P, F;
-	h[3] !== S || h[4] !== _ || h[5] !== T ? (P = _?.match(PIPELINE_HREF_PATTERN)?.[1] ?? null, F = S === !0 && P != null ? T.getEmbedPipeline(P) : null, h[3] = S, h[4] = _, h[5] = T, h[6] = P, h[7] = F) : (P = h[6], F = h[7]);
-	let I = F, L, R;
-	h[8] !== E || h[9] !== P ? (L = () => {
-		if (!P || !E) return;
+	})(), g[0] = v, g[1] = y, g[2] = k) : k = g[2];
+	let A = k, j, M;
+	g[3] !== x || g[4] !== v || g[5] !== w ? (M = v?.match(WORKFLOW_HREF_PATTERN)?.[1] ?? null, j = x === !0 && M != null ? w.getEmbedWorkflow(M) : null, g[3] = x, g[4] = v, g[5] = w, g[6] = j, g[7] = M) : (j = g[6], M = g[7]);
+	let N = j, P, F;
+	g[8] !== T || g[9] !== M ? (P = () => {
+		if (!M || !T) return;
 		let t = (t) => {
 			if (t.origin !== window.location.origin) return;
-			let f = t.data;
-			if (f?.type !== EMBED_RESIZE_MESSAGE_TYPE || f?.pipelineId !== P) return;
-			let p = f?.height;
-			typeof p == "number" && p > 0 && k(p);
+			let p = t.data;
+			if (p?.type !== EMBED_RESIZE_MESSAGE_TYPE || p?.workflowId !== M) return;
+			let m = p?.height;
+			typeof m == "number" && m > 0 && O(m);
 		};
 		return window.addEventListener("message", t), () => window.removeEventListener("message", t);
-	}, R = [P, E], h[8] = E, h[9] = P, h[10] = L, h[11] = R) : (L = h[10], R = h[11]), useEffect(L, R);
-	let z;
-	h[12] === g ? z = h[13] : (z = cn("not-prose flex w-full flex-col rounded-md border bg-background", g), h[12] = g, h[13] = z);
-	let B = N ? "bg-green-50 text-green-600 border-green-200" : "text-muted-foreground bg-muted/50", V;
-	h[14] === B ? V = h[15] : (V = cn("flex size-8 shrink-0 items-center justify-center rounded-md border", B), h[14] = B, h[15] = V);
-	let H;
-	h[16] === w ? H = h[17] : (H = cn("size-4", w), h[16] = w, h[17] = H);
-	let U;
-	h[18] !== A || h[19] !== H ? (U = /* @__PURE__ */ jsx(A, { className: H }), h[18] = A, h[19] = H, h[20] = U) : U = h[20];
+	}, F = [M, T], g[8] = T, g[9] = M, g[10] = P, g[11] = F) : (P = g[10], F = g[11]), useEffect(P, F);
+	let I;
+	g[12] === _ ? I = g[13] : (I = cn("not-prose flex w-full cursor-pointer flex-col", _), g[12] = _, g[13] = I);
+	let L;
+	g[14] === N ? L = g[15] : (L = () => N && E(_temp), g[14] = N, g[15] = L);
+	let R = statusColorMap[C], z;
+	g[16] === R ? z = g[17] : (z = cn("flex shrink-0 items-center", R), g[16] = R, g[17] = z);
+	let B;
+	g[18] === T ? B = g[19] : (B = jsx(T ? FolderOpenIcon : FolderClosedIcon, { className: "size-4" }), g[18] = T, g[19] = B);
+	let V;
+	g[20] !== B || g[21] !== z ? (V = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx("span", {
+			className: z,
+			children: B
+		})
+	}), g[20] = B, g[21] = z, g[22] = V) : V = g[22];
+	let H = T ? "Collapse" : "Expand", U;
+	g[23] === H ? U = g[24] : (U = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		children: H
+	}), g[23] = H, g[24] = U);
 	let W;
-	h[21] !== V || h[22] !== U ? (W = /* @__PURE__ */ jsx("div", {
-		className: V,
-		children: U
-	}), h[21] = V, h[22] = U, h[23] = W) : W = h[23];
-	let G;
-	h[24] === M ? G = h[25] : (G = /* @__PURE__ */ jsx("span", {
-		className: "truncate text-sm font-medium",
-		children: M
-	}), h[24] = M, h[25] = G);
-	let K;
-	h[26] !== y || h[27] !== _ ? (K = y ? /* @__PURE__ */ jsx("span", {
-		className: "text-muted-foreground truncate text-xs",
-		children: y
-	}) : _ && /* @__PURE__ */ jsx("a", {
-		href: _,
-		target: "_blank",
-		rel: "noopener noreferrer",
-		className: "text-muted-foreground truncate text-xs hover:underline",
-		children: _
-	}), h[26] = y, h[27] = _, h[28] = K) : K = h[28];
+	g[25] !== V || g[26] !== U ? (W = /* @__PURE__ */ jsxs(Tooltip, { children: [V, U] }), g[25] = V, g[26] = U, g[27] = W) : W = g[27];
+	let G = T ? "font-medium" : "text-muted-foreground", K;
+	g[28] === G ? K = g[29] : (K = cn("min-w-0 flex-1 truncate text-sm", G), g[28] = G, g[29] = K);
 	let q;
-	h[29] !== G || h[30] !== K ? (q = /* @__PURE__ */ jsxs("div", {
-		className: "flex min-w-0 flex-1 flex-col",
-		children: [G, K]
-	}), h[29] = G, h[30] = K, h[31] = q) : q = h[31];
+	g[30] !== A || g[31] !== K ? (q = /* @__PURE__ */ jsx("span", {
+		className: K,
+		children: A
+	}), g[30] = A, g[31] = K, g[32] = q) : q = g[32];
 	let J;
-	h[32] !== I || h[33] !== E ? (J = I && /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick: () => D(_temp),
-		className: "text-muted-foreground hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors hover:bg-muted/50",
-		children: jsx(E ? ChevronUpIcon : ChevronDownIcon, { className: "size-4" })
-	}), h[32] = I, h[33] = E, h[34] = J) : J = h[34];
-	let Y;
-	h[35] === _ ? Y = h[36] : (Y = _ && /* @__PURE__ */ jsx("a", {
-		href: _,
+	g[33] === v ? J = g[34] : (J = v && /* @__PURE__ */ jsx("a", {
+		href: v,
 		target: "_blank",
 		rel: "noopener noreferrer",
-		className: "text-muted-foreground hover:text-foreground flex size-7 items-center justify-center rounded-md transition-colors hover:bg-muted/50",
-		children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-4" })
-	}), h[35] = _, h[36] = Y);
+		onClick: _temp2,
+		className: "text-muted-foreground hover:text-foreground flex items-center justify-center transition-colors",
+		children: /* @__PURE__ */ jsx(ExternalLinkIcon, { className: "size-3.5" })
+	}), g[33] = v, g[34] = J);
+	let Y;
+	g[35] !== N || g[36] !== T ? (Y = N && jsx(T ? ChevronUpIcon : ChevronDownIcon, { className: "text-muted-foreground size-3.5" }), g[35] = N, g[36] = T, g[37] = Y) : Y = g[37];
 	let X;
-	h[37] !== J || h[38] !== Y ? (X = /* @__PURE__ */ jsxs("div", {
+	g[38] !== J || g[39] !== Y ? (X = /* @__PURE__ */ jsxs("div", {
 		className: "flex shrink-0 items-center gap-1",
 		children: [J, Y]
-	}), h[37] = J, h[38] = Y, h[39] = X) : X = h[39];
+	}), g[38] = J, g[39] = Y, g[40] = X) : X = g[40];
 	let Z;
-	h[40] !== W || h[41] !== q || h[42] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
-		className: "flex w-full items-center gap-3 p-3",
+	g[41] !== W || g[42] !== q || g[43] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
+		className: "flex w-full items-center gap-1.5 py-1",
 		children: [
 			W,
 			q,
 			X
 		]
-	}), h[40] = W, h[41] = q, h[42] = X, h[43] = Z) : Z = h[43];
+	}), g[41] = W, g[42] = q, g[43] = X, g[44] = Z) : Z = g[44];
 	let Q;
-	h[44] !== M || h[45] !== I || h[46] !== E || h[47] !== O ? (Q = E && I && /* @__PURE__ */ jsx("div", {
-		className: "border-t",
+	g[45] !== A || g[46] !== N || g[47] !== T || g[48] !== D ? (Q = T && N && /* @__PURE__ */ jsx("div", {
+		className: "mt-2 border-t",
 		children: /* @__PURE__ */ jsx("iframe", {
-			src: I,
+			src: N,
 			className: "w-full overflow-hidden border-0",
-			style: { height: `${O}px` },
+			style: { height: `${D}px` },
 			scrolling: "no",
-			title: M
+			title: A
 		})
-	}), h[44] = M, h[45] = I, h[46] = E, h[47] = O, h[48] = Q) : Q = h[48];
+	}), g[45] = A, g[46] = N, g[47] = T, g[48] = D, g[49] = Q) : Q = g[49];
 	let $;
-	return h[49] !== Z || h[50] !== Q || h[51] !== z ? ($ = /* @__PURE__ */ jsxs("div", {
-		className: z,
+	return g[50] !== Z || g[51] !== Q || g[52] !== I || g[53] !== L ? ($ = /* @__PURE__ */ jsxs("div", {
+		className: I,
+		onClick: L,
 		children: [Z, Q]
-	}), h[49] = Z, h[50] = Q, h[51] = z, h[52] = $) : $ = h[52], $;
+	}), g[50] = Z, g[51] = Q, g[52] = I, g[53] = L, g[54] = $) : $ = g[54], $;
 };
 function _temp(t) {
 	return !t;
 }
+function _temp2(t) {
+	return t.stopPropagation();
+}
 export { link_default as default };

package/dist/components/loopstack-elements/tool.js

@@ -0,0 +1,171 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { CodeBlock } from "../ai-elements/code-block.js";
+import { c } from "react/compiler-runtime";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircleIcon, ChevronDownIcon, CircleIcon, ClockIcon, XCircleIcon } from "lucide-react";
+const Tool = (a) => {
+	let o = c(8), s, l;
+	o[0] === a ? (s = o[1], l = o[2]) : ({className: s, ...l} = a, o[0] = a, o[1] = s, o[2] = l);
+	let u;
+	o[3] === s ? u = o[4] : (u = cn("not-prose mt-3 w-full", s), o[3] = s, o[4] = u);
+	let d;
+	return o[5] !== l || o[6] !== u ? (d = /* @__PURE__ */ jsx(Collapsible, {
+		className: u,
+		...l
+	}), o[5] = l, o[6] = u, o[7] = d) : d = o[7], d;
+};
+var statusConfig = {
+	"input-streaming": {
+		label: "Pending",
+		icon: /* @__PURE__ */ jsx(CircleIcon, { className: "size-4" })
+	},
+	"input-available": {
+		label: "Running",
+		icon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 animate-pulse" })
+	},
+	"approval-requested": {
+		label: "Awaiting Approval",
+		icon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-4 text-yellow-600" })
+	},
+	"approval-responded": {
+		label: "Responded",
+		icon: /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-blue-600" })
+	},
+	"output-available": {
+		label: "Completed",
+		icon: /* @__PURE__ */ jsx(CheckCircleIcon, { className: "size-4 text-green-600" })
+	},
+	"output-error": {
+		label: "Error",
+		icon: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-red-600" })
+	},
+	"output-denied": {
+		label: "Denied",
+		icon: /* @__PURE__ */ jsx(XCircleIcon, { className: "size-4 text-orange-600" })
+	}
+};
+const ToolHeader = (i) => {
+	let a = c(28), d, f, p, h, g;
+	a[0] === i ? (d = a[1], f = a[2], p = a[3], h = a[4], g = a[5]) : ({className: d, title: h, type: g, state: p, ...f} = i, a[0] = i, a[1] = d, a[2] = f, a[3] = p, a[4] = h, a[5] = g);
+	let _;
+	a[6] === d ? _ = a[7] : (_ = cn("flex w-full items-center justify-between gap-3 py-1", d), a[6] = d, a[7] = _);
+	let v = statusConfig[p], b;
+	a[8] === v.icon ? b = a[9] : (b = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground flex shrink-0 items-center",
+			children: v.icon
+		})
+	}), a[8] = v.icon, a[9] = b);
+	let x = statusConfig[p], S;
+	a[10] === x.label ? S = a[11] : (S = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "top",
+		children: x.label
+	}), a[10] = x.label, a[11] = S);
+	let C;
+	a[12] !== b || a[13] !== S ? (C = /* @__PURE__ */ jsxs(Tooltip, { children: [b, S] }), a[12] = b, a[13] = S, a[14] = C) : C = a[14];
+	let w;
+	a[15] !== h || a[16] !== g ? (w = h ?? g.split("-").slice(1).join("-"), a[15] = h, a[16] = g, a[17] = w) : w = a[17];
+	let T;
+	a[18] === w ? T = a[19] : (T = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground text-sm",
+		children: w
+	}), a[18] = w, a[19] = T);
+	let E;
+	a[20] !== C || a[21] !== T ? (E = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [C, T]
+	}), a[20] = C, a[21] = T, a[22] = E) : E = a[22];
+	let D;
+	a[23] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground size-4 transition-transform group-data-[state=open]:rotate-180" }), a[23] = D) : D = a[23];
+	let O;
+	return a[24] !== f || a[25] !== _ || a[26] !== E ? (O = /* @__PURE__ */ jsxs(CollapsibleTrigger, {
+		className: _,
+		...f,
+		children: [E, D]
+	}), a[24] = f, a[25] = _, a[26] = E, a[27] = O) : O = a[27], O;
+}, ToolContent = (i) => {
+	let o = c(8), s, l;
+	o[0] === i ? (s = o[1], l = o[2]) : ({className: s, ...l} = i, o[0] = i, o[1] = s, o[2] = l);
+	let u;
+	o[3] === s ? u = o[4] : (u = cn("data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground data-[state=closed]:animate-out data-[state=open]:animate-in outline-none", s), o[3] = s, o[4] = u);
+	let d;
+	return o[5] !== l || o[6] !== u ? (d = /* @__PURE__ */ jsx(CollapsibleContent, {
+		className: u,
+		...l
+	}), o[5] = l, o[6] = u, o[7] = d) : d = o[7], d;
+}, ToolInput = (i) => {
+	let a = c(15), o, s, l;
+	a[0] === i ? (o = a[1], s = a[2], l = a[3]) : ({className: o, input: s, ...l} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = l);
+	let u;
+	a[4] === o ? u = a[5] : (u = cn("space-y-2 overflow-hidden py-2", o), a[4] = o, a[5] = u);
+	let f;
+	a[6] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx("h4", {
+		className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
+		children: "Parameters"
+	}), a[6] = f) : f = a[6];
+	let p;
+	a[7] === s ? p = a[8] : (p = JSON.stringify(s, null, 2), a[7] = s, a[8] = p);
+	let m;
+	a[9] === p ? m = a[10] : (m = /* @__PURE__ */ jsx("div", {
+		className: "bg-muted/50 rounded-md",
+		children: /* @__PURE__ */ jsx(CodeBlock, {
+			code: p,
+			language: "json"
+		})
+	}), a[9] = p, a[10] = m);
+	let h;
+	return a[11] !== l || a[12] !== u || a[13] !== m ? (h = /* @__PURE__ */ jsxs("div", {
+		className: u,
+		...l,
+		children: [f, m]
+	}), a[11] = l, a[12] = u, a[13] = m, a[14] = h) : h = a[14], h;
+}, ToolOutput = (i) => {
+	let a = c(30), o, s, l, u;
+	if (a[0] === i ? (o = a[1], s = a[2], l = a[3], u = a[4]) : ({className: o, output: l, errorText: s, ...u} = i, a[0] = i, a[1] = o, a[2] = s, a[3] = l, a[4] = u), !(l || s)) return null;
+	let p = l, m;
+	a[5] === p ? m = a[6] : (m = /* @__PURE__ */ jsx("div", { children: p }), a[5] = p, a[6] = m);
+	let h = m;
+	if (typeof l == "object" && !isValidElement(l)) {
+		let e;
+		a[7] === l ? e = a[8] : (e = JSON.stringify(l, null, 2), a[7] = l, a[8] = e);
+		let i;
+		a[9] === e ? i = a[10] : (i = /* @__PURE__ */ jsx(CodeBlock, {
+			code: e,
+			language: "json"
+		}), a[9] = e, a[10] = i), h = i;
+	} else if (typeof l == "string") {
+		let e;
+		a[11] === l ? e = a[12] : (e = /* @__PURE__ */ jsx(CodeBlock, {
+			code: l,
+			language: "json"
+		}), a[11] = l, a[12] = e), h = e;
+	}
+	let g;
+	a[13] === o ? g = a[14] : (g = cn("space-y-2 py-2", o), a[13] = o, a[14] = g);
+	let _ = s ? "Error" : "Result", v;
+	a[15] === _ ? v = a[16] : (v = /* @__PURE__ */ jsx("h4", {
+		className: "text-muted-foreground text-xs font-medium tracking-wide uppercase",
+		children: _
+	}), a[15] = _, a[16] = v);
+	let y = s ? "bg-destructive/10 text-destructive" : "bg-muted/50 text-foreground", b;
+	a[17] === y ? b = a[18] : (b = cn("overflow-x-auto rounded-md text-xs [&_table]:w-full", y), a[17] = y, a[18] = b);
+	let x;
+	a[19] === s ? x = a[20] : (x = s && /* @__PURE__ */ jsx("div", { children: s }), a[19] = s, a[20] = x);
+	let S;
+	a[21] !== h || a[22] !== b || a[23] !== x ? (S = /* @__PURE__ */ jsxs("div", {
+		className: b,
+		children: [x, h]
+	}), a[21] = h, a[22] = b, a[23] = x, a[24] = S) : S = a[24];
+	let C;
+	return a[25] !== u || a[26] !== g || a[27] !== v || a[28] !== S ? (C = /* @__PURE__ */ jsxs("div", {
+		className: g,
+		...u,
+		children: [v, S]
+	}), a[25] = u, a[26] = g, a[27] = v, a[28] = S, a[29] = C) : C = a[29], C;
+};
+export { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput };

package/dist/components/ui-widgets/UiActions.js

@@ -7,17 +7,23 @@ var UiActions_default = (i) => {
 	if (a[0] !== o || a[1] !== s || a[2] !== l || a[3] !== u || a[4] !== f || a[5] !== d) {
 		let r;
 		a[7] !== s || a[8] !== l || a[9] !== u || a[10] !== f || a[11] !== d ? (r = (r, i) => {
-			let { enabledWhen: a } = r, o = r.options?.transition;
+			let { enabledWhen: a } = r, o = r.options?.transition, p = u || a !== void 0 && (!l || !a.includes(l)) || o !== void 0 && !s.includes(o);
 			return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UiWidget_default, {
 				config: r,
 				onSubmit: (e) => {
-					if (!o) {
-						console.error(`[UiActions] Widget "${r.widget ?? r.type}" has no transition configured.`);
+					if (console.log("[UiActions] handleSubmit called", {
+						transition: o,
+						data: e,
+						isDisabled: p,
+						currentPlace: l,
+						availableTransitions: s
+					}), !o) {
+						console.error(`[UiActions] Widget "${r.widget}" has no transition configured.`);
 						return;
 					}
 					d(o, e);
 				},
-				disabled: u || a !== void 0 && (!l || !a.includes(l)) || o !== void 0 && !s.includes(o),
+				disabled: p,
 				isLoading: f
 			}) }, `ui-widget-${i}-${o ?? r.widget}`);
 		}, a[7] = s, a[8] = l, a[9] = u, a[10] = f, a[11] = d, a[12] = r) : r = a[12], p = o.map(r), a[0] = o, a[1] = s, a[2] = l, a[3] = u, a[4] = f, a[5] = d, a[6] = p;