@loopstack/loopstack-studio 0.25.2 → 0.26.0

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

@@ -0,0 +1,82 @@
+import { Button } from "../../../components/ui/button.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { useResetEnvironment } from "../../../hooks/useEnvironments.js";
+import { SidebarPanel } from "./SidebarPanel.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loader2, RotateCcw, Server } from "lucide-react";
+import { toast } from "sonner";
+function WorkbenchEnvironmentPanel(d) {
+	let { panelSize: f, setPanelSize: p, closePanel: m } = useWorkbenchLayout(), h = d.workspaceId, g = useResetEnvironment(), [_, v] = useState(null), y = d.environments?.filter((e) => !!e.agentUrl) ?? [], b = async (e) => {
+		if (h) try {
+			await g.mutateAsync({
+				workspaceId: h,
+				slotId: e
+			}), toast.success("Environment reset successfully");
+		} catch {
+			toast.error("Failed to reset environment");
+		} finally {
+			v(null);
+		}
+	};
+	return /* @__PURE__ */ jsx(SidebarPanel, {
+		icon: /* @__PURE__ */ jsx(Server, { className: "h-4 w-4" }),
+		title: "Environment",
+		description: "Manage remote environments for this workspace.",
+		size: f,
+		onSizeChange: p,
+		onClose: m,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto px-4 py-3",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "space-y-2",
+				children: [y.map((u) => /* @__PURE__ */ jsxs("div", {
+					className: "bg-muted/50 rounded-md px-3 py-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "mb-2",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "text-sm font-medium",
+							children: u.envName || u.slotId
+						}), /* @__PURE__ */ jsx("div", {
+							className: "text-muted-foreground text-xs",
+							children: u.type || "remote"
+						})]
+					}), _ === u.slotId ? /* @__PURE__ */ jsxs("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "text-destructive text-xs",
+							children: "This will reset the environment to its initial state. All changes, files, database, and cache will be lost."
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex gap-2",
+							children: [/* @__PURE__ */ jsxs(Button, {
+								size: "sm",
+								variant: "destructive",
+								className: "h-7 text-xs",
+								disabled: g.isPending,
+								onClick: () => void b(u.slotId),
+								children: [g.isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 h-3 w-3 animate-spin" }) : /* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }), "Confirm Reset"]
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								className: "h-7 text-xs",
+								disabled: g.isPending,
+								onClick: () => v(null),
+								children: "Cancel"
+							})]
+						})]
+					}) : /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						variant: "outline",
+						className: "h-7 text-xs",
+						onClick: () => v(u.slotId),
+						children: [/* @__PURE__ */ jsx(RotateCcw, { className: "mr-1 h-3 w-3" }), "Reset Environment"]
+					})]
+				}, u.slotId)), y.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground py-4 text-center text-sm",
+					children: "No remote environments configured."
+				})]
+			})
+		})
+	});
+}
+export { WorkbenchEnvironmentPanel };

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

@@ -1,76 +1,144 @@
+import { useStudio } from "../../../providers/StudioProvider.js";
 import { cn } from "../../../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
+import { useFeatureRegistry } from "../../feature-registry/FeatureRegistryProvider.js";
+import "../../feature-registry/index.js";
 import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Files, KeyRound, ListOrdered, MonitorPlay, Workflow } from "lucide-react";
