@rehers/rehers-roleplay-sdk 1.0.0 → 2.1.1

package/README.md

@@ -1,84 +1,144 @@
-# @rehers/seamless-sdk
+# @rehers/rehers-roleplay-sdk
 
-Lightweight vanilla JS SDK for embedding Seamless roleplay call sessions. Opens a modal with an iframe — no framework dependencies.
+Lightweight vanilla JS SDK for embedding roleplay call sessions. Opens a modal (dialog mode) or mounts into a container (mount mode) — no framework dependencies.
 
 ## Install
 
 ```bash
-npm install @rehers/seamless-sdk
+npm install @rehers/rehers-roleplay-sdk
 ```
 
 Or load via CDN:
 
 ```html
-<script src="https://unpkg.com/@rehers/seamless-sdk"></script>
+<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
 ```
 
 ## Usage
 
 ```html
-<script src="https://unpkg.com/@rehers/seamless-sdk"></script>
+<script src="https://unpkg.com/@rehers/rehers-roleplay-sdk"></script>
 <script>
-  // 1. Initialize with a login pass from your backend
+  // 1. Initialize with a publishable key
   SeamlessRoleplay.init({
-    loginPass: 'lp_abc123...',
-    onCallEnd: function (data) {
-      console.log('Call ended:', data.callId, data.duration);
+    publishableKey: 'pk_live_abc123',
+    userId: 'user_789',
+    userEmail: 'john@example.com',       // optional
+    trialUrl: 'https://seamless.ai/pricing', // optional — shown when user not found
+    onReady: function() {
+      console.log('SDK ready');
+    },
+    onError: function(err) {
+      console.error('SDK error:', err.code, err.message);
     },
   });
 
-  // 2. Open the roleplay modal for a contact
+  // 2. Open the roleplay modal for a contact (dialog mode)
   SeamlessRoleplay.open({
-    contactName: 'Jane Smith',
-    contactCompany: 'Acme Corp',
-    contactTitle: 'VP of Sales',
-    linkedinUrl: 'https://linkedin.com/in/jane-smith', // optional
-    scenarioId: 'sc_123', // optional — omit to show scenario picker
+    name: 'Jane Smith',
+    domain: 'acme.com',
+    company: 'Acme Corp',
+    title: 'VP of Sales',
+    companyDescription: 'Enterprise software company', // optional
+    liUrl: 'https://linkedin.com/in/jane-smith',       // optional
+    onCallStarted: function(data) { console.log('Call started:', data.callId); },
+    onCallEnded: function(data) { console.log('Call ended:', data.callId, data.duration); },
+    onClose: function() { console.log('Dialog closed'); },
+    onError: function(data) { console.error('Error:', data.code, data.message); },
   });
 
-  // 3. Close programmatically (user can also close via X button)
-  SeamlessRoleplay.close();
+  // 2b. Or mount into a container (full-page embed)
+  SeamlessRoleplay.mount(document.getElementById('roleplay-container'), {
+    name: 'Jane Smith',
+    domain: 'acme.com',
+    company: 'Acme Corp',
+    title: 'VP of Sales',
+  });
 
-  // 4. Full cleanup when done
+  // Close and destroy
+  SeamlessRoleplay.close();
   SeamlessRoleplay.destroy();
 </script>
 ```
 
+## Trial Mode
+
+If the user doesn't have an active account, provide a `trialUrl` during init. When the backend returns `USER_NOT_FOUND`, the SDK will render a trial screen:
+
+```js
+SeamlessRoleplay.init({
+  publishableKey: 'pk_live_abc123',
+  userId: 'unknown_user',
+  trialUrl: 'https://seamless.ai/pricing',
+});
+```
+
 ## API
 
 ### `SeamlessRoleplay.init(options)`
 
 | Option | Type | Required | Description |
 |---|---|---|---|
-| `loginPass` | `string` | Yes | Seamless login pass obtained from your backend |
-| `appOrigin` | `string` | No | Override app origin (defaults to production) |
-| `onClose` | `() => void` | No | Called when modal closes |
-| `onCallStart` | `({ callId }) => void` | No | Called when a call begins |
-| `onCallEnd` | `({ callId, duration? }) => void` | No | Called when a call ends |
-| `onError` | `({ code, message }) => void` | No | Called on error |
+| `publishableKey` | `string` | Yes | Publishable API key |
+| `userId` | `string` | Yes | Your user's unique identifier |
+| `userEmail` | `string` | No | User email for account matching |
+| `userToken` | `string` | No | Signed JWT for identity verification |
+| `trialUrl` | `string` | No | URL shown when user not found |
+| `origin` | `string` | No | Override app origin (dev only) |
+| `onReady` | `function` | No | Called when session is ready |
+| `onError` | `function` | No | Called on init error `({ code, message })` |
 
-### `SeamlessRoleplay.open(contactData)`
+### `SeamlessRoleplay.open(data)`
+
+Opens the roleplay in a modal dialog overlay.
 
 | Field | Type | Required | Description |
 |---|---|---|---|
