@elliemae/pui-app-bridge 2.25.0 → 2.26.0-alpha.0

package/dist/esm/appBridge.js

@@ -128,18 +128,19 @@ class CAppBridge {
   };
   /**
    * add app to active app list
-   * @param param0
-   * @param param0.id
-   * @param param0.instanceId
-   * @param elementIds
-   * @param param0.documentEle
-   * @param param0.elementIds
+   * @param options
+   * @param options.id - application id
+   * @param options.instanceId - unique instance id
+   * @param options.documentEle - iframe document
+   * @param options.elementIds - ids of injected script/style elements
+   * @param options.microFEHost - pre-created host reference for guest-initiated loading
    */
   #addAppToActiveAppList = ({
     id,
     instanceId,
     documentEle,
-    elementIds
+    elementIds,
+    microFEHost
   }) => {
     const app = this.#appRegistry.get({ id, instanceId });
     if (!app) {
@@ -152,7 +153,8 @@ class CAppBridge {
       guest: {
         guestWindow: documentEle?.defaultView,
         ...app
-      }
+      },
+      microFEHost
     });
   };
   #initApplication = async ({
@@ -164,7 +166,8 @@ class CAppBridge {
     homeRoute,
     initialRoute,
     history,
-    theme
+    theme,
+    microFEHost
   }) => {
     const app = this.#appRegistry.get({ id, instanceId });
     if (!app) {
@@ -176,10 +179,8 @@ class CAppBridge {
       throw new Error(
         `Application ${id} with instance id ${instanceId} doesn't expose init method`
       );
-    const host = new CMicroFEHost({
-      guest: {
-        id
-      },
+    const host = microFEHost ?? new CMicroFEHost({
+      guest: { id },
       version: this.#version,
       containerId,
       logger: this.#logger,
@@ -207,7 +208,7 @@ class CAppBridge {
         `Application ${id} with instance id ${instanceId} is loading...`
       );
       let assets = files;
-      const manifest = await ManifestLoader.get(options);
+      const manifest = options.manifest ?? await ManifestLoader.get(options);
       assets = ManifestLoader.getFullFileNameofAssets(manifest, files);
       const cssAssets = assets.filter((fileName) => isCss(fileName));
       const jsAssets = assets.filter((fileName) => !isCss(fileName));
@@ -225,9 +226,12 @@ class CAppBridge {
         id,
         instanceId,
         documentEle,
-        elementIds: [...styleElementIds, ...scriptElementIds]
+        elementIds: [...styleElementIds, ...scriptElementIds],
+        microFEHost: options.microFEHost
       });
-      await this.#initApplication(options);
+      if (!options.selfInitialize) {
+        await this.#initApplication(options);
+      }
       this.#logger.audit(
         `Application ${id} with instance id ${instanceId} loaded`
       );
@@ -326,6 +330,56 @@ class CAppBridge {
       });
     }
   };
+  /**
+   * If the guest's module SO exposes _setUnloadHandler (duck-typed),
+   * bind it to closeApp so the guest can trigger its own teardown.
+   * @param id
+   * @param instanceId
+   */
+  #bindModuleUnload = (id, instanceId) => {
+    const moduleSO = this.#soManager.getObject(
+      ScriptingObjectNames.Module,
+      { id }
+    );
+    const so = moduleSO;
+    const handler = so?._setUnloadHandler;
+    if (typeof handler === "function") {
+      handler(
+        () => this.closeApp(instanceId)
+      );
+    }
+  };
+  /**
+   * Dispatch the module.unloading event and collect feedback.
+   * Returns true if unload is allowed, false if any listener vetoed.
+   * @param id
+   */
+  #canUnload = async (id) => {
+    const moduleSO = this.#soManager.getObject(
+      ScriptingObjectNames.Module,
+      { id }
+    );
+    if (!moduleSO) return true;
+    try {
+      const feedback = await this.#eventManager.dispatchEvent(moduleSO, {
+        event: { id: "module.unloading", name: "unloading" },
+        eventParams: { moduleId: id },
+        eventOptions: { timeout: 1e3 }
+      });
+      if (Array.isArray(feedback) && feedback.some((v) => v === false)) {
+        this.#logger.info(
+          `Unload denied by guest ${id} via module.unloading event`
+        );
+        return false;
+      }
+    } catch (err) {
+      this.#logger.warn({
+        message: `Error dispatching module.unloading event for ${id}`,
+        exception: err
+      });
+    }
+    return true;
+  };
   /**
    * clear session management for the guest application
    * @param instanceId unique instance id of the application
@@ -458,6 +512,7 @@ class CAppBridge {
       return;
     }
     const { id } = app;
+    if (!await this.#canUnload(id)) return;
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       this.#logger.warn(`Configuration for application ${id} is not found`);
@@ -518,14 +573,46 @@ class CAppBridge {
    */
   getApps = () => [...this.#activeApps.values()].map((app) => app.guest);
   /**
-   * Initialize appBridge
+   * Initialize appBridge.
+   * @param preloadedAppConfig - Already-parsed config object. When provided
+   *   the bridge skips its own HTTP fetch of app.config.json.
    */
-  init = async () => {
-    await this.#appConfig.load();
+  init = async (preloadedAppConfig) => {
+    if (preloadedAppConfig) {
+      this.#appConfig.setPreloadedConfig(preloadedAppConfig);
+    } else {
+      await this.#appConfig.load();
+    }
     this.#microFEConfig.init({
       version: this.#version,
       appConfig: this.#appConfig
     });
+    this.#injectPreconnects();
+  };
+  /**
+   * Inject `<link rel="preconnect">` tags into the parent document for each
+   * unique micro-app origin. Called once at the end of {@link init} so that
+   * DNS/TCP/TLS handshakes start before any iframe is created.
+   */
+  #injectPreconnects = () => {
+    const apps = this.#appConfig.get("microFrontendApps") ?? {};
+    const origins = /* @__PURE__ */ new Set();
+    Object.keys(apps).forEach((id) => {
+      const cfg = this.#microFEConfig.getConfigById(id);
+      if (cfg?.hostUrl) {
+        try {
+          origins.add(new URL(cfg.hostUrl).origin);
+        } catch {
+        }
+      }
+    });
+    origins.forEach((origin) => {
+      const link = document.createElement("link");
+      link.rel = "preconnect";
+      link.href = origin;
+      link.crossOrigin = "anonymous";
+      document.head.appendChild(link);
+    });
   };
   /**
    * Mount guest micro frontend application into DOM
@@ -546,10 +633,42 @@ class CAppBridge {
     }
     await this.#mountApp({ ...appConfig, instanceId });
   };
+  /**
+   * Prepare the iframe: create a CMicroFEHost, expose it on window.emui,
+   * and inject a preconnect hint for the guest origin.
+   * @param frameDoc
+   * @param appConfig
+   * @param appConfig.hostUrl
+   * @param options
+   * @param options.id
+   * @param options.containerId
+   */
+  #setupIframe = (frameDoc, appConfig, options) => {
+    const microFEHost = new CMicroFEHost({
+      guest: { id: options.id },
+      version: this.#version,
+      containerId: options.containerId,
+      logger: this.#logger,
+      soManager: this.#soManager,
+      eventManager: this.#eventManager
+    });
+    const iframeWindow = frameDoc.defaultView;
+    if (iframeWindow) {
+      iframeWindow.emui = iframeWindow.emui ?? {};
+      iframeWindow.emui.__host = microFEHost;
+    }
+    const preconnect = frameDoc.createElement("link");
+    preconnect.rel = "preconnect";
+    preconnect.href = appConfig.hostUrl;
+    preconnect.crossOrigin = "anonymous";
+    frameDoc.head.appendChild(preconnect);
+    return microFEHost;
+  };
   /**
    * Open guest micro frontend application
    * @param {OpenAppParams} params - options to open guest application
    */
