@loopstack/loopstack-studio 0.35.0 → 0.36.0

package/dist/features/workbench/WorkflowList.js

@@ -1,10 +1,13 @@
 import { useChildWorkflows, useWorkflowConfigByName } from "../../hooks/useWorkflows.js";
+import { useOptionalStudioPreferences } from "../../providers/StudioPreferencesProvider.js";
+import { cn } from "../../lib/utils.js";
 import { Button } from "../../components/ui/button.js";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../../components/ui/dialog.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../components/ui/tooltip.js";
 import { ReactFlowProvider } from "../../node_modules/@xyflow/react/dist/esm/index.js";
 import WorkflowFlowViewer_default from "../debug/components/WorkflowFlowViewer.js";
 import "../debug/index.js";
+import { RunView } from "../run-view/RunView.js";
 import WorkflowItem_default from "./WorkflowItem.js";
 import WorkbenchSettingsModal_default from "./components/WorkbenchSettingsModal.js";
 import WorkflowHistoryList_default from "./components/WorkflowHistoryList.js";
@@ -13,35 +16,84 @@ import { useWorkflowListState } from "./hooks/useWorkflowListState.js";
 import { c } from "react/compiler-runtime";
 import React, { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon, ListOrdered, Workflow } from "lucide-react";
-var WorkflowList_default = (S) => {
-	let C = c(43), { workflow: w } = S, [T, E] = useState(!1), D;
-	C[0] === Symbol.for("react.memo_cache_sentinel") ? (D = {
+import { ArrowDownIcon, Layers, ListOrdered, ListVideo, Workflow } from "lucide-react";
+var WorkflowList_default = (t) => {
+	let n = c(72), { workflow: r } = t, [i, a] = useState(!1), o;
+	n[0] === Symbol.for("react.memo_cache_sentinel") ? (o = {
 		enableDebugMode: !1,
 		showFullMessageHistory: !1
-	}, C[0] = D) : D = C[0];
-	let [O, k] = useState(D), { listRef: A, scrollTo: j, canScrollDown: M, scrollToBottom: N } = useWorkflowListState(), P = useWorkflowConfigByName(w.workflowName), F = useChildWorkflows(w.id), I;
-	C[1] === F.data ? I = C[2] : (I = F.data ?? [], C[1] = F.data, C[2] = I);
-	let L = I, R;
-	C[3] !== M || C[4] !== N ? (R = M && /* @__PURE__ */ jsx(Button, {
+	}, n[0] = o) : o = n[0];
+	let [s, l] = useState(o), u = useOptionalStudioPreferences(), [ke, d] = useState("classic"), f = u?.preferences.workbenchView ?? ke, p;
+	n[1] === u ? p = n[2] : (p = (e) => u ? u.setPreference("workbenchView", e) : d(e), n[1] = u, n[2] = p);
+	let m = p, { listRef: h, scrollTo: g, canScrollDown: _, scrollToBottom: v } = useWorkflowListState(), y = useWorkflowConfigByName(r.workflowName), b = useChildWorkflows(r.id), x;
+	n[3] === b.data ? x = n[4] : (x = b.data ?? [], n[3] = b.data, n[4] = x);
+	let S = x, C;
+	n[5] !== _ || n[6] !== v ? (C = _ && /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
 		size: "icon",
-		onClick: N,
+		onClick: v,
 		className: "bg-background/80 fixed right-[calc(var(--sidebar-width)+1.5rem)] bottom-6 z-50 rounded-full shadow-md backdrop-blur-sm",
 		children: /* @__PURE__ */ jsx(ArrowDownIcon, { className: "size-4" })
-	}), C[3] = M, C[4] = N, C[5] = R) : R = C[5];
-	let z = P.data?.title ?? w.workflowName, B;
-	C[6] === z ? B = C[7] : (B = /* @__PURE__ */ jsx("span", {
+	}), n[5] = _, n[6] = v, n[7] = C) : C = n[7];
+	let w = y.data?.title ?? r.workflowName, T;
+	n[8] === w ? T = n[9] : (T = /* @__PURE__ */ jsx("span", {
 		className: "flex-1 truncate text-sm",
-		children: z
-	}), C[6] = z, C[7] = B);
+		children: w
+	}), n[8] = w, n[9] = T);
+	let E = f === "classic" && "bg-accent text-accent-foreground", D;
+	n[10] === E ? D = n[11] : (D = cn("h-6 w-6", E), n[10] = E, n[11] = D);
+	let O;
+	n[12] === m ? O = n[13] : (O = () => m("classic"), n[12] = m, n[13] = O);
+	let k;
+	n[14] === Symbol.for("react.memo_cache_sentinel") ? (k = /* @__PURE__ */ jsx(Layers, { className: "h-3.5 w-3.5" }), n[14] = k) : k = n[14];
+	let A;
+	n[15] !== D || n[16] !== O ? (A = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: D,
+			onClick: O,
+			children: k
+		})
+	}), n[15] = D, n[16] = O, n[17] = A) : A = n[17];
+	let j;
+	n[18] === Symbol.for("react.memo_cache_sentinel") ? (j = /* @__PURE__ */ jsx(TooltipContent, { children: "Classic view" }), n[18] = j) : j = n[18];
+	let M;
+	n[19] === A ? M = n[20] : (M = /* @__PURE__ */ jsxs(Tooltip, { children: [A, j] }), n[19] = A, n[20] = M);
+	let N = f === "run" && "bg-accent text-accent-foreground", P;
+	n[21] === N ? P = n[22] : (P = cn("h-6 w-6", N), n[21] = N, n[22] = P);
+	let F;
+	n[23] === m ? F = n[24] : (F = () => m("run"), n[23] = m, n[24] = F);
+	let I;
+	n[25] === Symbol.for("react.memo_cache_sentinel") ? (I = /* @__PURE__ */ jsx(ListVideo, { className: "h-3.5 w-3.5" }), n[25] = I) : I = n[25];
+	let L;
+	n[26] !== P || n[27] !== F ? (L = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: P,
+			onClick: F,
+			children: I
+		})
+	}), n[26] = P, n[27] = F, n[28] = L) : L = n[28];
+	let R;
+	n[29] === Symbol.for("react.memo_cache_sentinel") ? (R = /* @__PURE__ */ jsx(TooltipContent, { children: "Run view" }), n[29] = R) : R = n[29];
+	let z;
+	n[30] === L ? z = n[31] : (z = /* @__PURE__ */ jsxs(Tooltip, { children: [L, R] }), n[30] = L, n[31] = z);
+	let B;
+	n[32] !== M || n[33] !== z ? (B = /* @__PURE__ */ jsxs("div", {
+		className: "border-input mr-1 flex items-center rounded-md border p-0.5",
+		children: [M, z]
+	}), n[32] = M, n[33] = z, n[34] = B) : B = n[34];
 	let V;
