@ms-cloudpack/overlay 0.16.112 → 0.17.0

package/dist/browser-esm/lib/index.js

@@ -8,183 +8,24 @@ import React15 from "react";
 import ReactDOM from "react-dom";
 
 // packages/overlay/src/components/CloudpackProvider/CloudpackProvider.tsx
-import React, { createContext, useState, useContext } from "react";
-
-// packages/overlay/src/components/CloudpackProvider/getCookies.ts
-function getCookies() {
-  return document.cookie.split(";").map((s9) => s9.split("=")).reduce((current, nextValue) => {
-    const name2 = nextValue[0]?.trim();
-    const value3 = decodeURIComponent(nextValue[1]?.trim());
-    if (name2 && value3) {
-      current[name2] = value3;
-    }
-    return current;
-  }, {});
-}
-
-// packages/overlay/src/components/CloudpackProvider/createCloudpackClient.ts
-import { createDataBus } from "@ms-cloudpack/data-bus";
-function createCloudpackClient() {
-  const cookies = getCookies();
-  const bus = createDataBus();
-  let subCounter = 0;
-  const subIds = {};
-  bus.addProvider({
-    path: [],
-    onActivate: ({ path }) => {
-      const id = subCounter++;
-      subIds[path.join("/")] = id;
-      sendMessage({ type: "subscribe", data: { path, id } });
-    },
-    onDeactivate: ({ path }) => {
-      const pathString = path.join("/");
-      const id = subIds[pathString];
-      delete subIds[pathString];
-      sendMessage({ type: "unsubscribe", data: { path, id } });
-    }
-  });
-  const enqueuedMessages = [];
-  const sessionId = cookies[cookieNames.sessionId];
-  const apiUrl = cookies[cookieNames.apiUrl];
-  const currentSequence = cookies[cookieNames.sessionSequence];
-  let socket;
-  let idCount = 0;
-  function openConnection() {
-    if (apiUrl && sessionId) {
-      const newSocket = new WebSocket(apiUrl);
-      newSocket.onopen = () => {
-        console.log("socket opened");
-        socket = newSocket;
-        socket.onmessage = onMessageReceived;
-        socket.onclose = () => {
-          socket = void 0;
-        };
-        for (const message of enqueuedMessages) {
-          socket.send(message);
-        }
-        enqueuedMessages.length = 0;
-      };
-    }
-  }
-  function sendMessage(options) {
-    const { type, requestId, data } = options;
-    const message = JSON.stringify({ type, requestId, data });
-    if (socket) {
-      socket.send(message);
-    } else {
-      enqueuedMessages.push(message);
-    }
-  }
-  const activeRequests = {};
-  function sendRequest(options) {
-    const { type, data } = options;
-    const requestId = `${idCount++}`;
-    return new Promise((resolve, reject) => {
-      const timeoutId = setTimeout(() => {
-        if (activeRequests[requestId]) {
-          reject(new Error("Request timed out."));
-        }
-      }, 1e4);
-      activeRequests[requestId] = {
-        resolve: (resultData) => {
-          delete activeRequests[requestId];
-          clearTimeout(timeoutId);
-          resolve(resultData);
-        },
-        reject: (error3) => {
-          delete activeRequests[requestId];
-          clearTimeout(timeoutId);
-          reject(error3);
-        }
-      };
-      sendMessage({ type, requestId, data });
-    });
-  }
-  function onMessageReceived(message) {
-    const response = JSON.parse(message.data);
-    const requestId = response.requestId;
-    if (requestId !== void 0) {
-      activeRequests[requestId].resolve(response.data);
-      return;
-    }
-    switch (response.type) {
-      case "notify": {
-        const { path, data } = response;
-        bus.publish(path, data);
-        break;
-      }
-      case "reload": {
-        window.location.reload();
-        break;
-      }
-      case "sequence": {
-        const { sequence } = response;
-        if (Number(sequence) > Number(currentSequence)) {
-          window.location.reload();
-        }
-        break;
-      }
-    }
-  }
-  openConnection();
-  const client = {
-    dispose: () => {
-      socket?.close();
-      socket = void 0;
-    },
-    getValue: (path) => {
-      return bus.getData(path);
-    },
-    open: (options) => {
-      sendMessage({ type: "open", data: options });
-    },
-    openSource: (options) => {
-      sendMessage({ type: "openSource", data: options });
-    },
-    subscribe: (path, callback) => {
-      return bus.subscribe(path, callback);
-    },
-    editConfig: () => {
-      sendMessage({ type: "editConfig", data: {} });
-    },
-    addOverride: (options) => {
-      sendMessage({ type: "addOverride", data: options });
-    },
-    restartTask: (options) => {
-      sendMessage({ type: "restartTask", data: options });
-    },
-    restartAllTasks: () => {
-      sendMessage({ type: "restartAllTasks", data: {} });
-    },
-    validateOverride: (options) => {
-      return sendRequest({ type: "validateOverride", data: options });
-    },
-    reportMetric: (options) => {
-      sendMessage({ type: "reportMetric", data: options });
-    }
-  };
-  return client;
-}
-
-// packages/overlay/src/components/CloudpackProvider/CloudpackProvider.tsx
+import React, { createContext, useContext } from "react";
 var CloudpackContext = createContext(null);
