@loopstack/loopstack-studio 0.36.0 → 0.37.0

package/dist/features/documents/renderers/DocumentMessageRenderer.js

@@ -2,7 +2,8 @@ import CompletionMessagePaper_default from "../../../components/messages/Complet
 import MarkdownContent_default from "../../../components/dynamic-form/MarkdownContent.js";
 import { c } from "react/compiler-runtime";
 import React from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Info } from "lucide-react";
 var KNOWN_ROLES = [
 	"system",
 	"user",
@@ -10,13 +11,26 @@ var KNOWN_ROLES = [
 	"tool",
 	"error",
 	"document"
-], DocumentMessageRenderer_default = (a) => {
-	let o = c(5), { document: s } = a, { role: l, text: u } = s.content, d = KNOWN_ROLES.includes(l ?? "") ? l : void 0, f = u ?? "", p;
-	o[0] === f ? p = o[1] : (p = /* @__PURE__ */ jsx(MarkdownContent_default, { content: f }), o[0] = f, o[1] = p);
-	let m;
-	return o[2] !== d || o[3] !== p ? (m = /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
-		role: d,
-		children: p
-	}), o[2] = d, o[3] = p, o[4] = m) : m = o[4], m;
+], DocumentMessageRenderer_default = (s) => {
+	let l = c(8), { document: u } = s, { role: d, text: f } = u.content, p = KNOWN_ROLES.includes(d ?? "") ? d : void 0;
+	if (p === "system") {
+		let e;
+		l[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(Info, { className: "mt-0.5 size-3.5 shrink-0 opacity-70" }), l[0] = e) : e = l[0];
+		let o = f ?? "", s;
+		return l[1] === o ? s = l[2] : (s = /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground flex items-start gap-1.5 px-1 py-0.5 text-sm leading-relaxed [&_p]:m-0",
+			children: [e, /* @__PURE__ */ jsx("div", {
+				className: "min-w-0",
+				children: /* @__PURE__ */ jsx(MarkdownContent_default, { content: o })
+			})]
+		}), l[1] = o, l[2] = s), s;
+	}
+	let m = f ?? "", h;
+	l[3] === m ? h = l[4] : (h = /* @__PURE__ */ jsx(MarkdownContent_default, { content: m }), l[3] = m, l[4] = h);
+	let g;
+	return l[5] !== p || l[6] !== h ? (g = /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
+		role: p,
+		children: h
+	}), l[5] = p, l[6] = h, l[7] = g) : g = l[7], g;
 };
 export { DocumentMessageRenderer_default as default };

package/dist/features/documents/renderers/LlmMessage.js

@@ -8,16 +8,50 @@ import { Fragment } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { CopyIcon } from "lucide-react";
 var CopyActions = (e) => {
-	let _ = c(5), { text: v } = e, y;
-	_[0] === v ? y = _[1] : (y = () => void navigator.clipboard.writeText(v), _[0] = v, _[1] = y);
+	let g = c(5), { text: _ } = e, v;
+	g[0] === _ ? v = g[1] : (v = () => void navigator.clipboard.writeText(_), g[0] = _, g[1] = v);
+	let y;
+	g[2] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ jsx(CopyIcon, { className: "size-3" }), g[2] = y) : y = g[2];
 	let b;