-	C[8] === w ? V = C[9] : (V = /* @__PURE__ */ jsx(WorkflowButtons_default, {
-		workflow: w,
-		workflowId: w.id
-	}), C[8] = w, C[9] = V);
+	n[35] === r ? V = n[36] : (V = /* @__PURE__ */ jsx(WorkflowButtons_default, {
+		workflow: r,
+		workflowId: r.id
+	}), n[35] = r, n[36] = V);
 	let H;
-	C[10] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	n[37] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		asChild: !0,
 		children: /* @__PURE__ */ jsx(DialogTrigger, {
 			asChild: !0,
@@ -52,19 +104,19 @@ var WorkflowList_default = (S) => {
 				children: /* @__PURE__ */ jsx(ListOrdered, { className: "h-5 w-5" })
 			})
 		})
-	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Run Log" })] }), C[10] = H) : H = C[10];
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Run Log" })] }), n[37] = H) : H = n[37];
 	let U;
-	C[11] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Run Log" }) }), C[11] = U) : U = C[11];
+	n[38] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Run Log" }) }), n[38] = U) : U = n[38];
 	let W;
-	C[12] === w ? W = C[13] : (W = /* @__PURE__ */ jsxs(Dialog, { children: [H, /* @__PURE__ */ jsxs(DialogContent, {
+	n[39] === r ? W = n[40] : (W = /* @__PURE__ */ jsxs(Dialog, { children: [H, /* @__PURE__ */ jsxs(DialogContent, {
 		className: "sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col",
 		children: [U, /* @__PURE__ */ jsx("div", {
 			className: "flex-1 overflow-auto",
-			children: /* @__PURE__ */ jsx(WorkflowHistoryList_default, { workflow: w })
+			children: /* @__PURE__ */ jsx(WorkflowHistoryList_default, { workflow: r })
 		})]
-	})] }), C[12] = w, C[13] = W);
+	})] }), n[39] = r, n[40] = W);
 	let G;
