@elliemae/pui-app-bridge 2.28.2 → 2.28.4

package/dist/cjs/loaders/script.js

@@ -23,6 +23,8 @@ __export(script_exports, {
 });
 module.exports = __toCommonJS(script_exports);
 var import_utils = require("../utils.js");
+var import_script_origin = require("../utils/script-origin.js");
+var import_webpack_public_path = require("../utils/webpack-public-path.js");
 const APP_SCRIPT_ID_PREFIX = "ice-script-";
 class ScriptLoader {
   #logger;
@@ -109,7 +111,44 @@ class ScriptLoader {
     documentEle.head.appendChild(ele);
   });
   /**
-   * Loads multiple script assets sequentially, with CDN scripts loaded before non-CDN scripts.
+   * Appends script elements in document order and waits for each to load.
+   * @param entries
+   * @param documentEle
+   * @param isESMModule
+   */
+  #loadAndWaitForScripts = async (entries, documentEle, isESMModule) => {
+    if (entries.length === 0) return;
+    const promises = entries.map(
+      ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
+    );
+    await Promise.all(promises);
+  };
+  /**
+   * Stages external scripts before local guest-host scripts.
+   * @param root0
+   * @param root0.scripts
+   * @param root0.documentEle
+   * @param root0.isESMModule
+   * @param root0.hostUrl
+   */
+  #loadOrderedModuleScripts = async ({
+    scripts,
+    documentEle,
+    isESMModule,
+    hostUrl
+  }) => {
+    if (scripts.length === 0) return;
+    if (!hostUrl) {
+      await this.#loadAndWaitForScripts(scripts, documentEle, isESMModule);
+      return;
+    }
+    const { external, local } = (0, import_script_origin.partitionScriptsByOrigin)(scripts, hostUrl);
+    await this.#loadAndWaitForScripts(external, documentEle, isESMModule);
+    (0, import_webpack_public_path.syncWebpackPublicPath)(documentEle.defaultView, hostUrl);
+    await this.#loadAndWaitForScripts(local, documentEle, isESMModule);
+  };
+  /**
+   * Loads multiple script assets in manifest order, like HTML module script tags.
    * @param assets - Array of script URLs (either full HTTP/HTTPS URLs or relative paths)
    * @param options - Configuration options for loading the scripts
    * @param options.name - The name of the application (used for generating script IDs)
@@ -119,20 +158,18 @@ class ScriptLoader {
    * @returns A promise that resolves with an array of script element IDs when all scripts are loaded
    * @remarks
    * This method:
-   * - Partitions assets into CDN (HTTP/HTTPS) and non-CDN (relative) arrays in a single pass
+   * - Stages external (CDN) scripts before local guest-host scripts
+   * - Preserves manifest order within each origin group
    * - Creates modulepreload links for all assets for performance optimization
-   * - Appends all script elements to the DOM synchronously so the browser
-   *   can download them in parallel
-   * - Execution order is preserved by the spec: type="module" scripts
-   *   execute in document order; dynamic async=false scripts execute in
-   *   insertion order
+   * - Inserts script tags synchronously per stage so the browser can fetch in parallel
+   * - Syncs webpack public path from hostUrl (or guest _ASSET_PATH) before local scripts run
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
-   *   ['https://cdn.example.com/lib.js', 'app.js', 'config.js'],
+   *   ['https://cdn.example.com/lib.js', 'global.js', 'runtime~app.js'],
    *   {
    *     name: 'myApp',
-   *     hostUrl: 'https://example.com',
+   *     hostUrl: 'https://example.com/my-app/',
    *     documentEle: document,
    *     isESMModule: true
    *   }
@@ -142,31 +179,20 @@ class ScriptLoader {
   load = async (assets, options) => {
     const { documentEle, isESMModule } = options;
     const httpPattern = /^https?:\/\//i;
-    const { cdnAssets, nonCdnAssets } = assets.reduce(
-      (acc, fileName, index) => {
-        const id = `${APP_SCRIPT_ID_PREFIX}${options.name.toLowerCase()}-${index}`;
-        if (httpPattern.test(fileName)) {
-          acc.cdnAssets.push({ id, href: fileName });
-          this.#preLoadScript({ href: fileName, documentEle, isESMModule });
-        } else {
-          const url = new URL(fileName, options.hostUrl);
-          acc.nonCdnAssets.push({ id, href: url.href });
-          this.#preLoadScript({ href: url.href, documentEle, isESMModule });
-        }
-        return acc;
-      },
-      {
-        cdnAssets: [],
-        nonCdnAssets: []
-      }
-    );
-    const orderedAssets = [...cdnAssets, ...nonCdnAssets];
-    await Promise.all(
-      orderedAssets.map(
-        ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
-      )
-    );
-    return orderedAssets.map((asset) => asset.id);
+    const orderedScripts = assets.map((fileName, index) => {
+      const id = `${APP_SCRIPT_ID_PREFIX}${options.name.toLowerCase()}-${index}`;
+      const href = httpPattern.test(fileName) ? fileName : new URL(fileName, options.hostUrl).href;
+      this.#preLoadScript({ href, documentEle, isESMModule });
+      return { id, href };
+    });
+    await this.#loadOrderedModuleScripts({
+      scripts: orderedScripts,
+      documentEle,
+      isESMModule,
+      hostUrl: options.hostUrl
+    });
+    (0, import_webpack_public_path.syncWebpackPublicPath)(documentEle.defaultView, options.hostUrl);
+    return orderedScripts.map((asset) => asset.id);
   };
   /**
    * Removes a script element from the document by its ID.

package/dist/cjs/utils/script-origin.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var script_origin_exports = {};
+__export(script_origin_exports, {
+  isExternalScriptHref: () => isExternalScriptHref,
+  partitionScriptsByOrigin: () => partitionScriptsByOrigin
+});
+module.exports = __toCommonJS(script_origin_exports);
+const HTTP_PATTERN = /^https?:\/\//i;
+const isExternalScriptHref = (href, hostUrl) => {
+  if (!HTTP_PATTERN.test(href)) return false;
+  try {
+    return !href.startsWith(new URL(hostUrl).href);
+  } catch {
+    return true;
+  }
+};
+const partitionScriptsByOrigin = (scripts, hostUrl) => {
+  const external = [];
+  const local = [];
+  scripts.forEach((script) => {
+    if (isExternalScriptHref(script.href, hostUrl)) {
+      external.push(script);
+    } else {
+      local.push(script);
+    }
+  });
+  return { external, local };
+};

package/dist/cjs/utils/webpack-public-path.js

@@ -0,0 +1,49 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var webpack_public_path_exports = {};
+__export(webpack_public_path_exports, {
+  syncWebpackPublicPath: () => syncWebpackPublicPath,
+  syncWebpackPublicPathFromAssetPath: () => syncWebpackPublicPathFromAssetPath,
+  syncWebpackPublicPathFromHost: () => syncWebpackPublicPathFromHost
+});
+module.exports = __toCommonJS(webpack_public_path_exports);
+const syncWebpackPublicPathFromAssetPath = (targetWindow) => {
+  if (!targetWindow) return;
+  const win = targetWindow;
+  const assetPath = win.emui?._ASSET_PATH;
+  if (!assetPath) return;
+  win.__webpack_public_path__ = new URL("../", assetPath).href;
+};
+const syncWebpackPublicPathFromHost = (targetWindow, hostUrl) => {
+  if (!targetWindow || !hostUrl) return;
+  try {
+    const win = targetWindow;
+    win.__webpack_public_path__ = new URL("./", hostUrl).href;
+  } catch {
+  }
+};
+const syncWebpackPublicPath = (targetWindow, hostUrl) => {
+  if (!targetWindow) return;
+  const win = targetWindow;
+  if (win.emui?._ASSET_PATH) {
+    syncWebpackPublicPathFromAssetPath(targetWindow);
+    return;
+  }
+  syncWebpackPublicPathFromHost(targetWindow, hostUrl);
+};

package/dist/esm/loaders/script.js

@@ -1,4 +1,6 @@
 import { removeDoubleSlash, isJSDOM, escapeRegExp } from "../utils.js";
+import { partitionScriptsByOrigin } from "../utils/script-origin.js";
+import { syncWebpackPublicPath } from "../utils/webpack-public-path.js";
 const APP_SCRIPT_ID_PREFIX = "ice-script-";
 class ScriptLoader {
   #logger;
@@ -85,7 +87,44 @@ class ScriptLoader {
     documentEle.head.appendChild(ele);
   });
   /**
-   * Loads multiple script assets sequentially, with CDN scripts loaded before non-CDN scripts.
+   * Appends script elements in document order and waits for each to load.
+   * @param entries
+   * @param documentEle
+   * @param isESMModule
+   */
+  #loadAndWaitForScripts = async (entries, documentEle, isESMModule) => {
+    if (entries.length === 0) return;
+    const promises = entries.map(
+      ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
+    );
+    await Promise.all(promises);
+  };
+  /**
+   * Stages external scripts before local guest-host scripts.
+   * @param root0
+   * @param root0.scripts
+   * @param root0.documentEle
+   * @param root0.isESMModule
+   * @param root0.hostUrl
+   */
+  #loadOrderedModuleScripts = async ({
+    scripts,
+    documentEle,
+    isESMModule,
+    hostUrl
+  }) => {
+    if (scripts.length === 0) return;
+    if (!hostUrl) {
+      await this.#loadAndWaitForScripts(scripts, documentEle, isESMModule);
+      return;
+    }
+    const { external, local } = partitionScriptsByOrigin(scripts, hostUrl);
+    await this.#loadAndWaitForScripts(external, documentEle, isESMModule);
+    syncWebpackPublicPath(documentEle.defaultView, hostUrl);
+    await this.#loadAndWaitForScripts(local, documentEle, isESMModule);
+  };
+  /**
+   * Loads multiple script assets in manifest order, like HTML module script tags.
    * @param assets - Array of script URLs (either full HTTP/HTTPS URLs or relative paths)
    * @param options - Configuration options for loading the scripts
    * @param options.name - The name of the application (used for generating script IDs)
@@ -95,20 +134,18 @@ class ScriptLoader {
    * @returns A promise that resolves with an array of script element IDs when all scripts are loaded
    * @remarks
    * This method:
-   * - Partitions assets into CDN (HTTP/HTTPS) and non-CDN (relative) arrays in a single pass
+   * - Stages external (CDN) scripts before local guest-host scripts
+   * - Preserves manifest order within each origin group
    * - Creates modulepreload links for all assets for performance optimization
-   * - Appends all script elements to the DOM synchronously so the browser
-   *   can download them in parallel
-   * - Execution order is preserved by the spec: type="module" scripts
-   *   execute in document order; dynamic async=false scripts execute in
-   *   insertion order
+   * - Inserts script tags synchronously per stage so the browser can fetch in parallel
+   * - Syncs webpack public path from hostUrl (or guest _ASSET_PATH) before local scripts run
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
-   *   ['https://cdn.example.com/lib.js', 'app.js', 'config.js'],
+   *   ['https://cdn.example.com/lib.js', 'global.js', 'runtime~app.js'],
    *   {
    *     name: 'myApp',
-   *     hostUrl: 'https://example.com',
+   *     hostUrl: 'https://example.com/my-app/',
    *     documentEle: document,
    *     isESMModule: true
    *   }
@@ -118,31 +155,20 @@ class ScriptLoader {
   load = async (assets, options) => {
     const { documentEle, isESMModule } = options;
     const httpPattern = /^https?:\/\//i;
-    const { cdnAssets, nonCdnAssets } = assets.reduce(
-      (acc, fileName, index) => {
-        const id = `${APP_SCRIPT_ID_PREFIX}${options.name.toLowerCase()}-${index}`;
-        if (httpPattern.test(fileName)) {
-          acc.cdnAssets.push({ id, href: fileName });
-          this.#preLoadScript({ href: fileName, documentEle, isESMModule });
-        } else {
-          const url = new URL(fileName, options.hostUrl);
-          acc.nonCdnAssets.push({ id, href: url.href });
-          this.#preLoadScript({ href: url.href, documentEle, isESMModule });
-        }
-        return acc;
-      },
-      {
-        cdnAssets: [],
-        nonCdnAssets: []
-      }
-    );
-    const orderedAssets = [...cdnAssets, ...nonCdnAssets];
-    await Promise.all(
-      orderedAssets.map(
-        ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
-      )
-    );
-    return orderedAssets.map((asset) => asset.id);
+    const orderedScripts = assets.map((fileName, index) => {
+      const id = `${APP_SCRIPT_ID_PREFIX}${options.name.toLowerCase()}-${index}`;
+      const href = httpPattern.test(fileName) ? fileName : new URL(fileName, options.hostUrl).href;
+      this.#preLoadScript({ href, documentEle, isESMModule });
+      return { id, href };
+    });
+    await this.#loadOrderedModuleScripts({
+      scripts: orderedScripts,
+      documentEle,
+      isESMModule,
+      hostUrl: options.hostUrl
+    });
+    syncWebpackPublicPath(documentEle.defaultView, options.hostUrl);
+    return orderedScripts.map((asset) => asset.id);
   };
   /**
    * Removes a script element from the document by its ID.

package/dist/esm/utils/script-origin.js

@@ -0,0 +1,25 @@
+const HTTP_PATTERN = /^https?:\/\//i;
+const isExternalScriptHref = (href, hostUrl) => {
+  if (!HTTP_PATTERN.test(href)) return false;
+  try {
+    return !href.startsWith(new URL(hostUrl).href);
+  } catch {
+    return true;
+  }
+};
+const partitionScriptsByOrigin = (scripts, hostUrl) => {
+  const external = [];
+  const local = [];
+  scripts.forEach((script) => {
+    if (isExternalScriptHref(script.href, hostUrl)) {
+      external.push(script);
+    } else {
+      local.push(script);
+    }
+  });
+  return { external, local };
+};
+export {
+  isExternalScriptHref,
+  partitionScriptsByOrigin
+};

package/dist/esm/utils/webpack-public-path.js

@@ -0,0 +1,29 @@
+const syncWebpackPublicPathFromAssetPath = (targetWindow) => {
+  if (!targetWindow) return;
+  const win = targetWindow;
+  const assetPath = win.emui?._ASSET_PATH;
+  if (!assetPath) return;
+  win.__webpack_public_path__ = new URL("../", assetPath).href;
+};
+const syncWebpackPublicPathFromHost = (targetWindow, hostUrl) => {
+  if (!targetWindow || !hostUrl) return;
+  try {
+    const win = targetWindow;
+    win.__webpack_public_path__ = new URL("./", hostUrl).href;
+  } catch {
+  }
+};
+const syncWebpackPublicPath = (targetWindow, hostUrl) => {
+  if (!targetWindow) return;
+  const win = targetWindow;
+  if (win.emui?._ASSET_PATH) {
+    syncWebpackPublicPathFromAssetPath(targetWindow);
+    return;
+  }
+  syncWebpackPublicPathFromHost(targetWindow, hostUrl);
+};
+export {
+  syncWebpackPublicPath,
+  syncWebpackPublicPathFromAssetPath,
+  syncWebpackPublicPathFromHost
+};

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.867faf89adac3f81299e.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.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">
 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.867faf89adac3f81299e.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.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>

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.867faf89adac3f81299e.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.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>

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.867faf89adac3f81299e.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.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>