@loopstack/loopstack-studio 0.35.1 → 0.36.0

package/dist/packages/client/dist/resources/workflows.js

@@ -7,7 +7,8 @@ function createWorkflowsResource(e) {
 		update: (t, n) => e.put(`/api/v1/workflows/${t}`, n),
 		delete: (t) => e.delete(`/api/v1/workflows/id/${t}`),
 		batchDelete: (t) => e.delete("/api/v1/workflows/batch", { ids: t }),
-		checkpoints: (t) => e.get(`/api/v1/workflows/${t}/checkpoints`)
+		checkpoints: (t) => e.get(`/api/v1/workflows/${t}/checkpoints`),
+		toolCalls: (t) => e.get(`/api/v1/workflows/${t}/tool-calls`)
 	};
 }
 export { createWorkflowsResource };

package/dist/packages/client/dist/stream/invalidations.js

@@ -1,9 +1,16 @@
 import { queryKeys } from "../queries/query-keys.js";
 function resolveInvalidations(t, n) {
 	switch (t.type) {
-		case "workflow.created": return t.parentId ? [queryKeys.childWorkflows(n, t.parentId)] : [];
+		case "workflow.created": {
+			let r = [queryKeys.workflows(n)];
+			return t.parentId && r.push(queryKeys.childWorkflows(n, t.parentId)), r;
+		}
 		case "workflow.updated": {
-			let r = [queryKeys.workflow(n, t.id), queryKeys.workflowStatus(n, t.id)];
+			let r = [
+				queryKeys.workflow(n, t.id),
+				queryKeys.workflowStatus(n, t.id),
+				queryKeys.workflows(n)
+			];
 			return t.parentId && r.push(queryKeys.childWorkflows(n, t.parentId)), r;
 		}
 		case "document.created": return [queryKeys.documents(n, t.workflowId)];

package/dist/packages/client/dist/stream/stream.js

@@ -3,6 +3,9 @@ import { ClientMessageSchema } from "../../../contracts/dist/events/client-messa
 import "../../../contracts/dist/events/index.js";
 import { createSseParser } from "./sse-parser.js";
 var INITIAL_RETRY_DELAY_MS = 500;
+function isFatalStreamStatus(e) {
+	return e >= 400 && e < 500 && e !== 408 && e !== 429;
+}
 function matchesWorkflow(e, t) {
 	return !t || e.type === "stream.reset" ? !0 : "workflowId" in e ? e.workflowId === t : !0;
 }
@@ -11,6 +14,8 @@ var LoopstackStream = class {
 	handlers = /* @__PURE__ */ new Map();
 	anyHandlers = /* @__PURE__ */ new Set();
 	statusHandlers = /* @__PURE__ */ new Set();
+	errorHandlers = /* @__PURE__ */ new Set();
+	fatalError;
 	subscriberCount = 0;
 	abortController;
 	watchdog;
@@ -41,27 +46,47 @@ var LoopstackStream = class {
 	onStatus(e) {
 		return this.statusHandlers.add(e), () => this.statusHandlers.delete(e);
 	}
+	onError(e) {
+		return this.errorHandlers.add(e), this.fatalError && e(this.fatalError), () => this.errorHandlers.delete(e);
+	}
+	waitForOpen() {
+		return this.currentStatus === "open" ? Promise.resolve() : this.fatalError ? Promise.reject(this.fatalError) : new Promise((e, t) => {
+			let n = () => {
+				r(), i();
+			}, r = this.onStatus((r) => {
+				r === "open" ? (n(), e()) : (r === "closed" || r === "idle") && (n(), t(/* @__PURE__ */ Error("Event stream closed before it opened.")));
+			}), i = this.onError((e) => {
+				n(), t(e);
+			});
+		});
+	}
 	events(e = {}) {
-		let t = [], n, r = !1, a = this.onAny((r) => {
+		let t = [], n, r = !1, i, o = this.onAny((r) => {
 			"userId" in r && matchesWorkflow(r, e.workflowId) && (t.push(r), n?.());
-		}), o = {
-			[Symbol.asyncIterator]: () => o,
+		}), s = this.onError((e) => {
+			i = e, n?.();
+		}), c = () => {
+			o(), s();
+		}, l = {
+			[Symbol.asyncIterator]: () => l,
 			next: async () => {
-				for (; t.length === 0 && !r;) await new Promise((e) => n = e), n = void 0;
-				return t.length === 0 ? {
-					done: !0,
-					value: void 0
-				} : {
+				for (; t.length === 0 && !r && !i;) await new Promise((e) => n = e), n = void 0;
+				if (t.length > 0) return {
 					done: !1,
 					value: t.shift()
 				};
+				if (c(), i) throw i;
+				return {
+					done: !0,
+					value: void 0
+				};
 			},
-			return: async () => (r = !0, a(), n?.(), {
+			return: async () => (r = !0, c(), n?.(), {
 				done: !0,
 				value: void 0
 			})
 		};
-		return o;
+		return l;
 	}
 	close() {
 		this.closed = !0, this.handlers.clear(), this.anyHandlers.clear(), this.subscriberCount = 0, this.abortController?.abort(), this.clearWatchdog(), this.setStatus("closed");
@@ -83,37 +108,55 @@ var LoopstackStream = class {
 		return this.config.workflowId && e.searchParams.set("workflowId", this.config.workflowId), e;
 	}
 	async runLoop() {
-		this.running = !0;
-		let t = this.config.fetch ?? fetch, i = 0;
+		this.running = !0, this.fatalError = void 0;
+		let t = this.config.fetch ?? fetch, a = 0;
 		for (; !this.closed && this.subscriberCount > 0;) {
 			this.abortController = new AbortController();
-			let { signal: a } = this.abortController;
+			let { signal: o } = this.abortController;
 			try {
 				this.setStatus("connecting");
 				let r = { Accept: "text/event-stream" };
 				this.config.token && (r.Authorization = `Bearer ${this.config.token}`), this.lastEventId !== void 0 && (r["Last-Event-ID"] = this.lastEventId);
-				let o = await t(this.buildUrl(), {
+				let s = await t(this.buildUrl(), {
 					headers: r,
 					credentials: this.config.credentials ?? "include",
-					signal: a
+					signal: o
+				});
+				if (!s.ok) {
+					let t = new LoopstackApiError(s.status, void 0, `Event stream failed with status ${s.status}`);
+					if (isFatalStreamStatus(s.status)) {
+						this.failFatally(t);
+						break;
+					}
+					throw t;
+				}
+				if (!s.body) throw new LoopstackApiError(s.status, void 0, "Event stream response had no body");
+				this.setStatus("open");
+				let c = a > 0;
+				a = 0, this.resetWatchdog(), c && this.lastEventId === void 0 && this.dispatchMessage({
+					type: "stream.reset",
+					userId: null,
+					workerId: ""
 				});
-				if (!o.ok || !o.body) throw new LoopstackApiError(o.status, void 0, `Event stream failed with status ${o.status}`);
-				this.setStatus("open"), i = 0, this.resetWatchdog();
-				let s = createSseParser((e) => {
+				let l = createSseParser((e) => {
 					this.resetWatchdog(), e.id !== void 0 && e.id !== "" && (this.lastEventId = e.id), e.event !== "ping" && e.data && this.dispatch(e.data);
-				}), c = o.body.getReader(), l = new TextDecoder();
+				}), u = s.body.getReader(), d = new TextDecoder();
 				for (;;) {
-					let { done: e, value: t } = await c.read();
+					let { done: e, value: t } = await u.read();
 					if (e) break;
-					s.feed(l.decode(t, { stream: !0 }));
+					l.feed(d.decode(t, { stream: !0 }));
 				}
 			} catch {}
 			if (this.clearWatchdog(), this.currentStatus === "open" && this.setStatus("connecting"), this.closed || this.subscriberCount === 0) break;
-			i++;
-			let o = Math.min(this.config.maxRetryDelayMs ?? 1e4, INITIAL_RETRY_DELAY_MS * 2 ** (i - 1)) * (.8 + Math.random() * .4);
-			await new Promise((e) => setTimeout(e, o));
+			a++;
+			let s = Math.min(this.config.maxRetryDelayMs ?? 1e4, INITIAL_RETRY_DELAY_MS * 2 ** (a - 1)) * (.8 + Math.random() * .4);
+			await new Promise((e) => setTimeout(e, s));
 		}
-		this.running = !1, this.setStatus(this.closed ? "closed" : "idle");
+		this.running = !1, this.setStatus(this.closed || this.fatalError ? "closed" : "idle");
+	}
+	failFatally(e) {
+		this.fatalError = e, this.clearWatchdog();
+		for (let t of this.errorHandlers) t(e);
 	}
 	dispatch(e) {
 		let n;
@@ -124,9 +167,7 @@ var LoopstackStream = class {
 		}
 		let r = ClientMessageSchema.safeParse(n);
 		if (r.success) {
-			let e = r.data;
-			for (let t of this.handlers.get(e.type) ?? []) t(e);
-			for (let t of this.anyHandlers) t(e);
+			this.dispatchMessage(r.data);
 			return;
 		}
 		let i = n && typeof n == "object" && "type" in n && typeof n.type == "string" ? n.type : "unknown";
@@ -135,6 +176,10 @@ var LoopstackStream = class {
 			raw: n
 		});
 	}
+	dispatchMessage(e) {
+		for (let t of this.handlers.get(e.type) ?? []) t(e);
+		for (let t of this.anyHandlers) t(e);
+	}
 	resetWatchdog() {
 		this.clearWatchdog(), this.watchdog = setTimeout(() => {
 			this.abortController?.abort();

package/dist/packages/contracts/dist/park-view/index.js

@@ -0,0 +1,2 @@
+import "./park-view.types.js";
+import { DISPLAY_WIDGETS, declaredTransitions, evaluateWorkflowPrompts, isAnswerableState, isAnswered, isDocumentActive, isDocumentVisible, pickPrompt, resolveSubmitTransition, toParkView, widgetState } from "./park-view.rules.js";

package/dist/packages/contracts/dist/park-view/park-view.rules.js

@@ -0,0 +1,102 @@
+import { WorkflowState } from "../enums/workflow-state.enum.js";
+const DISPLAY_WIDGETS = new Set([
+	"message",
+	"llm-message",
+	"ai-message",
+	"markdown",
+	"plain",
+	"error",
+	"link",
+	"debug"
+]);
+function declaredTransitions(e) {
+	let n = [], r = e.options?.transition;
+	typeof r == "string" && n.push(r);
+	let i = e.options?.actions;
+	if (Array.isArray(i)) for (let e of i) typeof e.transition == "string" && n.push(e.transition);
+	return n;
+}
+function resolveSubmitTransition(e, n) {
+	let i = declaredTransitions(e);
+	return i.length > 0 ? i.find((e) => n.includes(e)) : n.length === 1 ? n[0] : void 0;
+}
+function widgetState(e, n, r, a = !0) {
+	return e.showWhen && !e.showWhen.includes(n ?? "") ? "hidden" : e.enabledWhen && !e.enabledWhen.includes(n ?? "") || !a || resolveSubmitTransition(e, r) === void 0 ? "disabled" : "active";
+}
+function isDocumentVisible(e, n, r) {
+	return !(n.internal || e.tags?.includes("internal") || n.hideAtPlaces?.includes(r ?? ""));
+}
+function isDocumentActive(e, n, r) {
+	return e.place === r || !!n.enableAtPlaces?.includes(r ?? "");
+}
+function isAnswered(e) {
+	return e?.answer !== void 0;
+}
+function isAnswerableState(n, r) {
+	return r.length === 0 ? !1 : n === WorkflowState.Waiting || n === WorkflowState.Paused || n === WorkflowState.Failed;
+}
+function evaluateWorkflowPrompts(e, l, u, d = []) {
+	if (!isAnswerableState(e.status, e.availableTransitions)) return [];
+	let f = [], p = e.availableTransitions;
+	for (let c of l) {
+		let l = u.get(c.documentName);
+		l && (DISPLAY_WIDGETS.has(l.widget) || isDocumentVisible(c, l, e.place) && isDocumentActive(c, l, e.place) && (isAnswered(c.content) || f.push({
+			kind: "document",
+			workflow: e,
+			document: c,
+			widget: l,
+			state: widgetState(l, e.place, p),
+			submitTransition: resolveSubmitTransition(l, p),
+			submitDeclared: declaredTransitions(l).length > 0
+		})));
+	}
+	for (let n of d) {
+		let o = widgetState(n, e.place, p);
+		o !== "hidden" && f.push({
+			kind: "workflow",
+			workflow: e,
+			widget: n,
+			state: o,
+			submitTransition: resolveSubmitTransition(n, p),
+			submitDeclared: declaredTransitions(n).length > 0
+		});
+	}
+	return f.push({
+		kind: "bare",
+		workflow: e,
+		state: "active",
+		...p.length === 1 && { submitTransition: p[0] }
+	}), f;
+}
+function pickPrompt(e, n = () => !0) {
+	let r = {};
+	for (let i of e) {
+		if (i.kind === "bare") {
+			r.fallback ??= i;
+			continue;
+		}
+		if (i.state === "active") {
+			if (n(i)) return r.prompt = i, r;
+			i.submitDeclared && (r.blocked ??= i);
+		}
+	}
+	return r;
+}
+function toParkView(e) {
+	let { workflow: n, document: r, widget: i } = e, a = n.availableTransitions, o, s = i?.options?.actions;
+	return Array.isArray(s) && (o = s.filter((e) => typeof e.transition != "string" || a.includes(e.transition)).map((e) => typeof e.label == "string" ? e.label : String(e.transition ?? "")).filter((e) => e.length > 0)), {
+		workflowId: n.id,
+		workflowName: n.workflowName,
+		place: n.place,
+		status: n.status,
+		...i && { widget: i.widget },
+		...r && { documentName: r.documentName },
+		...r?.content && { content: r.content },
+		...i?.schema && { schema: i.schema },
+		...i?.options && { options: i.options },
+		transitions: a,
+		...e.submitTransition && { defaultTransition: e.submitTransition },
+		...o?.length && { actions: o }
+	};
+}
+export { DISPLAY_WIDGETS, declaredTransitions, evaluateWorkflowPrompts, isAnswerableState, isAnswered, isDocumentActive, isDocumentVisible, pickPrompt, resolveSubmitTransition, toParkView, widgetState };

package/dist/packages/contracts/dist/park-view/park-view.types.js

@@ -0,0 +1,15 @@
+import { z } from "zod";
+z.object({
+	workflowId: z.string(),
+	workflowName: z.string(),
+	place: z.string().nullable(),
+	status: z.string(),
+	widget: z.string().optional(),
+	documentName: z.string().optional(),
+	content: z.record(z.string(), z.unknown()).optional(),
+	schema: z.record(z.string(), z.unknown()).optional(),
+	options: z.record(z.string(), z.unknown()).optional(),
+	transitions: z.array(z.string()),
+	defaultTransition: z.string().optional(),
+	actions: z.array(z.string()).optional()
+});

package/dist/pages/PreviewWorkbenchPage.js

@@ -9,10 +9,10 @@ import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
 import { ReactFlowProvider } from "../node_modules/@xyflow/react/dist/esm/index.js";
 import WorkflowFlowViewer_default from "../features/debug/components/WorkflowFlowViewer.js";
 import "../features/debug/index.js";
+import config_default from "../config.js";
 import WorkflowItem_default from "../features/workbench/WorkflowItem.js";
 import WorkflowHistoryList_default from "../features/workbench/components/WorkflowHistoryList.js";
 import { NewRunDialog } from "../features/workbench/components/NewRunDialog.js";
-import config_default from "../config.js";
 import "../features/workbench/index.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -46,27 +46,27 @@ function PreviewWorkbenchPage() {
 	}), e[3] = t, e[4] = o), o;
 }
 function PreviewWorkbenchContent(n) {
-	let i = c(49), { workflowId: m, onNewRunSuccess: h } = n, _ = useRef(null), [y, b] = useState("output"), [x, S] = useState(!1), w = useWorkflow(m), T = useRef(!1), O = useWorkflowConfigByName(w.data?.workflowName), A, j;
-	i[0] !== w.data || i[1] !== m ? (A = () => {
+	let i = c(49), { workflowId: d, onNewRunSuccess: h } = n, _ = useRef(null), [y, b] = useState("output"), [x, S] = useState(!1), w = useWorkflow(d), T = useRef(!1), O = useWorkflowConfigByName(w.data?.workflowName), A, j;
+	i[0] !== w.data || i[1] !== d ? (A = () => {
 		!w.data || T.current || w.data.status === WorkflowState.Completed && window.parent !== window && (T.current = !0, window.parent.postMessage({
 			type: EMBED_MESSAGE_TYPE,
-			workflowId: m
+			workflowId: d
 		}, window.location.origin));
-	}, j = [w.data, m], i[0] = w.data, i[1] = m, i[2] = A, i[3] = j) : (A = i[2], j = i[3]), useEffect(A, j);
+	}, j = [w.data, d], i[0] = w.data, i[1] = d, i[2] = A, i[3] = j) : (A = i[2], j = i[3]), useEffect(A, j);
 	let M, N;
-	i[4] === m ? (M = i[5], N = i[6]) : (M = () => {
+	i[4] === d ? (M = i[5], N = i[6]) : (M = () => {
 		if (window.parent === window || !_.current) return;
 		let e = new ResizeObserver(() => {
 			if (!_.current) return;
 			let e = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
 			window.parent.postMessage({
 				type: EMBED_RESIZE_MESSAGE_TYPE,
-				workflowId: m,
+				workflowId: d,
 				height: e
 			}, window.location.origin);
 		});
 		return e.observe(_.current), () => e.disconnect();
-	}, N = [m], i[4] = m, i[5] = M, i[6] = N), useEffect(M, N);
+	}, N = [d], i[4] = d, i[5] = M, i[6] = N), useEffect(M, N);
 	let P;
 	i[7] === h ? P = i[8] : (P = (e) => {
 		S(!1), h(e);
@@ -143,12 +143,12 @@ function PreviewWorkbenchContent(n) {
 		})
 	}), i[21] = y, i[22] = w.data, i[23] = w.isLoading, i[24] = q) : q = i[24];
 	let J;
-	i[25] !== y || i[26] !== w.data || i[27] !== w.isLoading || i[28] !== O || i[29] !== m ? (J = y === "graph" && /* @__PURE__ */ jsx("div", {
+	i[25] !== y || i[26] !== w.data || i[27] !== w.isLoading || i[28] !== O || i[29] !== d ? (J = y === "graph" && /* @__PURE__ */ jsx("div", {
 		className: "h-full",
 		children: /* @__PURE__ */ jsx(LoadingCentered_default, {
 			loading: w.isLoading,
 			children: w.data ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowFlowViewer_default, {
-				workflowId: m,
+				workflowId: d,
 				workflows: [w.data],
 				workflowConfig: O.data,
 				direction: "TB"
@@ -160,7 +160,7 @@ function PreviewWorkbenchContent(n) {
 				})
 			})
 		})
-	}), i[25] = y, i[26] = w.data, i[27] = w.isLoading, i[28] = O, i[29] = m, i[30] = J) : J = i[30];
+	}), i[25] = y, i[26] = w.data, i[27] = w.isLoading, i[28] = O, i[29] = d, i[30] = J) : J = i[30];
 	let Y;
 	i[31] !== y || i[32] !== w.data ? (Y = y === "run-log" && /* @__PURE__ */ jsx("div", {
 		className: "px-4",
@@ -206,9 +206,9 @@ var STATUS_DOT_COLORS = {
 	pending: "bg-muted-foreground"
 };
 function PreviewEmptyState(e) {
-	let t = c(24), { newRunDialogOpen: r, onNewRunDialogOpenChange: o, onNewRunSuccess: s } = e, l = useNavigate(), { router: u } = useStudio(), [d, f] = useState(3), m;
-	t[0] === Symbol.for("react.memo_cache_sentinel") ? (m = { parentId: null }, t[0] = m) : m = t[0];
-	let h = useFilterWorkflows(void 0, m, "createdAt", "DESC", 0, d), g;
+	let t = c(24), { newRunDialogOpen: r, onNewRunDialogOpenChange: o, onNewRunSuccess: s } = e, l = useNavigate(), { router: u } = useStudio(), [d, f] = useState(3), p;
+	t[0] === Symbol.for("react.memo_cache_sentinel") ? (p = { parentId: null }, t[0] = p) : p = t[0];
+	let h = useFilterWorkflows(void 0, p, "createdAt", "DESC", 0, d), g;
 	t[1] === h.data?.data ? g = t[2] : (g = h.data?.data ?? [], t[1] = h.data?.data, t[2] = g);
 	let _ = g, se = h.data?.total ?? 0, y = _.length < se, x;
 	t[3] === o ? x = t[4] : (x = () => o(!0), t[3] = o, t[4] = x);
@@ -358,19 +358,19 @@ function EmbedLogsContent() {
 		className: "text-xs font-medium text-muted-foreground",
 		children: "Application Logs"
 	}), e[6] = u) : u = e[6];
-	let d;
-	e[7] === i ? d = e[8] : (d = () => void i.refetch(), e[7] = i, e[8] = d);
-	let f = `text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors hover:cursor-pointer ${i.isFetching ? "animate-spin" : ""}`, p;
-	e[9] === Symbol.for("react.memo_cache_sentinel") ? (p = /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), e[9] = p) : p = e[9];
+	let f;
+	e[7] === i ? f = e[8] : (f = () => void i.refetch(), e[7] = i, e[8] = f);
+	let p = `text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors hover:cursor-pointer ${i.isFetching ? "animate-spin" : ""}`, m;
+	e[9] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" }), e[9] = m) : m = e[9];
 	let h;
-	e[10] !== d || e[11] !== f ? (h = /* @__PURE__ */ jsxs("div", {
+	e[10] !== f || e[11] !== p ? (h = /* @__PURE__ */ jsxs("div", {
 		className: "flex h-9 shrink-0 items-center justify-between border-b bg-muted/30 px-3",
 		children: [u, /* @__PURE__ */ jsx("button", {
-			onClick: d,
-			className: f,
-			children: p
+			onClick: f,
+			className: p,
+			children: m
 		})]
-	}), e[10] = d, e[11] = f, e[12] = h) : h = e[12];
+	}), e[10] = f, e[11] = p, e[12] = h) : h = e[12];
 	let _;
 	e[13] !== l || e[14] !== i.data || e[15] !== i.error || e[16] !== i.isLoading ? (_ = /* @__PURE__ */ jsx("div", {
 		className: "flex-1 overflow-auto bg-background",

package/dist/providers/StudioPreferencesProvider.js

@@ -4,7 +4,8 @@ import { jsx } from "react/jsx-runtime";
 var STORAGE_KEY = "loopstack:studio-preferences", DEFAULTS = {
 	leftSidebarOpen: !1,
 	activePanel: null,
-	panelSizes: {}
+	panelSizes: {},
+	workbenchView: "classic"
 }, StudioPreferencesContext = createContext(null);
 function readFromStorage() {
 	try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopstack/loopstack-studio",
-  "version": "0.35.1",
+  "version": "0.36.0",
   "repository": "loopstack-ai/loopstack-studio",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,9 +26,9 @@
   "dependencies": {
     "@fontsource/roboto": "^5.2.10",
     "@hookform/resolvers": "^5.2.2",
-    "@loopstack/client": "^0.37.1",
-    "@loopstack/contracts": "^0.37.0",
-    "@loopstack/react": "^1.0.1",
+    "@loopstack/client": "^0.38.0",
+    "@loopstack/contracts": "^0.38.0",
+    "@loopstack/react": "^2.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",