-	_[2] === Symbol.for("react.memo_cache_sentinel") ? (b = /* @__PURE__ */ jsx(CopyIcon, { className: "size-3" }), _[2] = b) : b = _[2];
-	let x;
-	return _[3] === y ? x = _[4] : (x = /* @__PURE__ */ jsx(FadeInBlock, { children: /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
-		onClick: y,
+	return g[3] === v ? b = g[4] : (b = /* @__PURE__ */ jsx(FadeInBlock, { children: /* @__PURE__ */ jsx(MessageActions, { children: /* @__PURE__ */ jsx(MessageAction, {
+		onClick: v,
 		label: "Copy",
-		children: b
-	}) }) }), _[3] = y, _[4] = x), x;
+		children: y
+	}) }) }), g[3] = v, g[4] = b), b;
+};
+function formatTokens(e) {
+	return e == null ? null : e >= 1e3 ? `${(e / 1e3).toFixed(1)}k` : String(e);
+}
+var CompletionMeta = (e) => {
+	let m = c(21), { meta: h } = e, g;
+	if (m[0] !== h.costUsd || m[1] !== h.durationMs || m[2] !== h.model || m[3] !== h.numTurns || m[4] !== h.usage?.cacheCreationInputTokens || m[5] !== h.usage?.cacheReadInputTokens || m[6] !== h.usage?.inputTokens || m[7] !== h.usage?.outputTokens) {
+		if (g = [], h.numTurns != null && g.push(`${h.numTurns} turn${h.numTurns === 1 ? "" : "s"}`), h.costUsd != null) {
+			let e;
+			m[9] === h.costUsd ? e = m[10] : (e = h.costUsd.toFixed(4), m[9] = h.costUsd, m[10] = e), g.push(`$${e}`);
+		}
+		let e = h.usage?.inputTokens, _;
+		m[11] === e ? _ = m[12] : (_ = formatTokens(e), m[11] = e, m[12] = _);
+		let v = _, y = h.usage?.outputTokens, b;
+		m[13] === y ? b = m[14] : (b = formatTokens(y), m[13] = y, m[14] = b);
+		let x = b;
+		v && x && g.push(`${v} in / ${x} out`);
+		let S = (h.usage?.cacheReadInputTokens ?? 0) + (h.usage?.cacheCreationInputTokens ?? 0);
+		if (S) {
+			let e;
+			m[15] === S ? e = m[16] : (e = formatTokens(S), m[15] = S, m[16] = e), g.push(`${e} cache`);
+		}
+		if (h.durationMs != null) {
+			let e = h.durationMs / 1e3, _;
+			m[17] === e ? _ = m[18] : (_ = e.toFixed(1), m[17] = e, m[18] = _), g.push(`${_}s`);
+		}
+		h.model && g.push(h.model), m[0] = h.costUsd, m[1] = h.durationMs, m[2] = h.model, m[3] = h.numTurns, m[4] = h.usage?.cacheCreationInputTokens, m[5] = h.usage?.cacheReadInputTokens, m[6] = h.usage?.inputTokens, m[7] = h.usage?.outputTokens, m[8] = g;
+	} else g = m[8];
+	if (!g.length) return null;
+	let _ = g.join(" · "), v;
+	return m[19] === _ ? v = m[20] : (v = /* @__PURE__ */ jsx("div", {
+		className: "text-muted-foreground mt-1 px-1 font-mono text-xs",
+		children: _
+	}), m[19] = _, m[20] = v), v;
 };
 function hasStructuredBlocks(e) {
 	return !!e?.some((e) => e.type !== "text");
@@ -25,81 +59,87 @@ function hasStructuredBlocks(e) {
 function textFromBlocks(e) {
 	return (e ?? []).filter((e) => e.type === "text").map((e) => e.text).join("\n");
 }
-var LlmMessage_default = (h) => {
-	let g = c(23), { document: C } = h, w = C.content, T = w.id ?? C.id, E = !!C.meta?.streaming;
-	if (!hasStructuredBlocks(w.blocks)) {
-		let h;
-		g[0] !== w.blocks || g[1] !== w.text ? (h = w.text ?? textFromBlocks(w.blocks), g[0] = w.blocks, g[1] = w.text, g[2] = h) : h = g[2];
-		let y = h, b;
-		g[3] !== E || g[4] !== y ? (b = /* @__PURE__ */ jsx(MessageContent, { children: E ? /* @__PURE__ */ jsx(StreamingText, { text: y }) : /* @__PURE__ */ jsx(MessageResponse, { children: y }) }), g[3] = E, g[4] = y, g[5] = b) : b = g[5];
+var LlmMessage_default = (m) => {
+	let h = c(31), { document: w } = m, T = w.content, E = T.id ?? w.id, D = !!w.meta?.streaming;
+	if (!hasStructuredBlocks(T.blocks)) {
+		let m;
+		h[0] !== T.blocks || h[1] !== T.text ? (m = T.text ?? textFromBlocks(T.blocks), h[0] = T.blocks, h[1] = T.text, h[2] = m) : m = h[2];
+		let v = m, y;
+		h[3] !== D || h[4] !== v ? (y = /* @__PURE__ */ jsx(MessageContent, { children: D ? /* @__PURE__ */ jsx(StreamingText, { text: v }) : /* @__PURE__ */ jsx(MessageResponse, { children: v }) }), h[3] = D, h[4] = v, h[5] = y) : y = h[5];
+		let b;
+		h[6] !== D || h[7] !== T.role || h[8] !== v ? (b = T.role === "assistant" && !D && /* @__PURE__ */ jsx(CopyActions, { text: v }), h[6] = D, h[7] = T.role, h[8] = v, h[9] = b) : b = h[9];
 		let x;
-		g[6] !== E || g[7] !== w.role || g[8] !== y ? (x = w.role === "assistant" && !E && /* @__PURE__ */ jsx(CopyActions, { text: y }), g[6] = E, g[7] = w.role, g[8] = y, g[9] = x) : x = g[9];
+		h[10] !== T.role || h[11] !== y || h[12] !== b ? (x = /* @__PURE__ */ jsxs(Message, {
+			from: T.role,
+			children: [y, b]
+		}), h[10] = T.role, h[11] = y, h[12] = b, h[13] = x) : x = h[13];
 		let S;
-		return g[10] !== w.role || g[11] !== b || g[12] !== x ? (S = /* @__PURE__ */ jsxs(Message, {
-			from: w.role,
-			children: [b, x]
-		}), g[10] = w.role, g[11] = b, g[12] = x, g[13] = S) : S = g[13], S;
+		h[14] === T.meta ? S = h[15] : (S = T.meta && /* @__PURE__ */ jsx(CompletionMeta, { meta: T.meta }), h[14] = T.meta, h[15] = S);
+		let C;
+		return h[16] !== x || h[17] !== S ? (C = /* @__PURE__ */ jsxs(Fragment, { children: [x, S] }), h[16] = x, h[17] = S, h[18] = C) : C = h[18], C;
 	}
-	let D;
-	g[14] === w.blocks ? D = g[15] : (D = w.blocks ?? [], g[14] = w.blocks, g[15] = D);
-	let O = D, k;
-	g[16] !== O || g[17] !== E || g[18] !== w.role || g[19] !== T ? (k = O.map((h, g) => {
-		switch (h.type) {
+	let O;
+	h[19] === T.blocks ? O = h[20] : (O = T.blocks ?? [], h[19] = T.blocks, h[20] = O);
+	let k = O, A;
+	h[21] !== k || h[22] !== D || h[23] !== T.role || h[24] !== E ? (A = k.map((m, h) => {
+		switch (m.type) {
 			case "text": return /* @__PURE__ */ jsxs(Message, {
-				from: w.role,
-				children: [/* @__PURE__ */ jsx(MessageContent, { children: E ? /* @__PURE__ */ jsx(StreamingText, { text: h.text }) : /* @__PURE__ */ jsx(MessageResponse, { children: h.text }) }), w.role === "assistant" && !E && /* @__PURE__ */ jsx(CopyActions, { text: h.text })]
-			}, `${T}-${g}`);
+				from: T.role,
+				children: [/* @__PURE__ */ jsx(MessageContent, { children: D ? /* @__PURE__ */ jsx(StreamingText, { text: m.text }) : /* @__PURE__ */ jsx(MessageResponse, { children: m.text }) }), T.role === "assistant" && !D && /* @__PURE__ */ jsx(CopyActions, { text: m.text })]
+			}, `${E}-${h}`);
 			case "thinking": return /* @__PURE__ */ jsxs(Reasoning, {
 				className: "w-full",
-				isStreaming: E,
-				children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: h.text })]
-			}, `${T}-${g}`);
+				isStreaming: D,
+				children: [/* @__PURE__ */ jsx(ReasoningTrigger, {}), /* @__PURE__ */ jsx(ReasoningContent, { children: m.text })]
+			}, `${E}-${h}`);
 			case "tool_call": return /* @__PURE__ */ jsx(FadeInBlock, { children: /* @__PURE__ */ jsx(Message, {
 				from: "assistant",
 				children: /* @__PURE__ */ jsxs(Tool, { children: [/* @__PURE__ */ jsx(ToolHeader, {
 					state: "input-available",
-					title: h.name,
+					title: m.name,
 					type: "tool-call"
-				}), /* @__PURE__ */ jsx(ToolContent, { children: /* @__PURE__ */ jsx(ToolInput, { input: h.args }) })] })
-			}) }, `${T}-${g}`);
+				}), /* @__PURE__ */ jsx(ToolContent, { children: /* @__PURE__ */ jsx(ToolInput, { input: m.args }) })] })
+			}) }, `${E}-${h}`);
 			case "tool_result": {
-				let _;
+				let g;
 				try {
-					_ = JSON.parse(h.content);
+					g = JSON.parse(m.content);
 				} catch {
-					_ = h.content;
+					g = m.content;
 				}
 				return /* @__PURE__ */ jsx(FadeInBlock, { children: /* @__PURE__ */ jsx(Message, {
 					from: "assistant",
 					children: /* @__PURE__ */ jsxs(Tool, { children: [/* @__PURE__ */ jsx(ToolHeader, {
-						state: h.isError ? "output-error" : "output-available",
+						state: m.isError ? "output-error" : "output-available",
 						title: "Tool Result",
 						type: "tool-call"
 					}), /* @__PURE__ */ jsx(ToolContent, { children: /* @__PURE__ */ jsx(ToolOutput, {
-						output: _,
-						errorText: h.isError ? h.content : ""
+						output: g,
+						errorText: m.isError ? m.content : ""
 					}) })] })
-				}) }, `${T}-${g}`);
+				}) }, `${E}-${h}`);
 			}
 			case "server_tool_use": {
-				let _ = O.find((e) => e.type === "server_tool_result" && e.toolUseId === h.id);
+				let g = k.find((e) => e.type === "server_tool_result" && e.toolUseId === m.id);
 				return /* @__PURE__ */ jsx(FadeInBlock, { children: /* @__PURE__ */ jsx(Message, {
 					from: "assistant",
 					children: /* @__PURE__ */ jsxs(Tool, { children: [/* @__PURE__ */ jsx(ToolHeader, {
-						state: _ ? "output-available" : "input-available",
-						title: h.name,
+						state: g ? "output-available" : "input-available",
+						title: m.name,
 						type: "tool-call"
-					}), /* @__PURE__ */ jsxs(ToolContent, { children: [/* @__PURE__ */ jsx(ToolInput, { input: h.input }), _ && /* @__PURE__ */ jsx(ToolOutput, {
-						output: _.content,
+					}), /* @__PURE__ */ jsxs(ToolContent, { children: [/* @__PURE__ */ jsx(ToolInput, { input: m.input }), g && /* @__PURE__ */ jsx(ToolOutput, {
+						output: g.content,
 						errorText: ""
 					})] })] })
-				}) }, `${T}-${g}`);
+				}) }, `${E}-${h}`);
 			}
 			case "server_tool_result": return null;
 			default: return null;
 		}
-	}), g[16] = O, g[17] = E, g[18] = w.role, g[19] = T, g[20] = k) : k = g[20];
-	let A;
-	return g[21] === k ? A = g[22] : (A = /* @__PURE__ */ jsx(Fragment, { children: k }), g[21] = k, g[22] = A), A;
+	}), h[21] = k, h[22] = D, h[23] = T.role, h[24] = E, h[25] = A) : A = h[25];
+	let j;
+	h[26] === T.meta ? j = h[27] : (j = T.meta && /* @__PURE__ */ jsx(CompletionMeta, { meta: T.meta }), h[26] = T.meta, h[27] = j);
+	let M;
+	return h[28] !== A || h[29] !== j ? (M = /* @__PURE__ */ jsxs(Fragment, { children: [A, j] }), h[28] = A, h[29] = j, h[30] = M) : M = h[30], M;
 };
 export { LlmMessage_default as default };

package/dist/features/file-explorer/components/FileExplorerPanel.js