+  // eslint-disable-next-line max-statements
   openApp = async (params) => {
     const {
       id,
@@ -558,7 +677,8 @@ class CAppBridge {
       theme,
       homeRoute,
       initialRoute,
-      metadata
+      metadata,
+      selfInitialize
     } = params;
     const instanceId = uuidv4();
     if (metadata) this.#guestMetadata.set(id, metadata);
@@ -566,15 +686,15 @@ class CAppBridge {
     if (!appConfig) {
       throw new Error(`Application ${id} is not found in app config`);
     }
+    const manifestPromise = ManifestLoader.get(appConfig);
+    manifestPromise.catch(() => {
+    });
     const frameEle = await Frame.create({
       id,
       instanceId,
       manifestPath: appConfig.manifestPath,
       hostUrl: appConfig.hostUrl,
-      options: {
-        title: appConfig.name,
-        ...frameOptions
-      }
+      options: { title: appConfig.name, ...frameOptions }
     });
     if (!frameEle?.contentDocument)
       throw new Error("unable to create iframe for the microapp");
@@ -584,6 +704,15 @@ class CAppBridge {
         instanceId,
         documentEle: frameEle.contentDocument
       });
+      const microFEHost = this.#setupIframe(
+        frameEle.contentDocument,
+        appConfig,
+        {
+          id,
+          containerId: frameOptions?.containerId
+        }
+      );
+      const manifest = await manifestPromise;
       await this.#loadApp({
         instanceId,
         history,
@@ -592,10 +721,16 @@ class CAppBridge {
         containerId: frameOptions?.containerId,
         ...appConfig,
         homeRoute: homeRoute ?? appConfig.homeRoute,
-        initialRoute
+        initialRoute,
+        microFEHost,
+        selfInitialize,
+        manifest
       });