-	C[14] === Symbol.for("react.memo_cache_sentinel") ? (G = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+	n[41] === Symbol.for("react.memo_cache_sentinel") ? (G = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		asChild: !0,
 		children: /* @__PURE__ */ jsx(DialogTrigger, {
 			asChild: !0,
@@ -75,36 +127,37 @@ var WorkflowList_default = (S) => {
 				children: /* @__PURE__ */ jsx(Workflow, { className: "h-5 w-5" })
 			})
 		})
-	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Graph" })] }), C[14] = G) : G = C[14];
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Graph" })] }), n[41] = G) : G = n[41];
 	let K;
-	C[15] === Symbol.for("react.memo_cache_sentinel") ? (K = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Graph" }) }), C[15] = K) : K = C[15];
+	n[42] === Symbol.for("react.memo_cache_sentinel") ? (K = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Graph" }) }), n[42] = K) : K = n[42];
 	let q;
-	C[16] !== L || C[17] !== w ? (q = [w, ...L], C[16] = L, C[17] = w, C[18] = q) : q = C[18];
+	n[43] !== S || n[44] !== r ? (q = [r, ...S], n[43] = S, n[44] = r, n[45] = q) : q = n[45];
 	let J;
-	C[19] !== P.data || C[20] !== q || C[21] !== w.id ? (J = /* @__PURE__ */ jsxs(Dialog, { children: [G, /* @__PURE__ */ jsxs(DialogContent, {
+	n[46] !== y.data || n[47] !== q || n[48] !== r.id ? (J = /* @__PURE__ */ jsxs(Dialog, { children: [G, /* @__PURE__ */ jsxs(DialogContent, {
 		className: "sm:max-w-4xl h-[70vh] overflow-hidden flex flex-col",
 		children: [K, /* @__PURE__ */ jsx("div", {
 			className: "flex-1 overflow-hidden",
 			children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowFlowViewer_default, {
-				workflowId: w.id,
+				workflowId: r.id,
 				workflows: q,
-				workflowConfig: P.data
+				workflowConfig: y.data
 			}) })
 		})]
-	})] }), C[19] = P.data, C[20] = q, C[21] = w.id, C[22] = J) : J = C[22];
+	})] }), n[46] = y.data, n[47] = q, n[48] = r.id, n[49] = J) : J = n[49];
 	let Y;
-	C[23] !== T || C[24] !== O ? (Y = /* @__PURE__ */ jsx(WorkbenchSettingsModal_default, {
-		settings: O,
-		onSettingsChange: k,
-		open: T,
-		onOpenChange: E
-	}), C[23] = T, C[24] = O, C[25] = Y) : Y = C[25];
+	n[50] !== i || n[51] !== s ? (Y = /* @__PURE__ */ jsx(WorkbenchSettingsModal_default, {
+		settings: s,
+		onSettingsChange: l,
+		open: i,
+		onOpenChange: a
+	}), n[50] = i, n[51] = s, n[52] = Y) : Y = n[52];
 	let X;
-	C[26] !== J || C[27] !== Y || C[28] !== B || C[29] !== V || C[30] !== W ? (X = /* @__PURE__ */ jsx("div", {
+	n[53] !== B || n[54] !== V || n[55] !== W || n[56] !== J || n[57] !== Y || n[58] !== T ? (X = /* @__PURE__ */ jsx("div", {
 		className: "bg-background/95 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10 backdrop-blur",
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex w-full items-center gap-2 rounded-md p-2 px-3 text-left text-sm font-medium",
 			children: [
+				T,
 				B,
 				V,
 				W,
@@ -112,24 +165,30 @@ var WorkflowList_default = (S) => {
 				Y
 			]
 		})
-	}), C[26] = J, C[27] = Y, C[28] = B, C[29] = V, C[30] = W, C[31] = X) : X = C[31];
+	}), n[53] = B, n[54] = V, n[55] = W, n[56] = J, n[57] = Y, n[58] = T, n[59] = X) : X = n[59];
 	let Z;