-function IconButton(s) {
-	let l = c(11), { icon: u, label: d, active: f, onClick: p } = s, m = f ? "bg-foreground text-background" : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground", h;
-	l[0] === m ? h = l[1] : (h = cn("flex h-10 w-10 items-center justify-center rounded-md transition-colors hover:cursor-pointer", m), l[0] = m, l[1] = h);
-	let g;
-	l[2] !== u || l[3] !== p || l[4] !== h ? (g = /* @__PURE__ */ jsx(TooltipTrigger, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link, useLocation } from "react-router-dom";
+import { Home, MonitorPlay, Play, Server } from "lucide-react";
+function IconButton(e) {
+	let l = c(12), { icon: u, label: f, active: p, disabled: m, onClick: h } = e, g = m ? void 0 : h, _ = m ? "text-muted-foreground/40 cursor-not-allowed" : p ? "bg-foreground text-background hover:cursor-pointer" : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground hover:cursor-pointer", v;
+	l[0] === _ ? v = l[1] : (v = cn("flex h-10 w-10 items-center justify-center rounded-md transition-colors", _), l[0] = _, l[1] = v);
+	let y;
+	l[2] !== m || l[3] !== u || l[4] !== g || l[5] !== v ? (y = /* @__PURE__ */ jsx(TooltipTrigger, {
 		asChild: !0,
 		children: /* @__PURE__ */ jsx("button", {
-			onClick: p,
-			className: h,
+			onClick: g,
+			disabled: m,
+			className: v,
 			children: u
 		})
-	}), l[2] = u, l[3] = p, l[4] = h, l[5] = g) : g = l[5];
-	let _;
-	l[6] === d ? _ = l[7] : (_ = /* @__PURE__ */ jsx(TooltipContent, {
+	}), l[2] = m, l[3] = u, l[4] = g, l[5] = v, l[6] = y) : y = l[6];
+	let b;
+	l[7] === f ? b = l[8] : (b = /* @__PURE__ */ jsx(TooltipContent, {
 		side: "left",
-		children: d
-	}), l[6] = d, l[7] = _);
+		children: f
+	}), l[7] = f, l[8] = b);
+	let x;
+	return l[9] !== y || l[10] !== b ? (x = /* @__PURE__ */ jsxs(Tooltip, { children: [y, b] }), l[9] = y, l[10] = b, l[11] = x) : x = l[11], x;
+}
+function IconLink(e) {
+	let l = c(11), { icon: u, label: p, to: m, active: h } = e, g = h ? "bg-foreground text-background" : "text-muted-foreground hover:bg-accent/50 hover:text-accent-foreground", _;
+	l[0] === g ? _ = l[1] : (_ = cn("flex h-10 w-10 items-center justify-center rounded-md transition-colors", g), l[0] = g, l[1] = _);
 	let v;
-	return l[8] !== g || l[9] !== _ ? (v = /* @__PURE__ */ jsxs(Tooltip, { children: [g, _] }), l[8] = g, l[9] = _, l[10] = v) : v = l[10], v;
+	l[2] !== u || l[3] !== _ || l[4] !== m ? (v = /* @__PURE__ */ jsx(TooltipTrigger, {
+		asChild: !0,
+		children: /* @__PURE__ */ jsx(Link, {
+			to: m,
+			className: _,
+			children: u
+		})
+	}), l[2] = u, l[3] = _, l[4] = m, l[5] = v) : v = l[5];
+	let y;
+	l[6] === p ? y = l[7] : (y = /* @__PURE__ */ jsx(TooltipContent, {
+		side: "left",
+		children: p
+	}), l[6] = p, l[7] = y);
+	let b;
+	return l[8] !== v || l[9] !== y ? (b = /* @__PURE__ */ jsxs(Tooltip, { children: [v, y] }), l[8] = v, l[9] = y, l[10] = b) : b = l[10], b;
 }
 function WorkbenchIconSidebar() {
-	let e = c(25), { previewPanelEnabled: i, fileExplorerEnabled: a, isDeveloperMode: o, activeFloatingPanel: g, toggleFloatingPanel: _, activeSidePanel: v, toggleSidePanel: y } = useWorkbenchLayout(), b;
-	e[0] !== v || e[1] !== i || e[2] !== y ? (b = i && /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(MonitorPlay, { className: "h-5 w-5" }),
-		label: "Preview",
-		active: v === "preview",
-		onClick: () => y("preview")
-	}), e[0] = v, e[1] = i, e[2] = y, e[3] = b) : b = e[3];
-	let x;
-	e[4] !== g || e[5] !== v || e[6] !== o || e[7] !== _ || e[8] !== y ? (x = o && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(Workflow, { className: "h-5 w-5" }),
-		label: "Graph",
-		active: v === "flow",
-		onClick: () => y("flow")
-	}), /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-5 w-5" }),
-		label: "Run Log",
-		active: g === "history",
-		onClick: () => _("history")
-	})] }), e[4] = g, e[5] = v, e[6] = o, e[7] = _, e[8] = y, e[9] = x) : x = e[9];
-	let S;
-	e[10] !== v || e[11] !== a || e[12] !== y ? (S = a && /* @__PURE__ */ jsx(IconButton, {
-		icon: /* @__PURE__ */ jsx(Files, { className: "h-5 w-5" }),
-		label: "Files",
-		active: v === "files",
-		onClick: () => y("files")
-	}), e[10] = v, e[11] = a, e[12] = y, e[13] = S) : S = e[13];
-	let C;
-	e[14] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsx(KeyRound, { className: "h-5 w-5" }), e[14] = C) : C = e[14];
-	let w = g === "secrets", T;
-	e[15] === _ ? T = e[16] : (T = () => _("secrets"), e[15] = _, e[16] = T);
-	let E;
-	e[17] !== w || e[18] !== T ? (E = /* @__PURE__ */ jsx(IconButton, {
-		icon: C,
-		label: "Secrets",
-		active: w,
-		onClick: T
-	}), e[17] = w, e[18] = T, e[19] = E) : E = e[19];
-	let D;
-	return e[20] !== b || e[21] !== x || e[22] !== S || e[23] !== E ? (D = /* @__PURE__ */ jsxs("div", {
-		className: "border-l bg-background flex w-12 shrink-0 flex-col items-center gap-1 py-2",
+	let i = c(65), { previewPanelEnabled: a, activePanel: o, togglePanel: s, environments: f, workspaceId: b } = useWorkbenchLayout(), { router: C } = useStudio(), w = useLocation(), T = useFeatureRegistry(), E;
+	i[0] === f ? E = i[1] : (E = f?.some(_temp) ?? !1, i[0] = f, i[1] = E);
+	let D = E, O;
+	i[2] !== C || i[3] !== b ? (O = C.getWorkspace(b), i[2] = C, i[3] = b, i[4] = O) : O = i[4];
+	let k = O, A, j, M, N, P, F, I, L;
+	if (i[5] !== o || i[6] !== T || i[7] !== D || i[8] !== w.pathname || i[9] !== a || i[10] !== s || i[11] !== k) {
+		let e = T.filter(_temp2).map(_temp3);
+		P = "border-l bg-background flex w-12 shrink-0 flex-col items-center", i[20] === Symbol.for("react.memo_cache_sentinel") ? (F = /* @__PURE__ */ jsx("div", { className: "flex h-12 shrink-0 items-center justify-center border-b w-full" }), i[20] = F) : F = i[20];
+		let l;
+		i[21] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ jsx(Home, { className: "h-5 w-5" }), i[21] = l) : l = i[21];
+		let u = w.pathname === k, d;
+		i[22] !== u || i[23] !== k ? (d = /* @__PURE__ */ jsx(IconLink, {
+			icon: l,
+			label: "Workspace",
+			to: k,
+			active: u
+		}), i[22] = u, i[23] = k, i[24] = d) : d = i[24];
+		let f;
+		i[25] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx(Play, { className: "h-5 w-5" }), i[25] = f) : f = i[25];
+		let p = o === "runs", b;
+		i[26] === s ? b = i[27] : (b = () => s("runs"), i[26] = s, i[27] = b);
+		let S;
+		i[28] !== p || i[29] !== b ? (S = /* @__PURE__ */ jsx(IconButton, {
+			icon: f,
+			label: "Runs",
+			active: p,
+			onClick: b
+		}), i[28] = p, i[29] = b, i[30] = S) : S = i[30], i[31] !== d || i[32] !== S ? (I = /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-1 py-2",
+			children: [d, S]
+		}), i[31] = d, i[32] = S, i[33] = I) : I = i[33], i[34] === Symbol.for("react.memo_cache_sentinel") ? (L = /* @__PURE__ */ jsx("div", { className: "mx-2 w-6 border-t" }), i[34] = L) : L = i[34], A = "flex flex-col items-center gap-1 py-2";
+		let C;
+		i[35] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsx(MonitorPlay, { className: "h-5 w-5" }), i[35] = C) : C = i[35];
+		let E = a ? "Environment Preview" : "Preview not available for this environment", O = o === "preview", R = !a, z;
+		i[36] === s ? z = i[37] : (z = () => s("preview"), i[36] = s, i[37] = z), i[38] !== E || i[39] !== O || i[40] !== R || i[41] !== z ? (j = /* @__PURE__ */ jsx(IconButton, {
+			icon: C,
+			label: E,
+			active: O,
+			disabled: R,
+			onClick: z
+		}), i[38] = E, i[39] = O, i[40] = R, i[41] = z, i[42] = j) : j = i[42];
+		let B;
+		i[43] === Symbol.for("react.memo_cache_sentinel") ? (B = /* @__PURE__ */ jsx(Server, { className: "h-5 w-5" }), i[43] = B) : B = i[43];
+		let V = D ? "Environment Settings" : "Settings not available for this environment", H = o === "environment", U = !D, W;
+		i[44] === s ? W = i[45] : (W = () => s("environment"), i[44] = s, i[45] = W), i[46] !== V || i[47] !== H || i[48] !== U || i[49] !== W ? (M = /* @__PURE__ */ jsx(IconButton, {
+			icon: B,
+			label: V,
+			active: H,
+			disabled: U,
+			onClick: W
+		}), i[46] = V, i[47] = H, i[48] = U, i[49] = W, i[50] = M) : M = i[50];
+		let G;
+		i[51] !== o || i[52] !== s ? (G = (e) => {
+			let i = e.icon;
+			return /* @__PURE__ */ jsx(IconButton, {
+				icon: /* @__PURE__ */ jsx(i, { className: "h-5 w-5" }),
+				label: e.label,
+				active: o === e.id,
+				onClick: () => s(e.id)
+			}, e.id);
+		}, i[51] = o, i[52] = s, i[53] = G) : G = i[53], N = e.map(G), i[5] = o, i[6] = T, i[7] = D, i[8] = w.pathname, i[9] = a, i[10] = s, i[11] = k, i[12] = A, i[13] = j, i[14] = M, i[15] = N, i[16] = P, i[17] = F, i[18] = I, i[19] = L;
+	} else A = i[12], j = i[13], M = i[14], N = i[15], P = i[16], F = i[17], I = i[18], L = i[19];
+	let R;
+	i[54] !== A || i[55] !== j || i[56] !== M || i[57] !== N ? (R = /* @__PURE__ */ jsxs("div", {
+		className: A,
+		children: [
+			j,
+			M,
+			N
+		]
+	}), i[54] = A, i[55] = j, i[56] = M, i[57] = N, i[58] = R) : R = i[58];
+	let z;
+	return i[59] !== R || i[60] !== P || i[61] !== F || i[62] !== I || i[63] !== L ? (z = /* @__PURE__ */ jsxs("div", {
+		className: P,
 		children: [
-			b,
-			x,
-			S,
-			E
+			F,
+			I,
+			L,
+			R
 		]
-	}), e[20] = b, e[21] = x, e[22] = S, e[23] = E, e[24] = D) : D = e[24], D;
+	}), i[59] = R, i[60] = P, i[61] = F, i[62] = I, i[63] = L, i[64] = z) : z = i[64], z;
+}
+function _temp3(e) {
+	return e.sidebarPanel;
+}
+function _temp2(e) {
+	return e.sidebarPanel;
+}
+function _temp(e) {
+	return !!e.agentUrl;
 }
 export { WorkbenchIconSidebar };

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

