@ms-cloudpack/overlay 0.10.1 → 0.11.1

package/CHANGELOG.json

@@ -2,7 +2,65 @@
   "name": "@ms-cloudpack/overlay",
   "entries": [
     {
-      "date": "Wed, 23 Nov 2022 08:09:52 GMT",
+      "date": "Sat, 03 Dec 2022 08:10:22 GMT",
+      "tag": "@ms-cloudpack/overlay_v0.11.1",
+      "version": "0.11.1",
+      "comments": {
+        "none": [
+          {
+            "author": "dake.3601@gmail.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "9fae6cbdb788baac8236abc9eb44eb1d3296b7e0",
+            "comment": "Updated beachball config to disallow major bumps"
+          }
+        ],
+        "patch": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "d22dff84546bf87d94a59fac03695df0ce231de9",
+            "comment": "Minor React pattern fixes and status badge styling improvements"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 01 Dec 2022 08:10:47 GMT",
+      "tag": "@ms-cloudpack/overlay_v0.11.0",
+      "version": "0.11.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "dake.3601@gmail.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "c1fb917cde92231a591861419d0e99a5d02011ce",
+            "comment": "Added search box for tasks"
+          }
+        ],
+        "patch": [
+          {
+            "author": "dake.3601@gmail.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "77a0d57071c07b131cf391b9c876bf9307511110",
+            "comment": "Added handling for promise rejection event."
+          },
+          {
+            "author": "dake.3601@gmail.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "0281a406e564d378b22e14e5c209cfba12b08e98",
+            "comment": "Added valdiation request for unsupported paths."
+          },
+          {
+            "author": "dake.3601@gmail.com",
+            "package": "@ms-cloudpack/overlay",
+            "commit": "16d2ca58373fa04b9bdc901783d0095a3e3c5036",
+            "comment": "Single task cache busting"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 23 Nov 2022 08:10:05 GMT",
       "tag": "@ms-cloudpack/overlay_v0.10.1",
       "version": "0.10.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @ms-cloudpack/overlay
 
-This log was last generated on Wed, 23 Nov 2022 08:09:52 GMT and should not be manually modified.
+This log was last generated on Sat, 03 Dec 2022 08:10:22 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.11.1
+
+Sat, 03 Dec 2022 08:10:22 GMT
+
+### Patches
+
+- Minor React pattern fixes and status badge styling improvements (elcraig@microsoft.com)
+
+## 0.11.0
+
+Thu, 01 Dec 2022 08:10:47 GMT
+
+### Minor changes
+
+- Added search box for tasks (dake.3601@gmail.com)
+
+### Patches
+
+- Added handling for promise rejection event. (dake.3601@gmail.com)
+- Added valdiation request for unsupported paths. (dake.3601@gmail.com)
+- Single task cache busting (dake.3601@gmail.com)
+
 ## 0.10.1
 
-Wed, 23 Nov 2022 08:09:52 GMT
+Wed, 23 Nov 2022 08:10:05 GMT
 
 ### Patches
 

package/dist/lib/index.js

@@ -1,5 +1,5 @@
 // src/index.tsx
-import React13 from "react";
+import React14 from "react";
 import ReactDOM from "react-dom";
 
 // src/components/CloudpackProvider/CloudpackProvider.tsx
@@ -7,7 +7,7 @@ import React, { createContext, useState, useContext } from "react";
 
 // src/components/CloudpackProvider/getCookies.ts
 function getCookies() {
-  return document.cookie.split(";").map((s8) => s8.split("=")).reduce((current, nextValue) => {
+  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) {
@@ -29,13 +29,13 @@ function createCloudpackClient() {
     onActivate: ({ path }) => {
       const id = subCounter++;
       subIds[path.join("/")] = id;
-      sendMessage("subscribe", { path, id });
+      sendMessage({ type: "subscribe", data: { path, id } });
     },
     onDeactivate: ({ path }) => {
       const pathString = path.join("/");
       const id = subIds[pathString];
       delete subIds[pathString];
-      sendMessage("unsubscribe", { path, id });
+      sendMessage({ type: "unsubscribe", data: { path, id } });
     }
   });
   const enqueuedMessages = [];
@@ -43,6 +43,7 @@ function createCloudpackClient() {
   const apiUrl = cookies["cloudpack-api-url"];
   const currentSequence = cookies["cloudpack-session-sequence"];
   let socket;
+  let idCount = 0;
   function openConnection() {
     if (apiUrl && sessionId) {
       const newSocket = new WebSocket(apiUrl);
@@ -66,16 +67,45 @@ function createCloudpackClient() {
       socket = void 0;
     }
   }
-  function sendMessage(type, data) {
-    const message = JSON.stringify({ type, data });
+  function sendMessage({ type, requestId, data }) {
+    const message = JSON.stringify({ type, requestId, data });
     if (socket) {
       socket.send(message);
     } else {
       enqueuedMessages.push(message);
     }
   }
+  const activeRequests = {};
+  function sendRequest({ type, data }) {
+    const requestId = `${idCount++}`;
+    return new Promise((resolve, reject) => {
+      const timeoutId = setTimeout(() => {
+        if (activeRequests[requestId]) {
+          reject(new Error("Request timed out."));
+        }
+      }, 1e4);
+      activeRequests[requestId] = {
+        resolve: (data2) => {
+          delete activeRequests[requestId];
+          clearTimeout(timeoutId);
+          resolve(data2);
+        },
+        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;
@@ -104,22 +134,25 @@ function createCloudpackClient() {
     return bus.getData(sessionPath);
   }
   function openSource(options) {
-    sendMessage("openSource", options);
+    sendMessage({ type: "openSource", data: options });
   }
   function open(options) {
-    sendMessage("open", options);
+    sendMessage({ type: "open", data: options });
   }
   function editConfig() {
-    sendMessage("editConfig", {});
+    sendMessage({ type: "editConfig", data: {} });
   }
   function addOverride(options) {
-    sendMessage("addOverride", options);
+    sendMessage({ type: "addOverride", data: options });
+  }
+  function validateOverride(options) {
+    return sendRequest({ type: "validateOverride", data: options });
   }
   function restartAllTasks() {
-    sendMessage("restartAllTasks", {});
+    sendMessage({ type: "restartAllTasks", data: {} });
   }
-  function restartTask(id) {
-    sendMessage("restartTask", { id });
+  function restartTask(options) {
+    sendMessage({ type: "restartTask", data: options });
   }
   openConnection();
   return {
@@ -131,7 +164,8 @@ function createCloudpackClient() {
     editConfig,
     addOverride,
     restartTask,
-    restartAllTasks
+    restartAllTasks,
+    validateOverride
   };
 }
 
@@ -146,7 +180,7 @@ function CloudpackProvider({ children }) {
 var useCloudpack = () => useContext(CloudpackContext);
 
 // src/components/StatusOverlay/StatusOverlay.tsx
-import React11, { useCallback, useState as useState6, useRef as useRef3 } from "react";
+import React12, { useCallback as useCallback2, useState as useState6, useRef as useRef3 } from "react";
 
 // src/components/StatusBadge/StatusBadge.tsx
 import React2, { useRef } from "react";
@@ -220,6 +254,7 @@ var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
   height: 100%;
   width: 12px;
   cursor: move;
+  margin-right: -4px;
 }
 
 .mOWPxtXY-StatusBadgemodulecssgrip {
@@ -234,13 +269,12 @@ var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
 }
 
 .mOWPxtXY-StatusBadgemodulecssbadge {
-  cursor: default;
   position: absolute;
   bottom: 4px;
   right: 4px;
   font-size: 12px;
   display: inline-flex;
-  gap: 4px;
+  gap: 8px;
   background: #dddddd;
   box-shadow: 0 0 12px -6px rgba(0, 0, 0, 0.75);
   border: 1px solid #999999;
@@ -250,7 +284,8 @@ var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  padding: 2px;
+  padding: 3px;
+  padding-right: 8px;
 
   transition: background-color 0.2s ease-in-out;
 }
@@ -263,6 +298,7 @@ var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
   top: auto;
   left: auto;
   box-shadow: none;
+  padding-left: 8px;
 }
 
 .mOWPxtXY-StatusBadgemodulecssbuilding {
@@ -286,6 +322,7 @@ var compiledModule = `.mOWPxtXY-StatusBadgemodulecssfixedOverlay {
 }
 
 .mOWPxtXY-StatusBadgemodulecssbutton {
+  cursor: pointer;
   background: inherit;
   border: none;
   border-radius: 3px;
@@ -417,7 +454,7 @@ function getStatsString(status) {
 }
 
 // src/components/StatusDialog/StatusDialog.tsx
-import React8 from "react";
+import React9, { useCallback } from "react";
 
 // src/components/StatusDialog/TaskList.tsx
 import React6 from "react";
@@ -831,8 +868,8 @@ function TaskStatus({ task }) {
       column: 0
     });
   };
-  const restartTask = (id) => {
-    cloudpack.restartTask(id);
+  const restartTask = () => {
+    cloudpack.restartTask({ id: task.id, inputPath: task.inputPath });
   };
   return /* @__PURE__ */ React5.createElement("div", {
     className: TaskStatus_module_default.root
@@ -861,7 +898,7 @@ function TaskStatus({ task }) {
   }, getCompletion(task))), showContent && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement("div", {
     className: TaskStatus_module_default.commands
   }, /* @__PURE__ */ React5.createElement(Button, {
-    onClick: () => restartTask(task.id)
+    onClick: restartTask
   }, "Restart task")), /* @__PURE__ */ React5.createElement("div", {
     className: TaskStatus_module_default.content
   }, /* @__PURE__ */ React5.createElement("div", {
@@ -942,13 +979,14 @@ var root3 = "lTlVbGXBQHs-TaskListmodulecssroot";
 var TaskList_module_default = { root: root3 };
 
 // src/components/StatusDialog/TaskList.tsx
-function TaskList() {
+function TaskList({ searchFilter }) {
   const details = useStatusDetails();
   const tasks = (details.tasks || []).sort(sortTasks);
+  searchFilter = searchFilter?.toLowerCase();
   return /* @__PURE__ */ React6.createElement("div", {
     className: TaskList_module_default.root
-  }, tasks.map((task, index) => /* @__PURE__ */ React6.createElement(TaskStatus, {
-    key: index,
+  }, tasks.filter(({ name: name2 }) => !searchFilter || name2.toLowerCase().includes(searchFilter)).map((task) => /* @__PURE__ */ React6.createElement(TaskStatus, {
+    key: task.name,
     task
   })));
 }
@@ -1090,47 +1128,99 @@ function Dialog({ title: title3, style, draggable, onClose, commands: commands3,
     ref: draggableTargetRef,
     className: Dialog_module_default.title,
     style: { color: colorAccent, cursor: cursorDraggable }
-  }, title3), !!onClose && /* @__PURE__ */ React7.createElement("button", {
+  }, title3), onClose && /* @__PURE__ */ React7.createElement("button", {
     className: Dialog_module_default.closeButton,
     onClick: onClose,
     "aria-label": "Minimize overlay"
   }, /* @__PURE__ */ React7.createElement("img", {
     src: dismiss_16_filled_inline_default,
-    alt: "Close icon"
-  }))), !!commands3 && /* @__PURE__ */ React7.createElement("div", {
+    alt: ""
+  }))), commands3 && /* @__PURE__ */ React7.createElement("div", {
     className: Dialog_module_default.commands
   }, ...commands3), children));
 }
 
+// src/components/StatusDialog/Searchbox.tsx
+import React8 from "react";
+
+// src/components/StatusDialog/Searchbox.module.css
+var compiledModule7 = `.QFosMXkA-Searchboxmodulecsssearchbox {
+  position: absolute;
+  font-size: 14px;
+  font-weight: 400;
+  box-shadow: none;
+  padding: 0px 4px;
+  box-sizing: border-box;
+  color: rgb(50, 49, 48);
+  background-color: rgb(255, 255, 255);
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  border-radius: 2px;
+  border: 1px solid rgb(96, 94, 92);
+  height: 32px;
+  min-width: 160px;
+  top: 52px;
+  right: 20px;
+}
+`;
+var s7 = document.createElement("style");
+s7.setAttribute("data-sourceFile", "src/components/StatusDialog/Searchbox.module.css");
+s7.appendChild(document.createTextNode(compiledModule7));
+document.head.appendChild(s7);
+var searchbox = "QFosMXkA-Searchboxmodulecsssearchbox";
+var Searchbox_module_default = { searchbox };
+
+// src/components/StatusDialog/Searchbox.tsx
+function Searchbox({ value: value3, onChange }) {
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, typeof value3 === "string" && /* @__PURE__ */ React8.createElement("input", {
+    type: "text",
+    placeholder: "Search",
+    className: Searchbox_module_default.searchbox,
+    onChange,
+    value: value3
+  }));
+}
+
 // src/components/StatusDialog/StatusDialog.tsx
 function StatusDialog({ onClose }) {
   const cloudpack = useCloudpack();
+  const [searchFilter, setSearchFilter] = React9.useState("");
+  const handleSearchChange = useCallback((event) => {
+    event.preventDefault();
+    setSearchFilter(event.target.value);
+  }, []);
   const restartAllTasks = () => {
     cloudpack.restartAllTasks();
   };
-  return /* @__PURE__ */ React8.createElement(Dialog, {
+  return /* @__PURE__ */ React9.createElement(Dialog, {
     title: "Task results",
     draggable: true,
     onClose,
     commands: [
-      /* @__PURE__ */ React8.createElement(Button, {
+      /* @__PURE__ */ React9.createElement(Button, {
         primary: true,
         onClick: restartAllTasks,
         key: "1"
       }, "Restart all tasks")
     ]
-  }, /* @__PURE__ */ React8.createElement(TaskList, null));
+  }, /* @__PURE__ */ React9.createElement(Searchbox, {
+    value: searchFilter,
+    onChange: handleSearchChange
+  }), /* @__PURE__ */ React9.createElement(TaskList, {
+    searchFilter
+  }));
 }
 
 // src/components/ErrorDialog/ErrorDialog.tsx
-import { default as React10 } from "react";
+import { default as React11 } from "react";
 
 // src/components/ErrorDialog/PathError.tsx
-import React9 from "react";
+import React10 from "react";
 import { default as cx3 } from "classnames";
 function PathError(props) {
-  const [showContent, setshowContent] = React9.useState(false);
-  const { packageName, importPath, filename } = props;
+  const [showContent, setshowContent] = React10.useState(false);
+  const { packageName, importPath, filename, fixable } = props;
   const cloudpack = useCloudpack();
   const editConfig = () => {
     cloudpack.editConfig();
@@ -1138,47 +1228,47 @@ function PathError(props) {
   const addOverride = () => {
     cloudpack.addOverride({ packageName, importPath, filename });
   };
-  return /* @__PURE__ */ React9.createElement("div", {
+  return /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.root
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: cx3(TaskStatus_module_default.header, TaskStatus_module_default.error)
-  }, /* @__PURE__ */ React9.createElement("button", {
+  }, /* @__PURE__ */ React10.createElement("button", {
     className: TaskStatus_module_default.expandButton,
     onClick: () => setshowContent(!showContent),
     "aria-label": showContent ? `Minimize ${packageName}/${importPath}` : `Expand ${packageName}/${importPath}`
-  }, /* @__PURE__ */ React9.createElement("img", {
+  }, /* @__PURE__ */ React10.createElement("img", {
     className: cx3(TaskStatus_module_default.expandIcon, !showContent && TaskStatus_module_default.collapsed),
     src: chevrondown_20_inline_default,
     alt: "Chevron down icon"
-  })), /* @__PURE__ */ React9.createElement("img", {
+  })), /* @__PURE__ */ React10.createElement("img", {
     className: TaskStatus_module_default.errorIcon,
     src: error_24_inline_default,
     alt: "Error icon"
-  }), /* @__PURE__ */ React9.createElement("div", {
+  }), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.title
-  }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("div", {
+  }, `${packageName}/${importPath}`)), showContent && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.commands
-  }, /* @__PURE__ */ React9.createElement(Button, {
+  }, fixable && /* @__PURE__ */ React10.createElement(Button, {
     onClick: addOverride
-  }, "Add override"), /* @__PURE__ */ React9.createElement(Button, {
+  }, "Add override"), /* @__PURE__ */ React10.createElement(Button, {
     onClick: editConfig
-  }, "Edit config file")), /* @__PURE__ */ React9.createElement("div", {
+  }, "Edit config file")), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.content
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.title
-  }, "Details"), /* @__PURE__ */ React9.createElement("div", {
+  }, "Details"), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.nameValueArea
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.name
-  }, "Problem"), /* @__PURE__ */ React9.createElement("div", {
+  }, "Problem"), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.value
-  }, `A deep import package name: "${packageName}" was imported, but was unrecognized as an exported entry path: "${importPath}".`)), /* @__PURE__ */ React9.createElement("div", {
+  }, `A deep import package name: "${packageName}" was imported, but was unrecognized as an exported entry path: "${importPath}".`)), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.nameValueArea
-  }, /* @__PURE__ */ React9.createElement("div", {
+  }, /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.name
-  }, "Solution"), /* @__PURE__ */ React9.createElement("div", {
+  }, "Solution"), /* @__PURE__ */ React10.createElement("div", {
     className: TaskStatus_module_default.value
-  }, `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${importPath}")`)))));
+  }, fixable ? `Remove the path from the import in your source. (Import from "${packageName}" rather than "${packageName}/${importPath}")` : `Import not found on package. Make sure the import path is valid.`)))));
 }
 
 // src/components/ErrorDialog/ErrorDialog.tsx
@@ -1187,19 +1277,19 @@ function ErrorDialog({ unsupported }) {
   const reload = () => {
     cloudpack.restartAllTasks();
   };
-  return /* @__PURE__ */ React10.createElement(Dialog, {
+  return /* @__PURE__ */ React11.createElement(Dialog, {
     title: "Found unsupported paths in your project",
     style: "error",
     commands: [
-      /* @__PURE__ */ React10.createElement(Button, {
+      /* @__PURE__ */ React11.createElement(Button, {
         primary: true,
         onClick: reload,
         key: "1"
       }, "Restart all tasks")
     ]
-  }, /* @__PURE__ */ React10.createElement("div", {
+  }, /* @__PURE__ */ React11.createElement("div", {
     className: TaskList_module_default.root
-  }, unsupported.map((data, index) => /* @__PURE__ */ React10.createElement(PathError, {
+  }, unsupported.map((data, index) => /* @__PURE__ */ React11.createElement(PathError, {
     ...data,
     key: index
   }))));
@@ -1208,12 +1298,19 @@ function ErrorDialog({ unsupported }) {
 // src/components/ErrorDialog/useErrorEvents.ts
 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;
+};
+var hasMessage = (event) => {
+  return reasonIsRecord(event) && typeof event.reason.message === "string";
+};
 var useErrorEvents = () => {
-  const [events, setEvents] = useState5({ unsupported: [] });
+  const [errorEvents, setErrorEvents] = useState5({ unsupported: [] });
+  const cloudpack = useCloudpack();
   useEffect4(() => {
-    const handleError = (event) => {
+    const handleUnsupportedError = (message, filename) => {
       const errorRegex = /[Mm]odule specifier,? ['"](.*?)['"]/;
-      const match = event.message.match(errorRegex);
+      const match = message.match(errorRegex);
       if (match) {
         const importString = parseImportString(match[1]);
         const { packageName = "" } = importString;
@@ -1223,64 +1320,78 @@ var useErrorEvents = () => {
         } else if (importPath.startsWith("./")) {
           importPath = importPath.slice(2);
         }
-        setEvents((prevEvents) => ({
-          ...prevEvents,
-          unsupported: [...prevEvents.unsupported, { packageName, importPath, filename: event.filename }]
-        }));
+        (async () => {
+          const { fixable } = await cloudpack.validateOverride({ packageName, importPath, filename });
+          setErrorEvents((prev) => ({
+            ...prev,
+            unsupported: [...prev.unsupported, { packageName, importPath, filename, fixable }]
+          }));
+        })().catch(() => {
+        });
       }
     };
-    window.uncaughtErrors = window.uncaughtErrors || { errors: [], unregister: () => void 0 };
     window.uncaughtErrors.unregister();
-    window.addEventListener("error", handleError);
+    window.addEventListener("error", (event) => {
+      handleUnsupportedError(event.message, event.filename);
+    });
     for (const error3 of window.uncaughtErrors.errors) {
-      handleError(error3);
+      handleUnsupportedError(error3.message, error3.filename);
     }
-  }, []);
-  return events;
+    window.uncaughtRejections.unregister();
+    window.addEventListener("unhandledrejection", (event) => {
+      hasMessage(event) && handleUnsupportedError(event.reason.message);
+    });
+    for (const error3 of window.uncaughtRejections.errors) {
+      hasMessage(error3) && handleUnsupportedError(error3.reason.message);
+    }
+  }, [cloudpack]);
+  return errorEvents;
 };
 
 // src/components/StatusOverlay/StatusOverlay.tsx
 function StatusOverlay() {
   const [isExpanded, setIsExpanded] = useState6(false);
   const status = useStatus();
-  const internal = useRef3();
+  const prevStatus = useRef3();
   const { unsupported } = useErrorEvents();
-  if (isExpanded === false && internal.current?.status !== "idle" && status.status === "idle" && internal.current?.totalErrors != status.totalErrors) {
-    setIsExpanded(true);
-  }
-  internal.current = status;
-  const toggleMinimized = useCallback(() => {
+  React12.useEffect(() => {
+    if (!isExpanded && prevStatus.current?.status !== "idle" && status.status === "idle" && (prevStatus.current?.totalErrors || 0) !== (status.totalErrors || 0)) {
+      setIsExpanded(true);
+    }
+    prevStatus.current = status;
+  }, [status, isExpanded]);
+  const toggleMinimized = useCallback2(() => {
     console.log(`Toggling minimized state to ${!isExpanded}`);
     setIsExpanded(!isExpanded);
-  }, [isExpanded, setIsExpanded]);
-  return /* @__PURE__ */ React11.createElement("div", null, !!unsupported.length && /* @__PURE__ */ React11.createElement(ErrorDialog, {
+  }, [isExpanded]);
+  return unsupported.length ? /* @__PURE__ */ React12.createElement(ErrorDialog, {
     unsupported
-  }), !unsupported.length && !isExpanded && /* @__PURE__ */ React11.createElement(StatusBadge, {
-    onExpand: toggleMinimized
-  }), !unsupported.length && isExpanded && /* @__PURE__ */ React11.createElement(StatusDialog, {
+  }) : isExpanded ? /* @__PURE__ */ React12.createElement(StatusDialog, {
     onClose: toggleMinimized
-  }));
+  }) : /* @__PURE__ */ React12.createElement(StatusBadge, {
+    onExpand: toggleMinimized
+  });
 }
 
 // src/components/ThemeProvider/ThemeProvider.tsx
-import React12 from "react";
+import React13 from "react";
 
 // src/components/ThemeProvider/ThemeProvider.module.css
-var compiledModule7 = `.xwrpHYTQE-ThemeProvidermodulecssroot {
+var compiledModule8 = `.xwrpHYTQE-ThemeProvidermodulecssroot {
   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans',
     'Droid Sans', 'Helvetica Neue', sans-serif;
 }
 `;
-var s7 = document.createElement("style");
-s7.setAttribute("data-sourceFile", "src/components/ThemeProvider/ThemeProvider.module.css");
-s7.appendChild(document.createTextNode(compiledModule7));
-document.head.appendChild(s7);
+var s8 = document.createElement("style");
+s8.setAttribute("data-sourceFile", "src/components/ThemeProvider/ThemeProvider.module.css");
+s8.appendChild(document.createTextNode(compiledModule8));
+document.head.appendChild(s8);
 var root4 = "xwrpHYTQE-ThemeProvidermodulecssroot";
 var ThemeProvider_module_default = { root: root4 };
 
 // src/components/ThemeProvider/ThemeProvider.tsx
 function ThemeProvider({ children }) {
-  return /* @__PURE__ */ React12.createElement("div", {
+  return /* @__PURE__ */ React13.createElement("div", {
     className: ThemeProvider_module_default.root
   }, children);
 }
@@ -1288,7 +1399,7 @@ function ThemeProvider({ children }) {
 // src/index.tsx
 var rootDiv = document.createElement("div");
 ReactDOM.render(
-  /* @__PURE__ */ React13.createElement(ThemeProvider, null, /* @__PURE__ */ React13.createElement(CloudpackProvider, null, /* @__PURE__ */ React13.createElement(StatusOverlay, null))),
+  /* @__PURE__ */ React14.createElement(ThemeProvider, null, /* @__PURE__ */ React14.createElement(CloudpackProvider, null, /* @__PURE__ */ React14.createElement(StatusOverlay, null))),
   rootDiv
 );
 document.body.appendChild(rootDiv);