-function CloudpackProvider({ children }) {
-  const [client] = useState(createCloudpackClient);
+function CloudpackProvider({ client, children }) {
   return /* @__PURE__ */ React.createElement(CloudpackContext.Provider, { value: client }, children);
 }
 var useCloudpack = () => useContext(CloudpackContext);
 
 // packages/overlay/src/components/StatusOverlay/StatusOverlay.tsx
-import React13, { useCallback as useCallback3, useState as useState7, useRef as useRef3 } from "react";
+import React13, { useCallback as useCallback3, useState as useState6, useRef as useRef3 } from "react";
 
 // packages/overlay/src/components/StatusBadge/StatusBadge.tsx
-import React2, { useCallback, useRef, useState as useState4 } from "react";
+import React2, { useCallback, useRef, useState as useState3 } from "react";
 
 // packages/overlay/src/hooks/useDraggable.ts
-import { useEffect, useState as useState2 } from "react";
+import { useEffect, useState } from "react";
 function useDraggable(options) {
   const { enabled, containerElementRef, dragElementRef } = options;
-  const [isDragging, setIsDragging] = useState2(false);
+  const [isDragging, setIsDragging] = useState(false);
   useEffect(() => {
     const moveTarget = containerElementRef?.current;
     const dragTarget = dragElementRef?.current;
@@ -386,7 +227,7 @@ var StatusBadge_module_default = { badge, building, button, chevron, collapsed,
 import { default as cx } from "classnames";
 
 // packages/overlay/src/components/CloudpackProvider/useStatus.ts
-import { useEffect as useEffect2, useState as useState3 } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 import { taskStatsSource } from "@ms-cloudpack/api-server/browser";
 var defaultStatus = {
   status: "unknown",
@@ -396,9 +237,18 @@ var defaultStatus = {
   totalWarnings: 0
 };
 var useStatus = () => {
-  const service = useCloudpack();
-  const [status, setStatus] = useState3(() => service?.getValue(taskStatsSource) || defaultStatus);
-  useEffect2(() => service?.subscribe(taskStatsSource, setStatus), [service]);
+  const cloudpack = useCloudpack();
+  const [status, setStatus] = useState2(defaultStatus);
+  useEffect2(() => {
+    const subscription = cloudpack?.onDataChanged.subscribe(taskStatsSource, {
+      onData: (data) => {
+        setStatus(data);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [cloudpack]);
   return status;
 };
 
@@ -408,7 +258,7 @@ function StatusBadge({ inline: inline2, onExpand, pageLoadTime }) {
   const rootElementRef = useRef(null);
   const dragElementRef = useRef(null);
   const status = useStatus();
-  const [isCollapsed, setIsCollapsed] = useState4(!!localStorage.getItem(badgeStatusKey));
+  const [isCollapsed, setIsCollapsed] = useState3(!!localStorage.getItem(badgeStatusKey));
   const shouldRender = status.status !== "unknown";
   const toggleBadgeVisibility = useCallback(() => {
     const newCollapsedState = !isCollapsed;
@@ -569,10 +419,10 @@ var TaskResultItem_module_default = { actionArea, content, file, root, statusBar
 
 // packages/overlay/src/components/StatusDialog/TaskResultItem.tsx
 function TaskResultItem({ item, projectPath, index }) {
-  const service = useCloudpack();
+  const cloudpack = useCloudpack();
   const openSource = (ev) => {
     if (item.location) {
-      service.openSource({
+      void cloudpack.openCodeEditor.mutate({
         rootPath: projectPath,
         relativePath: item.location?.file,
         line: item.location?.line,
@@ -859,22 +709,31 @@ function getCompletion(task) {
 }
 function TaskStatus({ task }) {
   const [isOpen, setIsOpen] = React5.useState(void 0);
-  const { name: name2, warnings, errors } = task;
+  const { name: name2, warnings = [], errors = [] } = task;
   const cloudpack = useCloudpack();
-  const showContent = isOpen === true || isOpen === void 0 && task.errors?.length > 0;
+  const showContent = isOpen === true || isOpen === void 0 && errors?.length > 0;
+  const inputPath = task.inputPath;
   const open = (rootPath) => {
-    cloudpack.open({
+    void cloudpack.openFilePath.mutate({
       rootPath
     });
   };
   const openPackage = () => {
-    cloudpack.openSource({
-      rootPath: task.inputPath,
+    if (!inputPath) {
+      console.error("No input path for task", task);
+      return;
+    }
+    void cloudpack.openCodeEditor.mutate({
+      rootPath: inputPath,
       relativePath: "package.json"
     });
   };
   const restartTask = () => {
-    cloudpack.restartTask({ id: task.id, inputPath: task.inputPath });
+    if (!inputPath) {
+      console.error("No input path for task", task);
+      return;
+    }
+    void cloudpack.restartTask.mutate({ id: task.id, inputPath });
   };
   return /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React5.createElement("div", { className: getHeaderClassName(task) }, /* @__PURE__ */ React5.createElement(
     "button",
@@ -891,23 +750,33 @@ function TaskStatus({ task }) {
         alt: "Chevron down icon"
       }
     )
-  ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, name2), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.farArea }, getCompletion(task))), showContent && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.commands }, /* @__PURE__ */ React5.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Input path"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.value }, /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.inputPath) }, task.inputPath), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: openPackage }, "(Package.json)"))), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Output path"), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(task.outputPath) }, task.outputPath)), errors?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Errors"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, errors.map((error3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: error3, projectPath: task.inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Warnings"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, warnings.map((warning3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: warning3, projectPath: task.inputPath, index: index + 1 })))))));
+  ), errors?.length === 0 && warnings?.length === 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: success_24_inline_default, alt: "Success icon" }), errors?.length > 0 && /* @__PURE__ */ React5.createElement("img", { className: TaskStatus_module_default.errorIcon, src: error_24_inline_default, alt: "Error icon" }), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, name2), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.farArea }, getCompletion(task))), showContent && (inputPath ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.commands }, /* @__PURE__ */ React5.createElement(Button, { onClick: restartTask }, "Restart task")), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.content }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Details"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Input path"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.value }, /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(inputPath) }, task.inputPath), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: openPackage }, "(Package.json)"))), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.nameValueArea }, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.name }, "Output path"), /* @__PURE__ */ React5.createElement("button", { className: TaskStatus_module_default.linkButton, onClick: () => open(inputPath) }, task.outputPath)), errors?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Errors"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, errors.map((error3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: error3, projectPath: inputPath, index: index + 1 })))), warnings?.length > 0 && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.title }, "Warnings"), /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.resultItems }, warnings.map((warning3, index) => /* @__PURE__ */ React5.createElement(TaskResultItem, { key: index, item: warning3, projectPath: inputPath, index: index + 1 })))))) : /* @__PURE__ */ React5.createElement("div", { className: TaskStatus_module_default.content }, "No input path found for task. This is a Cloudpack bug. Please report it.")));
 }
 function getHeaderClassName(task) {
+  const { errors = [], warnings = [] } = task;
   return cx2(TaskStatus_module_default.header, {
-    [TaskStatus_module_default.success]: task.errors?.length === 0 && task.warnings?.length === 0,
-    [TaskStatus_module_default.warning]: task.errors?.length === 0 && task.warnings?.length > 0,
-    [TaskStatus_module_default.error]: task.errors?.length > 0
+    [TaskStatus_module_default.success]: errors?.length === 0 && warnings?.length === 0,
+    [TaskStatus_module_default.warning]: errors?.length === 0 && warnings?.length > 0,
+    [TaskStatus_module_default.error]: errors?.length > 0
   });
 }
 
 // packages/overlay/src/components/CloudpackProvider/useStatusDetails.ts