@@ -1,128 +1,141 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../../../components/ui/tooltip.js";
 import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { SidebarPanel } from "./SidebarPanel.js";
+import { c } from "react/compiler-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ExternalLink, Loader2, X } from "lucide-react";
+import { Loader2, MonitorPlay } from "lucide-react";
 var EMBED_NEW_RUN_MESSAGE_TYPE = "loopstack:embed:new-run";
 function WorkbenchPreviewPanel() {
-	let { getEnvironmentPreviewUrl: y, environments: b, closeSidePanel: x, selectedSlotId: S, setSelectedSlotId: C } = useWorkbenchLayout(), w = useRef(null), T = useMemo(() => (b ?? []).filter((e) => !!e.connectionUrl && (!!e.workerId || e.local)), [b]), [E, D] = useState(null);
-	useEffect(() => {
-		!S && T.length > 0 && C(T[0].slotId);
-	}, [
-		T,
-		S,
-		C
-	]);
-	let O = useMemo(() => T.find((e) => e.slotId === S), [T, S]), k = useMemo(() => {
-		if (!(!y || !O)) return y(O, E ?? void 0);
-	}, [
-		y,
-		O,
-		E
-	]);
-	return useEffect(() => {
+	let _ = c(55), { getEnvironmentPreviewUrl: y, environments: b, closePanel: x, panelSize: S, setPanelSize: C, selectedSlotId: w, setSelectedSlotId: T } = useWorkbenchLayout(), E = useRef(null), D;
+	_[0] === b ? D = _[1] : (D = b ?? [], _[0] = b, _[1] = D);
+	let O;
+	_[2] === D ? O = _[3] : (O = D.filter(_temp), _[2] = D, _[3] = O);
+	let k = O, [A, j] = useState(null), M;
+	_[4] !== k[0] || _[5] !== k.length || _[6] !== w || _[7] !== T ? (M = () => {
+		!w && k.length > 0 && T(k[0].slotId);
+	}, _[4] = k[0], _[5] = k.length, _[6] = w, _[7] = T, _[8] = M) : M = _[8];
+	let N;
+	_[9] !== k || _[10] !== w || _[11] !== T ? (N = [
+		k,
+		w,
+		T
+	], _[9] = k, _[10] = w, _[11] = T, _[12] = N) : N = _[12], useEffect(M, N);
+	let P;
+	if (_[13] !== k || _[14] !== w) {
+		let e;
+		_[16] === w ? e = _[17] : (e = (e) => e.slotId === w, _[16] = w, _[17] = e), P = k.find(e), _[13] = k, _[14] = w, _[15] = P;
+	} else P = _[15];
+	let F = P, I;
+	bb0: {
+		if (!y || !F) {
+			I = void 0;
+			break bb0;
+		}
+		let e = A ?? void 0, g;
+		_[18] !== y || _[19] !== F || _[20] !== e ? (g = y(F, e), _[18] = y, _[19] = F, _[20] = e, _[21] = g) : g = _[21], I = g;
+	}
+	let L = I, R;
+	_[22] === T ? R = _[23] : (R = (e) => {
+		T(e), j(null);
+	}, _[22] = T, _[23] = R);
+	let z = R, B, V;
+	if (_[24] === Symbol.for("react.memo_cache_sentinel") ? (B = () => {
 		let e = (e) => {
 			if (e.origin !== window.location.origin) return;
-			let _ = e.data;
-			if (_?.type !== EMBED_NEW_RUN_MESSAGE_TYPE) return;
-			let v = _?.workflowId;
-			typeof v == "string" && D(v);
+			let g = e.data;
+			if (g?.type !== EMBED_NEW_RUN_MESSAGE_TYPE) return;
+			let _ = g?.workflowId;
+			typeof _ == "string" && j(_);
 		};
 		return window.addEventListener("message", e), () => window.removeEventListener("message", e);
-	}, []), b === void 0 ? /* @__PURE__ */ jsxs("div", {
-		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-12 shrink-0 items-center justify-between px-3",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm font-medium text-white",
-				children: "Preview"
-			}), /* @__PURE__ */ jsx("button", {
-				onClick: x,
-				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
-				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-			})]
-		}), /* @__PURE__ */ jsx("div", {
+	}, V = [], _[24] = B, _[25] = V) : (B = _[24], V = _[25]), useEffect(B, V), b === void 0) {
+		let e;
+		_[26] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(MonitorPlay, { className: "h-4 w-4" }), _[26] = e) : e = _[26];
+		let g;
+		_[27] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-1 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-zinc-400" })
-		})]
-	}) : !y || T.length === 0 ? /* @__PURE__ */ jsxs("div", {
-		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-12 shrink-0 items-center justify-between px-3",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-sm font-medium text-white",
-				children: "Preview"
-			}), /* @__PURE__ */ jsx("button", {
-				onClick: x,
-				className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
-				children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-			})]
-		}), /* @__PURE__ */ jsx("div", {
-			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
+			children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" })
+		}), _[27] = g) : g = _[27];
+		let v;
+		return _[28] !== x || _[29] !== S || _[30] !== C ? (v = /* @__PURE__ */ jsx(SidebarPanel, {
+			icon: e,
+			title: "Preview",
+			size: S,
+			onSizeChange: C,
+			onClose: x,
+			children: g
+		}), _[28] = x, _[29] = S, _[30] = C, _[31] = v) : v = _[31], v;
+	}
+	if (!y || k.length === 0) {
+		let e;
+		_[32] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(MonitorPlay, { className: "h-4 w-4" }), _[32] = e) : e = _[32];
+		let g;
+		_[33] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx("div", {
+			className: "text-muted-foreground flex flex-1 items-center justify-center text-sm",
 			children: "Preview not available"
-		})]
-	}) : /* @__PURE__ */ jsxs("div", {
-		className: "border-l bg-zinc-950 flex w-1/2 shrink-0 flex-col",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex h-12 shrink-0 items-center justify-between px-3",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "text-sm font-medium text-white",
-						children: "Preview"
-					}),
-					T.length > 1 && /* @__PURE__ */ jsxs(Select, {
-						value: S,
-						onValueChange: (e) => {
-							C(e), D(null);
-						},
-						children: [/* @__PURE__ */ jsx(SelectTrigger, {
-							className: "h-7 w-40 border-zinc-700 bg-zinc-900 text-zinc-200 text-xs",
-							children: /* @__PURE__ */ jsx(SelectValue, {})
-						}), /* @__PURE__ */ jsx(SelectContent, { children: T.map((e) => /* @__PURE__ */ jsx(SelectItem, {
-							value: e.slotId,
-							children: e.envName || e.slotId
-						}, e.slotId)) })]
-					}),
-					T.length === 1 && O && /* @__PURE__ */ jsx("span", {
-						className: "text-xs text-zinc-400",
-						children: O.envName || O.slotId
-					})
-				]
-			}), /* @__PURE__ */ jsxs("div", {
-				className: "flex items-center gap-1",
-				children: [k && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-					asChild: !0,
-					children: /* @__PURE__ */ jsx("a", {
-						href: k,
-						target: "_blank",
-						rel: "noopener noreferrer",
-						className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
-						children: /* @__PURE__ */ jsx(ExternalLink, { className: "h-4 w-4" })
-					})
-				}), /* @__PURE__ */ jsx(TooltipContent, {
-					side: "bottom",
-					children: "Open in new tab"
-				})] }), /* @__PURE__ */ jsx("button", {
-					onClick: x,
-					className: "text-zinc-400 hover:text-white flex h-8 w-8 items-center justify-center rounded-md transition-colors hover:cursor-pointer",
-					children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-				})]
-			})]
-		}), k ? /* @__PURE__ */ jsx("div", {
-			className: "flex-1 overflow-hidden p-3 pt-0",
-			children: /* @__PURE__ */ jsx("iframe", {
-				ref: w,
-				src: k,
-				className: "bg-background h-full w-full rounded-lg",
-				title: "Workflow preview"
-			})
-		}) : /* @__PURE__ */ jsx("div", {
-			className: "text-zinc-400 flex flex-1 items-center justify-center text-sm",
-			children: "Preview not available"
-		})]
-	});
+		}), _[33] = g) : g = _[33];
+		let v;
+		return _[34] !== x || _[35] !== S || _[36] !== C ? (v = /* @__PURE__ */ jsx(SidebarPanel, {
+			icon: e,
+			title: "Preview",
+			size: S,
+			onSizeChange: C,
+			onClose: x,
+			children: g
+		}), _[34] = x, _[35] = S, _[36] = C, _[37] = v) : v = _[37], v;
+	}
+	let H;
+	_[38] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsx(MonitorPlay, { className: "h-4 w-4" }), _[38] = H) : H = _[38];
+	let U = k.length === 1 && F ? F.envName || F.slotId : void 0, W;
+	_[39] !== k || _[40] !== z || _[41] !== w ? (W = k.length > 1 && /* @__PURE__ */ jsx("div", {
+		className: "border-b px-4 py-2",
+		children: /* @__PURE__ */ jsxs(Select, {
+			value: w,
+			onValueChange: z,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "h-8 text-xs",
+				children: /* @__PURE__ */ jsx(SelectValue, {})
+			}), /* @__PURE__ */ jsx(SelectContent, { children: k.map(_temp2) })]
+		})
+	}), _[39] = k, _[40] = z, _[41] = w, _[42] = W) : W = _[42];
+	let G;
+	_[43] === L ? G = _[44] : (G = L ? /* @__PURE__ */ jsx("div", {
+		className: "flex-1 overflow-hidden p-3",
+		children: /* @__PURE__ */ jsx("iframe", {
+			ref: E,
+			src: L,
+			className: "bg-muted h-full w-full rounded-lg border",
+			title: "Workflow preview"
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground flex flex-1 items-center justify-center text-sm",
+		children: "Preview not available"
+	}), _[43] = L, _[44] = G);
+	let K;
+	_[45] !== W || _[46] !== G ? (K = /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col",
+		children: [W, G]
+	}), _[45] = W, _[46] = G, _[47] = K) : K = _[47];
+	let q;
+	return _[48] !== x || _[49] !== S || _[50] !== L || _[51] !== C || _[52] !== U || _[53] !== K ? (q = /* @__PURE__ */ jsx(SidebarPanel, {
+		icon: H,
+		title: "Preview",
+		description: U,
+		size: S,
+		onSizeChange: C,
+		onClose: x,
+		expandUrl: L,
+		children: K
+	}), _[48] = x, _[49] = S, _[50] = L, _[51] = C, _[52] = U, _[53] = K, _[54] = q) : q = _[54], q;
+}
+function _temp2(e) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: e.slotId,
+		children: e.envName || e.slotId
+	}, e.slotId);
+}
+function _temp(e) {
+	return !!e.connectionUrl && (!!e.workerId || e.local);
 }
 export { WorkbenchPreviewPanel };

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

