@loopstack/loopstack-studio 0.25.2 → 0.26.0

package/dist/features/{documents → secrets}/renderers/SecretInputRenderer.js

@@ -2,32 +2,32 @@ import { Button } from "../../../components/ui/button.js";
 import { Input } from "../../../components/ui/input.js";
 import { Label } from "../../../components/ui/label.js";
 import CompletionMessagePaper_default from "../../../components/messages/CompletionMessagePaper.js";
-import { useRunWorkflow } from "../../../hooks/useProcessor.js";
-import { useUpsertSecret } from "../../../hooks/useSecrets.js";
 import { useWorkbenchLayout } from "../../workbench/providers/WorkbenchLayoutProvider.js";
+import { useRunWorkflow } from "../../../hooks/useProcessor.js";
 import "../../workbench/index.js";
+import { useUpsertSecret } from "../../../hooks/useSecrets.js";
 import React, { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Info, KeyRound, Loader2 } from "lucide-react";
 var SecretInputRenderer_default = ({ parentWorkflow: p, workflow: m, document: h, isActive: g }) => {
-	let _ = h.content.variables ?? [], v = (h.ui?.widgets)?.[0]?.options, y = v?.transition, b = v?.label ?? "Save & Continue", { workflow: x } = useWorkbenchLayout(), S = x?.workspaceId, C = useRunWorkflow(), w = useUpsertSecret(), T = m.availableTransitions?.map((e) => e.id) ?? [], [E, D] = useState(() => {
+	let _ = h.content.variables ?? [], v = (h.ui?.widgets)?.[0]?.options, y = v?.transition, b = v?.label ?? "Save & Continue", { workspaceId: x } = useWorkbenchLayout(), S = useRunWorkflow(), C = useUpsertSecret(), w = m.availableTransitions?.map((e) => e.id) ?? [], [T, E] = useState(() => {
 		let e = {};
 		for (let d of _) e[d.key] = d.value ?? "";
 		return e;
-	}), [O, k] = useState(!1), A = !!y && T.includes(y), j = !g || !A, M = async () => {
-		if (!(!S || !y)) {
-			k(!0);
+	}), [D, O] = useState(!1), k = !!y && w.includes(y), A = !g || !k, j = async () => {
+		if (!(!x || !y)) {
+			O(!0);
 			try {
 				let e = [];
 				for (let d of _) {
-					let f = E[d.key]?.trim();
-					!d.key.trim() || !f || (await w.mutateAsync({
-						workspaceId: S,
+					let f = T[d.key]?.trim();
+					!d.key.trim() || !f || (await C.mutateAsync({
+						workspaceId: x,
 						key: d.key,
 						value: f
 					}), e.push(d.key));
 				}
-				C.mutate({
+				S.mutate({
 					workflowId: p.id,
 					runWorkflowPayloadDto: { transition: {
 						id: y,
@@ -36,7 +36,7 @@ var SecretInputRenderer_default = ({ parentWorkflow: p, workflow: m, document: h
 					} }
 				});
 			} finally {
-				k(!1);
+				O(!1);
 			}
 		}
 	};
@@ -59,12 +59,12 @@ var SecretInputRenderer_default = ({ parentWorkflow: p, workflow: m, document: h
 					}), /* @__PURE__ */ jsx(Input, {
 						type: "password",
 						placeholder: "Enter value...",
-						value: E[e.key] ?? "",
-						onChange: (d) => D((f) => ({
+						value: T[e.key] ?? "",
+						onChange: (d) => E((f) => ({
 							...f,
 							[e.key]: d.target.value
 						})),
-						disabled: j
+						disabled: A
 					})]
 				}, e.key)),
 				/* @__PURE__ */ jsxs("div", {
@@ -74,10 +74,10 @@ var SecretInputRenderer_default = ({ parentWorkflow: p, workflow: m, document: h
 				/* @__PURE__ */ jsx("div", {
 					className: "flex justify-end",
 					children: /* @__PURE__ */ jsxs(Button, {
-						onClick: () => void M(),
-						disabled: j || O,
+						onClick: () => void j(),
+						disabled: A || D,
 						className: "w-48",
-						children: [O ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(KeyRound, { className: "mr-2 h-4 w-4" }), b]
+						children: [D ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(KeyRound, { className: "mr-2 h-4 w-4" }), b]
 					})
 				})
 			]

package/dist/features/secrets/secrets-feature.js

@@ -0,0 +1,14 @@
+import { WorkbenchSecretsPanel } from "./components/WorkbenchSecretsPanel.js";
+import SecretInputRenderer_default from "./renderers/SecretInputRenderer.js";
+import { KeyRound } from "lucide-react";
+const secretsFeature = {
+	id: "secrets",
+	documentRenderers: { "secret-input": SecretInputRenderer_default },
+	sidebarPanel: {
+		id: "secrets",
+		label: "Environment Secrets",
+		icon: KeyRound,
+		component: WorkbenchSecretsPanel
+	}
+};
+export { secretsFeature };

package/dist/features/workbench/Workbench.js

@@ -1,107 +1,57 @@
 import { useWorkspace } from "../../hooks/useWorkspaces.js";
 import PageBreadcrumbs_default from "../../components/page/PageBreadcrumbs.js";
+import { WorkbenchLayoutProvider } from "./providers/WorkbenchLayoutProvider.js";
+import { WorkbenchSidebarShell } from "./components/WorkbenchSidebarShell.js";
 import WorkflowList_default from "./WorkflowList.js";
-import { RemoteFileExplorerProvider } from "./providers/RemoteFileExplorerProvider.js";
-import { WorkbenchLayoutProvider, useWorkbenchLayout } from "./providers/WorkbenchLayoutProvider.js";
-import { WorkbenchFilesPanel } from "./components/WorkbenchFilesPanel.js";
-import { WorkbenchFloatingPanel } from "./components/WorkbenchFloatingPanel.js";
-import { WorkbenchFlowPanel } from "./components/WorkbenchFlowPanel.js";
-import { WorkbenchIconSidebar } from "./components/WorkbenchIconSidebar.js";
-import { WorkbenchPreviewPanel } from "./components/WorkbenchPreviewPanel.js";
 import { ScrollProvider } from "./providers/ScrollProvider.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
-function WorkbenchContent(t) {
-	let a = c(7), { workflow: o, breadcrumbData: s } = t, l;
-	a[0] === s ? l = a[1] : (l = /* @__PURE__ */ jsx("div", {
+function WorkbenchContent(e) {
+	let i = c(7), { workflow: a, breadcrumbData: u } = e, d;
+	i[0] === u ? d = i[1] : (d = /* @__PURE__ */ jsx("div", {
 		className: "border-b flex h-12 shrink-0 items-center",
-		children: s ? /* @__PURE__ */ jsx(PageBreadcrumbs_default, { breadcrumbData: s }) : /* @__PURE__ */ jsx("span", {
+		children: u ? /* @__PURE__ */ jsx(PageBreadcrumbs_default, { breadcrumbData: u }) : /* @__PURE__ */ jsx("span", {
 			className: "px-3 text-sm font-medium",
 			children: "Workflows"
 		})
-	}), a[0] = s, a[1] = l);
-	let u;
-	a[2] === o ? u = a[3] : (u = /* @__PURE__ */ jsx(ScrollProvider, { children: /* @__PURE__ */ jsx("div", {
+	}), i[0] = u, i[1] = d);
+	let f;
+	i[2] === a ? f = i[3] : (f = /* @__PURE__ */ jsx(ScrollProvider, { children: /* @__PURE__ */ jsx("div", {
 		className: "flex-1 overflow-auto",
-		children: /* @__PURE__ */ jsx(WorkflowList_default, { workflow: o })
-	}) }), a[2] = o, a[3] = u);
-	let d;
-	return a[4] !== l || a[5] !== u ? (d = /* @__PURE__ */ jsx("div", {
+		children: /* @__PURE__ */ jsx(WorkflowList_default, { workflow: a })
+	}) }), i[2] = a, i[3] = f);
+	let p;
+	return i[4] !== d || i[5] !== f ? (p = /* @__PURE__ */ jsx("div", {
 		className: "flex h-full flex-col",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-1 gap-4 overflow-hidden md:flex-row flex-col",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex flex-1 flex-col overflow-hidden",
-				children: [l, u]
+				children: [d, f]
 			})
 		})
-	}), a[4] = l, a[5] = u, a[6] = d) : d = a[6], d;
-}
-function WorkbenchInner(t) {
-	let r = c(21), { workflow: i, breadcrumbData: a } = t, { activeSidePanel: o } = useWorkbenchLayout(), m = o ? "w-1/2 overflow-hidden" : "w-full overflow-hidden", _;
-	r[0] !== a || r[1] !== i ? (_ = /* @__PURE__ */ jsx(WorkbenchContent, {
-		workflow: i,
-		breadcrumbData: a
-	}), r[0] = a, r[1] = i, r[2] = _) : _ = r[2];
-	let v;
-	r[3] !== m || r[4] !== _ ? (v = /* @__PURE__ */ jsx("div", {
-		className: m,
-		children: _
-	}), r[3] = m, r[4] = _, r[5] = v) : v = r[5];
-	let y;
-	r[6] === o ? y = r[7] : (y = o === "preview" && /* @__PURE__ */ jsx(WorkbenchPreviewPanel, {}), r[6] = o, r[7] = y);
-	let b;
-	r[8] === o ? b = r[9] : (b = o === "flow" && /* @__PURE__ */ jsx(WorkbenchFlowPanel, {}), r[8] = o, r[9] = b);
-	let x;
-	r[10] === o ? x = r[11] : (x = o === "files" && /* @__PURE__ */ jsx(WorkbenchFilesPanel, {}), r[10] = o, r[11] = x);
-	let S;
-	r[12] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(WorkbenchFloatingPanel, {}), r[12] = S) : S = r[12];
-	let C;
-	r[13] !== v || r[14] !== y || r[15] !== b || r[16] !== x ? (C = /* @__PURE__ */ jsxs("div", {
-		className: "relative flex flex-1 overflow-hidden",
-		children: [
-			v,
-			y,
-			b,
-			x,
-			S
-		]
-	}), r[13] = v, r[14] = y, r[15] = b, r[16] = x, r[17] = C) : C = r[17];
-	let w;
-	r[18] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ jsx(WorkbenchIconSidebar, {}), r[18] = w) : w = r[18];
-	let T;
-	return r[19] === C ? T = r[20] : (T = /* @__PURE__ */ jsxs("div", {
-		className: "flex h-full w-full",
-		children: [C, w]
-	}), r[19] = C, r[20] = T), T;
+	}), i[4] = d, i[5] = f, i[6] = p) : p = i[6], p;
 }
 function Workbench(r) {
-	let i = c(20), { workflow: s, breadcrumbData: l, previewPanelOpen: u, onPreviewPanelOpenChange: d, isDeveloperMode: f, getPreviewUrl: p, getEnvironmentPreviewUrl: m, environments: h } = r, g = s?.workspaceId, v = useWorkspace(g), y;
-	i[0] !== h?.[0]?.slotId || i[1] !== v.data?.features?.fileExplorer?.enabled || i[2] !== v.data?.features?.fileExplorer?.environments ? (y = v.data?.features?.fileExplorer?.enabled && v.data?.features?.fileExplorer?.environments?.includes(h?.[0]?.slotId ?? ""), i[0] = h?.[0]?.slotId, i[1] = v.data?.features?.fileExplorer?.enabled, i[2] = v.data?.features?.fileExplorer?.environments, i[3] = y) : y = i[3];
-	let b = y, x;
-	i[4] === v.data ? x = i[5] : (x = v.data ? {
-		volumes: v.data.volumes,
-		features: v.data.features
-	} : void 0, i[4] = v.data, i[5] = x);
-	let S = x, C = h ?? v.data?.environments, w;
-	i[6] !== l || i[7] !== b || i[8] !== s ? (w = b ? /* @__PURE__ */ jsx(RemoteFileExplorerProvider, { children: /* @__PURE__ */ jsx(WorkbenchInner, {
+	let o = c(13), { workflow: s, breadcrumbData: l, getPreviewUrl: d, getEnvironmentPreviewUrl: f, environments: p } = r, m = s?.workspaceId, h = useWorkspace(m), g;
+	o[0] === h.data ? g = o[1] : (g = h.data ? {
+		volumes: h.data.volumes,
+		features: h.data.features
+	} : void 0, o[0] = h.data, o[1] = g);
+	let _ = g, v = p ?? h.data?.environments, y;
+	o[2] !== l || o[3] !== s ? (y = /* @__PURE__ */ jsx(WorkbenchSidebarShell, { children: /* @__PURE__ */ jsx(WorkbenchContent, {
 		workflow: s,
 		breadcrumbData: l
-	}) }) : /* @__PURE__ */ jsx(WorkbenchInner, {
-		workflow: s,
-		breadcrumbData: l
-	}), i[6] = l, i[7] = b, i[8] = s, i[9] = w) : w = i[9];
-	let T;
-	return i[10] !== m || i[11] !== p || i[12] !== f || i[13] !== d || i[14] !== u || i[15] !== C || i[16] !== w || i[17] !== s || i[18] !== S ? (T = /* @__PURE__ */ jsx(WorkbenchLayoutProvider, {
+	}) }), o[2] = l, o[3] = s, o[4] = y) : y = o[4];
+	let b;
+	return o[5] !== f || o[6] !== d || o[7] !== v || o[8] !== y || o[9] !== s || o[10] !== _ || o[11] !== m ? (b = /* @__PURE__ */ jsx(WorkbenchLayoutProvider, {
+		workspaceId: m,
 		workflow: s,
-		isDeveloperMode: f,
-		workspaceConfig: S,
-		getPreviewUrl: p,
-		getEnvironmentPreviewUrl: m,
-		environments: C,
-		previewPanelOpen: u,
-		onPreviewPanelOpenChange: d,
-		children: w
-	}), i[10] = m, i[11] = p, i[12] = f, i[13] = d, i[14] = u, i[15] = C, i[16] = w, i[17] = s, i[18] = S, i[19] = T) : T = i[19], T;
+		workspaceConfig: _,
+		getPreviewUrl: d,
+		getEnvironmentPreviewUrl: f,
+		environments: v,
+		children: y
+	}), o[5] = f, o[6] = d, o[7] = v, o[8] = y, o[9] = s, o[10] = _, o[11] = m, o[12] = b) : b = o[12], b;
 }
 export { Workbench as default };

package/dist/features/workbench/WorkflowList.js

@@ -1,73 +1,136 @@
-import { useWorkflowConfigByName } from "../../hooks/useWorkflows.js";
+import { useChildWorkflows, useWorkflowConfigByName } from "../../hooks/useWorkflows.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 WorkflowItem_default from "./WorkflowItem.js";
 import WorkbenchSettingsModal_default from "./components/WorkbenchSettingsModal.js";
+import WorkflowHistoryList_default from "./components/WorkflowHistoryList.js";
 import WorkflowButtons_default from "./components/buttons/WorkflowButtons.js";
 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 } from "lucide-react";
-var WorkflowList_default = (f) => {
-	let p = c(26), { workflow: m } = f, [h, g] = useState(!1), _;
-	p[0] === Symbol.for("react.memo_cache_sentinel") ? (_ = {
+import { ArrowDownIcon, ListOrdered, Workflow } from "lucide-react";
+var WorkflowList_default = (C) => {
+	let w = c(40), { workflow: T } = C, [E, D] = useState(!1), O;
+	w[0] === Symbol.for("react.memo_cache_sentinel") ? (O = {
 		enableDebugMode: !1,
 		showFullMessageHistory: !1
-	}, p[0] = _) : _ = p[0];
-	let [v, y] = useState(_), { listRef: b, scrollTo: x, canScrollDown: S, scrollToBottom: C } = useWorkflowListState(), w = useWorkflowConfigByName(m.className ?? void 0), T;
-	p[1] !== S || p[2] !== C ? (T = S && /* @__PURE__ */ jsx(Button, {
+	}, w[0] = O) : O = w[0];
+	let [k, A] = useState(O), { listRef: j, scrollTo: M, canScrollDown: N, scrollToBottom: P } = useWorkflowListState(), F = useWorkflowConfigByName(T.className ?? void 0), I = useChildWorkflows(T.id), L;
+	w[1] === I.data ? L = w[2] : (L = I.data ?? [], w[1] = I.data, w[2] = L);
+	let R = L, z;
+	w[3] !== N || w[4] !== P ? (z = N && /* @__PURE__ */ jsx(Button, {
 		variant: "outline",
 		size: "icon",
-		onClick: C,
+		onClick: P,
 		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" })
-	}), p[1] = S, p[2] = C, p[3] = T) : T = p[3];
-	let E = w.data?.title ?? m.alias, D;
-	p[4] === E ? D = p[5] : (D = /* @__PURE__ */ jsx("span", {
+	}), w[3] = N, w[4] = P, w[5] = z) : z = w[5];
+	let B = F.data?.title ?? T.alias, V;
+	w[6] === B ? V = w[7] : (V = /* @__PURE__ */ jsx("span", {
 		className: "flex-1 truncate text-sm",
-		children: E
-	}), p[4] = E, p[5] = D);
-	let O;
-	p[6] === m ? O = p[7] : (O = /* @__PURE__ */ jsx(WorkflowButtons_default, {
-		workflow: m,
-		workflowId: m.id
-	}), p[6] = m, p[7] = O);
-	let k;
-	p[8] !== h || p[9] !== v ? (k = /* @__PURE__ */ jsx(WorkbenchSettingsModal_default, {
-		settings: v,
-		onSettingsChange: y,
-		open: h,
-		onOpenChange: g
-	}), p[8] = h, p[9] = v, p[10] = k) : k = p[10];
-	let A;
-	p[11] !== D || p[12] !== O || p[13] !== k ? (A = /* @__PURE__ */ jsx("div", {
+		children: B
+	}), w[6] = B, w[7] = V);
+	let H;
+	w[8] === T ? H = w[9] : (H = /* @__PURE__ */ jsx(WorkflowButtons_default, {
+		workflow: T,
+		workflowId: T.id
+	}), w[8] = T, w[9] = H);
+	let U;
+	w[10] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__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(ListOrdered, { className: "h-5 w-5" })
+			})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Run Log" })] }), w[10] = U) : U = w[10];
+	let W;
+	w[11] === Symbol.for("react.memo_cache_sentinel") ? (W = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Run Log" }) }), w[11] = W) : W = w[11];
+	let G;
+	w[12] === T ? G = w[13] : (G = /* @__PURE__ */ jsxs(Dialog, { children: [U, /* @__PURE__ */ jsxs(DialogContent, {
+		className: "sm:max-w-lg max-h-[80vh] overflow-hidden flex flex-col",
+		children: [W, /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-auto",
+			children: /* @__PURE__ */ jsx(WorkflowHistoryList_default, { workflow: T })
+		})]
+	})] }), w[12] = T, w[13] = G);
+	let K;
+	w[14] === Symbol.for("react.memo_cache_sentinel") ? (K = /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__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(Workflow, { className: "h-5 w-5" })
+			})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children: "Graph" })] }), w[14] = K) : K = w[14];
+	let q;
+	w[15] === Symbol.for("react.memo_cache_sentinel") ? (q = /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Graph" }) }), w[15] = q) : q = w[15];
+	let J;
+	w[16] !== R || w[17] !== F.data || w[18] !== T.id ? (J = /* @__PURE__ */ jsxs(Dialog, { children: [K, /* @__PURE__ */ jsxs(DialogContent, {
+		className: "sm:max-w-4xl h-[70vh] overflow-hidden flex flex-col",
+		children: [q, /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-hidden",
+			children: R.length > 0 ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(WorkflowFlowViewer_default, {
+				workflowId: T.id,
+				workflows: R,
+				workflowConfig: F.data
+			}) }) : /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex h-full items-center justify-center text-sm",
+				children: "No workflows found"
+			})
+		})]
+	})] }), w[16] = R, w[17] = F.data, w[18] = T.id, w[19] = J) : J = w[19];
+	let Y;
+	w[20] !== E || w[21] !== k ? (Y = /* @__PURE__ */ jsx(WorkbenchSettingsModal_default, {
+		settings: k,
+		onSettingsChange: A,
+		open: E,
+		onOpenChange: D
+	}), w[20] = E, w[21] = k, w[22] = Y) : Y = w[22];
+	let X;
+	w[23] !== J || w[24] !== Y || w[25] !== V || w[26] !== H || w[27] !== G ? (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: [
-				D,
-				O,
-				k
+				V,
+				H,
+				G,
+				J,
+				Y
 			]
 		})
