npm - @elliemae/ssf-host - Versions diffs - 2.23.6 → 2.24.0 - Mend

@elliemae/ssf-host 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 (91) hide show

package/dist/cjs/callchain-host.html +262 -0
package/dist/cjs/callchain-intermediate.html +92 -0
package/dist/cjs/e2e-host.html +603 -0
package/dist/cjs/e2e-index.html +234 -0
package/dist/cjs/host.js +93 -36
package/dist/cjs/index.html +304 -151
package/dist/cjs/popup-focus-host.html +318 -0
package/dist/cjs/utils.js +14 -1
package/dist/cjs/v2-host-v1-guest.html +3 -0
package/dist/esm/callchain-host.html +262 -0
package/dist/esm/callchain-intermediate.html +92 -0
package/dist/esm/e2e-host.html +603 -0
package/dist/esm/e2e-index.html +234 -0
package/dist/esm/host.js +94 -37
package/dist/esm/index.html +304 -151
package/dist/esm/popup-focus-host.html +318 -0
package/dist/esm/utils.js +14 -1
package/dist/esm/v2-host-v1-guest.html +3 -0
package/dist/public/callchain-host.html +34 -0
package/dist/public/callchain-host.js +3 -0
package/dist/public/callchain-host.js.br +0 -0
package/dist/public/callchain-host.js.gz +0 -0
package/dist/public/callchain-host.js.map +1 -0
package/dist/public/callchain-intermediate.html +1 -0
package/dist/public/e2e-host.html +5 -0
package/dist/public/e2e-host.js +8 -0
package/dist/public/e2e-host.js.br +0 -0
package/dist/public/e2e-host.js.gz +0 -0
package/dist/public/e2e-host.js.map +1 -0
package/dist/public/e2e-index.html +1 -0
package/dist/public/index.html +1 -1
package/dist/public/init.js +1 -1
package/dist/public/init.js.br +0 -0
package/dist/public/init.js.gz +0 -0
package/dist/public/init.js.map +1 -1
package/dist/public/js/emuiSsfHost.071827d0d7e775690fbb.js +3 -0
package/dist/public/js/emuiSsfHost.071827d0d7e775690fbb.js.br +0 -0
package/dist/public/js/emuiSsfHost.071827d0d7e775690fbb.js.gz +0 -0
package/dist/public/js/emuiSsfHost.071827d0d7e775690fbb.js.map +1 -0
package/dist/public/loan-object.js +1 -1
package/dist/public/loan-object.js.br +0 -0
package/dist/public/loan-object.js.gz +0 -0
package/dist/public/loan-object.js.map +1 -1
package/dist/public/popup-focus-host.html +1 -0
package/dist/public/popup-focus-host.js +6 -0
package/dist/public/popup-focus-host.js.br +0 -0
package/dist/public/popup-focus-host.js.gz +0 -0
package/dist/public/popup-focus-host.js.map +1 -0
package/dist/public/v1-guest-v2-host.html +1 -1
package/dist/public/v2-host-v1-guest.html +1 -1
package/dist/types/lib/host.d.ts +1 -0
package/dist/types/lib/ihost.d.ts +15 -0
package/dist/types/lib/tests/timingDedup.test.d.ts +1 -0
package/dist/types/lib/utils.d.ts +1 -0
package/dist/types/tsconfig.tsbuildinfo +1 -1
package/dist/umd/callchain-host.html +34 -0
package/dist/umd/callchain-host.js +3 -0
package/dist/umd/callchain-host.js.br +0 -0
package/dist/umd/callchain-host.js.gz +0 -0
package/dist/umd/callchain-host.js.map +1 -0
package/dist/umd/callchain-intermediate.html +1 -0
package/dist/umd/e2e-host.html +5 -0
package/dist/umd/e2e-host.js +8 -0
package/dist/umd/e2e-host.js.br +0 -0
package/dist/umd/e2e-host.js.gz +0 -0
package/dist/umd/e2e-host.js.map +1 -0
package/dist/umd/e2e-index.html +1 -0
package/dist/umd/index.html +1 -1
package/dist/umd/index.js +1 -1
package/dist/umd/index.js.br +0 -0
package/dist/umd/index.js.gz +0 -0
package/dist/umd/index.js.map +1 -1
package/dist/umd/init.js +1 -1
package/dist/umd/init.js.br +0 -0
package/dist/umd/init.js.gz +0 -0
package/dist/umd/init.js.map +1 -1
package/dist/umd/loan-object.js +1 -1
package/dist/umd/loan-object.js.br +0 -0
package/dist/umd/loan-object.js.gz +0 -0
package/dist/umd/loan-object.js.map +1 -1
package/dist/umd/popup-focus-host.html +1 -0
package/dist/umd/popup-focus-host.js +6 -0
package/dist/umd/popup-focus-host.js.br +0 -0
package/dist/umd/popup-focus-host.js.gz +0 -0
package/dist/umd/popup-focus-host.js.map +1 -0
package/dist/umd/v2-host-v1-guest.html +1 -1
package/package.json +5 -5
package/dist/public/js/emuiSsfHost.5855ec3cd0fa60013d84.js +0 -3
package/dist/public/js/emuiSsfHost.5855ec3cd0fa60013d84.js.br +0 -0
package/dist/public/js/emuiSsfHost.5855ec3cd0fa60013d84.js.gz +0 -0
package/dist/public/js/emuiSsfHost.5855ec3cd0fa60013d84.js.map +0 -1