@@ -5,6 +5,7 @@ import "../../feature-registry/index.js";
 import { useWorkbenchLayout } from "../../workbench/providers/WorkbenchLayoutProvider.js";
 import { SidebarPanel } from "../../workbench/components/SidebarPanel.js";
 import "../../workbench/index.js";
+import { EnvironmentSelector } from "../../workbench/components/EnvironmentSelector.js";
 import { FileExplorerProvider, useOptionalFileExplorer } from "../providers/FileExplorerProvider.js";
 import { FileTabsBar } from "./FileTabsBar.js";
 import { FileTree } from "./FileTree.js";
@@ -12,109 +13,101 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Files } from "lucide-react";
 function FileExplorerContent() {
-	let i = c(7), a = useOptionalFileExplorer();
-	if (!a) {
+	let o = c(7), s = useOptionalFileExplorer();
+	if (!s) {
 		let e;
-		return i[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
+		return o[0] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx("div", {
 			className: "flex flex-1 items-center justify-center p-4",
 			children: /* @__PURE__ */ jsx("p", {
 				className: "text-muted-foreground text-sm",
 				children: "File explorer is not available for this workspace."
 			})
-		}), i[0] = e) : e = i[0], e;
+		}), o[0] = e) : e = o[0], e;
 	}
-	let o;
-	i[1] === Symbol.for("react.memo_cache_sentinel") ? (o = /* @__PURE__ */ jsx("div", {
+	let l;
+	o[1] === Symbol.for("react.memo_cache_sentinel") ? (l = /* @__PURE__ */ jsx("div", {
 		className: "w-52 shrink-0 overflow-auto border-r bg-muted/40",
 		children: /* @__PURE__ */ jsx(FileTree, {})
-	}), i[1] = o) : o = i[1];
-	let s;
-	i[2] === Symbol.for("react.memo_cache_sentinel") ? (s = /* @__PURE__ */ jsx(FileTabsBar, {}), i[2] = s) : s = i[2];
-	let p;
-	return i[3] !== a.fileContent || i[4] !== a.isContentLoading || i[5] !== a.selectedFile ? (p = /* @__PURE__ */ jsxs("div", {
+	}), o[1] = l) : l = o[1];
+	let u;
+	o[2] === Symbol.for("react.memo_cache_sentinel") ? (u = /* @__PURE__ */ jsx(FileTabsBar, {}), o[2] = u) : u = o[2];
+	let d;
+	return o[3] !== s.fileContent || o[4] !== s.isContentLoading || o[5] !== s.selectedFile ? (d = /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full",
-		children: [o, /* @__PURE__ */ jsxs("div", {
+		children: [l, /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 flex-col",
-			children: [s, /* @__PURE__ */ jsx("div", {
+			children: [u, /* @__PURE__ */ jsx("div", {
 				className: "flex-1 overflow-hidden p-3 pt-2",
 				children: /* @__PURE__ */ jsx(FileContentViewer, {
-					selectedFile: a.selectedFile,
-					content: a.fileContent,
-					isLoading: a.isContentLoading,
+					selectedFile: s.selectedFile,
+					content: s.fileContent,
+					isLoading: s.isContentLoading,
 					className: "h-full"
 				})
 			})]
 		})]
-	}), i[3] = a.fileContent, i[4] = a.isContentLoading, i[5] = a.selectedFile, i[6] = p) : p = i[6], p;
+	}), o[3] = s.fileContent, o[4] = s.isContentLoading, o[5] = s.selectedFile, o[6] = d) : d = o[6], d;
 }
 function FileExplorerPanel(e) {
-	let l = c(26), { variant: u, featureId: d, title: f, description: m, workspaceId: h } = e, { closePanel: g, panelSize: _, setPanelSize: v, environments: y } = useWorkbenchLayout(), b = useFeatureConfig(d), x;
-	l[0] === b?.config?.environments ? x = l[1] : (x = b?.config?.environments ?? [], l[0] = b?.config?.environments, l[1] = x);
-	let S = x, C = y?.[0]?.slotId ?? "", w;
-	l[2] !== S || l[3] !== C ? (w = S.length === 0 || S.includes(C), l[2] = S, l[3] = C, l[4] = w) : w = l[4];
-	let T = w;
-	if (!T) {
-		let e;
-		l[5] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(Files, { className: "h-4 w-4" }), l[5] = e) : e = l[5];
-		let i;
-		l[6] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ jsx("div", {
-			className: "flex flex-1 items-center justify-center p-4",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "text-muted-foreground text-sm",
-				children: "File explorer is not available for this environment."
-			})
-		}), l[6] = i) : i = l[6];
-		let a;
-		return l[7] !== g || l[8] !== m || l[9] !== _ || l[10] !== v || l[11] !== f ? (a = /* @__PURE__ */ jsx(SidebarPanel, {
-			icon: e,
-			title: f,
-			description: m,
-			size: _,
-			onSizeChange: v,
-			onClose: g,
-			children: i
-		}), l[7] = g, l[8] = m, l[9] = _, l[10] = v, l[11] = f, l[12] = a) : a = l[12], a;
-	}
-	let E;
-	l[13] === Symbol.for("react.memo_cache_sentinel") ? (E = /* @__PURE__ */ jsx(Files, { className: "h-4 w-4" }), l[13] = E) : E = l[13];
-	let D;
-	l[14] === Symbol.for("react.memo_cache_sentinel") ? (D = /* @__PURE__ */ jsx(FileExplorerContent, {}), l[14] = D) : D = l[14];
-	let O;
-	l[15] !== T || l[16] !== u || l[17] !== h ? (O = /* @__PURE__ */ jsx(FileExplorerProvider, {
-		variant: u,
-		workspaceId: h,
-		enabled: T,
-		children: D
-	}), l[15] = T, l[16] = u, l[17] = h, l[18] = O) : O = l[18];
-	let k;
-	return l[19] !== g || l[20] !== m || l[21] !== _ || l[22] !== v || l[23] !== O || l[24] !== f ? (k = /* @__PURE__ */ jsx(SidebarPanel, {
-		icon: E,
-		title: f,
-		description: m,
-		size: _,
-		onSizeChange: v,
-		onClose: g,
-		children: O
-	}), l[19] = g, l[20] = m, l[21] = _, l[22] = v, l[23] = O, l[24] = f, l[25] = k) : k = l[25], k;
+	let f = c(24), { variant: p, featureId: m, title: h, description: g, workspaceId: _ } = e, { closePanel: v, panelSize: y, setPanelSize: b, environments: x, selectedSlotId: S } = useWorkbenchLayout(), C = useFeatureConfig(m), w;
+	f[0] === C?.config?.environments ? w = f[1] : (w = C?.config?.environments ?? [], f[0] = C?.config?.environments, f[1] = w);
+	let T = w, E;
+	f[2] !== x || f[3] !== S ? (E = x?.find((e) => e.slotId === S), f[2] = x, f[3] = S, f[4] = E) : E = f[4];
+	let D = E, O;
+	f[5] !== T || f[6] !== S ? (O = T.length === 0 || T.includes(S), f[5] = T, f[6] = S, f[7] = O) : O = f[7];
+	let k = O, A = !D || D.status === "running", j = k && A, M;
+	f[8] === Symbol.for("react.memo_cache_sentinel") ? (M = /* @__PURE__ */ jsx(Files, { className: "h-4 w-4" }), f[8] = M) : M = f[8];
+	let N;
+	f[9] === Symbol.for("react.memo_cache_sentinel") ? (N = /* @__PURE__ */ jsx(EnvironmentSelector, {}), f[9] = N) : N = f[9];
+	let P;
+	f[10] !== k || f[11] !== j || f[12] !== A || f[13] !== S || f[14] !== p || f[15] !== _ ? (P = k ? A ? /* @__PURE__ */ jsx(FileExplorerProvider, {
+		variant: p,
+		workspaceId: _,
+		slotId: S || void 0,
+		enabled: j,
+		children: /* @__PURE__ */ jsx(FileExplorerContent, {})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 items-center justify-center p-4",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "This environment is not available (stopped)."
+		})
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "flex flex-1 items-center justify-center p-4",
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: "File explorer is not available for this environment."
+		})
+	}), f[10] = k, f[11] = j, f[12] = A, f[13] = S, f[14] = p, f[15] = _, f[16] = P) : P = f[16];
+	let F;
+	return f[17] !== v || f[18] !== g || f[19] !== y || f[20] !== b || f[21] !== P || f[22] !== h ? (F = /* @__PURE__ */ jsxs(SidebarPanel, {
+		icon: M,
+		title: h,
+		description: g,
+		size: y,
+		onSizeChange: b,
+		onClose: v,
+		children: [N, P]
+	}), f[17] = v, f[18] = g, f[19] = y, f[20] = b, f[21] = P, f[22] = h, f[23] = F) : F = f[23], F;
 }
 function LocalFileExplorerPanel(e) {
-	let i = c(2), { workspaceId: a } = e, o;
-	return i[0] === a ? o = i[1] : (o = /* @__PURE__ */ jsx(FileExplorerPanel, {
+	let o = c(2), { workspaceId: s } = e, l;
+	return o[0] === s ? l = o[1] : (l = /* @__PURE__ */ jsx(FileExplorerPanel, {
 		variant: "local",
 		featureId: "localFileExplorer",
 		title: "Files",
 		description: "Browse and view local project files.",
-		workspaceId: a
-	}), i[0] = a, i[1] = o), o;
+		workspaceId: s
+	}), o[0] = s, o[1] = l), l;
 }
 function RemoteFileExplorerPanel(e) {
-	let i = c(2), { workspaceId: a } = e, o;
-	return i[0] === a ? o = i[1] : (o = /* @__PURE__ */ jsx(FileExplorerPanel, {
+	let o = c(2), { workspaceId: s } = e, l;
+	return o[0] === s ? l = o[1] : (l = /* @__PURE__ */ jsx(FileExplorerPanel, {
 		variant: "remote",
 		featureId: "remoteFileExplorer",
 		title: "Remote Files",
 		description: "Browse and view files on the remote workspace.",
-		workspaceId: a
-	}), i[0] = a, i[1] = o), o;
+		workspaceId: s
+	}), o[0] = s, o[1] = l), l;
 }
 export { LocalFileExplorerPanel, RemoteFileExplorerPanel };

