local-operator-ui 0.1.2-beta.9 → 0.1.3

package/out/renderer/assets/{index-BtxgdS6T.js → index-BOYHDbPZ.js}

@@ -1,4 +1,4 @@
-import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as faUser, aF as faFile, aG as faEllipsisVertical, aH as faComment, aI as faChevronLeft, aJ as faChevronRight, aK as faPlus, aL as faSearch, aM as faCommentSlash, aN as faArrowRight, aO as faComments, aP as faTag, aQ as faIdCard, aR as faCalendarAlt, aS as faCodeBranch, aT as faShieldAlt, aU as faArrowLeft, aV as LinearProgress, aW as keyframes, aX as faShield, aY as faSignOut, aZ as faLightbulb, a_ as faMagicWandSparkles, a$ as faBrain, b0 as faWandMagicSparkles, b1 as faExternalLinkAlt, b2 as faKey, b3 as faGlobe, b4 as faLock, b5 as faEdit, b6 as faSave, b7 as faEnvelope, b8 as faCloudUploadAlt, b9 as faHistory, ba as faListAlt, bb as library$1, bc as icons$1, bd as CssBaseline, be as ReactDOM$1, bf as ThemeProvider, bg as theme, bh as ErrorBoundary } from "./theme-C9zRS1f0.js";
+import { c as createStyled, r as resolveProps, u as useTheme, a as reactExports, b as clsx, d as useForkRef, j as jsxRuntimeExports, e as capitalize, f as composeClasses, g as createTheme, h as generateUtilityClass, i as generateUtilityClasses, k as useDefaultProps, s as styled$1, m as memoTheme, l as getDefaultExportFromCjs, n as requireReactDom, _ as _inheritsLoose, o as _objectWithoutPropertiesLoose$1, R as React, T as TransitionGroupContext, p as duration, q as useTheme$1, t as useTimeout, v as useId, B as ButtonBase, w as alpha, x as createSimplePaletteValueFilter, C as CircularProgress, P as Paper, y as darken, z as lighten, A as useEventCallback, D as setRef, E as useEnhancedEffect, F as useRtl, G as globalCss, H as formatMuiErrorMessage, I as rootShouldForwardProp, J as Typography, K as deepmerge, L as extendSxProp, M as resolveBreakpointValues, N as handleBreakpoints, O as getPath, Q as isFocusVisible, S as typographyClasses, U as slotShouldForwardProp, V as clamp, W as emphasize, X as Timeout, Y as React$1, Z as Box, $ as FontAwesomeIcon, a0 as faRobot, a1 as faSliders, a2 as Button, a3 as faExclamationTriangle, a4 as faCheck, a5 as faTimes, a6 as faEraser, a7 as faPen, a8 as faInfoCircle, a9 as faGear, aa as faServer, ab as faStar, ac as faTrash, ad as faCommentDots, ae as faCode, af as faHome, ag as faDownload, ah as faFileAlt, ai as faDesktop, aj as faImage, ak as faMusic, al as faVideo, am as faLaptop, an as faUsers, ao as faDatabase, ap as faBoxOpen, aq as faBook, ar as faHdd, as as faBox, at as faArchive, au as faNetworkWired, av as faFolder, aw as faFolderOpen, ax as faClock, ay as faChevronDown, az as faTools, aA as faArrowDown, aB as faPaperclip, aC as faStop, aD as faPaperPlane, aE as faUser, aF as faFile, aG as faEllipsisVertical, aH as faComment, aI as faChevronLeft, aJ as faChevronRight, aK as faPlus, aL as faSearch, aM as faCommentSlash, aN as faArrowRight, aO as faComments, aP as faTag, aQ as faIdCard, aR as faCalendarAlt, aS as faCodeBranch, aT as faShieldAlt, aU as faArrowLeft, aV as requireReact, aW as LinearProgress, aX as keyframes, aY as faShield, aZ as faSignOut, a_ as faLightbulb, a$ as faMagicWandSparkles, b0 as faBrain, b1 as faWandMagicSparkles, b2 as faExternalLinkAlt, b3 as faKey, b4 as faGlobe, b5 as faLock, b6 as faEdit, b7 as faSave, b8 as faEnvelope, b9 as faCloudUploadAlt, ba as faHistory, bb as faListAlt, bc as library$1, bd as icons$1, be as CssBaseline, bf as ReactDOM$1, bg as ThemeProvider, bh as theme, bi as ErrorBoundary } from "./theme-D7qnOAQJ.js";
 const styled = createStyled();
 function getThemeProps(params) {
   const {
@@ -22178,7 +22178,10 @@ const queryClient = new QueryClient({
       // Default refetch configuration
       refetchOnWindowFocus: true,
       refetchOnMount: true,
-      refetchOnReconnect: true
+      // Don't wait for reconnect to refetch - we handle offline status separately
+      refetchOnReconnect: false,
+      // Continue to run queries even when offline
+      networkMode: "always"
     }
   }
 });
@@ -30047,9 +30050,279 @@ const config = loadConfig();
 const apiConfig = {
   baseUrl: config.VITE_LOCAL_OPERATOR_API_URL
 };
