@mochabug/adapt-web 1.0.0-rc61 → 1.0.0-rc62

package/dist/esm/index.js

@@ -118,6 +118,12 @@ const DEFAULT_STYLES = `
   --mb-adapt-cap-spinner-bg: #334155;
   --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
   --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
+
+  /* Status card dark mode */
+  --mb-adapt-status-card-bg: #1e293b;
+  --mb-adapt-status-card-border: #334155;
+  --mb-adapt-status-icon-bg: #351c1c;
+  --mb-adapt-status-text: #e2e8f0;
 }
 
 .mb-adapt__wrapper {
@@ -566,13 +572,50 @@ cap-widget::part(attribution) {
   width: 100%;
   height: 100%;
   min-height: 200px;
-  color: #6b7280;
+  background: transparent;
+}
+
+.mb-adapt__status-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px 40px;
+  max-width: 380px;
+  border-radius: 16px;
+  background: var(--mb-adapt-status-card-bg, #ffffff);
+  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   font-family: system-ui, -apple-system, sans-serif;
-  font-size: 16px;
-  border-radius: var(--mb-adapt-border-radius);
-  background: var(--mb-adapt-banner-bg);
-  border: 1px solid var(--mb-adapt-banner-border);
+  text-align: center;
 }
+
+.mb-adapt__status-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mb-adapt-status-icon-bg, #fef2f2);
+}
+
+.mb-adapt__status-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mb-adapt__status-icon--stopped {
+  background: var(--mb-adapt-status-icon-bg, #f3f4f6);
+}
+
+.mb-adapt__status-text {
+  color: var(--mb-adapt-status-text, #374151);
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 0;
+}
+
 `;
 /**
  * Browser client for rendering Adapt automation sessions in iframes.
@@ -1575,7 +1618,7 @@ export class AdaptWebClient {
                 this.mainIframe.classList.remove("mb-adapt__iframe--visible");
                 this.mainIframe.classList.add("mb-adapt__iframe--hidden");
             }
-            this.showStatusMessage(this.options.text?.stopped ?? "This session has been stopped");
+            this.showStatusMessage(this.options.text?.stopped ?? "This session has been stopped", "stopped");
             return;
         }
         // Fork stopped — remove from queue
@@ -2116,7 +2159,7 @@ export class AdaptWebClient {
         });
         return iframe;
     }
-    showStatusMessage(text) {
+    showStatusMessage(text, kind = "error") {
         if (!this.mainFrameElement && !this.mainContainer)
             return;
         // Remove existing message if any
@@ -2126,10 +2169,29 @@ export class AdaptWebClient {
             this.mainIframe.classList.remove("mb-adapt__iframe--visible");
             this.mainIframe.classList.add("mb-adapt__iframe--hidden");
         }
+        // Build card structure
         this.statusMessageElement = document.createElement("div");
         this.statusMessageElement.className =
             this.options.classNames?.statusMessage ?? "mb-adapt__status-message";
-        this.statusMessageElement.textContent = text;
+        const card = document.createElement("div");
+        card.className = "mb-adapt__status-card";
+        // Icon
+        const iconWrap = document.createElement("div");
+        iconWrap.className =
+            kind === "stopped"
+                ? "mb-adapt__status-icon mb-adapt__status-icon--stopped"
+                : "mb-adapt__status-icon";
+        iconWrap.innerHTML =
+            kind === "stopped"
+                ? `<svg viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>`
+                : `<svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+        card.appendChild(iconWrap);
+        // Text
+        const msg = document.createElement("p");
+        msg.className = "mb-adapt__status-text";
+        msg.textContent = text;
+        card.appendChild(msg);
+        this.statusMessageElement.appendChild(card);
         const parent = this.mainFrameElement || this.mainContainer;
         // Ensure the parent frame is visible so the status message can be seen
         parent.classList.remove("mb-adapt__frame--hidden");

package/dist/umd/adapt-web.js

@@ -7549,7 +7549,7 @@ var MbAdapt = (() => {
   // src/index.ts
   if (typeof window !== "undefined" && true && !window.CAP_CUSTOM_WASM_URL) {
     window.CAP_CUSTOM_WASM_URL = new URL(
-      "https://cdn.mochabug.com/adapt/web/1.0.0-rc61/cap_wasm.js",
+      "https://cdn.mochabug.com/adapt/web/1.0.0-rc62/cap_wasm.js",
       window.location.href
     ).href;
   }
@@ -7642,6 +7642,12 @@ var MbAdapt = (() => {
   --mb-adapt-cap-spinner-bg: #334155;
   --mb-adapt-cap-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
   --mb-adapt-cap-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.2);
+
+  /* Status card dark mode */
+  --mb-adapt-status-card-bg: #1e293b;
+  --mb-adapt-status-card-border: #334155;
+  --mb-adapt-status-icon-bg: #351c1c;
+  --mb-adapt-status-text: #e2e8f0;
 }
 
 .mb-adapt__wrapper {
@@ -8090,13 +8096,50 @@ cap-widget::part(attribution) {
   width: 100%;
   height: 100%;
   min-height: 200px;
-  color: #6b7280;
+  background: transparent;
+}
+
+.mb-adapt__status-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  padding: 32px 40px;
+  max-width: 380px;
+  border-radius: 16px;
+  background: var(--mb-adapt-status-card-bg, #ffffff);
+  border: 1px solid var(--mb-adapt-status-card-border, #e5e7eb);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
   font-family: system-ui, -apple-system, sans-serif;
-  font-size: 16px;
-  border-radius: var(--mb-adapt-border-radius);
-  background: var(--mb-adapt-banner-bg);
-  border: 1px solid var(--mb-adapt-banner-border);
+  text-align: center;
 }
+
+.mb-adapt__status-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--mb-adapt-status-icon-bg, #fef2f2);
+}
+
+.mb-adapt__status-icon svg {
+  width: 24px;
+  height: 24px;
+}
+
+.mb-adapt__status-icon--stopped {
+  background: var(--mb-adapt-status-icon-bg, #f3f4f6);
+}
+
+.mb-adapt__status-text {
+  color: var(--mb-adapt-status-text, #374151);
+  font-size: 15px;
+  line-height: 1.5;
+  margin: 0;
+}
+
 `;
   var AdaptWebClient = class _AdaptWebClient {
     constructor(options) {
@@ -8917,7 +8960,8 @@ cap-widget::part(attribution) {
           this.mainIframe.classList.add("mb-adapt__iframe--hidden");
         }
         this.showStatusMessage(
-          this.options.text?.stopped ?? "This session has been stopped"
+          this.options.text?.stopped ?? "This session has been stopped",
+          "stopped"
         );
         return;
       }
@@ -9369,7 +9413,7 @@ cap-widget::part(attribution) {
       });
       return iframe;
     }
-    showStatusMessage(text) {
+    showStatusMessage(text, kind = "error") {
       if (!this.mainFrameElement && !this.mainContainer) return;
       this.removeStatusMessage();
       if (this.mainIframe) {
@@ -9378,7 +9422,17 @@ cap-widget::part(attribution) {
       }
       this.statusMessageElement = document.createElement("div");
       this.statusMessageElement.className = this.options.classNames?.statusMessage ?? "mb-adapt__status-message";
-      this.statusMessageElement.textContent = text;
+      const card = document.createElement("div");
+      card.className = "mb-adapt__status-card";
+      const iconWrap = document.createElement("div");
+      iconWrap.className = kind === "stopped" ? "mb-adapt__status-icon mb-adapt__status-icon--stopped" : "mb-adapt__status-icon";
+      iconWrap.innerHTML = kind === "stopped" ? `<svg viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>` : `<svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+      card.appendChild(iconWrap);
+      const msg = document.createElement("p");
+      msg.className = "mb-adapt__status-text";
+      msg.textContent = text;
+      card.appendChild(msg);
+      this.statusMessageElement.appendChild(card);
       const parent = this.mainFrameElement || this.mainContainer;
       parent.classList.remove("mb-adapt__frame--hidden");
       parent.appendChild(this.statusMessageElement);