@loopstack/loopstack-studio 0.22.0 → 0.23.1

package/dist/app/EnvironmentEmbedRoot.js

@@ -2,32 +2,34 @@ import { StudioProvider } from "../providers/StudioProvider.js";
 import { SseProvider } from "../providers/SseProvider.js";
 import { InvalidationEventsProvider } from "../providers/InvalidationEventsProvider.js";
 import { useRouter } from "../routing/LocalRouter.js";
+import LocalHealthCheck_default from "../features/health/LocalHealthCheck.js";
 import { QueryProvider } from "../providers/QueryProvider.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Outlet, useSearchParams } from "react-router-dom";
 function EnvironmentEmbedRoot() {
-	let d = c(13), [f] = useSearchParams(), p;
-	d[0] === f ? p = d[1] : (p = f.get("url") ?? "http://localhost:3080", d[0] = f, d[1] = p);
-	let m = p, h;
-	d[2] === f ? h = d[3] : (h = f.get("name") ?? "Preview Environment", d[2] = f, d[3] = h);
-	let g = h, _;
-	d[4] !== g || d[5] !== m ? (_ = {
+	let f = c(14), [p] = useSearchParams(), m;
+	f[0] === p ? m = f[1] : (m = p.get("url") ?? "http://localhost:3080", f[0] = p, f[1] = m);
+	let h = m, g;
+	f[2] === p ? g = f[3] : (g = p.get("name") ?? "Preview Environment", f[2] = p, f[3] = g);
+	let _ = g, v;
+	f[4] !== _ || f[5] !== h ? (v = {
 		id: "preview-env",
-		name: g,
-		url: m
-	}, d[4] = g, d[5] = m, d[6] = _) : _ = d[6];
-	let v = _, y = useRouter(v.id), b, x, S;
-	d[7] === Symbol.for("react.memo_cache_sentinel") ? (b = /* @__PURE__ */ jsx(SseProvider, {}), x = /* @__PURE__ */ jsx(InvalidationEventsProvider, {}), S = /* @__PURE__ */ jsx(Outlet, {}), d[7] = b, d[8] = x, d[9] = S) : (b = d[7], x = d[8], S = d[9]);
-	let C;
-	return d[10] !== v || d[11] !== y ? (C = /* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsxs(StudioProvider, {
-		router: y,
-		environment: v,
+		name: _,
+		url: h
+	}, f[4] = _, f[5] = h, f[6] = v) : v = f[6];
+	let y = v, b = useRouter(y.id, "/embed/env"), x, S, C, w;
+	f[7] === Symbol.for("react.memo_cache_sentinel") ? (x = /* @__PURE__ */ jsx(LocalHealthCheck_default, {}), S = /* @__PURE__ */ jsx(SseProvider, {}), C = /* @__PURE__ */ jsx(InvalidationEventsProvider, {}), w = /* @__PURE__ */ jsx(Outlet, {}), f[7] = x, f[8] = S, f[9] = C, f[10] = w) : (x = f[7], S = f[8], C = f[9], w = f[10]);
+	let T;
+	return f[11] !== y || f[12] !== b ? (T = /* @__PURE__ */ jsx(QueryProvider, { children: /* @__PURE__ */ jsxs(StudioProvider, {
+		router: b,
+		environment: y,
 		children: [
-			b,
 			x,
-			S
+			S,
+			C,
+			w
 		]
-	}) }), d[10] = v, d[11] = y, d[12] = C) : C = d[12], C;
+	}) }), f[11] = y, f[12] = b, f[13] = T) : T = f[13], T;
 }
 export { EnvironmentEmbedRoot as default };

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

@@ -1,35 +1,58 @@
 import { FormElementHeader } from "./FormElementHeader.js";
 import FormBody_default from "./FormBody.js";
 import { c } from "react/compiler-runtime";