package/dist/cjs/popup-focus-host.html ADDED Viewed

@@ -0,0 +1,318 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Popup Focus E2E 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-purple-600 text-white px-4 py-3 flex items-center justify-between"
+    >
+      <h1 class="text-lg font-semibold">Popup Focus E2E Test</h1>
+      <a href="./index.html" class="text-purple-200 hover:text-white text-sm"
+        >&larr; Back to main</a
+      >
+    </header>
+    <main class="mx-auto max-w-5xl px-4 py-4">
+      <!-- Architecture + Behavior -->
+      <div class="grid grid-cols-2 gap-4 mb-4">
+        <div class="bg-purple-50 border border-purple-200 rounded-md p-3">
+          <h2 class="text-sm font-bold text-purple-900 mb-2">
+            Behavior Under Test
+          </h2>
+          <ul class="text-xs text-purple-800 space-y-1 list-disc list-inside">
+            <li>
+              <strong>Trusted domains</strong> (.ice.com, .elliemae.com,
+              .ellielabs.com, localhost): <code>window.opener</code> is kept
+              intact. Re-opening uses <code>window.open('', name)</code> to
+              bring the popup to front.
+            </li>
+            <li>
+              <strong>Untrusted domains</strong> (everything else):
+              <code>window.opener = null</code> is set for security. Re-opening
+              falls back to <code>guest.window.focus()</code>.
+            </li>
+            <li>
+              The host tracks popup windows and detects closure via a periodic
+              monitor.
+            </li>
+          </ul>
+        </div>
+        <div class="bg-green-50 border border-green-200 rounded-md p-3">
+          <h2 class="text-sm font-bold text-green-900 mb-2">Test Steps</h2>
+          <ol
+            class="text-xs text-green-800 space-y-1.5 list-decimal list-inside"
+          >
+            <li>
+              Wait for <code>"Popup Focus Host ready"</code> in the Event Log.
+            </li>
+            <li>
+              <strong>Trusted popup test:</strong> Click "Open Title Service" →
+              popup opens. Click "Re-open Title Service" → the
+              <em>existing</em> popup should come to the foreground (no new
+              window).
+            </li>
+            <li>
+              <strong>Second trusted popup:</strong> Click "Open Credit Service"
+              → second popup opens. Click "Re-open Credit" → same foreground
+              behavior.
+            </li>
+            <li>
+              <strong>Untrusted popup test:</strong> Click "Open Third-Party" →
+              popup opens to <code>example.com</code>. Click "Re-open
+              Third-Party" → focus may or may not work (opener was nulled).
+              Observe the behavior.
+            </li>
+            <li>
+              Verify the Guest Status panel shows the open/closed state of each
+              popup.
+            </li>
+            <li>
+              Manually close a popup window, then check Guest Status updates to
+              "closed".
+            </li>
+          </ol>
+        </div>
+      </div>
+      <!-- Expected Behavior -->
+      <div class="bg-amber-50 border border-amber-200 rounded-md p-3 mb-4">
+        <h2 class="text-sm font-bold text-amber-900 mb-2">Expected Behavior</h2>
+        <div class="grid grid-cols-3 gap-3 text-xs">
+          <div>
+            <h3 class="font-semibold text-amber-800 mb-1">
+              Title / Credit Service (Trusted)
+            </h3>
+            <ul class="text-amber-900 list-disc list-inside space-y-0.5">
+              <li>"Open" → new popup window appears</li>
+              <li>
+                "Re-open" → existing popup comes to front,
+                <strong>no new window</strong>
+              </li>
+              <li>
+                Guest Status shows
+                <span class="text-green-600 font-semibold">open</span>
+              </li>
+              <li>Embedded Pricing Service renders normally</li>
+            </ul>
+          </div>
+          <div>
+            <h3 class="font-semibold text-amber-800 mb-1">
+              Third-Party (Untrusted)
+            </h3>
+            <ul class="text-amber-900 list-disc list-inside space-y-0.5">
+              <li>"Open" → popup opens to <code>example.com</code></li>
+              <li>
+                "Re-open" → <code>focus()</code> is called on stored reference
+                (browser may or may not honor it)
+              </li>
+              <li><code>opener</code> is <code>null</code> inside the popup</li>
+            </ul>
+          </div>
+          <div>
+            <h3 class="font-semibold text-amber-800 mb-1">Popup Closure</h3>
+            <ul class="text-amber-900 list-disc list-inside space-y-0.5">
+              <li>Close a popup manually (X button)</li>
+              <li>
+                Guest Status updates to
+                <span class="text-red-500 font-semibold">closed</span> within 2
+                seconds
+              </li>
+              <li>Re-opening a closed popup should open a new window</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!-- Popup controls -->
+      <div class="grid grid-cols-2 gap-4 mb-4">
+        <div class="bg-white rounded-lg shadow p-4">
+          <h2 class="text-sm font-semibold text-gray-700 mb-3">
+            Popup Actions
+          </h2>
+          <div class="flex flex-col gap-2">
+            <p class="text-xs text-gray-400 font-medium">
+              Trusted (localhost — opener preserved)
+            </p>
+            <button
+              data-testid="btn-open-title-popup"
+              id="btnOpenTitle"
+              class="rounded bg-purple-600 px-4 py-2 text-sm text-white hover:bg-purple-700"
+            >
+              Open Title Service (Popup)
+            </button>
+            <button
+              data-testid="btn-reopen-title-popup"
+              id="btnReopenTitle"
+              class="rounded bg-purple-500 px-4 py-2 text-sm text-white hover:bg-purple-600"
+            >
+              Re-open Title Service (should focus existing)
+            </button>
+            <button
+              data-testid="btn-open-credit-popup"
+              id="btnOpenCredit"
+              class="rounded bg-indigo-600 px-4 py-2 text-sm text-white hover:bg-indigo-700"
+            >
+              Open Credit Service (Popup)
+            </button>
+            <button
+              data-testid="btn-reopen-credit-popup"
+              id="btnReopenCredit"
+              class="rounded bg-indigo-500 px-4 py-2 text-sm text-white hover:bg-indigo-600"
+            >
+              Re-open Credit Service (should focus existing)
+            </button>
+            <hr class="my-2 border-gray-300" />
+            <p class="text-xs text-gray-400 font-medium">
+              Untrusted (opener nulled)
+            </p>
+            <button
+              data-testid="btn-open-thirdparty-popup"
+              id="btnOpenThirdParty"
+              class="rounded bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700"
+            >
+              Open Third-Party (Popup) — untrusted
+            </button>
+            <button
+              data-testid="btn-reopen-thirdparty-popup"
+              id="btnReopenThirdParty"
+              class="rounded bg-red-500 px-4 py-2 text-sm text-white hover:bg-red-600"
+            >
+              Re-open Third-Party (focus test — opener nulled)
+            </button>
+          </div>
+        </div>
+        <div class="bg-white rounded-lg shadow p-4">
+          <h2 class="text-sm font-semibold text-gray-700 mb-3">Guest Status</h2>
+          <div
+            data-testid="popup-guest-list"
+            id="guestList"
+            class="text-xs space-y-1 min-h-[100px]"
+          >
+            <p class="text-gray-400">No popup guests loaded yet</p>
+          </div>
+        </div>
+      </div>
+      <!-- Event log -->
+      <div class="bg-white rounded-lg shadow p-4 mb-4">
+        <h2 class="text-sm font-semibold text-gray-700 mb-2">Event Log</h2>
+        <div
+          data-testid="popup-event-log"
+          id="eventLog"
+          class="text-xs bg-gray-100 rounded p-2 min-h-[100px] max-h-[250px] overflow-y-auto"
+        ></div>
+      </div>
+      <!-- Embedded guest area (for comparison) -->
+      <div class="mb-4">
+        <h2 class="text-sm font-semibold text-gray-700 mb-2">
+          Embedded Guest (for comparison)
+        </h2>
+        <div
+          data-testid="embedded-container"
+          id="embedded-container"
+          class="border-2 border-dashed border-purple-300 rounded-lg min-h-[150px]"
+        ></div>
+      </div>
+      <!-- Verification Checklist -->
+      <div class="bg-gray-100 border border-gray-300 rounded-md p-3">
+        <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-POP-01:</strong> Host initializes, embedded Pricing
+              Service guest loads without error</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-02:</strong> "Open Title Service" opens a new
+              popup window</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-03:</strong> "Re-open Title Service" brings the
+              existing popup to front —
+              <strong>no new window or about:blank tab</strong></span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-04:</strong> "Open Credit Service" opens a second
+              popup (both coexist)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-05:</strong> "Re-open Credit Service" brings
+              credit popup to front</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-06:</strong> Guest Status shows each popup as
+              <span class="text-green-600 font-semibold">open</span></span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-07:</strong> Manually close a popup → Guest Status
+              updates to
+              <span class="text-red-500 font-semibold">closed</span> within
+              ~2s</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-08:</strong> Re-opening a closed popup opens a new
+              window (not just focus)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-09:</strong> "Open Third-Party" opens
+              <code>example.com</code> popup</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-10:</strong> "Re-open Third-Party" attempts
+              <code>focus()</code> (may open about:blank — expected for
+              untrusted, opener was nulled)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-POP-11:</strong> No console errors during trusted
+              popup operations</span
+            >
+          </label>
+        </div>
+      </div>
+    </main>
+    <script src="./popup-focus-host.js" type="module"></script>
+  </body>
+</html>

