Flowfile 0.5.3__py3-none-any.whl → 0.5.6__py3-none-any.whl

flowfile/web/static/assets/{index-fb6493ae.js → index-ca6799de.js}

@@ -10552,12 +10552,12 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _sfc_main$7 = {};
-const _hoisted_1$X = { class: "logo" };
+const _sfc_main$a = {};
+const _hoisted_1$_ = { class: "logo" };
 function _sfc_render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", _hoisted_1$X);
+  return openBlock(), createElementBlock("div", _hoisted_1$_);
 }
-const Header = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$1]]);
+const Header = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$1]]);
 const NavigationRoutes = {
   root: {
     name: "/",
@@ -15633,7 +15633,7 @@ if (__INTLIFY_PROD_DEVTOOLS__) {
   target.__INTLIFY__ = true;
   setDevToolsHook(target.__INTLIFY_DEVTOOLS_GLOBAL_HOOK__);
 }
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "MenuAccordion",
   props: {
     items: { default: () => [] },
@@ -15742,14 +15742,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 const MenuAccordion_vue_vue_type_style_index_0_scoped_04b48d7c_lang = "";
-const MenuAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-04b48d7c"]]);
+const MenuAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-04b48d7c"]]);
 const _imports_1 = "/images/flowfile.svg";
-const _hoisted_1$W = ["alt"];
-const _hoisted_2$N = {
+const _hoisted_1$Z = ["alt"];
+const _hoisted_2$P = {
   key: 0,
   class: "app-name"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "Logo",
   props: {
     width: {
@@ -15793,14 +15793,14 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           src: _imports_1,
           alt: __props.altText,
           style: normalizeStyle({ width: __props.width, height: __props.height })
-        }, null, 12, _hoisted_1$W),
-        __props.appName ? (openBlock(), createElementBlock("span", _hoisted_2$N, toDisplayString$1(__props.appName), 1)) : createCommentVNode("", true)
+        }, null, 12, _hoisted_1$Z),
+        __props.appName ? (openBlock(), createElementBlock("span", _hoisted_2$P, toDisplayString$1(__props.appName), 1)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
 const Logo_vue_vue_type_style_index_0_scoped_a736f53d_lang = "";
-const Logo = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-a736f53d"]]);
+const Logo = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-a736f53d"]]);
 const THEME_STORAGE_KEY = "flowfile-theme-preference";
 function getSystemPreference() {
   if (typeof window !== "undefined" && window.matchMedia) {
@@ -15908,16 +15908,16 @@ function useTheme() {
     toggleTheme
   };
 }
-const _hoisted_1$V = ["title"];
-const _hoisted_2$M = {
+const _hoisted_1$Y = ["title"];
+const _hoisted_2$O = {
   key: 0,
   class: "fas fa-sun"
 };
-const _hoisted_3$F = {
+const _hoisted_3$H = {
   key: 1,
   class: "fas fa-moon"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "ThemeToggle",
   setup(__props) {
     const { isDark, toggleTheme } = useTheme();
@@ -15928,13 +15928,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = //@ts-ignore
         (...args) => unref(toggleTheme) && unref(toggleTheme)(...args))
       }, [
-        unref(isDark) ? (openBlock(), createElementBlock("i", _hoisted_2$M)) : (openBlock(), createElementBlock("i", _hoisted_3$F))
-      ], 8, _hoisted_1$V);
+        unref(isDark) ? (openBlock(), createElementBlock("i", _hoisted_2$O)) : (openBlock(), createElementBlock("i", _hoisted_3$H))
+      ], 8, _hoisted_1$Y);
     };
   }
 });
 const ThemeToggle_vue_vue_type_style_index_0_scoped_c436efe9_lang = "";