-import React from "react";
+import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var Form_default = (a) => {
-	let o = c(20), { form: s, schema: l, ui: u, mimeType: d, disabled: f, viewOnly: p, actions: m } = a, h = u, g = h?.form?.title, _ = h?.form?.description, v;
-	o[0] !== f || o[1] !== g || o[2] !== _ ? (v = /* @__PURE__ */ jsx(FormElementHeader, {
-		title: g,
-		description: _,
-		disabled: f
-	}), o[0] = f, o[1] = g, o[2] = _, o[3] = v) : v = o[3];
-	let y = l, b = u?.form, x;
-	o[4] !== f || o[5] !== s || o[6] !== d || o[7] !== y || o[8] !== b || o[9] !== p ? (x = /* @__PURE__ */ jsx(FormBody_default, {
-		form: s,
-		mimeType: d,
-		schema: y,
-		ui: b,
-		disabled: f,
-		viewOnly: p
-	}), o[4] = f, o[5] = s, o[6] = d, o[7] = y, o[8] = b, o[9] = p, o[10] = x) : x = o[10];
-	let S;
-	o[11] !== m || o[12] !== p ? (S = !p && !!m && /* @__PURE__ */ jsx("div", {
+function extractSchemaDefaults(e) {
+	if (e.default !== void 0) return e.default;
+	if (e.properties) {
+		let i = {}, a = !1;
+		for (let [o, s] of Object.entries(e.properties)) if (s.default !== void 0) i[o] = s.default, a = !0;
+		else if (s.type === "object" && s.properties) {
+			let e = extractSchemaDefaults(s);
+			e !== void 0 && (i[o] = e, a = !0);
+		}
+		return a ? i : void 0;
+	}
+}
+var Form_default = (o) => {
+	let l = c(25), { form: u, schema: d, ui: f, mimeType: p, disabled: m, viewOnly: h, actions: g } = o, _ = f, v = d, y;
+	l[0] !== u || l[1] !== v ? (y = () => {
+		let e = extractSchemaDefaults(v);
+		if (e) {
+			let i = u.getValues(), a = { ...e };
+			for (let [e, o] of Object.entries(i)) o !== void 0 && o !== "" && o !== null && (a[e] = o);
+			u.reset(a);
+		}
+	}, l[0] = u, l[1] = v, l[2] = y) : y = l[2];
+	let b;
+	l[3] === d ? b = l[4] : (b = [d], l[3] = d, l[4] = b), useEffect(y, b);
+	let x = _?.form?.title, S = _?.form?.description, C;
+	l[5] !== m || l[6] !== x || l[7] !== S ? (C = /* @__PURE__ */ jsx(FormElementHeader, {
+		title: x,
+		description: S,
+		disabled: m
+	}), l[5] = m, l[6] = x, l[7] = S, l[8] = C) : C = l[8];
+	let w = d, T = f?.form, E;
+	l[9] !== m || l[10] !== u || l[11] !== p || l[12] !== w || l[13] !== T || l[14] !== h ? (E = /* @__PURE__ */ jsx(FormBody_default, {
+		form: u,
+		mimeType: p,
+		schema: w,
+		ui: T,
+		disabled: m,
+		viewOnly: h
+	}), l[9] = m, l[10] = u, l[11] = p, l[12] = w, l[13] = T, l[14] = h, l[15] = E) : E = l[15];
+	let D;
+	l[16] !== g || l[17] !== h ? (D = !h && !!g && /* @__PURE__ */ jsx("div", {
 		className: "mt-4 flex w-full justify-end",
-		children: m
-	}), o[11] = m, o[12] = p, o[13] = S) : S = o[13];
-	let C;
-	o[14] !== x || o[15] !== S ? (C = /* @__PURE__ */ jsxs("form", { children: [x, S] }), o[14] = x, o[15] = S, o[16] = C) : C = o[16];
-	let w;
-	return o[17] !== v || o[18] !== C ? (w = /* @__PURE__ */ jsxs("div", {
+		children: g
+	}), l[16] = g, l[17] = h, l[18] = D) : D = l[18];
+	let O;
+	l[19] !== E || l[20] !== D ? (O = /* @__PURE__ */ jsxs("form", { children: [E, D] }), l[19] = E, l[20] = D, l[21] = O) : O = l[21];
+	let k;
+	return l[22] !== O || l[23] !== C ? (k = /* @__PURE__ */ jsxs("div", {
 		className: "container mx-auto",
-		children: [v, C]
-	}), o[17] = v, o[18] = C, o[19] = w) : w = o[19], w;
+		children: [C, O]
+	}), l[22] = O, l[23] = C, l[24] = k) : k = l[24], k;
 };
 export { Form_default as default };

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

@@ -2,6 +2,7 @@ import { InputField } from "./fields/InputField.js";
 import { TextareaField } from "./fields/TextareaField.js";
 import { CheckboxField } from "./fields/CheckboxField.js";
 import { CodeViewField } from "./fields/CodeViewField.js";
+import { MarkdownViewField } from "./fields/MarkdownViewField.js";
 import { RadioField } from "./fields/RadioField.js";
 import { SelectField } from "./fields/SelectField.js";
 import { SliderField } from "./fields/SliderField.js";
@@ -17,7 +18,8 @@ var WIDGET_REGISTRY = {
 	slider: SliderField,
 	text: InputField,
 	textarea: TextareaField,
-	"code-view": CodeViewField
+	"code-view": CodeViewField,
+	"markdown-view": MarkdownViewField
 }, WIDGET_NAMES = Object.keys(WIDGET_REGISTRY), resolveWidgetType = (e, o) => {
 	if (o && WIDGET_NAMES.includes(o)) return o;
 	let s = e;

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

@@ -0,0 +1,20 @@
+import MarkdownContent_default from "../MarkdownContent.js";
+import { useFieldConfig } from "../hooks/useFieldConfig.js";
+import { c } from "react/compiler-runtime";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Controller } from "react-hook-form";
+const MarkdownViewField = (e) => {
+	let o = c(4), { name: s, schema: l, ui: u, form: d, disabled: f } = e, p = useFieldConfig(s, l, u, f).defaultValue || "", m;
+	return o[0] !== d.control || o[1] !== s || o[2] !== p ? (m = /* @__PURE__ */ jsx(Controller, {
+		name: s,
+		control: d.control,
+		defaultValue: p,
+		render: _temp
+	}), o[0] = d.control, o[1] = s, o[2] = p, o[3] = m) : m = o[3], m;
+};
+function _temp(i) {
+	let { field: a } = i;
+	return /* @__PURE__ */ jsx(MarkdownContent_default, { content: String(a.value ?? "") });
+}
+export { MarkdownViewField };

package/dist/components/feedback/ErrorBoundary.js

@@ -0,0 +1,43 @@
+import { Button } from "../ui/button.js";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert.js";
+import { Component } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle } from "lucide-react";
+var ErrorBoundary = class extends Component {
+	state = {
+		hasError: !1,
+		error: null
+	};
+	static getDerivedStateFromError(e) {
+		return {
+			hasError: !0,
+			error: e
+		};
+	}
+	componentDidCatch(e, c) {}
+	handleRetry = () => {
+		this.props.onRetry ? this.props.onRetry() : this.setState({
+			hasError: !1,
+			error: null
+		});
+	};
+	render() {
+		return this.state.hasError && this.state.error ? this.props.fallback ? this.props.fallback : /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-[200px] flex-col items-center justify-center gap-4 p-6",
+			children: [/* @__PURE__ */ jsxs(Alert, {
+				variant: "destructive",
+				className: "max-w-lg",
+				children: [
+					/* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+					/* @__PURE__ */ jsx(AlertTitle, { children: "Something went wrong" }),
+					/* @__PURE__ */ jsxs(AlertDescription, { children: [this.state.error.message, !1] })
+				]
+			}), /* @__PURE__ */ jsx(Button, {
+				onClick: this.handleRetry,
+				variant: "outline",
+				children: "Try again"
+			})]
+		}) : this.props.children;
+	}
+};
+export { ErrorBoundary };