-| `contactName` | `string` | Yes | Full name of the contact |
-| `contactCompany` | `string` | Yes | Company name |
-| `contactTitle` | `string` | Yes | Job title |
-| `linkedinUrl` | `string` | No | LinkedIn profile URL |
-| `scenarioId` | `string` | No | Auto-select a scenario (omit to show picker) |
+| `name` | `string` | Yes | Full name of the contact |
+| `domain` | `string` | Yes | Company domain (e.g. "stripe.com") |
+| `company` | `string` | Yes | Company name |
+| `title` | `string` | Yes | Job title |
+| `companyDescription` | `string` | No | Brief company description |
+| `liUrl` | `string` | No | LinkedIn profile URL |
+| `onCallStarted` | `function` | No | `({ callId })` |
+| `onCallEnded` | `function` | No | `({ callId, duration? })` |
+| `onClose` | `function` | No | Called when dialog closes |
+| `onError` | `function` | No | `({ code, message })` |
+
+### `SeamlessRoleplay.mount(container, data)`
+
+Mounts the roleplay into a DOM element (full-page embed). Same `data` options as `open()`.
 
 ### `SeamlessRoleplay.close()`
 
-Closes the modal and notifies the iframe to end any active call.
+Closes the active dialog or unmounts.
 
 ### `SeamlessRoleplay.destroy()`
 
-Full cleanup — removes all DOM elements and event listeners.
+Tears down everything — clears tokens, timers, and DOM elements.
+
+## Auth Flow
+
+```
+SDK                                      Backend
+─────────────────                        ─────────────────
+POST /api/sdk/session
+  X-Publishable-Key: pk_live_abc123
+  Body: { userId, userEmail? }
+                                         1. Validate key + origin
+                                         2. Find/create user
+                                         3. Mint JWT (1hr TTL)
+                                ←────    { sessionToken, expiresIn }
+                                         OR { error: "USER_NOT_FOUND" }
+
+Token stored in memory (not localStorage)
+Auto-refreshes at 80% of TTL
+```
 
 ## TypeScript
 
-Full type declarations are included. Import types with:
+Full type declarations are included:
 
 ```ts
-import type { SeamlessRoleplaySDK, SeamlessRoleplayInitOptions, SeamlessRoleplayContactData } from '@rehers/seamless-sdk';
+import type { SeamlessRoleplaySDK, SeamlessRoleplayOpenData } from '@rehers/rehers-roleplay-sdk';
 ```

package/index.d.ts

@@ -1,39 +1,90 @@
 export interface SeamlessRoleplayInitOptions {
-  /** Seamless login pass for authentication */
-  loginPass: string;
-  /** Override the app origin (default: production URL) */
-  appOrigin?: string;
-  /** Called when the modal is closed */
+  /** Publishable API key (starts with pk_live_ or pk_test_) */
+  publishableKey: string;
+  /** Your user's unique identifier */
+  userId: string;
+  /** User email — required for secure account matching */
+  userEmail: string;
+  /** Optional signed JWT for identity verification */
+  userToken?: string;
+  /** URL shown when the user is not found (trial mode) */
+  trialUrl?: string;
+  /** Override the app origin — where the iframe loads from (for dev/testing only) */
+  origin?: string;
+  /** Called when the SDK session is ready */
+  onReady?: () => void;
+  /** Called on initialization error */
+  onError?: (error: { code: string; message: string }) => void;
+}
+
+export interface SeamlessRoleplayOpenData {
+  /** Full name of the contact */
+  name: string;
+  /** Company domain (e.g. "stripe.com") */
+  domain: string;
+  /** Company name */
+  company: string;
+  /** Job title of the contact */
+  title: string;
+  /** Optional company description */
+  companyDescription?: string;
+  /** Optional LinkedIn profile URL */
+  liUrl?: string;
+  /** Called when the roleplay call starts */
+  onCallStarted?: (data: { callId: string }) => void;
+  /** Called when the roleplay call ends */
+  onCallEnded?: (data: { callId: string; duration?: number }) => void;
+  /** Called when the dialog/mount is closed */
   onClose?: () => void;
-  /** Called when a call begins */
-  onCallStart?: (data: { callId: string }) => void;
-  /** Called when a call ends */
-  onCallEnd?: (data: { callId: string; duration?: number }) => void;
-  /** Called on error */
+  /** Called on error during the session */
   onError?: (data: { code: string; message: string }) => void;
 }
 
