@loopstack/loopstack-studio 0.33.0 → 0.35.0

package/dist/features/documents/DocumentRenderer.js

@@ -1,5 +1,7 @@
 import { useDocumentConfigs } from "../../hooks/useConfig.js";
 import CompletionMessagePaper_default from "../../components/messages/CompletionMessagePaper.js";
+import { useFeatureRegistry } from "../feature-registry/FeatureRegistryProvider.js";
+import "../feature-registry/index.js";
 import OAuthPromptRenderer_default from "../oauth/OAuthPromptRenderer.js";
 import "../oauth/index.js";
 import AiMessage_default from "./renderers/AiMessage.js";
@@ -14,86 +16,84 @@ import LlmMessage_default from "./renderers/LlmMessage.js";
 import MarkdownMessageRenderer_default from "./renderers/MarkdownMessageRenderer.js";
 import PlainMessageRenderer_default from "./renderers/PlainMessageRenderer.js";
 import TextPromptRenderer_default from "./renderers/TextPromptRenderer.js";
-import { useFeatureRegistry } from "../feature-registry/FeatureRegistryProvider.js";
-import "../feature-registry/index.js";
 import { c } from "react/compiler-runtime";
 import React, { useMemo } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 var coreRendererRegistry = new Map([
-	["ai-message", ({ document: e, isLastItem: _ }) => /* @__PURE__ */ jsx(AiMessage_default, {
+	["ai-message", ({ document: e, isLastItem: g }) => /* @__PURE__ */ jsx(AiMessage_default, {
 		document: e,
-		isLastItem: _
+		isLastItem: g
 	})],
-	["llm-message", ({ document: e, isLastItem: _ }) => /* @__PURE__ */ jsx(LlmMessage_default, {
+	["llm-message", ({ document: e, isLastItem: g }) => /* @__PURE__ */ jsx(LlmMessage_default, {
 		document: e,
-		isLastItem: _
+		isLastItem: g
 	})],
 	["debug", ({ document: e }) => /* @__PURE__ */ jsx("div", {
 		className: "mb-4 flex",
 		children: /* @__PURE__ */ jsx(DocumentDebugRenderer_default, { document: e })
 	})],
-	["form", ({ parentWorkflow: e, workflow: v, document: y, isActive: b }) => /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
+	["form", ({ parentWorkflow: e, workflow: _, document: v, isActive: y }) => /* @__PURE__ */ jsx(CompletionMessagePaper_default, {
 		role: "document",
 		fullWidth: !0,
-		timestamp: new Date(y.createdAt),
+		timestamp: new Date(v.createdAt),
 		children: /* @__PURE__ */ jsx(DocumentFormRenderer_default, {
 			parentWorkflow: e,
-			workflow: v,
-			document: y,
-			enabled: b,
-			viewOnly: !b
+			workflow: _,
+			document: v,
+			enabled: y,
+			viewOnly: !y
 		})
 	})],
 	["message", ({ document: e }) => /* @__PURE__ */ jsx(DocumentMessageRenderer_default, { document: e })],
 	["error", ({ document: e }) => /* @__PURE__ */ jsx(ErrorMessageRenderer_default, { document: e })],
 	["plain", ({ document: e }) => /* @__PURE__ */ jsx(PlainMessageRenderer_default, { document: e })],
 	["markdown", ({ document: e }) => /* @__PURE__ */ jsx(MarkdownMessageRenderer_default, { document: e })],
-	["link", ({ workflow: e, document: _ }) => /* @__PURE__ */ jsx(LinkMessageRenderer_default, {
+	["link", ({ workflow: e, document: g }) => /* @__PURE__ */ jsx(LinkMessageRenderer_default, {
 		workflow: e,
-		document: _
+		document: g
 	})],
-	["oauth-prompt", ({ parentWorkflow: e, workflow: _, document: y, isActive: b }) => /* @__PURE__ */ jsx(OAuthPromptRenderer_default, {
+	["oauth-prompt", ({ parentWorkflow: e, workflow: g, document: _, isActive: y }) => /* @__PURE__ */ jsx(OAuthPromptRenderer_default, {
 		parentWorkflow: e,
-		workflow: _,
-		document: y,
-		isActive: b
+		workflow: g,
+		document: _,
+		isActive: y
 	})],
-	["text-prompt", ({ parentWorkflow: e, workflow: _, document: v, isActive: y }) => /* @__PURE__ */ jsx(TextPromptRenderer_default, {
+	["text-prompt", ({ parentWorkflow: e, workflow: g, document: _, isActive: v }) => /* @__PURE__ */ jsx(TextPromptRenderer_default, {
 		parentWorkflow: e,
-		workflow: _,
-		document: v,
-		isActive: y
+		workflow: g,
+		document: _,
+		isActive: v
 	})],
-	["choices", ({ parentWorkflow: e, workflow: _, document: v, isActive: y }) => /* @__PURE__ */ jsx(ChoicesRenderer_default, {
+	["choices", ({ parentWorkflow: e, workflow: g, document: _, isActive: v }) => /* @__PURE__ */ jsx(ChoicesRenderer_default, {
 		parentWorkflow: e,
-		workflow: _,
-		document: v,
-		isActive: y
+		workflow: g,
+		document: _,
+		isActive: v
 	})],
-	["confirm-prompt", ({ parentWorkflow: e, workflow: _, document: v, isActive: y }) => /* @__PURE__ */ jsx(ConfirmPromptRenderer_default, {
+	["confirm-prompt", ({ parentWorkflow: e, workflow: g, document: _, isActive: v }) => /* @__PURE__ */ jsx(ConfirmPromptRenderer_default, {
 		parentWorkflow: e,
-		workflow: _,
-		document: v,
-		isActive: y
+		workflow: g,
+		document: _,
+		isActive: v
 	})]
 ]);
 function resolveWidgetName(e) {
-	let _ = e;
-	return _?.widgets?.[0]?.widget ? _.widgets[0].widget : _?.form?.widget ? _.form.widget : "form";
+	let g = e;
+	return g?.widgets?.[0]?.widget ? g.widgets[0].widget : g?.form?.widget ? g.form.widget : "form";
 }
-var DocumentRenderer_default = (_) => {
-	let v = c(9), y = useFeatureRegistry(), b = useDocumentConfigs(), x = _.document, S;
+var DocumentRenderer_default = (g) => {
+	let v = c(9), y = useFeatureRegistry(), b = useDocumentConfigs(), x = g.document, S;
 	if (v[0] !== x.documentName || v[1] !== b || v[2] !== y) {
-		let e = resolveWidgetName(b.get(x.documentName)?.ui), _;
+		let e = resolveWidgetName(b.get(x.documentName)?.ui), g;
 		if (v[4] !== y) {
-			_ = /* @__PURE__ */ new Map();
-			for (let e of y) if (e.documentRenderers) for (let [v, y] of Object.entries(e.documentRenderers)) _.set(v, y);
-			v[4] = y, v[5] = _;
-		} else _ = v[5];
-		let C = _;
-		S = coreRendererRegistry.get(e) ?? C.get(e), v[0] = x.documentName, v[1] = b, v[2] = y, v[3] = S;
+			g = /* @__PURE__ */ new Map();
+			for (let e of y) if (e.documentRenderers) for (let [_, v] of Object.entries(e.documentRenderers)) g.set(_, v);
+			v[4] = y, v[5] = g;
+		} else g = v[5];
+		let _ = g;
+		S = coreRendererRegistry.get(e) ?? _.get(e), v[0] = x.documentName, v[1] = b, v[2] = y, v[3] = S;
 	} else S = v[3];
 	let C = S, w;
-	return v[6] !== C || v[7] !== _ ? (w = /* @__PURE__ */ jsx("div", { children: C ? /* @__PURE__ */ jsx(C, { ..._ }) : /* @__PURE__ */ jsx(Fragment$1, { children: "unknown document type" }) }), v[6] = C, v[7] = _, v[8] = w) : w = v[8], w;
+	return v[6] !== C || v[7] !== g ? (w = /* @__PURE__ */ jsx("div", { children: C ? /* @__PURE__ */ jsx(C, { ...g }) : /* @__PURE__ */ jsx(Fragment$1, { children: "unknown document type" }) }), v[6] = C, v[7] = g, v[8] = w) : w = v[8], w;
 };
 export { DocumentRenderer_default as default };

package/dist/features/documents/components/DocumentList.js

@@ -1,6 +1,6 @@
-import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import { WorkflowState } from "../../../packages/contracts/dist/enums/workflow-state.enum.js";
 import "../../../packages/contracts/dist/enums/index.js";
+import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import DocumentItem_default from "./DocumentItem.js";
 import { c } from "react/compiler-runtime";
 import React, { useEffect } from "react";

package/dist/features/documents/document-details/DocumentDetails.js

@@ -257,11 +257,6 @@ var formatDate = (e) => {
 					className: "text-xs capitalize",
 					children: a.level
 				}),
-				a?.hidden && /* @__PURE__ */ jsx(Badge, {
-					variant: "outline",
-					className: "text-xs",
-					children: "Hidden"
-				}),
 				m.invalidate && /* @__PURE__ */ jsx(Badge, {
 					variant: "outline",
 					className: "text-xs",

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

@@ -1,13 +1,14 @@
+import { useRunWorkflow } from "../../../packages/react/dist/hooks/mutations.js";
 import { useDocumentConfigs } from "../../../hooks/useConfig.js";
 import { Button } from "../../../components/ui/button.js";
-import { useRunWorkflow } from "../../../hooks/useProcessor.js";
+import "../../../hooks/useProcessor.js";
 import Form_default from "../../../components/dynamic-form/Form.js";
 import { c } from "react/compiler-runtime";
 import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
 import { Loader2 } from "lucide-react";
 import { useForm } from "react-hook-form";
-import "zod";
 function resolveFormConfig(e) {
 	let d = e, f = (d?.widgets)?.find((e) => e.widget === "form");
 	if (f?.options) {
@@ -55,7 +56,7 @@ var DocumentFormRenderer_default = (m) => {
 		}
 		x.mutate({
 			workflowId: g.id,
-			runWorkflowPayloadDto: { transition: {
+			payload: { transition: {
 				id: e,
 				workflowId: _.id,
 				payload: d
@@ -65,9 +66,9 @@ var DocumentFormRenderer_default = (m) => {
 		C?.type === "object" ? A(e, d) : A(e, d.raw);
 	}, M = (e) => {
 		e.transition && E.handleSubmit((d) => j(e.transition)(d), _temp2)();
-	}, { formUi: N, actions: P } = resolveFormConfig(S?.ui), F = !!N?.form?.disabled, I = !y || F || !1, L = Form_default, R = C ?? {}, z = N ?? void 0, B = S?.meta?.mimeType, V = !b && P.length > 0 ? /* @__PURE__ */ jsx("div", {
+	}, { formUi: N, actions: P } = resolveFormConfig(S?.ui), F = !!N?.form?.disabled, I = !y || F || !1, L = Form_default, R = C ?? {}, B = N ?? void 0, V = S?.meta?.mimeType, H = !b && P.length > 0 ? /* @__PURE__ */ jsx("div", {
 		className: "flex w-full flex-col items-end gap-4",
-		children: P.map((e, f) => {
+		children: P.map((e, d) => {
 			let p = I || e.transition !== void 0 && !k.includes(e.transition);
 			return /* @__PURE__ */ jsxs(Button, {
 				type: "button",
@@ -77,21 +78,21 @@ var DocumentFormRenderer_default = (m) => {
 				className: e.type === "button-full-w" ? "w-full" : "w-48",
 				...e.props ?? {},
 				children: [x.isPending && /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }), e.label ?? "Submit"]
-			}, f);
+			}, d);
 		})
-	}) : void 0, H;
-	return h[6] !== L || h[7] !== I || h[8] !== E || h[9] !== R || h[10] !== z || h[11] !== B || h[12] !== V || h[13] !== b ? (H = /* @__PURE__ */ jsx("div", {
+	}) : void 0, U;
+	return h[6] !== L || h[7] !== I || h[8] !== E || h[9] !== R || h[10] !== B || h[11] !== V || h[12] !== H || h[13] !== b ? (U = /* @__PURE__ */ jsx("div", {
 		className: "flex",
 		children: /* @__PURE__ */ jsx(L, {
 			form: E,
 			schema: R,
-			ui: z,
-			mimeType: B,
+			ui: B,
+			mimeType: V,
 			disabled: I,
 			viewOnly: b,
-			actions: V
+			actions: H
 		})
-	}), h[6] = L, h[7] = I, h[8] = E, h[9] = R, h[10] = z, h[11] = B, h[12] = V, h[13] = b, h[14] = H) : H = h[14], H;
+	}), h[6] = L, h[7] = I, h[8] = E, h[9] = R, h[10] = B, h[11] = V, h[12] = H, h[13] = b, h[14] = U) : U = h[14], U;
 };
 function _temp(e) {
 	return e.id;

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

@@ -1,6 +1,7 @@
-import { useWorkflowStatus } from "../../../hooks/useWorkflows.js";
+import { useWorkflowStatus } from "../../../packages/react/dist/hooks/queries.js";
 import { WorkflowState } from "../../../packages/contracts/dist/enums/workflow-state.enum.js";
 import "../../../packages/contracts/dist/enums/index.js";
+import "../../../hooks/useWorkflows.js";
 import link_default from "../../../components/loopstack-elements/link.js";
 import { c } from "react/compiler-runtime";
 import React from "react";

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

@@ -1,4 +1,5 @@
-import { useRunWorkflow } from "../../../hooks/useProcessor.js";
+import { useRunWorkflow } from "../../../packages/react/dist/hooks/mutations.js";
+import "../../../hooks/useProcessor.js";
 import { c } from "react/compiler-runtime";
 import { useCallback } from "react";
 function resolveTransition(e) {
@@ -15,7 +16,7 @@ function useDocumentTransition(i, a, o) {
 	s[4] !== f || s[5] !== i.id || s[6] !== l || s[7] !== d || s[8] !== a.id ? (p = (e) => {
 		!d || !f || l.mutate({
 			workflowId: i.id,
-			runWorkflowPayloadDto: { transition: {
+			payload: { transition: {
 				id: d,
 				workflowId: a.id,
 				payload: e

package/dist/features/feature-registry/FeatureRegistryProvider.js

@@ -1,29 +1,28 @@
-import { useAppsConfig } from "../../hooks/useConfig.js";
+import { useAppsConfig } from "../../packages/react/dist/hooks/queries.js";
+import "../../hooks/useConfig.js";
 import { AVAILABLE_FEATURES } from "./available-features.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 var FeatureRegistryContext = createContext([]), BackendFeaturesContext = createContext([]);
-function resolveFeatures(e, o) {
-	return e?.length ? e.filter((e) => e.enabled !== !1).map((e) => AVAILABLE_FEATURES[e.id]).filter(Boolean) : o;
+function resolveFeatures(e) {
+	return e.filter((e) => e.enabled !== !1).map((e) => AVAILABLE_FEATURES[e.id]).filter(Boolean);
 }
 function FeatureRegistryProvider(a) {
-	let s = c(13), { features: l, children: u } = a, d;
-	s[0] === l ? d = s[1] : (d = l === void 0 ? [] : l, s[0] = l, s[1] = d);
-	let f = d, { data: p } = useAppsConfig(), m = p?.[0]?.features, h;
-	s[2] !== m || s[3] !== f ? (h = resolveFeatures(m, f), s[2] = m, s[3] = f, s[4] = h) : h = s[4];
-	let g = h, _;
-	s[5] === m ? _ = s[6] : (_ = m ?? [], s[5] = m, s[6] = _);
-	let v = _, y;
-	s[7] !== g || s[8] !== u ? (y = /* @__PURE__ */ jsx(FeatureRegistryContext.Provider, {
-		value: g,
+	let s = c(11), { appName: l, children: u } = a, { data: d } = useAppsConfig(), f;
+	s[0] !== l || s[1] !== d ? (f = d?.find((e) => e.appName === l)?.features ?? [], s[0] = l, s[1] = d, s[2] = f) : f = s[2];
+	let p = f, m;
+	s[3] === p ? m = s[4] : (m = resolveFeatures(p), s[3] = p, s[4] = m);
+	let h = m, g;
+	s[5] !== h || s[6] !== u ? (g = /* @__PURE__ */ jsx(FeatureRegistryContext.Provider, {
+		value: h,
 		children: u
-	}), s[7] = g, s[8] = u, s[9] = y) : y = s[9];
-	let b;
-	return s[10] !== v || s[11] !== y ? (b = /* @__PURE__ */ jsx(BackendFeaturesContext.Provider, {
-		value: v,
-		children: y
-	}), s[10] = v, s[11] = y, s[12] = b) : b = s[12], b;
+	}), s[5] = h, s[6] = u, s[7] = g) : g = s[7];
+	let _;
+	return s[8] !== p || s[9] !== g ? (_ = /* @__PURE__ */ jsx(BackendFeaturesContext.Provider, {
+		value: p,
+		children: g
+	}), s[8] = p, s[9] = g, s[10] = _) : _ = s[10], _;
 }
 function useFeatureRegistry() {
 	return useContext(FeatureRegistryContext);

package/dist/features/feature-registry/available-features.js

@@ -1,4 +1,4 @@
-import { fileExplorerFeature } from "../file-explorer/file-explorer-feature.js";
+import { localFileExplorerFeature, remoteFileExplorerFeature } from "../file-explorer/file-explorer-feature.js";
 import "../file-explorer/index.js";
 import { gitFeature } from "../git/git-feature.js";
 import "../git/index.js";
@@ -6,7 +6,8 @@ import { secretsFeature } from "../secrets/secrets-feature.js";
 import "../secrets/index.js";
 const AVAILABLE_FEATURES = {
 	git: gitFeature,
-	fileExplorer: fileExplorerFeature,
+	localFileExplorer: localFileExplorerFeature,
+	remoteFileExplorer: remoteFileExplorerFeature,
 	secrets: secretsFeature
 };
 export { AVAILABLE_FEATURES };

package/dist/features/feature-registry/index.js

@@ -1,2 +1,2 @@
-import { AVAILABLE_FEATURES } from "./available-features.js";
 import { FeatureRegistryProvider, useFeatureConfig, useFeatureRegistry } from "./FeatureRegistryProvider.js";
+import { AVAILABLE_FEATURES } from "./available-features.js";

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

@@ -1,13 +1,13 @@
 import { FileContentViewer } from "../../code-explorer/components/FileContentViewer.js";
 import "../../code-explorer/index.js";
+import { useFeatureConfig } from "../../feature-registry/FeatureRegistryProvider.js";
+import "../../feature-registry/index.js";
 import { useWorkbenchLayout } from "../../workbench/providers/WorkbenchLayoutProvider.js";
-import "../../workbench/index.js";
 import { SidebarPanel } from "../../workbench/components/SidebarPanel.js";
+import "../../workbench/index.js";
 import { FileExplorerProvider, useOptionalFileExplorer } from "../providers/FileExplorerProvider.js";
 import { FileTabsBar } from "./FileTabsBar.js";
 import { FileTree } from "./FileTree.js";
-import { useFeatureConfig } from "../../feature-registry/FeatureRegistryProvider.js";
-import "../../feature-registry/index.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Files } from "lucide-react";
@@ -28,14 +28,14 @@ function FileExplorerContent() {
 		className: "w-52 shrink-0 overflow-auto border-r bg-muted/40",
 		children: /* @__PURE__ */ jsx(FileTree, {})
 	}), i[1] = o) : o = i[1];
-	let d;
-	i[2] === Symbol.for("react.memo_cache_sentinel") ? (d = /* @__PURE__ */ jsx(FileTabsBar, {}), i[2] = d) : d = i[2];
+	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", {
 		className: "flex h-full",
 		children: [o, /* @__PURE__ */ jsxs("div", {
 			className: "flex min-w-0 flex-1 flex-col",
-			children: [d, /* @__PURE__ */ jsx("div", {
+			children: [s, /* @__PURE__ */ jsx("div", {
 				className: "flex-1 overflow-hidden p-3 pt-2",
 				children: /* @__PURE__ */ jsx(FileContentViewer, {
 					selectedFile: a.selectedFile,
@@ -48,52 +48,73 @@ function FileExplorerContent() {
 	}), i[3] = a.fileContent, i[4] = a.isContentLoading, i[5] = a.selectedFile, i[6] = p) : p = i[6], p;
 }
 function FileExplorerPanel(e) {
-	let s = c(21), { workspaceId: l } = e, { closePanel: u, panelSize: f, setPanelSize: m, environments: h } = useWorkbenchLayout(), g = useFeatureConfig("fileExplorer"), _;
-	s[0] === g?.config?.environments ? _ = s[1] : (_ = g?.config?.environments ?? [], s[0] = g?.config?.environments, s[1] = _);
-	let v = _, y = h?.[0]?.slotId ?? "", b;
-	s[2] !== v || s[3] !== y ? (b = v.length === 0 || v.includes(y), s[2] = v, s[3] = y, s[4] = b) : b = s[4];
-	let x = b;
-	if (!x) {
+	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;
-		s[5] === Symbol.for("react.memo_cache_sentinel") ? (e = /* @__PURE__ */ jsx(Files, { className: "h-4 w-4" }), s[5] = e) : e = s[5];
+		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;
-		s[6] === Symbol.for("react.memo_cache_sentinel") ? (i = /* @__PURE__ */ jsx("div", {
+		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."
 			})
-		}), s[6] = i) : i = s[6];
-		let o;
-		return s[7] !== u || s[8] !== f || s[9] !== m ? (o = /* @__PURE__ */ jsx(SidebarPanel, {
+		}), 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: "Files",
-			description: "Browse remote files.",
-			size: f,
-			onSizeChange: m,
-			onClose: u,
+			title: f,
+			description: m,
+			size: _,
+			onSizeChange: v,
+			onClose: g,
 			children: i
-		}), s[7] = u, s[8] = f, s[9] = m, s[10] = o) : o = s[10], o;
+		}), l[7] = g, l[8] = m, l[9] = _, l[10] = v, l[11] = f, l[12] = a) : a = l[12], a;
 	}
-	let S;
-	s[11] === Symbol.for("react.memo_cache_sentinel") ? (S = /* @__PURE__ */ jsx(Files, { className: "h-4 w-4" }), s[11] = S) : S = s[11];
-	let C;
-	s[12] === Symbol.for("react.memo_cache_sentinel") ? (C = /* @__PURE__ */ jsx(FileExplorerContent, {}), s[12] = C) : C = s[12];
-	let w;
-	s[13] !== x || s[14] !== l ? (w = /* @__PURE__ */ jsx(FileExplorerProvider, {
-		workspaceId: l,
-		enabled: x,
-		children: C
-	}), s[13] = x, s[14] = l, s[15] = w) : w = s[15];
-	let T;
-	return s[16] !== u || s[17] !== f || s[18] !== m || s[19] !== w ? (T = /* @__PURE__ */ jsx(SidebarPanel, {
-		icon: S,
+	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;
+}
+function LocalFileExplorerPanel(e) {
+	let i = c(2), { workspaceId: a } = e, o;
+	return i[0] === a ? o = i[1] : (o = /* @__PURE__ */ jsx(FileExplorerPanel, {
+		variant: "local",
+		featureId: "localFileExplorer",
 		title: "Files",
-		description: "Browse and view files.",
-		size: f,
-		onSizeChange: m,
-		onClose: u,
-		children: w
-	}), s[16] = u, s[17] = f, s[18] = m, s[19] = w, s[20] = T) : T = s[20], T;
+		description: "Browse and view local project files.",
+		workspaceId: a
+	}), i[0] = a, i[1] = o), o;
+}
+function RemoteFileExplorerPanel(e) {
+	let i = c(2), { workspaceId: a } = e, o;
+	return i[0] === a ? o = i[1] : (o = /* @__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;
 }
-export { FileExplorerPanel };
+export { LocalFileExplorerPanel, RemoteFileExplorerPanel };

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

@@ -1,5 +1,5 @@
-import { FileTabsBarBase } from "../../code-explorer/components/FileTabsBarBase.js";
 import { useFileExplorer } from "../providers/FileExplorerProvider.js";
+import { FileTabsBarBase } from "../../code-explorer/components/FileTabsBarBase.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 function FileTabsBar() {

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

@@ -1,7 +1,7 @@
 import { Button } from "../../../components/ui/button.js";
 import { ScrollArea } from "../../../components/ui/scroll-area.js";
-import { CodeExplorerTreeNode } from "../../code-explorer/components/CodeExplorerTreeNode.js";
 import { useFileExplorer } from "../providers/FileExplorerProvider.js";
+import { CodeExplorerTreeNode } from "../../code-explorer/components/CodeExplorerTreeNode.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircle, Loader2, RefreshCw } from "lucide-react";

package/dist/features/file-explorer/file-explorer-feature.js

@@ -1,12 +1,20 @@
-import { FileExplorerPanel } from "./components/FileExplorerPanel.js";
-import { Files } from "lucide-react";
-const fileExplorerFeature = {
-	id: "file-explorer",
+import { LocalFileExplorerPanel, RemoteFileExplorerPanel } from "./components/FileExplorerPanel.js";
+import { Cloud, Files } from "lucide-react";
+const localFileExplorerFeature = {
+	id: "local-file-explorer",
 	sidebarPanel: {
-		id: "files",
+		id: "local-files",
 		label: "Files",
 		icon: Files,
-		component: FileExplorerPanel
+		component: LocalFileExplorerPanel
+	}
+}, remoteFileExplorerFeature = {
+	id: "remote-file-explorer",
+	sidebarPanel: {
+		id: "remote-files",
+		label: "Remote Files",
+		icon: Cloud,
+		component: RemoteFileExplorerPanel
 	}
 };
-export { fileExplorerFeature };
+export { localFileExplorerFeature, remoteFileExplorerFeature };

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

@@ -1,44 +1,51 @@
-import { useApiClient } from "../../../hooks/useApi.js";
+import { useLoopstackClient } from "../../../packages/react/dist/provider.js";
+import "../../../packages/react/dist/index.js";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
-function useFileTree(r, i) {
-	let a = c(10), o = i === void 0 ? !0 : i, { envKey: s, api: l } = useApiClient(), u;
-	a[0] !== s || a[1] !== r ? (u = [
+var VARIANT_BASE_PATH = {
+	local: "local-files",
+	remote: "remote-files"
+}, explorerPath = (e, n) => `/api/v1/workspaces/${n}/${VARIANT_BASE_PATH[e]}`;
+function fileTreeKey(e, n, r) {
+	return [
 		"file-explorer-tree",
-		s,
-		r
-	], a[0] = s, a[1] = r, a[2] = u) : u = a[2];
-	let d;
-	a[3] !== l || a[4] !== r ? (d = () => l.files.getTree({ workspaceId: r }), a[3] = l, a[4] = r, a[5] = d) : d = a[5];
-	let f = !!r && o, p;
-	return a[6] !== u || a[7] !== d || a[8] !== f ? (p = {
-		queryKey: u,
-		queryFn: d,
-		enabled: f,
+		e,
+		...n ? [n] : [],
+		...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,
 		staleTime: 3e4,
 		retry: !1
-	}, a[6] = u, a[7] = d, a[8] = f, a[9] = p) : p = a[9], useQuery(p);
+	}, l[8] = f, l[9] = p, l[10] = m, l[11] = h) : h = l[11], useQuery(h);
 }
-function useFileContent(r, i, a) {
-	let o = c(12), s = a === void 0 ? !0 : a, { envKey: l, api: u } = useApiClient(), d;
-	o[0] !== l || o[1] !== i || o[2] !== r ? (d = [
+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 = [
 		"file-explorer-content",
-		l,
-		r,
-		i
-	], o[0] = l, o[1] = i, o[2] = r, o[3] = d) : d = o[3];
-	let f;
-	o[4] !== u || o[5] !== i || o[6] !== r ? (f = () => u.files.readFile({
-		workspaceId: r,
-		path: i
-	}), o[4] = u, o[5] = i, o[6] = r, o[7] = f) : f = o[7];
-	let p = !!r && !!i && s, m;
-	return o[8] !== d || o[9] !== f || o[10] !== p ? (m = {
-		queryKey: d,
-		queryFn: f,
-		enabled: p,
+		d.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,
 		staleTime: 15e3,
 		retry: !1
-	}, o[8] = d, o[9] = f, o[10] = p, o[11] = m) : m = o[11], useQuery(m);
+	}, l[10] = f, l[11] = p, l[12] = m, l[13] = h) : h = l[13], useQuery(h);
 }
-export { useFileContent, useFileTree };
+export { fileTreeKey, useFileContent, useFileTree };

package/dist/features/file-explorer/index.js

@@ -1,2 +1,2 @@
 import { FileExplorerProvider, useFileExplorer, useOptionalFileExplorer } from "./providers/FileExplorerProvider.js";
-import { fileExplorerFeature } from "./file-explorer-feature.js";
+import { localFileExplorerFeature, remoteFileExplorerFeature } from "./file-explorer-feature.js";