package/dist/components/{LoadingCentered.js → feedback/LoadingCentered.js}

@@ -1,4 +1,4 @@
-import { cn } from "../lib/utils.js";
+import { cn } from "../../lib/utils.js";
 import { c } from "react/compiler-runtime";
 import React from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";

package/dist/components/feedback/index.js

@@ -0,0 +1,5 @@
+import { ErrorBoundary } from "./ErrorBoundary.js";
+import LoadingCentered_default from "./LoadingCentered.js";
+import Snackbar_default from "./Snackbar.js";
+import ErrorSnackbar_default from "./ErrorSnackbar.js";
+import ErrorAlert_default from "./ErrorAlert.js";

package/dist/components/index.js

@@ -40,6 +40,9 @@ import { DataList } from "./data-table/DataList.js";
 import ListView_default from "./lists/ListView.js";
 import CustomListView_default from "./lists/CustomListView.js";
 import CompletionMessagePaper_default from "./messages/CompletionMessagePaper.js";
-import Snackbar_default from "./snackbars/Snackbar.js";
-import ErrorSnackbar_default from "./snackbars/ErrorSnackbar.js";
-import LoadingCentered_default from "./LoadingCentered.js";
+import { ErrorBoundary } from "./feedback/ErrorBoundary.js";
+import LoadingCentered_default from "./feedback/LoadingCentered.js";
+import Snackbar_default from "./feedback/Snackbar.js";
+import ErrorSnackbar_default from "./feedback/ErrorSnackbar.js";
+import ErrorAlert_default from "./feedback/ErrorAlert.js";
+import "./feedback/index.js";

