@loopstack/loopstack-studio 0.23.0 → 0.23.1

package/dist/pages/PreviewWorkbenchPage.js

@@ -7,12 +7,12 @@ import { SidebarMenu, SidebarProvider } from "../components/ui/sidebar.js";
 import LoadingCentered_default from "../components/feedback/LoadingCentered.js";
 import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
 import { require_enums } from "../packages/contracts/dist/enums/index.js";
-import { ReactFlowProvider } from "../node_modules/@xyflow/react/dist/esm/index.js";
 import { useFetchWorkflowsByPipeline } from "../hooks/useWorkflows.js";
-import PipelineFlowViewer_default from "../features/debug/components/PipelineFlowViewer.js";
-import "../features/debug/index.js";
 import WorkflowItem_default from "../features/workbench/WorkflowItem.js";
 import WorkflowButtons_default from "../features/workbench/components/buttons/WorkflowButtons.js";
+import { ReactFlowProvider } from "../node_modules/@xyflow/react/dist/esm/index.js";
+import PipelineFlowViewer_default from "../features/debug/components/PipelineFlowViewer.js";
+import "../features/debug/index.js";
 import { useNamespaceTree } from "../hooks/useNamespaceTree.js";
 import WorkbenchNavigation_default from "../features/workbench/WorkbenchNavigation.js";
 import PipelineHistoryList_default from "../features/workbench/components/PipelineHistoryList.js";
@@ -21,8 +21,9 @@ import "../features/workbench/index.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
 import { useNavigate, useParams } from "react-router-dom";
-import { ChevronDown, ChevronRight, ListOrdered, Loader2, Navigation, Play, ScrollText, Workflow } from "lucide-react";
+import { ChevronDown, ChevronRight, ListOrdered, Loader2, Navigation, Play, RefreshCw, ScrollText, Workflow } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
 var import_enums = require_enums(), EMBED_MESSAGE_TYPE = "loopstack:embed:workflow-completed", EMBED_RESIZE_MESSAGE_TYPE = "loopstack:embed:resize", EMBED_NEW_RUN_MESSAGE_TYPE = "loopstack:embed:new-run";
 function PreviewWorkbenchPage() {
@@ -49,17 +50,17 @@ function PreviewWorkbenchPage() {
 	}), e[3] = t, e[4] = o), o;
 }
 function PreviewWorkbenchContent(e) {
-	let t = c(57), { pipelineId: o, onNewRunSuccess: s } = e, l = useRef(null), [u, d] = useState("output"), [m, y] = useState(!1), b = usePipeline(o), x = useFetchWorkflowsByPipeline(o), C;
+	let t = c(61), { pipelineId: o, onNewRunSuccess: s } = e, l = useRef(null), [u, d] = useState("output"), [m, _] = useState(!1), b = usePipeline(o), x = useFetchWorkflowsByPipeline(o), C;
 	t[0] === x.data ? C = t[1] : (C = x.data ?? [], t[0] = x.data, t[1] = C);
-	let T = C, E = useRef(!1), D = b.data?.workspaceId, ge = useWorkspace(D).data?.blockName, _e = b.data?.blockName, O = usePipelineConfigByName(ge, _e), k, A;
-	t[2] !== x.data || t[3] !== o ? (k = () => {
+	let T = C, E = useRef(!1), _e = b.data?.workspaceId, ve = useWorkspace(_e).data?.blockName, ye = b.data?.blockName, D = usePipelineConfigByName(ve, ye), O, k;
+	t[2] !== x.data || t[3] !== o ? (O = () => {
 		!x.data || E.current || x.data.length > 0 && x.data.every(_temp) && window.parent !== window && (E.current = !0, window.parent.postMessage({
 			type: EMBED_MESSAGE_TYPE,
 			pipelineId: o
 		}, window.location.origin));
-	}, A = [x.data, o], t[2] = x.data, t[3] = o, t[4] = k, t[5] = A) : (k = t[4], A = t[5]), useEffect(k, A);
-	let j, M;
-	t[6] === o ? (j = t[7], M = t[8]) : (j = () => {
+	}, k = [x.data, o], t[2] = x.data, t[3] = o, t[4] = O, t[5] = k) : (O = t[4], k = t[5]), useEffect(O, k);
+	let A, j;
+	t[6] === o ? (A = t[7], j = t[8]) : (A = () => {
 		if (window.parent === window || !l.current) return;
 		let e = new ResizeObserver(() => {
 			if (!l.current) return;
@@ -71,66 +72,73 @@ function PreviewWorkbenchContent(e) {
 			}, window.location.origin);
 		});
 		return e.observe(l.current), () => e.disconnect();
-	}, M = [o], t[6] = o, t[7] = j, t[8] = M), useEffect(j, M);
-	let N;
-	t[9] === s ? N = t[10] : (N = (e) => {
-		y(!1), s(e);
-	}, t[9] = s, t[10] = N);
-	let P = N, F = _temp2, I;
-	t[11] === Symbol.for("react.memo_cache_sentinel") ? (I = {
+	}, j = [o], t[6] = o, t[7] = A, t[8] = j), useEffect(A, j);
+	let M;
+	t[9] === s ? M = t[10] : (M = (e) => {
+		_(!1), s(e);
+	}, t[9] = s, t[10] = M);
+	let N = M, P = _temp2, F;
+	t[11] === Symbol.for("react.memo_cache_sentinel") ? (F = {
 		enableDebugMode: !1,
 		showFullMessageHistory: !1
-	}, t[11] = I) : I = t[11];
-	let L = I, R;
-	t[12] === Symbol.for("react.memo_cache_sentinel") ? (R = {
+	}, t[11] = F) : F = t[11];
+	let I = F, L;
+	t[12] === Symbol.for("react.memo_cache_sentinel") ? (L = {
 		value: "output",
 		label: "Output",
 		icon: /* @__PURE__ */ jsx(ScrollText, { className: "h-3.5 w-3.5" })
-	}, t[12] = R) : R = t[12];
-	let z;
-	t[13] === Symbol.for("react.memo_cache_sentinel") ? (z = {
+	}, t[12] = L) : L = t[12];
+	let R;
+	t[13] === Symbol.for("react.memo_cache_sentinel") ? (R = {
 		value: "graph",
 		label: "Graph",
 		icon: /* @__PURE__ */ jsx(Workflow, { className: "h-3.5 w-3.5" })
-	}, t[13] = z) : z = t[13];
+	}, t[13] = R) : R = t[13];
+	let z;
+	t[14] === Symbol.for("react.memo_cache_sentinel") ? (z = {
+		value: "run-log",
+		label: "Run Log",
+		icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-3.5 w-3.5" })
+	}, t[14] = z) : z = t[14];
 	let B;
