@elliemae/pui-app-bridge 2.28.4 → 2.28.5

package/dist/cjs/frame.js

@@ -33,7 +33,36 @@ __export(frame_exports, {
 });
 module.exports = __toCommonJS(frame_exports);
 var import_frame = __toESM(require("./frame.html?resource"), 1);
+var import_utils = require("./utils.js");
 const FRAME_APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+const buildFrameSrc = (options) => {
+  const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
+  if (!options.queryParams) return baseSrc;
+  const sanitized = options.queryParams.replace(/[^a-zA-Z0-9&=_.~%+-]/g, "");
+  return `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
+};
+const appendManifestBaseTag = ({
+  documentEle,
+  hostUrl,
+  manifestPath,
+  guestId
+}) => {
+  const containerEle = documentEle.getElementById(
+    FRAME_APP_CONTAINER_ID_PREFIX
+  );
+  if (containerEle) {
+    containerEle.id = `${containerEle.id}${guestId}`;
+  }
+  const manifestBaseUrl = (0, import_utils.resolveManifestBaseUrl)(hostUrl, manifestPath);
+  let baseTag = documentEle.getElementsByTagName("base")?.[0];
+  if (baseTag) {
+    baseTag.href = manifestBaseUrl;
+    return;
+  }
+  baseTag = documentEle.createElement("base");
+  baseTag.href = manifestBaseUrl;
+  documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
+};
 const create = ({
   id,
   instanceId,
@@ -43,6 +72,11 @@ const create = ({
 }) => (
   // eslint-disable-next-line max-statements
   new Promise((resolve, reject) => {
+    const { signal } = options;
+    if (signal?.aborted) {
+      reject(new DOMException("iframe creation aborted", "AbortError"));
+      return;
+    }
     const iframeContainer = document.createElement("div");
     iframeContainer.setAttribute(
       "style",
@@ -61,21 +95,35 @@ const create = ({
       "style",
       options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
     );
-    const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
-    let srcWithParams = baseSrc;
-    if (options.queryParams) {
-      const sanitized = options.queryParams.replace(
-        /[^a-zA-Z0-9&=_.~%+-]/g,
-        ""
-      );
-      srcWithParams = `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
-    }
-    frame.setAttribute("src", srcWithParams);
+    frame.setAttribute("src", buildFrameSrc(options));
     const FRAME_LOAD_TIMEOUT_MS = 1e4;
     let settled = false;