+const activeToasts = /* @__PURE__ */ new Map();
+const lastErrorShownTime = /* @__PURE__ */ new Map();
+const errorCountInPeriod = /* @__PURE__ */ new Map();
+const DEFAULT_ERROR_COOLDOWN = 5e3;
+const MAX_SIMILAR_ERRORS = 1;
+const ERROR_GROUPS = {
+  CONNECTION: [
+    "Failed to fetch",
+    "Network error",
+    "ERR_CONNECTION_REFUSED",
+    "Server is offline",
+    "Connection failed"
+  ]
+  // Add other error groups as needed
+};
+const getErrorGroup = (message2) => {
+  for (const [group, patterns] of Object.entries(ERROR_GROUPS)) {
+    if (patterns.some((pattern) => message2.includes(pattern))) {
+      return group;
+    }
+  }
+  return null;
+};
+const showErrorToast = (message2, options) => {
+  const now = Date.now();
+  const errorGroup = getErrorGroup(message2);
+  const key = errorGroup || message2;
+  const lastShown = lastErrorShownTime.get(key);
+  if (lastShown && now - lastShown < DEFAULT_ERROR_COOLDOWN) {
+    return null;
+  }
+  const errorCount = errorCountInPeriod.get(key) || 0;
+  if (errorCount >= MAX_SIMILAR_ERRORS) {
+    return null;
+  }
+  if (activeToasts.has(key)) {
+    lastErrorShownTime.set(key, now);
+    return activeToasts.get(key);
+  }
+  const id = y$1.error(message2, {
+    ...options,
+    onClose: () => {
+      activeToasts.delete(key);
+    }
+  });
+  activeToasts.set(key, id);
+  lastErrorShownTime.set(key, now);
+  errorCountInPeriod.set(key, errorCount + 1);
+  setTimeout(() => {
+    errorCountInPeriod.set(key, 0);
+  }, DEFAULT_ERROR_COOLDOWN);
+  return id;
+};
+const configQueryKey = ["config"];
+const useConfig = () => {
+  return useQuery({
+    // Always enable this query since it's needed for connectivity checks
+    enabled: true,
+    queryKey: configQueryKey,
+    queryFn: async () => {
+      try {
+        const client = createLocalOperatorClient(apiConfig.baseUrl);
+        const response = await client.config.getConfig();
+        if (response.status >= 400) {
+          throw new Error(response.message || "Failed to fetch configuration");
+        }
+        return response.result;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching configuration";
+        showErrorToast(errorMessage);
+        throw error;
+      }
+    },
+    // Prevent automatic refetches on window focus
+    refetchOnWindowFocus: false,
+    // Prevent stale time to avoid unnecessary refetches
+    staleTime: 5e3
+  });
+};
+const serverHealthQueryKey = ["server-health"];
+const internetConnectivityQueryKey = ["internet-connectivity"];
+const useServerHealth = (refetchInterval = 5e3) => {
+  return useQuery({
+    queryKey: serverHealthQueryKey,
+    queryFn: async () => {
+      try {
+        await HealthApi.healthCheck(apiConfig.baseUrl);
+        return true;
+      } catch (error) {
+        return false;
+      }
+    },
+    // Refetch at specified interval
+    refetchInterval,
+    // Enable background refetching
+    refetchIntervalInBackground: true,
+    // Don't retry on failure as this is expected when server is down
+    retry: false,
+    // Always refetch on window focus to get latest status
+    refetchOnWindowFocus: true,
+    // Use placeholderData instead of keepPreviousData (which is deprecated)
+    placeholderData: (previousData) => previousData
+  });
+};
+const useInternetConnectivity = (refetchInterval = 5e3) => {
+  const [isOnlineState, setIsOnlineState] = reactExports.useState(navigator.onLine);
+  reactExports.useEffect(() => {
+    const handleOnline = () => {
+      setIsOnlineState(true);
+    };
+    const handleOffline = () => {
+      setIsOnlineState(false);
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  return useQuery({
+    queryKey: internetConnectivityQueryKey,
+    queryFn: async () => {
+      return isOnlineState && navigator.onLine;
+    },
+    // Refetch at specified interval
+    refetchInterval,
+    // Enable background refetching
+    refetchIntervalInBackground: true,
+    // Don't retry on failure as this is expected when internet is down
+    retry: false,
+    // Always refetch on window focus to get latest status
+    refetchOnWindowFocus: true,
+    // Use placeholderData instead of keepPreviousData (which is deprecated)
+    placeholderData: (previousData) => previousData
+  });
+};
+const useConnectivityStatus = (serverRefetchInterval = 5e3) => {
+  const {
+    data: isServerOnline = true,
+    // Default to true to avoid false positives on initial load
+    isLoading: isServerStatusLoading,
+    refetch: refetchServerStatus
+  } = useServerHealth(serverRefetchInterval);
+  const { data: config2, isLoading: isConfigLoading } = useConfig();
+  const hostingProvider = config2?.values.hosting || "";
+  const shouldCheckInternet = hostingProvider.toLowerCase() !== "ollama";
+  const {
+    data: isOnline = true,
+    // Default to true to avoid false positives on initial load
+    isLoading: isInternetStatusLoading,
+    refetch: refetchInternetStatus
+  } = useInternetConnectivity(serverRefetchInterval);
+  reactExports.useEffect(() => {
+    const handleOnline = () => {
+      refetchInternetStatus();
+    };
+    const handleOffline = () => {
+      refetchInternetStatus();
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [refetchInternetStatus]);
+  const hasConnectivityIssue = !isServerOnline || shouldCheckInternet && !isOnline;
+  const connectivityIssue = !isServerOnline ? "server_offline" : shouldCheckInternet && !isOnline ? "internet_offline" : null;
+  return {
+    isServerOnline,
+    isOnline,
+    hostingProvider,
+    shouldCheckInternet,
+    hasConnectivityIssue,
+    connectivityIssue,
+    isLoading: isServerStatusLoading || shouldCheckInternet && isInternetStatusLoading || isConfigLoading,
+    refetchServerStatus,
+    refetchInternetStatus
+  };
+};
+const useConnectivityGate = () => {
+  const {
+    isServerOnline,
+    isOnline,
+    hostingProvider,
+    shouldCheckInternet,
+    hasConnectivityIssue,
+    connectivityIssue,
+    isLoading,
+    refetchInternetStatus
+  } = useConnectivityStatus();
+  const queryClient2 = useQueryClient();
+  reactExports.useEffect(() => {
+    const handleOnline = () => {
+      refetchInternetStatus();
+      queryClient2.invalidateQueries({
+        // Force refetch to ensure queries are updated with new connectivity status
+        refetchType: "all"
+      });
+    };
+    const handleOffline = () => {
+      refetchInternetStatus();
+      queryClient2.invalidateQueries({
+        predicate: (query) => {
+          const queryKey = query.queryKey[0];
+          return queryKey !== "server-health" && queryKey !== "internet-connectivity" && queryKey !== "config";
+        },
+        // Force refetch to ensure queries are updated with new connectivity status
+        refetchType: "active"
+      });
+    };
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, [refetchInternetStatus, queryClient2]);
+  reactExports.useEffect(() => {
+    if (!isLoading && !isServerOnline) {
+      queryClient2.invalidateQueries({
+        predicate: (query) => {
+          const queryKey = query.queryKey[0];
+          return queryKey !== "server-health" && queryKey !== "internet-connectivity" && queryKey !== "config";
+        },
+        // Force refetch to ensure queries are updated with new connectivity status
+        refetchType: "active"
+      });
+    }
+  }, [isServerOnline, isLoading, queryClient2]);
+  const shouldEnableQuery = (options) => {
+    if (isLoading) {
+      return false;
+    }
+    if (!options?.bypassServerCheck && !isServerOnline) {
+      return false;
+    }
+    return true;
+  };
+  const getConnectivityError = () => {
+    if (isLoading) {
+      return null;
+    }
+    if (!isServerOnline) {
+      return new Error("Server is offline. Please check your connection.");
+    }
+    return null;
+  };
+  return {
+    shouldEnableQuery,
+    getConnectivityError,
+    isServerOnline,
+    isOnline,
+    hostingProvider,
+    shouldCheckInternet,
+    hasConnectivityIssue,
+    connectivityIssue,
+    isLoading
+  };
+};
 const agentsQueryKey = ["agents"];
 const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
+  const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
+  const connectivityError = getConnectivityError();
+  reactExports.useEffect(() => {
+    if (connectivityError) {
+      console.error("Agents connectivity error:", connectivityError.message);
+    }
+  }, [connectivityError]);
   return useQuery({
+    // Only enable the query if server is online (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }),
     queryKey: [...agentsQueryKey, page, perPage, name2],
     queryFn: async () => {
       try {
@@ -30061,7 +30334,7 @@ const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
         return response.result?.agents || [];
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching agents";
-        y$1.error(errorMessage);
+        showErrorToast(errorMessage);
         throw error;
       }
     },
@@ -30076,7 +30349,16 @@ const useAgents = (page = 1, perPage = 50, refetchInterval = 0, name2) => {
   });
 };
 const useAgent = (agentId) => {
+  const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
+  const connectivityError = getConnectivityError();
+  reactExports.useEffect(() => {
+    if (connectivityError) {
+      console.error("Agent connectivity error:", connectivityError.message);
+    }
+  }, [connectivityError]);
   return useQuery({
+    // Only enable the query if server is online and agentId is provided (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!agentId,
     queryKey: [...agentsQueryKey, agentId],
     queryFn: async () => {
       if (!agentId) return null;
@@ -30093,12 +30375,11 @@ const useAgent = (agentId) => {
         const is404Error = error instanceof Error && (error.message.includes("404") || error.message.includes("not found"));
         if (!is404Error) {
           const errorMessage = error instanceof Error ? error.message : `An unknown error occurred while fetching agent ${agentId}`;
-          y$1.error(errorMessage);
+          showErrorToast(errorMessage);
         }
         throw error;
       }
-    },
-    enabled: !!agentId
+    }
   });
 };
 const createStoreImpl = (createState2) => {
@@ -30296,6 +30577,16 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
     updateScrollPosition,
     getScrollPosition
   } = useChatStore();
+  const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
+  const connectivityError = getConnectivityError();
+  reactExports.useEffect(() => {
+    if (connectivityError) {
+      console.error(
+        "Conversation messages connectivity error:",
+        connectivityError.message
+      );
+    }
+  }, [connectivityError]);
   const {
     data,
     fetchNextPage,
@@ -30306,6 +30597,8 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
     error,
     refetch
   } = useInfiniteQuery({
+    // Only enable the query if server is online (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!conversationId,
     queryKey: [...conversationMessagesQueryKey, conversationId],
     queryFn: async ({ pageParam }) => {
       try {
@@ -30354,7 +30647,7 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
         };
       } catch (error2) {
         const errorMessage = error2 instanceof Error ? error2.message : "An unknown error occurred while fetching conversation messages";
-        y$1.error(errorMessage);
+        showErrorToast(errorMessage);
         throw error2;
       }
     },
@@ -30362,9 +30655,7 @@ const useConversationMessages = (conversationId, pageSize2 = 20) => {
     getNextPageParam: (lastPage) => {
       if (!lastPage.hasMore) return void 0;
       return lastPage.page + 1;
-    },
-    // Only enable the query if we have a conversation ID
-    enabled: !!conversationId
+    }
   });
   const handleScroll = reactExports.useCallback(() => {
     if (!messagesContainerRef.current || !conversationId) return;
@@ -30479,9 +30770,20 @@ const useJobPolling = ({
   const lastProcessedJobDataRef = reactExports.useRef(null);
   const client = createLocalOperatorClient(apiConfig.baseUrl);
   const previousConversationIdRef = reactExports.useRef(conversationId);
+  const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
   const checkForActiveJobs = reactExports.useCallback(
     async (agentId) => {
       if (!agentId) return false;
+      if (!shouldEnableQuery({ bypassInternetCheck: true })) {
+        const error2 = getConnectivityError();
+        if (error2) {
+          console.error(
+            "Cannot check for active jobs due to connectivity issue:",
+            error2.message
+          );
+        }
+        return false;
+      }
       try {
         const pendingResponse = await client.jobs.listJobs(agentId, "pending");
         const processingResponse = await client.jobs.listJobs(
@@ -30509,7 +30811,7 @@ const useJobPolling = ({
         return false;
       }
     },
-    [client.jobs, currentJobId]
+    [client.jobs, currentJobId, shouldEnableQuery, getConnectivityError]
   );
   reactExports.useEffect(() => {
     if (conversationId !== previousConversationIdRef.current) {
@@ -30517,6 +30819,16 @@ const useJobPolling = ({
       setCurrentJobId(null);
       if (conversationId) {
         const checkNewAgentJobs = async () => {
+          if (!shouldEnableQuery({ bypassInternetCheck: true })) {
+            const error2 = getConnectivityError();
+            if (error2) {
+              console.error(
+                "Cannot check for active jobs due to connectivity issue:",
+                error2.message
+              );
+            }
+            return;
+          }
           try {
             const pendingResponse = await client.jobs.listJobs(
               conversationId,
@@ -30546,10 +30858,20 @@ const useJobPolling = ({
       }
     }
     previousConversationIdRef.current = conversationId;
-  }, [conversationId, client.jobs]);
+  }, [conversationId, client.jobs, shouldEnableQuery, getConnectivityError]);
   const updateConversationMessages = reactExports.useCallback(
     async (agentId) => {
       if (!agentId) return;
+      if (!shouldEnableQuery({ bypassInternetCheck: true })) {
+        const error2 = getConnectivityError();
+        if (error2) {
+          console.error(
+            "Cannot update conversation messages due to connectivity issue:",
+            error2.message
+          );
+        }
+        return false;
+      }
       try {
         const client2 = createLocalOperatorClient(apiConfig.baseUrl);
         const response = await client2.agents.getAgentExecutionHistory(
@@ -30585,7 +30907,13 @@ const useJobPolling = ({
         return false;
       }
     },
-    [getMessages, setMessages, queryClient2]
+    [
+      getMessages,
+      setMessages,
+      queryClient2,
+      shouldEnableQuery,
+      getConnectivityError
+    ]
   );
   const handleJobCompletion = reactExports.useCallback(
     async (job) => {
@@ -30633,8 +30961,8 @@ const useJobPolling = ({
       const response = await client2.jobs.getJobStatus(currentJobId);
       return response.result;
     },
-    // Only run the query if we have a job ID
-    enabled: !!currentJobId,
+    // Only run the query if we have a job ID and server is online (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }) && !!currentJobId,
     // Poll every 1 second while job is active
     refetchInterval: currentJobId ? 1e3 : false,
     // Force refetch on interval regardless of window focus
@@ -32615,7 +32943,19 @@ const getAvailableHostingProviders = (userCredentials) => {
 };
 const credentialsQueryKey = ["credentials"];
 const useCredentials = () => {
+  const { shouldEnableQuery, getConnectivityError } = useConnectivityGate();
+  const connectivityError = getConnectivityError();
+  reactExports.useEffect(() => {
+    if (connectivityError) {
+      console.error(
+        "Credentials connectivity error:",
+        connectivityError.message
+      );
+    }
+  }, [connectivityError]);
   return useQuery({
+    // Only enable the query if server is online (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }),
     queryKey: credentialsQueryKey,
     queryFn: async () => {
       try {
@@ -32627,7 +32967,7 @@ const useCredentials = () => {
         return response.result;
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching credentials";
-        y$1.error(errorMessage);
+        showErrorToast(errorMessage);
         throw error;
       }
     },
@@ -32888,6 +33228,8 @@ const HostingSelect = ({
 };
 const useModels = ({ autoFetch = true } = {}) => {
   const baseUrl = apiConfig.baseUrl;
+  const intervalRef = reactExports.useRef(null);
+  const { shouldEnableQuery, getConnectivityError, hasConnectivityIssue } = useConnectivityGate();
   const {
     providers,
     models,
@@ -32899,20 +33241,43 @@ const useModels = ({ autoFetch = true } = {}) => {
     getModelsForProvider
   } = useModelsStore();
   reactExports.useEffect(() => {
-    if (autoFetch) {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (autoFetch && shouldEnableQuery({ bypassInternetCheck: true })) {
       fetchModels(baseUrl);
-      const intervalId = setInterval(
+      intervalRef.current = window.setInterval(
         () => {
-          fetchModels(baseUrl);
+          if (shouldEnableQuery({ bypassInternetCheck: true })) {
+            fetchModels(baseUrl);
+          }
         },
         15 * 60 * 1e3
       );
-      return () => clearInterval(intervalId);
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      };
     }
     return void 0;
-  }, [autoFetch, baseUrl, fetchModels]);
+  }, [autoFetch, baseUrl, fetchModels, shouldEnableQuery]);
+  reactExports.useEffect(() => {
+    if (!hasConnectivityIssue && autoFetch && isInitialized) {
+      fetchModels(baseUrl);
+    }
+  }, [hasConnectivityIssue, autoFetch, isInitialized, baseUrl, fetchModels]);
   const refreshModels = async () => {
-    await fetchModels(baseUrl, true);
+    if (shouldEnableQuery({ bypassInternetCheck: true })) {
+      await fetchModels(baseUrl, true);
+    } else {
+      const error2 = getConnectivityError();
+      if (error2) {
+        throw error2;
+      }
+    }
   };
   const getModelById = (modelId) => {
     return models.find((model) => model.id === modelId);
@@ -34333,13 +34698,13 @@ function requireCjs$1() {
   }
   return cjs$1;
 }
-var utilities = {};
-var hasRequiredUtilities;
-function requireUtilities() {
-  if (hasRequiredUtilities) return utilities;
-  hasRequiredUtilities = 1;
-  Object.defineProperty(utilities, "__esModule", { value: true });
-  utilities.camelCase = void 0;
+var utilities$2 = {};
+var hasRequiredUtilities$2;
+function requireUtilities$2() {
+  if (hasRequiredUtilities$2) return utilities$2;
+  hasRequiredUtilities$2 = 1;
+  Object.defineProperty(utilities$2, "__esModule", { value: true });
+  utilities$2.camelCase = void 0;
   var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9_-]+$/;
   var HYPHEN_REGEX = /-([a-z])/g;
   var NO_HYPHEN_REGEX = /^[^-]+$/;
@@ -34369,8 +34734,8 @@ function requireUtilities() {
     }
     return property.replace(HYPHEN_REGEX, capitalize2);
   };
-  utilities.camelCase = camelCase;
-  return utilities;
+  utilities$2.camelCase = camelCase;
+  return utilities$2;
 }
 var cjs;
 var hasRequiredCjs;
@@ -34381,7 +34746,7 @@ function requireCjs() {
     return mod && mod.__esModule ? mod : { "default": mod };
   };
   var style_to_object_1 = __importDefault(requireCjs$1());
-  var utilities_1 = requireUtilities();
+  var utilities_1 = requireUtilities$2();
   function StyleToJS(style, options) {
     var output = {};
     if (!style || typeof style !== "string") {
@@ -34987,7 +35352,7 @@ function toString$1(value, options) {
   return one(value, includeImageAlt, includeHtml);
 }
 function one(value, includeImageAlt, includeHtml) {
-  if (node$1(value)) {
+  if (node$2(value)) {
     if ("value" in value) {
       return value.type === "html" && !includeHtml ? "" : value.value;
     }
@@ -35011,7 +35376,7 @@ function all(values, includeImageAlt, includeHtml) {
   }
   return result.join("");
 }
-function node$1(value) {
+function node$2(value) {
   return Boolean(value && typeof value === "object");
 }
 const element = document.createElement("i");
@@ -38866,7 +39231,7 @@ function serializeChunks(chunks, expandTabs) {
   }
   return result.join("");
 }
-function parse$1(options) {
+function parse$2(options) {
   const settings = options || {};
   const constructs2 = (
     /** @type {FullNormalizedExtension} */
@@ -38994,7 +39359,7 @@ function fromMarkdown(value, encoding, options) {
     options = encoding;
     encoding = void 0;
   }
-  return compiler(options)(postprocess(parse$1(options).document().write(preprocess()(value, encoding, true))));
+  return compiler(options)(postprocess(parse$2(options).document().write(preprocess()(value, encoding, true))));
 }
 function compiler(options) {
   const config2 = {
@@ -80459,11 +80824,11 @@ var length = 0;
 var position = 0;
 var character = 0;
 var characters = "";
-function node(value, root2, parent, type, props, children, length2, siblings) {
+function node$1(value, root2, parent, type, props, children, length2, siblings) {
   return { value, root: root2, parent, type, props, children, line, column, length: length2, return: "", siblings };
 }
 function copy(root2, props) {
-  return assign(node("", null, null, "", null, null, 0, root2.siblings), root2, { length: -root2.length }, props);
+  return assign(node$1("", null, null, "", null, null, 0, root2.siblings), root2, { length: -root2.length }, props);
 }
 function lift(root2) {
   while (root2.root)
@@ -80593,9 +80958,9 @@ function identifier(index2) {
   return slice(index2, position);
 }
 function compile(value) {
-  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
+  return dealloc(parse$1("", null, null, null, [""], value = alloc(value), 0, [0], value));
 }
-function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, declarations) {
+function parse$1(value, root2, parent, rule, rules, rulesets, pseudo, points, declarations) {
   var index2 = 0;
   var offset2 = 0;
   var length2 = pseudo;
@@ -80674,7 +81039,7 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
             append(reference2 = ruleset(characters2, root2, parent, index2, offset2, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
             if (character2 === 123)
               if (offset2 === 0)
-                parse(characters2, root2, reference2, reference2, props, rulesets, length2, points, children);
+                parse$1(characters2, root2, reference2, reference2, props, rulesets, length2, points, children);
               else
                 switch (atrule === 99 && charat(characters2, 3) === 110 ? 100 : atrule) {
                   // d l m s
@@ -80682,10 +81047,10 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
                   case 108:
                   case 109:
                   case 115:
-                    parse(value, reference2, reference2, rule && append(ruleset(value, reference2, reference2, 0, 0, rules, points, type, rules, props = [], length2, children), children), rules, children, length2, points, rule ? props : children);
+                    parse$1(value, reference2, reference2, rule && append(ruleset(value, reference2, reference2, 0, 0, rules, points, type, rules, props = [], length2, children), children), rules, children, length2, points, rule ? props : children);
                     break;
                   default:
-                    parse(characters2, reference2, reference2, reference2, [""], children, 0, points, children);
+                    parse$1(characters2, reference2, reference2, reference2, [""], children, 0, points, children);
                 }
         }
         index2 = offset2 = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
@@ -80731,13 +81096,13 @@ function ruleset(value, root2, parent, index2, offset2, rules, points, type, pro
     for (var x2 = 0, y2 = substr(value, post2 + 1, post2 = abs(j2 = points[i])), z2 = value; x2 < size; ++x2)
       if (z2 = trim(j2 > 0 ? rule[x2] + " " + y2 : replace(y2, /&\f/g, rule[x2])))
         props[k2++] = z2;
-  return node(value, root2, parent, offset2 === 0 ? RULESET : type, props, children, length2, siblings);
+  return node$1(value, root2, parent, offset2 === 0 ? RULESET : type, props, children, length2, siblings);
 }
 function comment(value, root2, parent, siblings) {
-  return node(value, root2, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
+  return node$1(value, root2, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
 }
 function declaration(value, root2, parent, length2, siblings) {
-  return node(value, root2, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2, siblings);
+  return node$1(value, root2, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2, siblings);
 }
 function prefix(value, length2, children) {
   switch (hash(value, length2)) {
@@ -81046,8 +81411,8 @@ var unitlessKeys = {
   strokeOpacity: 1,
   strokeWidth: 1
 };
-var define_process_env_default$1 = {};
-var f = "undefined" != typeof process && void 0 !== define_process_env_default$1 && (define_process_env_default$1.REACT_APP_SC_ATTR || define_process_env_default$1.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.15", g = "/*!sc*/\n", S = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default$1 && void 0 !== define_process_env_default$1.REACT_APP_SC_DISABLE_SPEEDY && "" !== define_process_env_default$1.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== define_process_env_default$1.REACT_APP_SC_DISABLE_SPEEDY && define_process_env_default$1.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default$1 && void 0 !== define_process_env_default$1.SC_DISABLE_SPEEDY && "" !== define_process_env_default$1.SC_DISABLE_SPEEDY ? "false" !== define_process_env_default$1.SC_DISABLE_SPEEDY && define_process_env_default$1.SC_DISABLE_SPEEDY : false), b = {}, _ = Object.freeze([]), C = Object.freeze({});
+var define_process_env_default = {};
+var f = "undefined" != typeof process && void 0 !== define_process_env_default && (define_process_env_default.REACT_APP_SC_ATTR || define_process_env_default.SC_ATTR) || "data-styled", m = "active", y = "data-styled-version", v = "6.1.15", g = "/*!sc*/\n", S = "undefined" != typeof window && "HTMLElement" in window, w = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && "" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY && define_process_env_default.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== define_process_env_default && void 0 !== define_process_env_default.SC_DISABLE_SPEEDY && "" !== define_process_env_default.SC_DISABLE_SPEEDY ? "false" !== define_process_env_default.SC_DISABLE_SPEEDY && define_process_env_default.SC_DISABLE_SPEEDY : false), b = {}, _ = Object.freeze([]), C = Object.freeze({});
 function I(e2, t2, n2) {
   return void 0 === n2 && (n2 = C), e2.theme !== n2.theme && e2.theme || t2 || n2.theme;
 }
@@ -84312,7 +84677,7 @@ const AgentAvatar$1 = styled$1(Avatar)(({ theme: theme2 }) => ({
   backgroundColor: "rgba(56, 201, 106, 0.2)",
   color: theme2.palette.primary.main
 }));
-const MessagePreview = styled$1(Typography)({
+const MessagePreview = styled$1("span")({
   display: "block",
   color: "text.secondary",
   maxWidth: "100%",
@@ -84484,7 +84849,7 @@ const ChatSidebar = ({
                         placement: "bottom-start",
                         enterDelay: 1500,
                         leaveDelay: 200,
-                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessagePreview, { variant: "body2", children: truncateMessage(agent.last_message, 60) })
+                        children: /* @__PURE__ */ jsxRuntimeExports.jsx(MessagePreview, { children: truncateMessage(agent.last_message, 60) })
                       }
                     ),
                     agent.last_message_datetime && /* @__PURE__ */ jsxRuntimeExports.jsxs(TimeStampContainer, { children: [
@@ -85626,12 +85991,14 @@ const CardIcon = styled$1(FontAwesomeIcon)({
   opacity: 0.8,
   color: "#f2f2f3"
 });
-const LabelText$1 = styled$1(Box)(({ theme: theme2 }) => ({
+const LabelText$1 = styled$1("span")(({ theme: theme2 }) => ({
   color: theme2.palette.text.secondary,
-  marginRight: theme2.spacing(1)
+  marginRight: theme2.spacing(1),
+  display: "inline-block"
 }));
-const ValueText = styled$1(Box)({
-  fontWeight: 500
+const ValueText = styled$1("span")({
+  fontWeight: 500,
+  display: "inline-block"
 });
 const MonospaceValueText = styled$1(ValueText)({
   fontFamily: "monospace"
@@ -86046,7 +86413,7 @@ const AgentAvatar = styled$1(Avatar)(({ theme: theme2 }) => ({
   backgroundColor: "rgba(56, 201, 106, 0.2)",
   color: theme2.palette.primary.main
 }));
-const CreationDateText = styled$1(Typography)({
+const CreationDateText = styled$1("span")({
   display: "flex",
   alignItems: "center",
   fontSize: "0.75rem",
@@ -86054,9 +86421,11 @@ const CreationDateText = styled$1(Typography)({
   marginTop: 4,
   gap: 4
 });
-const DescriptionText$1 = styled$1(Typography)({
+const DescriptionText$1 = styled$1("span")({
   maxWidth: "100%",
-  fontSize: "0.75rem"
+  fontSize: "0.75rem",
+  display: "block",
+  color: "text.secondary"
 });
 const formatDate = (dateString) => {
   if (!dateString) return "Unknown date";
@@ -86394,6 +86763,107 @@ const AgentsPage = () => {
     ] }) })
   ] });
 };
+const BannerContainer = styled$1(Box)(() => ({
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  zIndex: 2200,
+  // High z-index to ensure it's above other content
+  width: "100%"
+}));
+const ConnectivityBanner = ({
+  autoCheck = true
+}) => {
+  const {
+    hostingProvider,
+    shouldCheckInternet,
+    hasConnectivityIssue,
+    connectivityIssue,
+    refetchServerStatus,
+    refetchInternetStatus
+  } = useConnectivityStatus();
+  const [showBanner, setShowBanner] = reactExports.useState(false);
+  const [internetBannerDismissed, setInternetBannerDismissed] = reactExports.useState(false);
+  reactExports.useEffect(() => {
+    if (connectivityIssue === "internet_offline") {
+      setShowBanner(hasConnectivityIssue && !internetBannerDismissed);
+    } else {
+      setShowBanner(hasConnectivityIssue);
+    }
+  }, [hasConnectivityIssue, connectivityIssue, internetBannerDismissed]);
+  reactExports.useEffect(() => {
+    if (!hasConnectivityIssue || connectivityIssue !== "internet_offline") {
+      setInternetBannerDismissed(false);
+    }
+  }, [hasConnectivityIssue, connectivityIssue]);
+  reactExports.useEffect(() => {
+    const handleOffline = () => {
+      if (shouldCheckInternet) {
+        setShowBanner(true);
+        setInternetBannerDismissed(false);
+      }
+    };
+    const handleOnline = () => {
+      setShowBanner(false);
+      setInternetBannerDismissed(false);
+    };
+    window.addEventListener("offline", handleOffline);
+    window.addEventListener("online", handleOnline);
+    return () => {
+      window.removeEventListener("offline", handleOffline);
+      window.removeEventListener("online", handleOnline);
+    };
+  }, [shouldCheckInternet]);
+  reactExports.useEffect(() => {
+    if (autoCheck) {
+      refetchServerStatus();
+      const intervalId = setInterval(() => {
+        refetchServerStatus();
+      }, 3e3);
+      return () => clearInterval(intervalId);
+    }
+    return void 0;
+  }, [autoCheck, refetchServerStatus]);
+  const handleRetry = () => {
+    refetchServerStatus();
+    if (shouldCheckInternet) {
+      refetchInternetStatus();
+    }
+  };
+  const handleDismiss = () => {
+    setInternetBannerDismissed(true);
+    setShowBanner(false);
+  };
+  if (!showBanner) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BannerContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Alert,
+    {
+      severity: connectivityIssue === "internet_offline" ? "warning" : "error",
+      action: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { color: "inherit", size: "small", onClick: handleRetry, children: "Retry" }),
+        connectivityIssue === "internet_offline" && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Button,
+          {
+            "aria-label": "dismiss",
+            color: "inherit",
+            size: "small",
+            onClick: handleDismiss,
+            children: "Dismiss"
+          }
+        )
+      ] }),
+      sx: { borderRadius: 0 },
+      children: connectivityIssue === "server_offline" ? /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "The server is offline. The interface will not function properly until the server is back online." }) : connectivityIssue === "internet_offline" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        "You are offline. Your configured hosting provider (",
+        hostingProvider,
+        ") requires an internet connection."
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: "A connectivity issue has been detected." })
+    }
+  ) });
+};
 const useInitializeModels = () => {
   const { isLoading, error, refreshModels } = useModels();
   reactExports.useEffect(() => {
@@ -86408,9 +86878,2172 @@ const ModelsInitializer = () => {
   useInitializeModels();
   return null;
 };
-var define_process_env_default = {};
+var lib$3 = {};
+var htmlToDom = {};
+var domparser = {};
+var utilities$1 = {};
+var lib$2 = {};
+var lib$1 = {};
+var hasRequiredLib$3;
+function requireLib$3() {
+  if (hasRequiredLib$3) return lib$1;
+  hasRequiredLib$3 = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Doctype = exports.CDATA = exports.Tag = exports.Style = exports.Script = exports.Comment = exports.Directive = exports.Text = exports.Root = exports.isTag = exports.ElementType = void 0;
+    var ElementType;
+    (function(ElementType2) {
+      ElementType2["Root"] = "root";
+      ElementType2["Text"] = "text";
+      ElementType2["Directive"] = "directive";
+      ElementType2["Comment"] = "comment";
+      ElementType2["Script"] = "script";
+      ElementType2["Style"] = "style";
+      ElementType2["Tag"] = "tag";
+      ElementType2["CDATA"] = "cdata";
+      ElementType2["Doctype"] = "doctype";
+    })(ElementType = exports.ElementType || (exports.ElementType = {}));
+    function isTag(elem) {
+      return elem.type === ElementType.Tag || elem.type === ElementType.Script || elem.type === ElementType.Style;
+    }
+    exports.isTag = isTag;
+    exports.Root = ElementType.Root;
+    exports.Text = ElementType.Text;
+    exports.Directive = ElementType.Directive;
+    exports.Comment = ElementType.Comment;
+    exports.Script = ElementType.Script;
+    exports.Style = ElementType.Style;
+    exports.Tag = ElementType.Tag;
+    exports.CDATA = ElementType.CDATA;
+    exports.Doctype = ElementType.Doctype;
+  })(lib$1);
+  return lib$1;
+}
+var node = {};
+var hasRequiredNode;
+function requireNode() {
+  if (hasRequiredNode) return node;
+  hasRequiredNode = 1;
+  var __extends = node && node.__extends || /* @__PURE__ */ function() {
+    var extendStatics = function(d, b2) {
+      extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d2, b3) {
+        d2.__proto__ = b3;
+      } || function(d2, b3) {
+        for (var p in b3) if (Object.prototype.hasOwnProperty.call(b3, p)) d2[p] = b3[p];
+      };
+      return extendStatics(d, b2);
+    };
+    return function(d, b2) {
+      if (typeof b2 !== "function" && b2 !== null)
+        throw new TypeError("Class extends value " + String(b2) + " is not a constructor or null");
+      extendStatics(d, b2);
+      function __() {
+        this.constructor = d;
+      }
+      d.prototype = b2 === null ? Object.create(b2) : (__.prototype = b2.prototype, new __());
+    };
+  }();
+  var __assign2 = node && node.__assign || function() {
+    __assign2 = Object.assign || function(t) {
+      for (var s, i = 1, n = arguments.length; i < n; i++) {
+        s = arguments[i];
+        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+      }
+      return t;
+    };
+    return __assign2.apply(this, arguments);
+  };
+  Object.defineProperty(node, "__esModule", { value: true });
+  node.cloneNode = node.hasChildren = node.isDocument = node.isDirective = node.isComment = node.isText = node.isCDATA = node.isTag = node.Element = node.Document = node.CDATA = node.NodeWithChildren = node.ProcessingInstruction = node.Comment = node.Text = node.DataNode = node.Node = void 0;
+  var domelementtype_1 = /* @__PURE__ */ requireLib$3();
+  var Node = (
+    /** @class */
+    function() {
+      function Node2() {
+        this.parent = null;
+        this.prev = null;
+        this.next = null;
+        this.startIndex = null;
+        this.endIndex = null;
+      }
+      Object.defineProperty(Node2.prototype, "parentNode", {
+        // Read-write aliases for properties
+        /**
+         * Same as {@link parent}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.parent;
+        },
+        set: function(parent) {
+          this.parent = parent;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(Node2.prototype, "previousSibling", {
+        /**
+         * Same as {@link prev}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.prev;
+        },
+        set: function(prev2) {
+          this.prev = prev2;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(Node2.prototype, "nextSibling", {
+        /**
+         * Same as {@link next}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.next;
+        },
+        set: function(next2) {
+          this.next = next2;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Node2.prototype.cloneNode = function(recursive) {
+        if (recursive === void 0) {
+          recursive = false;
+        }
+        return cloneNode(this, recursive);
+      };
+      return Node2;
+    }()
+  );
+  node.Node = Node;
+  var DataNode = (
+    /** @class */
+    function(_super) {
+      __extends(DataNode2, _super);
+      function DataNode2(data) {
+        var _this = _super.call(this) || this;
+        _this.data = data;
+        return _this;
+      }
+      Object.defineProperty(DataNode2.prototype, "nodeValue", {
+        /**
+         * Same as {@link data}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.data;
+        },
+        set: function(data) {
+          this.data = data;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return DataNode2;
+    }(Node)
+  );
+  node.DataNode = DataNode;
+  var Text = (
+    /** @class */
+    function(_super) {
+      __extends(Text2, _super);
+      function Text2() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = domelementtype_1.ElementType.Text;
+        return _this;
+      }
+      Object.defineProperty(Text2.prototype, "nodeType", {
+        get: function() {
+          return 3;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return Text2;
+    }(DataNode)
+  );
+  node.Text = Text;
+  var Comment = (
+    /** @class */
+    function(_super) {
+      __extends(Comment2, _super);
+      function Comment2() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = domelementtype_1.ElementType.Comment;
+        return _this;
+      }
+      Object.defineProperty(Comment2.prototype, "nodeType", {
+        get: function() {
+          return 8;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return Comment2;
+    }(DataNode)
+  );
+  node.Comment = Comment;
+  var ProcessingInstruction = (
+    /** @class */
+    function(_super) {
+      __extends(ProcessingInstruction2, _super);
+      function ProcessingInstruction2(name2, data) {
+        var _this = _super.call(this, data) || this;
+        _this.name = name2;
+        _this.type = domelementtype_1.ElementType.Directive;
+        return _this;
+      }
+      Object.defineProperty(ProcessingInstruction2.prototype, "nodeType", {
+        get: function() {
+          return 1;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return ProcessingInstruction2;
+    }(DataNode)
+  );
+  node.ProcessingInstruction = ProcessingInstruction;
+  var NodeWithChildren = (
+    /** @class */
+    function(_super) {
+      __extends(NodeWithChildren2, _super);
+      function NodeWithChildren2(children) {
+        var _this = _super.call(this) || this;
+        _this.children = children;
+        return _this;
+      }
+      Object.defineProperty(NodeWithChildren2.prototype, "firstChild", {
+        // Aliases
+        /** First child of the node. */
+        get: function() {
+          var _a;
+          return (_a = this.children[0]) !== null && _a !== void 0 ? _a : null;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(NodeWithChildren2.prototype, "lastChild", {
+        /** Last child of the node. */
+        get: function() {
+          return this.children.length > 0 ? this.children[this.children.length - 1] : null;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(NodeWithChildren2.prototype, "childNodes", {
+        /**
+         * Same as {@link children}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.children;
+        },
+        set: function(children) {
+          this.children = children;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return NodeWithChildren2;
+    }(Node)
+  );
+  node.NodeWithChildren = NodeWithChildren;
+  var CDATA = (
+    /** @class */
+    function(_super) {
+      __extends(CDATA2, _super);
+      function CDATA2() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = domelementtype_1.ElementType.CDATA;
+        return _this;
+      }
+      Object.defineProperty(CDATA2.prototype, "nodeType", {
+        get: function() {
+          return 4;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return CDATA2;
+    }(NodeWithChildren)
+  );
+  node.CDATA = CDATA;
+  var Document = (
+    /** @class */
+    function(_super) {
+      __extends(Document2, _super);
+      function Document2() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.type = domelementtype_1.ElementType.Root;
+        return _this;
+      }
+      Object.defineProperty(Document2.prototype, "nodeType", {
+        get: function() {
+          return 9;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return Document2;
+    }(NodeWithChildren)
+  );
+  node.Document = Document;
+  var Element2 = (
+    /** @class */
+    function(_super) {
+      __extends(Element3, _super);
+      function Element3(name2, attribs, children, type) {
+        if (children === void 0) {
+          children = [];
+        }
+        if (type === void 0) {
+          type = name2 === "script" ? domelementtype_1.ElementType.Script : name2 === "style" ? domelementtype_1.ElementType.Style : domelementtype_1.ElementType.Tag;
+        }
+        var _this = _super.call(this, children) || this;
+        _this.name = name2;
+        _this.attribs = attribs;
+        _this.type = type;
+        return _this;
+      }
+      Object.defineProperty(Element3.prototype, "nodeType", {
+        get: function() {
+          return 1;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(Element3.prototype, "tagName", {
+        // DOM Level 1 aliases
+        /**
+         * Same as {@link name}.
+         * [DOM spec](https://dom.spec.whatwg.org)-compatible alias.
+         */
+        get: function() {
+          return this.name;
+        },
+        set: function(name2) {
+          this.name = name2;
+        },
+        enumerable: false,
+        configurable: true
+      });
+      Object.defineProperty(Element3.prototype, "attributes", {
+        get: function() {
+          var _this = this;
+          return Object.keys(this.attribs).map(function(name2) {
+            var _a, _b;
+            return {
+              name: name2,
+              value: _this.attribs[name2],
+              namespace: (_a = _this["x-attribsNamespace"]) === null || _a === void 0 ? void 0 : _a[name2],
+              prefix: (_b = _this["x-attribsPrefix"]) === null || _b === void 0 ? void 0 : _b[name2]
+            };
+          });
+        },
+        enumerable: false,
+        configurable: true
+      });
+      return Element3;
+    }(NodeWithChildren)
+  );
+  node.Element = Element2;
+  function isTag(node2) {
+    return (0, domelementtype_1.isTag)(node2);
+  }
+  node.isTag = isTag;
+  function isCDATA(node2) {
+    return node2.type === domelementtype_1.ElementType.CDATA;
+  }
+  node.isCDATA = isCDATA;
+  function isText(node2) {
+    return node2.type === domelementtype_1.ElementType.Text;
+  }
+  node.isText = isText;
+  function isComment(node2) {
+    return node2.type === domelementtype_1.ElementType.Comment;
+  }
+  node.isComment = isComment;
+  function isDirective(node2) {
+    return node2.type === domelementtype_1.ElementType.Directive;
+  }
+  node.isDirective = isDirective;
+  function isDocument(node2) {
+    return node2.type === domelementtype_1.ElementType.Root;
+  }
+  node.isDocument = isDocument;
+  function hasChildren(node2) {
+    return Object.prototype.hasOwnProperty.call(node2, "children");
+  }
+  node.hasChildren = hasChildren;
+  function cloneNode(node2, recursive) {
+    if (recursive === void 0) {
+      recursive = false;
+    }
+    var result;
+    if (isText(node2)) {
+      result = new Text(node2.data);
+    } else if (isComment(node2)) {
+      result = new Comment(node2.data);
+    } else if (isTag(node2)) {
+      var children = recursive ? cloneChildren(node2.children) : [];
+      var clone_1 = new Element2(node2.name, __assign2({}, node2.attribs), children);
+      children.forEach(function(child) {
+        return child.parent = clone_1;
+      });
+      if (node2.namespace != null) {
+        clone_1.namespace = node2.namespace;
+      }
+      if (node2["x-attribsNamespace"]) {
+        clone_1["x-attribsNamespace"] = __assign2({}, node2["x-attribsNamespace"]);
+      }
+      if (node2["x-attribsPrefix"]) {
+        clone_1["x-attribsPrefix"] = __assign2({}, node2["x-attribsPrefix"]);
+      }
+      result = clone_1;
+    } else if (isCDATA(node2)) {
+      var children = recursive ? cloneChildren(node2.children) : [];
+      var clone_2 = new CDATA(children);
+      children.forEach(function(child) {
+        return child.parent = clone_2;
+      });
+      result = clone_2;
+    } else if (isDocument(node2)) {
+      var children = recursive ? cloneChildren(node2.children) : [];
+      var clone_3 = new Document(children);
+      children.forEach(function(child) {
+        return child.parent = clone_3;
+      });
+      if (node2["x-mode"]) {
+        clone_3["x-mode"] = node2["x-mode"];
+      }
+      result = clone_3;
+    } else if (isDirective(node2)) {
+      var instruction = new ProcessingInstruction(node2.name, node2.data);
+      if (node2["x-name"] != null) {
+        instruction["x-name"] = node2["x-name"];
+        instruction["x-publicId"] = node2["x-publicId"];
+        instruction["x-systemId"] = node2["x-systemId"];
+      }
+      result = instruction;
+    } else {
+      throw new Error("Not implemented yet: ".concat(node2.type));
+    }
+    result.startIndex = node2.startIndex;
+    result.endIndex = node2.endIndex;
+    if (node2.sourceCodeLocation != null) {
+      result.sourceCodeLocation = node2.sourceCodeLocation;
+    }
+    return result;
+  }
+  node.cloneNode = cloneNode;
+  function cloneChildren(childs) {
+    var children = childs.map(function(child) {
+      return cloneNode(child, true);
+    });
+    for (var i = 1; i < children.length; i++) {
+      children[i].prev = children[i - 1];
+      children[i - 1].next = children[i];
+    }
+    return children;
+  }
+  return node;
+}
+var hasRequiredLib$2;
+function requireLib$2() {
+  if (hasRequiredLib$2) return lib$2;
+  hasRequiredLib$2 = 1;
+  (function(exports) {
+    var __createBinding = lib$2 && lib$2.__createBinding || (Object.create ? function(o, m2, k2, k22) {
+      if (k22 === void 0) k22 = k2;
+      var desc = Object.getOwnPropertyDescriptor(m2, k2);
+      if (!desc || ("get" in desc ? !m2.__esModule : desc.writable || desc.configurable)) {
+        desc = { enumerable: true, get: function() {
+          return m2[k2];
+        } };
+      }
+      Object.defineProperty(o, k22, desc);
+    } : function(o, m2, k2, k22) {
+      if (k22 === void 0) k22 = k2;
+      o[k22] = m2[k2];
+    });
+    var __exportStar = lib$2 && lib$2.__exportStar || function(m2, exports2) {
+      for (var p in m2) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports2, p)) __createBinding(exports2, m2, p);
+    };
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DomHandler = void 0;
+    var domelementtype_1 = /* @__PURE__ */ requireLib$3();
+    var node_js_1 = /* @__PURE__ */ requireNode();
+    __exportStar(/* @__PURE__ */ requireNode(), exports);
+    var defaultOpts = {
+      withStartIndices: false,
+      withEndIndices: false,
+      xmlMode: false
+    };
+    var DomHandler = (
+      /** @class */
+      function() {
+        function DomHandler2(callback, options, elementCB) {
+          this.dom = [];
+          this.root = new node_js_1.Document(this.dom);
+          this.done = false;
+          this.tagStack = [this.root];
+          this.lastNode = null;
+          this.parser = null;
+          if (typeof options === "function") {
+            elementCB = options;
+            options = defaultOpts;
+          }
+          if (typeof callback === "object") {
+            options = callback;
+            callback = void 0;
+          }
+          this.callback = callback !== null && callback !== void 0 ? callback : null;
+          this.options = options !== null && options !== void 0 ? options : defaultOpts;
+          this.elementCB = elementCB !== null && elementCB !== void 0 ? elementCB : null;
+        }
+        DomHandler2.prototype.onparserinit = function(parser) {
+          this.parser = parser;
+        };
+        DomHandler2.prototype.onreset = function() {
+          this.dom = [];
+          this.root = new node_js_1.Document(this.dom);
+          this.done = false;
+          this.tagStack = [this.root];
+          this.lastNode = null;
+          this.parser = null;
+        };
+        DomHandler2.prototype.onend = function() {
+          if (this.done)
+            return;
+          this.done = true;
+          this.parser = null;
+          this.handleCallback(null);
+        };
+        DomHandler2.prototype.onerror = function(error) {
+          this.handleCallback(error);
+        };
+        DomHandler2.prototype.onclosetag = function() {
+          this.lastNode = null;
+          var elem = this.tagStack.pop();
+          if (this.options.withEndIndices) {
+            elem.endIndex = this.parser.endIndex;
+          }
+          if (this.elementCB)
+            this.elementCB(elem);
+        };
+        DomHandler2.prototype.onopentag = function(name2, attribs) {
+          var type = this.options.xmlMode ? domelementtype_1.ElementType.Tag : void 0;
+          var element2 = new node_js_1.Element(name2, attribs, void 0, type);
+          this.addNode(element2);
+          this.tagStack.push(element2);
+        };
+        DomHandler2.prototype.ontext = function(data) {
+          var lastNode = this.lastNode;
+          if (lastNode && lastNode.type === domelementtype_1.ElementType.Text) {
+            lastNode.data += data;
+            if (this.options.withEndIndices) {
+              lastNode.endIndex = this.parser.endIndex;
+            }
+          } else {
+            var node2 = new node_js_1.Text(data);
+            this.addNode(node2);
+            this.lastNode = node2;
+          }
+        };
+        DomHandler2.prototype.oncomment = function(data) {
+          if (this.lastNode && this.lastNode.type === domelementtype_1.ElementType.Comment) {
+            this.lastNode.data += data;
+            return;
+          }
+          var node2 = new node_js_1.Comment(data);
+          this.addNode(node2);
+          this.lastNode = node2;
+        };
+        DomHandler2.prototype.oncommentend = function() {
+          this.lastNode = null;
+        };
+        DomHandler2.prototype.oncdatastart = function() {
+          var text2 = new node_js_1.Text("");
+          var node2 = new node_js_1.CDATA([text2]);
+          this.addNode(node2);
+          text2.parent = node2;
+          this.lastNode = text2;
+        };
+        DomHandler2.prototype.oncdataend = function() {
+          this.lastNode = null;
+        };
+        DomHandler2.prototype.onprocessinginstruction = function(name2, data) {
+          var node2 = new node_js_1.ProcessingInstruction(name2, data);
+          this.addNode(node2);
+        };
+        DomHandler2.prototype.handleCallback = function(error) {
+          if (typeof this.callback === "function") {
+            this.callback(error, this.dom);
+          } else if (error) {
+            throw error;
+          }
+        };
+        DomHandler2.prototype.addNode = function(node2) {
+          var parent = this.tagStack[this.tagStack.length - 1];
+          var previousSibling = parent.children[parent.children.length - 1];
+          if (this.options.withStartIndices) {
+            node2.startIndex = this.parser.startIndex;
+          }
+          if (this.options.withEndIndices) {
+            node2.endIndex = this.parser.endIndex;
+          }
+          parent.children.push(node2);
+          if (previousSibling) {
+            node2.prev = previousSibling;
+            previousSibling.next = node2;
+          }
+          node2.parent = parent;
+          this.lastNode = null;
+        };
+        return DomHandler2;
+      }()
+    );
+    exports.DomHandler = DomHandler;
+    exports.default = DomHandler;
+  })(lib$2);
+  return lib$2;
+}
+var constants = {};
+var hasRequiredConstants;
+function requireConstants() {
+  if (hasRequiredConstants) return constants;
+  hasRequiredConstants = 1;
+  (function(exports) {
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CARRIAGE_RETURN_PLACEHOLDER_REGEX = exports.CARRIAGE_RETURN_PLACEHOLDER = exports.CARRIAGE_RETURN_REGEX = exports.CARRIAGE_RETURN = exports.CASE_SENSITIVE_TAG_NAMES_MAP = exports.CASE_SENSITIVE_TAG_NAMES = void 0;
+    exports.CASE_SENSITIVE_TAG_NAMES = [
+      "animateMotion",
+      "animateTransform",
+      "clipPath",
+      "feBlend",
+      "feColorMatrix",
+      "feComponentTransfer",
+      "feComposite",
+      "feConvolveMatrix",
+      "feDiffuseLighting",
+      "feDisplacementMap",
+      "feDropShadow",
+      "feFlood",
+      "feFuncA",
+      "feFuncB",
+      "feFuncG",
+      "feFuncR",
+      "feGaussianBlur",
+      "feImage",
+      "feMerge",
+      "feMergeNode",
+      "feMorphology",
+      "feOffset",
+      "fePointLight",
+      "feSpecularLighting",
+      "feSpotLight",
+      "feTile",
+      "feTurbulence",
+      "foreignObject",
+      "linearGradient",
+      "radialGradient",
+      "textPath"
+    ];
+    exports.CASE_SENSITIVE_TAG_NAMES_MAP = exports.CASE_SENSITIVE_TAG_NAMES.reduce(function(accumulator, tagName) {
+      accumulator[tagName.toLowerCase()] = tagName;
+      return accumulator;
+    }, {});
+    exports.CARRIAGE_RETURN = "\r";
+    exports.CARRIAGE_RETURN_REGEX = new RegExp(exports.CARRIAGE_RETURN, "g");
+    exports.CARRIAGE_RETURN_PLACEHOLDER = "__HTML_DOM_PARSER_CARRIAGE_RETURN_PLACEHOLDER_".concat(Date.now(), "__");
+    exports.CARRIAGE_RETURN_PLACEHOLDER_REGEX = new RegExp(exports.CARRIAGE_RETURN_PLACEHOLDER, "g");
+  })(constants);
+  return constants;
+}
+var hasRequiredUtilities$1;
+function requireUtilities$1() {
+  if (hasRequiredUtilities$1) return utilities$1;
+  hasRequiredUtilities$1 = 1;
+  Object.defineProperty(utilities$1, "__esModule", { value: true });
+  utilities$1.formatAttributes = formatAttributes;
+  utilities$1.escapeSpecialCharacters = escapeSpecialCharacters;
+  utilities$1.revertEscapedCharacters = revertEscapedCharacters;
+  utilities$1.formatDOM = formatDOM;
+  var domhandler_1 = /* @__PURE__ */ requireLib$2();
+  var constants_1 = requireConstants();
+  function getCaseSensitiveTagName(tagName) {
+    return constants_1.CASE_SENSITIVE_TAG_NAMES_MAP[tagName];
+  }
+  function formatAttributes(attributes) {
+    var map = {};
+    var index2 = 0;
+    var attributesLength = attributes.length;
+    for (; index2 < attributesLength; index2++) {
+      var attribute = attributes[index2];
+      map[attribute.name] = attribute.value;
+    }
+    return map;
+  }
+  function formatTagName(tagName) {
+    tagName = tagName.toLowerCase();
+    var caseSensitiveTagName = getCaseSensitiveTagName(tagName);
+    if (caseSensitiveTagName) {
+      return caseSensitiveTagName;
+    }
+    return tagName;
+  }
+  function escapeSpecialCharacters(html2) {
+    return html2.replace(constants_1.CARRIAGE_RETURN_REGEX, constants_1.CARRIAGE_RETURN_PLACEHOLDER);
+  }
+  function revertEscapedCharacters(text2) {
+    return text2.replace(constants_1.CARRIAGE_RETURN_PLACEHOLDER_REGEX, constants_1.CARRIAGE_RETURN);
+  }
+  function formatDOM(nodes, parent, directive) {
+    if (parent === void 0) {
+      parent = null;
+    }
+    var domNodes = [];
+    var current;
+    var index2 = 0;
+    var nodesLength = nodes.length;
+    for (; index2 < nodesLength; index2++) {
+      var node2 = nodes[index2];
+      switch (node2.nodeType) {
+        case 1: {
+          var tagName = formatTagName(node2.nodeName);
+          current = new domhandler_1.Element(tagName, formatAttributes(node2.attributes));
+          current.children = formatDOM(
+            // template children are on content
+            tagName === "template" ? node2.content.childNodes : node2.childNodes,
+            current
+          );
+          break;
+        }
+        case 3:
+          current = new domhandler_1.Text(revertEscapedCharacters(node2.nodeValue));
+          break;
+        case 8:
+          current = new domhandler_1.Comment(node2.nodeValue);
+          break;
+        default:
+          continue;
+      }
+      var prev2 = domNodes[index2 - 1] || null;
+      if (prev2) {
+        prev2.next = current;
+      }
+      current.parent = parent;
+      current.prev = prev2;
+      current.next = null;
+      domNodes.push(current);
+    }
+    if (directive) {
+      current = new domhandler_1.ProcessingInstruction(directive.substring(0, directive.indexOf(" ")).toLowerCase(), directive);
+      current.next = domNodes[0] || null;
+      current.parent = parent;
+      domNodes.unshift(current);
+      if (domNodes[1]) {
+        domNodes[1].prev = domNodes[0];
+      }
+    }
+    return domNodes;
+  }
+  return utilities$1;
+}
+var hasRequiredDomparser;
+function requireDomparser() {
+  if (hasRequiredDomparser) return domparser;
+  hasRequiredDomparser = 1;
+  Object.defineProperty(domparser, "__esModule", { value: true });
+  domparser.default = domparser$1;
+  var utilities_1 = requireUtilities$1();
+  var HTML = "html";
+  var HEAD = "head";
+  var BODY = "body";
+  var FIRST_TAG_REGEX = /<([a-zA-Z]+[0-9]?)/;
+  var HEAD_TAG_REGEX = /<head[^]*>/i;
+  var BODY_TAG_REGEX = /<body[^]*>/i;
+  var parseFromDocument = function(html2, tagName) {
+    throw new Error("This browser does not support `document.implementation.createHTMLDocument`");
+  };
+  var parseFromString = function(html2, tagName) {
+    throw new Error("This browser does not support `DOMParser.prototype.parseFromString`");
+  };
+  var DOMParser = typeof window === "object" && window.DOMParser;
+  if (typeof DOMParser === "function") {
+    var domParser_1 = new DOMParser();
+    var mimeType_1 = "text/html";
+    parseFromString = function(html2, tagName) {
+      if (tagName) {
+        html2 = "<".concat(tagName, ">").concat(html2, "</").concat(tagName, ">");
+      }
+      return domParser_1.parseFromString(html2, mimeType_1);
+    };
+    parseFromDocument = parseFromString;
+  }
+  if (typeof document === "object" && document.implementation) {
+    var htmlDocument_1 = document.implementation.createHTMLDocument();
+    parseFromDocument = function(html2, tagName) {
+      if (tagName) {
+        var element2 = htmlDocument_1.documentElement.querySelector(tagName);
+        if (element2) {
+          element2.innerHTML = html2;
+        }
+        return htmlDocument_1;
+      }
+      htmlDocument_1.documentElement.innerHTML = html2;
+      return htmlDocument_1;
+    };
+  }
+  var template = typeof document === "object" && document.createElement("template");
+  var parseFromTemplate;
+  if (template && template.content) {
+    parseFromTemplate = function(html2) {
+      template.innerHTML = html2;
+      return template.content.childNodes;
+    };
+  }
+  function domparser$1(html2) {
+    var _a, _b;
+    html2 = (0, utilities_1.escapeSpecialCharacters)(html2);
+    var match2 = html2.match(FIRST_TAG_REGEX);
+    var firstTagName = match2 && match2[1] ? match2[1].toLowerCase() : "";
+    switch (firstTagName) {
+      case HTML: {
+        var doc = parseFromString(html2);
+        if (!HEAD_TAG_REGEX.test(html2)) {
+          var element2 = doc.querySelector(HEAD);
+          (_a = element2 === null || element2 === void 0 ? void 0 : element2.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(element2);
+        }
+        if (!BODY_TAG_REGEX.test(html2)) {
+          var element2 = doc.querySelector(BODY);
+          (_b = element2 === null || element2 === void 0 ? void 0 : element2.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(element2);
+        }
+        return doc.querySelectorAll(HTML);
+      }
+      case HEAD:
+      case BODY: {
+        var elements = parseFromDocument(html2).querySelectorAll(firstTagName);
+        if (BODY_TAG_REGEX.test(html2) && HEAD_TAG_REGEX.test(html2)) {
+          return elements[0].parentNode.childNodes;
+        }
+        return elements;
+      }
+      // low-level tag or text
+      default: {
+        if (parseFromTemplate) {
+          return parseFromTemplate(html2);
+        }
+        var element2 = parseFromDocument(html2, BODY).querySelector(BODY);
+        return element2.childNodes;
+      }
+    }
+  }
+  return domparser;
+}
+var hasRequiredHtmlToDom;
+function requireHtmlToDom() {
+  if (hasRequiredHtmlToDom) return htmlToDom;
+  hasRequiredHtmlToDom = 1;
+  var __importDefault = htmlToDom && htmlToDom.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : { "default": mod };
+  };
+  Object.defineProperty(htmlToDom, "__esModule", { value: true });
+  htmlToDom.default = HTMLDOMParser;
+  var domparser_1 = __importDefault(requireDomparser());
+  var utilities_1 = requireUtilities$1();
+  var DIRECTIVE_REGEX = /<(![a-zA-Z\s]+)>/;
+  function HTMLDOMParser(html2) {
+    if (typeof html2 !== "string") {
+      throw new TypeError("First argument must be a string");
+    }
+    if (!html2) {
+      return [];
+    }
+    var match2 = html2.match(DIRECTIVE_REGEX);
+    var directive = match2 ? match2[1] : void 0;
+    return (0, utilities_1.formatDOM)((0, domparser_1.default)(html2), null, directive);
+  }
+  return htmlToDom;
+}
+var attributesToProps = {};
+var lib = {};
+var possibleStandardNamesOptimized = {};
+var hasRequiredPossibleStandardNamesOptimized;
+function requirePossibleStandardNamesOptimized() {
+  if (hasRequiredPossibleStandardNamesOptimized) return possibleStandardNamesOptimized;
+  hasRequiredPossibleStandardNamesOptimized = 1;
+  var SAME = 0;
+  possibleStandardNamesOptimized.SAME = SAME;
+  var CAMELCASE = 1;
+  possibleStandardNamesOptimized.CAMELCASE = CAMELCASE;
+  possibleStandardNamesOptimized.possibleStandardNames = {
+    accept: 0,
+    acceptCharset: 1,
+    "accept-charset": "acceptCharset",
+    accessKey: 1,
+    action: 0,
+    allowFullScreen: 1,
+    alt: 0,
+    as: 0,
+    async: 0,
+    autoCapitalize: 1,
+    autoComplete: 1,
+    autoCorrect: 1,
+    autoFocus: 1,
+    autoPlay: 1,
+    autoSave: 1,
+    capture: 0,
+    cellPadding: 1,
+    cellSpacing: 1,
+    challenge: 0,
+    charSet: 1,
+    checked: 0,
+    children: 0,
+    cite: 0,
+    class: "className",
+    classID: 1,
+    className: 1,
+    cols: 0,
+    colSpan: 1,
+    content: 0,
+    contentEditable: 1,
+    contextMenu: 1,
+    controls: 0,
+    controlsList: 1,
+    coords: 0,
+    crossOrigin: 1,
+    dangerouslySetInnerHTML: 1,
+    data: 0,
+    dateTime: 1,
+    default: 0,
+    defaultChecked: 1,
+    defaultValue: 1,
+    defer: 0,
+    dir: 0,
+    disabled: 0,
+    disablePictureInPicture: 1,
+    disableRemotePlayback: 1,
+    download: 0,
+    draggable: 0,
+    encType: 1,
+    enterKeyHint: 1,
+    for: "htmlFor",
+    form: 0,
+    formMethod: 1,
+    formAction: 1,
+    formEncType: 1,
+    formNoValidate: 1,
+    formTarget: 1,
+    frameBorder: 1,
+    headers: 0,
+    height: 0,
+    hidden: 0,
+    high: 0,
+    href: 0,
+    hrefLang: 1,
+    htmlFor: 1,
+    httpEquiv: 1,
+    "http-equiv": "httpEquiv",
+    icon: 0,
+    id: 0,
+    innerHTML: 1,
+    inputMode: 1,
+    integrity: 0,
+    is: 0,
+    itemID: 1,
+    itemProp: 1,
+    itemRef: 1,
+    itemScope: 1,
+    itemType: 1,
+    keyParams: 1,
+    keyType: 1,
+    kind: 0,
+    label: 0,
+    lang: 0,
+    list: 0,
+    loop: 0,
+    low: 0,
+    manifest: 0,
+    marginWidth: 1,
+    marginHeight: 1,
+    max: 0,
+    maxLength: 1,
+    media: 0,
+    mediaGroup: 1,
+    method: 0,
+    min: 0,
+    minLength: 1,
+    multiple: 0,
+    muted: 0,
+    name: 0,
+    noModule: 1,
+    nonce: 0,
+    noValidate: 1,
+    open: 0,
+    optimum: 0,
+    pattern: 0,
+    placeholder: 0,
+    playsInline: 1,
+    poster: 0,
+    preload: 0,
+    profile: 0,
+    radioGroup: 1,
+    readOnly: 1,
+    referrerPolicy: 1,
+    rel: 0,
+    required: 0,
+    reversed: 0,
+    role: 0,
+    rows: 0,
+    rowSpan: 1,
+    sandbox: 0,
+    scope: 0,
+    scoped: 0,
+    scrolling: 0,
+    seamless: 0,
+    selected: 0,
+    shape: 0,
+    size: 0,
+    sizes: 0,
+    span: 0,
+    spellCheck: 1,
+    src: 0,
+    srcDoc: 1,
+    srcLang: 1,
+    srcSet: 1,
+    start: 0,
+    step: 0,
+    style: 0,
+    summary: 0,
+    tabIndex: 1,
+    target: 0,
+    title: 0,
+    type: 0,
+    useMap: 1,
+    value: 0,
+    width: 0,
+    wmode: 0,
+    wrap: 0,
+    about: 0,
+    accentHeight: 1,
+    "accent-height": "accentHeight",
+    accumulate: 0,
+    additive: 0,
+    alignmentBaseline: 1,
+    "alignment-baseline": "alignmentBaseline",
+    allowReorder: 1,
+    alphabetic: 0,
+    amplitude: 0,
+    arabicForm: 1,
+    "arabic-form": "arabicForm",
+    ascent: 0,
+    attributeName: 1,
+    attributeType: 1,
+    autoReverse: 1,
+    azimuth: 0,
+    baseFrequency: 1,
+    baselineShift: 1,
+    "baseline-shift": "baselineShift",
+    baseProfile: 1,
+    bbox: 0,
+    begin: 0,
+    bias: 0,
+    by: 0,
+    calcMode: 1,
+    capHeight: 1,
+    "cap-height": "capHeight",
+    clip: 0,
+    clipPath: 1,
+    "clip-path": "clipPath",
+    clipPathUnits: 1,
+    clipRule: 1,
+    "clip-rule": "clipRule",
+    color: 0,
+    colorInterpolation: 1,
+    "color-interpolation": "colorInterpolation",
+    colorInterpolationFilters: 1,
+    "color-interpolation-filters": "colorInterpolationFilters",
+    colorProfile: 1,
+    "color-profile": "colorProfile",
+    colorRendering: 1,
+    "color-rendering": "colorRendering",
+    contentScriptType: 1,
+    contentStyleType: 1,
+    cursor: 0,
+    cx: 0,
+    cy: 0,
+    d: 0,
+    datatype: 0,
+    decelerate: 0,
+    descent: 0,
+    diffuseConstant: 1,
+    direction: 0,
+    display: 0,
+    divisor: 0,
+    dominantBaseline: 1,
+    "dominant-baseline": "dominantBaseline",
+    dur: 0,
+    dx: 0,
+    dy: 0,
+    edgeMode: 1,
+    elevation: 0,
+    enableBackground: 1,
+    "enable-background": "enableBackground",
+    end: 0,
+    exponent: 0,
+    externalResourcesRequired: 1,
+    fill: 0,
+    fillOpacity: 1,
+    "fill-opacity": "fillOpacity",
+    fillRule: 1,
+    "fill-rule": "fillRule",
+    filter: 0,
+    filterRes: 1,
+    filterUnits: 1,
+    floodOpacity: 1,
+    "flood-opacity": "floodOpacity",
+    floodColor: 1,
+    "flood-color": "floodColor",
+    focusable: 0,
+    fontFamily: 1,
+    "font-family": "fontFamily",
+    fontSize: 1,
+    "font-size": "fontSize",
+    fontSizeAdjust: 1,
+    "font-size-adjust": "fontSizeAdjust",
+    fontStretch: 1,
+    "font-stretch": "fontStretch",
+    fontStyle: 1,
+    "font-style": "fontStyle",
+    fontVariant: 1,
+    "font-variant": "fontVariant",
+    fontWeight: 1,
+    "font-weight": "fontWeight",
+    format: 0,
+    from: 0,
+    fx: 0,
+    fy: 0,
+    g1: 0,
+    g2: 0,
+    glyphName: 1,
+    "glyph-name": "glyphName",
+    glyphOrientationHorizontal: 1,
+    "glyph-orientation-horizontal": "glyphOrientationHorizontal",
+    glyphOrientationVertical: 1,
+    "glyph-orientation-vertical": "glyphOrientationVertical",
+    glyphRef: 1,
+    gradientTransform: 1,
+    gradientUnits: 1,
+    hanging: 0,
+    horizAdvX: 1,
+    "horiz-adv-x": "horizAdvX",
+    horizOriginX: 1,
+    "horiz-origin-x": "horizOriginX",
+    ideographic: 0,
+    imageRendering: 1,
+    "image-rendering": "imageRendering",
+    in2: 0,
+    in: 0,
+    inlist: 0,
+    intercept: 0,
+    k1: 0,
+    k2: 0,
+    k3: 0,
+    k4: 0,
+    k: 0,
+    kernelMatrix: 1,
+    kernelUnitLength: 1,
+    kerning: 0,
+    keyPoints: 1,
+    keySplines: 1,
+    keyTimes: 1,
+    lengthAdjust: 1,
+    letterSpacing: 1,
+    "letter-spacing": "letterSpacing",
+    lightingColor: 1,
+    "lighting-color": "lightingColor",
+    limitingConeAngle: 1,
+    local: 0,
+    markerEnd: 1,
+    "marker-end": "markerEnd",
+    markerHeight: 1,
+    markerMid: 1,
+    "marker-mid": "markerMid",
+    markerStart: 1,
+    "marker-start": "markerStart",
+    markerUnits: 1,
+    markerWidth: 1,
+    mask: 0,
+    maskContentUnits: 1,
+    maskUnits: 1,
+    mathematical: 0,
+    mode: 0,
+    numOctaves: 1,
+    offset: 0,
+    opacity: 0,
+    operator: 0,
+    order: 0,
+    orient: 0,
+    orientation: 0,
+    origin: 0,
+    overflow: 0,
+    overlinePosition: 1,
+    "overline-position": "overlinePosition",
+    overlineThickness: 1,
+    "overline-thickness": "overlineThickness",
+    paintOrder: 1,
+    "paint-order": "paintOrder",
+    panose1: 0,
+    "panose-1": "panose1",
+    pathLength: 1,
+    patternContentUnits: 1,
+    patternTransform: 1,
+    patternUnits: 1,
+    pointerEvents: 1,
+    "pointer-events": "pointerEvents",
+    points: 0,
+    pointsAtX: 1,
+    pointsAtY: 1,
+    pointsAtZ: 1,
+    prefix: 0,
+    preserveAlpha: 1,
+    preserveAspectRatio: 1,
+    primitiveUnits: 1,
+    property: 0,
+    r: 0,
+    radius: 0,
+    refX: 1,
+    refY: 1,
+    renderingIntent: 1,
+    "rendering-intent": "renderingIntent",
+    repeatCount: 1,
+    repeatDur: 1,
+    requiredExtensions: 1,
+    requiredFeatures: 1,
+    resource: 0,
+    restart: 0,
+    result: 0,
+    results: 0,
+    rotate: 0,
+    rx: 0,
+    ry: 0,
+    scale: 0,
+    security: 0,
+    seed: 0,
+    shapeRendering: 1,
+    "shape-rendering": "shapeRendering",
+    slope: 0,
+    spacing: 0,
+    specularConstant: 1,
+    specularExponent: 1,
+    speed: 0,
+    spreadMethod: 1,
+    startOffset: 1,
+    stdDeviation: 1,
+    stemh: 0,
+    stemv: 0,
+    stitchTiles: 1,
+    stopColor: 1,
+    "stop-color": "stopColor",
+    stopOpacity: 1,
+    "stop-opacity": "stopOpacity",
+    strikethroughPosition: 1,
+    "strikethrough-position": "strikethroughPosition",
+    strikethroughThickness: 1,
+    "strikethrough-thickness": "strikethroughThickness",
+    string: 0,
+    stroke: 0,
+    strokeDasharray: 1,
+    "stroke-dasharray": "strokeDasharray",
+    strokeDashoffset: 1,
+    "stroke-dashoffset": "strokeDashoffset",
+    strokeLinecap: 1,
+    "stroke-linecap": "strokeLinecap",
+    strokeLinejoin: 1,
+    "stroke-linejoin": "strokeLinejoin",
+    strokeMiterlimit: 1,
+    "stroke-miterlimit": "strokeMiterlimit",
+    strokeWidth: 1,
+    "stroke-width": "strokeWidth",
+    strokeOpacity: 1,
+    "stroke-opacity": "strokeOpacity",
+    suppressContentEditableWarning: 1,
+    suppressHydrationWarning: 1,
+    surfaceScale: 1,
+    systemLanguage: 1,
+    tableValues: 1,
+    targetX: 1,
+    targetY: 1,
+    textAnchor: 1,
+    "text-anchor": "textAnchor",
+    textDecoration: 1,
+    "text-decoration": "textDecoration",
+    textLength: 1,
+    textRendering: 1,
+    "text-rendering": "textRendering",
+    to: 0,
+    transform: 0,
+    typeof: 0,
+    u1: 0,
+    u2: 0,
+    underlinePosition: 1,
+    "underline-position": "underlinePosition",
+    underlineThickness: 1,
+    "underline-thickness": "underlineThickness",
+    unicode: 0,
+    unicodeBidi: 1,
+    "unicode-bidi": "unicodeBidi",
+    unicodeRange: 1,
+    "unicode-range": "unicodeRange",
+    unitsPerEm: 1,
+    "units-per-em": "unitsPerEm",
+    unselectable: 0,
+    vAlphabetic: 1,
+    "v-alphabetic": "vAlphabetic",
+    values: 0,
+    vectorEffect: 1,
+    "vector-effect": "vectorEffect",
+    version: 0,
+    vertAdvY: 1,
+    "vert-adv-y": "vertAdvY",
+    vertOriginX: 1,
+    "vert-origin-x": "vertOriginX",
+    vertOriginY: 1,
+    "vert-origin-y": "vertOriginY",
+    vHanging: 1,
+    "v-hanging": "vHanging",
+    vIdeographic: 1,
+    "v-ideographic": "vIdeographic",
+    viewBox: 1,
+    viewTarget: 1,
+    visibility: 0,
+    vMathematical: 1,
+    "v-mathematical": "vMathematical",
+    vocab: 0,
+    widths: 0,
+    wordSpacing: 1,
+    "word-spacing": "wordSpacing",
+    writingMode: 1,
+    "writing-mode": "writingMode",
+    x1: 0,
+    x2: 0,
+    x: 0,
+    xChannelSelector: 1,
+    xHeight: 1,
+    "x-height": "xHeight",
+    xlinkActuate: 1,
+    "xlink:actuate": "xlinkActuate",
+    xlinkArcrole: 1,
+    "xlink:arcrole": "xlinkArcrole",
+    xlinkHref: 1,
+    "xlink:href": "xlinkHref",
+    xlinkRole: 1,
+    "xlink:role": "xlinkRole",
+    xlinkShow: 1,
+    "xlink:show": "xlinkShow",
+    xlinkTitle: 1,
+    "xlink:title": "xlinkTitle",
+    xlinkType: 1,
+    "xlink:type": "xlinkType",
+    xmlBase: 1,
+    "xml:base": "xmlBase",
+    xmlLang: 1,
+    "xml:lang": "xmlLang",
+    xmlns: 0,
+    "xml:space": "xmlSpace",
+    xmlnsXlink: 1,
+    "xmlns:xlink": "xmlnsXlink",
+    xmlSpace: 1,
+    y1: 0,
+    y2: 0,
+    y: 0,
+    yChannelSelector: 1,
+    z: 0,
+    zoomAndPan: 1
+  };
+  return possibleStandardNamesOptimized;
+}
+var hasRequiredLib$1;
+function requireLib$1() {
+  if (hasRequiredLib$1) return lib;
+  hasRequiredLib$1 = 1;
+  const RESERVED = 0;
+  const STRING = 1;
+  const BOOLEANISH_STRING = 2;
+  const BOOLEAN = 3;
+  const OVERLOADED_BOOLEAN = 4;
+  const NUMERIC = 5;
+  const POSITIVE_NUMERIC = 6;
+  function getPropertyInfo(name2) {
+    return properties.hasOwnProperty(name2) ? properties[name2] : null;
+  }
+  function PropertyInfoRecord(name2, type, mustUseProperty, attributeName, attributeNamespace, sanitizeURL, removeEmptyString) {
+    this.acceptsBooleans = type === BOOLEANISH_STRING || type === BOOLEAN || type === OVERLOADED_BOOLEAN;
+    this.attributeName = attributeName;
+    this.attributeNamespace = attributeNamespace;
+    this.mustUseProperty = mustUseProperty;
+    this.propertyName = name2;
+    this.type = type;
+    this.sanitizeURL = sanitizeURL;
+    this.removeEmptyString = removeEmptyString;
+  }
+  const properties = {};
+  const reservedProps = [
+    "children",
+    "dangerouslySetInnerHTML",
+    // TODO: This prevents the assignment of defaultValue to regular
+    // elements (not just inputs). Now that ReactDOMInput assigns to the
+    // defaultValue property -- do we need this?
+    "defaultValue",
+    "defaultChecked",
+    "innerHTML",
+    "suppressContentEditableWarning",
+    "suppressHydrationWarning",
+    "style"
+  ];
+  reservedProps.forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      RESERVED,
+      false,
+      // mustUseProperty
+      name2,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    ["acceptCharset", "accept-charset"],
+    ["className", "class"],
+    ["htmlFor", "for"],
+    ["httpEquiv", "http-equiv"]
+  ].forEach(([name2, attributeName]) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  ["contentEditable", "draggable", "spellCheck", "value"].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      BOOLEANISH_STRING,
+      false,
+      // mustUseProperty
+      name2.toLowerCase(),
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "autoReverse",
+    "externalResourcesRequired",
+    "focusable",
+    "preserveAlpha"
+  ].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      BOOLEANISH_STRING,
+      false,
+      // mustUseProperty
+      name2,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "allowFullScreen",
+    "async",
+    // Note: there is a special case that prevents it from being written to the DOM
+    // on the client side because the browsers are inconsistent. Instead we call focus().
+    "autoFocus",
+    "autoPlay",
+    "controls",
+    "default",
+    "defer",
+    "disabled",
+    "disablePictureInPicture",
+    "disableRemotePlayback",
+    "formNoValidate",
+    "hidden",
+    "loop",
+    "noModule",
+    "noValidate",
+    "open",
+    "playsInline",
+    "readOnly",
+    "required",
+    "reversed",
+    "scoped",
+    "seamless",
+    // Microdata
+    "itemScope"
+  ].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      BOOLEAN,
+      false,
+      // mustUseProperty
+      name2.toLowerCase(),
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "checked",
+    // Note: `option.selected` is not updated if `select.multiple` is
+    // disabled with `removeAttribute`. We have special logic for handling this.
+    "multiple",
+    "muted",
+    "selected"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      BOOLEAN,
+      true,
+      // mustUseProperty
+      name2,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "capture",
+    "download"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      OVERLOADED_BOOLEAN,
+      false,
+      // mustUseProperty
+      name2,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "cols",
+    "rows",
+    "size",
+    "span"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      POSITIVE_NUMERIC,
+      false,
+      // mustUseProperty
+      name2,
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  ["rowSpan", "start"].forEach((name2) => {
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      NUMERIC,
+      false,
+      // mustUseProperty
+      name2.toLowerCase(),
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  const CAMELIZE = /[\-\:]([a-z])/g;
+  const capitalize2 = (token2) => token2[1].toUpperCase();
+  [
+    "accent-height",
+    "alignment-baseline",
+    "arabic-form",
+    "baseline-shift",
+    "cap-height",
+    "clip-path",
+    "clip-rule",
+    "color-interpolation",
+    "color-interpolation-filters",
+    "color-profile",
+    "color-rendering",
+    "dominant-baseline",
+    "enable-background",
+    "fill-opacity",
+    "fill-rule",
+    "flood-color",
+    "flood-opacity",
+    "font-family",
+    "font-size",
+    "font-size-adjust",
+    "font-stretch",
+    "font-style",
+    "font-variant",
+    "font-weight",
+    "glyph-name",
+    "glyph-orientation-horizontal",
+    "glyph-orientation-vertical",
+    "horiz-adv-x",
+    "horiz-origin-x",
+    "image-rendering",
+    "letter-spacing",
+    "lighting-color",
+    "marker-end",
+    "marker-mid",
+    "marker-start",
+    "overline-position",
+    "overline-thickness",
+    "paint-order",
+    "panose-1",
+    "pointer-events",
+    "rendering-intent",
+    "shape-rendering",
+    "stop-color",
+    "stop-opacity",
+    "strikethrough-position",
+    "strikethrough-thickness",
+    "stroke-dasharray",
+    "stroke-dashoffset",
+    "stroke-linecap",
+    "stroke-linejoin",
+    "stroke-miterlimit",
+    "stroke-opacity",
+    "stroke-width",
+    "text-anchor",
+    "text-decoration",
+    "text-rendering",
+    "underline-position",
+    "underline-thickness",
+    "unicode-bidi",
+    "unicode-range",
+    "units-per-em",
+    "v-alphabetic",
+    "v-hanging",
+    "v-ideographic",
+    "v-mathematical",
+    "vector-effect",
+    "vert-adv-y",
+    "vert-origin-x",
+    "vert-origin-y",
+    "word-spacing",
+    "writing-mode",
+    "xmlns:xlink",
+    "x-height"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((attributeName) => {
+    const name2 = attributeName.replace(CAMELIZE, capitalize2);
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName,
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "xlink:actuate",
+    "xlink:arcrole",
+    "xlink:role",
+    "xlink:show",
+    "xlink:title",
+    "xlink:type"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((attributeName) => {
+    const name2 = attributeName.replace(CAMELIZE, capitalize2);
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName,
+      "http://www.w3.org/1999/xlink",
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  [
+    "xml:base",
+    "xml:lang",
+    "xml:space"
+    // NOTE: if you add a camelCased prop to this list,
+    // you'll need to set attributeName to name.toLowerCase()
+    // instead in the assignment below.
+  ].forEach((attributeName) => {
+    const name2 = attributeName.replace(CAMELIZE, capitalize2);
+    properties[name2] = new PropertyInfoRecord(
+      name2,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName,
+      "http://www.w3.org/XML/1998/namespace",
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  ["tabIndex", "crossOrigin"].forEach((attributeName) => {
+    properties[attributeName] = new PropertyInfoRecord(
+      attributeName,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName.toLowerCase(),
+      // attributeName
+      null,
+      // attributeNamespace
+      false,
+      // sanitizeURL
+      false
+      // removeEmptyString
+    );
+  });
+  const xlinkHref = "xlinkHref";
+  properties[xlinkHref] = new PropertyInfoRecord(
+    "xlinkHref",
+    STRING,
+    false,
+    // mustUseProperty
+    "xlink:href",
+    "http://www.w3.org/1999/xlink",
+    true,
+    // sanitizeURL
+    false
+    // removeEmptyString
+  );
+  ["src", "href", "action", "formAction"].forEach((attributeName) => {
+    properties[attributeName] = new PropertyInfoRecord(
+      attributeName,
+      STRING,
+      false,
+      // mustUseProperty
+      attributeName.toLowerCase(),
+      // attributeName
+      null,
+      // attributeNamespace
+      true,
+      // sanitizeURL
+      true
+      // removeEmptyString
+    );
+  });
+  const {
+    CAMELCASE,
+    SAME,
+    possibleStandardNames: possibleStandardNamesOptimized2
+  } = requirePossibleStandardNamesOptimized();
+  const ATTRIBUTE_NAME_START_CHAR = ":A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
+  const ATTRIBUTE_NAME_CHAR = ATTRIBUTE_NAME_START_CHAR + "\\-.0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
+  const isCustomAttribute = RegExp.prototype.test.bind(
+    // eslint-disable-next-line no-misleading-character-class
+    new RegExp("^(data|aria)-[" + ATTRIBUTE_NAME_CHAR + "]*$")
+  );
+  const possibleStandardNames = Object.keys(
+    possibleStandardNamesOptimized2
+  ).reduce((accumulator, standardName) => {
+    const propName = possibleStandardNamesOptimized2[standardName];
+    if (propName === SAME) {
+      accumulator[standardName] = standardName;
+    } else if (propName === CAMELCASE) {
+      accumulator[standardName.toLowerCase()] = standardName;
+    } else {
+      accumulator[standardName] = propName;
+    }
+    return accumulator;
+  }, {});
+  lib.BOOLEAN = BOOLEAN;
+  lib.BOOLEANISH_STRING = BOOLEANISH_STRING;
+  lib.NUMERIC = NUMERIC;
+  lib.OVERLOADED_BOOLEAN = OVERLOADED_BOOLEAN;
+  lib.POSITIVE_NUMERIC = POSITIVE_NUMERIC;
+  lib.RESERVED = RESERVED;
+  lib.STRING = STRING;
+  lib.getPropertyInfo = getPropertyInfo;
+  lib.isCustomAttribute = isCustomAttribute;
+  lib.possibleStandardNames = possibleStandardNames;
+  return lib;
+}
+var utilities = {};
+var hasRequiredUtilities;
+function requireUtilities() {
+  if (hasRequiredUtilities) return utilities;
+  hasRequiredUtilities = 1;
+  (function(exports) {
+    var __importDefault = utilities && utilities.__importDefault || function(mod) {
+      return mod && mod.__esModule ? mod : { "default": mod };
+    };
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.returnFirstArg = exports.canTextBeChildOfNode = exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = exports.PRESERVE_CUSTOM_ATTRIBUTES = void 0;
+    exports.isCustomComponent = isCustomComponent;
+    exports.setStyleProp = setStyleProp;
+    var react_1 = requireReact();
+    var style_to_js_1 = __importDefault(requireCjs());
+    var RESERVED_SVG_MATHML_ELEMENTS = /* @__PURE__ */ new Set([
+      "annotation-xml",
+      "color-profile",
+      "font-face",
+      "font-face-src",
+      "font-face-uri",
+      "font-face-format",
+      "font-face-name",
+      "missing-glyph"
+    ]);
+    function isCustomComponent(tagName, props) {
+      if (!tagName.includes("-")) {
+        return Boolean(props && typeof props.is === "string");
+      }
+      if (RESERVED_SVG_MATHML_ELEMENTS.has(tagName)) {
+        return false;
+      }
+      return true;
+    }
+    var styleOptions = {
+      reactCompat: true
+    };
+    function setStyleProp(style, props) {
+      if (typeof style !== "string") {
+        return;
+      }
+      if (!style.trim()) {
+        props.style = {};
+        return;
+      }
+      try {
+        props.style = (0, style_to_js_1.default)(style, styleOptions);
+      } catch (error) {
+        props.style = {};
+      }
+    }
+    exports.PRESERVE_CUSTOM_ATTRIBUTES = Number(react_1.version.split(".")[0]) >= 16;
+    exports.ELEMENTS_WITH_NO_TEXT_CHILDREN = /* @__PURE__ */ new Set([
+      "tr",
+      "tbody",
+      "thead",
+      "tfoot",
+      "colgroup",
+      "table",
+      "head",
+      "html",
+      "frameset"
+    ]);
+    var canTextBeChildOfNode = function(node2) {
+      return !exports.ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node2.name);
+    };
+    exports.canTextBeChildOfNode = canTextBeChildOfNode;
+    var returnFirstArg = function(arg) {
+      return arg;
+    };
+    exports.returnFirstArg = returnFirstArg;
+  })(utilities);
+  return utilities;
+}
+var hasRequiredAttributesToProps;
+function requireAttributesToProps() {
+  if (hasRequiredAttributesToProps) return attributesToProps;
+  hasRequiredAttributesToProps = 1;
+  Object.defineProperty(attributesToProps, "__esModule", { value: true });
+  attributesToProps.default = attributesToProps$1;
+  var react_property_1 = requireLib$1();
+  var utilities_1 = requireUtilities();
+  var UNCONTROLLED_COMPONENT_ATTRIBUTES = ["checked", "value"];
+  var UNCONTROLLED_COMPONENT_NAMES = ["input", "select", "textarea"];
+  var valueOnlyInputs = {
+    reset: true,
+    submit: true
+  };
+  function attributesToProps$1(attributes, nodeName) {
+    if (attributes === void 0) {
+      attributes = {};
+    }
+    var props = {};
+    var isInputValueOnly = Boolean(attributes.type && valueOnlyInputs[attributes.type]);
+    for (var attributeName in attributes) {
+      var attributeValue = attributes[attributeName];
+      if ((0, react_property_1.isCustomAttribute)(attributeName)) {
+        props[attributeName] = attributeValue;
+        continue;
+      }
+      var attributeNameLowerCased = attributeName.toLowerCase();
+      var propName = getPropName(attributeNameLowerCased);
+      if (propName) {
+        var propertyInfo = (0, react_property_1.getPropertyInfo)(propName);
+        if (UNCONTROLLED_COMPONENT_ATTRIBUTES.includes(propName) && UNCONTROLLED_COMPONENT_NAMES.includes(nodeName) && !isInputValueOnly) {
+          propName = getPropName("default" + attributeNameLowerCased);
+        }
+        props[propName] = attributeValue;
+        switch (propertyInfo && propertyInfo.type) {
+          case react_property_1.BOOLEAN:
+            props[propName] = true;
+            break;
+          case react_property_1.OVERLOADED_BOOLEAN:
+            if (attributeValue === "") {
+              props[propName] = true;
+            }
+            break;
+        }
+        continue;
+      }
+      if (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES) {
+        props[attributeName] = attributeValue;
+      }
+    }
+    (0, utilities_1.setStyleProp)(attributes.style, props);
+    return props;
+  }
+  function getPropName(attributeName) {
+    return react_property_1.possibleStandardNames[attributeName];
+  }
+  return attributesToProps;
+}
+var domToReact = {};
+var hasRequiredDomToReact;
+function requireDomToReact() {
+  if (hasRequiredDomToReact) return domToReact;
+  hasRequiredDomToReact = 1;
+  var __importDefault = domToReact && domToReact.__importDefault || function(mod) {
+    return mod && mod.__esModule ? mod : { "default": mod };
+  };
+  Object.defineProperty(domToReact, "__esModule", { value: true });
+  domToReact.default = domToReact$1;
+  var react_1 = requireReact();
+  var attributes_to_props_1 = __importDefault(requireAttributesToProps());
+  var utilities_1 = requireUtilities();
+  var React2 = {
+    cloneElement: react_1.cloneElement,
+    createElement: react_1.createElement,
+    isValidElement: react_1.isValidElement
+  };
+  function domToReact$1(nodes, options) {
+    if (options === void 0) {
+      options = {};
+    }
+    var reactElements = [];
+    var hasReplace = typeof options.replace === "function";
+    var transform = options.transform || utilities_1.returnFirstArg;
+    var _a = options.library || React2, cloneElement = _a.cloneElement, createElement2 = _a.createElement, isValidElement = _a.isValidElement;
+    var nodesLength = nodes.length;
+    for (var index2 = 0; index2 < nodesLength; index2++) {
+      var node2 = nodes[index2];
+      if (hasReplace) {
+        var replaceElement = options.replace(node2, index2);
+        if (isValidElement(replaceElement)) {
+          if (nodesLength > 1) {
+            replaceElement = cloneElement(replaceElement, {
+              key: replaceElement.key || index2
+            });
+          }
+          reactElements.push(transform(replaceElement, node2, index2));
+          continue;
+        }
+      }
+      if (node2.type === "text") {
+        var isWhitespace = !node2.data.trim().length;
+        if (isWhitespace && node2.parent && !(0, utilities_1.canTextBeChildOfNode)(node2.parent)) {
+          continue;
+        }
+        if (options.trim && isWhitespace) {
+          continue;
+        }
+        reactElements.push(transform(node2.data, node2, index2));
+        continue;
+      }
+      var element2 = node2;
+      var props = {};
+      if (skipAttributesToProps(element2)) {
+        (0, utilities_1.setStyleProp)(element2.attribs.style, element2.attribs);
+        props = element2.attribs;
+      } else if (element2.attribs) {
+        props = (0, attributes_to_props_1.default)(element2.attribs, element2.name);
+      }
+      var children = void 0;
+      switch (node2.type) {
+        case "script":
+        case "style":
+          if (node2.children[0]) {
+            props.dangerouslySetInnerHTML = {
+              __html: node2.children[0].data
+            };
+          }
+          break;
+        case "tag":
+          if (node2.name === "textarea" && node2.children[0]) {
+            props.defaultValue = node2.children[0].data;
+          } else if (node2.children && node2.children.length) {
+            children = domToReact$1(node2.children, options);
+          }
+          break;
+        // skip all other cases (e.g., comment)
+        default:
+          continue;
+      }
+      if (nodesLength > 1) {
+        props.key = index2;
+      }
+      reactElements.push(transform(createElement2(node2.name, props, children), node2, index2));
+    }
+    return reactElements.length === 1 ? reactElements[0] : reactElements;
+  }
+  function skipAttributesToProps(node2) {
+    return utilities_1.PRESERVE_CUSTOM_ATTRIBUTES && node2.type === "tag" && (0, utilities_1.isCustomComponent)(node2.name, node2.attribs);
+  }
+  return domToReact;
+}
+var hasRequiredLib;
+function requireLib() {
+  if (hasRequiredLib) return lib$3;
+  hasRequiredLib = 1;
+  (function(exports) {
+    var __importDefault = lib$3 && lib$3.__importDefault || function(mod) {
+      return mod && mod.__esModule ? mod : { "default": mod };
+    };
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
+    exports.default = HTMLReactParser2;
+    var html_dom_parser_1 = __importDefault(requireHtmlToDom());
+    exports.htmlToDOM = html_dom_parser_1.default;
+    var attributes_to_props_1 = __importDefault(requireAttributesToProps());
+    exports.attributesToProps = attributes_to_props_1.default;
+    var dom_to_react_1 = __importDefault(requireDomToReact());
+    exports.domToReact = dom_to_react_1.default;
+    var domhandler_1 = /* @__PURE__ */ requireLib$2();
+    Object.defineProperty(exports, "Comment", { enumerable: true, get: function() {
+      return domhandler_1.Comment;
+    } });
+    Object.defineProperty(exports, "Element", { enumerable: true, get: function() {
+      return domhandler_1.Element;
+    } });
+    Object.defineProperty(exports, "ProcessingInstruction", { enumerable: true, get: function() {
+      return domhandler_1.ProcessingInstruction;
+    } });
+    Object.defineProperty(exports, "Text", { enumerable: true, get: function() {
+      return domhandler_1.Text;
+    } });
+    var domParserOptions = { lowerCaseAttributeNames: false };
+    function HTMLReactParser2(html2, options) {
+      if (typeof html2 !== "string") {
+        throw new TypeError("First argument must be a string");
+      }
+      if (!html2) {
+        return [];
+      }
+      return (0, dom_to_react_1.default)((0, html_dom_parser_1.default)(html2, (options === null || options === void 0 ? void 0 : options.htmlparser2) || domParserOptions), options);
+    }
+  })(lib$3);
+  return lib$3;
+}
+var libExports = requireLib();
+const HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
+const parse = HTMLReactParser.default || HTMLReactParser;
+const DEFAULT_DEFER_TIMELINE_MS = 48 * 60 * 60 * 1e3;
+const useDeferredUpdatesStore = create$1()(
+  persist(
+    (set, get) => ({
+      deferredVersion: null,
+      deferredAt: null,
+      deferUpdate: (version) => {
+        set({
+          deferredVersion: version,
+          deferredAt: Date.now()
+        });
+      },
+      shouldShowUpdate: (version) => {
+        const { deferredVersion, deferredAt } = get();
+        if (!deferredVersion || !deferredAt) {
+          return true;
+        }
+        if (deferredVersion !== version) {
+          return true;
+        }
+        const now = Date.now();
+        const timeElapsed = now - deferredAt;
+        return timeElapsed > DEFAULT_DEFER_TIMELINE_MS;
+      },
+      clearDeferredUpdate: () => {
+        set({
+          deferredVersion: null,
+          deferredAt: null
+        });
+      }
+    }),
+    {
+      name: "deferred-updates-storage"
+    }
+  )
+);
 const UpdateContainer = styled$1("div")(({ theme: theme2 }) => ({
-  padding: 16,
+  padding: 24,
   borderRadius: 8,
   backgroundColor: theme2.palette.background.paper,
   boxShadow: "0 4px 20px rgba(0, 0, 0, 0.15)",
@@ -86419,15 +89052,21 @@ const UpdateContainer = styled$1("div")(({ theme: theme2 }) => ({
   right: 20,
   zIndex: 1300,
   // Higher than most components but below modal dialogs
-  maxWidth: 400,
-  width: "calc(100% - 40px)"
+  width: 560,
   // Responsive width with margins
+  "& a": {
+    color: theme2.palette.primary.main,
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  }
 }));
 const UpdateActions = styled$1("div")({
   display: "flex",
   justifyContent: "flex-end",
   gap: 8,
-  marginTop: 16
+  marginTop: 24
 });
 const ProgressContainer = styled$1("div")({
   marginTop: 16,
@@ -86437,6 +89076,7 @@ const UpdateNotification = ({
   autoCheck = true
 }) => {
   const [checking, setChecking] = reactExports.useState(false);
+  const [updatingBackend, setUpdatingBackend] = reactExports.useState(false);
   const [updateAvailable, setUpdateAvailable] = reactExports.useState(false);
   const [updateInfo, setUpdateInfo] = reactExports.useState(null);
   const [downloading, setDownloading] = reactExports.useState(false);
@@ -86446,6 +89086,16 @@ const UpdateNotification = ({
   const [updateDownloaded, setUpdateDownloaded] = reactExports.useState(false);
   const [error, setError] = reactExports.useState(null);
   const [snackbarOpen, setSnackbarOpen] = reactExports.useState(false);
+  const [appVersion, setAppVersion] = reactExports.useState("unknown");
+  const [backendUpdateAvailable, setBackendUpdateAvailable] = reactExports.useState(false);
+  const [backendUpdateInfo, setBackendUpdateInfo] = reactExports.useState(null);
+  const [backendUpdateCompleted, setBackendUpdateCompleted] = reactExports.useState(false);
+  const [manualUpdateRequired, setManualUpdateRequired] = reactExports.useState(false);
+  const [manualUpdateInfo, setManualUpdateInfo] = reactExports.useState(null);
+  const { shouldShowUpdate, deferUpdate } = useDeferredUpdatesStore();
+  reactExports.useEffect(() => {
+    window.api.systemInfo.getAppVersion().then((version) => setAppVersion(version)).catch(() => setAppVersion("unknown"));
+  }, []);
   const checkForUpdates = reactExports.useCallback(async () => {
     try {
       setChecking(true);
@@ -86476,12 +89126,45 @@ const UpdateNotification = ({
   const installUpdate = reactExports.useCallback(() => {
     window.api.updater.quitAndInstall();
   }, []);
+  const updateBackend = reactExports.useCallback(async () => {
+    try {
+      setChecking(true);
+      setUpdatingBackend(true);
+      setError(null);
+      await window.api.updater.updateBackend();
+    } catch (err) {
+      setError(
+        `Error updating server: ${err instanceof Error ? err.message : String(err)}`
+      );
+      setSnackbarOpen(true);
+      setChecking(false);
+      setUpdatingBackend(false);
+    }
+  }, []);
+  const handleDeferBackendUpdate = reactExports.useCallback(() => {
+    if (backendUpdateInfo) {
+      deferUpdate(backendUpdateInfo.latestVersion);
+      setSnackbarOpen(false);
+      setBackendUpdateAvailable(false);
+      setBackendUpdateInfo(null);
+    }
+  }, [deferUpdate, backendUpdateInfo]);
+  const handleDeferUpdate = reactExports.useCallback(() => {
+    if (updateInfo) {
+      deferUpdate(updateInfo.version);
+      setSnackbarOpen(false);
+      setUpdateAvailable(false);
+      setUpdateDownloaded(false);
+    }
+  }, [deferUpdate, updateInfo]);
   reactExports.useEffect(() => {
     const removeUpdateAvailableListener = window.api.updater.onUpdateAvailable(
       (info) => {
-        setUpdateAvailable(true);
-        setUpdateInfo(info);
-        setSnackbarOpen(true);
+        if (shouldShowUpdate(info.version)) {
+          setUpdateAvailable(true);
+          setUpdateInfo(info);
+          setSnackbarOpen(true);
+        }
       }
     );
     const removeUpdateNotAvailableListener = window.api.updater.onUpdateNotAvailable(() => {
@@ -86490,16 +89173,27 @@ const UpdateNotification = ({
     });
     const removeUpdateDownloadedListener = window.api.updater.onUpdateDownloaded((info) => {
       setDownloading(false);
-      setUpdateDownloaded(true);
-      setUpdateInfo(info);
-      setSnackbarOpen(true);
+      if (shouldShowUpdate(info.version)) {
+        setUpdateDownloaded(true);
+        setUpdateInfo(info);
+        setSnackbarOpen(true);
+      }
     });
     const removeUpdateErrorListener = window.api.updater.onUpdateError(
       (errorMessage) => {
-        setError(errorMessage);
-        setChecking(false);
-        setDownloading(false);
-        setSnackbarOpen(true);
+        if (errorMessage.includes("manually")) {
+          setManualUpdateRequired(true);
+          setManualUpdateInfo({
+            message: "Please update the local-operator package manually using pip.",
+            command: "pip install --upgrade local-operator"
+          });
+          setSnackbarOpen(true);
+        } else {
+          setError(errorMessage);
+          setChecking(false);
+          setDownloading(false);
+          setSnackbarOpen(true);
+        }
       }
     );
     const removeUpdateProgressListener = window.api.updater.onUpdateProgress(
@@ -86507,6 +89201,32 @@ const UpdateNotification = ({
         setDownloadProgress(progressObj);
       }
     );
+    const removeBackendUpdateAvailableListener = window.api.updater.onBackendUpdateAvailable((info) => {
+      if (shouldShowUpdate(info.latestVersion)) {
+        const enhancedInfo = {
+          ...info,
+          canManageUpdate: !info.updateCommand.includes("manually")
+        };
+        setBackendUpdateAvailable(true);
+        setBackendUpdateInfo(enhancedInfo);
+        setSnackbarOpen(true);
+      }
+    });
+    const removeBackendUpdateNotAvailableListener = window.api.updater.onBackendUpdateNotAvailable(() => {
+      setBackendUpdateAvailable(false);
+      setBackendUpdateInfo(null);
+    });
+    const removeBackendUpdateCompletedListener = window.api.updater.onBackendUpdateCompleted(() => {
+      setBackendUpdateAvailable(false);
+      setBackendUpdateInfo(null);
+      setChecking(false);
+      setUpdatingBackend(false);
+      setBackendUpdateCompleted(true);
+      setSnackbarOpen(true);
+      setTimeout(() => {
+        setBackendUpdateCompleted(false);
+      }, 6e3);
+    });
     if (autoCheck) {
       checkForUpdates();
     }
@@ -86516,15 +89236,18 @@ const UpdateNotification = ({
       removeUpdateDownloadedListener();
       removeUpdateErrorListener();
       removeUpdateProgressListener();
+      removeBackendUpdateAvailableListener();
+      removeBackendUpdateNotAvailableListener();
+      removeBackendUpdateCompletedListener();
     };
-  }, [autoCheck, checkForUpdates]);
+  }, [autoCheck, checkForUpdates, shouldShowUpdate]);
   const handleSnackbarClose = () => {
     setSnackbarOpen(false);
   };
   if (checking) {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(UpdateContainer, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", children: "Checking for Updates" }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: "Please wait while we check for available updates..." }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", children: updatingBackend ? "Updating Server" : "Checking for Updates" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body1", children: updatingBackend ? "Please wait while the server is being updated.  The server will temporarily go offline while it restarts to apply the update." : "Please wait while we check for available updates..." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ProgressContainer, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(LinearProgress, {}) })
     ] });
   }
@@ -86548,13 +89271,33 @@ const UpdateNotification = ({
           "Version ",
           updateInfo.version,
           " is available. You are currently using version ",
-          define_process_env_default.npm_package_version || "unknown",
+          appVersion,
           "."
         ] }),
         updateInfo.releaseNotes && /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", sx: { mt: 1 }, children: [
           "Release Notes:",
           " ",
-          typeof updateInfo.releaseNotes === "string" ? updateInfo.releaseNotes : "See release notes on GitHub"
+          typeof updateInfo.releaseNotes === "string" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            parse(truncateText(updateInfo.releaseNotes, 400)),
+            updateInfo.releaseNotes.length > 400 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Link,
+              {
+                href: getReleaseUrl(updateInfo),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                sx: { ml: 1 },
+                children: "View full release notes"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Link,
+            {
+              href: getReleaseUrl(updateInfo),
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: "See release notes on GitHub"
+            }
+          )
         ] }),
         downloading && downloadProgress && /* @__PURE__ */ jsxRuntimeExports.jsxs(ProgressContainer, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
@@ -86578,16 +89321,27 @@ const UpdateNotification = ({
             " KB"
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(UpdateActions, { children: !downloading && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
-          {
-            variant: "contained",
-            color: "primary",
-            onClick: downloadUpdate,
-            disabled: downloading,
-            children: "Download Update"
-          }
-        ) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(UpdateActions, { children: !downloading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "contained",
+              color: "primary",
+              onClick: downloadUpdate,
+              disabled: downloading,
+              children: "Download Update"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: handleDeferUpdate,
+              disabled: downloading,
+              children: "Update Later"
+            }
+          )
+        ] }) })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
         Snackbar,
@@ -86611,12 +89365,14 @@ const UpdateNotification = ({
         /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body1", children: [
           "Version ",
           updateInfo.version,
-          " has been downloaded and is ready to install."
+          " is available. You are currently using version ",
+          appVersion,
+          "."
         ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: "The application will restart to apply the update." }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs(UpdateActions, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "contained", color: "primary", onClick: installUpdate, children: "Install Now" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outlined", onClick: () => setSnackbarOpen(false), children: "Install Later" })
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "outlined", onClick: handleDeferUpdate, children: "Update Later" })
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -86631,224 +89387,148 @@ const UpdateNotification = ({
       )
     ] });
   }
-  return null;
-};
-const CheckForUpdatesButton = () => {
-  const [checking, setChecking] = reactExports.useState(false);
-  const [error, setError] = reactExports.useState(null);
-  const [snackbarOpen, setSnackbarOpen] = reactExports.useState(false);
-  const [noUpdateAvailable, setNoUpdateAvailable] = reactExports.useState(false);
-  const [devModeMessage, setDevModeMessage] = reactExports.useState(null);
-  const [npxUpdateInfo, setNpxUpdateInfo] = reactExports.useState(
-    null
-  );
-  const [backendUpdateInfo, setBackendUpdateInfo] = reactExports.useState(null);
-  const [backendUpdateCompleted, setBackendUpdateCompleted] = reactExports.useState(false);
-  const [updatingBackend, setUpdatingBackend] = reactExports.useState(false);
-  const checkForUpdates = async () => {
-    try {
-      setChecking(true);
-      setError(null);
-      setDevModeMessage(null);
-      setNpxUpdateInfo(null);
-      setBackendUpdateInfo(null);
-      setBackendUpdateCompleted(false);
-      await window.api.updater.checkForAllUpdates();
-      setNoUpdateAvailable(true);
-      setSnackbarOpen(true);
-    } catch (err) {
-      setError(
-        `Error checking for updates: ${err instanceof Error ? err.message : String(err)}`
-      );
-      setSnackbarOpen(true);
-    } finally {
-      setChecking(false);
-    }
-  };
-  const updateBackend = async () => {
-    try {
-      setUpdatingBackend(true);
-      setError(null);
-      await window.api.updater.updateBackend();
-    } catch (err) {
-      setError(
-        `Error updating backend: ${err instanceof Error ? err.message : String(err)}`
-      );
-      setSnackbarOpen(true);
-    } finally {
-      setUpdatingBackend(false);
-    }
-  };
-  reactExports.useEffect(() => {
-    const removeUpdateNotAvailableListener = window.api.updater.onUpdateNotAvailable(() => {
-      setNoUpdateAvailable(true);
-      setSnackbarOpen(true);
-    });
-    const removeUpdateDevModeListener = window.api.updater.onUpdateDevMode(
-      (message2) => {
-        setDevModeMessage(message2);
-        setChecking(false);
-        setSnackbarOpen(true);
-      }
-    );
-    const removeUpdateNpxAvailableListener = window.api.updater.onUpdateNpxAvailable((info) => {
-      setNpxUpdateInfo(info);
-      setChecking(false);
-      setSnackbarOpen(true);
-    });
-    const removeBackendUpdateAvailableListener = window.api.updater.onBackendUpdateAvailable((info) => {
-      setBackendUpdateInfo(info);
-      setChecking(false);
-      setSnackbarOpen(true);
-    });
-    const removeBackendUpdateNotAvailableListener = window.api.updater.onBackendUpdateNotAvailable(() => {
-    });
-    const removeBackendUpdateCompletedListener = window.api.updater.onBackendUpdateCompleted(() => {
-      setBackendUpdateCompleted(true);
-      setBackendUpdateInfo(null);
-      setUpdatingBackend(false);
-      setSnackbarOpen(true);
-    });
-    const removeUpdateErrorListener = window.api.updater.onUpdateError(
-      (errorMessage) => {
-        setError(errorMessage);
-        setChecking(false);
-        setUpdatingBackend(false);
-        setSnackbarOpen(true);
-      }
-    );
-    return () => {
-      removeUpdateNotAvailableListener();
-      removeUpdateDevModeListener();
-      removeUpdateNpxAvailableListener();
-      removeBackendUpdateAvailableListener();
-      removeBackendUpdateNotAvailableListener();
-      removeBackendUpdateCompletedListener();
-      removeUpdateErrorListener();
-    };
-  }, []);
-  const handleSnackbarClose = () => {
-    setSnackbarOpen(false);
-    setNoUpdateAvailable(false);
-    setDevModeMessage(null);
-    setNpxUpdateInfo(null);
-    setBackendUpdateCompleted(false);
-  };
-  const handleCopyCommand = (command) => {
-    navigator.clipboard.writeText(command);
-    setError("Command copied to clipboard!");
-    setTimeout(() => {
-      setError(null);
-    }, 2e3);
-  };
-  let snackbarContent = null;
-  if (error) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { onClose: handleSnackbarClose, severity: "error", children: error });
-  } else if (backendUpdateCompleted) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { onClose: handleSnackbarClose, severity: "success", children: "Backend updated successfully" });
-  } else if (backendUpdateInfo) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Alert,
-      {
-        onClose: handleSnackbarClose,
-        severity: "info",
-        action: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  if (backendUpdateAvailable && backendUpdateInfo) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(UpdateContainer, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "h6", children: "Server Update Available" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body1", children: [
+          "Server version ",
+          backendUpdateInfo.latestVersion,
+          " is available. You are currently using version ",
+          backendUpdateInfo.currentVersion,
+          "."
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: "Updating the server will improve AI functionality, improve security, and fix bugs." }),
+        backendUpdateInfo.canManageUpdate ? /* @__PURE__ */ jsxRuntimeExports.jsxs(UpdateActions, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
-              color: "inherit",
-              size: "small",
-              onClick: () => handleCopyCommand(backendUpdateInfo.updateCommand),
-              sx: { mr: 1 },
-              children: "Copy"
+              variant: "contained",
+              color: "primary",
+              onClick: updateBackend,
+              disabled: checking,
+              children: checking ? "Updating..." : "Update Server"
             }
           ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             Button,
             {
-              color: "primary",
-              size: "small",
-              onClick: updateBackend,
-              disabled: updatingBackend,
-              children: updatingBackend ? "Updating..." : "Update"
+              variant: "outlined",
+              onClick: handleDeferBackendUpdate,
+              disabled: checking,
+              children: "Update Later"
             }
           )
-        ] }),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [
-            "Backend update available: ",
-            backendUpdateInfo.latestVersion,
-            " (current:",
-            " ",
-            backendUpdateInfo.currentVersion,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
-            "To update manually, run:",
-            " ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: backendUpdateInfo.updateCommand })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", sx: { mt: 2, color: "warning.main" }, children: "The backend server is running externally and cannot be updated automatically. Please update it manually using the following command:" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: {
+                mt: 1,
+                p: 1,
+                backgroundColor: "background.default",
+                borderRadius: 1,
+                fontFamily: "monospace"
+              },
+              children: backendUpdateInfo.updateCommand
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(UpdateActions, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Button,
+            {
+              variant: "outlined",
+              onClick: handleDeferBackendUpdate,
+              disabled: checking,
+              children: "Dismiss"
+            }
+          ) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Snackbar,
+        {
+          open: snackbarOpen,
+          autoHideDuration: 6e3,
+          onClose: handleSnackbarClose,
+          anchorOrigin: { vertical: "bottom", horizontal: "right" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Alert, { onClose: handleSnackbarClose, severity: "info", children: [
+            "A new server update is available: v",
+            backendUpdateInfo.latestVersion
           ] })
-        ]
-      }
-    );
-  } else if (npxUpdateInfo) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsxs(
-      Alert,
+        }
+      )
+    ] });
+  }
+  if (manualUpdateRequired && manualUpdateInfo) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Snackbar,
       {
+        open: snackbarOpen,
+        autoHideDuration: 1e4,
         onClose: handleSnackbarClose,
-        severity: "info",
-        action: /* @__PURE__ */ jsxRuntimeExports.jsx(
-          Button,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Alert,
           {
-            color: "inherit",
-            size: "small",
-            onClick: () => handleCopyCommand(npxUpdateInfo.updateCommand),
-            children: "Copy"
+            onClose: handleSnackbarClose,
+            severity: "warning",
+            sx: { width: "100%" },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: manualUpdateInfo.message }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    mt: 1,
+                    p: 1,
+                    backgroundColor: "background.default",
+                    borderRadius: 1,
+                    fontFamily: "monospace"
+                  },
+                  children: manualUpdateInfo.command
+                }
+              )
+            ]
           }
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", sx: { mb: 1 }, children: [
-            "UI update available: ",
-            npxUpdateInfo.latestVersion,
-            " (current:",
-            " ",
-            npxUpdateInfo.currentVersion,
-            ")"
-          ] }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(Typography, { variant: "body2", children: [
-            "To update, run: ",
-            /* @__PURE__ */ jsxRuntimeExports.jsx("code", { children: npxUpdateInfo.updateCommand })
-          ] })
-        ]
+        )
       }
-    );
-  } else if (devModeMessage) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { onClose: handleSnackbarClose, severity: "info", children: devModeMessage });
-  } else if (noUpdateAvailable) {
-    snackbarContent = /* @__PURE__ */ jsxRuntimeExports.jsx(Alert, { onClose: handleSnackbarClose, severity: "info", children: "You're using the latest version" });
+    ) });
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      Button,
-      {
-        variant: "outlined",
-        onClick: checkForUpdates,
-        disabled: checking,
-        startIcon: checking ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { width: 16, height: 16 } }) : void 0,
-        children: checking ? "Checking..." : "Check for Updates"
-      }
-    ),
-    snackbarOpen && snackbarContent && /* @__PURE__ */ jsxRuntimeExports.jsx(
+  if (backendUpdateCompleted) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Snackbar,
       {
-        open: snackbarOpen,
+        open: true,
         autoHideDuration: 6e3,
-        onClose: handleSnackbarClose,
+        onClose: () => setBackendUpdateCompleted(false),
         anchorOrigin: { vertical: "bottom", horizontal: "right" },
-        children: snackbarContent
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Alert,
+          {
+            onClose: () => setBackendUpdateCompleted(false),
+            severity: "success",
+            children: "Server update completed successfully"
+          }
+        )
       }
-    )
-  ] });
+    );
+  }
+  return null;
+};
+const truncateText = (text2, maxLength) => {
+  if (text2.length <= maxLength) return text2;
+  return `${text2.substring(0, maxLength)}...`;
+};
+const getReleaseUrl = (updateInfo) => {
+  if (updateInfo.releaseNotes && typeof updateInfo.releaseNotes !== "string") {
+    const releaseNotesObj = updateInfo.releaseNotes;
+    const defaultUrl = `https://github.com/local-operator/local-operator-ui/releases/tag/v${updateInfo.version}`;
+    return releaseNotesObj.path || defaultUrl;
+  }
+  return `https://github.com/local-operator/local-operator-ui/releases/tag/v${updateInfo.version}`;
 };
 const localOperatorIcon = "" + new URL("icon-ngVHF_bZ.png", import.meta.url).href;
 const pulse$1 = keyframes`
@@ -87611,30 +90291,6 @@ const EmojiContainer = styled$1(Box)(({ theme: theme2 }) => ({
   marginRight: theme2.spacing(1),
   fontSize: "1em"
 }));
-const configQueryKey = ["config"];
-const useConfig = () => {
-  return useQuery({
-    queryKey: configQueryKey,
-    queryFn: async () => {
-      try {
-        const client = createLocalOperatorClient(apiConfig.baseUrl);
-        const response = await client.config.getConfig();
-        if (response.status >= 400) {
-          throw new Error(response.message || "Failed to fetch configuration");
-        }
-        return response.result;
-      } catch (error) {
-        const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching configuration";
-        y$1.error(errorMessage);
-        throw error;
-      }
-    },
-    // Prevent automatic refetches on window focus
-    refetchOnWindowFocus: false,
-    // Prevent stale time to avoid unnecessary refetches
-    staleTime: 5e3
-  });
-};
 const CreateAgentStep = () => {
   const [name2, setName] = reactExports.useState("");
   const [description, setDescription] = reactExports.useState("");
@@ -89325,6 +91981,88 @@ const ToggleSetting = ({
     ) })
   ] });
 };
+const CheckForUpdatesButton = () => {
+  const [checking, setChecking] = reactExports.useState(false);
+  const [snackbarOpen, setSnackbarOpen] = reactExports.useState(false);
+  const [manualUpdateInfo, setManualUpdateInfo] = reactExports.useState(null);
+  const { clearDeferredUpdate } = useDeferredUpdatesStore();
+  reactExports.useEffect(() => {
+    const removeManualUpdateListener = window.api.updater.onUpdateError(
+      (message2) => {
+        if (message2.includes("manually")) {
+          setManualUpdateInfo({
+            message: "Please update the local-operator package manually using pip.",
+            command: "pip install --upgrade local-operator"
+          });
+          setSnackbarOpen(true);
+        }
+      }
+    );
+    return () => {
+      removeManualUpdateListener();
+    };
+  }, []);
+  const checkForUpdates = async () => {
+    try {
+      setChecking(true);
+      clearDeferredUpdate();
+      await window.api.updater.checkForAllUpdates();
+    } catch (error) {
+      console.error("Error checking for updates:", error);
+    } finally {
+      setChecking(false);
+    }
+  };
+  const handleSnackbarClose = () => {
+    setSnackbarOpen(false);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Button,
+      {
+        variant: "outlined",
+        onClick: checkForUpdates,
+        disabled: checking,
+        startIcon: checking ? /* @__PURE__ */ jsxRuntimeExports.jsx(Box, { sx: { width: 16, height: 16 } }) : void 0,
+        children: checking ? "Checking..." : "Check for Updates"
+      }
+    ),
+    manualUpdateInfo && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Snackbar,
+      {
+        open: snackbarOpen,
+        autoHideDuration: 1e4,
+        onClose: handleSnackbarClose,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Alert,
+          {
+            onClose: handleSnackbarClose,
+            severity: "warning",
+            sx: { width: "100%" },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { variant: "body2", children: manualUpdateInfo.message }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Typography,
+                {
+                  variant: "body2",
+                  sx: {
+                    mt: 1,
+                    p: 1,
+                    backgroundColor: "background.default",
+                    borderRadius: 1,
+                    fontFamily: "monospace"
+                  },
+                  children: manualUpdateInfo.command
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+};
 const StyledCard$3 = styled$1(Card)(() => ({
   marginBottom: 32,
   backgroundColor: "background.paper",
@@ -90075,7 +92813,10 @@ const DEFAULT_SETTINGS_SECTIONS = [
 ];
 const systemPromptQueryKey = ["system-prompt"];
 const useSystemPrompt = () => {
+  const { shouldEnableQuery } = useConnectivityGate();
   return useQuery({
+    // Only enable the query if server is online (bypass internet check)
+    enabled: shouldEnableQuery({ bypassInternetCheck: true }),
     queryKey: systemPromptQueryKey,
     queryFn: async () => {
       try {
@@ -90090,7 +92831,7 @@ const useSystemPrompt = () => {
         return response.result;
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "An unknown error occurred while fetching system prompt";
-        y$1.error(errorMessage);
+        showErrorToast(errorMessage);
         throw error;
       }
     },
@@ -90824,6 +93565,7 @@ const App = () => {
     /* @__PURE__ */ jsxRuntimeExports.jsx(CssBaseline, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ModelsInitializer, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(OnboardingModal, { open: isOnboardingActive }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(ConnectivityBanner, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(UpdateNotification, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(SidebarNavigation, {}),
     /* @__PURE__ */ jsxRuntimeExports.jsx(MainContent, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Routes, { children: [