-	}), p[11] = D, p[12] = O, p[13] = k, p[14] = A) : A = p[14];
-	let j;
-	p[15] !== x || p[16] !== v || p[17] !== m ? (j = /* @__PURE__ */ jsx("div", {
+	}), w[23] = J, w[24] = Y, w[25] = V, w[26] = H, w[27] = G, w[28] = X) : X = w[28];
+	let Z;
+	w[29] !== M || w[30] !== k || w[31] !== T ? (Z = /* @__PURE__ */ jsx("div", {
 		className: "max-w-4xl py-1",
 		children: /* @__PURE__ */ jsx(WorkflowItem_default, {
-			workflow: m,
-			workflowId: m.id,
-			scrollTo: x,
-			settings: v
+			workflow: T,
+			workflowId: T.id,
+			scrollTo: M,
+			settings: k
 		})
-	}), p[15] = x, p[16] = v, p[17] = m, p[18] = j) : j = p[18];
-	let M;
-	p[19] !== b || p[20] !== A || p[21] !== j ? (M = /* @__PURE__ */ jsxs("div", {
+	}), w[29] = M, w[30] = k, w[31] = T, w[32] = Z) : Z = w[32];
+	let Q;
+	w[33] !== j || w[34] !== X || w[35] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
 		className: "mb-10",