-	t[14] === Symbol.for("react.memo_cache_sentinel") ? (B = [
+	t[15] === Symbol.for("react.memo_cache_sentinel") ? (B = [
+		L,
 		R,
 		z,
 		{
-			value: "run-log",
-			label: "Run Log",
-			icon: /* @__PURE__ */ jsx(ListOrdered, { className: "h-3.5 w-3.5" })
+			value: "logs",
+			label: "Logs",
+			icon: /* @__PURE__ */ jsx(ScrollText, { className: "h-3.5 w-3.5" })
 		}
-	], t[14] = B) : B = t[14];
-	let V = B, H;
-	t[15] === u ? H = t[16] : (H = /* @__PURE__ */ jsx("div", {
+	], t[15] = B) : B = t[15];
+	let be = B, V;
+	t[16] === u ? V = t[17] : (V = /* @__PURE__ */ jsx("div", {
 		className: "bg-background flex items-center rounded-md border p-0.5",
-		children: V.map((e) => /* @__PURE__ */ jsxs("button", {
+		children: be.map((e) => /* @__PURE__ */ jsxs("button", {
 			onClick: () => d(e.value),
 			className: `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors ${u === e.value ? "bg-foreground text-background shadow-sm" : "text-muted-foreground hover:text-foreground"}`,
 			children: [e.icon, e.label]
 		}, e.value))
-	}), t[15] = u, t[16] = H);
-	let U;
-	t[17] === Symbol.for("react.memo_cache_sentinel") ? (U = /* @__PURE__ */ jsxs(Button, {
+	}), t[16] = u, t[17] = V);
+	let H;
+	t[18] === Symbol.for("react.memo_cache_sentinel") ? (H = /* @__PURE__ */ jsxs(Button, {
 		variant: "outline",
 		size: "sm",
 		className: "h-7 gap-1.5",
-		onClick: () => y(!0),
+		onClick: () => _(!0),
 		children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), "New Run"]
-	}), t[17] = U) : U = t[17];
-	let W;
-	t[18] === H ? W = t[19] : (W = /* @__PURE__ */ jsxs("div", {
+	}), t[18] = H) : H = t[18];
+	let U;
+	t[19] === V ? U = t[20] : (U = /* @__PURE__ */ jsxs("div", {
 		className: "bg-muted/50 flex h-11 shrink-0 items-center justify-between border-b px-3",
-		children: [H, U]
-	}), t[18] = H, t[19] = W);
+		children: [V, H]
+	}), t[19] = V, t[20] = U);
+	let W;
+	t[21] === b.error ? W = t[22] : (W = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: b.error }), t[21] = b.error, t[22] = W);
 	let G;