package/dist/cjs/utils.js CHANGED Viewed

@@ -20,7 +20,8 @@ var utils_exports = {};
 __export(utils_exports, {
   flatten: () => flatten,
   getOrigin: () => getOrigin,
-  isFunction: () => isFunction
+  isFunction: () => isFunction,
+  isTrustedDomain: () => isTrustedDomain
 });
 module.exports = __toCommonJS(utils_exports);
 const getOrigin = (url) => {
@@ -37,3 +38,15 @@ const flatten = (source) => source.flat(Infinity).filter((v) => v !== void 0);
 function isFunction(value) {
   return typeof value === "function";
 }
+const TRUSTED_DOMAIN_SUFFIXES = [".ice.com", ".elliemae.com", ".ellielabs.com"];
+const TRUSTED_HOSTNAMES = ["localhost", "127.0.0.1"];
+const isTrustedDomain = (url) => {
+  try {
+    const { hostname } = new URL(url, document.baseURI);
+    return TRUSTED_HOSTNAMES.includes(hostname) || TRUSTED_DOMAIN_SUFFIXES.some(
+      (suffix) => hostname === suffix.slice(1) || hostname.endsWith(suffix)
+    );
+  } catch {
+    return false;
+  }
+};

package/dist/cjs/v2-host-v1-guest.html CHANGED Viewed

@@ -36,13 +36,16 @@
     </main>
     <script type="module">
       import { Loan } from './loan-object.js';
+      import { Application } from './application-object-v2.js';
       import { getGuestBaseUrl, getHost } from './utils.js';
       import { Analytics } from './analytics-object-v2.js';
       const analyticsObj = new Analytics();
       const hostV2 = getHost(analyticsObj);
       const loanObj = new Loan();
+      const appObj = new Application();
       hostV2.addScriptingObject(loanObj);
+      hostV2.addScriptingObject(appObj);
       const params = new URLSearchParams(document.location.search);
       const { id } = hostV2.loadGuest({
         id: 'guestV1',

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

@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>CallChain E2E Test - Root Host</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">CallChain E2E Test — Root Host (A)</h1>
+      <a href="./index.html" class="text-indigo-200 hover:text-white text-sm"
+        >&larr; Back to main</a
+      >
+    </header>
+    <main class="mx-auto max-w-7xl px-4 py-4">
+      <!-- Architecture + Instructions -->
+      <div class="grid grid-cols-2 gap-4 mb-4">
+        <div class="bg-blue-50 border border-blue-200 rounded-md p-3">
+          <h2 class="text-sm font-bold text-blue-900 mb-2">Architecture</h2>
+          <pre class="text-xs text-blue-800 leading-relaxed">
+Root Host (A)  [localhost:4000]
+  ├─ Exposes: <strong>TestService</strong> scripting object
+  ├─ Loads guest <strong>"intermediateHost"</strong>
+  │    metadata: { vendor: "Acme Credit Corp", tier: "premium" }
+  │
+  └─ Intermediate (B)  [localhost:4000, same-origin iframe]
+       ├─ Connects as V2 guest to A
+       ├─ Loads ice.guest from localhost:4001/index.js
+       ├─ Gets TestService proxy, clones it
+       ├─ Creates own SSFHost, loads guest <strong>"grandchildGuest"</strong>
+       │    metadata: { role: "validator", region: "US-East" }
+       │
+       └─ Grandchild (C)  [localhost:4001, cross-origin iframe]
+            └─ Connects as V2 guest to B
+            └─ Gets TestService proxy → calls methods</pre
+          >
+        </div>
+        <div class="bg-green-50 border border-green-200 rounded-md p-3">
+          <h2 class="text-sm font-bold text-green-900 mb-2">Test Steps</h2>
+          <ol class="text-xs text-green-800 space-y-2 list-decimal list-inside">
+            <li>
+              <strong>Wait for initialization</strong> — check the Invocation
+              Log shows: <code>"Root Host (A) ready"</code>, Intermediate shows
+              <code>"Intermediate (B) ready"</code>, Grandchild shows
+              <code>"Got TestService proxy"</code>.
+            </li>
+            <li>
+              <strong>Click any button</strong> inside the Grandchild (C) panel
+              (e.g. "Call getCallerInfo()").
+            </li>
+            <li>
+              <strong>Verify on the left</strong> — the "callContext.guest" and
+              "callContext.callChain" panels update with the expected values
+              shown below.
+            </li>
+            <li>
+              <strong>Verify on grandchild</strong> — the return value appears
+              in the grandchild's result area (proves round-trip works).
+            </li>
+          </ol>
+        </div>
+      </div>
+      <!-- Expected Values -->
+      <div class="bg-amber-50 border border-amber-200 rounded-md p-3 mb-4">
+        <h2 class="text-sm font-bold text-amber-900 mb-2">
+          Expected Values (when grandchild C calls any method)
+        </h2>
+        <div class="grid grid-cols-2 gap-4 text-xs">
+          <div>
+            <h3 class="font-semibold text-amber-800 mb-1">
+              callContext.guest (direct caller = B)
+            </h3>
+            <pre
+              data-testid="expected-guest"
+              class="bg-white rounded p-2 text-amber-900"
+            >
+{
+  "id": "intermediateHost",
+  "title": "Intermediate Guest+Host (B)",
+  "url": "...callchain-intermediate.html"
+}</pre
+            >
+          </div>
+          <div>
+            <h3 class="font-semibold text-amber-800 mb-1">
+              callContext.callChain (originator chain)
+            </h3>
+            <pre
+              data-testid="expected-callchain"
+              class="bg-white rounded p-2 text-amber-900"
+            >
+[
+  {
+    "id": "grandchildGuest",
+    "metadata": { "role": "validator", "region": "US-East" }
+  },
+  {
+    "id": "intermediateHost",
+    "metadata": { "vendor": "Acme Credit Corp", "tier": "premium" }
+  }
+]</pre
+            >
+          </div>
+        </div>
+      </div>
+      <div class="grid grid-cols-2 gap-4">
+        <!-- Left: callContext results -->
+        <div>
+          <h2 class="text-md font-semibold mb-2">
+            Actual Results (from Root Host A)
+          </h2>
+          <div
+            data-testid="direct-caller-panel"
+            class="bg-white rounded-lg shadow p-3 mb-3"
+          >
+            <h3 class="text-sm font-medium text-gray-500 mb-1">
+              callContext.guest (direct caller)
+            </h3>
+            <pre
+              data-testid="direct-caller-result"
+              id="directCallerResult"
+              class="text-xs bg-gray-100 rounded p-2 min-h-[40px] whitespace-pre-wrap"
+            >
+Waiting — click a button in Grandchild (C)...</pre
+            >
+          </div>
+          <div
+            data-testid="callchain-panel"
+            class="bg-white rounded-lg shadow p-3 mb-3"
+          >
+            <h3 class="text-sm font-medium text-gray-500 mb-1">
+              callContext.callChain (original callers)
+            </h3>
+            <pre
+              data-testid="callchain-result"
+              id="callChainResult"
+              class="text-xs bg-gray-100 rounded p-2 min-h-[60px] whitespace-pre-wrap"
+            >
+Waiting — click a button in Grandchild (C)...</pre
+            >
+          </div>
+          <div
+            data-testid="method-result-panel"
+            class="bg-white rounded-lg shadow p-3 mb-3"
+          >
+            <h3 class="text-sm font-medium text-gray-500 mb-1">
+              Method return value (returned to grandchild)
+            </h3>
+            <pre
+              data-testid="method-return-result"
+              id="methodReturnResult"
+              class="text-xs bg-gray-100 rounded p-2 min-h-[40px] whitespace-pre-wrap"
+            >
+Waiting — click a button in Grandchild (C)...</pre
+            >
+          </div>
+          <div
+            data-testid="invocation-log-panel"
+            class="bg-white rounded-lg shadow p-3"
+          >
+            <h3 class="text-sm font-medium text-gray-500 mb-1">
+              Invocation Log
+            </h3>
+            <div
+              data-testid="invocation-log"
+              id="invocationLog"
+              class="text-xs bg-gray-100 rounded p-2 min-h-[80px] max-h-[200px] overflow-y-auto"
+            ></div>
+          </div>
+        </div>
+        <!-- Right: guest container -->
+        <div>
+          <h2 class="text-md font-semibold mb-2">
+            Intermediate Guest (B) → Grandchild Guest (C)
+          </h2>
+          <div
+            data-testid="intermediate-guest-container"
+            id="intermediate-container"
+            class="border-2 border-dashed border-indigo-300 rounded-lg h-[400px]"
+          ></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-CC-01:</strong> All three layers initialized without
+              errors (Log shows "ready" messages, no ERROR lines)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-02:</strong> <code>callContext.guest.id</code> =
+              <code>"intermediateHost"</code> (B is the direct caller, not
+              C)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-03:</strong> <code>callChain[0].id</code> =
+              <code>"grandchildGuest"</code> with metadata
+              <code>{ role, region }</code></span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-04:</strong> <code>callChain[1].id</code> =
+              <code>"intermediateHost"</code> with metadata
+              <code>{ vendor, tier }</code></span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-05:</strong> Grandchild (C) receives the method
+              return value (result appears in C's panel)</span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-06:</strong> All three methods work:
+              <code>getCallerInfo()</code>, <code>ping()</code>,
+              <code>getLoanDetails()</code></span
+            >
+          </label>
+          <label class="flex items-start gap-2">
+            <input type="checkbox" class="mt-0.5" />
+            <span
+              ><strong>TC-CC-07:</strong> No cross-origin or console errors
+              during invocations</span
+            >
+          </label>
+        </div>
+      </div>
+    </main>
+    <script src="./callchain-host.js" type="module"></script>
+  </body>
+</html>