-export interface SeamlessRoleplayContactData {
+export interface AddToScenarioContact {
   /** Full name of the contact */
-  contactName: string;
-  /** Company of the contact */
-  contactCompany: string;
+  name: string;
+  /** Company name */
+  company: string;
   /** Job title of the contact */
-  contactTitle: string;
+  title: string;
+  /** Company domain (e.g. "stripe.com") */
+  domain: string;
   /** Optional LinkedIn profile URL */
-  linkedinUrl?: string;
-  /** Optional scenario ID to auto-select */
-  scenarioId?: string;
+  liUrl?: string;
+  /** Optional company description */
+  companyDescription?: string;
+}
+
+export interface AddToScenarioCompleteData {
+  scenarioId: string;
+  scenarioName: string;
+  addedCount: number;
+  skippedCount: number;
+}
+
+export interface AddToScenarioOptions {
+  /** Array of contacts to add (1–25) */
+  contacts: AddToScenarioContact[];
+  /** Called when contacts have been successfully added */
+  onComplete?: (data: AddToScenarioCompleteData) => void;
+  /** Called when the dialog is closed */
+  onClose?: () => void;
+  /** Called on error */
+  onError?: (error: { code: string; message: string }) => void;
 }
 
 export interface SeamlessRoleplaySDK {
-  /** Initialize the SDK. Must be called before open(). */
+  /** Initialize the SDK with a publishable key. */
   init(options: SeamlessRoleplayInitOptions): void;
-  /** Open the roleplay modal with contact data. */
-  open(data: SeamlessRoleplayContactData): void;
-  /** Close the modal and notify the iframe. */
+  /** Open the roleplay modal for a contact (dialog mode). */
+  open(data: SeamlessRoleplayOpenData): void;
+  /** Mount the roleplay into a container element (full-page embed). */
+  mount(container: HTMLElement, data: SeamlessRoleplayOpenData): void;
+  /** Open the add-to-scenario dialog for bulk contact import. */
+  addToScenario(options: AddToScenarioOptions): void;
+  /** Close the roleplay dialog or unmount. */
   close(): void;
-  /** Full cleanup — remove DOM and event listeners. */
+  /** Destroy the SDK — clears state, timers, and DOM. */
   destroy(): void;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehers/rehers-roleplay-sdk",
-  "version": "1.0.0",
+  "version": "2.1.1",
   "description": "Seamless Roleplay SDK — embed roleplay call sessions via a modal + iframe",
   "main": "roleplay-sdk.js",
   "types": "index.d.ts",

package/roleplay-sdk.js

@@ -1,288 +1,717 @@
 /**
- * SeamlessRoleplay SDK
- * Lightweight vanilla JS SDK for embedding roleplay call sessions.
+ * SeamlessRoleplay SDK v2
+ *
+ * Publishable-key auth model. No build step required.
  *
  * Usage:
- *   SeamlessRoleplay.init({ loginPass: '...', onCallEnd: (data) => {} });
- *   SeamlessRoleplay.open({ contactName: '...', contactCompany: '...', contactTitle: '...' });
- *   SeamlessRoleplay.close();
- *   SeamlessRoleplay.destroy();
+ *   SeamlessRoleplay.init({ publishableKey: 'pk_live_...', userId: 'user_789' });
+ *   SeamlessRoleplay.open({ name: '...', domain: '...', company: '...', title: '...' });
  */
 (function () {
   "use strict";
 
-  var DEFAULT_APP_ORIGIN = "https://roleplaywithseamless.ai";
+  var DEFAULT_APP_ORIGIN = "https://app.roleplaywithseamless.ai";
+  var DEFAULT_API_ORIGIN = "https://server.roleplaywithseamless.ai";
+  var SESSION_TIMEOUT_MS = 15000;
+  var SDK_LOG_PREFIX = "[SeamlessRoleplay]";
+
+  // ── State ───────────────────────────────────────────────────────────
+  var publishableKey = null;
+  var userId = null;
+  var userEmail = null;
+  var userToken = null;
+  var trialUrl = null;
+  var appOrigin = null;
+
+  var sessionToken = null;
+  var sessionExpiresAt = 0; // epoch ms
+  var refreshTimer = null;
+  var fetchingSession = null; // single-flight Promise
+
+  var initCallbacks = { onReady: null, onError: null };
+  var callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+  var addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  var addToScenarioPendingContacts = null;
 
-  var config = null;
   var overlay = null;
   var iframe = null;
+  var mountContainer = null;
   var pendingContactData = null;
-  var iframeAuthenticated = false;
-  var globalListener = null;
+  var mode = null; // "dialog" | "mount" | "add-to-scenario"
+  var listener = null;
+  var initCalled = false;
+  var closeTeardownTimer = null;
+
+  // ── Safe logging ──────────────────────────────────────────────────
 
-  function resolveOrigin() {
-    return (config && config.appOrigin) || DEFAULT_APP_ORIGIN;
+  function logError(method, err) {
+    try {
+      if (typeof console !== "undefined" && console.error) {
+        console.error(SDK_LOG_PREFIX, method + ":", err && err.message ? err.message : err);
+      }
+    } catch (_) {
+      // Never throw from the logger itself
+    }
+  }
+
+  // ── Helpers ─────────────────────────────────────────────────────────
+
+  function getOrigin() {
+    return appOrigin || DEFAULT_APP_ORIGIN;
+  }
+
+  function getApiOrigin() {
+    return DEFAULT_API_ORIGIN;
   }
 
   function sendToIframe(msg) {
-    if (iframe && iframe.contentWindow) {
-      iframe.contentWindow.postMessage(msg, resolveOrigin());
+    try {
+      if (iframe && iframe.contentWindow) {
+        iframe.contentWindow.postMessage(msg, getOrigin());
+      }
+    } catch (e) {
+      logError("sendToIframe", e);
     }
   }
 
-  function handleMessage(event) {
-    if (!config) return;
-    var origin = resolveOrigin();
-    // Allow messages from the configured app origin
-    if (event.origin !== origin) return;
-
-    var data = event.data;
-    if (!data || typeof data.type !== "string") return;
-
-    switch (data.type) {
-      case "ROLEPLAY_READY":
-        // Iframe is loaded — send the login pass
-        if (config.loginPass) {
-          sendToIframe({
-            type: "seamless-login-pass",
-            loginPass: config.loginPass,
-          });
-        }
-        break;
-
-      case "ROLEPLAY_EMBED_AUTHENTICATED":
-        iframeAuthenticated = true;
-        // Send any pending contact data
-        if (pendingContactData) {
-          sendToIframe({
-            type: "roleplay-contact-data",
-            contactName: pendingContactData.contactName,
-            contactCompany: pendingContactData.contactCompany,
-            contactTitle: pendingContactData.contactTitle,
-            linkedinUrl: pendingContactData.linkedinUrl || undefined,
-            scenarioId: pendingContactData.scenarioId || undefined,
-          });
-          pendingContactData = null;
+  // ── Session management ──────────────────────────────────────────────
+
+  function fetchSession() {
+    if (fetchingSession) return fetchingSession;
+
+    fetchingSession = new Promise(function (resolve, reject) {
+      var url = getApiOrigin() + "/api/sdk/session";
+      var body = { userId: userId };
+      if (userEmail) body.userEmail = userEmail;
+      if (userToken) body.userToken = userToken;
+
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-Type", "application/json");
+      xhr.setRequestHeader("X-Publishable-Key", publishableKey);
+      xhr.withCredentials = false;
+      xhr.timeout = SESSION_TIMEOUT_MS;
+
+      xhr.onload = function () {
+        fetchingSession = null;
+        var data;
+        try {
+          data = JSON.parse(xhr.responseText);
+        } catch (e) {
+          reject({ code: "PARSE_ERROR", message: "Invalid response from session endpoint" });
+          return;
         }
-        break;
 
-      case "ROLEPLAY_CALL_STARTED":
-        if (typeof config.onCallStart === "function") {
-          config.onCallStart({ callId: data.callId });
+        if (xhr.status === 200 && data.sessionToken) {
+          sessionToken = data.sessionToken;
+          var ttl = (data.expiresIn || 3600) * 1000;
+          sessionExpiresAt = Date.now() + ttl;
+          scheduleRefresh(ttl);
+          resolve({ sessionToken: sessionToken });
+          return;
         }
-        break;
 
-      case "ROLEPLAY_CALL_ENDED":
-        if (typeof config.onCallEnd === "function") {
-          config.onCallEnd({
-            callId: data.callId,
-            duration: data.duration,
-          });
+        if (data.error === "USER_NOT_FOUND") {
+          // Trial mode — not a fatal error
+          sessionToken = null;
+          resolve({ trialMode: true });
+          return;
         }
-        break;
 
-      case "ROLEPLAY_CLOSED":
-        doClose();
-        break;
+        reject({
+          code: data.error || "SESSION_ERROR",
+          message: data.message || "Failed to create session (HTTP " + xhr.status + ")",
+        });
+      };
 
-      case "ROLEPLAY_ERROR":
-        if (typeof config.onError === "function") {
-          config.onError({ code: data.code, message: data.message });
-        }
-        break;
-    }
-  }
+      xhr.onerror = function () {
+        fetchingSession = null;
+        reject({ code: "NETWORK_ERROR", message: "Network error contacting session endpoint" });
+      };
+
+      xhr.ontimeout = function () {
+        fetchingSession = null;
+        reject({ code: "TIMEOUT", message: "Session request timed out after " + SESSION_TIMEOUT_MS + "ms" });
+      };
 
-  function createOverlay() {
-    var el = document.createElement("div");
-    el.id = "seamless-roleplay-overlay";
-    var s = el.style;
-    s.position = "fixed";
-    s.top = "0";
-    s.left = "0";
-    s.width = "100%";
-    s.height = "100%";
-    s.zIndex = "2147483647";
-    s.display = "flex";
-    s.alignItems = "center";
-    s.justifyContent = "center";
-    s.background = "rgba(0, 0, 0, 0.6)";
-    s.backdropFilter = "blur(4px)";
-
-    // Container
-    var container = document.createElement("div");
-    var cs = container.style;
-    cs.position = "relative";
-    cs.width = "90vw";
-    cs.maxWidth = "1100px";
-    cs.height = "85vh";
-    cs.maxHeight = "800px";
-    cs.borderRadius = "16px";
-    cs.overflow = "hidden";
-    cs.background = "#fff";
-    cs.boxShadow = "0 25px 60px rgba(0,0,0,0.3)";
-
-    // Close button
-    var closeBtn = document.createElement("button");
-    closeBtn.type = "button";
-    closeBtn.innerHTML = "×";
-    var cbs = closeBtn.style;
-    cbs.position = "absolute";
-    cbs.top = "12px";
-    cbs.right = "12px";
-    cbs.zIndex = "10";
-    cbs.width = "32px";
-    cbs.height = "32px";
-    cbs.border = "none";
-    cbs.borderRadius = "50%";
-    cbs.background = "rgba(0,0,0,0.08)";
-    cbs.color = "#333";
-    cbs.fontSize = "20px";
-    cbs.cursor = "pointer";
-    cbs.display = "flex";
-    cbs.alignItems = "center";
-    cbs.justifyContent = "center";
-    cbs.lineHeight = "1";
-    closeBtn.addEventListener("click", function () {
-      SeamlessRoleplay.close();
+      xhr.onabort = function () {
+        fetchingSession = null;
+        reject({ code: "ABORTED", message: "Session request was aborted" });
+      };
+
+      xhr.send(JSON.stringify(body));
     });
 
-    // Iframe
-    var appOrigin = resolveOrigin();
-    var iframeEl = document.createElement("iframe");
-    iframeEl.src = appOrigin + "/embed/roleplay-call";
-    iframeEl.allow = "camera; microphone; display-capture";
-    var ifs = iframeEl.style;
-    ifs.width = "100%";
-    ifs.height = "100%";
-    ifs.border = "none";
-    ifs.display = "block";
-
-    container.appendChild(closeBtn);
-    container.appendChild(iframeEl);
-    el.appendChild(container);
-
-    // Close on backdrop click
-    el.addEventListener("click", function (e) {
-      if (e.target === el) {
-        SeamlessRoleplay.close();
-      }
+    return fetchingSession;
+  }
+
+  function getSessionToken() {
+    if (sessionToken && Date.now() < sessionExpiresAt - 30000) {
+      return Promise.resolve(sessionToken);
+    }
+    return fetchSession().then(function (result) {
+      return result.sessionToken || null;
     });
+  }
 
-    return { overlay: el, iframe: iframeEl };
+  function scheduleRefresh(ttlMs) {
+    if (refreshTimer) clearTimeout(refreshTimer);
+    var delay = Math.max(ttlMs * 0.8, 5000);
+    refreshTimer = setTimeout(function () {
+      fetchSession().catch(function () {
+        // Silent — next open() will retry
+      });
+    }, delay);
   }
 
-  function doClose() {
-    if (overlay && overlay.parentNode) {
-      overlay.parentNode.removeChild(overlay);
+  // ── Teardown ────────────────────────────────────────────────────────
+
+  function teardown() {
+    try {
+      // Cancel any pending close→teardown timer so it can't destroy a new dialog
+      if (closeTeardownTimer) {
+        clearTimeout(closeTeardownTimer);
+        closeTeardownTimer = null;
+      }
+
+      if (mode === "dialog" || mode === "add-to-scenario") {
+        if (overlay && overlay.parentNode) {
+          overlay.parentNode.removeChild(overlay);
+        }
+        overlay = null;
+      } else if (mode === "mount") {
+        if (iframe && iframe.parentNode) {
+          iframe.parentNode.removeChild(iframe);
+        }
+        mountContainer = null;
+      }
+
+      if (listener) {
+        window.removeEventListener("message", listener);
+        listener = null;
+      }
+    } catch (e) {
+      logError("teardown", e);
     }
-    overlay = null;
+
+    // Always reset state even if DOM cleanup failed
     iframe = null;
-    iframeAuthenticated = false;
     pendingContactData = null;
-    if (typeof config.onClose === "function") {
-      config.onClose();
+    addToScenarioPendingContacts = null;
+    mode = null;
+    callbacks = { onCallStarted: null, onCallEnded: null, onClose: null, onError: null };
+    addToScenarioCallbacks = { onComplete: null, onClose: null, onError: null };
+  }
+
+  // ── Message handler ─────────────────────────────────────────────────
+
+  function dispatchInitToIframe(token) {
+    if (addToScenarioPendingContacts) {
+      sendToIframe({
+        type: "seamless-add-to-scenario-init",
+        sessionToken: token,
+        publishableKey: publishableKey,
+        userId: userId,
+        contacts: addToScenarioPendingContacts,
+      });
+    } else if (token && pendingContactData) {
+      sendToIframe({
+        type: "seamless-session-init",
+        sessionToken: token,
+        contact: {
+          name: pendingContactData.name,
+          domain: pendingContactData.domain,
+          company: pendingContactData.company,
+          title: pendingContactData.title,
+          companyDescription: pendingContactData.companyDescription || undefined,
+          liUrl: pendingContactData.liUrl || undefined,
+        },
+      });
+    } else if (trialUrl) {
+      sendToIframe({
+        type: "seamless-session-init",
+        trialUrl: trialUrl,
+        contact: null,
+      });
+    } else {
+      sendToIframe({
+        type: "seamless-session-init",
+        trialUrl: null,
+        contact: null,
+      });
     }
   }
 
+  function handleMessage(event) {
+    try {
+      if (event.origin !== getOrigin()) return;
+
+      var data = event.data;
+      if (!data || typeof data.type !== "string") return;
+
+      switch (data.type) {
+        case "ROLEPLAY_READY":
+          // Ensure we have a fresh token before sending init to iframe
+          getSessionToken()
+            .then(function (token) {
+              dispatchInitToIframe(token);
+            })
+            .catch(function () {
+              // Token refresh failed — send whatever we have (iframe will handle auth errors)
+              dispatchInitToIframe(sessionToken);
+            });
+          break;
+
+        case "ROLEPLAY_CALL_STARTED":
+          if (callbacks.onCallStarted) {
+            callbacks.onCallStarted({ callId: data.callId });
+          }
+          break;
+
+        case "ROLEPLAY_CALL_ENDED":
+          if (callbacks.onCallEnded) {
+            callbacks.onCallEnded({ callId: data.callId, duration: data.duration });
+          }
+          break;
+
+        case "ROLEPLAY_ERROR":
+          if (callbacks.onError) {
+            callbacks.onError({ code: data.code, message: data.message });
+          }
+          break;
+
+        case "ROLEPLAY_CLOSED":
+          var onClose = callbacks.onClose;
+          teardown();
+          if (onClose) onClose();
+          break;
+
+        case "ADD_TO_SCENARIO_COMPLETE":
+          var atsOnComplete = addToScenarioCallbacks.onComplete;
+          teardown();
+          if (atsOnComplete) {
+            atsOnComplete({
+              scenarioId: data.scenarioId,
+              scenarioName: data.scenarioName,
+              addedCount: data.addedCount,
+              skippedCount: data.skippedCount,
+            });
+          }
+          break;
+
+        case "ADD_TO_SCENARIO_ERROR":
+          if (addToScenarioCallbacks.onError) {
+            addToScenarioCallbacks.onError({ code: data.code, message: data.message });
+          }
+          break;
+
+        case "ADD_TO_SCENARIO_CLOSED":
+          var atsOnClose = addToScenarioCallbacks.onClose;
+          teardown();
+          if (atsOnClose) atsOnClose();
+          break;
+      }
+    } catch (e) {
+      logError("handleMessage", e);
+    }
+  }
+
+  // ── Close ───────────────────────────────────────────────────────────
+
+  function close() {
+    try {
+      sendToIframe({ type: "roleplay-close" });
+      if (closeTeardownTimer) clearTimeout(closeTeardownTimer);
+      closeTeardownTimer = setTimeout(teardown, 300);
+    } catch (e) {
+      logError("close", e);
+      teardown();
+    }
+  }
+
+  // ── Create iframe ───────────────────────────────────────────────────
+
+  function createIframe() {
+    var iframeEl = document.createElement("iframe");
+    iframeEl.src = getOrigin() + "/embed/roleplay-call";
+    iframeEl.allow = "camera; microphone; display-capture; autoplay";
+    iframeEl.style.width = "100%";
+    iframeEl.style.height = "100%";
+    iframeEl.style.border = "none";
+    iframeEl.style.display = "block";
+    return iframeEl;
+  }
+
+  // ── SDK API ─────────────────────────────────────────────────────────
+
   var SeamlessRoleplay = {
     /**
-     * Initialize the SDK. Call once.
-     * @param {Object} opts
-     * @param {string} opts.loginPass - Seamless login pass for auth
-     * @param {string} [opts.appOrigin] - Override app origin (default: production)
-     * @param {Function} [opts.onClose] - Called when modal closes
-     * @param {Function} [opts.onCallStart] - Called when call begins
-     * @param {Function} [opts.onCallEnd] - Called when call ends ({ callId, duration })
-     * @param {Function} [opts.onError] - Called on error ({ code, message })
+     * Initialize the SDK with a publishable key.
      */
     init: function (opts) {
-      if (!opts || !opts.loginPass) {
-        throw new Error(
-          "SeamlessRoleplay.init() requires { loginPass: string }"
-        );
-      }
-      config = {
-        loginPass: opts.loginPass,
-        appOrigin: opts.appOrigin || DEFAULT_APP_ORIGIN,
-        onClose: opts.onClose || null,
-        onCallStart: opts.onCallStart || null,
-        onCallEnd: opts.onCallEnd || null,
-        onError: opts.onError || null,
-      };
+      try {
+        if (!opts || !opts.publishableKey || !opts.userId || !opts.userEmail) {
+          logError("init", "requires { publishableKey, userId, userEmail }");
+          return;
+        }
+
+        // Reset prior state if init() is called again
+        if (refreshTimer) {
+          clearTimeout(refreshTimer);
+          refreshTimer = null;
+        }
+        fetchingSession = null;
+        sessionToken = null;
+        sessionExpiresAt = 0;
+
+        publishableKey = opts.publishableKey;
+        userId = opts.userId;
+        userEmail = opts.userEmail || null;
+        userToken = opts.userToken || null;
+        trialUrl = opts.trialUrl || null;
+        appOrigin = opts.origin || null;
+        initCallbacks.onReady = opts.onReady || null;
+        initCallbacks.onError = opts.onError || null;
+        initCalled = true;
 
-      // Set up the global message listener
-      if (globalListener) {
-        window.removeEventListener("message", globalListener);
+        // Fetch session immediately
+        fetchSession()
+          .then(function (result) {
+            if (result.trialMode && !trialUrl) {
+              // User not found and no trial URL configured — still call onReady
+              // The open() will show an error state in the iframe
+            }
+            if (initCallbacks.onReady) initCallbacks.onReady();
+          })
+          .catch(function (err) {
+            if (initCallbacks.onError) {
+              initCallbacks.onError({ code: err.code || "INIT_ERROR", message: err.message || "Initialization failed" });
+            }
+          });
+      } catch (e) {
+        logError("init", e);
+        if (opts && typeof opts.onError === "function") {
+          try { opts.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during init" }); } catch (_) {}
+        }
       }
-      globalListener = handleMessage;
-      window.addEventListener("message", globalListener);
     },
 
     /**
-     * Open the roleplay modal with contact data.
-     * @param {Object} data
-     * @param {string} data.contactName
-     * @param {string} data.contactCompany
-     * @param {string} data.contactTitle
-     * @param {string} [data.linkedinUrl]
-     * @param {string} [data.scenarioId]
+     * Open the roleplay modal for a contact (dialog mode).
      */
     open: function (data) {
-      if (!config) {
-        throw new Error("Call SeamlessRoleplay.init() before open()");
-      }
-      if (!data || !data.contactName || !data.contactCompany || !data.contactTitle) {
-        throw new Error(
-          "SeamlessRoleplay.open() requires { contactName, contactCompany, contactTitle }"
-        );
+      try {
+        if (!initCalled) {
+          logError("open", "init() must be called first");
+          return;
+        }
+        if (!data || !data.name || !data.domain || !data.company || !data.title) {
+          logError("open", "requires { name, domain, company, title }");
+          return;
+        }
+
+        // If already open, tear down first (also cancels any pending close timer)
+        if (overlay || (iframe && mode)) teardown();
+
+        pendingContactData = data;
+        callbacks.onCallStarted = data.onCallStarted || null;
+        callbacks.onCallEnded = data.onCallEnded || null;
+        callbacks.onClose = data.onClose || null;
+        callbacks.onError = data.onError || null;
+        mode = "dialog";
+
+        // Listen for messages
+        listener = handleMessage;
+        window.addEventListener("message", listener);
+
+        // Build overlay
+        var el = document.createElement("div");
+        el.id = "seamless-roleplay-overlay";
+        var s = el.style;
+        s.position = "fixed";
+        s.top = "0";
+        s.left = "0";
+        s.width = "100%";
+        s.height = "100%";
+        s.zIndex = "2147483647";
+        s.display = "flex";
+        s.alignItems = "center";
+        s.justifyContent = "center";
+        s.background = "rgba(0, 0, 0, 0.6)";
+        s.backdropFilter = "blur(4px)";
+
+        var container = document.createElement("div");
+        var cs = container.style;
+        cs.position = "relative";
+        cs.width = "90vw";
+        cs.maxWidth = "1100px";
+        cs.height = "85vh";
+        cs.maxHeight = "800px";
+        cs.borderRadius = "24px";
+        cs.overflow = "hidden";
+        cs.background = "#fff";
+        cs.boxShadow = "0 25px 60px rgba(0,0,0,0.3)";
+
+        var closeBtn = document.createElement("button");
+        closeBtn.type = "button";
+        closeBtn.innerHTML = "&times;";
+        var cbs = closeBtn.style;
+        cbs.position = "absolute";
+        cbs.top = "12px";
+        cbs.right = "12px";
+        cbs.zIndex = "10";
+        cbs.width = "32px";
+        cbs.height = "32px";
+        cbs.border = "none";
+        cbs.borderRadius = "50%";
+        cbs.background = "rgba(0,0,0,0.08)";
+        cbs.color = "#333";
+        cbs.fontSize = "20px";
+        cbs.cursor = "pointer";
+        cbs.display = "flex";
+        cbs.alignItems = "center";
+        cbs.justifyContent = "center";
+        cbs.lineHeight = "1";
+        closeBtn.addEventListener("click", close);
+
+        var iframeEl = createIframe();
+
+        container.appendChild(closeBtn);
+        container.appendChild(iframeEl);
+        el.appendChild(container);
+
+        el.addEventListener("click", function (e) {
+          if (e.target === el) close();
+        });
+
+        overlay = el;
+        iframe = iframeEl;
+        document.body.appendChild(overlay);
+      } catch (e) {
+        logError("open", e);
+        teardown();
+        if (data && typeof data.onError === "function") {
+          try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during open" }); } catch (_) {}
+        }
       }
+    },
 
-      // If already open, close first
-      if (overlay) {
-        doClose();
+    /**
+     * Mount the roleplay into a container element (full-page embed).
+     */
+    mount: function (container, data) {
+      try {
+        if (!initCalled) {
+          logError("mount", "init() must be called first");
+          return;
+        }
+        if (!container || !container.appendChild) {
+          logError("mount", "requires a DOM element as first argument");
+          return;
+        }
+        if (!data || !data.name || !data.domain || !data.company || !data.title) {
+          logError("mount", "requires { name, domain, company, title }");
+          return;
+        }
+
+        // If already open, tear down first (also cancels any pending close timer)
+        if (overlay || (iframe && mode)) teardown();
+
+        pendingContactData = data;
+        callbacks.onCallStarted = data.onCallStarted || null;
+        callbacks.onCallEnded = data.onCallEnded || null;
+        callbacks.onClose = data.onClose || null;
+        callbacks.onError = data.onError || null;
+        mode = "mount";
+        mountContainer = container;
+
+        // Listen for messages
+        listener = handleMessage;
+        window.addEventListener("message", listener);
+
+        var iframeEl = createIframe();
+        iframe = iframeEl;
+        container.appendChild(iframeEl);
+      } catch (e) {
+        logError("mount", e);
+        teardown();
+        if (data && typeof data.onError === "function") {
+          try { data.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during mount" }); } catch (_) {}
+        }
       }
+    },
+
+    /**
+     * Open the add-to-scenario dialog for bulk contact import.
+     */
+    addToScenario: function (opts) {
+      try {
+        if (!initCalled) {
+          logError("addToScenario", "init() must be called first");
+          return;
+        }
+        if (!opts || !opts.contacts || !Array.isArray(opts.contacts)) {
+          logError("addToScenario", "requires { contacts: [...] }");
+          return;
+        }
+        if (opts.contacts.length === 0) {
+          logError("addToScenario", "requires at least 1 contact");
+          return;
+        }
+        if (opts.contacts.length > 25) {
+          logError("addToScenario", "supports up to 25 contacts");
+          return;
+        }
+
+        // Validate required fields on each contact
+        var requiredFields = ["name", "company", "title", "domain"];
+        for (var i = 0; i < opts.contacts.length; i++) {
+          for (var j = 0; j < requiredFields.length; j++) {
+            if (!opts.contacts[i][requiredFields[j]]) {
+              logError("addToScenario", "contact at index " + i + " is missing required field: " + requiredFields[j]);
+              return;
+            }
+          }
+        }
+
+        // Tear down any existing dialog (also cancels any pending close timer)
+        if (overlay || (iframe && mode)) teardown();
+
+        addToScenarioPendingContacts = opts.contacts;
+        addToScenarioCallbacks.onComplete = opts.onComplete || null;
+        addToScenarioCallbacks.onClose = opts.onClose || null;
+        addToScenarioCallbacks.onError = opts.onError || null;
+        mode = "add-to-scenario";
+
+        // Listen for messages
+        listener = handleMessage;
+        window.addEventListener("message", listener);
+
+        // Build overlay — wide, compact dialog
+        var el = document.createElement("div");
+        el.id = "seamless-roleplay-overlay";
+        var s = el.style;
+        s.position = "fixed";
+        s.top = "0";
+        s.left = "0";
+        s.width = "100%";
+        s.height = "100%";
+        s.zIndex = "2147483647";
+        s.display = "flex";
+        s.alignItems = "center";
+        s.justifyContent = "center";
+        s.background = "rgba(0, 0, 0, 0.5)";
+        s.backdropFilter = "blur(4px)";
+
+        var container = document.createElement("div");
+        var cs = container.style;
+        cs.position = "relative";
+        cs.width = "520px";
+        cs.maxWidth = "95vw";
+        cs.height = "320px";
+        cs.maxHeight = "80vh";
+        cs.borderRadius = "24px";
+        cs.overflow = "hidden";
+        cs.background = "#fff";
+        cs.boxShadow = "0 25px 60px rgba(0,0,0,0.3)";
+
+        var iframeEl = document.createElement("iframe");
+        iframeEl.src = getOrigin() + "/embed/add-to-scenario";
+        iframeEl.style.width = "100%";
+        iframeEl.style.height = "100%";
+        iframeEl.style.border = "none";
+        iframeEl.style.display = "block";
+        iframeEl.style.position = "absolute";
+        iframeEl.style.top = "0";
+        iframeEl.style.left = "0";
+        iframeEl.style.zIndex = "1";
+
+        var closeBtn = document.createElement("button");
+        closeBtn.type = "button";
+        closeBtn.innerHTML = "&times;";
+        var cbs = closeBtn.style;
+        cbs.position = "absolute";
+        cbs.top = "10px";
+        cbs.right = "10px";
+        cbs.zIndex = "100";
+        cbs.width = "26px";
+        cbs.height = "26px";
+        cbs.border = "none";
+        cbs.borderRadius = "50%";
+        cbs.background = "rgba(0,0,0,0.08)";
+        cbs.color = "#333";
+        cbs.fontSize = "16px";
+        cbs.cursor = "pointer";
+        cbs.display = "flex";
+        cbs.alignItems = "center";
+        cbs.justifyContent = "center";
+        cbs.lineHeight = "1";
+        cbs.transition = "background 0.15s";
+        closeBtn.addEventListener("mouseenter", function () { cbs.background = "rgba(0,0,0,0.15)"; });
+        closeBtn.addEventListener("mouseleave", function () { cbs.background = "rgba(0,0,0,0.08)"; });
+        closeBtn.addEventListener("click", close);
 
-      iframeAuthenticated = false;
-      pendingContactData = data;
+        container.appendChild(iframeEl);
+        container.appendChild(closeBtn);
+        el.appendChild(container);
 
-      var dom = createOverlay();
-      overlay = dom.overlay;
-      iframe = dom.iframe;
-      document.body.appendChild(overlay);
+        el.addEventListener("click", function (e) {
+          if (e.target === el) close();
+        });
+
+        overlay = el;
+        iframe = iframeEl;
+        document.body.appendChild(overlay);
+      } catch (e) {
+        logError("addToScenario", e);
+        teardown();
+        if (opts && typeof opts.onError === "function") {
+          try { opts.onError({ code: "SDK_ERROR", message: e.message || "Unexpected error during addToScenario" }); } catch (_) {}
+        }
+      }
     },
 
     /**
-     * Close the modal. Sends roleplay-close to iframe, tears down DOM.
+     * Close the roleplay.
      */
     close: function () {
-      if (!overlay) return;
-      sendToIframe({ type: "roleplay-close" });
-      // Give iframe a moment to clean up, then force-close
-      setTimeout(doClose, 300);
+      try {
+        close();
+      } catch (e) {
+        logError("close", e);
+        teardown();
+      }
     },
 
     /**
-     * Full cleanup — remove all event listeners and DOM.
+     * Destroy the SDK — clears state, timers, and DOM.
      */
     destroy: function () {
-      if (overlay) {
-        doClose();
-      }
-      if (globalListener) {
-        window.removeEventListener("message", globalListener);
-        globalListener = null;
+      try {
+        if (refreshTimer) {
+          clearTimeout(refreshTimer);
+          refreshTimer = null;
+        }
+        teardown();
+        publishableKey = null;
+        userId = null;
+        userEmail = null;
+        userToken = null;
+        trialUrl = null;
+        sessionToken = null;
+        sessionExpiresAt = 0;
+        fetchingSession = null;
+        initCallbacks = { onReady: null, onError: null };
+        initCalled = false;
+      } catch (e) {
+        logError("destroy", e);
       }
-      config = null;
     },
   };
 
-  // Expose globally
   if (typeof window !== "undefined") {
     window.SeamlessRoleplay = SeamlessRoleplay;
   }
-
-  // Support CommonJS / ESM
   if (typeof module !== "undefined" && module.exports) {
     module.exports = SeamlessRoleplay;
   }