@@ -0,0 +1,32 @@
+import { useWorkspace } from "../../../hooks/useWorkspaces.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { SidebarPanel } from "./SidebarPanel.js";
+import ExecutionTimeline_default from "../../workspaces/components/ExecutionTimeline.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { Loader2, Play } from "lucide-react";
+function WorkbenchRunsPanel() {
+	let l = c(11), { workspaceId: u, panelSize: d, setPanelSize: f, closePanel: p } = useWorkbenchLayout(), { data: m, isLoading: h } = useWorkspace(u), g;
+	l[0] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }), l[0] = g) : g = l[0];
+	let _;
+	l[1] !== h || l[2] !== m ? (_ = h ? /* @__PURE__ */ jsx("div", {
+		className: "flex items-center justify-center py-8",
+		children: /* @__PURE__ */ jsx(Loader2, { className: "h-5 w-5 animate-spin text-muted-foreground" })
+	}) : m ? /* @__PURE__ */ jsx(ExecutionTimeline_default, { workspace: m }) : null, l[1] = h, l[2] = m, l[3] = _) : _ = l[3];
+	let v;
+	l[4] === _ ? v = l[5] : (v = /* @__PURE__ */ jsx("div", {
+		className: "h-full overflow-auto p-4",
+		children: _
+	}), l[4] = _, l[5] = v);
+	let y;
+	return l[6] !== p || l[7] !== d || l[8] !== f || l[9] !== v ? (y = /* @__PURE__ */ jsx(SidebarPanel, {
+		icon: g,
+		title: "Runs",
+		description: "Workflow execution history for this workspace.",
+		size: d,
+		onSizeChange: f,
+		onClose: p,
+		children: v
+	}), l[6] = p, l[7] = d, l[8] = f, l[9] = v, l[10] = y) : y = l[10], y;
+}
+export { WorkbenchRunsPanel };