npm - @elliemae/pui-app-bridge - Versions diffs - 2.23.6 → 2.24.0 - Mend

@elliemae/pui-app-bridge 2.23.6 → 2.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/dist/cjs/index.html CHANGED Viewed

@@ -6,43 +6,83 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <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 src="https://cdn.mortgagetech.q1.ice.com/pui-diagnostics@3"></script>
   </head>
   <body>
-    <header class="bg-indigo-300 h-10 flex place-items-center">
+    <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</h2>
+        <h1
+          class="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight"
+        >
+          Loan Application
+        </h1>
       </div>
       <!-- success feedback -->
       <div id="successFeedback" class="hidden rounded-md bg-green-50 p-4">
         <div class="flex">
           <div class="flex-shrink-0">
             <!-- Heroicon name: mini/check-circle -->
-            <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
+              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>
+            <p class="text-sm font-medium text-green-800">
+              Loan Saved Successfully
+            </p>
+          </div>
         </div>
       </div>
       <!-- error feedback -->
       <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
+              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>
+            <h3 class="text-sm font-medium text-red-800">
+              Credit Score is not meeting the requirement
+            </h3>
           </div>
         </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">

package/dist/cjs/microfeHost.js CHANGED Viewed

@@ -74,8 +74,12 @@ class CMicroFEHost {
         } else if ((0, import_microfe_common.isPublicFunction)(propValue, propName)) {
           Object.defineProperty(proxy, propName, {
             value: (...args) => {
+              const existingCallChain = proxy[propName]?.callContext?.callChain;
               Object.defineProperty(propValue, "callContext", {
-                value: { guest: this.#guest },
+                value: {
+                  guest: this.#guest,
+                  ...existingCallChain?.length ? { callChain: existingCallChain } : {}
+                },
                 configurable: true,
                 enumerable: true,
                 writable: true

package/dist/esm/appBridge.js CHANGED Viewed

@@ -59,6 +59,10 @@ class CAppBridge {
    * list of active apps
    */
   #activeApps = /* @__PURE__ */ new Map();
+  /**
+   * host-supplied metadata per guest, keyed by app id
+   */
+  #guestMetadata = /* @__PURE__ */ new Map();
   /**
    * instance of the app registry
    */
@@ -392,6 +396,22 @@ class CAppBridge {
       } else if (this.#isFunction(propValue)) {
         Object.defineProperty(so, propName, {
           value: async (...args) => {
+            const callerCtx = so[propName]?.callContext;
+            if (callerCtx?.guest) {
+              const existingChain = callerCtx.callChain ?? [];
+              const guestId = callerCtx.guest.id;
+              const meta = this.#guestMetadata.get(guestId);
+              const callerEntry = { id: guestId };
+              if (meta) callerEntry.metadata = meta;
+              Object.defineProperty(propValue, "callContext", {
+                value: {
+                  callChain: [...existingChain, callerEntry]
+                },
+                configurable: true,
+                enumerable: true,
+                writable: true
+              });
+            }
             const retVal = await propValue(...args);
             return isScriptingObjectProxy(retVal) ? this.cloneScriptingObject(retVal) : retVal;
           },
@@ -460,6 +480,7 @@ class CAppBridge {
         });
       }
       this.#activeApps.delete(instanceId);
+      this.#guestMetadata.delete(id);
       Frame.remove(instanceId);
     }
   };
@@ -530,8 +551,17 @@ class CAppBridge {
    * @param {OpenAppParams} params - options to open guest application
    */
   openApp = async (params) => {
-    const { id, frameOptions, history, theme, homeRoute, initialRoute } = params;
+    const {
+      id,
+      frameOptions,
+      history,
+      theme,
+      homeRoute,
+      initialRoute,
+      metadata
+    } = params;
     const instanceId = uuidv4();
+    if (metadata) this.#guestMetadata.set(id, metadata);
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       throw new Error(`Application ${id} is not found in app config`);

package/dist/esm/e2e-host.html ADDED Viewed

@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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>
+  </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">
+      <!-- Instructions -->
+      <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">
+        <!-- Column 1: Controls -->
+        <div class="col-span-2 space-y-4">
+          <!-- App Loading -->
+          <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>
+          <!-- Scripting Object Management -->
+          <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>
+          <!-- Event Dispatching -->
+          <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>
+          <!-- callContext Display -->
+          <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>
+          <!-- Lifecycle -->
+          <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>
+        <!-- Column 2: App container + Event Log -->
+        <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>
+      <!-- Verification Checklist -->
+      <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>