-    const timeoutId = setTimeout(() => {
+    let timeoutId;
+    let onAbort;
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const rejectIfAborted = () => {
+      if (!signal?.aborted) return false;
+      if (!settled) {
+        settled = true;
+        cleanup();
+        iframeContainer.remove();
+        reject(new DOMException("iframe creation aborted", "AbortError"));
+      }
+      return true;
+    };
+    onAbort = () => {
+      rejectIfAborted();
+    };
+    if (rejectIfAborted()) return;
+    signal?.addEventListener("abort", onAbort);
+    timeoutId = setTimeout(() => {
       if (!settled) {
         settled = true;
+        cleanup();
+        iframeContainer.remove();
         reject(
           new Error(
             `iframe for ${id} failed to load within ${FRAME_LOAD_TIMEOUT_MS}ms`
@@ -86,28 +134,22 @@ const create = ({
     frame.addEventListener("error", () => {
       if (!settled) {
         settled = true;
-        clearTimeout(timeoutId);
+        cleanup();
+        iframeContainer.remove();
         reject(new Error(`iframe for ${id} failed to load`));
       }
     });
     frame.addEventListener("load", () => {
-      if (settled) return;
+      if (settled || rejectIfAborted()) return;
       if (!frame.contentDocument) return;
       settled = true;
-      clearTimeout(timeoutId);
-      const documentEle = frame.contentDocument;
-      const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
-      if (ele) {
-        ele.id = `${ele.id}${id}`;
-      }
-      let baseTag = documentEle.getElementsByTagName("base")?.[0];
-      if (baseTag) {
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-      } else {
-        baseTag = documentEle.createElement("base");
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-        documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
-      }
+      cleanup();
+      appendManifestBaseTag({
+        documentEle: frame.contentDocument,
+        hostUrl,
+        manifestPath,
+        guestId: id
+      });
       resolve(frame);
     });
     iframeContainer.appendChild(frame);

package/dist/cjs/loaders/manifest.js

@@ -38,8 +38,7 @@ const get = async ({
   hostUrl,
   manifestPath
 }) => {
-  const url = new URL(`${manifestPath}manifest.json`, hostUrl);
-  const manifestUrl = (0, import_utils.removeDoubleSlash)(url.href);
+  const manifestUrl = (0, import_utils.resolveManifestUrl)(hostUrl, manifestPath);
   const cached = manifestCache.get(manifestUrl);
   if (cached) return cached;
   const fetchManifest = async (fetchUrl) => {
@@ -60,9 +59,7 @@ const get = async ({
   } catch (error) {
     const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
     if (manifestPath !== unVersionedManifestPath) {
-      const fallbackUrl = (0, import_utils.removeDoubleSlash)(
-        new URL(`${unVersionedManifestPath}manifest.json`, hostUrl).href
-      );
+      const fallbackUrl = (0, import_utils.resolveManifestUrl)(hostUrl, unVersionedManifestPath);
       return await fetchManifest(fallbackUrl);
     }
     throw error;

package/dist/cjs/utils.js

@@ -23,7 +23,9 @@ __export(utils_exports, {
   escapeRegExp: () => escapeRegExp,
   getAbsoluteUrl: () => getAbsoluteUrl,
   isJSDOM: () => isJSDOM,
-  removeDoubleSlash: () => removeDoubleSlash
+  removeDoubleSlash: () => removeDoubleSlash,
+  resolveManifestBaseUrl: () => resolveManifestBaseUrl,
+  resolveManifestUrl: () => resolveManifestUrl
 });
 module.exports = __toCommonJS(utils_exports);
 const removeDoubleSlash = (url) => url.replace(/([^:]\/)\/+/g, "$1");
@@ -34,5 +36,19 @@ const getAbsoluteUrl = (url) => {
 };
 const appendTrailingSlash = (url) => url?.replace?.(/\/?$/, "/");
 const appendPath = (base, path) => `${base.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+const isAbsoluteManifestPath = (manifestPath) => /^(\/|https?:\/\/)/.test(manifestPath);
+const resolveManifestBaseUrl = (hostUrl, manifestPath) => {
+  const normalizedPath = appendTrailingSlash(manifestPath);
+  if (isAbsoluteManifestPath(normalizedPath)) {
+    const { origin } = new URL(hostUrl, window.location.href);
+    return removeDoubleSlash(new URL(normalizedPath, origin).href);
+  }
+  return removeDoubleSlash(
+    new URL(normalizedPath, appendTrailingSlash(hostUrl)).href
+  );
+};
+const resolveManifestUrl = (hostUrl, manifestPath) => removeDoubleSlash(
+  new URL("manifest.json", resolveManifestBaseUrl(hostUrl, manifestPath)).href
+);
 const isJSDOM = () => window.navigator.userAgent.includes("jsdom");
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

package/dist/esm/frame.js

@@ -1,5 +1,34 @@
 import frameHtml from "./frame.html?resource";
+import { resolveManifestBaseUrl } from "./utils.js";
 const FRAME_APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+const buildFrameSrc = (options) => {
+  const baseSrc = options.src ?? (frameHtml.default ?? frameHtml);
+  if (!options.queryParams) return baseSrc;
+  const sanitized = options.queryParams.replace(/[^a-zA-Z0-9&=_.~%+-]/g, "");
+  return `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
+};
+const appendManifestBaseTag = ({
+  documentEle,
+  hostUrl,
+  manifestPath,
+  guestId
+}) => {
+  const containerEle = documentEle.getElementById(
+    FRAME_APP_CONTAINER_ID_PREFIX
+  );
+  if (containerEle) {
+    containerEle.id = `${containerEle.id}${guestId}`;
+  }
+  const manifestBaseUrl = resolveManifestBaseUrl(hostUrl, manifestPath);
+  let baseTag = documentEle.getElementsByTagName("base")?.[0];
+  if (baseTag) {
+    baseTag.href = manifestBaseUrl;
+    return;
+  }
+  baseTag = documentEle.createElement("base");
+  baseTag.href = manifestBaseUrl;
+  documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
+};
 const create = ({
   id,
   instanceId,
@@ -9,6 +38,11 @@ const create = ({
 }) => (
   // eslint-disable-next-line max-statements
   new Promise((resolve, reject) => {
+    const { signal } = options;
+    if (signal?.aborted) {
+      reject(new DOMException("iframe creation aborted", "AbortError"));
+      return;
+    }
     const iframeContainer = document.createElement("div");
     iframeContainer.setAttribute(
       "style",
@@ -27,21 +61,35 @@ const create = ({
       "style",
       options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
     );
-    const baseSrc = options.src ?? (frameHtml.default ?? frameHtml);
-    let srcWithParams = baseSrc;
-    if (options.queryParams) {
-      const sanitized = options.queryParams.replace(
-        /[^a-zA-Z0-9&=_.~%+-]/g,
-        ""
-      );
-      srcWithParams = `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
-    }
-    frame.setAttribute("src", srcWithParams);
+    frame.setAttribute("src", buildFrameSrc(options));
     const FRAME_LOAD_TIMEOUT_MS = 1e4;
     let settled = false;
-    const timeoutId = setTimeout(() => {
+    let timeoutId;
+    let onAbort;
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const rejectIfAborted = () => {
+      if (!signal?.aborted) return false;
+      if (!settled) {
+        settled = true;
+        cleanup();
+        iframeContainer.remove();
+        reject(new DOMException("iframe creation aborted", "AbortError"));
+      }
+      return true;
+    };
+    onAbort = () => {
+      rejectIfAborted();
+    };
+    if (rejectIfAborted()) return;
+    signal?.addEventListener("abort", onAbort);
+    timeoutId = setTimeout(() => {
       if (!settled) {
         settled = true;
+        cleanup();
+        iframeContainer.remove();
         reject(
           new Error(
             `iframe for ${id} failed to load within ${FRAME_LOAD_TIMEOUT_MS}ms`
@@ -52,28 +100,22 @@ const create = ({
     frame.addEventListener("error", () => {
       if (!settled) {
         settled = true;
-        clearTimeout(timeoutId);
+        cleanup();
+        iframeContainer.remove();
         reject(new Error(`iframe for ${id} failed to load`));
       }
     });
     frame.addEventListener("load", () => {
-      if (settled) return;
+      if (settled || rejectIfAborted()) return;
       if (!frame.contentDocument) return;
       settled = true;
-      clearTimeout(timeoutId);
-      const documentEle = frame.contentDocument;
-      const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
-      if (ele) {
-        ele.id = `${ele.id}${id}`;
-      }
-      let baseTag = documentEle.getElementsByTagName("base")?.[0];
-      if (baseTag) {
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-      } else {
-        baseTag = documentEle.createElement("base");
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-        documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
-      }
+      cleanup();
+      appendManifestBaseTag({
+        documentEle: frame.contentDocument,
+        hostUrl,
+        manifestPath,
+        guestId: id
+      });
       resolve(frame);
     });
     iframeContainer.appendChild(frame);

package/dist/esm/loaders/manifest.js

@@ -1,4 +1,4 @@
-import { removeDoubleSlash } from "../utils.js";
+import { resolveManifestUrl } from "../utils.js";
 const getUnVersionedManifestPath = (path) => path.replace(/\/\d+\.\d+/, "/latest");
 const isValidHttpUrl = (fileName) => {
   let url;
@@ -15,8 +15,7 @@ const get = async ({
   hostUrl,
   manifestPath
 }) => {
-  const url = new URL(`${manifestPath}manifest.json`, hostUrl);
-  const manifestUrl = removeDoubleSlash(url.href);
+  const manifestUrl = resolveManifestUrl(hostUrl, manifestPath);
   const cached = manifestCache.get(manifestUrl);
   if (cached) return cached;
   const fetchManifest = async (fetchUrl) => {
@@ -37,9 +36,7 @@ const get = async ({
   } catch (error) {
     const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
     if (manifestPath !== unVersionedManifestPath) {
-      const fallbackUrl = removeDoubleSlash(
-        new URL(`${unVersionedManifestPath}manifest.json`, hostUrl).href
-      );
+      const fallbackUrl = resolveManifestUrl(hostUrl, unVersionedManifestPath);
       return await fetchManifest(fallbackUrl);
     }
     throw error;

package/dist/esm/utils.js

@@ -6,6 +6,20 @@ const getAbsoluteUrl = (url) => {
 };
 const appendTrailingSlash = (url) => url?.replace?.(/\/?$/, "/");
 const appendPath = (base, path) => `${base.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+const isAbsoluteManifestPath = (manifestPath) => /^(\/|https?:\/\/)/.test(manifestPath);
+const resolveManifestBaseUrl = (hostUrl, manifestPath) => {
+  const normalizedPath = appendTrailingSlash(manifestPath);
+  if (isAbsoluteManifestPath(normalizedPath)) {
+    const { origin } = new URL(hostUrl, window.location.href);
+    return removeDoubleSlash(new URL(normalizedPath, origin).href);
+  }
+  return removeDoubleSlash(
+    new URL(normalizedPath, appendTrailingSlash(hostUrl)).href
+  );
+};
+const resolveManifestUrl = (hostUrl, manifestPath) => removeDoubleSlash(
+  new URL("manifest.json", resolveManifestBaseUrl(hostUrl, manifestPath)).href
+);
 const isJSDOM = () => window.navigator.userAgent.includes("jsdom");
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 export {
@@ -14,5 +28,7 @@ export {
   escapeRegExp,
   getAbsoluteUrl,
   isJSDOM,
-  removeDoubleSlash
+  removeDoubleSlash,
+  resolveManifestBaseUrl,
+  resolveManifestUrl
 };

package/dist/public/e2e-host.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AppBridge E2E — Comprehensive Host Test</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.abc796d0a5604f92857c.js"></script></head><body class="bg-gray-50"><header class="bg-indigo-600 text-white px-4 py-3 flex items-center justify-between"><h1 class="text-lg font-semibold">AppBridge E2E — Comprehensive Host Test</h1><a href="./e2e-index.html" class="text-indigo-200 hover:text-white text-sm">&larr; Back to dashboard</a></header><main class="mx-auto max-w-7xl px-4 py-4"><div class="bg-blue-50 border border-blue-200 rounded-md p-3 mb-4"><h2 class="text-sm font-bold text-blue-900 mb-1">How to Use This Page</h2><ol class="text-xs text-blue-800 list-decimal ml-4 space-y-1"><li>Wait for <strong>"E2E Host ready"</strong> in the Event Log.</li><li>Use buttons in each section to test AppBridge features.</li><li>Check Event Log and result panels for expected output.</li><li>Work through the Verification Checklist at the bottom.</li></ol></div><div class="grid grid-cols-3 gap-4"><div class="col-span-2 space-y-4"><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">App Loading</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-open-app" id="btnOpenApp" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (pricingservice)</button> <button data-testid="btn-open-credit" id="btnOpenCredit" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (creditservice)</button> <button data-testid="btn-open-validation" id="btnOpenValidation" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (loanvalidation)</button> <button data-testid="btn-open-with-metadata" id="btnOpenWithMetadata" class="rounded bg-purple-600 px-3 py-1 text-xs text-white hover:bg-purple-700">Open App with Metadata</button> <button data-testid="btn-open-e2e-guest" id="btnOpenE2EGuest" class="rounded bg-teal-600 px-3 py-1 text-xs text-white hover:bg-teal-700">Open E2E Test Guest</button> <button data-testid="btn-open-nested-chain" id="btnOpenNestedChain" class="rounded bg-orange-600 px-3 py-1 text-xs text-white hover:bg-orange-700">Open Nested Chain (A→B→C)</button></div><p class="text-xs text-gray-400 mt-1"><strong>Expected:</strong> App loads into the container below. Log shows "openApp" succeeded. The E2E Test Guest provides interactive buttons to test guest→host communication. The Nested Chain (A→B→C) opens an intermediate that clones Loan and re-exposes it to a grandchild — use C's buttons to verify callChain propagation on Host A.</p></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">Scripting Object Management</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-add-so" id="btnAddSO" class="rounded bg-green-600 px-3 py-1 text-xs text-white hover:bg-green-700">Add "Inventory" Object</button> <button data-testid="btn-remove-so" id="btnRemoveSO" class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700">Remove "Inventory" Object</button> <button data-testid="btn-remove-all-so" id="btnRemoveAllSO" class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700">Remove All Objects</button></div><p class="text-xs text-gray-400 mt-1"><strong>Expected:</strong> Add succeeds. Remove succeeds. Guest apps can/cannot call removed objects.</p></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">Event Dispatching</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-dispatch-presave" id="btnDispatchPreSave" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onPreSave (all apps)</button> <button data-testid="btn-dispatch-amount" id="btnDispatchAmount" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onLoanAmountChanged</button> <button data-testid="btn-dispatch-term" id="btnDispatchTerm" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onLoanTermChanged</button></div><div data-testid="dispatch-result" id="dispatchResult" class="mt-2 text-xs bg-gray-100 rounded p-2 min-h-[40px]">Dispatch results appear here...</div></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">callContext (from last scripting object invocation)</h2><div class="grid grid-cols-2 gap-2"><div><h3 class="text-xs font-medium text-gray-500 mb-1">callContext.guest</h3><pre data-testid="call-context-guest" id="callContextGuest" class="text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap">
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AppBridge E2E — Comprehensive Host Test</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.d73405c86e4c6f166cfe.js"></script></head><body class="bg-gray-50"><header class="bg-indigo-600 text-white px-4 py-3 flex items-center justify-between"><h1 class="text-lg font-semibold">AppBridge E2E — Comprehensive Host Test</h1><a href="./e2e-index.html" class="text-indigo-200 hover:text-white text-sm">&larr; Back to dashboard</a></header><main class="mx-auto max-w-7xl px-4 py-4"><div class="bg-blue-50 border border-blue-200 rounded-md p-3 mb-4"><h2 class="text-sm font-bold text-blue-900 mb-1">How to Use This Page</h2><ol class="text-xs text-blue-800 list-decimal ml-4 space-y-1"><li>Wait for <strong>"E2E Host ready"</strong> in the Event Log.</li><li>Use buttons in each section to test AppBridge features.</li><li>Check Event Log and result panels for expected output.</li><li>Work through the Verification Checklist at the bottom.</li></ol></div><div class="grid grid-cols-3 gap-4"><div class="col-span-2 space-y-4"><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">App Loading</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-open-app" id="btnOpenApp" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (pricingservice)</button> <button data-testid="btn-open-credit" id="btnOpenCredit" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (creditservice)</button> <button data-testid="btn-open-validation" id="btnOpenValidation" class="rounded bg-indigo-600 px-3 py-1 text-xs text-white hover:bg-indigo-700">Open App (loanvalidation)</button> <button data-testid="btn-open-with-metadata" id="btnOpenWithMetadata" class="rounded bg-purple-600 px-3 py-1 text-xs text-white hover:bg-purple-700">Open App with Metadata</button> <button data-testid="btn-open-e2e-guest" id="btnOpenE2EGuest" class="rounded bg-teal-600 px-3 py-1 text-xs text-white hover:bg-teal-700">Open E2E Test Guest</button> <button data-testid="btn-open-nested-chain" id="btnOpenNestedChain" class="rounded bg-orange-600 px-3 py-1 text-xs text-white hover:bg-orange-700">Open Nested Chain (A→B→C)</button></div><p class="text-xs text-gray-400 mt-1"><strong>Expected:</strong> App loads into the container below. Log shows "openApp" succeeded. The E2E Test Guest provides interactive buttons to test guest→host communication. The Nested Chain (A→B→C) opens an intermediate that clones Loan and re-exposes it to a grandchild — use C's buttons to verify callChain propagation on Host A.</p></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">Scripting Object Management</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-add-so" id="btnAddSO" class="rounded bg-green-600 px-3 py-1 text-xs text-white hover:bg-green-700">Add "Inventory" Object</button> <button data-testid="btn-remove-so" id="btnRemoveSO" class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700">Remove "Inventory" Object</button> <button data-testid="btn-remove-all-so" id="btnRemoveAllSO" class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700">Remove All Objects</button></div><p class="text-xs text-gray-400 mt-1"><strong>Expected:</strong> Add succeeds. Remove succeeds. Guest apps can/cannot call removed objects.</p></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">Event Dispatching</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-dispatch-presave" id="btnDispatchPreSave" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onPreSave (all apps)</button> <button data-testid="btn-dispatch-amount" id="btnDispatchAmount" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onLoanAmountChanged</button> <button data-testid="btn-dispatch-term" id="btnDispatchTerm" class="rounded bg-yellow-600 px-3 py-1 text-xs text-white hover:bg-yellow-700">Dispatch onLoanTermChanged</button></div><div data-testid="dispatch-result" id="dispatchResult" class="mt-2 text-xs bg-gray-100 rounded p-2 min-h-[40px]">Dispatch results appear here...</div></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">callContext (from last scripting object invocation)</h2><div class="grid grid-cols-2 gap-2"><div><h3 class="text-xs font-medium text-gray-500 mb-1">callContext.guest</h3><pre data-testid="call-context-guest" id="callContextGuest" class="text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap">
 Waiting for invocation...</pre></div><div><h3 class="text-xs font-medium text-gray-500 mb-1">callContext.callChain</h3><pre data-testid="call-context-chain" id="callContextChain" class="text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap">
 Waiting for invocation...</pre></div></div></div><div class="bg-white rounded-lg shadow p-4"><h2 class="text-sm font-semibold text-gray-700 mb-2">App Lifecycle</h2><div class="flex flex-wrap gap-2"><button data-testid="btn-close-app" id="btnCloseApp" class="rounded bg-red-600 px-3 py-1 text-xs text-white hover:bg-red-700">Close First App</button> <button data-testid="btn-close-all" id="btnCloseAll" class="rounded bg-red-800 px-3 py-1 text-xs text-white hover:bg-red-900">Close All Apps</button> <button data-testid="btn-list-apps" id="btnListApps" class="rounded bg-gray-600 px-3 py-1 text-xs text-white hover:bg-gray-700">List Apps</button></div><pre data-testid="app-list" id="appList" class="mt-2 text-xs bg-gray-100 rounded p-2 min-h-[30px] whitespace-pre-wrap">
 (no apps)</pre></div></div><div class="space-y-4"><div class="bg-white rounded-lg shadow p-3"><h2 class="text-sm font-semibold text-gray-700 mb-2">Guest App Container</h2><div data-testid="app-container" id="appContainer" class="border-2 border-dashed border-indigo-300 rounded-lg" style="height:700px;overflow:auto"></div></div><div class="bg-white rounded-lg shadow p-3"><div class="flex justify-between items-center mb-2"><h2 class="text-sm font-semibold text-gray-700">Event Log</h2><button data-testid="btn-clear-log" id="btnClearLog" class="rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-600 hover:bg-gray-300">Clear</button></div><div data-testid="event-log" id="eventLog" class="text-xs bg-gray-100 rounded p-2 min-h-[200px] max-h-[400px] overflow-y-auto"></div></div></div></div><div class="bg-gray-100 border border-gray-300 rounded-md p-3 mt-4"><h2 class="text-sm font-bold text-gray-800 mb-2">Verification Checklist</h2><div class="grid grid-cols-2 gap-2 text-xs"><label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-APP-01:</strong> openApp loads pricingservice into container, log shows mounted</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-APP-02:</strong> openApp loads creditservice into container</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-APP-03:</strong> openApp loads loanvalidation into container</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-APP-04:</strong> openApp with metadata — metadata stored for callChain</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-01:</strong> Loan object registered on init (guest apps can call getLoanDetails)</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-02:</strong> Add Inventory object succeeds</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-03:</strong> Remove Inventory object succeeds</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-04:</strong> removeAllScriptingObjects clears everything</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-05:</strong> callContext.guest populated when guest invokes scripting object method</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-SO-06:</strong> Loan.getLoanDetails returns expected loan data</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-EVT-01:</strong> Dispatch onPreSave reaches all subscribed apps, results returned</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-EVT-02:</strong> Dispatch onLoanAmountChanged reaches subscribed apps</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-EVT-03:</strong> Dispatch onLoanTermChanged reaches subscribed apps</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-LIFE-01:</strong> closeApp removes first app from list</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-LIFE-02:</strong> List Apps shows all active apps with instanceIds</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-LIFE-03:</strong> closeAllApps removes all apps</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-LIFE-04:</strong> No console errors during any operation</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-META-01:</strong> openApp with metadata — callContext.callChain contains metadata when guest invokes cloned object</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-01:</strong> Guest getObject("Loan") returns proxy with expected methods (getLoanDetails, setCreditScore)</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-02:</strong> Guest Loan.getLoanDetails() returns loan data, host callContext.guest shows e2etestguest</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-03:</strong> Guest Loan.setCreditScore(800) returns {updated: true}, host callContext updates</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-04:</strong> Guest getObject("Inventory") returns proxy after host adds it; null before</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-05:</strong> Guest Inventory.getItems() returns item array</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-06:</strong> Guest getObject("NonExistent") returns null</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-07:</strong> Guest subscribes to onPreSave — receives event when host dispatches</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-08:</strong> Guest subscribes to onLoanAmountChanged — receives event when host dispatches</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-GUEST-09:</strong> Guest unsubscribe all — no more events received after unsubscribe</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-CHAIN-01:</strong> Open Nested Chain — Intermediate B loads, shows "CAppBridge B initialized"</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-CHAIN-02:</strong> Grandchild C (E2E Test Guest) appears inside Intermediate B</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-CHAIN-03:</strong> In C: getObject("Loan") → Loan.getLoanDetails() → Host A shows callContext.guest = e2eintermediateguest, callChain = [{id: "e2etestguest", metadata: {role: "grandchild", ...}}]</span></label> <label class="flex items-start gap-2"><input type="checkbox" class="mt-0.5"/> <span><strong>TC-CHAIN-04:</strong> In C: Loan.setCreditScore(800) → Host A callChain includes e2etestguest with metadata from B</span></label></div></div></main><script src="./e2e-host.js" type="module"></script></body></html>

package/dist/public/e2e-index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AppBridge E2E Test Suite</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script defer="defer" src="js/emuiAppBridge.abc796d0a5604f92857c.js"></script></head><body class="bg-gray-50"><header class="bg-gray-900 text-white px-6 py-4"><h1 class="text-xl font-bold">AppBridge End-to-End Test Suite</h1><p class="text-sm text-gray-400 mt-1">Comprehensive blackbox tests for AppBridge (in-process micro-frontend framework). Each page includes test steps, expected values, and a verification checklist.</p></header><main class="mx-auto max-w-5xl px-6 py-6"><section class="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4"><h2 class="text-sm font-semibold text-yellow-800 mb-2">Setup Instructions</h2><ol class="text-xs text-yellow-700 list-decimal ml-4 space-y-1"><li>Install dependencies: <code class="bg-yellow-100 px-1 rounded">pnpm install</code></li><li>Start AppBridge dev server: <code class="bg-yellow-100 px-1 rounded">cd libs/app-bridge && pnpm start</code> (default port 3000)</li><li>Open <code class="bg-yellow-100 px-1 rounded">http://localhost:3000/e2e-index.html</code> in the browser</li><li>Each test page has <code class="bg-yellow-100 px-1 rounded">data-testid</code> attributes for Playwright/Cypress selectors</li></ol></section><section class="mb-6"><h2 class="text-lg font-semibold text-gray-800 border-b pb-1 mb-3">1. Core AppBridge Host Tests</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-3"><a href="./e2e-host.html" data-testid="link-e2e-host" class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"><h3 class="font-medium text-indigo-700">Comprehensive E2E Host</h3><p class="text-xs text-gray-500 mt-1">All host scenarios: openApp, closeApp, scripting objects, events, lifecycle, metadata, callContext.</p><p class="text-xs text-gray-400 mt-2"><strong>What to verify:</strong> Apps open and mount into containers. Scripting objects can be added/removed/invoked with correct callContext. Events reach subscribed apps. closeApp/closeAllApps cleans up properly.</p><div class="mt-2 text-xs text-gray-400"><strong>Test Cases:</strong> TC-APP-01..04 &bull; TC-SO-01..06 &bull; TC-EVT-01..03 &bull; TC-LIFE-01..04 &bull; TC-META-01</div></a><a href="./index.html" data-testid="link-main-demo" class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"><h3 class="font-medium text-indigo-700">Main Demo App</h3><p class="text-xs text-gray-500 mt-1">Original Loan Application demo with credit, pricing, and loan validation micro-apps.</p><p class="text-xs text-gray-400 mt-2"><strong>What to verify:</strong> Loan form data flows to guest apps. Events (onLoanAmountChanged, etc.) update guest UIs. Credit score updates from guest. Save dispatches onPreSave with feedback.</p></a></div></section></main></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>AppBridge E2E Test Suite</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script defer="defer" src="js/emuiAppBridge.d73405c86e4c6f166cfe.js"></script></head><body class="bg-gray-50"><header class="bg-gray-900 text-white px-6 py-4"><h1 class="text-xl font-bold">AppBridge End-to-End Test Suite</h1><p class="text-sm text-gray-400 mt-1">Comprehensive blackbox tests for AppBridge (in-process micro-frontend framework). Each page includes test steps, expected values, and a verification checklist.</p></header><main class="mx-auto max-w-5xl px-6 py-6"><section class="mb-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4"><h2 class="text-sm font-semibold text-yellow-800 mb-2">Setup Instructions</h2><ol class="text-xs text-yellow-700 list-decimal ml-4 space-y-1"><li>Install dependencies: <code class="bg-yellow-100 px-1 rounded">pnpm install</code></li><li>Start AppBridge dev server: <code class="bg-yellow-100 px-1 rounded">cd libs/app-bridge && pnpm start</code> (default port 3000)</li><li>Open <code class="bg-yellow-100 px-1 rounded">http://localhost:3000/e2e-index.html</code> in the browser</li><li>Each test page has <code class="bg-yellow-100 px-1 rounded">data-testid</code> attributes for Playwright/Cypress selectors</li></ol></section><section class="mb-6"><h2 class="text-lg font-semibold text-gray-800 border-b pb-1 mb-3">1. Core AppBridge Host Tests</h2><div class="grid grid-cols-1 md:grid-cols-2 gap-3"><a href="./e2e-host.html" data-testid="link-e2e-host" class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"><h3 class="font-medium text-indigo-700">Comprehensive E2E Host</h3><p class="text-xs text-gray-500 mt-1">All host scenarios: openApp, closeApp, scripting objects, events, lifecycle, metadata, callContext.</p><p class="text-xs text-gray-400 mt-2"><strong>What to verify:</strong> Apps open and mount into containers. Scripting objects can be added/removed/invoked with correct callContext. Events reach subscribed apps. closeApp/closeAllApps cleans up properly.</p><div class="mt-2 text-xs text-gray-400"><strong>Test Cases:</strong> TC-APP-01..04 &bull; TC-SO-01..06 &bull; TC-EVT-01..03 &bull; TC-LIFE-01..04 &bull; TC-META-01</div></a><a href="./index.html" data-testid="link-main-demo" class="block bg-white rounded-lg shadow p-4 hover:shadow-md transition"><h3 class="font-medium text-indigo-700">Main Demo App</h3><p class="text-xs text-gray-500 mt-1">Original Loan Application demo with credit, pricing, and loan validation micro-apps.</p><p class="text-xs text-gray-400 mt-2"><strong>What to verify:</strong> Loan form data flows to guest apps. Events (onLoanAmountChanged, etc.) update guest UIs. Credit score updates from guest. Save dispatches onPreSave with feedback.</p></a></div></section></main></body></html>

package/dist/public/frame.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" href="/favicon.ico"/><title>Application</title><style nonce="__CSP_NONCE__">.full-width{width:100%}.full-height{height:100%}</style><script defer="defer" src="js/emuiAppBridge.abc796d0a5604f92857c.js"></script></head><body class="full-width full-height"><noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript><div id="pui-app-container-" class="full-width full-height"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="mobile-web-app-capable" content="yes"/><link rel="icon" href="/favicon.ico"/><title>Application</title><style nonce="__CSP_NONCE__">.full-width{width:100%}.full-height{height:100%}</style><script defer="defer" src="js/emuiAppBridge.d73405c86e4c6f166cfe.js"></script></head><body class="full-width full-height"><noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript><div id="pui-app-container-" class="full-width full-height"></div></body></html>

package/dist/public/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.abc796d0a5604f92857c.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center justify-between"><div class="px-2">ICE Mortgage Product</div><nav class="flex gap-3 px-2 text-sm"><a href="./e2e-index.html" class="text-indigo-800 hover:text-indigo-950 font-medium">E2E Test Suite</a> <a href="./e2e-host.html" class="text-indigo-800 hover:text-indigo-950 font-medium">E2E Host</a></nav></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="creditScore" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Credit Score</label><div class="mt-1 sm:mt-0"><output id="creditScore" class="block w-full max-w-lg pl-2 pt-2 sm:max-w-xs sm:text-sm">NA</output></div><div class="mt-1 sm:mt-0"><button id="getCreditScore" type="button" class="inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-1 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button></div></div></div></div></div><button id="saveLoan" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Host</title><script src="https://cdn.tailwindcss.com?plugins=forms"></script><script src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script><script defer="defer" src="js/emuiAppBridge.d73405c86e4c6f166cfe.js"></script></head><body><header class="bg-indigo-300 h-10 flex place-items-center justify-between"><div class="px-2">ICE Mortgage Product</div><nav class="flex gap-3 px-2 text-sm"><a href="./e2e-index.html" class="text-indigo-800 hover:text-indigo-950 font-medium">E2E Test Suite</a> <a href="./e2e-host.html" class="text-indigo-800 hover:text-indigo-950 font-medium">E2E Host</a></nav></header><main class="mx-auto max-w-7xl px-2 sm:px-6 lg:px-8"><div class="min-w-0 flex-1 mt-4"><h1 class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">Loan Application</h1></div><div id="successFeedback" class="hidden rounded-md bg-green-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg></div><div class="ml-3"><p class="text-sm font-medium text-green-800">Loan Saved Successfully</p></div></div></div><div id="errorFeedback" class="hidden rounded-md bg-red-50 p-4"><div class="flex"><div class="flex-shrink-0"><svg class="h-5 w-5 text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"/></svg></div><div class="ml-3"><h3 class="text-sm font-medium text-red-800">Credit Score is not meeting the requirement</h3></div></div></div><div class="mt-2 sm:grid sm:grid-cols-2 sm:gap-2"><form class="px-2 py-2 space-y-8 divide-y divide-gray-200 bg-gray-50"><div class="space-y-8 divide-y divide-gray-200 sm:space-y-5"><div class="space-y-6 sm:space-y-5"><div><h3 class="text-lg font-medium leading-6 text-gray-900">Personal Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="firstName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">First name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="firstName" id="firstName" autocomplete="given-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="John" placeholder="John"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="lastName" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Last name</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input name="lastName" id="lastName" autocomplete="family-name" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="Doe" placeholder="Doe"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="ssn" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">SSN</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="ssn" id="ssn" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="123456789" placeholder="123456789"/></div></div></div><div><h3 class="text-lg font-medium leading-6 text-gray-900">Loan Information</h3></div><div class="space-y-6 sm:space-y-5"><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="amount" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Amount</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="amount" id="amount" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="500000" placeholder="500000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="Term" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Term (years)</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="term" id="term" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="30" placeholder="30"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="downPayment" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Down Payment</label><div class="mt-1 sm:col-span-2 sm:mt-0"><input type="number" name="downPayment" id="downPayment" class="block w-full max-w-lg rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:max-w-xs sm:text-sm" value="50000" placeholder="50000"/></div></div><div class="sm:grid sm:grid-cols-3 sm:items-start sm:gap-4 sm:border-gray-200"><label for="creditScore" class="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">Credit Score</label><div class="mt-1 sm:mt-0"><output id="creditScore" class="block w-full max-w-lg pl-2 pt-2 sm:max-w-xs sm:text-sm">NA</output></div><div class="mt-1 sm:mt-0"><button id="getCreditScore" type="button" class="inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-1 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"/></svg></button></div></div></div></div></div><button id="saveLoan" type="button" class="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">Save</button></form><div id="aside-container" class="flex flex-col gap-4 items-start mt-4 border-2 p-2 rounded-lg border-dashed border-cyan-300 sm:mt-0"></div></div><div id="bottom-container" class="flex flex-col gap-4 items-start mt-4 p-2 sm:mt-0"></div></main><script src="./init.js" type="module"></script></body></html>