package/dist/components/layout/MainLayout.js

@@ -1,26 +1,42 @@
+import { Separator } from "../ui/separator.js";
+import { SidebarTrigger, useSidebar } from "../ui/sidebar.js";
 import PageBreadcrumbs_default from "../page/PageBreadcrumbs.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-var MainLayout_default = (i) => {
-	let a = c(10), { children: o, breadcrumbsData: s, headerMenu: l } = i, u;
-	a[0] === s ? u = a[1] : (u = /* @__PURE__ */ jsx(PageBreadcrumbs_default, { breadcrumbData: s }), a[0] = s, a[1] = u);
-	let d;
-	a[2] !== l || a[3] !== u ? (d = /* @__PURE__ */ jsxs("div", {
-		className: "border-b flex h-12 shrink-0 items-center justify-between",
-		children: [u, l]
-	}), a[2] = l, a[3] = u, a[4] = d) : d = a[4];
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SidebarTriggerSafe = () => {
+	try {
+		return useSidebar(), /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarTrigger, { className: "-ml-1" }), /* @__PURE__ */ jsx(Separator, {
+			orientation: "vertical",
+			className: "mr-2 data-[orientation=vertical]:h-4"
+		})] });
+	} catch {
+		return null;
+	}
+}, MainLayout_default = (e) => {
+	let o = c(11), { children: s, breadcrumbsData: l, headerMenu: u } = e, d;
+	o[0] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx(SidebarTriggerSafe, {}), o[0] = d) : d = o[0];
 	let f;