-	t[20] === b.error ? G = t[21] : (G = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: b.error }), t[20] = b.error, t[21] = G);
+	t[23] === x.error ? G = t[24] : (G = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: x.error }), t[23] = x.error, t[24] = G);
 	let K;
-	t[22] === x.error ? K = t[23] : (K = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: x.error }), t[22] = x.error, t[23] = K);
-	let q;
-	t[24] !== u || t[25] !== b.data || t[26] !== b.isLoading || t[27] !== x.data || t[28] !== x.isLoading ? (q = u === "output" && /* @__PURE__ */ jsx("div", {
+	t[25] !== u || t[26] !== b.data || t[27] !== b.isLoading || t[28] !== x.data || t[29] !== x.isLoading ? (K = u === "output" && /* @__PURE__ */ jsx("div", {
 		className: "px-4 py-3",
 		children: /* @__PURE__ */ jsx(LoadingCentered_default, {
 			loading: b.isLoading || x.isLoading,
@@ -141,21 +149,22 @@ function PreviewWorkbenchContent(e) {
 				children: /* @__PURE__ */ jsx(WorkflowItem_default, {
 					pipeline: b.data,
 					workflowId: e.id,
-					scrollTo: F,
-					settings: L
+					scrollTo: P,
+					settings: I
 				})
 			}, e.id)) : null
 		})
-	}), t[24] = u, t[25] = b.data, t[26] = b.isLoading, t[27] = x.data, t[28] = x.isLoading, t[29] = q) : q = t[29];
-	let J;
-	t[30] !== u || t[31] !== b.isLoading || t[32] !== O || t[33] !== x.isLoading || t[34] !== o || t[35] !== T ? (J = u === "graph" && /* @__PURE__ */ jsx("div", {
+	}), t[25] = u, t[26] = b.data, t[27] = b.isLoading, t[28] = x.data, t[29] = x.isLoading, t[30] = K) : K = t[30];
+	let q;
+	t[31] !== u || t[32] !== b.isLoading || t[33] !== D || t[34] !== x.isLoading || t[35] !== o || t[36] !== T ? (q = u === "graph" && /* @__PURE__ */ jsx("div", {
 		className: "h-full",
 		children: /* @__PURE__ */ jsx(LoadingCentered_default, {
 			loading: b.isLoading || x.isLoading,
 			children: T.length > 0 ? /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(PipelineFlowViewer_default, {
 				pipelineId: o,
 				workflows: T,
-				pipelineConfig: O.data
+				pipelineConfig: D.data,
+				direction: "TB"
 			}) }) : /* @__PURE__ */ jsx("div", {
 				className: "text-muted-foreground flex h-full items-center justify-center",
 				children: /* @__PURE__ */ jsx("p", {
@@ -164,21 +173,24 @@ function PreviewWorkbenchContent(e) {
 				})
 			})
 		})
-	}), t[30] = u, t[31] = b.isLoading, t[32] = O, t[33] = x.isLoading, t[34] = o, t[35] = T, t[36] = J) : J = t[36];
-	let Y;
-	t[37] !== u || t[38] !== b.data ? (Y = u === "run-log" && /* @__PURE__ */ jsx("div", {
+	}), t[31] = u, t[32] = b.isLoading, t[33] = D, t[34] = x.isLoading, t[35] = o, t[36] = T, t[37] = q) : q = t[37];
+	let J;
+	t[38] !== u || t[39] !== b.data ? (J = u === "run-log" && /* @__PURE__ */ jsx("div", {
 		className: "px-4",
 		children: /* @__PURE__ */ jsx(PipelineHistoryList_default, { pipeline: b.data })
-	}), t[37] = u, t[38] = b.data, t[39] = Y) : Y = t[39];
-	let X;
-	t[40] !== u || t[41] !== o ? (X = u === "navigate" && /* @__PURE__ */ jsx("div", {
+	}), t[38] = u, t[39] = b.data, t[40] = J) : J = t[40];
+	let Y;
+	t[41] !== u || t[42] !== o ? (Y = u === "navigate" && /* @__PURE__ */ jsx("div", {
 		className: "px-4 py-2",
 		children: /* @__PURE__ */ jsx(EmbedNavigationContent, { pipelineId: o })
-	}), t[40] = u, t[41] = o, t[42] = X) : X = t[42];
+	}), t[41] = u, t[42] = o, t[43] = Y) : Y = t[43];
+	let X;
+	t[44] === u ? X = t[45] : (X = u === "logs" && /* @__PURE__ */ jsx(EmbedLogsContent, {}), t[44] = u, t[45] = X);
 	let Z;