package/dist/features/file-explorer/hooks/useFileExplorer.js

@@ -14,38 +14,42 @@ function fileTreeKey(e, n, r) {
 		...r ? [r] : []
 	];
 }
-function useFileTree(i, o, s) {
-	let l = c(12), u = s === void 0 ? !0 : s, d = useLoopstackClient(), f;
-	l[0] !== d.envKey || l[1] !== i || l[2] !== o ? (f = fileTreeKey(d.envKey, i, o), l[0] = d.envKey, l[1] = i, l[2] = o, l[3] = f) : f = l[3];
-	let p;
-	l[4] !== d.http || l[5] !== i || l[6] !== o ? (p = () => d.http.get(`${explorerPath(i, o)}/tree`), l[4] = d.http, l[5] = i, l[6] = o, l[7] = p) : p = l[7];
-	let m = !!o && u, h;
-	return l[8] !== f || l[9] !== p || l[10] !== m ? (h = {
-		queryKey: f,
-		queryFn: p,
-		enabled: m,
+function useFileTree(i, o, s, l) {
+	let u = c(14), d = l === void 0 ? !0 : l, f = useLoopstackClient(), p;
+	u[0] !== f.envKey || u[1] !== s || u[2] !== i || u[3] !== o ? (p = [...fileTreeKey(f.envKey, i, o), s ?? ""], u[0] = f.envKey, u[1] = s, u[2] = i, u[3] = o, u[4] = p) : p = u[4];
+	let m;
+	u[5] !== f.http || u[6] !== s || u[7] !== i || u[8] !== o ? (m = () => f.http.get(`${explorerPath(i, o)}/tree`, s ? { slotId: s } : void 0), u[5] = f.http, u[6] = s, u[7] = i, u[8] = o, u[9] = m) : m = u[9];
+	let h = !!o && d, g;
+	return u[10] !== p || u[11] !== m || u[12] !== h ? (g = {
+		queryKey: p,
+		queryFn: m,
+		enabled: h,
 		staleTime: 3e4,
 		retry: !1
-	}, l[8] = f, l[9] = p, l[10] = m, l[11] = h) : h = l[11], useQuery(h);
+	}, u[10] = p, u[11] = m, u[12] = h, u[13] = g) : g = u[13], useQuery(g);
 }
-function useFileContent(i, a, o, s) {
-	let l = c(14), u = s === void 0 ? !0 : s, d = useLoopstackClient(), f;
-	l[0] !== d.envKey || l[1] !== o || l[2] !== i || l[3] !== a ? (f = [
+function useFileContent(i, a, o, s, l) {
+	let u = c(16), d = l === void 0 ? !0 : l, f = useLoopstackClient(), p = s ?? "", m;
+	u[0] !== f.envKey || u[1] !== o || u[2] !== p || u[3] !== i || u[4] !== a ? (m = [
 		"file-explorer-content",
-		d.envKey,
+		f.envKey,
 		i,
 		a,
-		o
-	], l[0] = d.envKey, l[1] = o, l[2] = i, l[3] = a, l[4] = f) : f = l[4];
-	let p;
-	l[5] !== d.http || l[6] !== o || l[7] !== i || l[8] !== a ? (p = () => d.http.get(`${explorerPath(i, a)}/read`, { path: o }), l[5] = d.http, l[6] = o, l[7] = i, l[8] = a, l[9] = p) : p = l[9];
-	let m = !!a && !!o && u, h;
-	return l[10] !== f || l[11] !== p || l[12] !== m ? (h = {
-		queryKey: f,
-		queryFn: p,
-		enabled: m,
+		o,
+		p
+	], u[0] = f.envKey, u[1] = o, u[2] = p, u[3] = i, u[4] = a, u[5] = m) : m = u[5];
+	let h;
+	u[6] !== f.http || u[7] !== o || u[8] !== s || u[9] !== i || u[10] !== a ? (h = () => f.http.get(`${explorerPath(i, a)}/read`, {
+		path: o,
+		...s ? { slotId: s } : {}
+	}), u[6] = f.http, u[7] = o, u[8] = s, u[9] = i, u[10] = a, u[11] = h) : h = u[11];
+	let g = !!a && !!o && d, _;
+	return u[12] !== m || u[13] !== h || u[14] !== g ? (_ = {
+		queryKey: m,
+		queryFn: h,
+		enabled: g,
 		staleTime: 15e3,
 		retry: !1
-	}, l[10] = f, l[11] = p, l[12] = m, l[13] = h) : h = l[13], useQuery(h);
+	}, u[12] = m, u[13] = h, u[14] = g, u[15] = _) : _ = u[15], useQuery(_);
 }
 export { fileTreeKey, useFileContent, useFileTree };

package/dist/features/file-explorer/providers/FileExplorerProvider.js

@@ -6,78 +6,78 @@ import { createContext, useCallback, useContext, useMemo, useState } from "react
 import { jsx } from "react/jsx-runtime";
 import { useQueryClient } from "@tanstack/react-query";
 var FileExplorerContext = createContext(null);
-function FileExplorerProvider(u) {
-	let d = c(37), { variant: f, workspaceId: p, enabled: m, children: h } = u, g = m === void 0 ? !0 : m, _ = useLoopstackClient(), v = useQueryClient(), y;
-	d[0] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ new Set(), d[0] = y) : y = d[0];
+function FileExplorerProvider(l) {
+	let u = c(37), { variant: d, workspaceId: f, slotId: p, enabled: m, children: h } = l, g = m === void 0 ? !0 : m, _ = useLoopstackClient(), v = useQueryClient(), y;
+	u[0] === Symbol.for("react.memo_cache_sentinel") ? (y = /* @__PURE__ */ new Set(), u[0] = y) : y = u[0];
 	let [b, x] = useState(y), S;
-	d[1] === Symbol.for("react.memo_cache_sentinel") ? (S = [], d[1] = S) : S = d[1];
-	let [C, w] = useState(S), [T, E] = useState(null), D = useFileTree(f, p, g), O = useFileContent(f, p, T?.type === "file" ? T.path : void 0, g), k;
-	d[2] === Symbol.for("react.memo_cache_sentinel") ? (k = (e) => {
-		x((o) => {
-			let s = new Set(o);
-			return s.has(e) ? s.delete(e) : s.add(e), s;
+	u[1] === Symbol.for("react.memo_cache_sentinel") ? (S = [], u[1] = S) : S = u[1];
+	let [C, w] = useState(S), [T, E] = useState(null), D = useFileTree(d, f, p, g), O = useFileContent(d, f, T?.type === "file" ? T.path : void 0, p, g), k;
+	u[2] === Symbol.for("react.memo_cache_sentinel") ? (k = (e) => {
+		x((a) => {
+			let o = new Set(a);
+			return o.has(e) ? o.delete(e) : o.add(e), o;
 		});
-	}, d[2] = k) : k = d[2];
+	}, u[2] = k) : k = u[2];
 	let A = k, j;
-	d[3] === Symbol.for("react.memo_cache_sentinel") ? (j = (e) => {
-		e.type === "file" && (E(e), w((o) => o.some((o) => o.path === e.path) ? o : [...o, e]));
-	}, d[3] = j) : j = d[3];
+	u[3] === Symbol.for("react.memo_cache_sentinel") ? (j = (e) => {
+		e.type === "file" && (E(e), w((a) => a.some((a) => a.path === e.path) ? a : [...a, e]));
+	}, u[3] = j) : j = u[3];
 	let M = j, N;
-	d[4] === T?.path ? N = d[5] : (N = (e) => {
-		w((o) => {
-			let s = o.filter((o) => o.path !== e.path);
-			if (T?.path === e.path) if (s.length > 0) {
-				let l = o.findIndex((o) => o.path === e.path);
-				E(s[Math.max(0, l - 1)]);
+	u[4] === T?.path ? N = u[5] : (N = (e) => {
+		w((a) => {
+			let o = a.filter((a) => a.path !== e.path);
+			if (T?.path === e.path) if (o.length > 0) {
+				let s = a.findIndex((a) => a.path === e.path);
+				E(o[Math.max(0, s - 1)]);
 			} else E(null);
-			return s;
+			return o;
 		});
-	}, d[4] = T?.path, d[5] = N);
+	}, u[4] = T?.path, u[5] = N);
 	let P = N, F;
-	d[6] === T ? F = d[7] : (F = () => {
+	u[6] === T ? F = u[7] : (F = () => {
 		T && w((e) => {
-			let o = e.filter((e) => e.path !== T.path);
-			if (o.length > 0) {
-				let s = e.findIndex((e) => e.path === T.path);
-				E(o[Math.max(0, s - 1)]);
+			let a = e.filter((e) => e.path !== T.path);
+			if (a.length > 0) {
+				let o = e.findIndex((e) => e.path === T.path);
+				E(a[Math.max(0, o - 1)]);
 			} else E(null);
-			return o;
+			return a;
 		});
-	}, d[6] = T, d[7] = F);
+	}, u[6] = T, u[7] = F);
 	let I = F, L;
-	d[8] === Symbol.for("react.memo_cache_sentinel") ? (L = () => {
+	u[8] === Symbol.for("react.memo_cache_sentinel") ? (L = () => {
 		w([]), E(null);
-	}, d[8] = L) : L = d[8];
+	}, u[8] = L) : L = u[8];
 	let R = L, z;
-	d[9] === Symbol.for("react.memo_cache_sentinel") ? (z = (e) => {
+	u[9] === Symbol.for("react.memo_cache_sentinel") ? (z = (e) => {
 		w([e]), E(e);
-	}, d[9] = z) : z = d[9];
+	}, u[9] = z) : z = u[9];
 	let B = z, V;
-	d[10] === T ? V = d[11] : (V = (e) => {
-		w((o) => {
-			let s = o.findIndex((o) => o.path === e.path);
-			if (s <= 0) return o;
-			let l = o.slice(s);
-			return T && o.findIndex((e) => e.path === T.path) < s && E(e), l;
+	u[10] === T ? V = u[11] : (V = (e) => {
+		w((a) => {
+			let o = a.findIndex((a) => a.path === e.path);
+			if (o <= 0) return a;
+			let s = a.slice(o);
+			return T && a.findIndex((e) => e.path === T.path) < o && E(e), s;
 		});
-	}, d[10] = T, d[11] = V);
+	}, u[10] = T, u[11] = V);
 	let H = V, U;
-	d[12] === T ? U = d[13] : (U = (e) => {
-		w((o) => {
-			let s = o.findIndex((o) => o.path === e.path);
-			if (s < 0 || s >= o.length - 1) return o;
-			let l = o.slice(0, s + 1);
-			return T && o.findIndex((e) => e.path === T.path) > s && E(e), l;
+	u[12] === T ? U = u[13] : (U = (e) => {
+		w((a) => {
+			let o = a.findIndex((a) => a.path === e.path);
+			if (o < 0 || o >= a.length - 1) return a;
+			let s = a.slice(0, o + 1);
+			return T && a.findIndex((e) => e.path === T.path) > o && E(e), s;
 		});
-	}, d[12] = T, d[13] = U);
+	}, u[12] = T, u[13] = U);
 	let W = U, G;
-	d[14] !== _.envKey || d[15] !== v ? (G = () => {
+	u[14] !== _.envKey || u[15] !== v ? (G = () => {
 		v.invalidateQueries({ queryKey: fileTreeKey(_.envKey) });
-	}, d[14] = _.envKey, d[15] = v, d[16] = G) : G = d[16];
+	}, u[14] = _.envKey, u[15] = v, u[16] = G) : G = u[16];
 	let K = G, q;
-	d[17] === D.data ? q = d[18] : (q = D.data ?? [], d[17] = D.data, d[18] = q);
+	u[17] === D.data ? q = u[18] : (q = D.data ?? [], u[17] = D.data, u[18] = q);
 	let J = D.isLoading && !D.data, Y = O.data?.content ?? null, X = O.isLoading && !!T, Z;
-	d[19] !== I || d[20] !== P || d[21] !== H || d[22] !== W || d[23] !== b || d[24] !== C || d[25] !== K || d[26] !== T || d[27] !== q || d[28] !== J || d[29] !== Y || d[30] !== X || d[31] !== D.error || d[32] !== D.isFetching ? (Z = {
+	u[19] !== I || u[20] !== P || u[21] !== H || u[22] !== W || u[23] !== b || u[24] !== C || u[25] !== K || u[26] !== T || u[27] !== q || u[28] !== J || u[29] !== Y || u[30] !== X || u[31] !== D.error || u[32] !== D.isFetching ? (Z = {
 		nodes: q,
 		isTreeLoading: J,
 		treeError: D.error,
@@ -96,12 +96,12 @@ function FileExplorerProvider(u) {
 		closeToRight: W,
 		clearSelection: I,
 		refreshTree: K
-	}, d[19] = I, d[20] = P, d[21] = H, d[22] = W, d[23] = b, d[24] = C, d[25] = K, d[26] = T, d[27] = q, d[28] = J, d[29] = Y, d[30] = X, d[31] = D.error, d[32] = D.isFetching, d[33] = Z) : Z = d[33];
+	}, u[19] = I, u[20] = P, u[21] = H, u[22] = W, u[23] = b, u[24] = C, u[25] = K, u[26] = T, u[27] = q, u[28] = J, u[29] = Y, u[30] = X, u[31] = D.error, u[32] = D.isFetching, u[33] = Z) : Z = u[33];
 	let Q = Z, $;
-	return d[34] !== h || d[35] !== Q ? ($ = /* @__PURE__ */ jsx(FileExplorerContext.Provider, {
+	return u[34] !== h || u[35] !== Q ? ($ = /* @__PURE__ */ jsx(FileExplorerContext.Provider, {
 		value: Q,
 		children: h
-	}), d[34] = h, d[35] = Q, d[36] = $) : $ = d[36], $;
+	}), u[34] = h, u[35] = Q, u[36] = $) : $ = u[36], $;
 }
 function useFileExplorer() {
 	let e = useContext(FileExplorerContext);

package/dist/features/git/components/WorkbenchGitPanel.js

@@ -5,6 +5,7 @@ import "../../../hooks/useProcessor.js";
 import { useWorkbenchLayout } from "../../workbench/providers/WorkbenchLayoutProvider.js";
 import { SidebarPanel } from "../../workbench/components/SidebarPanel.js";
 import "../../workbench/index.js";
+import { EnvironmentSelector } from "../../workbench/components/EnvironmentSelector.js";
 import { useGitInvalidation, useGitLog, useGitRemote, useGitStatus, useRemoveGitRemote } from "../hooks/useGit.js";
 import { GitBranchBadge } from "./GitBranchBadge.js";
 import { GitCommitList } from "./GitCommitList.js";
@@ -12,31 +13,33 @@ import { GitRemoteStatus } from "./GitRemoteStatus.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { GitBranch, Loader2 } from "lucide-react";
-function WorkbenchGitPanel(y) {
-	let b = c(20), { workspaceId: x } = y, { panelSize: S, setPanelSize: C, closePanel: w } = useWorkbenchLayout(), { router: T } = useStudio(), { data: E, isLoading: D } = useGitStatus(x), { data: O, isLoading: k } = useGitLog(x), { data: A } = useGitRemote(x);
-	useGitInvalidation(x);
-	let j = useCreateWorkflow(), M = useRunWorkflow(), N = useRemoveGitRemote(), P = j.isPending || M.isPending, F;
-	b[0] !== j || b[1] !== T || b[2] !== M || b[3] !== x ? (F = () => {
-		x && j.mutate({
+function WorkbenchGitPanel(b) {
+	let x = c(21), { workspaceId: S } = b, { panelSize: C, setPanelSize: w, closePanel: T, selectedSlotId: E } = useWorkbenchLayout(), { router: D } = useStudio(), { data: O, isLoading: k } = useGitStatus(S, E), { data: A, isLoading: j } = useGitLog(S, 50, E), { data: M } = useGitRemote(S, E);
+	useGitInvalidation(S);
+	let N = useCreateWorkflow(), P = useRunWorkflow(), F = useRemoveGitRemote(), I = N.isPending || P.isPending, L;
+	x[0] !== N || x[1] !== D || x[2] !== P || x[3] !== S ? (L = () => {
+		S && N.mutate({
 			workflowName: "connectGitHub",
 			title: null,
-			workspaceId: x,
+			workspaceId: S,
 			transition: null,
 			args: {}
 		}, { onSuccess: (t) => {
-			M.mutate({ workflowId: t.id }, { onSuccess: () => {
-				T.navigateToWorkflow(t.id);
+			P.mutate({ workflowId: t.id }, { onSuccess: () => {
+				D.navigateToWorkflow(t.id);
 			} });
 		} });
-	}, b[0] = j, b[1] = T, b[2] = M, b[3] = x, b[4] = F) : F = b[4];
-	let I = F, L = D || k, R;
-	b[5] === Symbol.for("react.memo_cache_sentinel") ? (R = /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" }), b[5] = R) : R = b[5];
-	let z;
-	b[6] !== I || b[7] !== P || b[8] !== L || b[9] !== O?.commits || b[10] !== A || b[11] !== N || b[12] !== E || b[13] !== x ? (z = /* @__PURE__ */ jsx("div", {
+	}, x[0] = N, x[1] = D, x[2] = P, x[3] = S, x[4] = L) : L = x[4];
+	let R = L, z = k || j, B;
+	x[5] === Symbol.for("react.memo_cache_sentinel") ? (B = /* @__PURE__ */ jsx(GitBranch, { className: "h-4 w-4" }), x[5] = B) : B = x[5];
+	let V;
+	x[6] === Symbol.for("react.memo_cache_sentinel") ? (V = /* @__PURE__ */ jsx(EnvironmentSelector, {}), x[6] = V) : V = x[6];
+	let H;
+	x[7] !== R || x[8] !== I || x[9] !== z || x[10] !== A?.commits || x[11] !== M || x[12] !== F || x[13] !== O || x[14] !== S ? (H = /* @__PURE__ */ jsxs("div", {
 		className: "flex h-full flex-col",
-		children: /* @__PURE__ */ jsx("div", {
+		children: [V, /* @__PURE__ */ jsx("div", {
 			className: "flex-1 overflow-y-auto px-4 py-3",
-			children: L ? /* @__PURE__ */ jsxs("div", {
+			children: z ? /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2 py-4",
 				children: [/* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), /* @__PURE__ */ jsx("span", {
 					className: "text-muted-foreground text-sm",
@@ -45,34 +48,34 @@ function WorkbenchGitPanel(y) {
 			}) : /* @__PURE__ */ jsxs("div", {
 				className: "space-y-4",
 				children: [
-					E && /* @__PURE__ */ jsx(GitBranchBadge, { status: E }),
+					O && /* @__PURE__ */ jsx(GitBranchBadge, { status: O }),
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
 						className: "mb-2 text-xs font-medium uppercase text-muted-foreground",
 						children: "Remote"
 					}), /* @__PURE__ */ jsx(GitRemoteStatus, {
-						remote: A,
-						onConnect: I,
-						isConnecting: P,
-						onRemove: x ? () => N.mutate({ workspaceId: x }) : void 0,
-						isRemoving: N.isPending
+						remote: M,
+						onConnect: R,
+						isConnecting: I,
+						onRemove: S ? () => F.mutate({ workspaceId: S }) : void 0,
+						isRemoving: F.isPending
 					})] }),
 					/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h4", {
 						className: "mb-2 text-xs font-medium uppercase text-muted-foreground",
 						children: "Recent Commits"
-					}), /* @__PURE__ */ jsx(GitCommitList, { commits: O?.commits ?? [] })] })
+					}), /* @__PURE__ */ jsx(GitCommitList, { commits: A?.commits ?? [] })] })
 				]
 			})
-		})
-	}), b[6] = I, b[7] = P, b[8] = L, b[9] = O?.commits, b[10] = A, b[11] = N, b[12] = E, b[13] = x, b[14] = z) : z = b[14];
-	let B;
-	return b[15] !== w || b[16] !== S || b[17] !== C || b[18] !== z ? (B = /* @__PURE__ */ jsx(SidebarPanel, {
-		icon: R,
+		})]
+	}), x[7] = R, x[8] = I, x[9] = z, x[10] = A?.commits, x[11] = M, x[12] = F, x[13] = O, x[14] = S, x[15] = H) : H = x[15];
+	let U;
+	return x[16] !== T || x[17] !== C || x[18] !== w || x[19] !== H ? (U = /* @__PURE__ */ jsx(SidebarPanel, {
+		icon: B,
 		title: "Git",
 		description: "Source control for this workspace.",
-		size: S,
-		onSizeChange: C,
-		onClose: w,
-		children: z
-	}), b[15] = w, b[16] = S, b[17] = C, b[18] = z, b[19] = B) : B = b[19], B;
+		size: C,
+		onSizeChange: w,
+		onClose: T,
+		children: H
+	}), x[16] = T, x[17] = C, x[18] = w, x[19] = H, x[20] = U) : U = x[20], U;
 }
 export { WorkbenchGitPanel };

package/dist/features/git/hooks/useGit.js

@@ -6,47 +6,50 @@ import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 var gitPath = (e) => `/api/v1/workspaces/${e}/git`;
-function useGitStatus(r) {
-	let i = c(10), o = useLoopstackClient(), l;
-	i[0] !== o.envKey || i[1] !== r ? (l = queryKeys.gitStatus(o.envKey, r), i[0] = o.envKey, i[1] = r, i[2] = l) : l = i[2];
-	let u;
-	i[3] !== o.http || i[4] !== r ? (u = () => o.http.get(`${gitPath(r)}/status`), i[3] = o.http, i[4] = r, i[5] = u) : u = i[5];
-	let d = !!r, f;
-	return i[6] !== l || i[7] !== u || i[8] !== d ? (f = {
-		queryKey: l,
-		queryFn: u,
-		enabled: d,
+function useGitStatus(r, i) {
+	let o = c(12), l = useLoopstackClient(), u;
+	o[0] !== l.envKey || o[1] !== i || o[2] !== r ? (u = [...queryKeys.gitStatus(l.envKey, r), i ?? ""], o[0] = l.envKey, o[1] = i, o[2] = r, o[3] = u) : u = o[3];
+	let d;
+	o[4] !== l.http || o[5] !== i || o[6] !== r ? (d = () => l.http.get(`${gitPath(r)}/status`, i ? { slotId: i } : void 0), o[4] = l.http, o[5] = i, o[6] = r, o[7] = d) : d = o[7];
+	let f = !!r, p;
+	return o[8] !== u || o[9] !== d || o[10] !== f ? (p = {
+		queryKey: u,
+		queryFn: d,
+		enabled: f,
 		staleTime: 3e4,
 		retry: !1
-	}, i[6] = l, i[7] = u, i[8] = d, i[9] = f) : f = i[9], useQuery(f);
+	}, o[8] = u, o[9] = d, o[10] = f, o[11] = p) : p = o[11], useQuery(p);
 }
-function useGitLog(r, i) {
-	let o = c(11), l = i === void 0 ? 50 : i, u = useLoopstackClient(), d;
-	o[0] !== u.envKey || o[1] !== r ? (d = queryKeys.gitLog(u.envKey, r), o[0] = u.envKey, o[1] = r, o[2] = d) : d = o[2];
-	let f;
-	o[3] !== u.http || o[4] !== l || o[5] !== r ? (f = () => u.http.get(`${gitPath(r)}/log`, { limit: l }), o[3] = u.http, o[4] = l, o[5] = r, o[6] = f) : f = o[6];
-	let p = !!r, m;
-	return o[7] !== d || o[8] !== f || o[9] !== p ? (m = {
-		queryKey: d,
-		queryFn: f,
-		enabled: p,
+function useGitLog(r, i, o) {
+	let l = c(13), u = i === void 0 ? 50 : i, d = useLoopstackClient(), f;
+	l[0] !== d.envKey || l[1] !== o || l[2] !== r ? (f = [...queryKeys.gitLog(d.envKey, r), o ?? ""], l[0] = d.envKey, l[1] = o, l[2] = r, l[3] = f) : f = l[3];
+	let p;
+	l[4] !== d.http || l[5] !== u || l[6] !== o || l[7] !== r ? (p = () => d.http.get(`${gitPath(r)}/log`, {
+		limit: u,
+		...o ? { slotId: o } : {}
+	}), l[4] = d.http, l[5] = u, l[6] = o, l[7] = r, l[8] = p) : p = l[8];
+	let m = !!r, h;
+	return l[9] !== f || l[10] !== p || l[11] !== m ? (h = {
+		queryKey: f,
+		queryFn: p,
+		enabled: m,
 		staleTime: 3e4,
 		retry: !1
-	}, o[7] = d, o[8] = f, o[9] = p, o[10] = m) : m = o[10], useQuery(m);
+	}, l[9] = f, l[10] = p, l[11] = m, l[12] = h) : h = l[12], useQuery(h);
 }
-function useGitRemote(r) {
-	let i = c(10), o = useLoopstackClient(), l;
-	i[0] !== o.envKey || i[1] !== r ? (l = queryKeys.gitRemote(o.envKey, r), i[0] = o.envKey, i[1] = r, i[2] = l) : l = i[2];
-	let u;
-	i[3] !== o.http || i[4] !== r ? (u = () => o.http.get(`${gitPath(r)}/remote`), i[3] = o.http, i[4] = r, i[5] = u) : u = i[5];
-	let d = !!r, f;
-	return i[6] !== l || i[7] !== u || i[8] !== d ? (f = {
-		queryKey: l,
-		queryFn: u,
-		enabled: d,
+function useGitRemote(r, i) {
+	let o = c(12), l = useLoopstackClient(), u;
+	o[0] !== l.envKey || o[1] !== i || o[2] !== r ? (u = [...queryKeys.gitRemote(l.envKey, r), i ?? ""], o[0] = l.envKey, o[1] = i, o[2] = r, o[3] = u) : u = o[3];
+	let d;
+	o[4] !== l.http || o[5] !== i || o[6] !== r ? (d = () => l.http.get(`${gitPath(r)}/remote`, i ? { slotId: i } : void 0), o[4] = l.http, o[5] = i, o[6] = r, o[7] = d) : d = o[7];
+	let f = !!r, p;
+	return o[8] !== u || o[9] !== d || o[10] !== f ? (p = {
+		queryKey: u,
+		queryFn: d,
+		enabled: f,
 		staleTime: 6e4,
 		retry: !1
-	}, i[6] = l, i[7] = u, i[8] = d, i[9] = f) : f = i[9], useQuery(f);
+	}, o[8] = u, o[9] = d, o[10] = f, o[11] = p) : p = o[11], useQuery(p);
 }
 function useGitInvalidation(i) {
 	let a = c(5), s = useLoopstackClient(), l = useQueryClient(), u, d;

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

@@ -0,0 +1,46 @@
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../../components/ui/select.js";
+import { useWorkbenchLayout } from "../providers/WorkbenchLayoutProvider.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+function EnvironmentSelector() {
+	let u = c(11), { environments: d, selectedSlotId: f, setSelectedSlotId: p } = useWorkbenchLayout(), m;
+	u[0] === d ? m = u[1] : (m = d ?? [], u[0] = d, u[1] = m);
+	let h = m;
+	if (h.length <= 1) return null;
+	let g;
+	u[2] === Symbol.for("react.memo_cache_sentinel") ? (g = /* @__PURE__ */ jsx(SelectTrigger, {
+		className: "h-7 text-xs",
+		children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select environment" })
+	}), u[2] = g) : g = u[2];
+	let _;
+	u[3] === h ? _ = u[4] : (_ = h.map(_temp), u[3] = h, u[4] = _);
+	let v;
+	u[5] === _ ? v = u[6] : (v = /* @__PURE__ */ jsx(SelectContent, { children: _ }), u[5] = _, u[6] = v);
+	let y;
+	return u[7] !== f || u[8] !== p || u[9] !== v ? (y = /* @__PURE__ */ jsx("div", {
+		className: "border-b px-3 py-2",
+		children: /* @__PURE__ */ jsxs(Select, {
+			value: f,
+			onValueChange: p,
+			children: [g, v]
+		})
+	}), u[7] = f, u[8] = p, u[9] = v, u[10] = y) : y = u[10], y;
+}
+function _temp(e) {
+	return /* @__PURE__ */ jsx(SelectItem, {
+		value: e.slotId,
+		className: "text-xs",
+		children: /* @__PURE__ */ jsxs("span", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("span", { className: `h-1.5 w-1.5 rounded-full ${e.status === "running" ? "bg-green-500" : "bg-muted-foreground/40"}` }),
+				e.envName || e.slotId,
+				e.status !== "running" && /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: "(stopped)"
+				})
+			]
+		})
+	}, e.slotId);
+}
+export { EnvironmentSelector };

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

@@ -1,74 +1,83 @@
 import { useWorkspaceEnvironments } from "../../../hooks/useEnvironments.js";
 import { useOptionalStudioPreferences } from "../../../providers/StudioPreferencesProvider.js";
 import { c } from "react/compiler-runtime";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 var WorkbenchLayoutContext = createContext(null);
-function WorkbenchLayoutProvider(s) {
-	let l = c(35), { children: u, workspaceId: d, workflow: f, getPreviewUrl: p, getEnvironmentPreviewUrl: m } = s, h = useOptionalStudioPreferences(), { data: g } = useWorkspaceEnvironments(d), [_, v] = useState(null), y;
-	l[0] === Symbol.for("react.memo_cache_sentinel") ? (y = {}, l[0] = y) : y = l[0];
-	let [b, x] = useState(y), S = h ? h.preferences.activePanel : _, C = h ? h.preferences.panelSizes : b, [w, T] = useState(null), [E, D] = useState(""), O;
-	l[1] === g ? O = l[2] : (O = g === void 0 || g.some(_temp), l[1] = g, l[2] = O);
-	let k = O, A;
-	l[3] === Symbol.for("react.memo_cache_sentinel") ? (A = {
+function WorkbenchLayoutProvider(u) {
+	let d = c(39), { children: f, workspaceId: p, workflow: m, getPreviewUrl: h, getEnvironmentPreviewUrl: g } = u, _ = useOptionalStudioPreferences(), { data: v } = useWorkspaceEnvironments(p), [y, b] = useState(null), x;
+	d[0] === Symbol.for("react.memo_cache_sentinel") ? (x = {}, d[0] = x) : x = d[0];
+	let [S, C] = useState(x), w = _ ? _.preferences.activePanel : y, T = _ ? _.preferences.panelSizes : S, [E, D] = useState(null), [O, k] = useState(""), A, j;
+	d[1] !== v || d[2] !== O ? (A = () => {
+		if (!v?.length) return;
+		let e = v.find((e) => e.slotId === O);
+		e?.status !== "running" && k((v.find(_temp) ?? e ?? v[0]).slotId);
+	}, j = [v, O], d[1] = v, d[2] = O, d[3] = A, d[4] = j) : (A = d[3], j = d[4]), useEffect(A, j);
+	let M;
+	d[5] === v ? M = d[6] : (M = v === void 0 || v.some(_temp2), d[5] = v, d[6] = M);
+	let N = M, P;
+	d[7] === Symbol.for("react.memo_cache_sentinel") ? (P = {
 		runs: "medium",
 		preview: "medium",
 		files: "medium",
 		environment: "small"
-	}, l[3] = A) : A = l[3];
-	let j = A, M = S ? C[S] ?? j[S] ?? "small" : "small", N;
-	l[4] === h ? N = l[5] : (N = (e) => {
-		h ? h.setPreference("activePanel", e) : v(e);
-	}, l[4] = h, l[5] = N);
-	let P = N, F;
-	l[6] !== S || l[7] !== P ? (F = (e) => {
-		P(S === e ? null : e);
-	}, l[6] = S, l[7] = P, l[8] = F) : F = l[8];
-	let I = F, L;
-	l[9] === P ? L = l[10] : (L = () => {
-		P(null);
-	}, l[9] = P, l[10] = L);
+	}, d[7] = P) : P = d[7];
+	let F = P, I = w ? T[w] ?? F[w] ?? "small" : "small", L;
+	d[8] === _ ? L = d[9] : (L = (e) => {
+		_ ? _.setPreference("activePanel", e) : b(e);
+	}, d[8] = _, d[9] = L);
 	let R = L, z;
-	l[11] !== S || l[12] !== C || l[13] !== h ? (z = (e) => {
-		if (!S) return;
-		let o = {
-			...C,
-			[S]: e
-		};
-		h ? h.setPreference("panelSizes", o) : x(o);
-	}, l[11] = S, l[12] = C, l[13] = h, l[14] = z) : z = l[14];
+	d[10] !== w || d[11] !== R ? (z = (e) => {
+		R(w === e ? null : e);
+	}, d[10] = w, d[11] = R, d[12] = z) : z = d[12];
 	let B = z, V;
-	l[15] === P ? V = l[16] : (V = (e) => {
-		D(e), P("preview");
-	}, l[15] = P, l[16] = V);
+	d[13] === R ? V = d[14] : (V = () => {
+		R(null);
+	}, d[13] = R, d[14] = V);
 	let H = V, U;
-	l[17] !== S || l[18] !== w || l[19] !== R || l[20] !== g || l[21] !== m || l[22] !== p || l[23] !== H || l[24] !== M || l[25] !== k || l[26] !== E || l[27] !== B || l[28] !== I || l[29] !== f || l[30] !== d ? (U = {
-		workspaceId: d,
-		workflow: f,
-		previewPanelEnabled: k,
-		getPreviewUrl: p,
-		getEnvironmentPreviewUrl: m,
-		environments: g,
-		activePanel: S,
-		panelSize: M,
-		togglePanel: I,
-		closePanel: R,
-		setPanelSize: B,
-		selectedSlotId: E,
-		setSelectedSlotId: D,
-		openPreviewWithEnvironment: H,
-		activeSectionId: w,
-		setActiveSectionId: T
-	}, l[17] = S, l[18] = w, l[19] = R, l[20] = g, l[21] = m, l[22] = p, l[23] = H, l[24] = M, l[25] = k, l[26] = E, l[27] = B, l[28] = I, l[29] = f, l[30] = d, l[31] = U) : U = l[31];
+	d[15] !== w || d[16] !== T || d[17] !== _ ? (U = (e) => {
+		if (!w) return;
+		let l = {
+			...T,
+			[w]: e
+		};
+		_ ? _.setPreference("panelSizes", l) : C(l);
+	}, d[15] = w, d[16] = T, d[17] = _, d[18] = U) : U = d[18];
 	let W = U, G;
-	return l[32] !== u || l[33] !== W ? (G = /* @__PURE__ */ jsx(WorkbenchLayoutContext.Provider, {
-		value: W,
-		children: u
-	}), l[32] = u, l[33] = W, l[34] = G) : G = l[34], G;
+	d[19] === R ? G = d[20] : (G = (e) => {
+		k(e), R("preview");
+	}, d[19] = R, d[20] = G);
+	let K = G, q;
+	d[21] !== w || d[22] !== E || d[23] !== H || d[24] !== v || d[25] !== g || d[26] !== h || d[27] !== K || d[28] !== I || d[29] !== N || d[30] !== O || d[31] !== W || d[32] !== B || d[33] !== m || d[34] !== p ? (q = {
+		workspaceId: p,
+		workflow: m,
+		previewPanelEnabled: N,
+		getPreviewUrl: h,
+		getEnvironmentPreviewUrl: g,
+		environments: v,
+		activePanel: w,
+		panelSize: I,
+		togglePanel: B,
+		closePanel: H,
+		setPanelSize: W,
+		selectedSlotId: O,
+		setSelectedSlotId: k,
+		openPreviewWithEnvironment: K,
+		activeSectionId: E,
+		setActiveSectionId: D
+	}, d[21] = w, d[22] = E, d[23] = H, d[24] = v, d[25] = g, d[26] = h, d[27] = K, d[28] = I, d[29] = N, d[30] = O, d[31] = W, d[32] = B, d[33] = m, d[34] = p, d[35] = q) : q = d[35];
+	let J = q, Y;
+	return d[36] !== f || d[37] !== J ? (Y = /* @__PURE__ */ jsx(WorkbenchLayoutContext.Provider, {
+		value: J,
+		children: f
+	}), d[36] = f, d[37] = J, d[38] = Y) : Y = d[38], Y;
 }
-function _temp(e) {
+function _temp2(e) {
 	return !!e.connectionUrl && (!!e.workerId || e.local);
 }
+function _temp(e) {
+	return e.status === "running";
+}
 function useWorkbenchLayout() {
 	let e = useContext(WorkbenchLayoutContext);
 	if (!e) throw Error("useWorkbenchLayout must be used within a WorkbenchLayoutProvider");

package/dist/packages/contracts/dist/types/types/ui-message.type.js

@@ -31,9 +31,22 @@ const UITextBlockSchema = z.object({
 	UIServerToolUseBlockSchema,
 	UIServerToolResultBlockSchema,
 	UIToolResultBlockSchema
-]), UIMessageSchema = z.object({
+]), UIUsageSchema = z.object({
+	inputTokens: z.number(),
+	outputTokens: z.number(),
+	cacheCreationInputTokens: z.number().optional(),
+	cacheReadInputTokens: z.number().optional(),
+	reasoningTokens: z.number().optional()
+}), UIMessageMetaSchema = z.object({
+	model: z.string().optional(),
+	usage: UIUsageSchema.optional(),
+	costUsd: z.number().optional(),
+	numTurns: z.number().optional(),
+	durationMs: z.number().optional()
+}), UIMessageSchema = z.object({
 	role: z.enum(["user", "assistant"]),
 	text: z.string().optional(),
-	blocks: z.array(UIContentBlockSchema).optional()
+	blocks: z.array(UIContentBlockSchema).optional(),
+	meta: UIMessageMetaSchema.optional()
 });
 export { UIMessageSchema };

package/package.json

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