-	a[5] === o ? f = a[6] : (f = /* @__PURE__ */ jsx("div", {
+	o[1] === l ? f = o[2] : (f = /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [d, /* @__PURE__ */ jsx(PageBreadcrumbs_default, { breadcrumbData: l })]
+	}), o[1] = l, o[2] = f);
+	let p;
+	o[3] !== u || o[4] !== f ? (p = /* @__PURE__ */ jsxs("div", {
+		className: "border-b flex h-12 shrink-0 items-center justify-between gap-2 px-4",
+		children: [f, u]
+	}), o[3] = u, o[4] = f, o[5] = p) : p = o[5];
+	let m;
+	o[6] === s ? m = o[7] : (m = /* @__PURE__ */ jsx("div", {
 		className: "flex-1 overflow-auto p-4",
 		children: /* @__PURE__ */ jsx("div", {
 			className: "space-y-6",
-			children: o
+			children: s
 		})
-	}), a[5] = o, a[6] = f);
-	let p;
-	return a[7] !== d || a[8] !== f ? (p = /* @__PURE__ */ jsxs("div", {
+	}), o[6] = s, o[7] = m);
+	let h;
+	return o[8] !== p || o[9] !== m ? (h = /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
-		children: [d, f]
-	}), a[7] = d, a[8] = f, a[9] = p) : p = a[9], p;
+		children: [p, m]
+	}), o[8] = p, o[9] = m, o[10] = h) : h = o[10], h;
 };
 export { MainLayout_default as default };

package/dist/components/layout/StudioSidebar.js