-      await this.#mountApp({ instanceId, ...appConfig });
+      if (!selfInitialize) {
+        await this.#mountApp({ instanceId, ...appConfig });
+      }
       this.#manageSession({ id, instanceId });
+      this.#bindModuleUnload(id, instanceId);
       return instanceId;
     } catch (err) {
       this.#unloadApp({
@@ -629,6 +764,18 @@ class CAppBridge {
   removeScriptingObject = (objectId, guestId) => {
     this.#soManager.removeScriptingObject(objectId, guestId);
   };
+  /**
+   * Pre-fetch the manifest for a guest application so that a subsequent
+   * {@link openApp} call can skip the manifest network round-trip.
+   * Safe to call multiple times — results are cached.
+   * @param id application id as defined in app.config.json
+   */
+  warmUp = (id) => {
+    const appConfig = this.#microFEConfig.getConfigById(id);
+    if (!appConfig) return;
+    ManifestLoader.get(appConfig).catch(() => {
+    });
+  };
   /**
    * Unmount guest micro frontend application from DOM
    * @param instanceId unique instance id of guest micro frontend application

package/dist/esm/config/app.js

@@ -50,6 +50,14 @@ class CAppConfig {
    * @returns true if key exists
    */
   has = (key = "") => lodashHas(this.#gAppConfig, key);
+  /**
+   * Accept an already-parsed config object, skipping the HTTP fetch.
+   * Useful when the caller (e.g. pui-app-sdk) has already loaded the config.
+   * @param config
+   */
+  setPreloadedConfig = (config) => {
+    this.#gAppConfig = config;
+  };
   /**
    * add version to the base url
    * @returns versioned base url

package/dist/esm/frame.html

@@ -6,27 +6,6 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="icon" href="/favicon.ico" />
     <title>Application</title>
-    <script nonce="__CSP_NONCE__">
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga',
-      );
-    </script>
     <style nonce="__CSP_NONCE__">
       .full-width {
         width: 100%;

package/dist/esm/loaders/script.js

@@ -97,9 +97,11 @@ class ScriptLoader {
    * This method:
    * - Partitions assets into CDN (HTTP/HTTPS) and non-CDN (relative) arrays in a single pass
    * - Creates modulepreload links for all assets for performance optimization
-   * - Loads CDN scripts sequentially first (they may set global variables needed by non-CDN scripts)
-   * - Then loads non-CDN scripts sequentially
-   * - Sequential execution ensures proper dependency resolution and initialization order
+   * - 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
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
@@ -134,15 +136,13 @@ class ScriptLoader {
         nonCdnAssets: []
       }
     );
-    for (const { href, id } of [...cdnAssets, ...nonCdnAssets]) {
-      await this.#loadScript({
-        id,
-        href,
-        documentEle,
-        isESMModule
-      });
-    }
-    return [...cdnAssets, ...nonCdnAssets].map((asset) => asset.id);
+    const orderedAssets = [...cdnAssets, ...nonCdnAssets];
+    await Promise.all(
+      orderedAssets.map(
+        ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
+      )
+    );
+    return orderedAssets.map((asset) => asset.id);
   };
   /**
    * Removes a script element from the document by its ID.

package/dist/esm/tests/serverHandlers.js

@@ -121,14 +121,6 @@ const getServerHandlers = () => {
   return versionedHandlers;
 };
 const serverHandlers = [
-  rest.get(
-    "https://www.google-analytics.com/analytics.js",
-    (req, res, ctx) => res(
-      ctx.status(200),
-      ctx.set("Content-Type", "application/javascript"),
-      ctx.body("")
-    )
-  ),
   rest.get(
     "/latest/app.config.json",
     (req, res, ctx) => res(ctx.json(appConfig))

package/dist/public/assets/{frame.671d9de68be598da64ca.html → frame.4cbbcfa9ded96b660559.html}

@@ -6,27 +6,6 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="icon" href="/favicon.ico" />
     <title>Application</title>
-    <script nonce="__CSP_NONCE__">
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga',
-      );
-    </script>
     <style nonce="__CSP_NONCE__">
       .full-width {
         width: 100%;

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.87b9f6d6c712609094fd.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.dc4dbeb6feea171656da.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.87b9f6d6c712609094fd.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.dc4dbeb6feea171656da.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><script nonce="__CSP_NONCE__">!function(e,t,n,a,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=t.createElement(n),s=t.getElementsByTagName(n)[0],o.async=1,o.src="https://www.google-analytics.com/analytics.js",s.parentNode.insertBefore(o,s)}(window,document,"script",0,"ga")</script><style nonce="__CSP_NONCE__">.full-width{width:100%}.full-height{height:100%}</style><script defer="defer" src="js/emuiAppBridge.87b9f6d6c712609094fd.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.dc4dbeb6feea171656da.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.87b9f6d6c712609094fd.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.dc4dbeb6feea171656da.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>