-	C[32] !== j || C[33] !== O || C[34] !== w ? (Z = /* @__PURE__ */ jsx("div", {
+	n[60] !== g || n[61] !== s || n[62] !== f || n[63] !== r ? (Z = /* @__PURE__ */ jsx("div", {
 		className: "max-w-4xl py-1",
-		children: /* @__PURE__ */ jsx(WorkflowItem_default, {
-			workflow: w,
-			workflowId: w.id,
-			scrollTo: j,
-			settings: O
+		children: f === "run" ? /* @__PURE__ */ jsx("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ jsx(RunView, {
+				workflowId: r.id,
+				settings: s
+			})
+		}) : /* @__PURE__ */ jsx(WorkflowItem_default, {
+			workflow: r,
+			workflowId: r.id,
+			scrollTo: g,
+			settings: s
 		})
-	}), C[32] = j, C[33] = O, C[34] = w, C[35] = Z) : Z = C[35];
+	}), n[60] = g, n[61] = s, n[62] = f, n[63] = r, n[64] = Z) : Z = n[64];
 	let Q;
-	C[36] !== A || C[37] !== X || C[38] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
+	n[65] !== h || n[66] !== X || n[67] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
 		className: "mb-10",
-		ref: A,
+		ref: h,
 		children: [X, Z]
-	}), C[36] = A, C[37] = X, C[38] = Z, C[39] = Q) : Q = C[39];
+	}), n[65] = h, n[66] = X, n[67] = Z, n[68] = Q) : Q = n[68];
 	let $;
-	return C[40] !== Q || C[41] !== R ? ($ = /* @__PURE__ */ jsxs("div", { children: [R, Q] }), C[40] = Q, C[41] = R, C[42] = $) : $ = C[42], $;
+	return n[69] !== Q || n[70] !== C ? ($ = /* @__PURE__ */ jsxs("div", { children: [C, Q] }), n[69] = Q, n[70] = C, n[71] = $) : $ = n[71], $;
 };
 export { WorkflowList_default as default };

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

@@ -8,8 +8,8 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../co
 import { Dialog, DialogContent, DialogTitle } from "../../../components/ui/dialog.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
 import ErrorSnackbar_default from "../../../components/feedback/ErrorSnackbar.js";
-import "../../../hooks/useProcessor.js";
 import Form_default from "../../../components/dynamic-form/Form.js";
+import "../../../hooks/useProcessor.js";
 import CreateWorkspace_default from "../../workspaces/components/CreateWorkspace.js";
 import "../../workspaces/index.js";
 import { c } from "react/compiler-runtime";

package/dist/features/workbench/index.js

@@ -2,7 +2,7 @@ import WorkflowItem_default from "./WorkflowItem.js";
 import WorkflowHistoryList_default from "./components/WorkflowHistoryList.js";
 import WorkflowButtons_default from "./components/buttons/WorkflowButtons.js";
 import WorkflowList_default from "./WorkflowList.js";
-import { useWorkbenchLayout } from "./providers/WorkbenchLayoutProvider.js";
+import { useOptionalWorkbenchLayout, useWorkbenchLayout } from "./providers/WorkbenchLayoutProvider.js";
 import { WorkbenchSidebarShell } from "./components/WorkbenchSidebarShell.js";
 import Workbench from "./Workbench.js";
 import { NewRunDialog } from "./components/NewRunDialog.js";

package/dist/features/workbench/providers/WorkbenchLayoutProvider.js

@@ -74,4 +74,7 @@ function useWorkbenchLayout() {
 	if (!e) throw Error("useWorkbenchLayout must be used within a WorkbenchLayoutProvider");
 	return e;
 }
-export { WorkbenchLayoutProvider, useWorkbenchLayout };
+function useOptionalWorkbenchLayout() {
+	return useContext(WorkbenchLayoutContext);
+}
+export { WorkbenchLayoutProvider, useOptionalWorkbenchLayout, useWorkbenchLayout };

package/dist/features/workspaces/components/WorkspaceHomePage.js

@@ -2,8 +2,8 @@ import "../../../hooks/useWorkflows.js";
 import "../../../providers/StudioProvider.js";
 import "../../../components/ui/button.js";
 import "../../../components/feedback/ErrorSnackbar.js";
-import "../../../hooks/useProcessor.js";
 import "../../../components/dynamic-form/Form.js";
+import "../../../hooks/useProcessor.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2, Play } from "lucide-react";

package/dist/index.d.ts

@@ -954,6 +954,8 @@ declare interface StudioPreferences {
     leftSidebarOpen: boolean;
     activePanel: PanelId | null;
     panelSizes: Partial<Record<PanelId, PanelSize>>;
+    /** Workbench workflow area: legacy document tree or the canonical run view. */
+    workbenchView: 'classic' | 'run';
 }
 
 declare interface StudioPreferencesContextType {