@@ -0,0 +1,165 @@
+import { useStudio, useStudioOptional } from "../../providers/StudioProvider.js";
+import { useFilterPipelines } from "../../hooks/usePipelines.js";
+import { useComponentOverrides } from "../../providers/ComponentOverridesProvider.js";
+import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarMenu, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarTrigger, useSidebar } from "../ui/sidebar.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Link, useLocation } from "react-router-dom";
+import { CircleAlert, Info, LayoutDashboard, LayoutGrid, Play, Workflow } from "lucide-react";
+var DefaultSidebarHeader = () => {
+	let e = c(5), { state: u } = useSidebar(), d;
+	e[0] === u ? d = e[1] : (d = u === "expanded" && /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 px-1.5",
+		children: [/* @__PURE__ */ jsx("img", {
+			src: "/loopstack.svg",
+			alt: "Loopstack",
+			className: "h-6 w-6"
+		}), /* @__PURE__ */ jsx("span", {
+			className: "text-sm font-semibold",
+			children: "Loopstack Studio"
+		})]
+	}), e[0] = u, e[1] = d);
+	let f;
+	e[2] === Symbol.for("react.memo_cache_sentinel") ? (f = /* @__PURE__ */ jsx(SidebarTrigger, { className: "hover:cursor-pointer" }), e[2] = f) : f = e[2];
+	let p;
+	return e[3] === d ? p = e[4] : (p = /* @__PURE__ */ jsxs(SidebarHeader, {
+		className: "border-sidebar-border h-12 w-full flex-row items-center justify-between border-b px-1.5 py-0",
+		children: [d, f]
+	}), e[3] = d, e[4] = p), p;
+}, RunsNav = () => {
+	let u = c(26), f = useLocation(), { router: p } = useStudio(), m = p.getRuns(), h;
+	u[0] === p ? h = u[1] : (h = p.getRunsActionRequired(), u[0] = p, u[1] = h);
+	let y = h, C;
+	u[2] === Symbol.for("react.memo_cache_sentinel") ? (C = {
+		parentId: null,
+		status: "paused"
+	}, u[2] = C) : C = u[2];
+	let w = useFilterPipelines(void 0, C, "createdAt", "DESC", 0, 1).data?.total ?? 0, T;
+	u[3] === Symbol.for("react.memo_cache_sentinel") ? (T = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Runs" }), u[3] = T) : T = u[3];
+	let E = f.pathname === m || f.pathname === m + "/", D, O;
+	u[4] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Play, {}), O = /* @__PURE__ */ jsx("span", { children: "Overview" }), u[4] = D, u[5] = O) : (D = u[4], O = u[5]);
+	let k;
+	u[6] === m ? k = u[7] : (k = /* @__PURE__ */ jsxs(Link, {
+		to: m,
+		children: [D, O]
+	}), u[6] = m, u[7] = k);
+	let A;
+	u[8] !== E || u[9] !== k ? (A = /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !0,
+		isActive: E,
+		tooltip: "Overview",
+		children: k
+	}) }), u[8] = E, u[9] = k, u[10] = A) : A = u[10];
+	let j = f.pathname === y, M, N;
+	u[11] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx(CircleAlert, {}), M = /* @__PURE__ */ jsx("span", { children: "Action Required" }), u[11] = M, u[12] = N) : (M = u[11], N = u[12]);
+	let P;
+	u[13] === y ? P = u[14] : (P = /* @__PURE__ */ jsxs(Link, {
+		to: y,
+		children: [N, M]
+	}), u[13] = y, u[14] = P);
+	let F;
+	u[15] !== P || u[16] !== j ? (F = /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !0,
+		isActive: j,
+		tooltip: "Action Required",
+		children: P
+	}), u[15] = P, u[16] = j, u[17] = F) : F = u[17];
+	let I;
+	u[18] === w ? I = u[19] : (I = w > 0 && /* @__PURE__ */ jsx(SidebarMenuBadge, { children: w }), u[18] = w, u[19] = I);
+	let L;
+	u[20] !== F || u[21] !== I ? (L = /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [F, I] }), u[20] = F, u[21] = I, u[22] = L) : L = u[22];
+	let R;
+	return u[23] !== L || u[24] !== A ? (R = /* @__PURE__ */ jsxs(SidebarGroup, { children: [T, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsxs(SidebarMenu, { children: [A, L] }) })] }), u[23] = L, u[24] = A, u[25] = R) : R = u[25], R;
+}, WorkspacesNav = () => {
+	let u = c(11), d = useLocation(), { router: f } = useStudio(), p = f.getWorkspaces(), m;
+	u[0] === Symbol.for("react.memo_cache_sentinel") ? (m = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Workspaces" }), u[0] = m) : m = u[0];
+	let h;
+	u[1] !== d.pathname || u[2] !== p ? (h = d.pathname === p || d.pathname.startsWith(p + "/"), u[1] = d.pathname, u[2] = p, u[3] = h) : h = u[3];
+	let y, x;
+	u[4] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ jsx(LayoutGrid, {}), x = /* @__PURE__ */ jsx("span", { children: "My Workspaces" }), u[4] = y, u[5] = x) : (y = u[4], x = u[5]);
+	let C;
+	u[6] === p ? C = u[7] : (C = /* @__PURE__ */ jsxs(Link, {
+		to: p,
+		children: [y, x]
+	}), u[6] = p, u[7] = C);
+	let w;
+	return u[8] !== h || u[9] !== C ? (w = /* @__PURE__ */ jsxs(SidebarGroup, { children: [m, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !0,
+		isActive: h,
+		tooltip: "My Workspaces",
+		children: C
+	}) }) }) })] }), u[8] = h, u[9] = C, u[10] = w) : w = u[10], w;
+}, InsightsNav = () => {
+	let u = c(15), d = useLocation(), { router: f } = useStudio(), p;
+	u[0] === f ? p = u[1] : (p = f.getDashboard(), u[0] = f, u[1] = p);
+	let m;
+	u[2] === p ? m = u[3] : (m = {
+		label: "Dashboard",
+		href: p,
+		icon: LayoutDashboard
+	}, u[2] = p, u[3] = m);
+	let h;
+	u[4] === f ? h = u[5] : (h = f.getDebugWorkflows(), u[4] = f, u[5] = h);
+	let y;
+	u[6] === h ? y = u[7] : (y = {
+		label: "Workflows",
+		href: h,
+		icon: Workflow
+	}, u[6] = h, u[7] = y);
+	let x;
+	u[8] !== m || u[9] !== y ? (x = [m, y], u[8] = m, u[9] = y, u[10] = x) : x = u[10];
+	let C = x, w;
+	u[11] === Symbol.for("react.memo_cache_sentinel") ? (w = /* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Insights" }), u[11] = w) : w = u[11];
+	let T;
+	return u[12] !== d || u[13] !== C ? (T = /* @__PURE__ */ jsxs(SidebarGroup, { children: [w, /* @__PURE__ */ jsx(SidebarGroupContent, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: C.map((e) => /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !0,
+		isActive: d.pathname === e.href,
+		tooltip: e.label,
+		children: /* @__PURE__ */ jsxs(Link, {
+			to: e.href,
+			children: [/* @__PURE__ */ jsx(e.icon, {}), /* @__PURE__ */ jsx("span", { children: e.label })]
+		})
+	}) }, e.href)) }) })] }), u[12] = d, u[13] = C, u[14] = T) : T = u[14], T;
+}, DefaultSidebarFooter = () => {
+	let u = c(9), d = useLocation(), { router: f } = useStudio(), p;
+	u[0] === f ? p = u[1] : (p = f.getEnvironmentInfo(), u[0] = f, u[1] = p);
+	let m = p, g = d.pathname === m, _, v;
+	u[2] === Symbol.for("react.memo_cache_sentinel") ? (_ = /* @__PURE__ */ jsx(Info, {}), v = /* @__PURE__ */ jsx("span", { children: "Info" }), u[2] = _, u[3] = v) : (_ = u[2], v = u[3]);
+	let y;
+	u[4] === m ? y = u[5] : (y = /* @__PURE__ */ jsxs(Link, {
+		to: m,
+		children: [_, v]
+	}), u[4] = m, u[5] = y);
+	let x;
+	return u[6] !== g || u[7] !== y ? (x = /* @__PURE__ */ jsx(SidebarFooter, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsx(SidebarMenuButton, {
+		asChild: !0,
+		isActive: g,
+		size: "sm",
+		tooltip: "Info",
+		children: y
+	}) }) }) }), u[6] = g, u[7] = y, u[8] = x) : x = u[8], x;
+};
+const StudioSidebar = () => {
+	let e = c(13), d = useComponentOverrides(), h = useStudioOptional(), g = d.SidebarHeader ?? DefaultSidebarHeader, _ = d.SidebarFooter ?? DefaultSidebarFooter, v;
+	e[0] === g ? v = e[1] : (v = /* @__PURE__ */ jsx(g, {}), e[0] = g, e[1] = v);
+	let y;
+	e[2] === h ? y = e[3] : (y = h && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(RunsNav, {}),
+		/* @__PURE__ */ jsx(WorkspacesNav, {}),
+		/* @__PURE__ */ jsx(InsightsNav, {})
+	] }), e[2] = h, e[3] = y);
+	let b;
+	e[4] === y ? b = e[5] : (b = /* @__PURE__ */ jsx(SidebarContent, { children: y }), e[4] = y, e[5] = b);
+	let x;
+	e[6] !== _ || e[7] !== h ? (x = h && /* @__PURE__ */ jsx(_, {}), e[6] = _, e[7] = h, e[8] = x) : x = e[8];
+	let S;
+	return e[9] !== v || e[10] !== b || e[11] !== x ? (S = /* @__PURE__ */ jsxs(Sidebar, {
+		collapsible: "icon",
+		children: [
+			v,
+			b,
+			x
+		]
+	}), e[9] = v, e[10] = b, e[11] = x, e[12] = S) : S = e[12], S;
+};
+export { StudioSidebar };

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