-		ref: b,
-		children: [A, j]
-	}), p[19] = b, p[20] = A, p[21] = j, p[22] = M) : M = p[22];
-	let N;
-	return p[23] !== T || p[24] !== M ? (N = /* @__PURE__ */ jsxs("div", { children: [T, M] }), p[23] = T, p[24] = M, p[25] = N) : N = p[25], N;
+		ref: j,
+		children: [X, Z]
+	}), w[33] = j, w[34] = X, w[35] = Z, w[36] = Q) : Q = w[36];
+	let $;
+	return w[37] !== Q || w[38] !== z ? ($ = /* @__PURE__ */ jsxs("div", { children: [z, Q] }), w[37] = Q, w[38] = z, w[39] = $) : $ = w[39], $;
 };
 export { WorkflowList_default as default };

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

@@ -0,0 +1,155 @@
+import { Button } from "../../../components/ui/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight, ExternalLink, X } from "lucide-react";
+var PREV_SIZE = {
+	small: null,
+	medium: "small",
+	large: "medium"
+}, NEXT_SIZE = {
+	small: "medium",
+	medium: "large",
+	large: null
+};
+function SidebarPanel(m) {
+	let h = c(55), { icon: g, title: _, description: v, size: y, onSizeChange: b, onClose: x, expandUrl: S, children: C } = m, w = PREV_SIZE[y] !== null, T = NEXT_SIZE[y] !== null, E;
+	h[0] === g ? E = h[1] : (E = /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground",
+		children: g
+	}), h[0] = g, h[1] = E);
+	let D;
+	h[2] === _ ? D = h[3] : (D = /* @__PURE__ */ jsx("span", {
+		className: "text-sm font-medium",
+		children: _
+	}), h[2] = _, h[3] = D);
+	let O;
+	h[4] !== E || h[5] !== D ? (O = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [E, D]
+	}), h[4] = E, h[5] = D, h[6] = O) : O = h[6];
+	let k = !T, A;
+	h[7] !== T || h[8] !== b || h[9] !== y ? (A = () => T && b(NEXT_SIZE[y]), h[7] = T, h[8] = b, h[9] = y, h[10] = A) : A = h[10];
+	let j;
+	h[11] === Symbol.for("react.memo_cache_sentinel") ? (j = /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" }), h[11] = j) : j = h[11];
+	let M;
+	h[12] !== k || h[13] !== A ? (M = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			disabled: k,
+			onClick: A,
+			children: j
+		})
+	}), h[12] = k, h[13] = A, h[14] = M) : M = h[14];
+	let N;
+	h[15] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: "Expand"
+	}), h[15] = N) : N = h[15];
+	let P;
+	h[16] === M ? P = h[17] : (P = /* @__PURE__ */ jsxs(Tooltip, { children: [M, N] }), h[16] = M, h[17] = P);
+	let F = !w, I;
+	h[18] !== w || h[19] !== b || h[20] !== y ? (I = () => w && b(PREV_SIZE[y]), h[18] = w, h[19] = b, h[20] = y, h[21] = I) : I = h[21];
+	let L;
+	h[22] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }), h[22] = L) : L = h[22];
+	let R;
+	h[23] !== F || h[24] !== I ? (R = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			disabled: F,
+			onClick: I,
+			children: L
+		})
+	}), h[23] = F, h[24] = I, h[25] = R) : R = h[25];
+	let z;
+	h[26] === Symbol.for("react.memo_cache_sentinel") ? (z = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: "Shrink"
+	}), h[26] = z) : z = h[26];
+	let B;
+	h[27] === R ? B = h[28] : (B = /* @__PURE__ */ jsxs(Tooltip, { children: [R, z] }), h[27] = R, h[28] = B);
+	let V;
+	h[29] === S ? V = h[30] : (V = S && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			asChild: !0,
+			children: /* @__PURE__ */ jsx("a", {
+				href: S,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+			})
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: "Open in new tab"
+	})] }), h[29] = S, h[30] = V);
+	let H;
+	h[31] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), h[31] = H) : H = h[31];
+	let U;
+	h[32] === x ? U = h[33] : (U = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			className: "h-7 w-7",
+			onClick: x,
+			children: H
+		})
+	}), h[32] = x, h[33] = U);
+	let W;
+	h[34] === Symbol.for("react.memo_cache_sentinel") ? (W = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "bottom",
+		children: "Close"
+	}), h[34] = W) : W = h[34];
+	let G;
+	h[35] === U ? G = h[36] : (G = /* @__PURE__ */ jsxs(Tooltip, { children: [U, W] }), h[35] = U, h[36] = G);
+	let K;
+	h[37] !== B || h[38] !== V || h[39] !== G || h[40] !== P ? (K = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center",
+		children: [
+			P,
+			B,
+			V,
+			G
+		]
+	}), h[37] = B, h[38] = V, h[39] = G, h[40] = P, h[41] = K) : K = h[41];
+	let q;
+	h[42] !== K || h[43] !== O ? (q = /* @__PURE__ */ jsxs("div", {
+		className: "border-b flex h-12 shrink-0 items-center justify-between px-3",
+		children: [O, K]
+	}), h[42] = K, h[43] = O, h[44] = q) : q = h[44];
+	let J;
+	h[45] === v ? J = h[46] : (J = v && /* @__PURE__ */ jsx("div", {
+		className: "shrink-0 border-b px-4 py-2",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-xs",
+			children: v
+		})
+	}), h[45] = v, h[46] = J);
+	let Y;
+	h[47] === C ? Y = h[48] : (Y = /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-hidden",
+		children: C
+	}), h[47] = C, h[48] = Y);
+	let Z;
+	h[49] !== J || h[50] !== Y ? (Z = /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col overflow-hidden",
+		children: [J, Y]
+	}), h[49] = J, h[50] = Y, h[51] = Z) : Z = h[51];
+	let Q;
+	return h[52] !== q || h[53] !== Z ? (Q = /* @__PURE__ */ jsxs("div", {
+		className: "border-l bg-background flex h-full shrink-0 flex-col",
+		children: [q, Z]
+	}), h[52] = q, h[53] = Z, h[54] = Q) : Q = h[54], Q;
+}
+export { SidebarPanel };