-	t[43] !== G || t[44] !== K || t[45] !== q || t[46] !== J || t[47] !== Y || t[48] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
+	t[46] !== W || t[47] !== G || t[48] !== K || t[49] !== q || t[50] !== J || t[51] !== Y || t[52] !== X ? (Z = /* @__PURE__ */ jsxs("div", {
 		className: "flex-1 overflow-auto",
 		children: [
+			W,
 			G,
 			K,
 			q,
@@ -186,23 +198,23 @@ function PreviewWorkbenchContent(e) {
 			Y,
 			X
 		]
-	}), t[43] = G, t[44] = K, t[45] = q, t[46] = J, t[47] = Y, t[48] = X, t[49] = Z) : Z = t[49];
+	}), t[46] = W, t[47] = G, t[48] = K, t[49] = q, t[50] = J, t[51] = Y, t[52] = X, t[53] = Z) : Z = t[53];
 	let Q;
-	t[50] !== P || t[51] !== m ? (Q = /* @__PURE__ */ jsx(NewRunDialog, {
+	t[54] !== N || t[55] !== m ? (Q = /* @__PURE__ */ jsx(NewRunDialog, {
 		open: m,
-		onOpenChange: y,
-		onSuccess: P
-	}), t[50] = P, t[51] = m, t[52] = Q) : Q = t[52];
+		onOpenChange: _,
+		onSuccess: N
+	}), t[54] = N, t[55] = m, t[56] = Q) : Q = t[56];
 	let $;
-	return t[53] !== W || t[54] !== Z || t[55] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
+	return t[57] !== U || t[58] !== Z || t[59] !== Q ? ($ = /* @__PURE__ */ jsxs("div", {
 		ref: l,
 		className: "flex h-screen flex-col overflow-hidden",
 		children: [
-			W,
+			U,
 			Z,
 			Q
 		]
-	}), t[53] = W, t[54] = Z, t[55] = Q, t[56] = $) : $ = t[56], $;
+	}), t[57] = U, t[58] = Z, t[59] = Q, t[60] = $) : $ = t[60], $;
 }
 function _temp2() {}
 function _temp(e) {
@@ -381,12 +393,97 @@ function EmbedWorkflowSection(e) {
 		className: "py-1",
 		children: a
 	}) }), t[24] = a, t[25] = g);