@@ -1,6 +1,7 @@
 import { Button } from "../../ui/button.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/tooltip.js";
 import { useWorkbenchLayout } from "../../../features/workbench/providers/WorkbenchLayoutProvider.js";
+import "../../../features/workbench/index.js";
 import { c } from "react/compiler-runtime";
 import React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/features/code-explorer/CodeExplorer.js

@@ -0,0 +1,6 @@
+import "../../lib/utils.js";
+import "../../components/ui/input.js";
+import "./providers/CodeExplorerProvider.js";
+import "./components/CodeExplorerTree.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";

package/dist/features/code-explorer/components/CodeExplorerTree.js

@@ -0,0 +1,5 @@
+import "../../../components/ui/scroll-area.js";
+import "../providers/CodeExplorerProvider.js";
+import "./CodeExplorerTreeNode.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";

package/dist/features/code-explorer/components/CodeExplorerTreeNode.js

@@ -0,0 +1,82 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../../../components/ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../components/ui/collapsible.js";
+import { getFileIcon, getFolderIcon } from "../utils/fileIcons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, X } from "lucide-react";
+var INDENT_PX = 16, BASE_PADDING_PX = 8;
+function CodeExplorerTreeNode({ node: h, depth: g, onSelectFile: _, onClearSelection: v, onCloseFile: y, isSelected: b = !1, selectedFileId: x, expandedFolders: S = /* @__PURE__ */ new Set(), toggleFolder: C }) {
+	let w = S.has(h.id), T = g * INDENT_PX + BASE_PADDING_PX, E = x === h.id || b;
+	if (h.type === "file") {
+		let m = getFileIcon(h.name);
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex w-full min-w-0 items-center gap-2 rounded-sm py-1 group", "text-muted-foreground", E && "bg-muted"),
+			style: { paddingLeft: T },
+			children: [/* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: cn("flex flex-1 min-w-0 items-center gap-2 rounded-sm text-left text-sm hover:bg-muted/50", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"),
+				onClick: () => _?.(h),
+				"aria-label": `Select file ${h.name}`,
+				children: [/* @__PURE__ */ jsx(m, {
+					className: "h-4 w-4 shrink-0 text-muted-foreground",
+					"aria-hidden": !0
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: h.name
+				})]
+			}), E && (y || v) && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				className: "h-6 w-6 shrink-0 opacity-0 group-hover:opacity-100 transition-opacity",
+				onClick: (e) => {
+					e.stopPropagation(), y ? y(h) : v && v();
+				},
+				"aria-label": "Close file",
+				children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+			})]
+		});
+	}
+	let D = h.children && h.children.length > 0, O = getFolderIcon(w);
+	return /* @__PURE__ */ jsxs(Collapsible, {
+		open: w,
+		onOpenChange: () => {
+			C && C(h.id);
+		},
+		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
+			className: cn("flex w-full min-w-0 items-center gap-1 rounded-sm py-1 text-left text-sm hover:bg-muted", "text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "disabled:cursor-default disabled:opacity-50"),
+			style: { paddingLeft: T },
+			disabled: !D,
+			"aria-label": `${w ? "Collapse" : "Expand"} folder ${h.name}`,
+			children: [
+				D ? jsx(w ? ChevronDown : ChevronRight, {
+					className: "h-4 w-4 shrink-0",
+					"aria-hidden": !0
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "w-4 shrink-0",
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ jsx(O, {
+					className: "h-4 w-4 shrink-0 text-muted-foreground",
+					"aria-hidden": !0
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: h.name
+				})
+			]
+		}), D && /* @__PURE__ */ jsx(CollapsibleContent, {
+			className: "h-full",
+			children: h.children.map((e) => /* @__PURE__ */ jsx(CodeExplorerTreeNode, {
+				node: e,
+				depth: g + 1,
+				onSelectFile: _,
+				onClearSelection: v,
+				onCloseFile: y,
+				selectedFileId: x,
+				expandedFolders: S,
+				toggleFolder: C
+			}, e.id))
+		})]
+	});
+}
+export { CodeExplorerTreeNode };

package/dist/features/code-explorer/components/FileContentViewer.js

@@ -4,6 +4,7 @@ import MarkdownContent_default from "../../../components/dynamic-form/MarkdownCo
 import { ReactFlowProvider } from "../../../node_modules/@xyflow/react/dist/esm/index.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../../components/ui/tabs.js";
 import ConfigFlowViewer_default from "../../debug/components/ConfigFlowViewer.js";
+import "../../debug/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2 } from "lucide-react";