-const ThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-c436efe9"]]);
+const ThemeToggle = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-c436efe9"]]);
 function bind(fn2, thisArg) {
   return function wrap() {
     return fn2.apply(thisArg, arguments);
@@ -18325,12 +18325,26 @@ class AuthService {
     __publicField(this, "token", ref(null));
     __publicField(this, "tokenExpiration", ref(null));
     __publicField(this, "isElectronMode", ref(false));
+    __publicField(this, "modeInitialized", false);
     __publicField(this, "refreshPromise", null);
     __publicField(this, "currentUsername", ref(null));
     this.isElectronMode.value = this.detectElectronMode();
     this.clearStoredTokens();
     this.loadStoredToken();
   }
+  /**
+   * Update electron mode based on backend status.
+   * This is called when we get the mode from /health/status endpoint.
+   * In "flowfile run ui" mode, electronAPI won't exist but backend mode is "electron".
+   */
+  setModeFromBackend(mode) {
+    if (!this.modeInitialized) {
+      if (!this.detectElectronMode()) {
+        this.isElectronMode.value = mode === "electron";
+      }
+      this.modeInitialized = true;
+    }
+  }
   loadStoredToken() {
     const savedToken = localStorage.getItem("auth_token");
     const savedExpiration = localStorage.getItem("auth_token_expiration");
@@ -18487,6 +18501,7 @@ class AuthService {
     localStorage.removeItem("auth_username");
   }
 }
+const authService = new AuthService();
 axios$1.interceptors.response.use(
   (response) => response,
   async (error) => {
@@ -18496,13 +18511,11 @@ axios$1.interceptors.response.use(
     const isAuthRequest = requestUrl.includes("/auth/token") || requestUrl.includes("/auth/");
     if (((_a = error.response) == null ? void 0 : _a.status) === 401 && !originalRequest._retry && !isAuthRequest) {
       originalRequest._retry = true;
-      const isElectron = !!window.electronAPI;
-      if (isElectron) {
+      if (authService.isInElectronMode()) {
         localStorage.removeItem("auth_token");
         localStorage.removeItem("auth_token_expiration");
-        const authInstance = new AuthService();
-        await authInstance.initialize();
-        const newToken = await authInstance.getToken();
+        await authService.initialize();
+        const newToken = await authService.getToken();
         if (newToken) {
           originalRequest.headers["Authorization"] = `Bearer ${newToken}`;
           return axios$1(originalRequest);
@@ -18519,7 +18532,6 @@ axios$1.interceptors.response.use(
     return Promise.reject(error);
   }
 );
-const authService = new AuthService();
 const useAuthStore = /* @__PURE__ */ defineStore("auth", {
   state: () => ({
     user: null,
@@ -18608,20 +18620,20 @@ const useAuthStore = /* @__PURE__ */ defineStore("auth", {
     }
   }
 });
-const _hoisted_1$U = { class: "sidebar" };
-const _hoisted_2$L = { class: "center-container" };
-const _hoisted_3$E = { class: "sidebar-container" };
-const _hoisted_4$v = { class: "sidebar-footer" };
-const _hoisted_5$q = {
+const _hoisted_1$X = { class: "sidebar" };
+const _hoisted_2$N = { class: "center-container" };
+const _hoisted_3$G = { class: "sidebar-container" };
+const _hoisted_4$x = { class: "sidebar-footer" };
+const _hoisted_5$s = {
   class: "footer-btn-wrapper",
   "data-tooltip": "Toggle theme"
 };
-const _hoisted_6$l = {
+const _hoisted_6$n = {
   key: 0,
   class: "footer-btn-wrapper",
   "data-tooltip": "Sign out"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "Sidebar",
   props: {
     isCollapse: {
@@ -18648,25 +18660,25 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       router2.push({ name: "login" });
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$U, [
-        createBaseVNode("div", _hoisted_2$L, [
+      return openBlock(), createElementBlock("div", _hoisted_1$X, [
+        createBaseVNode("div", _hoisted_2$N, [
           createVNode(Logo, {
             width: "50px",
             "app-name": "",
             "position-app-name": "left"
           })
         ]),
-        createBaseVNode("div", _hoisted_3$E, [
+        createBaseVNode("div", _hoisted_3$G, [
           createVNode(MenuAccordion, {
             items: items.value,
             "is-collapse": true
           }, null, 8, ["items"])
         ]),
-        createBaseVNode("div", _hoisted_4$v, [
-          createBaseVNode("div", _hoisted_5$q, [
+        createBaseVNode("div", _hoisted_4$x, [
+          createBaseVNode("div", _hoisted_5$s, [
             createVNode(ThemeToggle)
           ]),
-          showLogout.value ? (openBlock(), createElementBlock("div", _hoisted_6$l, [
+          showLogout.value ? (openBlock(), createElementBlock("div", _hoisted_6$n, [
             createBaseVNode("button", {
               class: "logout-button",
               onClick: handleLogout
@@ -18680,23 +18692,23 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 const Sidebar_vue_vue_type_style_index_0_lang = "";
-const _hoisted_1$T = { class: "modal-container" };
-const _hoisted_2$K = { class: "modal-header" };
-const _hoisted_3$D = { class: "modal-title" };
-const _hoisted_4$u = { class: "modal-content" };
-const _hoisted_5$p = {
+const _hoisted_1$W = { class: "modal-container" };
+const _hoisted_2$M = { class: "modal-header" };
+const _hoisted_3$F = { class: "modal-title" };
+const _hoisted_4$w = { class: "modal-content" };
+const _hoisted_5$r = {
   key: 0,
   class: "warning-text"
 };
-const _hoisted_6$k = { class: "form-field" };
-const _hoisted_7$d = { class: "password-field" };
-const _hoisted_8$9 = ["type"];
-const _hoisted_9$8 = {
+const _hoisted_6$m = { class: "form-field" };
+const _hoisted_7$e = { class: "password-field" };
+const _hoisted_8$a = ["type"];
+const _hoisted_9$9 = {
   key: 0,
   class: "form-error"
 };
-const _hoisted_10$8 = { class: "form-field" };
-const _hoisted_11$5 = { class: "password-field" };
+const _hoisted_10$9 = { class: "form-field" };
+const _hoisted_11$6 = { class: "password-field" };
 const _hoisted_12$5 = ["type"];
 const _hoisted_13$3 = {
   key: 0,
@@ -18721,7 +18733,7 @@ const _hoisted_23$1 = {
   key: 0,
   class: "fa-solid fa-spinner fa-spin"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "ChangePasswordModal",
   props: {
     show: { type: Boolean },
@@ -18833,9 +18845,9 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           class: "modal-overlay",
           onClick: withModifiers(handleBackdropClick, ["self"])
         }, [
-          createBaseVNode("div", _hoisted_1$T, [
-            createBaseVNode("div", _hoisted_2$K, [
-              createBaseVNode("h3", _hoisted_3$D, [
+          createBaseVNode("div", _hoisted_1$W, [
+            createBaseVNode("div", _hoisted_2$M, [
+              createBaseVNode("h3", _hoisted_3$F, [
                 _cache[6] || (_cache[6] = createBaseVNode("i", { class: "fa-solid fa-key" }, null, -1)),
                 createTextVNode(" " + toDisplayString$1(_ctx.isForced ? "Password Change Required" : "Change Password"), 1)
               ]),
@@ -18848,18 +18860,18 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 createBaseVNode("i", { class: "fa-solid fa-times" }, null, -1)
               ]))) : createCommentVNode("", true)
             ]),
-            createBaseVNode("div", _hoisted_4$u, [
-              _ctx.isForced ? (openBlock(), createElementBlock("p", _hoisted_5$p, " You must change your password before continuing. This is required for security purposes. ")) : createCommentVNode("", true),
+            createBaseVNode("div", _hoisted_4$w, [
+              _ctx.isForced ? (openBlock(), createElementBlock("p", _hoisted_5$r, " You must change your password before continuing. This is required for security purposes. ")) : createCommentVNode("", true),
               createBaseVNode("form", {
                 class: "form",
                 onSubmit: withModifiers(handleSubmit, ["prevent"])
               }, [
-                createBaseVNode("div", _hoisted_6$k, [
+                createBaseVNode("div", _hoisted_6$m, [
                   _cache[8] || (_cache[8] = createBaseVNode("label", {
                     for: "current-password",
                     class: "form-label"
                   }, "Current Password", -1)),
-                  createBaseVNode("div", _hoisted_7$d, [
+                  createBaseVNode("div", _hoisted_7$e, [
                     withDirectives(createBaseVNode("input", {
                       id: "current-password",
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => formData.value.currentPassword = $event),
@@ -18867,7 +18879,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       class: normalizeClass(["form-input", { "is-error": errors.value.currentPassword }]),
                       placeholder: "Enter current password",
                       required: ""
-                    }, null, 10, _hoisted_8$9), [
+                    }, null, 10, _hoisted_8$a), [
                       [vModelDynamic, formData.value.currentPassword]
                     ]),
                     createBaseVNode("button", {
@@ -18881,14 +18893,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                       }, null, 2)
                     ])
                   ]),
-                  errors.value.currentPassword ? (openBlock(), createElementBlock("span", _hoisted_9$8, toDisplayString$1(errors.value.currentPassword), 1)) : createCommentVNode("", true)
+                  errors.value.currentPassword ? (openBlock(), createElementBlock("span", _hoisted_9$9, toDisplayString$1(errors.value.currentPassword), 1)) : createCommentVNode("", true)
                 ]),
-                createBaseVNode("div", _hoisted_10$8, [
+                createBaseVNode("div", _hoisted_10$9, [
                   _cache[12] || (_cache[12] = createBaseVNode("label", {
                     for: "new-password",
                     class: "form-label"
                   }, "New Password", -1)),
-                  createBaseVNode("div", _hoisted_11$5, [
+                  createBaseVNode("div", _hoisted_11$6, [
                     withDirectives(createBaseVNode("input", {
                       id: "new-password",
                       "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => formData.value.newPassword = $event),
@@ -18994,7 +19006,2041 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 const ChangePasswordModal_vue_vue_type_style_index_0_scoped_79657dc0_lang = "";
-const ChangePasswordModal = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-79657dc0"]]);
+const ChangePasswordModal = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-79657dc0"]]);
+const useTutorialStore = /* @__PURE__ */ defineStore("tutorial", () => {
+  const isActive = ref(false);
+  const currentTutorial = ref(null);
+  const currentStepIndex = ref(0);
+  const isTransitioning = ref(false);
+  const completedTutorials = ref(/* @__PURE__ */ new Set());
+  const tutorialPaused = ref(false);
+  const currentStep = computed(() => {
+    if (!currentTutorial.value || currentStepIndex.value < 0)
+      return null;
+    return currentTutorial.value.steps[currentStepIndex.value] || null;
+  });
+  const totalSteps = computed(() => {
+    var _a;
+    return ((_a = currentTutorial.value) == null ? void 0 : _a.steps.length) ?? 0;
+  });
+  const progress = computed(() => {
+    if (totalSteps.value === 0)
+      return 0;
+    return (currentStepIndex.value + 1) / totalSteps.value * 100;
+  });
+  const isFirstStep = computed(() => currentStepIndex.value === 0);
+  const isLastStep = computed(() => currentStepIndex.value === totalSteps.value - 1);
+  const hasNextStep = computed(() => currentStepIndex.value < totalSteps.value - 1);
+  const hasPrevStep = computed(() => currentStepIndex.value > 0);
+  async function startTutorial(tutorial) {
+    currentTutorial.value = tutorial;
+    currentStepIndex.value = 0;
+    isActive.value = true;
+    tutorialPaused.value = false;
+    const step = currentTutorial.value.steps[0];
+    if (step == null ? void 0 : step.onEnter) {
+      await step.onEnter();
+    }
+  }
+  async function nextStep() {
+    if (!currentTutorial.value || isTransitioning.value)
+      return;
+    if (currentStepIndex.value >= totalSteps.value - 1) {
+      await completeTutorial();
+      return;
+    }
+    isTransitioning.value = true;
+    const currentStepObj = currentStep.value;
+    if (currentStepObj == null ? void 0 : currentStepObj.onExit) {
+      await currentStepObj.onExit();
+    }
+    currentStepIndex.value++;
+    const nextStepObj = currentStep.value;
+    if (nextStepObj == null ? void 0 : nextStepObj.onEnter) {
+      await nextStepObj.onEnter();
+    }
+    isTransitioning.value = false;
+  }
+  async function prevStep() {
+    if (!currentTutorial.value || isTransitioning.value || currentStepIndex.value <= 0)
+      return;
+    isTransitioning.value = true;
+    const currentStepObj = currentStep.value;
+    if (currentStepObj == null ? void 0 : currentStepObj.onExit) {
+      await currentStepObj.onExit();
+    }
+    currentStepIndex.value--;
+    const prevStepObj = currentStep.value;
+    if (prevStepObj == null ? void 0 : prevStepObj.onEnter) {
+      await prevStepObj.onEnter();
+    }
+    isTransitioning.value = false;
+  }
+  async function goToStep(index2) {
+    if (!currentTutorial.value || isTransitioning.value)
+      return;
+    if (index2 < 0 || index2 >= totalSteps.value)
+      return;
+    isTransitioning.value = true;
+    const currentStepObj = currentStep.value;
+    if (currentStepObj == null ? void 0 : currentStepObj.onExit) {
+      await currentStepObj.onExit();
+    }
+    currentStepIndex.value = index2;
+    const newStepObj = currentStep.value;
+    if (newStepObj == null ? void 0 : newStepObj.onEnter) {
+      await newStepObj.onEnter();
+    }
+    isTransitioning.value = false;
+  }
+  async function completeTutorial() {
+    if (currentTutorial.value) {
+      completedTutorials.value.add(currentTutorial.value.id);
+      const lastStep = currentStep.value;
+      if (lastStep == null ? void 0 : lastStep.onExit) {
+        await lastStep.onExit();
+      }
+    }
+    endTutorial();
+  }
+  function endTutorial() {
+    isActive.value = false;
+    currentTutorial.value = null;
+    currentStepIndex.value = 0;
+    isTransitioning.value = false;
+    tutorialPaused.value = false;
+  }
+  function pauseTutorial() {
+    tutorialPaused.value = true;
+  }
+  function resumeTutorial() {
+    tutorialPaused.value = false;
+  }
+  function isTutorialCompleted(tutorialId) {
+    return completedTutorials.value.has(tutorialId);
+  }
+  function resetCompletedTutorials() {
+    completedTutorials.value.clear();
+  }
+  async function onActionCompleted() {
+    if (!currentStep.value)
+      return;
+    if (currentStep.value.action && currentStep.value.action !== "observe") {
+      await nextStep();
+    }
+  }
+  return {
+    // State
+    isActive,
+    currentTutorial,
+    currentStepIndex,
+    isTransitioning,
+    completedTutorials,
+    tutorialPaused,
+    // Computed
+    currentStep,
+    totalSteps,
+    progress,
+    isFirstStep,
+    isLastStep,
+    hasNextStep,
+    hasPrevStep,
+    // Actions
+    startTutorial,
+    nextStep,
+    prevStep,
+    goToStep,
+    completeTutorial,
+    endTutorial,
+    pauseTutorial,
+    resumeTutorial,
+    isTutorialCompleted,
+    resetCompletedTutorials,
+    onActionCompleted
+  };
+});
+const FLOW_ID_STORAGE_KEY = "last_flow_id";
+const useFlowStore = /* @__PURE__ */ defineStore("flow", {
+  state: () => {
+    const savedFlowId = sessionStorage.getItem(FLOW_ID_STORAGE_KEY);
+    const initialFlowId = savedFlowId ? parseInt(savedFlowId) : -1;
+    return {
+      flowId: initialFlowId,
+      vueFlowInstance: null
+    };
+  },
+  getters: {
+    currentFlowId: (state) => state.flowId
+  },
+  actions: {
+    setFlowId(flowId) {
+      this.flowId = flowId;
+      try {
+        sessionStorage.setItem(FLOW_ID_STORAGE_KEY, flowId.toString());
+      } catch (error) {
+        console.warn("Failed to store flow ID in session storage:", error);
+      }
+    },
+    setVueFlowInstance(vueFlowInstance) {
+      this.vueFlowInstance = vueFlowInstance;
+    },
+    getVueFlowInstance() {
+      return this.vueFlowInstance;
+    }
+  }
+});
+const flowfileCorebaseURL = "http://localhost:63578/";
+axios$1.defaults.baseURL = flowfileCorebaseURL;
+axios$1.defaults.withCredentials = true;
+axios$1.interceptors.request.use(
+  async (config) => {
+    if (config.headers && config.headers["X-Skip-Auth-Header"]) {
+      delete config.headers["X-Skip-Auth-Header"];
+      return config;
+    }
+    try {
+      const token = await authService.getToken();
+      if (token) {
+        config.headers = config.headers || {};
+        config.headers.Authorization = `Bearer ${token}`;
+      }
+      return config;
+    } catch (error) {
+      console.error("Error in request interceptor:", error);
+      return config;
+    }
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+axios$1.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    var _a;
+    const originalRequest = error.config;
+    if (((_a = error.response) == null ? void 0 : _a.status) === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        await authService.getToken();
+        return axios$1(originalRequest);
+      } catch (refreshError) {
+        console.error("Token refresh failed:", refreshError);
+        authService.logout();
+        return Promise.reject(error);
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+class NodeApi {
+  /**
+   * Get node data for a specific node
+   */
+  static async getNodeData(flowId, nodeId) {
+    const response = await axios$1.get("/node", {
+      params: { flow_id: flowId, node_id: nodeId },
+      headers: { accept: "application/json" }
+    });
+    return response.data;
+  }
+  /**
+   * Get table example/preview data for a node
+   */
+  static async getTableExample(flowId, nodeId) {
+    const response = await axios$1.get("/node/data", {
+      params: { flow_id: flowId, node_id: nodeId },
+      headers: { accept: "application/json" }
+    });
+    return response.data;
+  }
+  /**
+   * Get downstream node IDs for a given node
+   */
+  static async getDownstreamNodeIds(flowId, nodeId) {
+    const response = await axios$1.get("/node/downstream_node_ids", {
+      params: { flow_id: flowId, node_id: nodeId },
+      headers: { accept: "application/json" }
+    });
+    return response.data;
+  }
+  /**
+   * Get node description
+   */
+  static async getNodeDescription(flowId, nodeId) {
+    const response = await axios$1.get("/node/description", {
+      params: { node_id: nodeId, flow_id: flowId }
+    });
+    return response.data;
+  }
+  /**
+   * Set/update node description
+   */
+  static async setNodeDescription(flowId, nodeId, description) {
+    const response = await axios$1.post("/node/description/", JSON.stringify(description), {
+      params: { flow_id: flowId, node_id: nodeId },
+      headers: { "Content-Type": "application/json" }
+    });
+    return response.data;
+  }
+  /**
+   * Update node settings directly
+   */
+  static async updateSettingsDirectly(nodeType, inputData) {
+    const response = await axios$1.post("/update_settings/", inputData, {
+      params: { node_type: nodeType }
+    });
+    return response.data;
+  }
+  /**
+   * Update user-defined node settings
+   */
+  static async updateUserDefinedSettings(nodeType, inputData) {
+    const response = await axios$1.post(
+      "/user_defined_components/update_user_defined_node/",
+      inputData,
+      {
+        params: { node_type: nodeType }
+      }
+    );
+    return response.data;
+  }
+}
+class ExpressionsApi {
+  /**
+   * Fetch all available expressions overview/documentation
+   */
+  static async getExpressionsOverview() {
+    const response = await axios$1.get("/editor/expression_doc");
+    return response.data;
+  }
+}
+const useResultsStore = /* @__PURE__ */ defineStore("results", {
+  state: () => ({
+    runResults: {},
+    runNodeResults: {},
+    runNodeValidations: {},
+    currentRunResult: null,
+    resultVersion: 0
+  }),
+  getters: {
+    getCurrentRunResult: (state) => state.currentRunResult
+  },
+  actions: {
+    // ========== Result Cache Management ==========
+    initializeResultCache(flowId) {
+      if (!this.runNodeResults[flowId]) {
+        this.runNodeResults[flowId] = {};
+      }
+    },
+    setNodeResult(flowId, nodeId, result) {
+      this.initializeResultCache(flowId);
+      this.runNodeResults[flowId][nodeId] = result;
+    },
+    getNodeResult(flowId, nodeId) {
+      var _a;
+      return (_a = this.runNodeResults[flowId]) == null ? void 0 : _a[nodeId];
+    },
+    resetNodeResult() {
+      console.log("Clearing node results");
+      this.runNodeResults = {};
+    },
+    clearFlowResults(flowId) {
+      if (this.runNodeResults[flowId]) {
+        delete this.runNodeResults[flowId];
+      }
+    },
+    // ========== Validation Cache Management ==========
+    initializeValidationCache(flowId) {
+      if (!this.runNodeValidations[flowId]) {
+        this.runNodeValidations[flowId] = {};
+      }
+    },
+    setNodeValidation(flowId, nodeId, nodeValidationInput) {
+      if (typeof nodeId === "string") {
+        nodeId = parseInt(nodeId);
+      }
+      this.initializeValidationCache(flowId);
+      const nodeValidation = {
+        ...nodeValidationInput,
+        validationTime: Date.now() / 1e3
+      };
+      this.runNodeValidations[flowId][nodeId] = nodeValidation;
+    },
+    resetNodeValidation() {
+      this.runNodeValidations = {};
+    },
+    getNodeValidation(flowId, nodeId) {
+      var _a;
+      return ((_a = this.runNodeValidations[flowId]) == null ? void 0 : _a[nodeId]) || {
+        isValid: true,
+        error: "",
+        validationTime: 0
+      };
+    },
+    // ========== Run Results Management ==========
+    insertRunResult(runResult) {
+      this.currentRunResult = runResult;
+      this.runResults[runResult.flow_id] = runResult;
+      this.initializeResultCache(runResult.flow_id);
+      runResult.node_step_result.forEach((nodeResult) => {
+        this.runNodeResults[runResult.flow_id][nodeResult.node_id] = nodeResult;
+      });
+      this.resultVersion++;
+    },
+    resetRunResults() {
+      this.runNodeResults = {};
+      this.runResults = {};
+      this.currentRunResult = null;
+    },
+    getRunResult(flowId) {
+      return this.runResults[flowId] || null;
+    }
+  }
+});
+const useEditorStore = /* @__PURE__ */ defineStore("editor", {
+  state: () => ({
+    // Drawer state
+    isDrawerOpen: false,
+    isAnalysisOpen: false,
+    activeDrawerComponent: shallowRef(null),
+    drawerProps: ref({}),
+    drawCloseFunction: null,
+    // Editor state
+    initialEditorData: "",
+    inputCode: "",
+    // Log viewer state
+    hideLogViewerForThisRun: false,
+    isShowingLogViewer: false,
+    isStreamingLogs: false,
+    displayLogViewer: true,
+    // Code generator state
+    showCodeGenerator: false,
+    // Run state
+    isRunning: false,
+    showFlowResult: false,
+    tableVisible: false
+  }),
+  getters: {
+    drawerOpen() {
+      return !!this.activeDrawerComponent;
+    }
+  },
+  actions: {
+    // ========== Drawer Management ==========
+    async executeDrawCloseFunction() {
+      console.log("Executing draw close function");
+      if (this.drawCloseFunction) {
+        this.drawCloseFunction();
+      }
+    },
+    setCloseFunction(f2) {
+      this.drawCloseFunction = f2;
+    },
+    openDrawer(component2, nodeTitleInfo, props = {}) {
+      this.activeDrawerComponent = component2;
+      this.drawerProps = { ...nodeTitleInfo, ...props };
+      this.isDrawerOpen = true;
+    },
+    closeDrawer() {
+      this.activeDrawerComponent = null;
+      if (this.drawCloseFunction)
+        ;
+    },
+    toggleDrawer() {
+      if (this.isDrawerOpen && this.drawCloseFunction) {
+        this.pushNodeData();
+      }
+      this.isDrawerOpen = !this.isDrawerOpen;
+    },
+    pushNodeData() {
+      if (this.drawCloseFunction && !this.isRunning) {
+        this.drawCloseFunction();
+        this.drawCloseFunction = null;
+      }
+    },
+    openAnalysisDrawer(closeFunction) {
+      console.log("openAnalysisDrawer in editor-store.ts");
+      if (this.isAnalysisOpen) {
+        this.pushNodeData();
+      }
+      if (closeFunction) {
+        this.drawCloseFunction = closeFunction;
+      }
+      this.isAnalysisOpen = true;
+    },
+    closeAnalysisDrawer() {
+      this.isAnalysisOpen = false;
+      if (this.drawCloseFunction) {
+        console.log("closeDrawer in editor-store.ts");
+        this.pushNodeData();
+      }
+    },
+    // ========== Code Generator ==========
+    toggleCodeGenerator() {
+      this.showCodeGenerator = !this.showCodeGenerator;
+    },
+    setCodeGeneratorVisibility(visible) {
+      this.showCodeGenerator = visible;
+    },
+    // ========== Log Viewer ==========
+    showLogViewer() {
+      console.log("triggered show log viewer");
+      this.isShowingLogViewer = this.displayLogViewer;
+    },
+    hideLogViewer() {
+      this.isShowingLogViewer = false;
+    },
+    toggleLogViewer() {
+      console.log("triggered toggle log viewer");
+      this.isShowingLogViewer = !this.isShowingLogViewer;
+    },
+    updateLogViewerVisibility(showResult) {
+      this.isShowingLogViewer = this.displayLogViewer && showResult && !this.hideLogViewerForThisRun;
+    },
+    // ========== Editor Data ==========
+    setInitialEditorData(editorDataString) {
+      this.initialEditorData = editorDataString;
+    },
+    getInitialEditorData() {
+      return this.initialEditorData;
+    },
+    setInputCode(newCode) {
+      this.inputCode = newCode;
+    },
+    // ========== Flow Result Display ==========
+    setShowFlowResult(show) {
+      this.showFlowResult = show;
+    },
+    setTableVisible(visible) {
+      this.tableVisible = visible;
+    },
+    setIsRunning(running) {
+      this.isRunning = running;
+    }
+  }
+});
+const useNodeStore = /* @__PURE__ */ defineStore("node", {
+  state: () => ({
+    nodeId: -1,
+    previousNodeId: -1,
+    nodeValidateFuncs: /* @__PURE__ */ new Map(),
+    nodeData: null,
+    nodeExists: false,
+    isLoaded: false,
+    sizeDataPreview: 300,
+    dataTypes: ["String", "Datetime", "Int64", "Int32", "Int16", "Float64", "Float32", "Boolean"],
+    nodeDescriptions: {},
+    allExpressions: null
+  }),
+  getters: {
+    currentNodeId: (state) => state.nodeId,
+    currentNodeData: (state) => state.nodeData,
+    // Backward compatibility: read-only getters (use snake_case for legacy)
+    /** @deprecated Use `nodeId` (camelCase) instead. This getter is read-only. */
+    node_id: (state) => state.nodeId,
+    /** @deprecated Use `isLoaded` (camelCase) instead. This getter is read-only. */
+    is_loaded: (state) => state.isLoaded,
+    // Proxy getters to other stores
+    /** @deprecated Use `useFlowStore().flowId` directly. This getter is read-only. */
+    flow_id() {
+      return useFlowStore().flowId;
+    },
+    /** @deprecated Use `useFlowStore().vueFlowInstance` directly. This getter is read-only. */
+    vueFlowInstance() {
+      return useFlowStore().vueFlowInstance;
+    },
+    /** @deprecated Use `useEditorStore().isRunning` directly. This getter is read-only. */
+    isRunning() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.isRunning) || false;
+    },
+    /** @deprecated Use `useEditorStore().isDrawerOpen` directly. This getter is read-only. */
+    isDrawerOpen() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.isDrawerOpen) || false;
+    },
+    /** @deprecated Use `useEditorStore().activeDrawerComponent` directly. This getter is read-only. */
+    activeDrawerComponent() {
+      var _a;
+      return (_a = useEditorStore()) == null ? void 0 : _a.activeDrawerComponent;
+    },
+    /** @deprecated Use `useEditorStore().drawerProps` directly. This getter is read-only. */
+    drawerProps() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.drawerProps) || {};
+    },
+    /** @deprecated Use `useEditorStore().showCodeGenerator` directly. This getter is read-only. */
+    showCodeGenerator() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.showCodeGenerator) || false;
+    },
+    /** @deprecated Use `useEditorStore().showFlowResult` directly. This getter is read-only. */
+    showFlowResult() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.showFlowResult) || false;
+    },
+    /** @deprecated Use `useEditorStore().isShowingLogViewer` directly. This getter is read-only. */
+    isShowingLogViewer() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.isShowingLogViewer) || false;
+    },
+    /** @deprecated Use `useEditorStore().hideLogViewerForThisRun` directly. This getter is read-only. */
+    hideLogViewerForThisRun() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.hideLogViewerForThisRun) || false;
+    },
+    /** @deprecated Use `useEditorStore().displayLogViewer` directly. This getter is read-only. */
+    displayLogViewer() {
+      const editorStore = useEditorStore();
+      return (editorStore == null ? void 0 : editorStore.displayLogViewer) !== void 0 ? editorStore.displayLogViewer : true;
+    },
+    /** @deprecated Use `useEditorStore().inputCode` directly. This getter is read-only. */
+    inputCode() {
+      var _a;
+      return ((_a = useEditorStore()) == null ? void 0 : _a.inputCode) || "";
+    },
+    /** @deprecated Use `useResultsStore().currentRunResult` directly. This getter is read-only. */
+    currentRunResult() {
+      var _a;
+      return (_a = useResultsStore()) == null ? void 0 : _a.currentRunResult;
+    },
+    /** @deprecated Use `useResultsStore().runResults` directly. This getter is read-only. */
+    runResults() {
+      var _a;
+      return ((_a = useResultsStore()) == null ? void 0 : _a.runResults) || {};
+    }
+  },
+  actions: {
+    // ========== Node Data Management ==========
+    async getNodeData(nodeId, useCache2 = true) {
+      const flowStore = useFlowStore();
+      if (this.nodeId === nodeId && useCache2) {
+        if (this.nodeData) {
+          this.isLoaded = true;
+          return this.nodeData;
+        }
+      }
+      try {
+        console.log("Getting node data");
+        const data = await NodeApi.getNodeData(flowStore.flowId, nodeId);
+        this.nodeData = data;
+        this.isLoaded = true;
+        this.nodeExists = true;
+        return this.nodeData;
+      } catch (error) {
+        console.error("Error fetching node data:", error);
+        this.nodeData = null;
+        this.isLoaded = false;
+        this.nodeExists = false;
+        return null;
+      }
+    },
+    async reloadCurrentNodeData() {
+      return this.getNodeData(this.nodeId, false);
+    },
+    getCurrentNodeData() {
+      return this.nodeData;
+    },
+    async getTableExample(flowId, nodeId) {
+      try {
+        return await NodeApi.getTableExample(flowId, nodeId);
+      } catch (error) {
+        console.error("Error fetching table example:", error);
+        return null;
+      }
+    },
+    // ========== Node ID Management ==========
+    setFlowIdAndNodeId(flowId, nodeId) {
+      const flowStore = useFlowStore();
+      if (this.nodeId === nodeId && flowStore.flowId === flowId) {
+        return;
+      }
+      console.log("Automatically pushing the node data");
+      if (flowStore.flowId !== flowId) {
+        flowStore.setFlowId(flowId);
+      }
+      this.nodeId = nodeId;
+    },
+    doReset() {
+      this.isLoaded = false;
+    },
+    // ========== Node Validation ==========
+    setNodeValidateFunc(nodeId, func) {
+      if (typeof nodeId === "string") {
+        nodeId = parseInt(nodeId);
+      }
+      this.nodeValidateFuncs.set(nodeId, func);
+    },
+    async validateNode(nodeId) {
+      if (typeof nodeId === "string") {
+        nodeId = parseInt(nodeId);
+      }
+      const func = this.nodeValidateFuncs.get(nodeId);
+      if (func) {
+        func();
+      }
+    },
+    // ========== Node Descriptions ==========
+    initializeDescriptionCache(flowId) {
+      if (!this.nodeDescriptions[flowId]) {
+        this.nodeDescriptions[flowId] = {};
+      }
+    },
+    cacheNodeDescriptionDict(flowId, nodeId, description) {
+      this.initializeDescriptionCache(flowId);
+      this.nodeDescriptions[flowId][nodeId] = description;
+      if (this.nodeData && this.nodeData.node_id === nodeId && this.nodeData.setting_input) {
+        this.nodeData.setting_input.description = description;
+      }
+    },
+    clearNodeDescriptionCache(flowId, nodeId) {
+      if (this.nodeDescriptions[flowId] && this.nodeDescriptions[flowId][nodeId]) {
+        delete this.nodeDescriptions[flowId][nodeId];
+      }
+    },
+    clearFlowDescriptionCache(flowId) {
+      if (this.nodeDescriptions[flowId]) {
+        delete this.nodeDescriptions[flowId];
+      }
+    },
+    clearAllDescriptionCaches() {
+      this.nodeDescriptions = {};
+    },
+    async getNodeDescription(nodeId, forceRefresh = false) {
+      var _a, _b;
+      const flowStore = useFlowStore();
+      this.initializeDescriptionCache(flowStore.flowId);
+      if (!forceRefresh && ((_a = this.nodeDescriptions[flowStore.flowId]) == null ? void 0 : _a[nodeId])) {
+        return this.nodeDescriptions[flowStore.flowId][nodeId];
+      }
+      try {
+        const description = await NodeApi.getNodeDescription(flowStore.flowId, nodeId);
+        this.cacheNodeDescriptionDict(flowStore.flowId, nodeId, description);
+        return description;
+      } catch (error) {
+        console.info("Error fetching node description:", error);
+        if ((_b = this.nodeDescriptions[flowStore.flowId]) == null ? void 0 : _b[nodeId]) {
+          console.warn("Using cached description due to API error");
+          return this.nodeDescriptions[flowStore.flowId][nodeId];
+        }
+        return "";
+      }
+    },
+    async setNodeDescription(nodeId, description) {
+      const flowStore = useFlowStore();
+      try {
+        this.cacheNodeDescriptionDict(flowStore.flowId, nodeId, description);
+        const result = await NodeApi.setNodeDescription(flowStore.flowId, nodeId, description);
+        if (result === true) {
+          console.log("Description updated successfully");
+        } else {
+          console.warn("Unexpected response:", result);
+        }
+      } catch (error) {
+        if (error.response) {
+          console.error("API error:", error.response.data.message);
+        } else if (error.request) {
+          console.error("The request was made but no response was received");
+        } else {
+          console.error("Error", error.message);
+        }
+        throw error;
+      }
+    },
+    updateNodeDescription(nodeId, description) {
+      const flowStore = useFlowStore();
+      this.cacheNodeDescriptionDict(flowStore.flowId, nodeId, description);
+    },
+    // ========== Node Settings Updates ==========
+    async updateSettingsDirectly(inputData) {
+      var _a, _b;
+      const flowStore = useFlowStore();
+      try {
+        const node = (_a = flowStore.vueFlowInstance) == null ? void 0 : _a.findNode(String(inputData.node_id));
+        inputData.pos_x = node.position.x;
+        inputData.pos_y = node.position.y;
+        const response = await NodeApi.updateSettingsDirectly(
+          node.data.nodeTemplate.item,
+          inputData
+        );
+        const downstreamNodeIds = await NodeApi.getDownstreamNodeIds(
+          flowStore.flowId,
+          inputData.node_id
+        );
+        downstreamNodeIds.map((nodeId) => {
+          this.validateNode(nodeId);
+        });
+        return response;
+      } catch (error) {
+        console.error("Error updating settings directly:", (_b = error.response) == null ? void 0 : _b.data);
+        throw error;
+      }
+    },
+    async updateUserDefinedSettings(inputData) {
+      var _a, _b;
+      const flowStore = useFlowStore();
+      try {
+        const node = (_a = flowStore.vueFlowInstance) == null ? void 0 : _a.findNode(String(inputData.value.node_id));
+        const nodeType = node.data.nodeTemplate.item;
+        inputData.value.pos_x = node.position.x;
+        inputData.value.pos_y = node.position.y;
+        const response = await NodeApi.updateUserDefinedSettings(nodeType, inputData.value);
+        const downstreamNodeIds = await NodeApi.getDownstreamNodeIds(
+          flowStore.flowId,
+          inputData.value.node_id
+        );
+        downstreamNodeIds.map((nodeId) => {
+          this.validateNode(nodeId);
+        });
+        return response;
+      } catch (error) {
+        console.error("Error updating settings:", (_b = error.response) == null ? void 0 : _b.data);
+        throw error;
+      }
+    },
+    async updateSettings(inputData, inputNodeType) {
+      var _a, _b;
+      const flowStore = useFlowStore();
+      try {
+        const node = (_a = flowStore.vueFlowInstance) == null ? void 0 : _a.findNode(String(inputData.value.node_id));
+        const nodeType = inputNodeType ?? node.data.nodeTemplate.item;
+        inputData.value.pos_x = node.position.x;
+        inputData.value.pos_y = node.position.y;
+        const response = await NodeApi.updateSettingsDirectly(nodeType, inputData.value);
+        const downstreamNodeIds = await NodeApi.getDownstreamNodeIds(
+          flowStore.flowId,
+          inputData.value.node_id
+        );
+        downstreamNodeIds.map((nodeId) => {
+          this.validateNode(nodeId);
+        });
+        return response;
+      } catch (error) {
+        console.error("Error updating settings:", (_b = error.response) == null ? void 0 : _b.data);
+        throw error;
+      }
+    },
+    // ========== Expressions ==========
+    async fetchExpressionsOverview() {
+      try {
+        const expressions = await ExpressionsApi.getExpressionsOverview();
+        this.allExpressions = expressions;
+        return this.allExpressions;
+      } catch (error) {
+        console.error("Error fetching expressions overview:", error);
+        return [];
+      }
+    },
+    async getExpressionsOverview() {
+      if (this.allExpressions) {
+        return this.allExpressions;
+      } else {
+        return await this.fetchExpressionsOverview();
+      }
+    },
+    // ========== Utilities ==========
+    getDataTypes() {
+      return this.dataTypes;
+    },
+    getSizeDataPreview() {
+      return this.sizeDataPreview;
+    },
+    setSizeDataPreview(newHeight) {
+      this.sizeDataPreview = newHeight;
+    },
+    getEditorNodeData() {
+      var _a;
+      const flowStore = useFlowStore();
+      if (this.nodeId) {
+        return (_a = flowStore.vueFlowInstance) == null ? void 0 : _a.findNode(String(this.nodeId));
+      }
+      return null;
+    },
+    // ========== Backward Compatibility Actions (Proxy to other stores) ==========
+    /** @deprecated Use `useFlowStore().setFlowId()` directly instead. */
+    setFlowId(flowId) {
+      const flowStore = useFlowStore();
+      flowStore.setFlowId(flowId);
+    },
+    /** @deprecated Use `useFlowStore().setVueFlowInstance()` directly instead. */
+    setVueFlowInstance(vueFlowInstance) {
+      const flowStore = useFlowStore();
+      flowStore.setVueFlowInstance(vueFlowInstance);
+    },
+    /** @deprecated Use `useFlowStore().getVueFlowInstance()` directly instead. */
+    getVueFlowInstance() {
+      const flowStore = useFlowStore();
+      return flowStore.getVueFlowInstance();
+    },
+    /** @deprecated Use `useResultsStore().setNodeResult()` directly instead. */
+    setNodeResult(nodeId, result) {
+      const flowStore = useFlowStore();
+      const resultsStore = useResultsStore();
+      resultsStore.setNodeResult(flowStore.flowId, nodeId, result);
+    },
+    /** @deprecated Use `useResultsStore().getNodeResult()` directly instead. */
+    getNodeResult(nodeId) {
+      const flowStore = useFlowStore();
+      const resultsStore = useResultsStore();
+      return resultsStore.getNodeResult(flowStore.flowId, nodeId);
+    },
+    /** @deprecated Use `useResultsStore().resetNodeResult()` directly instead. */
+    resetNodeResult() {
+      const resultsStore = useResultsStore();
+      resultsStore.resetNodeResult();
+    },
+    /** @deprecated Use `useResultsStore().clearFlowResults()` directly instead. */
+    clearFlowResults(flowId) {
+      const resultsStore = useResultsStore();
+      resultsStore.clearFlowResults(flowId);
+    },
+    /** @deprecated Use `useResultsStore().setNodeValidation()` directly instead. */
+    setNodeValidation(nodeId, nodeValidationInput) {
+      const flowStore = useFlowStore();
+      const resultsStore = useResultsStore();
+      resultsStore.setNodeValidation(flowStore.flowId, nodeId, nodeValidationInput);
+    },
+    /** @deprecated Use `useResultsStore().resetNodeValidation()` directly instead. */
+    resetNodeValidation() {
+      const resultsStore = useResultsStore();
+      resultsStore.resetNodeValidation();
+    },
+    /** @deprecated Use `useResultsStore().getNodeValidation()` directly instead. */
+    getNodeValidation(nodeId) {
+      const flowStore = useFlowStore();
+      const resultsStore = useResultsStore();
+      return resultsStore.getNodeValidation(flowStore.flowId, nodeId);
+    },
+    /** @deprecated Use `useResultsStore().insertRunResult()` directly instead. */
+    insertRunResult(runResult) {
+      const resultsStore = useResultsStore();
+      resultsStore.insertRunResult(runResult);
+    },
+    /** @deprecated Use `useResultsStore().resetRunResults()` directly instead. */
+    resetRunResults() {
+      const resultsStore = useResultsStore();
+      resultsStore.resetRunResults();
+    },
+    /** @deprecated Use `useResultsStore().getRunResult()` directly instead. */
+    getRunResult(flowId) {
+      const resultsStore = useResultsStore();
+      return resultsStore.getRunResult(flowId);
+    },
+    /** @deprecated Use `useEditorStore().openDrawer()` directly instead. */
+    openDrawer(component2, nodeTitleInfo, props = {}) {
+      const editorStore = useEditorStore();
+      editorStore.openDrawer(component2, nodeTitleInfo, props);
+    },
+    /** @deprecated Use `useEditorStore().closeDrawer()` directly instead. */
+    closeDrawer() {
+      const editorStore = useEditorStore();
+      editorStore.closeDrawer();
+      this.nodeId = -1;
+    },
+    /** @deprecated Use `useEditorStore().toggleDrawer()` directly instead. */
+    toggleDrawer() {
+      const editorStore = useEditorStore();
+      editorStore.toggleDrawer();
+    },
+    /** @deprecated Use `useEditorStore().pushNodeData()` directly instead. */
+    pushNodeData() {
+      const editorStore = useEditorStore();
+      editorStore.pushNodeData();
+    },
+    /** @deprecated Use `useEditorStore().setCloseFunction()` directly instead. */
+    setCloseFunction(f2) {
+      const editorStore = useEditorStore();
+      editorStore.setCloseFunction(f2);
+    },
+    /** @deprecated Use `useEditorStore().executeDrawCloseFunction()` directly instead. */
+    executeDrawCloseFunction() {
+      const editorStore = useEditorStore();
+      return editorStore.executeDrawCloseFunction();
+    },
+    /** @deprecated Use `useEditorStore().toggleCodeGenerator()` directly instead. */
+    toggleCodeGenerator() {
+      const editorStore = useEditorStore();
+      editorStore.toggleCodeGenerator();
+    },
+    /** @deprecated Use `useEditorStore().setCodeGeneratorVisibility()` directly instead. */
+    setCodeGeneratorVisibility(visible) {
+      const editorStore = useEditorStore();
+      editorStore.setCodeGeneratorVisibility(visible);
+    },
+    /** @deprecated Use `useEditorStore().showLogViewer()` directly instead. */
+    showLogViewer() {
+      const editorStore = useEditorStore();
+      editorStore.showLogViewer();
+    },
+    /** @deprecated Use `useEditorStore().hideLogViewer()` directly instead. */
+    hideLogViewer() {
+      const editorStore = useEditorStore();
+      editorStore.hideLogViewer();
+    },
+    /** @deprecated Use `useEditorStore().toggleLogViewer()` directly instead. */
+    toggleLogViewer() {
+      const editorStore = useEditorStore();
+      editorStore.toggleLogViewer();
+    },
+    /** @deprecated Use `useEditorStore().setInputCode()` directly instead. */
+    setInputCode(newCode) {
+      const editorStore = useEditorStore();
+      editorStore.setInputCode(newCode);
+    },
+    /** @deprecated Use `useEditorStore().setInitialEditorData()` directly instead. */
+    setInitialEditorData(editorDataString) {
+      const editorStore = useEditorStore();
+      editorStore.setInitialEditorData(editorDataString);
+    },
+    /** @deprecated Use `useEditorStore().getInitialEditorData()` directly instead. */
+    getInitialEditorData() {
+      const editorStore = useEditorStore();
+      return editorStore.getInitialEditorData();
+    }
+  }
+});
+const _hoisted_1$V = { class: "tooltip-progress" };
+const _hoisted_2$L = { class: "progress-bar" };
+const _hoisted_3$E = { class: "progress-text" };
+const _hoisted_4$v = { class: "tooltip-content" };
+const _hoisted_5$q = { class: "tooltip-title" };
+const _hoisted_6$l = ["innerHTML"];
+const _hoisted_7$d = {
+  key: 0,
+  class: "tooltip-action-hint"
+};
+const _hoisted_8$9 = { class: "tooltip-navigation" };
+const _hoisted_9$8 = { class: "nav-main" };
+const _hoisted_10$8 = {
+  key: 0,
+  class: "material-icons"
+};
+const _hoisted_11$5 = {
+  key: 1,
+  class: "material-icons"
+};
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "TutorialTooltip",
+  props: {
+    step: {},
+    position: {},
+    isCenterMode: { type: Boolean },
+    currentStepIndex: {},
+    totalSteps: {},
+    progress: {}
+  },
+  emits: ["next", "prev", "skip", "complete"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit2 = __emit;
+    const tooltipRef = ref(null);
+    const tooltipRect = ref(null);
+    function updateTooltipRect() {
+      if (tooltipRef.value) {
+        tooltipRect.value = tooltipRef.value.getBoundingClientRect();
+      }
+    }
+    watch(
+      () => props.step,
+      () => {
+        setTimeout(updateTooltipRect, 50);
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      setTimeout(updateTooltipRect, 50);
+      window.addEventListener("resize", updateTooltipRect);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", updateTooltipRect);
+    });
+    const tooltipStyle = computed(() => {
+      var _a, _b;
+      if (props.isCenterMode) {
+        if (props.step.centerInScreen) {
+          return {
+            position: "fixed",
+            left: "50%",
+            top: "50%",
+            right: "auto",
+            bottom: "auto",
+            transform: "translate(-50%, -50%)"
+          };
+        }
+        return {
+          position: "fixed",
+          right: "24px",
+          bottom: "24px",
+          left: "auto",
+          top: "auto",
+          transform: "none"
+        };
+      }
+      const tooltipWidth = ((_a = tooltipRect.value) == null ? void 0 : _a.width) || 350;
+      const tooltipHeight = ((_b = tooltipRect.value) == null ? void 0 : _b.height) || 200;
+      const padding = 20;
+      const position = props.step.position || "bottom";
+      let x2 = props.position.x;
+      let y = props.position.y;
+      let transform2 = "";
+      switch (position) {
+        case "top":
+          x2 = props.position.x;
+          y = props.position.y;
+          transform2 = "translate(-50%, -100%)";
+          break;
+        case "bottom":
+          x2 = props.position.x;
+          y = props.position.y;
+          transform2 = "translate(-50%, 0)";
+          break;
+        case "left":
+          x2 = props.position.x;
+          y = props.position.y;
+          transform2 = "translate(-100%, -50%)";
+          break;
+        case "right":
+          x2 = props.position.x;
+          y = props.position.y;
+          transform2 = "translate(0, -50%)";
+          break;
+      }
+      let finalX = x2;
+      let finalY = y;
+      let effectiveX = x2;
+      let effectiveY = y;
+      if (transform2.includes("-50%, 0")) {
+        effectiveX = x2 - tooltipWidth / 2;
+      } else if (transform2.includes("-50%, -100%)")) {
+        effectiveX = x2 - tooltipWidth / 2;
+        effectiveY = y - tooltipHeight;
+      } else if (transform2.includes("-100%, -50%")) {
+        effectiveX = x2 - tooltipWidth;
+        effectiveY = y - tooltipHeight / 2;
+      } else if (transform2.includes("0, -50%")) {
+        effectiveY = y - tooltipHeight / 2;
+      }
+      if (effectiveX < padding) {
+        finalX = x2 + (padding - effectiveX);
+      }
+      if (effectiveX + tooltipWidth > window.innerWidth - padding) {
+        finalX = x2 - (effectiveX + tooltipWidth - window.innerWidth + padding);
+      }
+      if (effectiveY < padding) {
+        finalY = y + (padding - effectiveY);
+      }
+      if (effectiveY + tooltipHeight > window.innerHeight - padding) {
+        finalY = y - (effectiveY + tooltipHeight - window.innerHeight + padding);
+      }
+      return {
+        position: "fixed",
+        left: `${finalX}px`,
+        top: `${finalY}px`,
+        transform: transform2
+      };
+    });
+    const isLastStep = computed(() => props.currentStepIndex === props.totalSteps - 1);
+    const showNextButton = computed(() => props.step.showNextButton !== false);
+    const showPrevButton = computed(
+      () => props.step.showPrevButton !== false && props.currentStepIndex > 0
+    );
+    const canSkip = computed(() => props.step.canSkip !== false);
+    const actionHint = computed(() => {
+      switch (props.step.action) {
+        case "click":
+          return "Click the highlighted element to continue";
+        case "drag":
+          return "Drag the highlighted element to the target area";
+        case "input":
+          return "Enter the required information";
+        case "wait":
+          return "Please wait...";
+        default:
+          return null;
+      }
+    });
+    function handleNext() {
+      if (isLastStep.value) {
+        emit2("complete");
+      } else {
+        emit2("next");
+      }
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "tooltipRef",
+        ref: tooltipRef,
+        class: "tutorial-tooltip",
+        style: normalizeStyle(tooltipStyle.value)
+      }, [
+        createBaseVNode("div", _hoisted_1$V, [
+          createBaseVNode("div", _hoisted_2$L, [
+            createBaseVNode("div", {
+              class: "progress-fill",
+              style: normalizeStyle({ width: `${_ctx.progress}%` })
+            }, null, 4)
+          ]),
+          createBaseVNode("span", _hoisted_3$E, toDisplayString$1(_ctx.currentStepIndex + 1) + " / " + toDisplayString$1(_ctx.totalSteps), 1)
+        ]),
+        createBaseVNode("div", _hoisted_4$v, [
+          createBaseVNode("h3", _hoisted_5$q, toDisplayString$1(_ctx.step.title), 1),
+          createBaseVNode("p", {
+            class: "tooltip-description",
+            innerHTML: _ctx.step.content
+          }, null, 8, _hoisted_6$l),
+          actionHint.value && _ctx.step.action !== "observe" ? (openBlock(), createElementBlock("p", _hoisted_7$d, [
+            _cache[2] || (_cache[2] = createBaseVNode("span", { class: "action-icon material-icons" }, "touch_app", -1)),
+            createTextVNode(" " + toDisplayString$1(actionHint.value), 1)
+          ])) : createCommentVNode("", true)
+        ]),
+        createBaseVNode("div", _hoisted_8$9, [
+          canSkip.value ? (openBlock(), createElementBlock("button", {
+            key: 0,
+            class: "nav-btn skip-btn",
+            onClick: _cache[0] || (_cache[0] = ($event) => emit2("skip"))
+          }, "Skip Tutorial")) : createCommentVNode("", true),
+          createBaseVNode("div", _hoisted_9$8, [
+            showPrevButton.value ? (openBlock(), createElementBlock("button", {
+              key: 0,
+              class: "nav-btn prev-btn",
+              onClick: _cache[1] || (_cache[1] = ($event) => emit2("prev"))
+            }, _cache[3] || (_cache[3] = [
+              createBaseVNode("span", { class: "material-icons" }, "arrow_back", -1),
+              createTextVNode(" Back ")
+            ]))) : createCommentVNode("", true),
+            showNextButton.value ? (openBlock(), createElementBlock("button", {
+              key: 1,
+              class: "nav-btn next-btn",
+              onClick: handleNext
+            }, [
+              createTextVNode(toDisplayString$1(isLastStep.value ? "Finish" : "Next") + " ", 1),
+              !isLastStep.value ? (openBlock(), createElementBlock("span", _hoisted_10$8, "arrow_forward")) : (openBlock(), createElementBlock("span", _hoisted_11$5, "check"))
+            ])) : createCommentVNode("", true)
+          ])
+        ])
+      ], 4);
+    };
+  }
+});
+const TutorialTooltip_vue_vue_type_style_index_0_scoped_4c5588cd_lang = "";
+const TutorialTooltip = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-4c5588cd"]]);
+const _hoisted_1$U = {
+  key: 0,
+  class: "tutorial-overlay"
+};
+const _hoisted_2$K = {
+  key: 0,
+  class: "tutorial-backdrop"
+};
+const _hoisted_3$D = {
+  class: "tutorial-mask",
+  width: "100%",
+  height: "100%"
+};
+const _hoisted_4$u = { id: "spotlight-mask" };
+const _hoisted_5$p = ["x", "y", "width", "height", "rx"];
+const _hoisted_6$k = {
+  key: 1,
+  class: "tutorial-backdrop tutorial-backdrop-full"
+};
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "TutorialOverlay",
+  setup(__props) {
+    const tutorialStore = useTutorialStore();
+    const nodeStore = useFlowStore();
+    const route = useRoute();
+    const isDesignerPage = computed(() => route.name === "designer");
+    const targetRect = ref(null);
+    const tooltipPosition = ref({ x: 0, y: 0 });
+    const previousNodeCount = ref(0);
+    const spotlightStyle = computed(() => {
+      var _a;
+      if (!targetRect.value || !((_a = tutorialStore.currentStep) == null ? void 0 : _a.target)) {
+        return null;
+      }
+      const padding = tutorialStore.currentStep.highlightPadding ?? 8;
+      const rect = targetRect.value;
+      return {
+        left: `${rect.left - padding}px`,
+        top: `${rect.top - padding}px`,
+        width: `${rect.width + padding * 2}px`,
+        height: `${rect.height + padding * 2}px`,
+        borderRadius: tutorialStore.currentStep.spotlightShape === "circle" ? "50%" : "8px"
+      };
+    });
+    const isCenterMode = computed(() => {
+      var _a;
+      return !((_a = tutorialStore.currentStep) == null ? void 0 : _a.target);
+    });
+    function calculateTooltipPosition() {
+      if (!tutorialStore.currentStep)
+        return;
+      const position = tutorialStore.currentStep.position || "bottom";
+      if (isCenterMode.value || position === "center") {
+        tooltipPosition.value = {
+          x: window.innerWidth / 2,
+          y: window.innerHeight / 2
+        };
+        return;
+      }
+      if (!targetRect.value)
+        return;
+      const rect = targetRect.value;
+      const padding = 16;
+      switch (position) {
+        case "top":
+          tooltipPosition.value = {
+            x: rect.left + rect.width / 2,
+            y: rect.top - padding
+          };
+          break;
+        case "bottom":
+          tooltipPosition.value = {
+            x: rect.left + rect.width / 2,
+            y: rect.bottom + padding
+          };
+          break;
+        case "left":
+          tooltipPosition.value = {
+            x: rect.left - padding - 30,
+            // Extra offset to avoid modal overlap
+            y: rect.top + rect.height / 2
+          };
+          break;
+        case "right":
+          tooltipPosition.value = {
+            x: rect.right + padding,
+            y: rect.top + rect.height / 2
+          };
+          break;
+      }
+    }
+    function updateTargetPosition() {
+      var _a;
+      if (!((_a = tutorialStore.currentStep) == null ? void 0 : _a.target)) {
+        targetRect.value = null;
+        calculateTooltipPosition();
+        return;
+      }
+      const targetElement = document.querySelector(tutorialStore.currentStep.target);
+      if (targetElement) {
+        targetRect.value = targetElement.getBoundingClientRect();
+        calculateTooltipPosition();
+      } else {
+        targetRect.value = null;
+      }
+    }
+    watch(
+      () => tutorialStore.currentStep,
+      async (newStep) => {
+        if (!newStep)
+          return;
+        if (newStep.waitForElement) {
+          const maxAttempts = 50;
+          let attempts = 0;
+          while (attempts < maxAttempts) {
+            const element = document.querySelector(newStep.waitForElement);
+            if (element)
+              break;
+            await new Promise((resolve2) => setTimeout(resolve2, 100));
+            attempts++;
+          }
+        }
+        await nextTick();
+        updateTargetPosition();
+      },
+      { immediate: true }
+    );
+    watch(
+      () => nodeStore.flowId,
+      (newFlowId, oldFlowId) => {
+        var _a;
+        if (!tutorialStore.isActive)
+          return;
+        const currentStepId = (_a = tutorialStore.currentStep) == null ? void 0 : _a.id;
+        if (currentStepId === "confirm-create-flow" && newFlowId && newFlowId > 0 && (!oldFlowId || oldFlowId <= 0)) {
+          setTimeout(() => {
+            tutorialStore.nextStep();
+          }, 500);
+        }
+      }
+    );
+    const nodeSettingsWasVisible = ref(false);
+    function checkForNodeSettings() {
+      var _a;
+      if (!tutorialStore.isActive)
+        return;
+      const currentStepId = (_a = tutorialStore.currentStep) == null ? void 0 : _a.id;
+      const nodeSettings = document.querySelector("#nodeSettings");
+      const nodeSettingsIsVisible = nodeSettings !== null;
+      if (currentStepId === "configure-manual-input" && nodeSettingsIsVisible && !nodeSettingsWasVisible.value) {
+        setTimeout(() => {
+          tutorialStore.nextStep();
+        }, 300);
+      }
+      nodeSettingsWasVisible.value = nodeSettingsIsVisible;
+    }
+    function checkForNewNodes() {
+      var _a;
+      if (!tutorialStore.isActive)
+        return;
+      const currentStepId = (_a = tutorialStore.currentStep) == null ? void 0 : _a.id;
+      const nodes = document.querySelectorAll(".vue-flow__node");
+      const currentNodeCount = nodes.length;
+      if (currentStepId === "drag-manual-input" && currentNodeCount > previousNodeCount.value) {
+        setTimeout(() => {
+          tutorialStore.nextStep();
+        }, 300);
+      }
+      if (currentStepId === "drag-group-by" && currentNodeCount > previousNodeCount.value) {
+        setTimeout(() => {
+          tutorialStore.nextStep();
+        }, 300);
+      }
+      if (currentStepId === "drag-write-data" && currentNodeCount > previousNodeCount.value) {
+        setTimeout(() => {
+          tutorialStore.nextStep();
+        }, 300);
+      }
+      previousNodeCount.value = currentNodeCount;
+    }
+    function handleResize() {
+      updateTargetPosition();
+    }
+    function handleScroll2() {
+      updateTargetPosition();
+    }
+    let mutationObserver = null;
+    function setupMutationObserver() {
+      mutationObserver = new MutationObserver(() => {
+        updateTargetPosition();
+        checkForNodeSettings();
+        checkForNewNodes();
+      });
+      mutationObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["class", "style"]
+      });
+    }
+    onMounted(() => {
+      window.addEventListener("resize", handleResize);
+      window.addEventListener("scroll", handleScroll2, true);
+      setupMutationObserver();
+      updateTargetPosition();
+      previousNodeCount.value = document.querySelectorAll(".vue-flow__node").length;
+    });
+    onUnmounted(() => {
+      window.removeEventListener("resize", handleResize);
+      window.removeEventListener("scroll", handleScroll2, true);
+      if (mutationObserver) {
+        mutationObserver.disconnect();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, { name: "tutorial-fade" }, {
+          default: withCtx(() => {
+            var _a;
+            return [
+              isDesignerPage.value && unref(tutorialStore).isActive && !unref(tutorialStore).tutorialPaused ? (openBlock(), createElementBlock("div", _hoisted_1$U, [
+                spotlightStyle.value ? (openBlock(), createElementBlock("div", _hoisted_2$K, [
+                  (openBlock(), createElementBlock("svg", _hoisted_3$D, [
+                    createBaseVNode("defs", null, [
+                      createBaseVNode("mask", _hoisted_4$u, [
+                        _cache[0] || (_cache[0] = createBaseVNode("rect", {
+                          width: "100%",
+                          height: "100%",
+                          fill: "white"
+                        }, null, -1)),
+                        spotlightStyle.value ? (openBlock(), createElementBlock("rect", {
+                          key: 0,
+                          x: parseInt(spotlightStyle.value.left),
+                          y: parseInt(spotlightStyle.value.top),
+                          width: parseInt(spotlightStyle.value.width),
+                          height: parseInt(spotlightStyle.value.height),
+                          rx: spotlightStyle.value.borderRadius === "50%" ? parseInt(spotlightStyle.value.width) / 2 : 8,
+                          fill: "black"
+                        }, null, 8, _hoisted_5$p)) : createCommentVNode("", true)
+                      ])
+                    ]),
+                    _cache[1] || (_cache[1] = createBaseVNode("rect", {
+                      width: "100%",
+                      height: "100%",
+                      fill: "rgba(0, 0, 0, 0.7)",
+                      mask: "url(#spotlight-mask)"
+                    }, null, -1))
+                  ]))
+                ])) : ((_a = unref(tutorialStore).currentStep) == null ? void 0 : _a.centerInScreen) ? (openBlock(), createElementBlock("div", _hoisted_6$k)) : createCommentVNode("", true),
+                spotlightStyle.value ? (openBlock(), createElementBlock("div", {
+                  key: 2,
+                  class: "tutorial-spotlight",
+                  style: normalizeStyle(spotlightStyle.value)
+                }, _cache[2] || (_cache[2] = [
+                  createBaseVNode("div", { class: "spotlight-border" }, null, -1)
+                ]), 4)) : createCommentVNode("", true),
+                unref(tutorialStore).currentStep ? (openBlock(), createBlock(TutorialTooltip, {
+                  key: 3,
+                  step: unref(tutorialStore).currentStep,
+                  position: tooltipPosition.value,
+                  "is-center-mode": isCenterMode.value,
+                  "current-step-index": unref(tutorialStore).currentStepIndex,
+                  "total-steps": unref(tutorialStore).totalSteps,
+                  progress: unref(tutorialStore).progress,
+                  onNext: unref(tutorialStore).nextStep,
+                  onPrev: unref(tutorialStore).prevStep,
+                  onSkip: unref(tutorialStore).endTutorial,
+                  onComplete: unref(tutorialStore).completeTutorial
+                }, null, 8, ["step", "position", "is-center-mode", "current-step-index", "total-steps", "progress", "onNext", "onPrev", "onSkip", "onComplete"])) : createCommentVNode("", true)
+              ])) : createCommentVNode("", true)
+            ];
+          }),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const TutorialOverlay_vue_vue_type_style_index_0_scoped_cfeb3afc_lang = "";
+const TutorialOverlay = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-cfeb3afc"]]);
+const gettingStartedTutorial = {
+  id: "getting-started",
+  name: "Getting Started with Flowfile",
+  description: "Learn how to create your first data flow - from input to output",
+  steps: [
+    // Step 1: Welcome
+    {
+      id: "welcome",
+      title: "Welcome to Flowfile!",
+      content: `
+        <p>In this tutorial, you'll learn how to build your first data flow.</p>
+        <p>We'll cover:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Creating a new flow</li>
+          <li>Adding data with Manual Input</li>
+          <li>Transforming data with Group By</li>
+          <li>Writing results to a CSV file</li>
+          <li>Running your flow</li>
+          <li>Saving as YAML</li>
+        </ul>
+        <p>Let's get started!</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      showPrevButton: false
+    },
+    // Step 2: Click Quick Create button
+    {
+      id: "click-quick-create",
+      title: "Create a New Flow",
+      content: `
+        <p>First, let's create a new flow.</p>
+        <p>Click the <strong>Quick Create</strong> button to open the flow creation dialog.</p>
+      `,
+      target: "[data-tutorial='quick-create-btn']",
+      position: "bottom",
+      action: "click",
+      showNextButton: false,
+      highlightPadding: 4
+    },
+    // Step 3: Click Create Flow in modal (no highlight - tooltip stays in corner)
+    {
+      id: "confirm-create-flow",
+      title: "Confirm Flow Creation",
+      content: `
+        <p>A dialog appeared where you can optionally name your flow.</p>
+        <p>Click <strong>Create Flow</strong> in the dialog to continue.</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: false
+    },
+    // Step 4: Explore the canvas
+    {
+      id: "explore-canvas",
+      title: "Your Flow Canvas",
+      content: `
+        <p>This is your <strong>flow canvas</strong> - the workspace where you'll build your data pipelines.</p>
+        <p>On the left, you'll see the <strong>Data Actions</strong> panel with all available nodes organized by category.</p>
+      `,
+      target: ".vue-flow",
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 0
+    },
+    // Step 5: Explore the node list
+    {
+      id: "node-list",
+      title: "Available Nodes",
+      content: `
+        <p>The <strong>Data Actions</strong> panel contains all the nodes you can use:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Input Sources</strong> - Load data from files, databases, or manual input</li>
+          <li><strong>Transformations</strong> - Filter, select, sort, and modify data</li>
+          <li><strong>Combine Operations</strong> - Join and merge datasets</li>
+          <li><strong>Aggregations</strong> - Group and summarize data</li>
+          <li><strong>Output Operations</strong> - Write results to files or databases</li>
+        </ul>
+      `,
+      target: "[data-tutorial='node-list']",
+      position: "right",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 5: Find Manual Input
+    {
+      id: "find-manual-input",
+      title: "Input Sources",
+      content: `
+        <p>Let's add some data to work with!</p>
+        <p>The <strong>Input Sources</strong> category contains nodes for bringing data into your flow:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Read</strong> - Load CSV, Parquet, or other files</li>
+          <li><strong>Manual Input</strong> - Enter sample data directly</li>
+          <li><strong>Database Reader</strong> - Query databases</li>
+          <li><strong>External Source</strong> - Connect to APIs</li>
+        </ul>
+      `,
+      target: "[data-tutorial-category='input']",
+      position: "right",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 6: Highlight Manual Input node
+    {
+      id: "drag-manual-input",
+      title: "Drag Manual Input to Canvas",
+      content: `
+        <p>Find <strong>Manual Input</strong> and <strong>drag it</strong> onto the canvas.</p>
+        <p>This node lets you define sample data directly in the flow - perfect for testing!</p>
+      `,
+      target: "[data-tutorial-node='manual_input']",
+      position: "right",
+      action: "drag",
+      actionTarget: ".vue-flow",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 7: Node added - click to configure
+    {
+      id: "configure-manual-input",
+      title: "Configure Your Data",
+      content: `
+        <p>Once you've added the node, <strong>click on it</strong> to open its settings.</p>
+        <p>The settings panel will appear on the right where you can define your data columns and values.</p>
+      `,
+      target: ".vue-flow__node",
+      position: "left",
+      action: "click",
+      waitForElement: ".vue-flow__node",
+      showNextButton: true,
+      highlightPadding: 8
+    },
+    // Step 8: Show node settings with sample data suggestion
+    {
+      id: "node-settings",
+      title: "Add Sample Data",
+      content: `
+        <p>The <strong>Node Settings</strong> panel lets you configure your data.</p>
+        <p><strong>Quick option:</strong> Click <strong>Edit JSON</strong> button, paste this sample data, then click <strong>Apply JSON to table</strong>:</p>
+        <div style="background: var(--color-background-muted); padding: 8px; border-radius: 4px; margin: 8px 0; font-family: monospace; font-size: 11px; max-height: 120px; overflow: auto;">
+[{"country":"USA","product":"Widget","revenue":1000},<br>
+{"country":"Germany","product":"Gadget","revenue":2500},<br>
+{"country":"France","product":"Widget","revenue":1800},<br>
+{"country":"USA","product":"Gadget","revenue":3200},<br>
+{"country":"Germany","product":"Widget","revenue":1500},<br>
+{"country":"France","product":"Gadget","revenue":2100}]
+        </div>
+        <p style="font-size: 12px; color: var(--color-text-secondary);">Or manually add columns (country, product, revenue) and rows. Make sure to change the data type of revenue to "integer".</p>
+      `,
+      target: "#nodeSettings",
+      position: "left",
+      action: "observe",
+      waitForElement: "#nodeSettings",
+      showNextButton: true,
+      highlightPadding: 4,
+      onExit: () => {
+        const nodeStore = useNodeStore();
+        nodeStore.nodeId = -1;
+      }
+    },
+    // Step 9: Explore transformations
+    {
+      id: "transformations-overview",
+      title: "Transformation Nodes",
+      content: `
+        <p>Now let's explore the <strong>transformation</strong> options available:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Filter</strong> - Keep only rows matching conditions</li>
+          <li><strong>Select</strong> - Choose and rename columns</li>
+          <li><strong>Sort</strong> - Order rows by column values</li>
+          <li><strong>Formula</strong> - Create calculated columns</li>
+          <li><strong>Polars Code</strong> - Write custom Polars code</li>
+        </ul>
+      `,
+      target: "[data-tutorial-category='transform']",
+      position: "right",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 10: Aggregations - More prominent Group By explanation
+    {
+      id: "aggregations-overview",
+      title: "Let's Aggregate Your Data!",
+      content: `
+        <p style="font-size: 15px; margin-bottom: 16px;"><strong>Grouping</strong> is one of the most powerful data operations. It lets you summarize data by categories.</p>
+        <p><strong>Example:</strong> With your sales data, you can answer questions like:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>"What is the <strong>total revenue per country</strong>?"</li>
+          <li>"How many products were sold in each region?"</li>
+          <li>"What's the average order value by product type?"</li>
+        </ul>
+      `,
+      target: "[data-tutorial-category='aggregate']",
+      position: "right",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 11: Drag Group By node
+    {
+      id: "drag-group-by",
+      title: "Add Group By Node",
+      content: `
+        <p style="font-size: 15px; padding: 12px; background: var(--color-accent-subtle); color: #1a1a1a; border-radius: 6px; margin-bottom: 12px;">
+          <strong style="color: inherit;">Drag the Group By node</strong> onto the canvas now!
+        </p>
+        <p>This will let you calculate the <strong>total revenue per country</strong> from your sales data.</p>
+      `,
+      target: "[data-tutorial-node='group_by']",
+      position: "right",
+      action: "drag",
+      actionTarget: ".vue-flow",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 12: Connect nodes with grouping context
+    {
+      id: "connect-nodes",
+      title: "Connect Your Nodes",
+      content: `
+        <p>To make data flow between nodes, you need to <strong>connect them</strong>.</p>
+        <p>Look for the small circles (handles) on each node:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Right side</strong> - Output handle (data goes out)</li>
+          <li><strong>Left side</strong> - Input handle (data comes in)</li>
+        </ul>
+        <p><strong>Click and drag</strong> from Manual Input's output to Group By's input.</p>
+        <p style="margin-top: 12px;">Once connected, click on Group By to configure it - select <strong>country</strong> as the group column and <strong>sum of revenue</strong> as the aggregation!</p>
+      `,
+      target: ".vue-flow",
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 0,
+      onExit: () => {
+        const nodeStore = useNodeStore();
+        nodeStore.nodeId = -1;
+      }
+    },
+    // Step 13: Write data (output operations)
+    {
+      id: "output-overview",
+      title: "Write Your Results",
+      content: `
+        <p>The <strong>Output Operations</strong> section lets you save your results:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Write data</strong> - Save to CSV, Parquet, or Excel files</li>
+          <li><strong>Database Writer</strong> - Save to a database</li>
+          <li><strong>Cloud Storage</strong> - Upload to S3, GCS, etc.</li>
+        </ul>
+      `,
+      target: "[data-tutorial-category='output']",
+      position: "right",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 13: Drag Write data node
+    {
+      id: "drag-write-data",
+      title: "Add Write Data Node",
+      content: `
+        <p>Now <strong>drag the Write data node</strong> onto the canvas.</p>
+        <p>This will let you save your aggregated revenue per country to a CSV file!</p>
+        <p>After adding it, connect it to the Group By node's output.</p>
+      `,
+      target: "[data-tutorial-node='output']",
+      position: "right",
+      action: "drag",
+      actionTarget: ".vue-flow",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 14: Connect and configure nodes
+    {
+      id: "configure-write-data",
+      title: "Connect and Configure Your Nodes",
+      content: `
+        <p>Now it's time to wire everything together!</p>
+        <p><strong>Steps to complete:</strong></p>
+        <ol style="margin: 12px 0; padding-left: 20px;">
+          <li>Connect <strong>Group By → Write data</strong></li>
+          <li>Click on <strong>Write data</strong> to set the output file path</li>
+        </ol>
+        <p style="font-size: 12px; color: var(--color-text-secondary);">Drag from output handles (right side) to input handles (left side) to connect nodes.</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      onExit: () => {
+        const nodeStore = useNodeStore();
+        nodeStore.nodeId = -1;
+      }
+    },
+    // Step 15: Execution settings
+    {
+      id: "execution-settings",
+      title: "Configure Execution Mode",
+      content: `
+        <p>Before running, let's check the <strong>execution settings</strong>.</p>
+        <p>Click the <strong>Settings</strong> button to open execution options.</p>
+        <p>Make sure <strong>Development</strong> mode is selected - this gives you detailed feedback and is perfect for building and testing flows!</p>
+      `,
+      target: "[data-tutorial='settings-btn']",
+      position: "bottom",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 16: Run the flow
+    {
+      id: "run-flow",
+      title: "Run Your Flow",
+      content: `
+        <p>Now click <strong>Run</strong> to execute your flow!</p>
+        <p>Flowfile will process your data through each node in sequence.</p>
+        <p>Watch the nodes change color as they execute:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Blue</strong> - Currently running</li>
+          <li><strong>Green</strong> - Completed successfully</li>
+          <li><strong>Red</strong> - Error occurred</li>
+        </ul>
+      `,
+      target: "[data-tutorial='run-btn']",
+      position: "bottom",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 16: View results and explore pipeline
+    {
+      id: "view-results",
+      title: "Explore Your Results",
+      content: `
+        <p style="font-size: 15px;">Wait for the success message and then your flow has finished running!</p>
+        <p><strong>Click on any node</strong> to see its output in the Table Preview below.</p>
+        <p>Try clicking on different nodes:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Manual Input</strong> - Your raw sales data</li>
+          <li><strong>Group By</strong> - Total revenue per country</li>
+          <li><strong>Write data</strong> - Final output to be saved</li>
+        </ul>
+        <p style="font-size: 12px; color: var(--color-text-secondary);"><strong>Tip:</strong> If you don't see any data, make sure you have set up the flow to run in Development mode.</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true
+    },
+    // Step 17: Save the flow
+    {
+      id: "save-flow",
+      title: "Save Your Flow",
+      content: `
+        <p>Let's save your flow so you can use it again!</p>
+        <p>Click the <strong>Save</strong> button to choose where to save your flow file.</p>
+      `,
+      target: "[data-tutorial='save-btn']",
+      position: "bottom",
+      action: "observe",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 18: YAML format explanation
+    {
+      id: "yaml-format",
+      title: "Flows are Saved as YAML",
+      content: `
+        <p>Flowfile saves your flows in <strong>YAML format</strong> (.yaml or .yml).</p>
+        <p>This means your flows are:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Human-readable</strong> - Open and edit in any text editor</li>
+          <li><strong>Version-control friendly</strong> - Track changes with Git</li>
+          <li><strong>Portable</strong> - Share flows with your team</li>
+          <li><strong>Scriptable</strong> - Run from command line</li>
+        </ul>
+        <p>You can even edit your flows manually if needed!</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      centerInScreen: true
+    },
+    // Step 19: Generate code
+    {
+      id: "generate-code",
+      title: "Generate Python Code",
+      content: `
+        <p>Want to use your flow in Python?</p>
+        <p>Click <strong>Generate Code</strong> to export your flow as Python/Polars code!</p>
+        <p>This is great for:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Integrating with Python projects</li>
+          <li>Learning how Polars works</li>
+          <li>Creating production pipelines</li>
+        </ul>
+      `,
+      target: "[data-tutorial='generate-code-btn']",
+      position: "bottom",
+      action: "click",
+      showNextButton: true,
+      highlightPadding: 4
+    },
+    // Step 20: Code preview
+    {
+      id: "code-preview",
+      title: "Your Python Code",
+      content: `
+        <p>Here's your flow as <strong>Python/Polars code</strong>!</p>
+        <p>You can:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Click <strong>Export Code</strong> to save as a .py file</li>
+          <li>Copy the code directly from the editor</li>
+          <li>Click <strong>Refresh</strong> to regenerate after changes</li>
+        </ul>
+        <p>The code is fully functional and can run standalone!</p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true
+    },
+    // Step 21: Keyboard shortcuts
+    {
+      id: "keyboard-shortcuts",
+      title: "Keyboard Shortcuts",
+      content: `
+        <p>Speed up your workflow with keyboard shortcuts:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li><strong>Ctrl+S</strong> - Save flow</li>
+          <li><strong>Ctrl+E</strong> - Run flow</li>
+          <li><strong>Ctrl+G</strong> - Generate code</li>
+          <li><strong>Ctrl+N</strong> - Quick create new flow</li>
+          <li><strong>Ctrl+C/V</strong> - Copy/paste nodes</li>
+          <li><strong>Delete</strong> - Remove selected node</li>
+        </ul>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true
+    },
+    // Step 22: Completion
+    {
+      id: "completion",
+      title: "Congratulations!",
+      content: `
+        <p>You've completed the Getting Started tutorial!</p>
+        <p>You now know how to:</p>
+        <ul style="margin: 12px 0; padding-left: 20px;">
+          <li>Create a new flow</li>
+          <li>Add and configure nodes</li>
+          <li>Connect nodes to build pipelines</li>
+          <li>Run your flow and preview data</li>
+          <li>Save and export your work</li>
+        </ul>
+        <p style="margin-top: 16px;">
+          <strong>Learn more:</strong> Visit our
+          <a href="https://edwardvaneechoud.github.io/Flowfile/" target="_blank" style="color: var(--color-accent); text-decoration: underline;">documentation</a>
+          for advanced features and more tutorials.
+        </p>
+      `,
+      position: "center",
+      action: "observe",
+      showNextButton: true,
+      showPrevButton: false,
+      canSkip: false,
+      centerInScreen: true
+    }
+  ]
+};
+const _hoisted_1$T = {
+  key: 0,
+  class: "tutorial-start-container"
+};
+const DISMISSED_KEY = "flowfile-tutorial-dismissed";
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "TutorialStartButton",
+  setup(__props) {
+    const tutorialStore = useTutorialStore();
+    const nodeStore = useNodeStore();
+    const route = useRoute();
+    const isDismissed = ref(false);
+    onMounted(() => {
+      isDismissed.value = localStorage.getItem(DISMISSED_KEY) === "true";
+    });
+    const showButton = computed(() => {
+      const isDesignerPage = route.name === "designer";
+      const hasNoFlow = !nodeStore.flow_id || nodeStore.flow_id <= 0;
+      return isDesignerPage && hasNoFlow && !tutorialStore.isActive && !isDismissed.value;
+    });
+    function startTutorial() {
+      tutorialStore.startTutorial(gettingStartedTutorial);
+    }
+    function dismissButton() {
+      isDismissed.value = true;
+      localStorage.setItem(DISMISSED_KEY, "true");
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Teleport, { to: "body" }, [
+        createVNode(Transition, { name: "float-in" }, {
+          default: withCtx(() => [
+            showButton.value ? (openBlock(), createElementBlock("div", _hoisted_1$T, [
+              createBaseVNode("button", {
+                class: "tutorial-dismiss-btn",
+                title: "Dismiss",
+                onClick: dismissButton
+              }, _cache[0] || (_cache[0] = [
+                createBaseVNode("span", { class: "material-icons" }, "close", -1)
+              ])),
+              createBaseVNode("button", {
+                class: "tutorial-start-btn",
+                onClick: startTutorial
+              }, _cache[1] || (_cache[1] = [
+                createBaseVNode("span", { class: "btn-icon material-icons" }, "school", -1),
+                createBaseVNode("div", { class: "btn-content" }, [
+                  createBaseVNode("span", { class: "btn-title" }, "New to Flowfile?"),
+                  createBaseVNode("span", { class: "btn-subtitle" }, "Start the interactive tutorial")
+                ], -1),
+                createBaseVNode("span", { class: "btn-arrow material-icons" }, "arrow_forward", -1)
+              ]))
+            ])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+});
+const TutorialStartButton_vue_vue_type_style_index_0_scoped_36f83d99_lang = "";
+const TutorialStartButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-36f83d99"]]);
 const _hoisted_1$S = { class: "app-layout" };
 const _hoisted_2$J = { class: "app-layout__content" };
 const _hoisted_3$C = { class: "app-layout__page" };
@@ -19031,7 +21077,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           createBaseVNode("div", {
             class: normalizeClass(["app-layout__sidebar-wrapper", { minimized: isCollapse.value }])
           }, [
-            createVNode(_sfc_main$3, {
+            createVNode(_sfc_main$6, {
               "is-collapse": isCollapse.value,
               onToggleCollapse: toggleCollapse
             }, null, 8, ["is-collapse"])
@@ -19045,21 +21091,82 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           "is-forced": true,
           onClose: _cache[0] || (_cache[0] = ($event) => showPasswordModal.value = false),
           onSuccess: handlePasswordChanged
-        }, null, 8, ["show"])
+        }, null, 8, ["show"]),
+        createVNode(TutorialOverlay),
+        createVNode(TutorialStartButton)
       ]);
     };
   }
 });
 const AppLayout_vue_vue_type_style_index_0_lang = "";
+class SetupService {
+  constructor() {
+    __publicField(this, "cachedStatus", null);
+    __publicField(this, "statusPromise", null);
+  }
+  async getSetupStatus(forceRefresh = false) {
+    if (!forceRefresh && this.cachedStatus) {
+      return this.cachedStatus;
+    }
+    if (this.statusPromise) {
+      return this.statusPromise;
+    }
+    this.statusPromise = this.fetchStatus();
+    try {
+      this.cachedStatus = await this.statusPromise;
+      return this.cachedStatus;
+    } finally {
+      this.statusPromise = null;
+    }
+  }
+  async fetchStatus() {
+    const maxRetries = 5;
+    const retryDelay = 1e3;
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+      try {
+        const response = await axios$1.get("/health/status", {
+          headers: { "X-Skip-Auth-Header": "true" },
+          timeout: 5e3
+        });
+        return response.data;
+      } catch {
+        if (attempt < maxRetries) {
+          await new Promise((resolve2) => setTimeout(resolve2, retryDelay));
+        }
+      }
+    }
+    return {
+      setup_required: true,
+      master_key_configured: false,
+      mode: "unknown"
+    };
+  }
+  async generateKey() {
+    const response = await axios$1.post("/setup/generate-key", null, {
+      headers: { "X-Skip-Auth-Header": "true" }
+    });
+    return response.data;
+  }
+  clearCache() {
+    this.cachedStatus = null;
+  }
+}
+const setupService = new SetupService();
 const routes = [
   {
     path: "/",
     redirect: "/main"
   },
+  {
+    path: "/setup",
+    name: "setup",
+    component: () => __vitePreload(() => import("./SetupView-2d12e01f.js"), true ? ["assets/SetupView-2d12e01f.js","assets/SetupView-ec26f76a.css"] : void 0),
+    meta: { requiresAuth: false, isSetupPage: true }
+  },
   {
     path: "/login",
     name: "login",
-    component: () => __vitePreload(() => import("./LoginView-0df4ed0a.js"), true ? ["assets/LoginView-0df4ed0a.js","assets/LoginView-d325d632.css"] : void 0),
+    component: () => __vitePreload(() => import("./LoginView-c33a246a.js"), true ? ["assets/LoginView-c33a246a.js","assets/LoginView-d325d632.css"] : void 0),
     meta: { requiresAuth: false }
   },
   {
@@ -19075,42 +21182,42 @@ const routes = [
       {
         path: "designer",
         name: "designer",
-        component: () => __vitePreload(() => import("./DesignerView-e6f5c0e8.js").then((n) => n.D), true ? ["assets/DesignerView-e6f5c0e8.js","assets/PopOver-b22f049e.js","assets/PopOver-d96599db.css","assets/index-3ba44389.js","assets/vue-codemirror.esm-0965f39f.js","assets/DesignerView-a6d0ee84.css"] : void 0)
+        component: () => __vitePreload(() => import("./DesignerView-a4466dab.js").then((n) => n.D), true ? ["assets/DesignerView-a4466dab.js","assets/PopOver-ddcfe4f6.js","assets/PopOver-d96599db.css","assets/index-057d770d.js","assets/vue-codemirror.esm-8f46fb36.js","assets/DesignerView-71d4e9a1.css"] : void 0)
       },
       {
         name: "nodeData",
         path: "nodeData",
-        component: () => __vitePreload(() => import("./fullEditor-5497a84a.js"), true ? ["assets/fullEditor-5497a84a.js","assets/PopOver-b22f049e.js","assets/PopOver-d96599db.css","assets/vue-codemirror.esm-0965f39f.js","assets/fullEditor-a0be62b3.css"] : void 0)
+        component: () => __vitePreload(() => import("./fullEditor-7583bef5.js"), true ? ["assets/fullEditor-7583bef5.js","assets/PopOver-ddcfe4f6.js","assets/PopOver-d96599db.css","assets/vue-codemirror.esm-8f46fb36.js","assets/fullEditor-fe9f7e18.css"] : void 0)
       },
       {
         name: "documentation",
         path: "documentation",
-        component: () => __vitePreload(() => import("./DocumentationView-2e78ef1b.js"), true ? ["assets/DocumentationView-2e78ef1b.js","assets/DocumentationView-fd46c656.css"] : void 0)
+        component: () => __vitePreload(() => import("./DocumentationView-979afc84.js"), true ? ["assets/DocumentationView-979afc84.js","assets/DocumentationView-9ea6e871.css"] : void 0)
       },
       {
         name: "databaseManager",
         path: "databaseManager",
-        component: () => __vitePreload(() => import("./DatabaseView-d26a9140.js"), true ? ["assets/DatabaseView-d26a9140.js","assets/api-24483f0d.js","assets/DatabaseView-6655afd6.css"] : void 0)
+        component: () => __vitePreload(() => import("./DatabaseView-dc877c29.js"), true ? ["assets/DatabaseView-dc877c29.js","assets/api-df48ec50.js","assets/DatabaseView-6655afd6.css"] : void 0)
       },
       {
         name: "cloudConnectionManager",
         path: "cloudConnectionManager",
-        component: () => __vitePreload(() => import("./CloudConnectionView-f13f202b.js"), true ? ["assets/CloudConnectionView-f13f202b.js","assets/api-8b81fa73.js","assets/CloudConnectionView-36bcd6df.css"] : void 0)
+        component: () => __vitePreload(() => import("./CloudConnectionView-7a3042c6.js"), true ? ["assets/CloudConnectionView-7a3042c6.js","assets/api-ee542cf7.js","assets/CloudConnectionView-cf85f943.css"] : void 0)
       },
       {
         name: "secretManager",
         path: "secretManager",
-        component: () => __vitePreload(() => import("./SecretsView-17df66ee.js"), true ? ["assets/SecretsView-17df66ee.js","assets/secrets.api-002e7d7e.js","assets/SecretsView-aa291340.css"] : void 0)
+        component: () => __vitePreload(() => import("./SecretsView-c6afc915.js"), true ? ["assets/SecretsView-c6afc915.js","assets/secrets.api-34431884.js","assets/SecretsView-aa291340.css"] : void 0)
       },
       {
         name: "nodeDesigner",
         path: "nodeDesigner",
-        component: () => __vitePreload(() => import("./NodeDesigner-40b647c9.js"), true ? ["assets/NodeDesigner-40b647c9.js","assets/vue-codemirror.esm-0965f39f.js","assets/index-3ba44389.js","assets/NodeDesigner-5f53be3f.css"] : void 0)
+        component: () => __vitePreload(() => import("./NodeDesigner-5036c392.js"), true ? ["assets/NodeDesigner-5036c392.js","assets/vue-codemirror.esm-8f46fb36.js","assets/index-057d770d.js","assets/NodeDesigner-94cd4dd3.css"] : void 0)
       },
       {
         name: "admin",
         path: "admin",
-        component: () => __vitePreload(() => import("./AdminView-49392a9a.js"), true ? ["assets/AdminView-49392a9a.js","assets/AdminView-f53bad23.css"] : void 0),
+        component: () => __vitePreload(() => import("./AdminView-c2c7942b.js"), true ? ["assets/AdminView-c2c7942b.js","assets/AdminView-f53bad23.css"] : void 0),
         meta: { requiresAdmin: true, hideInElectron: true }
       }
     ]
@@ -19124,10 +21231,39 @@ const router = createRouter({
   history: createWebHashHistory("/"),
   routes
 });
+let setupChecked = false;
+let setupRequired = false;
 router.beforeEach(async (to, _from, next) => {
   const authStore = useAuthStore();
   const requiresAuth = to.matched.some((record) => record.meta.requiresAuth !== false);
   const hideInElectron = to.matched.some((record) => record.meta.hideInElectron);
+  const isSetupPage = to.matched.some((record) => record.meta.isSetupPage);
+  if (!setupChecked || isSetupPage) {
+    try {
+      const status = await setupService.getSetupStatus(isSetupPage);
+      authService.setModeFromBackend(status.mode);
+      setupRequired = status.setup_required;
+      setupChecked = status.mode !== "unknown";
+    } catch {
+      setupRequired = true;
+      setupChecked = false;
+    }
+  }
+  if (!authService.isInElectronMode()) {
+    if (setupRequired && !isSetupPage) {
+      next({ name: "setup" });
+      return;
+    }
+    if (!setupRequired && isSetupPage) {
+      next({ name: "login" });
+      return;
+    }
+  } else {
+    if (isSetupPage) {
+      next({ name: "designer" });
+      return;
+    }
+  }
   if (authService.isAuthenticated() && !authStore.user) {
     await authStore.initialize();
   }
@@ -60499,52 +62635,6 @@ const i18n = createI18n({
 });
 const all2 = "";
 const main = "";
-const flowfileCorebaseURL = "http://localhost:63578/";
-axios$1.defaults.baseURL = flowfileCorebaseURL;
-axios$1.defaults.withCredentials = true;
-axios$1.interceptors.request.use(
-  async (config) => {
-    if (config.headers && config.headers["X-Skip-Auth-Header"]) {
-      delete config.headers["X-Skip-Auth-Header"];
-      return config;
-    }
-    try {
-      const token = await authService.getToken();
-      if (token) {
-        config.headers = config.headers || {};
-        config.headers.Authorization = `Bearer ${token}`;
-      }
-      return config;
-    } catch (error) {
-      console.error("Error in request interceptor:", error);
-      return config;
-    }
-  },
-  (error) => {
-    return Promise.reject(error);
-  }
-);
-axios$1.interceptors.response.use(
-  (response) => {
-    return response;
-  },
-  async (error) => {
-    var _a;
-    const originalRequest = error.config;
-    if (((_a = error.response) == null ? void 0 : _a.status) === 401 && !originalRequest._retry) {
-      originalRequest._retry = true;
-      try {
-        await authService.getToken();
-        return axios$1(originalRequest);
-      } catch (refreshError) {
-        console.error("Token refresh failed:", refreshError);
-        authService.logout();
-        return Promise.reject(error);
-      }
-    }
-    return Promise.reject(error);
-  }
-);
 const app = createApp(App);
 app.directive("click-outside", ClickOutsideDirective);
 app.use(stores);
@@ -60572,92 +62662,99 @@ authService.initialize().then((authenticated) => {
   }
 });
 export {
-  onBeforeUnmount as $,
-  computed as A,
-  watch as B,
-  onMounted as C,
-  renderList as D,
+  isRef as $,
+  withCtx as A,
+  unref as B,
+  createBlock as C,
+  defineStore as D,
   ElNotification as E,
-  Fragment as F,
-  withKeys as G,
-  ElMessage as H,
-  ElMessageBox as I,
-  inject as J,
-  effectScope as K,
-  provide as L,
-  getCurrentInstance as M,
-  getCurrentScope as N,
-  onScopeDispose as O,
-  createPropsRestProxy as P,
-  toRef as Q,
-  renderSlot as R,
-  reactive as S,
-  useSlots as T,
-  isRef as U,
-  toRefs as V,
-  customRef as W,
-  nextTick as X,
-  onBeforeMount as Y,
-  normalizeStyle as Z,
+  getDefaultExportFromCjs as F,
+  computed as G,
+  watch as H,
+  onActivated as I,
+  onMounted as J,
+  Fragment as K,
+  renderList as L,
+  withKeys as M,
+  ElMessage as N,
+  ElMessageBox as O,
+  inject as P,
+  effectScope as Q,
+  provide as R,
+  getCurrentInstance as S,
+  getCurrentScope as T,
+  onScopeDispose as U,
+  createPropsRestProxy as V,
+  toRef as W,
+  renderSlot as X,
+  reactive as Y,
+  useSlots as Z,
   _imports_1 as _,
-  useAuthStore as a,
-  isMemoSame as a0,
-  toValue as a1,
-  shallowRef as a2,
-  h$1 as a3,
-  markRaw as a4,
-  readonly as a5,
-  useAttrs$1 as a6,
-  mergeProps as a7,
-  resolveDynamicComponent as a8,
-  watchEffect as a9,
-  normalizeProps as aa,
-  defineAsyncComponent as ab,
-  onErrorCaptured as ac,
-  __vitePreload as ad,
-  Teleport as ae,
-  guardReactiveProps as af,
-  Transition as ag,
-  render$$ as ah,
-  vShow as ai,
-  authService as aj,
-  flowfileCorebaseURL as ak,
-  useCssVars as al,
-  vModelSelect as am,
-  vModelCheckbox as an,
-  ElDialog as ao,
-  ElButton as ap,
-  toRaw as aq,
-  ElRadio as ar,
-  useThemeStore as as,
-  debounce$2 as at,
-  ElIcon as au,
-  ElPopover as av,
-  ElOption$1 as aw,
-  ElSelect as ax,
-  createBaseVNode as b,
+  createBaseVNode as a,
+  toRefs as a0,
+  customRef as a1,
+  nextTick as a2,
+  onBeforeMount as a3,
+  normalizeStyle as a4,
+  onBeforeUnmount as a5,
+  isMemoSame as a6,
+  toValue as a7,
+  shallowRef as a8,
+  h$1 as a9,
+  useThemeStore as aA,
+  debounce$2 as aB,
+  ElPopover as aC,
+  ElOption$1 as aD,
+  ElSelect as aE,
+  markRaw as aa,
+  readonly as ab,
+  useAttrs$1 as ac,
+  mergeProps as ad,
+  resolveDynamicComponent as ae,
+  watchEffect as af,
+  normalizeProps as ag,
+  defineAsyncComponent as ah,
+  onErrorCaptured as ai,
+  __vitePreload as aj,
+  useFlowStore as ak,
+  Teleport as al,
+  guardReactiveProps as am,
+  Transition as an,
+  render$$ as ao,
+  vShow as ap,
+  authService as aq,
+  flowfileCorebaseURL as ar,
+  useCssVars as as,
+  vModelSelect as at,
+  vModelCheckbox as au,
+  ElDialog as av,
+  ElButton as aw,
+  toRaw as ax,
+  ElIcon as ay,
+  ElRadio as az,
+  createStaticVNode as b,
   createElementBlock as c,
   defineComponent as d,
-  createStaticVNode as e,
-  createCommentVNode as f,
-  withDirectives as g,
-  vModelDynamic as h,
-  _export_sfc as i,
-  axios$1 as j,
-  onUnmounted as k,
-  resolveComponent as l,
-  createVNode as m,
+  createCommentVNode as e,
+  createTextVNode as f,
+  _export_sfc as g,
+  useAuthStore as h,
+  withDirectives as i,
+  vModelDynamic as j,
+  axios$1 as k,
+  useNodeStore as l,
+  useEditorStore as m,
   normalizeClass as n,
   openBlock as o,
-  withCtx as p,
-  createTextVNode as q,
+  useResultsStore as p,
+  onUnmounted as q,
   ref as r,
-  unref as s,
+  setupService as s,
   toDisplayString$1 as t,
   useRouter as u,
   vModelText as v,
   withModifiers as w,
-  createBlock as x,
-  defineStore as y,
-  getDefaultExportFromCjs as z
+  useTutorialStore as x,
+  resolveComponent as y,
+  createVNode as z
 };