-	let _;
-	return t[26] !== h || t[27] !== g ? (_ = /* @__PURE__ */ jsxs(Collapsible, {
+	let v;
+	return t[26] !== h || t[27] !== g ? (v = /* @__PURE__ */ jsxs(Collapsible, {
 		defaultOpen: !0,
 		className: "group/collapsible",
 		children: [h, g]
-	}), t[26] = h, t[27] = g, t[28] = _) : _ = t[28], _;
+	}), t[26] = h, t[27] = g, t[28] = v) : v = t[28], v;
+}
+function stripAnsi(e) {
+	return e.replace(/\x1b\[[0-9;]*m/g, "");
+}
+function LogLine(e) {
+	let t = c(14), { line: n, index: r } = e, i, a, o;
+	if (t[0] !== n) {
+		i = stripAnsi(n);
+		let e;
+		t[4] === Symbol.for("react.memo_cache_sentinel") ? (e = /\bERROR\b/, t[4] = e) : e = t[4], a = e.test(i), o = /\bWARN\b/.test(i) || /\b(Warning|WARNING|DeprecationWarning)\b/.test(i), t[0] = n, t[1] = i, t[2] = a, t[3] = o;
+	} else i = t[1], a = t[2], o = t[3];
+	let s = o, l = `group flex border-b border-border/30 hover:bg-accent/30 ${a ? "bg-destructive/5" : s ? "bg-yellow-500/5" : ""}`, u = r + 1, d;
+	t[5] === u ? d = t[6] : (d = /* @__PURE__ */ jsx("span", {
+		className: "w-10 shrink-0 select-none border-r border-border/30 px-2 py-0.5 text-right text-[10px] text-muted-foreground/50",
+		children: u
+	}), t[5] = u, t[6] = d);
+	let f = `flex-1 px-3 py-0.5 text-[11px] leading-5 font-mono ${a ? "text-destructive" : s ? "text-yellow-600 dark:text-yellow-400" : ""}`, p;
+	t[7] !== i || t[8] !== f ? (p = /* @__PURE__ */ jsx("span", {
+		className: f,
+		children: i
+	}), t[7] = i, t[8] = f, t[9] = p) : p = t[9];
+	let m;
+	return t[10] !== l || t[11] !== d || t[12] !== p ? (m = /* @__PURE__ */ jsxs("div", {
+		className: l,
+		children: [d, p]
+	}), t[10] = l, t[11] = d, t[12] = p, t[13] = m) : m = t[13], m;
+}
+function EmbedLogsContent() {
+	let e = useRef(null), t = useQuery({
+		queryKey: ["remote-agent-app-logs"],
+		queryFn: async () => {
+			let e = await fetch("http://localhost:8000/api/v1/app/logs?lines=200", { credentials: "include" });
+			if (!e.ok) {
+				let t = await e.text();
+				throw Error(`Failed to fetch logs (${e.status}): ${t}`);
+			}
+			return await e.json();
+		},
+		refetchInterval: 5e3
+	});
+	useEffect(() => {
+		e.current?.scrollIntoView({ behavior: "smooth" });
+	}, [t.data]);
+	let n = useMemo(() => {
+		let e = [];
+		return t.data?.stdout && e.push(t.data.stdout), t.data?.stderr && e.push(t.data.stderr), e.join("\n").split("\n").filter((e) => e.length > 0);
+	}, [t.data]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex h-9 shrink-0 items-center justify-between border-b bg-muted/30 px-3",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "text-xs font-medium text-muted-foreground",
+				children: "Application Logs"
+			}), /* @__PURE__ */ jsx("button", {
+				onClick: () => void t.refetch(),
+				className: `text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors hover:cursor-pointer ${t.isFetching ? "animate-spin" : ""}`,
+				children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-auto bg-background",
+			children: t.isLoading && !t.data ? /* @__PURE__ */ jsx("div", {
+				className: "flex justify-center py-8",
+				children: /* @__PURE__ */ jsx(Loader2, { className: "text-muted-foreground h-4 w-4 animate-spin" })
+			}) : t.error ? /* @__PURE__ */ jsx("div", {
+				className: "px-4 py-3",
+				children: /* @__PURE__ */ jsxs("p", {
+					className: "text-sm text-destructive",
+					children: ["Error: ", t.error.message]
+				})
+			}) : n.length > 0 ? /* @__PURE__ */ jsxs("div", {
+				className: "font-mono",
+				children: [n.map((e, t) => /* @__PURE__ */ jsx(LogLine, {
+					line: e,
+					index: t
+				}, t)), /* @__PURE__ */ jsx("div", { ref: e })]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col items-center justify-center gap-2 py-8 text-muted-foreground",
+				children: [/* @__PURE__ */ jsx(ScrollText, { className: "h-5 w-5" }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs",
+					children: "No logs available"
+				})]
+			})
+		})]
+	});
 }
 function EmbedNavigationContent(e) {
 	let t = c(4), { pipelineId: n } = e, r = useNamespaceTree(n);

package/dist/pages/WorkspacePage.js

@@ -1,63 +1,115 @@
 import { useStudio } from "../providers/StudioProvider.js";
+import { useWorkspaceConfig } from "../hooks/useConfig.js";
 import { useWorkspace } from "../hooks/useWorkspaces.js";
+import { Button } from "../components/ui/button.js";
 import MainLayout_default from "../components/layout/MainLayout.js";
 import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
-import ExecutionTimeline_default from "../features/workspaces/components/ExecutionTimeline.js";
+import WorkspaceHomePage_default from "../features/workspaces/components/WorkspaceHomePage.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useParams } from "react-router-dom";
-import { Home, Loader2 } from "lucide-react";
+import { Link, useParams } from "react-router-dom";
+import { ArrowRight, Home, Loader2 } from "lucide-react";
 var WorkspacePage_default = () => {
-	let p = c(31), { router: m } = useStudio(), { workspaceId: h } = useParams(), g = useWorkspace(h), _;
-	p[0] === m ? _ = p[1] : (_ = m.getDashboard(), p[0] = m, p[1] = _);
-	let v;
-	p[2] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), p[2] = v) : v = p[2];
-	let y;
-	p[3] === _ ? y = p[4] : (y = {
-		label: "Dashboard",
-		href: _,
-		icon: v
-	}, p[3] = _, p[4] = y);
-	let b;
-	p[5] === m ? b = p[6] : (b = m.getWorkspaces(), p[5] = m, p[6] = b);
-	let x;
-	p[7] === b ? x = p[8] : (x = {
-		label: "Workspaces",
-		href: b
-	}, p[7] = b, p[8] = x);
-	let S = g.data?.title ?? "", C;
-	p[9] === S ? C = p[10] : (C = {
-		label: S,
-		current: !0
-	}, p[9] = S, p[10] = C);
-	let w;
-	p[11] !== y || p[12] !== x || p[13] !== C ? (w = [
-		y,
-		x,
-		C
-	], p[11] = y, p[12] = x, p[13] = C, p[14] = w) : w = p[14];
-	let T = w, E = g.data?.title ?? "", D;
-	p[15] === E ? D = p[16] : (D = /* @__PURE__ */ jsx("h1", {
-		className: "mb-4 text-3xl font-bold tracking-tight",
-		children: E
-	}), p[15] = E, p[16] = D);
+	let v = c(49), { router: y } = useStudio(), { workspaceId: b } = useParams(), x = useWorkspace(b), S = useWorkspaceConfig(), C = x.data, w;
+	bb0: {
+		if (!C || !S.data) {
+			w = void 0;
+			break bb0;
+		}
+		let t;
+		if (v[0] !== S.data || v[1] !== C) {
+			let _;
+			v[3] === C ? _ = v[4] : (_ = (t) => t.blockName === C.blockName, v[3] = C, v[4] = _), t = S.data.find(_)?.ui?.actions?.find(_temp), v[0] = S.data, v[1] = C, v[2] = t;
+		} else t = v[2];
+		w = t;
+	}
+	let T = w, E;
+	v[5] === y ? E = v[6] : (E = y.getDashboard(), v[5] = y, v[6] = E);
+	let D;
+	v[7] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), v[7] = D) : D = v[7];
 	let O;