-import { useEffect as useEffect3, useState as useState5 } from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
 import { taskListSource } from "@ms-cloudpack/api-server/browser";
 var useStatusDetails = () => {
-  const service = useCloudpack();
-  const [details, setDetails] = useState5({ tasks: [] });
-  useEffect3(() => service?.subscribe(taskListSource, setDetails), [service]);
+  const cloudpack = useCloudpack();
+  const [details, setDetails] = useState4({ tasks: [] });
+  useEffect3(() => {
+    const subscription = cloudpack?.onDataChanged.subscribe(taskListSource, {
+      onData: (data) => {
+        setDetails(data);
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [cloudpack]);
   return details;
 };
 
@@ -937,7 +806,7 @@ function TaskList({ searchFilter, issuesOnly }) {
   let filteredTasks = tasks;
   if (searchFilter) {
     searchFilter = searchFilter.toLowerCase();
-    filteredTasks = filteredTasks.filter(({ name: name2 }) => searchFilter && name2.toLowerCase().includes(searchFilter));
+    filteredTasks = filteredTasks.filter(({ name: name2 }) => searchFilter && name2?.toLowerCase().includes(searchFilter));
   }
   if (issuesOnly) {
     filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);
@@ -955,6 +824,13 @@ function sortTasks(a, b) {
   if (aErrors !== bErrors) {
     return aErrors > bErrors ? -1 : 1;
   }
+  if (a.name === void 0 && b.name === void 0) {
+    return a.id < b.id ? -1 : 1;
+  } else if (a.name === void 0) {
+    return 1;
+  } else if (b.name === void 0) {
+    return -1;
+  }
   return a.name < b.name ? -1 : 1;
 }
 
@@ -1133,7 +1009,7 @@ function StatusDialog({ onClose }) {
     setSearchFilter(event.target.value);
   }, []);
   const restartAllTasks = () => {
-    cloudpack.restartAllTasks();
+    void cloudpack.restartAllTasks.mutate();
   };
   const toggleIssuesOnly = () => setIssuesOnly((value3) => !value3);
   return /* @__PURE__ */ React9.createElement(
@@ -1164,10 +1040,10 @@ function PathError(props) {
   const { packageName, importPath, issuerUrl, fixable } = props;
   const cloudpack = useCloudpack();
   const editConfig = () => {
-    cloudpack.editConfig();
+    void cloudpack.openConfigEditor.mutate();
   };
   const addOverride = () => {
-    cloudpack.addOverride({ packageName, importPath, issuerUrl });
+    void cloudpack.addPackageOverride.mutate({ packageName, importPath, issuerUrl });
   };
   return /* @__PURE__ */ React10.createElement("div", { className: TaskStatus_module_default.root }, /* @__PURE__ */ React10.createElement("div", { className: cx3(TaskStatus_module_default.header, TaskStatus_module_default.error) }, /* @__PURE__ */ React10.createElement(
     "button",
@@ -1191,7 +1067,7 @@ function PathError(props) {
 function ErrorDialog({ unsupported }) {
   const cloudpack = useCloudpack();
   const reload = () => {
-    cloudpack.restartAllTasks();
+    void cloudpack.restartAllTasks.mutate();
   };
   return /* @__PURE__ */ React11.createElement(
     Dialog,
@@ -1208,7 +1084,7 @@ function ErrorDialog({ unsupported }) {
 }
 
 // packages/overlay/src/components/ErrorDialog/useErrorEvents.ts
-import { useEffect as useEffect4, useState as useState6 } from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { parseImportString } from "@ms-cloudpack/path-string-parsing";
 var reasonIsRecord = (event) => {
   return typeof event.reason === "object" && !Array.isArray(event.reason) && event.reason !== null;
@@ -1217,7 +1093,7 @@ var hasMessage = (event) => {
   return reasonIsRecord(event) && typeof event.reason.message === "string";
 };
 var useErrorEvents = () => {
-  const [errorEvents, setErrorEvents] = useState6({ unsupported: [] });
+  const [errorEvents, setErrorEvents] = useState5({ unsupported: [] });
   const cloudpack = useCloudpack();
   useEffect4(() => {
     const handleUnsupportedError = (message, issuerUrl) => {
@@ -1228,7 +1104,7 @@ var useErrorEvents = () => {
         const { packageName } = importString;
         const importPath = importString.importPath.replace(/^\.\//, "");
         (async () => {
-          const { fixable } = await cloudpack.validateOverride({ packageName, importPath, issuerUrl });
+          const { fixable } = await cloudpack.validatePackageOverride.query({ packageName, importPath, issuerUrl });
           setErrorEvents((prev) => ({
             ...prev,
             unsupported: [...prev.unsupported, { packageName, importPath, issuerUrl, fixable }]
@@ -1265,8 +1141,8 @@ function usePageLoadTimeReporter() {
       const { getPageLoadTime, getBrowserCacheRatio } = window.__cloudpack;
       const newPageLoadTime = await getPageLoadTime();
       setPageLoadTime(newPageLoadTime);
-      cloudpack.reportMetric({ metric: "PAGE_LOAD_TIME", value: newPageLoadTime });
-      cloudpack.reportMetric({ metric: "BROWSER_CACHE_RATIO", value: getBrowserCacheRatio() });
+      await cloudpack.reportMetric.mutate({ metric: "PAGE_LOAD_TIME", value: newPageLoadTime });
+      await cloudpack.reportMetric.mutate({ metric: "BROWSER_CACHE_RATIO", value: getBrowserCacheRatio() });
     }
     void reportPageLoadTime();
   }, [cloudpack]);
@@ -1276,7 +1152,7 @@ function usePageLoadTimeReporter() {
 // packages/overlay/src/components/StatusOverlay/StatusOverlay.tsx
 function StatusOverlay() {
   const pageLoadTime = usePageLoadTimeReporter();
-  const [isExpanded, setIsExpanded] = useState7(false);
+  const [isExpanded, setIsExpanded] = useState6(false);
   const status = useStatus();
   const prevStatus = useRef3();
   const { unsupported } = useErrorEvents();
@@ -1326,11 +1202,44 @@ function ThemeProvider({ children }) {
 }
 
 // packages/overlay/src/index.tsx
-var rootDiv = document.createElement("div");
-rootDiv.id = elementIds.root;
-ReactDOM.render(
-  /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(CloudpackProvider, null, /* @__PURE__ */ React15.createElement(StatusOverlay, null))),
-  rootDiv
-);
-document.body.appendChild(rootDiv);
+import { createCloudpackClient, reloadCountSource } from "@ms-cloudpack/api-server/browser";
+
+// packages/overlay/src/components/CloudpackProvider/getCookies.ts
+function getCookies() {
+  return document.cookie.split(";").map((s9) => s9.split("=")).reduce((current, nextValue) => {
+    const name2 = nextValue[0]?.trim();
+    const value3 = decodeURIComponent(nextValue[1]?.trim());
+    if (name2 && value3) {
+      current[name2] = value3;
+    }
+    return current;
+  }, {});
+}
+
+// packages/overlay/src/index.tsx
+async function start() {
+  const cookies = getCookies();
+  const sessionId = cookies[cookieNames.sessionId];
+  const apiUrl = cookies[cookieNames.apiUrl];
+  const currentSequence = cookies[cookieNames.sessionSequence];
+  const client = await createCloudpackClient({ url: apiUrl });
+  if (sessionId === await client.getSessionId.query()) {
+    console.log("[Cloudpack] socket opened");
+  }
+  client.onDataChanged.subscribe(reloadCountSource, {
+    onData: (data) => {
+      if (Number(data) > Number(currentSequence)) {
+        window.location.reload();
+      }
+    }
+  });
+  const rootDiv = document.createElement("div");
+  rootDiv.id = elementIds.root;
+  ReactDOM.render(
+    /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(CloudpackProvider, { client }, /* @__PURE__ */ React15.createElement(StatusOverlay, null))),
+    rootDiv
+  );
+  document.body.appendChild(rootDiv);
+}
+void start();
 //# sourceMappingURL=index.js.map