-	p[17] === g.isLoading ? O = p[18] : (O = g.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin" }) : "", p[17] = g.isLoading, p[18] = O);
+	v[8] === E ? O = v[9] : (O = {
+		label: "Dashboard",
+		href: E,
+		icon: D
+	}, v[8] = E, v[9] = O);
 	let k;
-	p[19] === g.error ? k = p[20] : (k = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: g.error }), p[19] = g.error, p[20] = k);
+	v[10] === y ? k = v[11] : (k = y.getWorkspaces(), v[10] = y, v[11] = k);
 	let A;
-	p[21] === g.data ? A = p[22] : (A = g.data ? /* @__PURE__ */ jsx(ExecutionTimeline_default, { workspace: g.data }) : "", p[21] = g.data, p[22] = A);
-	let j;
-	p[23] !== O || p[24] !== k || p[25] !== A || p[26] !== D ? (j = /* @__PURE__ */ jsxs(Fragment, { children: [
-		D,
+	v[12] === k ? A = v[13] : (A = {
+		label: "Workspaces",
+		href: k
+	}, v[12] = k, v[13] = A);
+	let j = C?.title ?? "", M;
+	v[14] === j ? M = v[15] : (M = {
+		label: j,
+		current: !0
+	}, v[14] = j, v[15] = M);
+	let N;
+	v[16] !== O || v[17] !== A || v[18] !== M ? (N = [
 		O,
-		k,
-		A
-	] }), p[23] = O, p[24] = k, p[25] = A, p[26] = D, p[27] = j) : j = p[27];
-	let M;
-	return p[28] !== T || p[29] !== j ? (M = /* @__PURE__ */ jsx(MainLayout_default, {
-		breadcrumbsData: T,
-		children: j
-	}), p[28] = T, p[29] = j, p[30] = M) : M = p[30], M;
+		A,
+		M
+	], v[16] = O, v[17] = A, v[18] = M, v[19] = N) : N = v[19];
+	let P = N, F = x.isLoading || S.isLoading, I = C?.title ?? "", L;
+	v[20] === I ? L = v[21] : (L = /* @__PURE__ */ jsx("h1", {
+		className: "text-3xl font-bold tracking-tight",
+		children: I
+	}), v[20] = I, v[21] = L);
+	let R;
+	v[22] !== y || v[23] !== b ? (R = b && /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		size: "sm",
+		asChild: !0,
+		children: /* @__PURE__ */ jsxs(Link, {
+			to: y.getWorkspaceRuns(b),
+			children: ["Runs", /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1 h-4 w-4" })]
+		})
+	}), v[22] = y, v[23] = b, v[24] = R) : R = v[24];
+	let z;
+	v[25] !== L || v[26] !== R ? (z = /* @__PURE__ */ jsxs("div", {
+		className: "mb-4 flex items-center justify-between",
+		children: [L, R]
+	}), v[25] = L, v[26] = R, v[27] = z) : z = v[27];
+	let B;
+	v[28] === F ? B = v[29] : (B = F ? /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin" }) : "", v[28] = F, v[29] = B);
+	let V;
+	v[30] === x.error ? V = v[31] : (V = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: x.error }), v[30] = x.error, v[31] = V);
+	let H;
+	v[32] === S.error ? H = v[33] : (H = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: S.error }), v[32] = S.error, v[33] = H);
+	let U;
+	v[34] !== F || v[35] !== y || v[36] !== T || v[37] !== C || v[38] !== b ? (U = C && T ? /* @__PURE__ */ jsx(WorkspaceHomePage_default, {
+		workspace: C,
+		action: T
+	}) : C && !F ? /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center py-16",
+		children: [/* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground mb-4",
+			children: "No home page configured for this workspace."
+		}), b && /* @__PURE__ */ jsx(Button, {
+			variant: "default",
+			asChild: !0,
+			children: /* @__PURE__ */ jsxs(Link, {
+				to: y.getWorkspaceRuns(b),
+				children: ["Go to Runs", /* @__PURE__ */ jsx(ArrowRight, { className: "ml-1 h-4 w-4" })]
+			})
+		})]
+	}) : null, v[34] = F, v[35] = y, v[36] = T, v[37] = C, v[38] = b, v[39] = U) : U = v[39];
+	let W;
+	v[40] !== z || v[41] !== B || v[42] !== V || v[43] !== H || v[44] !== U ? (W = /* @__PURE__ */ jsxs(Fragment, { children: [
+		z,
+		B,
+		V,
+		H,
+		U
+	] }), v[40] = z, v[41] = B, v[42] = V, v[43] = H, v[44] = U, v[45] = W) : W = v[45];
+	let G;
+	return v[46] !== P || v[47] !== W ? (G = /* @__PURE__ */ jsx(MainLayout_default, {
+		breadcrumbsData: P,
+		children: W
+	}), v[46] = P, v[47] = W, v[48] = G) : G = v[48], G;
 };
+function _temp(t) {
+	return t.widget === "start-form";
+}
 export { WorkspacePage_default as default };

package/dist/pages/WorkspaceRunsPage.js

@@ -0,0 +1,71 @@
+import { useStudio } from "../providers/StudioProvider.js";
+import { useWorkspace } from "../hooks/useWorkspaces.js";
+import MainLayout_default from "../components/layout/MainLayout.js";
+import ErrorSnackbar_default from "../components/feedback/ErrorSnackbar.js";
+import ExecutionTimeline_default from "../features/workspaces/components/ExecutionTimeline.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useParams } from "react-router-dom";
+import { Home, Loader2 } from "lucide-react";
+var WorkspaceRunsPage_default = () => {
+	let p = c(36), { router: m } = useStudio(), { workspaceId: h } = useParams(), g = useWorkspace(h), _;
+	p[0] === m ? _ = p[1] : (_ = m.getDashboard(), p[0] = m, p[1] = _);
+	let v;
+	p[2] === Symbol.for("react.memo_cache_sentinel") ? (v = /* @__PURE__ */ jsx(Home, { className: "h-4 w-4" }), p[2] = v) : v = p[2];
+	let y;
+	p[3] === _ ? y = p[4] : (y = {
+		label: "Dashboard",
+		href: _,
+		icon: v
+	}, p[3] = _, p[4] = y);
+	let b;
+	p[5] === m ? b = p[6] : (b = m.getWorkspaces(), p[5] = m, p[6] = b);
+	let x;
+	p[7] === b ? x = p[8] : (x = {
+		label: "Workspaces",
+		href: b
+	}, p[7] = b, p[8] = x);
+	let S = g.data?.title ?? "", C;
+	p[9] !== m || p[10] !== h ? (C = h ? m.getWorkspace(h) : void 0, p[9] = m, p[10] = h, p[11] = C) : C = p[11];
+	let w;
+	p[12] !== S || p[13] !== C ? (w = {
+		label: S,
+		href: C
+	}, p[12] = S, p[13] = C, p[14] = w) : w = p[14];
+	let T;
+	p[15] === Symbol.for("react.memo_cache_sentinel") ? (T = {
+		label: "Runs",
+		current: !0
+	}, p[15] = T) : T = p[15];
+	let E;
+	p[16] !== y || p[17] !== x || p[18] !== w ? (E = [
+		y,
+		x,
+		w,
+		T
+	], p[16] = y, p[17] = x, p[18] = w, p[19] = E) : E = p[19];
+	let D = E, O = g.data?.title ?? "", k;
+	p[20] === O ? k = p[21] : (k = /* @__PURE__ */ jsxs("h1", {
+		className: "mb-4 text-3xl font-bold tracking-tight",
+		children: [O, " — Runs"]
+	}), p[20] = O, p[21] = k);
+	let A;
+	p[22] === g.isLoading ? A = p[23] : (A = g.isLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-6 w-6 animate-spin" }) : "", p[22] = g.isLoading, p[23] = A);
+	let j;
+	p[24] === g.error ? j = p[25] : (j = /* @__PURE__ */ jsx(ErrorSnackbar_default, { error: g.error }), p[24] = g.error, p[25] = j);
+	let M;
+	p[26] === g.data ? M = p[27] : (M = g.data ? /* @__PURE__ */ jsx(ExecutionTimeline_default, { workspace: g.data }) : "", p[26] = g.data, p[27] = M);
+	let N;
+	p[28] !== k || p[29] !== A || p[30] !== j || p[31] !== M ? (N = /* @__PURE__ */ jsxs(Fragment, { children: [
+		k,
+		A,
+		j,
+		M
+	] }), p[28] = k, p[29] = A, p[30] = j, p[31] = M, p[32] = N) : N = p[32];
+	let P;
+	return p[33] !== D || p[34] !== N ? (P = /* @__PURE__ */ jsx(MainLayout_default, {
+		breadcrumbsData: D,
+		children: N
+	}), p[33] = D, p[34] = N, p[35] = P) : P = p[35], P;
+};
+export { WorkspaceRunsPage_default as default };

package/dist/routing/LocalRouter.js

@@ -67,6 +67,12 @@ var LocalRouter = class {
 	async navigateToPipelineNamespace(e, t, n) {
 		await this.navigate(`/workspaces/${e}/pipelines/${t}/namespaces/${n}`);
 	}
+	getWorkspaceRuns(e) {
+		return `/workspaces/${e}/runs`;
+	}
+	async navigateToWorkspaceRuns(e) {
+		await this.navigate(this.getWorkspaceRuns(e));
+	}
 	getEmbedPipeline(e) {
 		return `${this.embedPrefix}/pipelines/${e}`;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loopstack/loopstack-studio",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "repository": "loopstack-ai/loopstack-studio",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@fontsource/roboto": "^5.2.10",
     "@hookform/resolvers": "^5.2.2",
-    "@loopstack/contracts": "^0.23.0",
+    "@loopstack/contracts": "^0.23.1",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",